6 rules to designing amazing mobile apps (@media 2011)

280
Brian Fling @fling Rules for Designing Amazing Apps 6 1. 2. 3. 4. 5. 6.

Upload: brian-fling

Post on 20-Aug-2015

9.233 views

Category:

Technology


1 download

TRANSCRIPT

Brian Fling @fling

Rules for Designing Amazing Apps6

1.

2.

3.

4.

5.

6.

great mobile design is not made in Photoshop

MADE WITH LOVE IN SEATTLE BY

great mobile design is not made in Photoshop

MADE WITH LOVE IN SEATTLE BY

“We could build the best mobile app ever made, but if our customers don’t know why it’s good, then it could be the worst app ever made.

—Scott Dierdorf@sdierdorf

The Puget Sound Region

The Puget Sound Region

mobiledesign.org

“[Brian] states making a native application can be the best thing for a product, but confirms on the other hand that the mobile web is the only long term commercially viable content platform for mobile devices

—Thibault Imbert

MADE WITH LOVE IN SEATTLE BY

MADE WITH LOVE IN SEATTLE BY

MADE WITH LOVE IN SEATTLE BY

Ancient Greek Technology

STREETS CARTOGRAPHY CALIPER CRANE ESCAPEMENT TUMBLER_LOCK GEARS

PLUMBING SPIRAL_STAIRCASE URBAN_PLANNING CROSSBOW WINCH

WHEELBARROW SHOWERS CENTRAL_HEATING LIGHTHOUSE

ALARM_CLOCK CHAIN_DRIVE CANNON LEVERS WATER_MILL GIMBAL DRY_DOCK

ANALOG_COMPUTERS FIRE_HOSE VENDING_MACHINE WIND_VANE

CLOCK_TOWER AUTOMATIC_DOORS

Ancient Greek Technology

MADE WITH LOVE IN SEATTLE BY

POLITICAL_PHILOSOPHY ETHICS METAPHYSICS

ONTOLOGY LOGIC BIOLOGY RHETORIC

& AESTHETICS

“Greek philosophy has shaped the entire Western thought since its inception.”

MADE WITH LOVE IN SEATTLE BY

Some Innovations from the Roman Empire

ABACUS AMPHITHEATER AQUEDUCT ARCH BOOK BRASS BRIDGE CAMEOS CAST_IRON

CEMENT CRANE DAM DOME LOOM FLAMETHROWER GLASS BLOWING

HAND_SOAP HYDRAULICS HYDROMETER KNIFE LIGHTHOUSES LEATHER MILLS

STEAM_ENGINE NEWSPAPER ODOMETER PADDLE_WHEEL PEWTER POTTERY

REAPER SAILS RUDDER SAUSAGE SEWERS SPIRAL_STAIRCASE STENOGRAPHY

STREET_MAPS SURGICAL_INSTRUMENTS

Some Innovations from the Roman Empire

MADE WITH LOVE IN SEATTLE BY

MADE WITH LOVE IN SEATTLE BY

MADE WITH LOVE IN SEATTLE BYMADE WITH LOVE IN SEATTLE BY

MADE WITH LOVE IN SEATTLE BY

MADE WITH LOVE IN SEATTLE BY

“In an economy where the only certainty is uncertainty, the one source of lasting competitive advantage is knowledge. When markets shift, technologies proliferate, and products become obsolete almost overnight, successful companies are those that consistently create new knowledge, disseminate it widely throughout the organization and quickly embody it in new technologies and products”

computing

network

internet

devices

web dot-com

20102000199019801970

web 2.0

featurebrick

IPv4

touch

3G

IPv6

2020

candybar

4G2.5G2G1G

ubiquitymobilitypc’smainframe

nextacademia

MADE WITH LOVE IN SEATTLE BY

touch

IPv6

4G

ubiquity

next

MADE WITH LOVE IN SEATTLE BY

MADE WITH LOVE IN SEATTLE BY

61. UNDERSTAND THE MEDIUM

Get to know the differences between mobile and other mediums.

2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.

3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.

4. DESIGN FOR INTERACTIONA gift for pixel perfection and psych degree can come in handy.

5. FOCUS ON THE DETAILSSmall screens don’t make things easier. They make things a lot harder.

6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.

#1

Brian Fling @fling

Rules for Designing Amazing Apps

mobile design is an entirely new breed

of design.

MADE WITH LOVE IN SEATTLE BY

Phones are about making the most of the moment, simple tasks,& context.

