3 steps to design your app with AppMachine

App Building, App Design Liz Bollema 15 Apr 2013

How can you make your app look gorgeous? Use all the tools AppMachine gives you to to design your app. Select a skin which gives your app an overall look and feel that you like. The skin also sets the navigation style. Secondly, select colors based on your company website to make it recognizable for your users. Customize your home menu with your own images and logo for the finishing touch.

1. Selecting a skin

While creating your app you chose a skin for the app. You can change the selected skin at the green “Design” block. Choose the skin that you feel fits your needs the most.

A skin is a combination of home screen menu settings, a color scheme and a background image. Should you select a different skin then all the customized design settings under “Home” and “Design” made up to that point will be overwritten. Customized settings made for specific building blocks will not be affected.

If you’ve made your own app design in Photoshop and would like to use these elements in your app then we suggest you start with the “Default skin”. The default skin is the most basic skin we offer and uses only black and white. This allows you to see which elements you still need to change while designing the app.

2. Selecting a color

If you’d like to customize the colors in your app to reflect your company’s colors, you can do so at the green “Design” block. This will change your app-wide settings so that you’ve got a great base of colors for the app.

Screen2-1

You can change a color by clicking on the color box. You also enter a hex code value right into the color field. We also give you the option of setting the opacity (or transparency). This can only be set if you click on the color box to reveal this option. Enter a desired % of opacity or use the slider to adjust it to the desired percentage.

Screen5

If you’ve connected your app to the browser using the LiveView option in the Previewer you can see the color changes you’ve made live as you make your changes. You can set your colors and see which of them suits you best.

If you’ve chosen a skin with a “List” menu type you can adjust the colors of the different cells (rows) of the list. Set these to transparent if you’d like to keep the background color or image from being unaltered by the overlay of the cell colors. You can also change the color of the list separator and the icons here. “Clicked” colors are those that are shown when an element is selected.

screen3

TIP: Making big changes to your app has its risks. If you want to experiment with making big changes, make a copy of the app by going to your App Dashboard > App Vitals and clicking the copy button. Test your changes in the copy. If you like them, you can apply these to the final product. 

3. Customizing your home menu with images

You can customize your home screens look and feel to suit your needs. Experiment with different menu views to find one which is appropriate for your app and its content.

Image placement in your home screen relies on the type of menu view you’ve chosen for your app. For example, a 3 icon menu that is aligned with the bottom of your app screen gives you a lot of space in the top section of your screen to place an app. The home screen has three images that can be replaced: the background image, the top image, and the logo.

a. The background image fills the whole background of the screen. To set your top image go to blue Home block > Designer tab > Navigation & Background and upload your desired background image. This image should be 640 by 1098 pixels. Make sure that this image does not contain any important information in the 146 pixels at the bottom of the image. This is the area that will be omitted on iPhone 4 and most Android screens but will be displayed on iPhone 5 screens.

If your image has a lot of contrasting colors in it you may find that it clashes with the text rendering it difficult to read for your users. Consider using a neutral “Overlay Color” with a gradient (35% generally works well) to make the text stand out better against your background image or color.

b. The top image is located at the top of your screen. This is a nice element to include in your app if you’re using a List menu. This top image scrolls up and down with your list menu should your menu have more elements than fit on the screen.

screen4

Depending on the skin you’ve chosen, there may already be a top image included in your app’s layout. You change the top image for your selected skin at Home > Settings tab > Top Image. This image should be 640 by 220 pixels. If the image happens to be smaller then we will display your image anyway but cannot guarantee that it is displayed at a proper resolution.

c. You can put a logo on the navigation bar. The image is centered and placed in the navigation bar. The height should be 88 pixels but will be adjusted to that height if you image is shorter/taller. The width should be 640 pixels. This too will be adjusted to fit if it is wider or narrower but, again, we cannot guarantee that it will look good. Please take into account that the “i” information button is always displayed in the right side of your app’s navigation bar. The logo can be set at Design > Navigation Bar & Background > Logo.

screen5

You now know the settings that can be changed relatively quickly in a “Gorgeous” app. AppMachine will continue to provide articles in the coming months about how to design your apps.

Build your own app

You start paying when you publish your app in the app stores

Start building for free