deloitte app design guide revjuly2012

Click here to return to Contents

New ways to interact A guide to designing a Deloitte-branded app

Internal use onlyJuly 2012

2Deloitte App Guide July 2012Click here to return to Contents

ContentsBefore you consider designing an app, consider this 3A note to the reader 4

1.0 Deloitte and apps 51.1 Who is the user guide for? 51.2 Aims of this guide 5 1.3 Why apps? 61.4 Apps and mobile devices 71.5 Why develop an app? 81.6 Defining the best approach 9

2.0 A foundation for design development 102.1 Understanding user experience 112.2 Touchscreen gestures 122.3 Principles of user interface design 132.4 Understanding the process 14

3.0 App design & visual identity 153.1 On-brand design approach 163.2 Logo 173.3 Colors 193.4 Typography 223.5 Imagery 243.6 Information graphics 273.7 Iconography 283.8 Interface elements 293.9 Tone of voice 30

4.0 App design in practice 314.1 Editorial and ePublishing 324.2 Tools 354.3 Challenges 374.4 Frameworks 394.5 Smartphones 414.6 Enhancements 42

Support 43

Definitions 44

Appendix 1 45Appendix 2 46


The ten most important things you and your colleagues need to know before, during, and after development of a Deloitte-branded app.

Before you consider designing an app, consider this

1. Get permission

Any Deloitte-branded app needs to be authorized by your local brand, legal, and/or risk manager.

6. Maintenance is key

Ensure you have adequate resource to engage in dialogue with your users, gather feedback, manage further updates and inform them of your future release or app retirement plans, should you choose to discontinue updating.

2. Know Deloitte Global and local policies

Make sure to familiarize yourself not only with this guide, but also with related guides and any relevant member firm rules and regulations.

7. Consider the ecosystem

Ensure you devise the functions of your app to take advantage of other platforms and content. Your apps’ functions can benefit from content, data, social media feeds, and relational links from a variety of sources.

3. Be properly resourced

A significant investment of time and energy is needed by dedicated professionals to bring apps to life. Post-launch maintenance, support and updates can often be overlooked.

8. Continually consider your users’ understanding

Share and test your decisions at each step of the process. Ensuring an appropriate and usable release is your key consideration and testing will aid your development.

4. Define your purpose

Ensure you complete adequate user research. Apps are products that fulfill a business function and need to be designed, tested, and maintained to fit their purpose.

9. Remember the Deloitte brand and identity

Beyond the look and feel and tone of voice, it is essential that our presence be consistent, helping to further position the organization as a global category of one.

5. Understand distribution

Familiarize yourself with the detail and the timings of required approval and release processes internally within Deloitte and externally with any 3rd party platform owners (eg, Apple)

10. Last, but not least

Read this guide in its entirety. The information that follows provides the necessary foundation for designing a Deloitte-branded app.


The technology platforms for apps are ever changing, and there is a risk that sections of this document will become ‘out of date’ quickly. This user guide will be updated periodically to help counter this; however, where possible, we have included hyperlinks to relevant online help and documentation. Please refer to these resources to ensure you are briefed with the most up-to-date information.

In conjunction with this document you should also refer to other relevant User Guides on Brand Space (brandspace.deloitte.com – User guides link on the homepage).

Furthermore, it is critical that any individual or Deloitte entity wishing to design, create and launch a Deloitte-branded app MUST RECEIVE CLEARANCE FROM THEIR MEMBER FIRM BRAND LEADERSHIP AND LEGAL/RISK TEAM(S), as they are positioned to ensure alignment with broader brand, marketing, and communications efforts.

Should you have any queries or require guidance on any topic that is not covered within this documentation then please contact:

•BrianResnick:Associate Director, Global Brand, [email protected]

•BillBarrett:Associate Director, Global Communications, [email protected]

As used herein, “Deloitte”, “we”, “our” and similar terminology are used to refer to Deloitte Touche Tohmatsu Limited (DTTL) and its network of member firms (each of which is a legally separate entity) or, where the context requires, DTTL or a particular DTTL member firm. Please see www.deloitte.com/about for a more detailed description of DTTL and its member firms

It is critical that any individual or Deloitte entity wishing to create and launch their own app in the name of Deloitte must receive clearance from their member firm

A note to the reader

brandspace.deloitte.com

mailto:bresnick%40deloitte.com?subject=

mailto:wbarrett%40deloitte.com?subject=

http://www.deloitte.com/about


1.1 Who is the user guide for?

This document is designed as a guide for those thinking of designing and developing an app, or those already maintaining one on behalf of a member firm or a select business initiative. Please note before creating a Deloitte-branded app, you must obtain prior authorization by your member firm brand legal, and risk managers.

For the purpose of this document, any app created for business purposes and bearing the Deloitte name or identity falls within the jurisdiction of this document and guidance therein. Please follow these guidelines so we are consistently presenting the Deloitte brand.

1.2 Aims of this guide

This document aims to define organization-wide guidance for the design of Deloitte-branded apps. The overall aim, however, is to present a more coherent and ‘on-brand’ message via mobile platforms using apps to intended audiences, rather than limit activity.

In summary the aim is to:

•Present a consistent and ‘on-brand’ presence in terms of tone and visual identity

•Create best-practice communication that our audience can understand and benefit from

•Engage that audience in a conversation where appropriate

•Demonstrate Always One Step Ahead values by embracing the latest platforms and technologies in an appropriate way

•Improve processes and practices by utilizing the opportunities mobile platforms and apps offer

This document aims to define organization wide guidance on the creation and development of Deloitte-branded apps

Deloitte and apps


1.3 Why apps?

We’ve become accustomed to using applications on our PCs and as technology has evolved the smartphone and tablet have also become an important part of our everyday lives.

We now play, read, work and share using a range of devices. These interactions require a framework; applications or ‘apps’ are the way we contain and control functions to bring these devices to life.

What is an app?•self-contained software application

•normally has a defined function

Why are they useful?•independent and easy-to-manage

•easy-to-distribute

•flexible

•utilize the virtues of the chosen platform; hardware and software

Why are they great?•rich and interactive experience

•a familiar paradigm

•ownable and customizable

•continually updateable

•easily connected


1.4 Apps and mobile devices

Many of the virtues of smartphones and tablets that have made them successful devices for the consumer market can also be very beneficial in a corporate environment.

Their connectivity, portability, ease-of-use, intuitive interfaces, instant-on capability and long battery life are all qualities that are changing the way we now interact with the world.

This guide focuses on the basics of an on-brand design approach for apps. The principles of the approaches covered in this guide relate generally to app 'experience design' best-practice which is universal across platforms or devices.

For clarity this guide uses tablet apps as visual examples. A tablet is a mobile computer, larger than a mobile phone or PDA, integrated into a flat touch screen, primarily operated by touching the screen rather than using a physical keyboard. They often use an onscreen virtual keyboard or a passive stylus pen.

The device shown in the visuals is Apple’s iPad, the leading tablet currently available; a range of other devices on a variety of platforms are available all with a similar specification.


1.5 Why develop an app?

When developing ideas for apps, the question that often arises is “which comes first, the idea or the device?” The answer is neither… it’s people.

By putting the user first; their requirements and understanding become the driving force and offer clear objectives for making decisions.

Deciding if creating an app fulfills your member firms requirements can be easily assessed once you’ve established – through research – that you have an audience that will understand and benefit from your release.

Apps can be created to fulfill a number of different functions. They generally fit into the following categories displayed on the screen at right.

Editorial

Sharing editorial content is one of the predominant uses for mobile platforms; either through bespoke apps or ePublishing services.

Challenges

Games, activations, challenges and puzzles can be an effective way to deliver messages through engagement and apps are often the ideal vehicle.

Tools

Mobile platforms and apps offer interactivity, portability and connectivity making them valuable for creating tools to fulfill a variety of functions.

Frameworks

Designing apps to act as frameworks for diverse and dynamic content provides opportunities for brands; whether for sharing thoughts or capturing feedback.

FurtherreferencePlease refer to Section4.0Appdesigninpractice for more detail and inspiration as to what’s possible.


1.6 Defining the best approach

With a range of different technical approaches, platforms and devices it’s a challenge to choose the most appropriate for your requirements.

The following chart gives an overview of the main options.

Whoareyouraudience?

Whatistheprimaryobjectiveoftheapp?

Consider their use of technology and penetration across their market

Decide the functional reason for your app and the category it fits within

Define where you’ll be distributing and whether regular updates are required

The basic definition of available development approaches

A basic list of current platforms each with a range of supported devices

Whatisthescaleofthedistribution?

Potentialapproach Currentplatforms

AppleiOSMain focus with high penetration across markets through iPhone and iPad

www.apple.com/ios/

AndroidMain focus with high penetration across markets through numerous devices

www.android.com/

BlackberryReduced focus with lower penetration across markets for richer apps

www.blackberry.com

WindowsMobileLower penetration across markets for richer apps

http://www.microsoft.com/windowsphone/

SymbianLower penetration across markets for richer apps

http://symbian.nokia.com/

Consider your development and ongoing maintenance costs

Whatisyourlevelofinvestment?

Decide the functional approach to your audience engagement

Whatisyourdesireduserexperience?

Savvybusinessusersorconsumerswithfastdataspeedsinadevelopedmarket

Editorialapproachwithsimpleaccesstocontent

SinglemarketOne build in one language

NativeappSelf-contained app built using the native coding environment and distributed via the suppliers preferred platform

HybridappSelf-contained app built using a combination of technologies (often web languages) and distributed via a bespoke solution

MobileinternetBrowser based website built using web languages, optimsed for mobile and viewable online across any deviceToolapproach

withmorecomplexfunctionalityortaskbasedinteraction

MultiplemarketsVariations on the build in multiple languages

Challengeorgametopromoteanideaorfitwithinacampaign

GlobalVariations on the build in multiple languages; only produced once

FrameworkforcontentlinkedtoaCMSpotentiallywithaddeddatacapture

UpdateableContains data and content that requires regular updates

Novicebusinessusersorconsumerswithslowdataspeedsinadevelopingmarket

HighDevelopment and ongoing costs approx. $400,000+

MediumDevelopment and ongoing costs approx. $200,000

LowDevelopment and ongoing costs approx. $100,000 or less Offline

Simpler functional approach with the bulk of the content contained within the app

RichandinteractiveRicher functional approach with added video

FullexperienceEnhanced interactive approach with the app utilizing the hardwares’ full capability

OnlineRicher functional approach with the bulk of the content delivered remotely and added data capture

http://www.apple.com/ios/

http://www.android.com/

http://www.blackberry.com



http://symbian.nokia.com/


2.1 Understanding user experience

A basic overview of the four main areas users are familiar with through interaction with apps on mobile devices.

2.2 Touchscreen gestures

Insight into the main methods of input and interaction with touchscreen devices.

2.3 Principles of user interface design

Six simple principles inform an approach to improve interface design from a user perspective.

2.4 Understanding the process

A design-led process for design apps, accounting for the rigor required to ensure best-practice for each step of the journey.

An essential overview into what users understand, how they interact, designing the experience and the practicalities of process

A foundation for design development

Visualise your

Create wireframes as a foundation for prototyping including all functional considerations and content requirements.

with placeholder visual

4.3.Visualise your ideaCreate wireframes as a foundation for prototyping including all functional considerations and content requirements.

Design a prototypeUsing your wireframes as a foundation, create a working prototype


2.1 Understanding user experience

Users have become familiar with interactive devices, tv, the internet, and software applications. These experiences are generally designed using simple, intuitive patterns to aid adoption and improve usability.

The following is a basic overview of the four main areas users are familiar with through interaction with apps on mobile devices.

NavigationUsers need to locate specific features and content and require navigation to accomplish this.

GettinginputGetting the user to input decisions and data is a task that should be kept simple and tailored to match context of use.

DealingwithcontentanddataData can be searched, formatted, overviewed, and browsed in a variety of ways.

ConnectingusersAllow users to share, associate, communicate, and interact with other people online and save and download content for future reference.


2.2 Touchscreen gestures

Using touch gesture to interact is intuitive although different from previous methods we've become accustom to through using the standard PC, mouse or trackpad configuration.

PinchOpen fingers to zoom into content, such as imagery and close fingers to zoom out.

TurnTo initiate an action, open new content or create a different view or shake to undo an action.

SwipeWith one finger to move between screens, drag and hold to scroll, pan or move an element and flick to scroll or pan quickly.

TapSelects a control or item (similar to a single mouse click), double-tap to zoom and touch-and-hold to select and edit content.

The following are the main methods of input and interaction with touchscreen devices.


2.3 Principles of user interface design

All interactive products require an interface to make them usable. Whether constructed with physical buttons or switches or a touch screen interface the principles remain the same.

The following principles have been devised by Larry Constantine and Lucy Lockwood from their book Software For Use: A Practical Guide to the Models and Methods of Usage-Centered Design (Addison Wesley, 1999)

StructureThe design should organize the interface based on consistent models that are familiar to users. With related content together and similar functions resembling one another.

FeedbackThe design should keep users informed of actions, changes of state, and errors that are relevant to the user through clear, concise language familiar to users.

VisibilityThe design should make all needed options and materials for a given task visible without distracting the user with extraneous or redundant information.

ReuseThe design should reuse internal and external components and behaviors, maintain consistency with purpose thus reducing the need for users to rethink and remember.

SimplicityThe design should make simple, common tasks easy, communicate clearly in the user's own language, and provide shortcuts that are meaningfully related to longer procedures.

ToleranceThe design should be flexible to reduce the cost of mistakes by allowing a user to undo actions while also preventing errors by tolerating varied inputs and by interpreting all reasonable actions.


FurtherreferencePlease refer to [Section 4.0 App design in practice] for more detail.

1.DevelopyourideaFirst, define a need and an audience.

Research your user requirements and create sketches to define your idea, basic functions and overall intent.

