UI Style/Visual Guidelines

14-Oct-2009

Maemo 5 Desktop Widget UI Guidelines
This document explains how to build consistent and user-friendly desktop widgets following the design philosophy, interaction model, and visual look-and-feel of Maemo 5. This document is complemented by the Fremantle Master Layout Guide and the Hildon 2.2 UI Style Guide containing visual guidance and references, as well as by the Hildon 2.2 Widget UI Specification containing interaction and technical background information.
Document; Maemo, UI --- Touch UI / UI Design, Usability; English (en)

14-Oct-2009

Fremantle Master Layout Guide
This document introduces the exact layout and graphics of Fremantle. It discusses all layout-related topics, including margins, dialogues, text editors, and colours. For detailed instructions on how to use the colours in a logical manner, refer to the Hildon 2.2 Widget UI Specification.
Document; Maemo, UI --- Touch UI / UI Design, Usability; English (en)

13-Oct-2009

Layout Samples for Mobile Web Templates for High-End Devices
These layout samples are created using components from the Nokia Mobile Web Templates for High-End Devices. The layouts illustrate common ways to combine components within the context of a corporate website, a news website, and an online store. Layout Samples for Mobile Web Templates for High-End Devices is part of the Mobile Web Templates and Layout Samples series. For an introduction and more information, see Mobile Web Templates - introduction to templates.
Application --- Example; Maemo, S60, Series 40, UI --- UI Design, Usability, Web Technology --- Browsing / Web Runtime (WRT); English (en)

13-Oct-2009

Layout Samples for Mobile Web Templates for Low-End Devices
These layout samples are created using components from the Nokia Mobile Web Templates for Low-End Devices. The layouts illustrate common ways to combine components within the context of a corporate website, a news website, and an online store. Layout Samples for Mobile Web Templates for Low-End Devices is part of the Mobile Web Templates and Layout Samples series. For an introduction and more information, see Mobile Web Templates - introduction to templates.
Application --- Example; S60, Series 40, UI --- UI Design, Usability, Web Technology --- Browsing / Web Runtime (WRT); English (en)

13-Oct-2009

Nokia Mobile Web Templates for High-End Devices
The Nokia Mobile Web Templates provide a series of custom, styled, and tested mobile web components. You can either mix and match the components or use the full series to completely customise your mobile website or application. The components are suitable for most S60 3rd Edition and S60 5th Edition devices from Nokia and also are compatible with newer Series 40 WebKit and Maemo devices. Mobile Web Templates for High-End Devices is part of the Mobile Web Templates and Layout Samples series. For an introduction and more information, see Mobile Web Templates - introduction to templates.
Application --- Example; Maemo, S60, Series 40, UI --- UI Design, Usability, Web Technology --- Browsing / Web Runtime (WRT); English (en)

13-Oct-2009

Layout Samples for Mobile Web Templates for Mid-Range Devices
These layout samples are created using components from the Nokia Mobile Web Templates for Mid-Range Devices. The layouts illustrate common ways to combine components within the context of a corporate website, a news website, and an online store. Layout samples for Mobile web templates for mid-range devices is part of the Mobile web templates and Layout samples series. For an introduction and more information, see Mobile Web Templates - introduction to templates.
Application --- Example; Series 40, UI --- UI Design, Usability, Web Technology --- Browsing / Web Runtime (WRT); English (en)

13-Oct-2009

Nokia Mobile Web Templates for Mid-Range Devices
The Nokia Mobile Web Templates are a series of custom, tested mobile Web styles and components. Creative developers can mix and match components as needed or use the full series to completely customise their website or application. This series of templates is primarily intended for mid-range devices. Mobile Web Templates for Mid-Range Devices is part of Mobile Web Templates and Layout Samples series. For an introduction and more information, see Mobile Web Templates - introduction to templates.
Application --- Example; Series 40, UI --- UI Design, Usability, Web Technology --- Browsing / Web Runtime (WRT); English (en)

13-Oct-2009

Nokia Mobile Web Templates for Low-End Devices
The Nokia Mobile Web Templates are a series of custom, tested mobile web styles and components. Creative developers can mix and match components as needed or use the full series to completely customise their website or application. This series of templates is primarily intended for low-end devices. Mobile Web Templates for Low-End Devices is part of the Mobile Web Templates and Layout Samples series. For an introduction and more information, see Mobile Web Templates - introduction to templates.
Application --- Example; S60, Series 40, UI --- UI Design, Usability, Web Technology --- Browsing / Web Runtime (WRT); English (en)