MADE WITH LOVE IN SEATTLE BY

MADE WITH LOVE IN SEATTLE BY

think of your app as a great book.

MADE WITH LOVE IN SEATTLE BY

think of your app as a great book.

MADE WITH LOVE IN SEATTLE BY

with a clear beginning, middle and end

Tablets are about focus, consumption, simple tasks & portability.

‣ Platform Aesthetic

‣ Platform Aesthetic‣ Many Resolutions

‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch

‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation

‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids

‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective

‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension

‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension

‣ Interactions

‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension

‣ Interactions‣ Motion

‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension

‣ Interactions‣ Motion‣ Transitions

‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension

‣ Interactions‣ Motion‣ Transitions‣ Color

‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension

‣ Interactions‣ Motion‣ Transitions‣ Color‣ Typography

‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension

‣ Interactions‣ Motion‣ Transitions‣ Color‣ Typography‣ Iconography

p/z universal

p/z universalbuild a website that provided the best possible experience to the context.

p/z universalbuild a website that provided the best possible experience to the context.

iPad

magazine

p/z universalbuild a website that provided the best possible experience to the context.

iPad

magazineiPhone

web app

p/z universalbuild a website that provided the best possible experience to the context.

iPad

magazineiPhone

web appDesktop

website

MADE WITH LOVE IN SEATTLE BY

1x HTML5 Markup

1x HTML5 Markup1x Hexadecimal CSS Framework

1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework

1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework3x Javascript Frameworks

1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework3x Javascript Frameworks12x Media-Query-based Layouts

a hexadecimal what?

the hex-grid

Typically when using a grid web designers are typically only using vertical units.

the hex-grid

but in mobile design, we must use horizontal units as well. this means that any unit size must work vertically as well as horizontally.

61. UNDERSTAND THE MEDIUM

Get to know the differences between mobile and other mediums.

2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.

3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.

4. DESIGN FOR INTERACTIONA gift for pixel perfection and psych degree can come in handy.

5. FOCUS ON THE DETAILSSmall screens don’t make things easier. They make things a lot harder.

6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.

#2

Brian Fling @fling

Rules for Designing Amazing Apps

1 out of 3 projects go sideways because of

BAD DATAMADE WITH LOVE IN SEATTLE BY

MADE WITH LOVE IN SEATTLE BY

and there is noDesign without Data

Content is Data

and there is noDesign without Data

Content is Data

Creating Amazing Experiences for all Mobile Devices

This document contains confidential information and is provided for private review only. Do not distribute without permission.

ScreenshotPlaceholder

CLIENT

Automatic Data Processing

PROJECTS

ADP iPhone App, Mobile Web App, Content Proxy

SERVICES

Concept, Strategy, Design & Development

DESCRIPTION

We designed and developed an application for ADP customers to complete common tasks related to HR, payroll, and benefits in a mobile context.

“A new form of Web content that is

meaningful to computers will unleash a revolution

of new possibilities.”

MADE WITH LOVE IN SEATTLE BY

61. UNDERSTAND THE MEDIUM

Get to know the differences between mobile and other mediums.

2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.

3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.

4. DESIGN FOR INTERACTIONA gift for pixel perfection and psych degree can come in handy.

5. FOCUS ON THE DETAILSSmall screens don’t make things easier. They make things a lot harder.

6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.

#3

Brian Fling @fling

Rules for Designing Amazing Apps

JARGON ALERT

ContextThe circumstances that form the setting for an event, statement, or idea, and in terms of which it can be fully understood and assessed.

context adds meaning to data

MADE WITH LOVE IN SEATTLE BY

Events

TV

Billboard

Radio

Live

Website

Auditory

Kinesthetic

Visu

al

Word of Mouth

Print Ad

Mobile Device

IVR

SMS

IVR

SMS

WAP

SMS

QR Code

SMS

QR Code

SMS

SMSMMS

SMS

WAP

SMS

SMS

Bluetooth

Notify

WAP

WAP

MMS

Email

Send to Friend

WAP Site

Notify

Buy

WAP SiteWAP Site

Send to Friend

Join

Buy

NotifyNotify

Send to Friend

Post WAP Site

MMS

Send to Friend

Notify

Send to Friend

Join

Discuss

Send to Friend

Notify

Download

DownloadNotify

Vote

Join

Vote

Notify

Buy

Send to Friend

Notify

Events

TV

Billboard

Radio

Live

Website

