How To Design Your App

App Building, App Design Johnny 31 Mar 2015

How to design an app? Not just any app, but an incredibly gorgeous app? With these pro tips for app design you make the most professional, gorgeous and sophisticated app.

Building an app with AppMachine is easy, but having to choose out of unlimited design options  can make you feel fuzzy. Don’t worry: here are the best tips for your app design. Some are general tips but all apply to our user friendly CMS which will guide you through the design process.

Align your app design with corporate design

Your mobile app could be a crucial part of your marketing strategy, so make sure your app matches your corporate design. Aligning app design with any corporate style is easy. Logo, color scheme, typography? All can be adjusted in your app design.

Tip: get ready and collect logo’s and color numbers of your corporate design.


Logos and Colors

Step 1: Choose a skin

The first thing to do is choose a template skin that goes best with your corporate design or choose the Default skin to start from scratch.

Alter it so that it exactly fits your corporate design. Don’t be afraid to use a template, even if you are a pro designer. Almost everything in a template can be adjusted: images, colors, icons etcetera. Apps need a certain amount of contrast, so choose at least two or three contrasting colors. As you will notice, AppMachine offers a set of standard colors with two main colors and two or three supporting colors. Feel free to make your own color scheme.

Select a skin

Tip: Using 2 different colors in combination with variations of white or black in your app is enough. You don’t want to make it into a Christmas tree app.

Tip: Keep the icons in your app about the same overall size. If you are using line icons try to keep to the same line thickness of the icons throughout your app. Try to be consistent in your style.

Step 2: Settings and Design Homescreen

Your homescreen will be your first masterpiece. Choose it carefully. Remember that users will be using this screen to navigate. A good homescreen is also your chance to make the ultimate ‘branding’ impression. For an example of a well designed homescreen, have a look at the Dancefair app.

Homescreens

Deciding the menu

Choosing a navigation menu will affect the way people use your app. Keep in mind that design should also be about great user experience.
There are several options for your navigation: a text menu, icon menu or tab bar menu, et cetera. There are no rules which menu is best. It’s all up to you. Feel free to experiment before you decide. The Betsie Larkin app and the Solarstone app are both artist apps, but have two totally different and beautifully designed menus.

If you use icons on your homescreen, choose an icon set or make your own icons. Make sure your icons are big enough and have plenty of space to be pressed, even for people with big thumbs.

Tip: Make your own icons and preferably use vector images not bitmaps for your icons. Don’t know how to make your own? Simply use ours and change the colors or anything you like to make ’em fit your corporate style.

NavigationStyles

Choosing a background

First make your homescreen background. Use a background image or leave it blank with only color and a logo. A background image should be of impressive quality. Hard to find? No way: AppMachine offers you 10 royalty free and professional Getty Images stock photos for only . The previously mentioned apps of Betsie Larkin and Solarstone are good examples of professional photography. Or see how the Masala Cafe app has an attractive homescreen with just a nice background and a contrasting color in its logo.

To make the most out of your homescreen, you could design and upload your own image. Use transparency, color gradients, blurring to make it look gorgeous. Mind that there are several screen sizes, so keep safe margins at every side. If you have questions during the design process, simply go to our AppMachine Academy which contains several detailed How To’s.

Tip: spice up your design with a transparent navigation bar if you use a background image.

Backgrounds

Font

Choosing a font in your app applies only to iOS apps. Android app fonts will default to Roboto. A full list of supported iOS fonts is available at iosfonts.com Using typography in Android is possible though by placing text on an image, for example if your app uses an image menu like the TT Motor Festival app.

Step 3: App wide design

So you have designed your homescreen and made your menu. Your design is now ready to be copied to the rest of your app. You could keep the app wide design, or change every single page. Simply upload new top images, or even change the page design completely with a new background image and a different color. You could also design your own buttons and navigation arrows. Make sure you keep the peace in your app by using the 2 or 3 main colors with the supporting colors and keep in mind that contrast is important.

Tip: make your app stand out with custom made buttons and navigation arrows.

Tip: try to maintain contrast in your app. It’s about the content, not about the beautiful background where the text is projected on.

Preview

Different submenus

You don’t have to stick to your homescreen navigation for the rest of your app. You could have an icon navigation menu on your homescreen with any submenu’s as a list menu. Just test and see the result. Not happy? No worries. Simply try another design feature. See how Pure Madness Chocolate changes its main menu for the product submenu.

Tip: Experiment with different menu styles for your submenus.

Chocolate SubMenu

Step 4: Last but not least, the splash screen

The splash screen is the loading screen which, hopefully, only appears shortly on the device of your app users. Once the app is loaded, the splash screen disappears and your users will see the homescreen. Make a good splash screen, otherwise it seems the app is hanging. At least tell users the app is loading. Make your splash screen in portrait mode and keep a safe margin when placing images on the screen. Various smartphones have various screen sizes so don´t place any images on the side of the screen.

Further reading: how to design your app with the 2015 guidelines for app design

 

Splashscreens

 

Don’t forget to preview your design changes

During the building process, you’ll see a design sheet in the AppMachine CMS. Simply change something and be amazed by the result in the smartphone simulator on the right side of the screen. Or watch the result with the previewer on your smartphone.

Tip: download the previewer app to see your app in progress live on your smartphone.

Download Previewer

 

Good luck designing your app, small changes can make big differences!

If you really do not have the time to do your own app design or it’s just not your ‘thing’  ask a pro to design your app for you.

Build your own app

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

Start building for free