Research your platform, device and delivery options to suit your requirements.

Discovery DesignandDevelopment Delivery Dialogue

2.DefineyourfunctionCreate the exact functional specification of your app taking into consideration your timescale, budget, available resource and user requirements. Please note before creating a Deloitte-branded app, you must obtain prior authorization from your member firm brand and legal / risk manager.

3.VisualizeyourideaCreate wireframes as a foundation for prototyping including all functional considerations and content requirements.

4.DesignaprototypeUsing your wireframes as a foundation, create a working prototype with placeholder visual direction to test and evaluate typical user journeys.

5.CompleteanddeliveryourappCreate your final app based upon the original idea, functional specification, taking into consideration testing evaluation with the Deloitte Visual Identity applied.

6.ManageyourreleaseGather feedback, consider content updates and manage further updates through your chosen distribution platform.

2.4 Understanding the process

From discovery to delivery a number of detailed steps are required when embarking on designing an app. The application of experience, the correct principles and knowledge into a defined structure with the required considerations at each step of the journey will help you arrive at the best possible outcome.

The following is a simple process accounting for the rigor required to ensure best-practice for each step of the journey.

Please refer to Section1.6Definingthebestapproach for more detail

Please refer to Section1.6Definingthebestapproach and Section4.0Appdesigninpractice for more detail

Please refer to Section3.0Appdesign&visualidentity for more detail.

sign off

audience?

Consistent UI

Gestures?

Theme

BusinessSociety


App design & visual identity

Bringing the Deloitte brand to life in apps through the component parts of the visual identity

Click here to return to Contents

3.1 On-brand design approach

Everything about the Deloitte brand, from positioning to visual identity, is designed to help us achieve our long-term vision: to be the Standard of Excellence. This is the key to us being the first choice of the most sought-after clients and talent. To becoming a category of one.

The use of technology now gives us more opportunity to achieve this. We can easily create connections and they are becoming increasingly diverse; from both a content and audience perspective.

Apps are an effective way to share our ideas, opinion and expertise between our organization, our clients, talent and wider society.

To produce the best possible results from your app it is necessary to have a clear goal and a sense of what is possible with a practical plan for how it will be achieved.

During the design process, above all else, continually consider the principle of focus. Always strive for clarity and precision through every functional and visual design decision you make.


UsingthePrimarylogoforapps

As apps generally require a launch process it can be useful to use the Primary logo in this initial sequence for identification.

Narrative sequences explaining the premise of an app can also be used incorporating the logo. The Primary logo can also be used in any legal screens as further identification.

Due to the nature of ambient screens, black is often the most appropriate predominant color for background elements.

Primary logo

80 px minimum

Smallsizelogo

The shortest length the logo can be is 80 pixels wide for onscreen applications. The Small size logo has been optimized to reproduce well at small sizes: the ’counter space’ within the letter ’e’ has been opened up to stop the ink filling in, as well as opening up the space between the letters to achieve the right appearance at small sizes.

Digitalwhite

As device screens are ambient, the use of a slight grey gradient can be used to help soften the bright white background or use black as an alternative.

Primarylogosize

Consider the proportions of the screen when sizing the logo.

Launchscreen

The Primary logo should be used as an introduction to the app and placed centrally as a Launch screen or as part of a narrative sequence.

FurtherreferencePlease visit Brand Space (brandspace.deloitte.com) for detailed guidance and downloads.

Please use only approved artwork, available in the Downloads section. Select Primary logo under the Logo overview section within Elements for more information.

3.2 Logo

Primarylogo

We are best recognized around the world by a blue and green Deloitte logo on a white background, so this is now our primary way of showing the logo. This should be the first preference for any new communication.

The highlighting of white as a key part of our identity builds on the clarity and precision of our thought and opinion, and the clarity with which we communicate.



3.2 Logo

Secondarylogo

The Deloitte logo on white is our primary logo, and should be used on Deloitte communications. There are certain applications, however, where the reversed out logo is more practical, so there is a Secondary logo use for these situations.

Secondary logo

Blue brand bar

UsingtheSecondarylogoforapps

For Deloitte screen-based applications there is a blue brand bar which can act as an important visual ’anchor’ on-screen with a reversed out logo. This serves to separate the logo from the other elements on the screen.

Menubar

Use the blue bar as an additional menu bar for added functionality where necessary.

Bluebrandbar

Use the Secondary logo in the blue brand bar as useful identification for apps with a number of visual layers.


Please use only approved artwork, available in the Downloads section. Select Secondary logo under the Logo overview section within Elements for more information.



3.3 Colors

Primarycolors

Deloitte has a palette of colors that is already recognized around the world and differentiated from our competitors: dark blue, bright green, and white.

It is the combination of blue and green that is so distinctive and valuable to Deloitte. This blue/green combination is at the heart of the Primary palette, and inspires the Secondary palette. Deloitte Blue and Deloitte Green appear in all communications.

White represents clarity and focus. It also makes communications consistent across markets.

Addingemphasis

The Primary colors should also be used to add emphasis wherever required. For example, as predominant colors in imagery.

Whitebackgrounds

The use of Deloitte Green should be minimized on white or light backgrounds as ambient screens can reduce contrast.

Coretypography

Use the primary colors for core typography for headings and through the initial areas of the apps interactive journey.


Select Primary color under the Color overview section within Elements for more information.

UsingPrimarycolorsforapps

The Primary colors should be used for core elements throughout to maintain visual consistency and uphold the identity.

The use of White on-screen benefits from the addition of either translucency or a grey-gradient adding visual depth to denote different content ‘objects’ or navigation.

R0 G39 B118 HEX 002776

R146 G212 B0 HEX 92D400

Deloitte Blue Deloitte Green White



3.3 Colors

Secondarycolors

The three Primary colors are supported by a set of four Secondary colors. Importantly, these Secondary colors are within a blue/green spectrum. This ensures that every part of the Deloitte visual identity that uses color is instantly recognized as Deloitte.

In addition to the blue/green Secondary colors there are three neutral grays. These help give the flexibility and clarity we need when presenting more complex information, particularly charts, diagrams and information graphics, without affecting the distinctive blue/green personality of all Deloitte communications.

Blue/green Secondary palette

Gray Secondary palette

Chartsanddiagrams

They offer flexibility and clarity for charts, diagrams and information graphics.

Interactivefunctions

The colors are necessary for interaction as they allow different states for navigable elements.

Addingsupport

The colors can be used as support to the Primary colors for more complex graphic elements such as web icons.


Select Secondary color under the Color overview section within Elements for more information.

R0 G161 B222 HEX 00A1DE

R140 G140 B140 HEX 8C8C8C

R60 G138 B46 HEX 3C8A2E

R220 G220 B220 HEX DCDCDC

R114 G199 B231 HEX 72C7E7

R180 G180 B180 HEX B4B4B4

R201 G221 B3 HEX C9DD03

UsingSecondarycolorsforapps

In addition to their general function, the Secondary colors can be used as interactive support for apps – see 3.2 Colors/Interactive colors for more detail.

The colors can be used in addition for more complex graphic elements such as web icons to support the enhancements that interactivity requires.

Deloitte Mid Blue

Deloitte Dark Gray

Deloitte Dark Green

Deloitte Light Gray

Deloitte Light Blue

Deloitte Mid Gray

Deloitte Light Green



3.3 Colors

Interactivecolors

In addition to the Primary and Secondary color palettes, interactive touchscreen applications require further colors to allow for functional differences.

Gesture driven interfaces generally use visual ‘objects’ that are layered or adjacent to other objects with differing or related functions. It is necessary to visually identify these objects with a base color that can effectively hold content. The Secondary palette should be used as highlights for this interactive content to show active, inactive, selected and disabled states as feedback for the user.

This is generally why apps use darker color backgrounds to denote interactive objects, increase visual contrast and cope with the ambience of the screen.

Interactivejourneys

Different steps of an interactive journey can use the base colors to identify different levels.

Interactivefeedback

Secondary colors should be used as visual feedback identifying active, inactive, and disabled states or navigation.

Basecolortranslucency

Translucency can be used as a useful visual approach to create difference between the objects for layering and status feedback.


Select the Color overview section within Elements for more information.

Interactive base colors

Secondary palette as highlight colors

Deloitte Mid Blue

Deloitte Dark Gray

Deloitte Dark Green

Deloitte Light Gray

Deloitte Light Blue

Deloitte Mid Gray

Deloitte Light Green

R000 G000 B000 HEX 000000

Black

R100 G100 B100 HEX 646464

Base Mid Gray

R060 G060 B060 HEX 3C3C3C

Base Dark Gray

White



An intelligent and distinctive typeface for headlines: Garamond 3 LT Std

3.4 Typography

Primarytypeface

Garamond 3 LT Std is our Primary typeface. We use it for insightful headlines and headings, for quotes and opinions pulled out from the main body of the text. Garamond 3 LT Std carries our insight and our personality. It is an immediately recognizable typeface and is used simply and clearly.


Please use only approved typefaces, available in the Downloads section. Select Primary typeface under the Typography overview section within Elements for more information.

UsingthePrimarytypefaceforapps

The Primary typeface should be used for core elements throughout to maintain visual consistency and identity.

The typeface can be used on a variety of color backgrounds wherever emphasis is required. To ensure legibility and retain contrast when used on a white or translucent white background the use of Deloitte Green should be limited.

Where Garamond 3 LT Std is not available, for example in a web app, it is replaced with Times New Roman, the closest universally available typeface. Often we have to rely on universal system typefaces for certain applications, the distinctive combination of serif and sans serif, and our unique palette of colors means that our communications still look characteristically Deloitte.

Addemphasis

The Primary typeface should also be used to add emphasis wherever required.

Coretypography

Use the Primary typeface for core typography through the initial areas of the apps interactive journey.



A modern and functional typeface for everything else: Frutiger Next Pro

3.4 Typography

Secondarytypeface

Frutiger Next Pro is our functional typeface. We use it for all other content in our communications below the level of headings: from subheadings to body text to legends in charts. It is a highly readable and efficient typeface: being slightly condensed it is very economical on page space.

Detailedcontent

As with other communication the Secondary typeface can be used for detailed content, legends and captions.

Navigationandmenus

Use different weights for flexibility when creating states for navigation items, menus and buttons.

Creatingbuttons

Ensure legibility and touch usability by testing button sizes and states on your chosen device.


Please use only approved typefaces, available in the Downloads section. Select Secondary typeface under the Typography overview section within Elements for more information.

UsingtheSecondarytypefaceforapps

In addition to its general function, the Secondary typeface can be used in an interactive role as navigation menus or buttons. The typeface can be used in Primary or Secondary colors on a variety of color backgrounds wherever content is required below the level of headings.

Consider screen contrast when choosing type colors and defining states for navigation items, such as, active, inactive, selected and disabled states as feedback for the user. Different weights can also be used when creating states for navigation items, menus and buttons.

Where Frutiger Next Pro is not available, for example in a web app, it is replaced with Arial, the closest universally available typeface. Often we have to rely on universal system typefaces for certain applications, the distinctive combination of serif and sans serif, and our unique palette of colors means that our communications still look characteristically Deloitte.

Many mobile platforms use a sans serif typeface as their default, for example Apple iOS uses Helvetica and Andriod uses Droid Sans. Owing to the similarity in appearance it is appropriate to rely on the default for menus, navigation and other functions without replacing them with the Secondary typeface.



3.5 Imagery

Primaryimagery

A Primary image style of sharp focus, color images of objects on a white background. This allows us to have our distinctive white covers and title slides. It is also a style that gives maximum design flexibility across all apps, and is a style that is easy to understand and use by all practitioners, whether design professionals or not. Every image should be in sharp focus, focusing on a single idea or topic, and be the focal point wherever it appears.

Illustratingideas

Use wherever a requirement exists for illustrating an idea or topic.

Layeringcontent

The Primary imagery can be used as background layers to additional content sections.

Navigationandmenus

You can use the imagery as thumbnails for content sections in a navigation menu.


Please use only approved images, available in the Downloads section. Select Primary imagery under the Imagery overview section within Elements for more information.

UsingPrimaryimageryforapps

In addition to its general function, the Primary imagery can be used as visual identification for content sections; in a navigation menu for example.

For illustrating single ideas or topics consider the visual flexibility required of interactive content. The Primary imagery can be used as background layers to additional content sections.

When choosing imagery for your app ensure you have secured appropriate usage rights. All images on Brand Space (brandspace.deloitte.com) are available to use Globally for all media.






Please use only approved images, available in the Downloads section. Select Secondary imagery under the Imagery overview section within Elements for more information.

3.5 Imagery

Secondaryimagery

A Secondary image style of reportage (natural, real-life) color images is used when the object style is not appropriate. For example, when we show our people, events, places, and in some circumstances, industries.

Every image should be in sharp focus, focusing on a single idea or topic, and be the focal point wherever it appears.

UsingSecondaryimageryforapps

In addition to its general function, the Secondary imagery can be used as visual identification for content sections; in a navigation menu for example.

For illustrating a single idea or topic consider the visual flexibility required of interactive content. The Secondary imagery can be used as background layers to additional content sections.

When choosing imagery for your app ensure you have secured appropriate usage rights. All images on Brand Space (brandspace.deloitte.com) are available to use Globally for all media.

Illustratingideas

Use wherever a requirement exists for illustrating an idea or topic.

Layeringcontent

The Secondary imagery can be used as background layers to additional content sections.

Navigationandmenus

You can use the imagery as thumbnails for content sections in a navigation menu.






Video examples are available in the Downloads section under Multimedia. Select Flash video/audio player option under Electronic applications within Application for further information. Please note Flash will not work on some devices.

3.5 Imagery

Video

We use video regularly as a versatile method for delivering messages online and through social media on platforms such as YouTube and Facebook across a number of subject areas including our services, industries, insights and careers.

Video is a familiar medium for users, which makes it simpler for them to consume and understand messaging and ideas.