Auditory

Kinesthetic

Visu

al

Word of Mouth

Print Ad

Mobile Device

IVR

SMS

IVR

SMS

WAP

SMS

QR Code

SMS

QR Code

SMS

SMSMMS

SMS

WAP

SMS

SMS

Bluetooth

Notify

WAP

WAP

MMS

Email

Send to Friend

WAP Site

Notify

Buy

WAP SiteWAP Site

Send to Friend

Join

Buy

NotifyNotify

Send to Friend

Post WAP Site

MMS

Send to Friend

Notify

Send to Friend

Join

Discuss

Send to Friend

Notify

Download

DownloadNotify

Vote

Join

Vote

Notify

Buy

Send to Friend

Notify

Events

TV

Billboard

Radio

Live

Website

Auditory

Kinesthetic

Visu

al

Word of Mouth

Print Ad

Mobile Device

IVR

SMS

IVR

SMS

WAP

SMS

QR Code

SMS

QR Code

SMS

SMSMMS

SMS

WAP

SMS

SMS

Bluetooth

Notify

WAP

WAP

MMS

Email

Send to Friend

WAP Site

Notify

Buy

WAP SiteWAP Site

Send to Friend

Join

Buy

NotifyNotify

Send to Friend

Post WAP Site

MMS

Send to Friend

Notify

Send to Friend

Join

Discuss

Send to Friend

Notify

Download

DownloadNotify

Vote

Join

Vote

Notify

Buy

Send to Friend

Notify

Events

TV

Billboard

Radio

Live

Website

Auditory

Kinesthetic

Visu

al

Word of Mouth

Print Ad

Mobile Device

IVR

SMS

IVR

SMS

WAP

SMS

QR Code

SMS

QR Code

SMS

SMSMMS

SMS

WAP

SMS

SMS

Bluetooth

Notify

WAP

WAP

MMS

Email

Send to Friend

WAP Site

Notify

Buy

WAP SiteWAP Site

Send to Friend

Join

Buy

NotifyNotify

Send to Friend

Post WAP Site

MMS

Send to Friend

Notify

Send to Friend

Join

Discuss

Send to Friend

Notify

Download

DownloadNotify

Vote

Join

Vote

Notify

Buy

Send to Friend

Notify

types of context

Big IdeasLocationDeviceState of Mind

types of context

Big IdeasLocationDeviceState of Mind

types of context

Big IdeasLocationDeviceState of Mind

types of context

Big IdeasLocationDeviceState of Mind

always add value to the users context*

MADE WITH LOVE IN SEATTLE BY

always add value to the users context*

*Doing so requires a little Psych 101

MADE WITH LOVE IN SEATTLE BY

61. UNDERSTAND THE MEDIUM

Get to know the differences between mobile and other mediums.

2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.

3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.

4. DESIGN FOR INTERACTIONA gift for pixel perfection and psych degree can come in handy.

5. FOCUS ON THE DETAILSSmall screens don’t make things easier. They make things a lot harder.

6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.

#4

Brian Fling @fling

Rules for Designing Amazing Apps

interactions evoke strong feelings

MADE WITH LOVE IN SEATTLE BY

MEDIUM(Mobile)

CONTEXT MEDIUM(Mobile)

CONTEXT MEDIUM(Mobile)

INTERACTION

The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.

Jesse James [email protected]

Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")

Information Architecture: structural designof the information space to facilitateintuitive access to content

Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality

Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

Content Requirements: definition ofcontent elements required in the sitein order to meet user needs

Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Web as software interface Web as hypertext system

Visual Design: visual treatment of text,graphic page elements and navigationalcomponents

Concrete

Abstract

time

Conception

Completion

FunctionalSpecifications

ContentRequirements

InteractionDesign

InformationArchitecture

Visual Design

Information DesignInterface Design Navigation Design

Site ObjectivesUser Needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.

task-oriented information-oriented

30 March 2000

© 2000 Jesse James Garrett http://www.jjg.net/ia/

The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.

Jesse James [email protected]

Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")

Information Architecture: structural designof the information space to facilitateintuitive access to content

Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality

Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

Content Requirements: definition ofcontent elements required in the sitein order to meet user needs

Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Web as software interface Web as hypertext system

Visual Design: visual treatment of text,graphic page elements and navigationalcomponents

Concrete

Abstract

time

Conception

Completion

FunctionalSpecifications

ContentRequirements

InteractionDesign

InformationArchitecture

Visual Design

