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 over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Mobile Design Pattern: Application Layout

From Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot fixing redirect link.(Moving links from TO
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
(One intermediate revision by one user not shown)
Line 1: Line 1:
{{ArticleMetaData <!-- v1.1 -->
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example]] -->
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
|id= <!-- Article Id (Knowledge base articles only) -->
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->
|translated-from-id= <!-- Id of translated revision -->
|review-by= <!-- After re-review: [[User:username]] -->
|review-timestamp= <!-- After re-review: YYYYMMDD -->
|update-by= <!-- After significant update: [[User:username]]-->
|update-timestamp= <!-- After significant update: YYYYMMDD -->
|creationdate= 20090531
|author= [[User:Croozeus]]
[[Category:Mobile Design Patterns]]
This design pattern is part of the [[:Category:Mobile Design Patterns|Mobile Design Patterns]] series.<br>
This design pattern is part of the [[:Category:Mobile Design Patterns|Mobile Design Patterns]] series.<br>

Latest revision as of 06:06, 16 April 2012

Article Metadata
Created: croozeus (31 May 2009)
Last edited: hamishwillee (16 Apr 2012)

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

[edit] 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.

[edit] 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.

[edit] See Also

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

This page was last modified on 16 April 2012, at 06:06.
98 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.