Nokia Dominik Röck, Sonja Wihan.  This is a presentation about Nokia guidelines  Dominik Röck, k0rodo00  Sonja Wihan, k0wiso00.

Slides:



Advertisements
Similar presentations
Learning the Basics – Lesson 1
Advertisements

Style guide exercise Symbian 3 Nelli Kihniä, Hung Nguyen.
Microsoft Word – Lesson 1
Word Lesson 1 Microsoft Word Basics
Word Processing Word Processing
Introduction to PowerPoint
CGS 1060 Introduction to MicroComputer Usage Chapter 1 Windows 7
Copyright 2007, Paradigm Publishing Inc. POWERPOINT 2007 CHAPTER 1 BACKNEXTEND 1-1 LINKS TO OBJECTIVES Create Presentation Open, Save, Run, Print, Close,Delete.
Exploring the Basics of Windows XP. Objectives Start Windows XP and tour the desktop Explore the Start menu Run software programs, switch between them,
Web Page: // The Windows XP Textbook by Stewart Venit Standard Edition.
PowerPoint Tutorial 1: Creating a Presentation
Chapter 2: The Visual Studio.NET Development Environment Visual Basic.NET Programming: From Problem Analysis to Program Design.
Creating, Formatting, and Editing a Word Document with a Picture
1 Introduction to the Visual Studio.NET IDE Powerpoint slides modified from Deitel & Deitel.
WINDOWS XP BACKNEXTEND 1-1 LINKS TO OBJECTIVES Starting Windows Using the Taskbar, opening & switching programs Using the Taskbar, opening & switching.
Access Tutorial 3 Maintaining and Querying a Database
Copyright 2007, EMC Paradigm Publishing Inc. WINDOWS XP BACKNEXTEND 1-1 LINKS TO OBJECTIVES Starting Windows Using the Taskbar, opening & switching programs.
Exploring the Basics of Windows XP
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
Getting Started with Adobe Dreamweaver CS6. Unit Objectives Define web design software Start Adobe Dreamweaver CS6 View the Dreamweaver workspace Work.
In the Sandbox Playing with SkillPort 7 for the first time.
Getting Started with Expression Web 3
Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction.
Microsoft Word 2010 Chapter 1 Creating, Formatting, and Editing a Word Document with Pictures.
Key Applications Module Lesson 19 — PowerPoint Essentials
Pasewark & Pasewark 1 Word Lesson 1 Word Basics Microsoft Office 2007: Introductory.
Office 2013 and Windows 8: Essential Concepts and Skills
Understanding Web Sites. What is a Web Site A collection of Web pages which you can view on the Internet Contains text, graphics, sound, and video to.
Copyright © 2012 by The McGraw-Hill Companies, Inc. All rights reserved. McGraw-Hill/Irwin TECHNOLOGY PLUG-IN T8 DECISION MAKING USING ACCESS.
Microsoft Windows Vista Chapter 1 Fundamentals of Using Microsoft Windows Vista.
Microsoft Windows 7 Part 1 Fundamentals of Using Windows 7.
XP New Perspectives on Windows XP Tutorial 1 Exploring the Basics.
This tutorial teaches Microsoft Word basics. Although knowledge of how to navigate in a Windows environment is helpful, this tutorial was created for.
Chapter 3 – Part 1 Word Processing Writer for Linux CMPF 112 : COMPUTING SKILLS.
Productivity Programs Common Features and Commands.
Word Lesson 1 Review. Mini-Toolbar Appears automatically based on the tasks you perform; is transparent until you point to it.
® Microsoft Office 2010 Access Tutorial 3 Maintaining and Querying a Database.
Chapter 1 Creating a Dreamweaver Web Page and Local Site
Lesson 2 Basic editing Word 2013.
Chapter 1 Creating a Worksheet and a Chart
1 Lesson 13 Editing and Formatting documents Computer Literacy BASICS: A Comprehensive Guide to IC 3, 4 th Edition Morrison / Wells.
Creating and Editing a Word Document Word Project 1.
Basic Editing Lesson 2.
1 Word Lesson 1 Microsoft Word Basics Microsoft Office 2010 Introductory Pasewark & Pasewark.
Microsoft Publisher 2010 Chapter 1 Creating a Flyer.
Chapter 2 – Introduction to the Visual Studio .NET IDE
Basic Editing Lesson 2.
Lesson: 2 Common Features and Commands After completing this lesson, you will be able to: Identify the main components of the user interface. Identify.
Microsoft Office 2010 is the newest version of Microsoft Office, offering features that provide users with better functionality and easier ways to work.
 2002 Prentice Hall. All rights reserved. 1 Chapter 2 – Introduction to the Visual Studio.NET IDE Outline 2.1Introduction 2.2Visual Studio.NET Integrated.