Information DesignInterface Design Navigation Design

Site ObjectivesUser Needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.

task-oriented information-oriented

30 March 2000

© 2000 Jesse James Garrett http://www.jjg.net/ia/

The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.

Jesse James [email protected]

Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")

Information Architecture: structural designof the information space to facilitateintuitive access to content

Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality

Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

Content Requirements: definition ofcontent elements required in the sitein order to meet user needs

Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Web as software interface Web as hypertext system

Visual Design: visual treatment of text,graphic page elements and navigationalcomponents

Concrete

Abstract

time

Conception

Completion

FunctionalSpecifications

ContentRequirements

InteractionDesign

InformationArchitecture

Visual Design

Information DesignInterface Design Navigation Design

Site ObjectivesUser Needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.

task-oriented information-oriented

30 March 2000

© 2000 Jesse James Garrett http://www.jjg.net/ia/

JARGON ALERT

NeedsThe circumstances in which something is necessary, or that require some course of action.

Abraham Harold Maslow (April 1, 1908 – June 8, 1970) was an American psychologist. He is noted for his concept-ualization of a "hierarchy of human needs", and is considered the founder of humanistic psychology.

CONTEXT MEDIUM(Mobile)

INTERACTION

CONTEXT MEDIUM(Mobile)

INTERACTION

?

JARGON ALERT

SkeuomorphA derivative object that retains ornamental design cues to a structure that was necessary in the original.

great interactions evoke feelings

MADE WITH LOVE IN SEATTLE BY

“Unlike personality, attitudes are expected to change as a function of experience.”

Affect

AffectThe emotional response that expresses an individual's degree of preference for an entity.

AffectBehavior

AffectBehaviorThe verbal indication or typical behavioral tendency of an individual.

AffectBehaviorCognition

AffectBehaviorCognitionThe evaluation of the entity that constitutes an individual's beliefs about the object.

61. UNDERSTAND THE MEDIUM

Get to know the differences between mobile and other mediums.

2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.

3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.

4. DESIGN FOR INTERACTIONA gift for pixel perfection and psych degree can come in handy.

5. FOCUS ON THE DETAILS1. Small screens don’t make things easier. They

make things a lot harder.

6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.

#5

Brian Fling @fling

Rules for Designing Amazing Apps

details matter

MADE WITH LOVE IN SEATTLE BY

design @ 1600%

MADE WITH LOVE IN SEATTLE BY

6x Navigation & Toolbars

6x Navigation & Toolbars3x Alerts & Modals

6x Navigation & Toolbars3x Alerts & Modals26x Types of Views

6x Navigation & Toolbars3x Alerts & Modals26x Types of Views 15x View Controls

6x Navigation & Toolbars3x Alerts & Modals26x Types of Views 15x View Controls13x Application Controls

6x Navigation & Toolbars3x Alerts & Modals26x Types of Views 15x View Controls13x Application Controls9x Animations & Transitions

61. UNDERSTAND THE MEDIUM

Get to know the differences between mobile and other mediums.

2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.

3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.

4. DESIGN FOR INTERACTIONA gift for pixel perfection and psych degree can come in handy.

5. FOCUS ON THE DETAILSSmall screens don’t make things easier. They make things a lot harder.

6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.

#6

Brian Fling @fling

Rules for Designing Amazing Apps

there are few tools or processes that

suit mobile

MADE WITH LOVE IN SEATTLE BY

DESIGNERS DEVELOPERS

Planning Interactions Design Integration Development Testing Fixes Deployment

DESIGNERS DEVELOPERS

Planning Interactions Design Integration Development Testing Fixes Deployment

DESIGNERS DEVELOPERS

Planning Interactions Design Integration Development Testing Fixes Deployment

DESIGNERS DEVELOPERS

Planning Interactions Design Integration Development Testing Fixes Deployment

DESIGNERS DEVELOPERS

Planning Interactions Design Integration Development Testing Fixes Deployment

DESIGNERS DEVELOPERS

Planning Interactions Design Integration Development Testing Fixes Deployment

DESIGNERS DEVELOPERS

Planning Interactions Design Integration Development Testing Fixes Deployment

DESIGNERS DEVELOPERS

Planning Interactions Design Integration Development Testing Fixes Deployment

DESIGNERS DEVELOPERS

Planning Interactions Design Integration Development Testing Fixes Deployment

DESIGNERS DEVELOPERS

Mobile Design is Web Design

Mobile Design is Web Design

Mobile Design is Software Design

