Support Center

Step 3: Adding Design Elements

Last Updated: Jan 20, 2015 12:48PM CET

Make your app stand out!

 
Creating the look and feel of your app is one of the most rewarding parts of the app making process. ShoutEm offers several design-related tools to make your app unique. To access them, first click on the Design tab icon in the left menu:
 

The Design tab is divided into three different areas:
 
 
  • Home - Image files to create your app's identity
  • Colors & Graphics - Icon layout, icon colors and custom upload options
  • Graphics - Modify your app's colors based on the section

Home Screen

This area lets you modify different icon elements, which are visible on the app's homescreen. Choose from multiple or single-row layouts, set an icon color scheme or add your own icons.

Layout - Icons can be arranged in different patterns on the homescreen to allow you to work with the design you have in mind. Icon layouts that are 3x are typically a bit larger, whereas the 4x and 5x options display the icons smaller to accomodate more design space above. We currently use the following layout types:
  • Grid
  • Swiping list
  • Slide in
 
  

Graphics

This area is where you bring in your design elements such as backgrounds and publish-related icons. Uploaded images should optimally be in PNG file format, although most major image types are accepted, and sized to accomodate increased resolution displays.

The following elements can be added:
 
  • Application Icon - This is your main application icon, which appears on the device's homescreen on both iPhone and Android.
 
  • Navigation Bar Background - This image appears at the top of the app when viewing content inside different application sections.
 
  • Launch Image - This image displays for a few seconds on the initial load of your app for both Android and iPhone. Currently you can upload iPhone 4 and iPhone 5 specific imagery. iPhone 4 image is scaled up for Android devices, but we plan to add the ability to upload Android specific imagery in the near future.
 
  • Home Image - This is your main background image, designed with icon placement in mind. Image size is the same as for the Launch images.
 
 

Colors & Fonts

Our color skinning feature allows you to color your content sections differently, which serves to add another level of flexibility in the overall look of your app. This feature also controls text, button and comment box coloring and allows you to select a predefined template for your app.

See the layout below to learn which box corresponds with which setting.
 
  • ​Icon color -  By using this option you can change the color of the icons on the homescreen, in case you are using Monochrome or Flat icon set.
  • Icon set - We currently have 3 predefined icon sets: Monochrome, Flat and Color​. You can select any of those three, or upload your own icons to the app builder.
 
  • Upload icons - You can use this functionality for uploading your own icons. To upload your icon, click on the upload icons button, then click on the placeholder box for the icon. 
 

After uploading your own icon, you will be able to use it when setting up the design of your applications main menu. In case you are looking for some free icon resources, you can check Iconmonstr and Iconfinder
  • Text color - This option allows you to select a text color for the homescreen / slide in menu. Currently it is not possible to change the text color for other app sections.
  • Font - This option allows you to select the font used on the applications homescreen / slide in menu. Currently it is not possible to change the font for other app sections.
Under this section you can also set up a predefined color theme for your application.


We have set up those predefined color schemes to be the best fit for most applications. However, you have the ability of changing any of the specific app sections color, by using the color picker beneath the predefined color themes.
 

Ready to Publish?

Continue to Step 4: Testing and Publishing
 

Related:

How to make an events based app? [video]

Contact us

Didn't find what you were looking for? No problem! Feel free to
write to our support team.

shoutem@shoutem.com
http://assets1.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete