×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Design Pattern: Application Layout

From Nokia Developer Wiki
Jump to: navigation, search
croozeus (Talk | contribs)
(New page: Category:Mobile_Design Category:Mobile_Design_Patterns This design pattern is part of the Mobile Design Patterns series.<br> ==Introduction== ...)
 
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Mobile_Design]]
+
{{ArticleMetaData <!-- v1.1 -->
[[Category:Mobile_Design_Patterns]]
+
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|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>
Line 42: Line 66:
  
 
==See Also==
 
==See Also==
* [http://library.forum.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-CB5D4F7A-CA69-49E6-839D-2F7E30641498.html A guide for newcomers - Visual Design]
+
* [http://library.developer.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-CB5D4F7A-CA69-49E6-839D-2F7E30641498.html A guide for newcomers - Visual Design]
* [http://library.forum.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-CC587793-848B-4CA8-B43A-C58CC1D55A08.html The Gestalt principles of perceptual organization]
+
* [http://library.developer.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-CC587793-848B-4CA8-B43A-C58CC1D55A08.html The Gestalt principles of perceptual organization]
 
* [[User:Croozeus#Articles on Mobile Design| See more articles on Mobile Design by Croozeus]]
 
* [[User:Croozeus#Articles on Mobile Design| See more articles on Mobile Design by Croozeus]]
  

Latest revision as of 09:06, 16 April 2012

Article Metadata
Article
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 09:06.
109 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.

×