Usingvideoforapps

Consider context when deciding whether video is useful as support to other content in your app or as an alternative method to deliver a concise narrative around your subject.

Remember the user, the way in which they will use the app, how much time they have, and their level of understanding with respect to your content and purpose.

Ensure you use appropriate video content for delivery in the context of an app; considering focus and simplicity of visual approach and message.

If your app is using a network connection to access video content, consider how your app looks and feels when the content is unavailable; for example, when a network connection is down.

Also, video may come from different sources and can be challenging to fit into a universal template. Consider visual approaches that are looser and celebrate the dynamic nature of the source material.

When choosing video for your app ensure you have secured appropriate usage rights. All video on Brand Space (brandspace.deloitte.com) is available to use Globally for all media.

Contentledapproach

If your app is using a network connection to access video content, consider how your app looks and feels when the content is unavailable.

Applyingsimplicity

Ensure you use appropriate video content for delivery in the context of an app; considering focus and simplicity of visual approach and message.

Definingpurpose

Consider context when deciding whether video is useful as support to other content or as an alternative method to deliver a concise narrative.





0

40

80

120

160

200

New molecular entities (NMEs)

Other new drug applications (non-NMEs)

200520042003200220012000

Chart 1 (Mixed) Chart 4 (Area)

Chart 5 (Column)

Chart 6 (Pie)

Chart 2 (Stacked)

Chart 3 (Line)

0.0

0.5

1.0

1.5

2.0

2.5

Data 1

200620042002200019981996199419921990

0

500

1000

1500

2000

Data 1

20082007200620052004

500

1000

1500

2000

2500

3000

Data 4

Data 3

Data 2

Data 1

20012000199919981997

Other

Real estate

Manufacturing

Energy, infrastructure & utilities

Consumer business

Tourism, hospitality & leisure

Public sector

Telecoms, media & technology

Financial services

6%

7%

10%

9%

8%

12%

18%

25%

5%

0

1000

2000

3000

4000

5000

6000

Passenger vehicles

Vans

Commercial vehicles

200520042003200220012000

1559135512641188

908

36

6877726580

34

3522153020

19001500

1000800500400

700

400350

400300300

1300

14001500

300200200

0

5

10

15

20

25

30

35

40

45

R&D spending ($)

FurtherreferencePlease visit Brand Space (brandspace.deloitte.com) for more detailed guidance and downloads.

Templated chart and table styles exist in the Downloads section to make it easier to create on-brand information graphics. Select Timesaver option under the Information graphics category for this file. These Illustrator and InDesign files are for creative professionals only.

3.6 Information graphics

Chartsanddiagrams

Information graphics should feel as simple and uncomplicated as possible. They are a great opportunity to use the bright, fresh color palette to reflect the brand at all levels of the communication. Since the information graphics occur on a white background, they should feel light and elegant. Large areas of heavy solid color should be avoided where possible to keep the presence of white space strong. Always use a clear legend and labelling system to make sure the graphs are meaningful.

Usingchartsanddiagramsforapps

In addition to their general use, interactivity requires consideration when using information graphics, charts and diagrams for apps.

They can be simplified and areas of focus can be enhanced by allowing detail to be revealed through touch and overlaid content panels.

Consider creating interactive charts and diagrams based on similar formats but holding different data which can be controlled through user selection.

Applyingsimplicity

Charts and diagrams can be simplified and areas of focus can be enhanced by allowing detail to be revealed through touch and overlaid content panels.

Applyinginteractivity

Consider creating interactive charts and diagrams based on similar formats but holding different data which can be controlled through user selection.

Utilizingmultitouch

Use simple touch buttons to reveal annotation.

2 • Select a suitable venue/good event stand location• Make the most of the location• Use visuals to create impact

3 • Ensure the stand is well laid out, tidy and welcoming• Make eye contact and smile• Engage visitors with questions

Grat

itude

Insi

ght

Expectation

Arrival

Welcom

eHospitality




Please use only approved icon artwork, available in the Downloads section. Select Web icons option under the Electronic applications within Applications for this file. These Illustrator files are for creative professionals only. If a new icon is required, its design must be approved by the Global Brand Team before it is used in an application.

3.7 Iconography

Webicons

A set of icons have been developed to aid navigation on the Deloitte website and Brand Space. The icons have a purely functional role and may only be used in circumstances where they are an active link or navigational aid. They may also be used as hyperlinks in interactive PDFs or flash animations.

Stylistically, the icons are designed to be as simple as possible, purely functional graphics. The icons should be created with flat color, using the Deloitte palette. Bevels and drop shadows should not be used.

UsingWebiconsforapps

Icons can be used for apps to provide two key functions; as navigation or feedback.

When used solely for navigation, ensure clear space around the icon to make it easier to touch and aid usability.

For navigation and feedback consider the base colors and the icon colors as they are interactive content that will require a number of color variations to show active, inactive, selected and disabled states as feedback for the user.

Consider the size of the icons in relation to the visual elements around them and their function.

Considercontext

Consider the size of the icons in relation to the visual elements around them and their function.

Iconsasnavigation

When used solely for navigation, ensure clear space around the icon to make it easier to touch and aid usability.

Iconsasfeedback

Consider the icon colors as they are interactive content that will require a number of color variations to show various states as feedback for the user.




3.8 Interface elements

Enhancingtheidentity

Designing for apps requires a number of simple enhancements to the identity to cater for interactivity, navigation, feedback, and flexibility of content.

Creatingobjects

Gesture driven interfaces generally use visual ‘objects’ that are layered or adjacent to other objects with differing or related functions. In order to visually identify these objects and cope with levels of interactivity, slight enhancements are necessary to the general visual identity approach. For example:

UsingcolorFor navigation and feedback consider the base colors and the icon colors as they are interactive content that will require a number of color variations to show active, inactive, selected and disabled states as feedback for the user.

Due to the nature of ambient screens, darker colors are often the most appropriate predominant color for background elements.

AddingvisualdepthAs a technique to create visual differentiation between objects with different functions, visual depth is useful; either subtly with an added pixel line between menu items or an added shadow beneath a larger interface object. Adding and implying movement to objects and layering over other objects also aids touch usability and is more dynamic.

UsingtranslucencyandaddinggradientsThe use of the Interactive base colors (Please see page 21) on-screen can benefit from the addition of either translucency or a gradient to add visual depth.

Creatingobjects

Gesture driven interfaces use visual ‘objects’ that are layered or adjacent to other objects with differing or related functions.

Usingtranslucency

The use of the Base colors on-screen can benefit from the addition of either translucency or a gradient to add visual depth.

Addingvisualdepth

Visual differentiation between objects either subtly with an added pixel line between menu items or an added shadow beneath a larger interface object.




Select Tone of voice within Elements for more information.

3.9 Tone of voice

Focus

Like all the identity elements, our verbal and written communications are built on the principle of focus.

What do we mean by focus? •Alwaysstrivingforclarityandprecision •Makingonepointatatime,powerfullyandunambiguously •Thinkingaheadtotheresponsewe'reaimingtoprovoke