Mobile Design is Software Design

This document contains confidential information and is provided for private review only. Do not distribute without permission.

A Fully Agile AgencyFrom Start to Finish

This document contains confidential information and is provided for private review only. Do not distribute without permission.

This document contains confidential information and is provided for private review only. Do not distribute without permission.

Process

Define

Process

DataDefine

Process

InteractionDataDefine

Process

DesignInteractionDataDefine

Process

DesignInteractionDataDefine

Process

Del

iver

able

s

DesignInteractionDataDefine

Project Brief

Process

Del

iver

able

s

DesignInteractionDataDefine

Project Brief

Journeys

Process

Del

iver

able

s

DesignInteractionDataDefine

Project Brief

Journeys

Context Map

Process

Del

iver

able

s

DesignInteractionDataDefine

Project Brief

Journeys

Context Map

Content Audit

Process

Del

iver

able

s

DesignInteractionDataDefine

Project Brief

Journeys

Context Map

Content Audit

API Audit

Process

Del

iver

able

s

DesignInteractionDataDefine

Project Brief

Journeys

Context Map

Content Audit

API Audit

Data Modeling

Process

Del

iver

able

s

DesignInteractionDataDefine

Project Brief

Journeys

Context Map

Content Audit

API Audit

Data Modeling

App Flow

Process

Del

iver

able

s

DesignInteractionDataDefine

Project Brief

Journeys

Context Map

Content Audit

API Audit

Data Modeling

App Flow

Screen Descriptions

Process

Del

iver

able

s

DesignInteractionDataDefine

Project Brief

Journeys

Context Map

Content Audit

API Audit

Data Modeling

App Flow

Screen Descriptions

Zone Diagrams

Process

Del

iver

able

s

DesignInteractionDataDefine

Project Brief

Journeys

Context Map

Content Audit

API Audit

Data Modeling

App Flow

Screen Descriptions

Zone Diagrams

App Map

Process

Del

iver

able

s

DesignInteractionDataDefine

Project Brief

Journeys

Context Map

Content Audit

API Audit

Data Modeling

App Flow

Screen Descriptions

Zone Diagrams

App Map

Reference Design

Process

Del

iver

able

s

DesignInteractionDataDefine

Project Brief

Journeys

Context Map

Content Audit

API Audit

Data Modeling

App Flow

Screen Descriptions

Zone Diagrams

App Map

Reference Design

Design Brief

Process

Del

iver

able

s

DesignInteractionDataDefine

Project Brief

Journeys

Context Map

Content Audit

API Audit

Data Modeling

App Flow

Screen Descriptions

Zone Diagrams

App Map

Reference Design

Design Brief

Wireframes

Process

Del

iver

able

s

DesignInteractionDataDefine

Project Brief

Journeys

Context Map

Content Audit

API Audit

Data Modeling

App Flow

Screen Descriptions

Zone Diagrams

App Map

Reference Design

Design Brief

Wireframes

Design Direction

Process

Del

iver

able

s

DesignInteractionDataDefine

Project Brief

Journeys

Context Map

Content Audit

API Audit

Data Modeling

App Flow

Screen Descriptions

Zone Diagrams

App Map

Reference Design

Design Brief

Wireframes

Design Direction

Design Comps

Process

Del

iver

able

s

DesignInteractionDataDefine

Project Brief

Journeys

Context Map

Content Audit

API Audit

Data Modeling

App Flow

Screen Descriptions

Zone Diagrams

App Map

Reference Design

Design Brief

Wireframes

Design Direction

Design Comps

Asset Library

Process

Del

iver

able

s

61. UNDERSTAND THE MEDIUM

Get to know the differences between mobile and other mediums.

2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.

3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.

4. DESIGN FOR INTERACTIONA gift for pixel perfection and psych degree can come in handy.

5. FOCUS ON THE DETAILSSmall screens don’t make things easier. They make things a lot harder.

6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.

Brian Fling @fling

Rules for Designing Amazing Apps

EHARMONYHOME v1

EHARMONYHOME v2

EHARMONYHOME v3

EHARMONYHOME v4

EHARMONYHOME v5

EHARMONYHOME v6

Get in TouchFind Out How We Can Help You.

Brian FlingFounder & Creative Director

[email protected]+1 206 351-6060

My name is Brian Fling and I’m a Mobile Designer

twitter.com/fling

book mobiledesign.org

company pinchzoom.com

blog pinchzoom.com/fling

THANK YOU