Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 03:30, 10 February 2012 by hamishwillee (Talk | contribs)

Mobile Design Pattern: Application Layout

From Wiki
Jump to: navigation, search
Article Metadata
Created: croozeus (31 May 2009)
Last edited: hamishwillee (10 Feb 2012)

This design pattern is part of the Mobile Design Patterns series.


Each application user-interface (UI) consists of composite elements like banners, buttons, icons, backgrounds, etc. Despite of existence of many attractive and enhanced user interfaces, it is recommended to choose an optimum UI design for the application taking into consideration both – Performance as well as User experience (UX) delivered by the application.

This article focuses on choosing an optimum application layout for mobile applications by giving an example of a non-conventional template layout.

Layout Design

Choosing a layout for the applications involves deciding the type of components to be used. For example, an application could use tabbed view or it could use a horizontal navigation scrollbar (at the bottom), as shown in the figure. However, using either of them involves the user to navigate to other screen by pressing left-right arrow keys.

Tabs or Scrollbars.jpg

Further, layout also involves designing placement of various components and maintaining appropriate spacing between them. Considering the desired performance of the application – the types of components should be selected.

Following are two layouts, one of which is heavier than the other (in terms of size).

Application Layout.jpg

The heavy layout uses a banner which is more appealing, colorful and attractive (as a result is larger in size, as well). The performance optimized light weight layout on the other hand uses a nearly half sized simpler banner with fewer graphic, as shown below.

Banner Layout.jpg

Creating a button requires designing skills; however a developer could just make a usable and attractive button, as illustrated below.

Button formation.jpg

The icon and the button text are centred within the basic shape of the button. It becomes important to distinguish between a selected button and a unselected button. The shadow effect, indicating depth in graphics, could be used to indicate focus on the selected button in this case. Game menus using buttons use heavy graphics to make the button more attractive; also employing sound effects while the user changes focus from one button to another.

Application Layout2.jpg

A background image could be used if the size of the layout is not a big consideration. An attractive background enhances the UX of the end-users. Also, a transparent background could be used where the background of the current theme is used as background for the application.

If the layout includes text, custom fonts could be used. The optimum custom fonts suiting the layout could be thin, light, bold, italic, heavy, etc. depending on the target audience for the application. Slope of the fonts and size could be exploited to give a unique effect.

Changing images with menu button focus

Animations could include a set of images which keep on shuffling at regular time intervals or as the navigation between the buttons take place. For example, in the above layout the images are changed when a corresponding menu button is selected. Today, animations are used exchangeable with advertisements. Read guidelines about using Mobile advertisements here.

See Also

--Submitted by croozeus 11:15, 31 May 2009 (EEST)

64 page views in the last 30 days.