Aconversation

It's helpful to see our writing as a conversation.

The content, vocabulary, and style of our writing will change depending on the audience and why we're talking to them. Our tone – which reflects our personality – will not.

Remember these rules apply equally to internal audiences as well as external audiences.

ConsideringToneofvoiceforapps

Writing for apps requires two key types of written content; communication and interactive content.

Communication content works with the same principle of focus as with other media. Interactive content requires the added consideration of context to ensure delivering the correct message in an intuitive way.

When writing for navigation menus and buttons, ensure clarity, consistency and the correct terminology by considering your users’ understanding of the subject matter and the apps functions.

Extra consideration is required when writing alerts and supporting content to ensure users immediately understand the reasoning behind the message.

Writingforalerts

Extra consideration is required when writing alerts and supporting content to ensure users immediately understand the reasoning behind the message.

Writingfornavigation

When writing for navigation menus and buttons, ensure clarity, consistency and use the correct terminology.

Generalcontent

Communication content works with the same principle of focus as with other media.



4.1 Editorial and ePublishing

Sharing editorial content is one of the predominant uses for mobile platforms; either through bespoke apps or ePublishing services. Apps can be designed for contained formats such as articles, white papers and insight documents. Using an app to share your content offers options for enhanced interactivity and they can be re-released for regular updates.

4.2 Tools


Apps as tools can be useful for a number of tasks, including productivity, meetings, data capture, and content creation.

4.3 Challenges

Games, activations, challenges and puzzles can be an effective way to deliver messages through engagement and apps are often the ideal vehicle. They can be designed as a component function or as independent apps depending on your marketing requirements.

4.4 Frameworks

Apps rely on data and content as a foundation for interaction and users’ expectations have become increasingly sophisticated. Designing apps to act as frameworks for diverse and dynamic content provides opportunities for brands; whether for sharing thoughts or capturing feedback.

App design in practice

Examples and related best practice advice for creating innovative app experiences across four main categories


Consideringtabletorientation

Tablets offer the user the opportunity to switch between two views – landscape and portrait.

Having to consider every aspect of your app design in these two different layouts can be challenging. The best approach is to keep the experience consistent in each view, allowing for a seamless user experience.

Successful apps also often use the different views when switching orientation to use the opportunity to allow alternate data display and functionality.

4.1 Editorial and ePublishing

Sharing editorial content is one of the predominant uses for mobile platforms; either through bespoke apps or ePublishing services. Apps can be designed for contained formats such as articles, white papers and insight documents. Using an app to share your content offers options for enhanced interactivity and they can be re-released for regular updates.

The following examples offer advice on making the most of what the platforms offer.

Visual example

An app designed to house articles such as briefings with options to view them organized by different categories

Using a modular approach to simplify orientation shifts

DesignadviceCreate paper prototypes of your screens in both modes, creating layers to test your ideas and make decisions as to how the two orientations can be used in a valuable way.


Usingthemaster/detailprinciple

Master/detail is an interactive concept whereby you can view the navigation and chosen content in the same interface view.

Tablet screen size allows for this whereas most smartphones require layered or sliding navigation to make the most valuable use of the screen.

Editorial apps can use this principle to good effect, allowing the user quick access to the available content.

Multiple pane interfaces can also be developed to allow ultimate flexibility.

Carefullyconsideringtheuserinterface

When developing the detail of your interface consider the functions of your app and your intended audience, then think of how you can create a design that optimizes ease-of-use.

Above all; keep it simple and consider the Visibility principle when designing your interactive journeys.

The visual clarity of text and other graphic elements all depend upon their size, contrast, arrangement and spacing.

Visual example

An app designed for insight house articles with a visible menu for quick access to the contents

Test size and contrast of the smaller elements of your design

DesignadviceWhen developing your visual design approach, consider content ‘objects’ rather than ‘screens’ or ‘pages’ for ultimate flexibility.

DesignadviceRigorously test your visuals on the intended device to ensure legibility.


ThevirtuesofePublishing

A variety of software solutions are available to simplify the process of publishing and distributing content across mobile platforms for tablets.

They work similarly in taking your editorial layout via your page make-up software, such as Adobe InDesign and offer content editing to maximize interactivity and leverage the tablet experience.

Each solution employs a slightly different approach to preparing and adding the content into the system with different functional options and related costing plans.

These solutions have quickly become the industry standard for most business and consumer magazines and journals. They attempt to provide the best possible user experience by utilizing techniques such as interactive overlays, adding audio and video, scrollable frames and pop-up content viewers.

They also act as distribution platforms and for commercial apps offer enhancements such as ecommerce and user tracking through analytics.

Visual example

An example of Adobe's Digital Publishing system, the On Technology app uses a variety of interactive functions to enhance the editorial

FurtherreferenceFor more detail on the following platforms please visit the links listed below:

Adobe Digital Publishing Suite (www.adobe.com/products/digital-publishing-suite-family.html)

PressRun (www.pressrun.com)

Mag+ (www.magplus.com)

The editorial can be enhanced with interactive detail and video content

The platform menu showing ‘issues’ that can be updated and regularly released

DesignadviceWhen developing your visual design approach and content, consider how the user experience can be enhanced through adding extra text, audio or video.

http://www.adobe.com/products/digital-publishing-suite-family.html

http://www.adobe.com/products/digital-publishing-suite-family.html

http://www.pressrun.com

http://www.magplus.com


Definingyourapp’sfeatures

Our relationship with interactivity through using the internet has led us to believe that the more features, the more useful the site will be.

Users generally need only a small set of features in any interactive application and software works much better when it’s focused. If you consider your relationship with software applications there are often plenty of features you will never use.

Feature focused software works well because the interface is easier to design and therefore understand.

The key is to decide which small set of features are actually important, and implement only those.

Your assessment should be based upon a value judgement. By considering your apps purpose, if the features you’re adding honestly provide more value to your end user, then finding a way to incorporate them into your existing user experience is important and worth the challenge.

Be careful to not add features for the sake of adding.

4.2 Tools


Apps as tools can be useful for a number of tasks, including productivity, meetings, data capture, and content creation.

The following examples offer advice on developing appropriate, functional and usable apps.

Visual example

An app designed as a conversation tool with a data capture function to aid business development relationships

Make the key feature clearly visible to aid usability

DesignadviceDevise user journeys to focus on exact benefits for the audience when using your app. This will help you define the scope and the features required.


Use of the native OS keyboard for inputting data

Utilize familiar functions such as search

Visual example

An app designed as a presentation creator with templates for devising and sharing tablet-based content

Utilizingthenativeuserinterface

A number of interactive tasks related to the user requirements for your app will be general for your chosen platform. For example, receiving an alert, viewing terms and conditions or using a keyboard for data entry.

Depending upon your approach to creating your app, these tasks can be managed by simply adding a ‘layer‘ of features or functions that already exist for the platform and can be adapted to suit your requirements with minimal customization.

Allowuserstoapplytheirknowledge