MSOffice PowerPoint 1 Part 1 ® Microsoft® Office 2010: Illustrated Introductory.
1 Word Lesson 1 Microsoft Word Basics Microsoft Office 2010 Introductory Pasewark & Pasewark.
William H. Bowers – Specification Techniques Torres 17.
Microsoft Office 2007: Introductory Pasewark & Pasewark 1.
MICROSOFT WORD PRESENTATION. Word Processing  Software that is designed for the entry, editing, and printing of documents.  Windows Version = Microsoft.
IE 411/511: Visual Programming for Industrial Applications Lecture Notes #2 Introduction to the Visual Basic Express 2010 Integrated Development Environment.
 2002 Prentice Hall. All rights reserved. 1 Introduction to the Visual Studio.NET IDE Outline Introduction Visual Studio.NET Integrated Development Environment.
Office 2013 and Windows 8: Essential Concepts and Skills Microsoft Office 2013.
UNIT 1: Introduction To The AutoCAD Interface Objectives: Be able to identify, describe and/or apply… The key components of AutoCAD interface The AutoCAD.
Word Lesson 1 Microsoft Word Basics
OVERVIEW Objectives Follow a design document to create a small personal Web site Follow a design document to create pages in a large commercial Web site.
Chapter 2 – Introduction to the Visual Studio .NET IDE
Getting to Know Microsoft Word & Word Window
Chapter 2 – Introduction to the Visual Studio .NET IDE
Getting to Know Microsoft Word & Word Window
Style guide exercise Nokia Janne Hietanen.
Presentation transcript:

Nokia Dominik Röck, Sonja Wihan

 This is a presentation about Nokia guidelines  Dominik Röck, k0rodo00  Sonja Wihan, k0wiso00

 Describe the style guide  This document gives an overview of the Nokia Symbian^3 (S^3) user interface and describes its essential parts, giving examples of how to use the interface elements.  The document can be used as an introduction to the style or as reference material. It provides background material to help user interface designers make decisions about their products

 Model of navigation is based on states  Arranged as hierarchical trees  New features, new flexibility: Tabs S^3 key and menu Direct navigation between sibling folders Links to applications and documents  Navigation using links  One-way shortcuts (no direct path back)

 Navigating in applications  Traditional hierarchical tree structure  Moving forward from one state By opening an available item By selecting an option from a menu  Back returns to previous level  Exit function -> closing the application

 Navigation using tabs  UI allows combining several pages to a single state  Switching by tapping in the Navipage by pressing the arrow key left / right

 Hierarchical application structures  UI offers direct access to a sibling folder  Shortcut  Arrow left and right accomplish this

 No exact font / color defined in the style guide (maybe because it’s theme related)  But:  It tells when you should use e.g. primary / secondary font  Primary font E.g. Used for informing of an empty list  Secondary font E.g. Used for providing further information  Single color E.g. Used for item status graphics

 EXAMPLE:  Item property graphic –color  Heading –secondary font  Main text - primary font  Item status graphics - single color

 List item types (examples) - Single-line item with a graphic - Single-line item with a large graphic - Two-line item with a number - Two-line item with a large graphic

 The following toolbar button types can be used: - Command button offering direct action (functions/view access) like Send or New contact - Mode toggle button can be used for switching between several modes as in Flash - On/Off button can be used for active/inactive type of functions such as Loudspeaker or Font italics Toolbar button states: example of On/Off type of button

 Notes (feedback components) - confirmation note - information note - error note - wait and progress notes - soft notification

 The recommended grid layout is 3x4 (nHD portrait) and 6x2 (nHD landscape), 12 icons in all

When moving with the navigation keys in a list or a grid, one item in it is always in focus (highlighting)

 Help application (containing information about the system, the functions it offers, and advice on getting the most out of it)  arranged in a hierarchical fashion so that they can be navigated in the usual way  can be obtained by selecting the Help item from the Options menu within applications  Wizards

 The S^3 UI can rotate between the portrait and landscape layout.