Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

great mobile design is not made in Photoshop MADE WITH LOVE IN SEATTLE BY

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

The Puget Sound Region

Slide 5

Slide 5 text

The Puget Sound Region

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

mobiledesign.org

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

“[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

Slide 22

Slide 22 text

MADE WITH LOVE IN SEATTLE BY

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

MADE WITH LOVE IN SEATTLE BY

Slide 25

Slide 25 text

MADE WITH LOVE IN SEATTLE BY

Slide 26

Slide 26 text

Ancient Greek Technology

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

MADE WITH LOVE IN SEATTLE BY

Slide 29

Slide 29 text

POLITICAL_PHILOSOPHY ETHICS METAPHYSICS ONTOLOGY LOGIC BIOLOGY RHETORIC & AESTHETICS

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

MADE WITH LOVE IN SEATTLE BY

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Some Innovations from the Roman Empire

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

MADE WITH LOVE IN SEATTLE BY

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

MADE WITH LOVE IN SEATTLE BY

Slide 50

Slide 50 text

MADE WITH LOVE IN SEATTLE BY MADE WITH LOVE IN SEATTLE BY

Slide 51

Slide 51 text

MADE WITH LOVE IN SEATTLE BY

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

MADE WITH LOVE IN SEATTLE BY

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

“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”

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

computing network internet devices web dot-com 2010 2000 1990 1980 1970 web 2.0 feature brick IPv4 touch 3G IPv6 2020 candybar 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe next academia MADE WITH LOVE IN SEATTLE BY touch IPv6 4G ubiquity next

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

MADE WITH LOVE IN SEATTLE BY

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

MADE WITH LOVE IN SEATTLE BY

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

6 1. UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums. 2. GET YOUR DATA DIALED Data is the new content, and it comes from everywhere. 3. BE A MASTER OF CONTEXT Dive into context, it is the easiest way to level up to awesomeness. 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Small screens don’t make things easier. They make things a lot harder. 6. ALLOW AMPLE TIME It takes a lot longer than you might think. #1 Brian Fling @fling Rules for Designing Amazing Apps

Slide 68

Slide 68 text

mobile design is an entirely new breed of design. MADE WITH LOVE IN SEATTLE BY

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

MADE WITH LOVE IN SEATTLE BY

Slide 71

Slide 71 text

MADE WITH LOVE IN SEATTLE BY

Slide 72

Slide 72 text

think of your app as a great book. MADE WITH LOVE IN SEATTLE BY

Slide 73

Slide 73 text

think of your app as a great book. MADE WITH LOVE IN SEATTLE BY with a clear beginning, middle and end

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

‣ Platform Aesthetic

Slide 83

Slide 83 text

‣ Platform Aesthetic ‣ Many Resolutions

Slide 84

Slide 84 text

‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch ‣ Orientation ‣ Design Grids ‣ Perspective ‣ Dimension ‣ Interactions ‣ Motion ‣ Transitions ‣ Color

Slide 93

Slide 93 text

‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch ‣ Orientation ‣ Design Grids ‣ Perspective ‣ Dimension ‣ Interactions ‣ Motion ‣ Transitions ‣ Color ‣ Typography

Slide 94

Slide 94 text

‣ Platform Aesthetic ‣ Many Resolutions ‣ Pixels per Inch ‣ Orientation ‣ Design Grids ‣ Perspective ‣ Dimension ‣ Interactions ‣ Motion ‣ Transitions ‣ Color ‣ Typography ‣ Iconography

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

p/z universal

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

p/z universal build a website that provided the best possible experience to the context. iPad magazine

Slide 99

Slide 99 text

p/z universal build a website that provided the best possible experience to the context. iPad magazine iPhone web app

Slide 100

Slide 100 text

p/z universal build a website that provided the best possible experience to the context. iPad magazine iPhone web app Desktop website

Slide 101

Slide 101 text

MADE WITH LOVE IN SEATTLE BY

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

1x HTML5 Markup

Slide 104

Slide 104 text

1x HTML5 Markup 1x Hexadecimal CSS Framework

Slide 105

Slide 105 text

1x HTML5 Markup 1x Hexadecimal CSS Framework 1x Typography Framework

Slide 106

Slide 106 text

1x HTML5 Markup 1x Hexadecimal CSS Framework 1x Typography Framework 3x Javascript Frameworks

Slide 107

Slide 107 text

1x HTML5 Markup 1x Hexadecimal CSS Framework 1x Typography Framework 3x Javascript Frameworks 12x Media-Query-based Layouts

Slide 108

Slide 108 text

a hexadecimal what?

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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.

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

6 1. UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums. 2. GET YOUR DATA DIALED Data is the new content, and it comes from everywhere. 3. BE A MASTER OF CONTEXT Dive into context, it is the easiest way to level up to awesomeness. 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Small screens don’t make things easier. They make things a lot harder. 6. ALLOW AMPLE TIME It takes a lot longer than you might think. #2 Brian Fling @fling Rules for Designing Amazing Apps

Slide 113

Slide 113 text

1 out of 3 projects go sideways because of BAD DATA MADE WITH LOVE IN SEATTLE BY

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

MADE WITH LOVE IN SEATTLE BY

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

No content

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

No content

Slide 120

Slide 120 text

and there is no Design without Data Content is Data

Slide 121

Slide 121 text

and there is no Design without Data Content is Data

Slide 122

Slide 122 text

Creating Amazing Experiences for all Mobile Devices This document contains confidential information and is provided for private review only. Do not distribute without permission. Screenshot Placeholder 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.

Slide 123

Slide 123 text

No content

Slide 124

Slide 124 text

“A new form of Web content that is meaningful to computers will unleash a revolution of new possibilities.”

Slide 125

Slide 125 text

No content

Slide 126

Slide 126 text

No content

Slide 127

Slide 127 text

No content

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

MADE WITH LOVE IN SEATTLE BY

Slide 130

Slide 130 text

No content

Slide 131

Slide 131 text

6 1. UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums. 2. GET YOUR DATA DIALED Data is the new content, and it comes from everywhere. 3. BE A MASTER OF CONTEXT Dive into context, it is the easiest way to level up to awesomeness. 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Small screens don’t make things easier. They make things a lot harder. 6. ALLOW AMPLE TIME It takes a lot longer than you might think. #3 Brian Fling @fling Rules for Designing Amazing Apps

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

context adds meaning to data MADE WITH LOVE IN SEATTLE BY

Slide 134

Slide 134 text

No content

Slide 135

Slide 135 text

Events TV Billboard Radio Live Auditory Kinesthetic Visual Word of Mouth Print Ad Mobile Device QR

Slide 136

Slide 136 text

Events TV Billboard Radio Live Website Auditory Kinesthetic Visual Word of Mouth Print Ad Mobile Device WAP SMS QR Cod SMS QR Code WAP SMS SMS Bluetooth WAP MMS MMS

Slide 137

Slide 137 text

Events TV Billboard Radio Live Website Auditory Kinesthetic Visual Word of Mouth Print Ad Mobile Device IVR SMS IVR SMS WAP SMS QR Code SMS QR Code SMS MMS SMS WAP SMS SMS Bluetooth Notify WAP WAP MMS Email Send to Friend W No B WAP Site WAP Site Join Buy MMS ify d to nd Discuss Send to Friend Notify Buy Send to Friend Notify

Slide 138

Slide 138 text

Events TV Billboard Radio Live Website Auditory Kinesthetic Visual Word of Mouth Print Ad Mobile Device IVR SMS IVR SMS WAP SMS QR Code SMS QR Code SMS SMS MMS SMS WAP SMS SMS Bluetooth Notify WAP WAP MMS Email Send to Friend WAP Site Notify Buy WAP Site WAP Site Send to Friend Join Buy Notify Notify Send to Friend Post WAP Site MMS Send to Friend Notify Send to Friend Join Discuss Send to Friend Notify Down load Down load Notify Vote Join Vote Notify Buy Send to Friend Notify

Slide 139

Slide 139 text

types of context Big Ideas Location Device State of Mind

Slide 140

Slide 140 text

No content

Slide 141

Slide 141 text

No content

Slide 142

Slide 142 text

No content

Slide 143

Slide 143 text

No content

Slide 144

Slide 144 text

types of context Big Ideas Location Device State of Mind

Slide 145

Slide 145 text

No content

Slide 146

Slide 146 text

types of context Big Ideas Location Device State of Mind

Slide 147

Slide 147 text

No content

Slide 148

Slide 148 text

No content

Slide 149

Slide 149 text

types of context Big Ideas Location Device State of Mind

Slide 150

Slide 150 text

No content

Slide 151

Slide 151 text

always add value to the users context* MADE WITH LOVE IN SEATTLE BY

Slide 152

Slide 152 text

always add value to the users context* *Doing so requires a little Psych 101 MADE WITH LOVE IN SEATTLE BY

Slide 153

Slide 153 text

6 1. UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums. 2. GET YOUR DATA DIALED Data is the new content, and it comes from everywhere. 3. BE A MASTER OF CONTEXT Dive into context, it is the easiest way to level up to awesomeness. 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Small screens don’t make things easier. They make things a lot harder. 6. ALLOW AMPLE TIME It takes a lot longer than you might think. #4 Brian Fling @fling Rules for Designing Amazing Apps

Slide 154

Slide 154 text

No content

Slide 155

Slide 155 text

No content

Slide 156

Slide 156 text

interactions evoke strong feelings MADE WITH LOVE IN SEATTLE BY

Slide 157

Slide 157 text

No content

Slide 158

Slide 158 text

MEDIUM (Mobile)

Slide 159

Slide 159 text

CONTEXT MEDIUM (Mobile)

Slide 160

Slide 160 text

CONTEXT MEDIUM (Mobile) INTERACTION

Slide 161

Slide 161 text

The Elements of User Experience A basic duality: The Web was originally conceived as a hypertextual information space; but the development of increasingly sophisticated front- and back-end technologies has fostered 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 beyond the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among these various elements. Jesse James Garrett [email protected] Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel") Information Architecture: structural design of the information space to facilitate intuitive access to content Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality Navigation Design: design of interface elements to facilitate the user's movement through the information architecture Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Functional Specifications: "feature set": detailed descriptions of functionality the site must include in order to meet user needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site Content Requirements: definition of content elements required in the site in order to meet user needs Interface Design: as in traditional HCI: design of interface elements to facilitate user interaction with functionality Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Web as software interface Web as hypertext system Visual Design: visual treatment of text, graphic page elements and navigational components Concrete Abstract time Conception Completion Functional Specifications Content Requirements Interaction Design Information Architecture Visual Design Information Design Interface Design Navigation Design Site Objectives User Needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally 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 a user 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/

Slide 162

Slide 162 text

Information Architecture: structural design of the information space to facilitate intuitive access to content Navigation Design: design of interface elements to facilitate the user's movement through the information architecture Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Content Requirements: definition of content elements required in the site in order to meet user needs Web as hypertext system Visual Design: visual treatment of text, graphic page elements and navigational components time Conception Completion nctional cations Content Requirements eraction ign Information Architecture Visual Design rmation Design rface Design Navigation Design ite Objectives User Needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site information-oriented

Slide 163

Slide 163 text

Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel") Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality Functional Specifications: "feature set": detailed descriptions of functionality the site must include in order to meet user needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site Interface Design: as in traditional HCI: design of interface elements to facilitate user interaction with functionality Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Web as software interface Concrete Abstract Functional Specifications C Requir Interaction Design Inf Archit Visual Desig Information Desi Interface Design Nav Site Objectives User Nee task-oriented

Slide 164

Slide 164 text

JARGON ALERT Needs The circumstances in which something is necessary, or that require some course of action.

Slide 165

Slide 165 text

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.

Slide 166

Slide 166 text

No content

Slide 167

Slide 167 text

No content

Slide 168

Slide 168 text

No content

Slide 169

Slide 169 text

No content

Slide 170

Slide 170 text

No content

Slide 171

Slide 171 text

CONTEXT MEDIUM (Mobile) INTERACTION

Slide 172

Slide 172 text

CONTEXT MEDIUM (Mobile) INTERACTION ?

Slide 173

Slide 173 text

No content

Slide 174

Slide 174 text

No content

Slide 175

Slide 175 text

No content

Slide 176

Slide 176 text

No content

Slide 177

Slide 177 text

JARGON ALERT Skeuomorph A derivative object that retains ornamental design cues to a structure that was necessary in the original.

Slide 178

Slide 178 text

http://www.flickr.com/photos/youraccount/sets/72157619967702538/with/3642814120/

Slide 179

Slide 179 text

No content

Slide 180

Slide 180 text

No content

Slide 181

Slide 181 text

No content

Slide 182

Slide 182 text

No content

Slide 183

Slide 183 text

No content

Slide 184

Slide 184 text

No content

Slide 185

Slide 185 text

No content

Slide 186

Slide 186 text

great interactions evoke feelings MADE WITH LOVE IN SEATTLE BY

Slide 187

Slide 187 text

No content

Slide 188

Slide 188 text

No content

Slide 189

Slide 189 text

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

Slide 190

Slide 190 text

No content

Slide 191

Slide 191 text

Affect

Slide 192

Slide 192 text

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

Slide 193

Slide 193 text

Affect Behavior

Slide 194

Slide 194 text

Affect Behavior The verbal indication or typical behavioral tendency of an individual.

Slide 195

Slide 195 text

Affect Behavior Cognition

Slide 196

Slide 196 text

Affect Behavior Cognition The evaluation of the entity that constitutes an individual's beliefs about the object.

Slide 197

Slide 197 text

No content

Slide 198

Slide 198 text

No content

Slide 199

Slide 199 text

No content

Slide 200

Slide 200 text

6 1. UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums. 2. GET YOUR DATA DIALED Data is the new content, and it comes from everywhere. 3. BE A MASTER OF CONTEXT Dive into context, it is the easiest way to level up to awesomeness. 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS 1. Small screens don’t make things easier. They make things a lot harder. 6. ALLOW AMPLE TIME It takes a lot longer than you might think. #5 Brian Fling @fling Rules for Designing Amazing Apps

Slide 201

Slide 201 text

details matter MADE WITH LOVE IN SEATTLE BY

Slide 202

Slide 202 text

No content

Slide 203

Slide 203 text

No content

Slide 204

Slide 204 text

No content

Slide 205

Slide 205 text

No content

Slide 206

Slide 206 text

No content

Slide 207

Slide 207 text

No content

Slide 208

Slide 208 text

No content

Slide 209

Slide 209 text

design @ 1600% MADE WITH LOVE IN SEATTLE BY

Slide 210

Slide 210 text

No content

Slide 211

Slide 211 text

No content

Slide 212

Slide 212 text

No content

Slide 213

Slide 213 text

6x Navigation & Toolbars

Slide 214

Slide 214 text

6x Navigation & Toolbars 3x Alerts & Modals

Slide 215

Slide 215 text

6x Navigation & Toolbars 3x Alerts & Modals 26x Types of Views

Slide 216

Slide 216 text

6x Navigation & Toolbars 3x Alerts & Modals 26x Types of Views 15x View Controls

Slide 217

Slide 217 text

6x Navigation & Toolbars 3x Alerts & Modals 26x Types of Views 15x View Controls 13x Application Controls

Slide 218

Slide 218 text

6x Navigation & Toolbars 3x Alerts & Modals 26x Types of Views 15x View Controls 13x Application Controls 9x Animations & Transitions

Slide 219

Slide 219 text

No content

Slide 220

Slide 220 text

6 1. UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums. 2. GET YOUR DATA DIALED Data is the new content, and it comes from everywhere. 3. BE A MASTER OF CONTEXT Dive into context, it is the easiest way to level up to awesomeness. 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Small screens don’t make things easier. They make things a lot harder. 6. ALLOW AMPLE TIME It takes a lot longer than you might think. #6 Brian Fling @fling Rules for Designing Amazing Apps

Slide 221

Slide 221 text

there are few tools or processes that suit mobile MADE WITH LOVE IN SEATTLE BY

Slide 222

Slide 222 text

DESIGNERS DEVELOPERS

Slide 223

Slide 223 text

Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS

Slide 224

Slide 224 text

Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS

Slide 225

Slide 225 text

Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS

Slide 226

Slide 226 text

Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS

Slide 227

Slide 227 text

Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS

Slide 228

Slide 228 text

Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS

Slide 229

Slide 229 text

Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS

Slide 230

Slide 230 text

Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS

Slide 231

Slide 231 text

Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS

Slide 232

Slide 232 text

No content

Slide 233

Slide 233 text

No content

Slide 234

Slide 234 text

No content

Slide 235

Slide 235 text

Mobile Design is Web Design

Slide 236

Slide 236 text

Mobile Design is Web Design

Slide 237

Slide 237 text

No content

Slide 238

Slide 238 text

Mobile Design is Software Design

Slide 239

Slide 239 text

Mobile Design is Software Design

Slide 240

Slide 240 text

This document contains confidential information and is provided for private review only. Do not distribute without permission. A Fully Agile Agency From Start to Finish

Slide 241

Slide 241 text

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

Slide 242

Slide 242 text

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

Slide 243

Slide 243 text

Process

Slide 244

Slide 244 text

Define Process

Slide 245

Slide 245 text

Data Define Process

Slide 246

Slide 246 text

Interaction Data Define Process

Slide 247

Slide 247 text

Design Interaction Data Define Process

Slide 248

Slide 248 text

Design Interaction Data Define Process Deliverables

Slide 249

Slide 249 text

Design Interaction Data Define Project Brief Process Deliverables

Slide 250

Slide 250 text

Design Interaction Data Define Project Brief Journeys Process Deliverables

Slide 251

Slide 251 text

Design Interaction Data Define Project Brief Journeys Context Map Process Deliverables

Slide 252

Slide 252 text

Design Interaction Data Define Project Brief Journeys Context Map Content Audit Process Deliverables

Slide 253

Slide 253 text

Design Interaction Data Define Project Brief Journeys Context Map Content Audit API Audit Process Deliverables

Slide 254

Slide 254 text

Design Interaction Data Define Project Brief Journeys Context Map Content Audit API Audit Data Modeling Process Deliverables

Slide 255

Slide 255 text

Design Interaction Data Define Project Brief Journeys Context Map Content Audit API Audit Data Modeling App Flow Process Deliverables

Slide 256

Slide 256 text

Design Interaction Data Define Project Brief Journeys Context Map Content Audit API Audit Data Modeling App Flow Screen Descriptions Process Deliverables

Slide 257

Slide 257 text

Design Interaction Data Define Project Brief Journeys Context Map Content Audit API Audit Data Modeling App Flow Screen Descriptions Zone Diagrams Process Deliverables

Slide 258

Slide 258 text

Design Interaction Data Define Project Brief Journeys Context Map Content Audit API Audit Data Modeling App Flow Screen Descriptions Zone Diagrams App Map Process Deliverables

Slide 259

Slide 259 text

Design Interaction Data Define Project Brief Journeys Context Map Content Audit API Audit Data Modeling App Flow Screen Descriptions Zone Diagrams App Map Reference Design Process Deliverables

Slide 260

Slide 260 text

Design Interaction Data Define Project Brief Journeys Context Map Content Audit API Audit Data Modeling App Flow Screen Descriptions Zone Diagrams App Map Reference Design Design Brief Process Deliverables

Slide 261

Slide 261 text

Design Interaction Data Define 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 Deliverables

Slide 262

Slide 262 text

Design Interaction Data Define 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 Deliverables

Slide 263

Slide 263 text

Design Interaction Data Define 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 Deliverables

Slide 264

Slide 264 text

Design Interaction Data Define 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 Deliverables

Slide 265

Slide 265 text

6 1. UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums. 2. GET YOUR DATA DIALED Data is the new content, and it comes from everywhere. 3. BE A MASTER OF CONTEXT Dive into context, it is the easiest way to level up to awesomeness. 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Small screens don’t make things easier. They make things a lot harder. 6. ALLOW AMPLE TIME It takes a lot longer than you might think. Brian Fling @fling Rules for Designing Amazing Apps

Slide 266

Slide 266 text

No content

Slide 267

Slide 267 text

No content

Slide 268

Slide 268 text

No content

Slide 269

Slide 269 text

No content

Slide 270

Slide 270 text

No content

Slide 271

Slide 271 text

No content

Slide 272

Slide 272 text

No content

Slide 273

Slide 273 text

No content

Slide 274

Slide 274 text

EHARMONY HOME v1

Slide 275

Slide 275 text

EHARMONY HOME v2

Slide 276

Slide 276 text

EHARMONY HOME v3

Slide 277

Slide 277 text

EHARMONY HOME v4

Slide 278

Slide 278 text

EHARMONY HOME v5

Slide 279

Slide 279 text

EHARMONY HOME v6

Slide 280

Slide 280 text

Get in Touch Find Out How We Can Help You. Brian Fling Founder & 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