Is your application consistent with the platforms’ standards? Does it incorporate the device features in a valuable way? Is your application consistent within itself? Do the same icons always mean the same thing? Can people predict the outcome when they perform the same action in different places?

By considering consistency of approach it will allow users to transfer their knowledge and skills from using other applications to yours. Successful applications take advantage of the standards and paradigms that users are comfortable with.

DesignadviceUndertake adequate research into your chosen platforms approach and standards, and regularly test your ideas and prototypes with typical users.

DesignadviceUndertake adequate research into your chosen platform to cross-reference any existing features it provides that can be used in your app.


Utilizingmultitouch

Using touch gestures to interact is intuitive although different from previous methods we‘ve learnt through using the standard PC, mouse or trackpad configuration.

When people directly manipulate objects on-screen they become more engaged with the task and they more readily understand the results of their actions. Through gestures, users have a greater affinity for the objects and an increased sense of control.

This approach to interaction is ideal for designing challenges and games where dexterity and response time are key factors in measuring success during play.

Intuitive gestures can greatly improve experiences; for example, using pinch gestures to directly control the size of content instead of tapping zoom controls, and dragging and dropping on-screen objects.

4.3 Challenges

Games, activations, challenges and puzzles can be an effective way to deliver messages through engagement and apps are often the ideal vehicle. They can be designed as a component function or as independent apps depending on how they're required to meet your marketing requirements.

The following examples offer advice for some techniques to employ to bring your ideas to life.

Visual example

An app designed as a puzzle challenge showing how a modal interface can be simplified to improve ease-of-use and retain the integrity of the visual identity

Dragging and dropping elements

DesignadviceConsider the available gestures when devising challenge functions or game play to make the interaction appropriate and intuitive.


Visual example

An app designed as a brain training game visualizing a metaphorical approach to using the identity for games and challenges

The visual display of input as ‘handwriting’ is familiar to users

The time bar ‘fills’ showing simple feedback during a task

Usercontrolandfeedback

Users feel more in control when app behaviors are familiar and predictable. They expect to have the opportunity to cancel an operation or confirm their intention to perform an action.

By using feedback you can assure them that a process has been initiated. Feedback should be immediate and can also be repeat during lengthy operations. It should always be subtle, whether in the form of simple highlights, animation or even using sound although not as the primary feedback mechanism as users often turn sound off or down especially in public places.

Thevalueofvisualmetaphors

Users can quickly learn how to use an app when virtual objects and actions are metaphors for objects and actions in the real world.

Current devices can support rich imagery and video allowing greater scope for detailed visual approaches such as layering, depth and texture; all adding an element of realism into the interface.

Generally, visual metaphors work well when kept simple and allowed to complement the overall visual appeal of your app.

DesignadviceDuring your design phase consider feedback and develop consistent options where required across all features.

DesignadviceAssess your functions in the context of overall usability of your app to consider whether applying visual metaphors would aid user interaction.


Consideringdynamiccontent

The virtues of smartphones and tablets; their connectivity, portability, ease-of-use, intuitive interfaces, instant-on capability and long battery life are now providing new opportunities and challenges for viewing, sharing, recording and manipulating content.

With connected mobile devices we can access the internet and databases for text, imagery and video. We regularly rely on social media content to enhance our message and the devices also allow capturing data through email, forms and even imagery and video.

This added functionality poses a fundamental challenge to deciding the scope of your app and the interactive approach you take to cope with the variation and scale of dynamic content.

4.4 Frameworks

Apps rely on data and content as a foundation for interaction and users’ expectations have become increasingly sophisticated. Designing apps to act as frameworks for diverse and dynamic content provides opportunities for brands; whether for sharing thoughts or capturing feedback. The following examples offer advice for some of the design and content challenges you can face.

Visual example

An app designed as a framework for accessing content from a blog, with a number of options to organize the posts and added functionality for commenting and sharing

Visual techniques for loading content

DesignadviceConsider how your app looks and feels when the content is unavailable; for example, when a network connection is down.

When designing ‘containers’ for dynamic text content carefully consider the structure of the raw content and how it can be styled appropriately to create the right experience.

Often, imagery and video may come from different sources and can be challenging to fit into a universal template. Consider visual approaches that are looser and celebrate the dynamic nature of the source material.


Visual example An app designed as a framework to access social media feeds (in this example video content) as one of its features

Interface tips as simple overlays

Controllingvisualstructure

Even after defining the exact features of your app you may find aspects of the design require different approaches to interaction and interface design.

In this instance, modes can be useful. Modal interfaces are designed for the user to undertake one particular task at a time, seeing only the relevant controls and information.

The general challenge when designing apps is to keep your user-interface clear, uncluttered and usable as a touch interface. Modes can help achieve this by applying focus to each specific task.

Givingusersahelpinghand

Through effective design, one of your main aims will be to make your interface intuitive without relying on help or a guide to how your app works.

However, there are times when a design is most efficient to use once some initial behaviors have been learnt. This is where a quick introduction on how to use your app makes the user feel more comfortable and is not a reflection of a poor design.

DesignadviceConsider opportunities to simplify aspects of your design into modes by mapping typical user journeys and simplifying shared tasks.

DesignadviceConsider a number of options to aid first-time use. From demos, tutorials and walkthroughs to much simpler single-screen overlays, summaries or interface tips.


4.5 Smartphones

All aspects of this guide from understanding user experience, touchscreen gestures, the principles of user interface design and appropriate process are equally applicable to designing apps for smartphones.

Some added design challenges exist when creating ideas for a smaller screen and through following the correct process and adequate testing they can be solved easily.

When designing for smartphones there are a larger number of platforms and devices to consider, creating greater differences between device functionality and screen real-estate.

Ensure adequate time and resource is applied to defining your idea, mapping the user experience and designing the interface appropriately for the range of platforms and devices on which you choose to develop.

In conjunction with this document you should also refer to other relevant User Guides on Brand Space, such as the Deloitte Mobile user guidelines (brandspace.deloitte.com – User guides link on the homepage).



4.6 Enhancements

As you read this, the technologies listed in this section are already part of how we’re using our smartphones and tablets in everyday life.

When researching platform, device and delivery options to suit your requirements it’s important to have an clear understanding of the added hardware technology that can be utilized to enhance the functionality of your app.

Many smartphones and tablets now have built-in cameras for taking photos, recording video, utilizing augmented reality, mobile image recognition and scanning QR codes; accelerometers to measure acceleration which is useful in games and ‘bumping’ devices to transfer data; gyroscopes for measuring or maintaining orientation; Global positioning systems (GPS) for navigation and ‘finding’ your location in order to leverage location-based services; and of course multi-touch screens for allowing a variety of gesture based interactions.

In conjunction with this document you should also refer to other relevant User Guides on Brand Space, such as the Deloitte Mobile user guidelines (brandspace.deloitte.com – User guides link on the homepage).



Name Role Email

Brian Resnick Associate Director, Global Brand

[email protected]

Bill Barrett Associate Director, Online Communications

[email protected]

5.1 Internal resources 5.3 Contacts

5.2 External resources

