Step 3: Adding Design Elements

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 home screen. 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 home screen 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 accommodate more design space above. We currently use the following layout types:
  • Grid
  • Swiping list
  • Slide in
  • Tab-bar
  

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 accommodate increased resolution displays.

The following elements can be added:
  • Application Icon - This is your main application icon, which appears on the device's home screen 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 specific imagery for almost all screen ratios - 16:9, 18.5:9, and 19.5:9, that cover most iOS and Android-based device screen sizes.
 
  • 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 and 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 home screen, in case you are using Monochrome or Flat icon sets.
  • 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 home screen/slide in the 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 home screen/slide in the menu. Currently, it's 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 to change any of the specific app sections colors, 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 event-based app? [video]
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us