07-Oct-2009

User Experience Evaluation Model
The Forum Nokia User Experience programme provides an evaluation service that evaluates a developer’s application from the user's point of view. The evaluation comprises multiple evaluation items described in this document. More information about the User Experience Programme can be found from the Forum Nokia website.
Document; Development Process, Flash, Java, S60, Series 40, Symbian C++, UI, Usability, Web Technology --- Web Runtime (WRT); English (en)

29-Sep-2009

Design and User Experience Library
The Design and User Experience Library gathers all essential aspects of design and usability into one. The library includes different kinds of guidelines, material about theme design, graphics design, and game design, as well as the basics of usability.
Document; Development Process, Quality, UI --- Touch UI / UI Design, Usability; English (en)

23-Jun-2009

Series 40 UI Style Guide
Get an overview of the Series 40 user interface and learn its essential parts. This document is targeted for anybody who needs a general overview of UI design principles for designing well-integrated, consistent, and usable Series 40 mobile services and applications.
Document; Java, Series 40, UI, Usability; English (en)

18-Sep-2009

Hildon 2.2 UI Style Guide
This document gives an overview of the Hildon 2.2 UI style for Maemo 5. It explains the user interface principles and provides guidelines and recommendations to ensure that all user interfaces designed for the platform offer a similar and consistent user experience.
Document; Maemo, UI --- Touch UI / UI Design, Usability; English (en)

18-Sep-2009

Redesigning from Maemo 4 to Maemo 5
This document describes how to redesign a Maemo 4 application for Maemo 5, that is, the Hildon 2.2 UI Style. The Modest email client is used as an example application. For detailed information on the UI Style, see the Hildon 2.2 UI Style Guide. For detailed information on the Hildon toolkit widgets, refer to the Hildon 2.2 Widget UI Specification. The exact layout and graphics are defined in the Fremantle Master Layout Guide.
Document; Maemo, UI --- Touch UI / UI Design, Usability; English (en)

16-Sep-2009

Flash Lite Components
This resource file includes ten Flash Lite components; Button component, Calendar component, Checkbox component, Contacts component, List component, Media data component, Messaging component, Pop-up component, Radiobutton component, and Scrollbar component. The components can be used to develop applications to devices supporting Flash Lite 2.0 (and above). The developing environment requirements are Adobe Flash CS3 or CS4. The resource is closely related to Guide to Flash Lite Components. Please give feedback on the components through the Flash Lite Discussion Board.
Application --- Example; Development Process, Flash --- Flash Lite, S60, Series 40, UI --- Touch UI / UI Design, Usability; English (en)

02-Jun-2009

Guide to Flash Lite Components
The purpose of this document is to describe a generic process for creating, using, and customising Flash Lite User Interface and Data components (that is, S60 Platform Services). This guide focuses on the methodology and processes as a whole, rather than the implementation details and practices of individual components. The document is targeted at intermediate users of Flash and ActionScript from Adobe. This document is closely related to Flash Lite Components.
Document; Development Process, Flash --- Flash Lite, S60, Series 40, UI --- Touch UI / UI Design, Usability; English (en)

S60 Theme Templates
These templates are for use with S60 3rd Edition themes created using Carbide.ui Theme Edition. The templates are available in Adobe Illustrator CS2 and CS3 formats. You can use these templates to design your own themes and theme highlights. See the Carbide.ui Theme Edition Tutorial in the Design and User Experience Library for more details.
Application --- Example; Customization ... Themes, S60, UI, Usability; English (en)

Visual Design
The visual design section of the Design and User Experience library aims to provide students and designers in the wider digital industries with an introduction to the topic of visual design for mobile devices. The section introduces the unique characteristics of mobile devices and relates these to common concerns of visual design including screen size, use of colour, image support, and the use of fonts. The section also reviews mainstream design principles and provides examples of their application within the specific context of mobile design.
Web Page --- Home Page; Graphics, S60, Series 40, UI --- Touch UI / UI Design, Usability; HTML (.htm/.html); English (en)