AgencycontactsIn addition to providing clarification and/or support, the listed contacts can also refer you to agencies specializing in the custom build and implementation of apps. You may also, of course, reach out to local internal or external specialists of your choosing.

Name Description URL

Apple iOS iOS Dev Center http://developer.apple.com/devcenter/ios

Human Interface Guidelines

http://developer.apple.com/library/ ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

Android Developers http://developer.android.com/index.html

User Interface Guidelines http://developer.android.com/guide/practices/ ui_guidelines/index.html

Android Design http://developer.android.com/design/index. html

General resource – Smashing Magazine

Guidelines for Mobile Web Development

http://www.smashingmagazine.com/ guidelines-for-mobile-web-development/

General resource – Mobile X Web

UI Guidelines http://www.mobilexweb.com/blog/ ui-guidelines-mobile-tablet-design

General resource – Mobile HTML 5

Compatibility http://mobilehtml5.org/

Name Description URL

Deloitte Brand Space The definitive guide to our Brand identity

https://brandspace.deloitte.com/

Deloitte Mobile user guidelines

A user guide to leveraging mobile technologies

https://brandspace.deloitte.com/ (User guides link on homepage)

Deloitte Keynote guide A user guide to the alternative presentation app for use with iPad and Multi-touch mobile devices

https://brandspace.deloitte.com/ (User guides link on homepage)

Support

mailto:bresnick%40deloitte.com?subject=

mailto:wbarrett%40deloitte.com?subject=

http://developer.apple.com/devcenter/ios

http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html




http://developer.android.com/index.html

http://developer.android.com/guide/practices/ui_guidelines/index.html

http://developer.android.com/guide/practices/ui_guidelines/index.html

http://developer.android.com/design/index.html

http://developer.android.com/design/index.html

http://www.smashingmagazine.com/guidelines-for-mobile-web-development/

http://www.smashingmagazine.com/guidelines-for-mobile-web-development/

http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design

http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design

http://mobilehtml5.org/





Definitions

App Short for application; a type of end-user software that is developed to serve a specific function.

ePublishing Third party platforms designed to allow easy editing and publishing of content into self-contained modules for browsing primarily on tablets.

Feedback Visual changes to screen objects denoting an action has occurred; for example, the color change of an icon. Sometimes sound is also used as feedback during interaction.

Gestures Intuitive finger movements for using a multitouch screen to select and interact with apps.

Icons Visual representations of themes or ideas as a shorthand for feedback or navigation.

Menu Interactive objects or text organized into a horizontal or vertical layout as grouped menu items.

Multitouch Smartphone and tablet screen technology used as a physical interface capable of receiving feedback from multiple touches simultaneously.

Navigation Interactive objects or text added to screen layouts to reveal or allow access to further content or features.

Objects General term used to describe a visual module of an interface or self-contained pattern of interaction..

Prototype An in-progress software version of an app created to test structure and functionality.

Platform General term used to describe an open or closed software delivery option.

Smartphone Mobile handsets with the functionality for calling, or SMS/MMS and accessing mobile internet. Hardware often has a variety of functions including GPS utilized through downloadable apps.

Tablet A tablet is a mobile computer, larger than a mobile phone or PDA, integrated into a flat touch screen, primarily operated by touching the screen rather than using a physical keyboard. They often use an onscreen virtual keyboard or a passive stylus pen. Hardware often has a variety of functions including GPS utilized through downloadable apps.

Wireframes Diagrams or blueprints including all functional considerations and content requirements created as a foundation for prototyping.

This glossary includes definitions of terms that are referenced within this document

Editorial–ShellInsideEnergyApple iOS available via the app store

An app exploring the role innovation plays in producing energy to power and sustain our lives. Discover new ways of finding energy, learn about advances in technology, and meet the people involved in making it happen.

Frameworks–UnileverInvestorCentreApple iOS available via the app store

Provides Unilever investors with instant access to important financial and business information. Has a customizable dashboard that pushes live information to investors and analysts and interactive share price charts showing the latest prices for Unilever shares on four exchanges.

Tools–DeloitteBusiness:SocietyappNot currently available for general release

A tool based conversation app designed to aid discussions around businesses and their purpose in society. Includes a concise manifesto, case examples and a number of interactive tools to present the idea of defining business purpose.

Challenges–GEPatientShuffleApple iOS available via the app store

Do you have what it takes to run a hospital? Place the non-stop flow of patients in rooms, then match them with doctors. It's harder than it sounds, so you better plan ahead. The more happy patients you discharge, the higher you score.


Appendix 1Best practice examples of apps aimed at a business focused audience.

A number of other good examples can also be found on Apple’s App Store and Google’s Android Marketplace.

Editorial–TheGuardianApple iOS available via the app store and Android via Marketplace

An app which showcases international reporting, commentary, sports journalism and unique modular approach to coverage of culture, science and technology.

Challenges–AngryBirdsApple iOS available via the app store and Android via Marketplace

A game app featuring challenging physics-based gameplay with hours of replay value. Each level requires logic and skill to progress to the next level.

Tools–KeynoteApple iOS available via the app store

A presentation app with editing features to make creative presentations – complete with animated charts and transitions – simply by touching and tapping.

Frameworks–BBCiPlayerApple iOS available via the app store and Android via Marketplace

An app designed to allow you to watch, listen live and catch up on the last 7 days of BBC TV and Radio. Offers easy browsing through the schedules to find the content you want.

Tools–DiscovrMusicApple iOS available via the app store

An app with access to more than 15 million songs and 3 million artists in the world. It makes it easy to find and explore new music. You can enter an artist you like and browse the connections.

Frameworks–FlipboardApple iOS available via the app store

An app that aggregates different sources of published content into a beautiful, engaging layout and a magazine-style reading experience. Also offers simple share functionality across your social media networks.


Appendix 2Best practice examples of apps aimed at a general audience.

A number of other good examples can also be found on Apple’s App Store and Google’s Android Marketplace.

Deloitte refers to one or more of Deloitte Touche Tohmatsu Limited, a UK private company limited by guarantee, and its network of member firms, each of which is a legally separate and independent entity. Please see www.deloitte.com/about for a detailed description of the legal structure of Deloitte Touche Tohmatsu Limited and its member firms.

Deloitte provides audit, tax, consulting, and financial advisory services to public and private clients spanning multiple industries. With a globally connected network of member firms in more than 150 countries, Deloitte brings world-class capabilities and deep local expertise to help clients succeed wherever they operate. Deloitte's approximately 195,000 professionals are committed to becoming the standard of excellence.

This publication is for internal distribution and use only among personnel of Deloitte Touche Tohmatsu Limited, its member firms, and their related entities (collectively, the “Deloitte Network”). None of the Deloitte Network shall be responsible for any loss whatsoever sustained by any person who relies on this publication.

© 2012 Deloitte Global Services Limited

http://www.deloitte.com/about

deloitte app design guide revjuly2012

Documents

deloitte app guide

deloitte brand

deloitte global

user guide

app design visual identity

app retirement plans

design development

apps functions