Mobile Design Pattern: Application Layout
Article Metadata
This design pattern is part of the Mobile Design Patterns series.
Introduction
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.
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).
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.
Creating a button requires designing skills; however a developer could just make a usable and attractive button, as illustrated below.
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.
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)
17 Sep
2009
This article demonstrates a deeper meaning of mobile design pattern: Application Layout. Basically this article focuses on selecting the layout design for mobile applications.
The author has explained this pattern with number of examples and screenshots. The design component illustrated in the article makes it easier to understand the mobile design pattern. The author has also explained how to choose a layout design with the various type of components like tabbed view or horizontal scrollbar and varoius type of layouts.
whenever the size of layout is not recommended, an attractive background image is also used as shown in screenshots. Sometimes layout involves animations which would be changed corresponding menu button as shown in screenshots describing in details in this article.
In further, the designer can try to implement this for a different attractive layout for mobile applications.