Interaction Design
This library section discusses interaction design, an essential part of the development of any product or service with a user interface (UI), whether it is a Web page, a desktop application, mobile application, or an embedded UI. Industrial design (designing the physical hardware or device) and visual design are closely connected to interaction design – interaction design must acknowledge and support the hardware characteristics, and all visual elements should have a meaningful purpose as defined in the interaction design.
Web Page --- Home Page; Development Process, S60, Series 40, UI --- Touch UI / UI Design, Usability; HTML (.htm/.html); English (en)

Creating Multimedia Content
The Multimedia section of the Design and User Experience Library provides an introduction to the video capabilities of Nokia mobile devices and guidelines for creating and publishing mobile videos. It offers hands-on recommendations for practical issues, such as conversion settings and tool recommendations. The section covers the basics of audio and video coding, including file formats.
Web Page --- Home Page; Development Process, Multimedia --- Video, UI, Usability; HTML (.htm/.html); English (en)

30-Oct-2008

Game Design
The Game design section of the Design and User Experience Library discusses usability and user experience issues that are specific to game design. The section describes usability from the game design point of view and contains game experience-related information, tools, and examples to assist game developers in developing usable games. The section gives guidance on how to sell and deliver a positive game experience and also describes how mobile game heuristics can be used for evaluating mobile games.
Web Page --- Home Page; Development Process, Entertainment --- Games, Quality, UI --- UI Design, Usability; HTML (.htm/.html); English (en)

30-Oct-2008

Standard S60 UI Components
This Standard S60 UI Components section of the Design and User Experience Library provides an extensive description of the appearance of the most useful S60 UI components. The section shows with the help of several examples how flexibly the UI components can be used in any application UI.
Web Page --- Home Page; S60, Symbian C++, UI --- UI Design, Usability; HTML (.htm/.html); English (en)

30-Oct-2008

S60 Scalable UI
The Scalable UI section of the Design and User Experience Library provides an introduction to the S60 scalable UI and offers guidelines for developing scalable S60 applications. In the S60 platform, UI scalability means the application's ability to adjust to different display resolutions and orientations.
Web Page --- Home Page; S60, UI --- UI Design, Usability; HTML (.htm/.html); English (en)

30-Oct-2008

General Usability Guidelines
Besides general usability guidelines, this section of the Design and User Experience Library also contains guidelines that are specific to Nokia platforms. This section also includes checklists that you can use to ensure the usability and user experience of your application.
Web Page --- Home Page; Development Process, Quality, UI --- UI Design, Usability; HTML (.htm/.html); English (en)

30-Oct-2008

Visual and Graphic Design
The Visual and Graphic Design section of the Design and User Experience Library explains the basic principles of visualisation and graphic design, and provides examples of good and bad design. The section discusses graphic design for the mobile world, for example, colours, contrast, animation, and icon design, and gives tips on how to make the most of the small screen of a mobile device. The example images relate to the S60 platform and the QVGA display resolution, but the same design principles can be applied to virtually any mobile platform, device, or display.
Web Page --- Home Page; Development Process, Graphics, Quality, UI --- UI Design, Usability; HTML (.htm/.html); English (en)

30-Oct-2008

User Experience
The User Experience section of the Design and User Experience Library contains guidance to assist developers in developing usable applications, application-related articles, information, and tools for assisting application developers. The section discusses the different aspects of a mobile application development project from the usability point of view and contains different design patterns and cost justifications.
Web Page --- Home Page; Development Process, Quality, UI, Usability; HTML (.htm/.html); English (en)

02-Oct-2008

Introduction to S60 Touch
In S60 5th Edition the software platform supports both traditional keypad and touch screen. This document is an introduction to S60 touch providing user experience guidelines for designing applications. It discusses what needs to be considered when dealing with a touch UI. The document handles interaction styles and touch components, and explains the difference between a touch-enabled and a touch-optimized application.
Document; Development Process, Quality, S60, UI --- Touch UI / UI Design, Usability; Adobe PDF (.pdf); English (en)

25-Jun-2008

Advertising in Mobile Devices
This article provides guidelines for effective, user-friendly mobile advertising. The guidelines are divided into three subcategories: General, Placement, Content and Context, and Taking care of the user.
Document --- Article; Advertising, Development Process, Quality, UI, Usability; English (en)

25-Jun-2008

Mobile Design Showcases
This document highlights some examples of good mobile design, evaluating them on the basis of interactivity, ease-of-use, and visual look.
Document --- Article; Quality, S60, Series 40, UI --- UI Design, Usability; English (en)

05-Jun-2008

The Value of Good Design
This article gives an explanation to what is good design and why it should be pursued in the first place. The article discusses the very core of design and the value that good design can bring to the end product. The article also takes a look into design today and tomorrow.
Document --- Article; Java, Quality, S60, Series 40, UI, Usability; English (en)

05-Jun-2008

Getting Started with Mobile Design
This document provides an overview to different aspects of mobile designing, such as the mobile context, tools, and standards. The challenges of mobile design are discussed with guidance of how to overcome them.
Document; Development Process, Java, Quality, UI, Usability; English (en)

12-Feb-2008

Designing for the Big Screen: Developing Applications for the Nokia E90 Communicator
This article discusses designing high-quality applications for the Nokia E90 Communicator and gives tips and tricks on designing for a large display. The article describes how to achieve a good balance in terms of both the visual layout of the UI elements and the amount of information presented on the screen, still fully utilizing the big screen.
Document; Enterprise, Quality, S60 ... S60 3rd Edition, Feature Pack 1, UI, Usability; English (en)

11-Sep-2007

S60 UI & Usability eLearning
This module covers the basic UI principles for mobile device development before moving on to introduce the basic features of S60 and how they promote good usability.
Training Course --- eLearning; S60, Symbian C++, UI, Usability; English (en)

11-Sep-2007

S60 Scalable UI Guidelines eLearning
This module begins with an introduction the S60 Scalable UI, looking at the benefits it can bring to the developer. The module then moves on to look at some of the issues involved with developing a scalable application, from the design phase through the implementation and testing phases.
Training Course --- eLearning; S60, Symbian C++, UI, Usability; Binary (.bin/.exe); English (en)

12-Jul-2007

S60 Platform: How to Prototype Applications with Flash
Learn how to develop UI prototypes for S60 mobile devices with Adobe Flash Lite. Although the focus is on the S60 platform, most of the techniques in this document are applicable to other mobile platforms, too.
Document; Flash --- Flash Lite, Quality, S60, UI, Usability; Adobe PDF (.pdf); English (en)

06-Jul-2007

S60 3rd Edition FP2: UI Style Guide
Read this document to get an overview of the S60 user interface in S60 3rd Edition, Feature Pack 2 and to familiarize yourself with its essential parts. The document can be used as an introduction to the style or as reference material but it also provides background material to help user interface designers make decisions about their products.
Document; S60, Symbian C++, UI, Usability; Adobe PDF (.pdf); English (en)

06-Jul-2007

S60 UI Style Guide v1.3
Read this document to get an overview of the S60 user interface and to familiarize yourself with its essential parts. The updated document describes the new features introduced in S60 3rd Edition and S60 3rd Edition, Feature Pack 1, but it is also valid for earlier S60 platform releases. The document can be used as an introduction to the style or as reference material but it also provides background material to help user interface designers make decisions about their products.
Document; S60, Symbian C++, UI, Usability; Adobe PDF (.pdf); English (en)

11-Jun-2007

S60 Platform: Custom UI and Screen Rotation Example
Use this C++ example application to learn the key functionalities of the screen rotation, custom component handling, status pane handling, and picture scaling on the S60 UI layer. Main classes CAknViewAppUi, CAknView, CCoeControl.
Application --- Example; S60, Symbian C++, UI, Usability; Zip Archive (.zip); English (en)

06-Jul-2006

Flash Lite: Visual Guide v1.1
This updated document describes how to develop usable S60 Mobile Flash user interfaces that take the best out of the possibilities that Flash Lite offers. Also other factors that affect the total user experience of Flash Lite applications, such as performance, are shortly explained.
Document; Flash --- Flash Lite, Quality, S60, UI, Usability; Adobe PDF (.pdf); English (en)

08-May-2006

S60 UI Specification Guideline
This document is a practical guideline that explains how to create a good user interface (UI) specification for any application designed for the S60 platform. The document describes the purpose of the UI specification and the process needed for its creation. The S60 UI Specification Template published with this document can be used to plan UI specifications for S60 applications.
Document; Development Process, Quality, S60, Symbian C++, UI, Usability; Zip Archive (.zip); English (en)