Date post: | 22-Apr-2015 |
Category: |
Design |
Upload: | brandon-gray |
View: | 682 times |
Download: | 0 times |
A More Responsive Workflow
Hello!
This is me
@BrandonGray
Where I work.
@AKQA
Whatchu Talkin Bout Willis?
How do we translate ideas amongst team members?
What size do I start my Photoshop document at? How do we support “retina” displays?
How many comps do I need to create for each page?How much more time is this going to require?
Which interface design patterns work best for small screens? How and when do we involve the client?
What are the disadvantages?
What are the advantages of this?
How much more does this cost?
How do we figure out what those break points should be? What are the “break points” for the site?
How should the content display when viewed on a television? How do we resize images for various resolutions?What is it?
What devices are we targeting?
The World As We Know It
Research Design PrinterSketch Delivery
Research Design DevelopWireframe Launch
Waterfall Process Born From Print Design
Research Design DevelopWireframe Launch
“Pages”
“Lock-Up”
“The Fold”
You make me feel so comfortable.
1024 x 768
Welcome to the party! Eh, maybe we’ll invite you...but probably not.
Who the? GTFO!
Absolute.Total.
Control.
Feeling slightly less comfortable...but still pretty comfortable.
“The fastest way to break the cycle of perfectionism and become a fearless mother is to give up the idea of doing it perfectly - indeed to embrace uncertainty and imperfection.” - Arianna Huffington
Tesla Type-S - 17” touch display
Samsung Galaxy Skin - Flexible AMOLED Display
• Extremely wide landscape view
• “Retina” quality resolution
• Potential for new types of interactions with a truly flexible
device
A Whole New World.
Our job now is to create solutions that are flexible and designed with the future in mind.
1. Starting With Content
2. Thinking in Systems
3. Beyond the Box
4. Separating Layout From Atmosphere
5. Separating Content From Context
6. Enhancing for Feature Sets
7. Collaboration
8. Deliverables
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
“Content precedes design. Design in the absence of content is not design, it’s decoration.” - Jeffrey Zeldman
1. Starting With Content
2. Thinking in Systems
3. Beyond the Box
4. Separating Layout From Atmosphere
5. Separating Content From Context
6. Enhancing for Feature Sets
7. Collaboration
8. Deliverables
1. Starting With Content
2. Thinking in Systems
3. Beyond the Box
4. Separating Layout From Atmosphere
5. Separating Content From Context
6. Enhancing for Feature Sets
7. Collaboration
8. Deliverables
Common “Desktop” Resolutions
800 x 600
1024 x 768
1280 x 768
1280 x 800
1280 x 1024
1366 x 768
1440 x 900
1600 x 900
1680 x 1050
1920 x 1080
64 x 98
64 x 112
64 x 128
80 x 120
95 x 76
96 x 44
96 x 64
96 x 65
96 x 68
96 x 72
96 x 76
96 x 78
96 x 84
96 x 89
96 x 90
96 x 91
96 x 95
96 x 96
96 x 104
96 x 113
96 x 120
98 x 64
100 x 120
101 x 54
101 x 64
101 x 65
101 x 67
101 x 80
101 x 111
102 x 80
104 x 80
104 x 208
108 x 82
110 x 72
111 x 100
111 x 106
112 x 64
112 x 76
112 x 84
112 x 128
116 x 122
116 x 181
118 x 114
118 x 128
118 x 256
119 x 64
120 x 72
120 x 80
120 x 96
120 x 108
120 x 110
120 x 112
120 x 115
120 x 116
120 x 117
120 x 120
120 x 124
120 x 126
120 x 127
120 x 128
120 x 130
120 x 143
120 x 144
120 x 145
120 x 160
123 x 69
125 x 96
128 x 50
128 x 64
128 x 80
128 x 83
128 x 92
128 x 95
128 x 96
128 x 97
128 x 100
128 x 112
128 x 115
128 x 120
128 x 121
128 x 127
128 x 128
128 x 131
128 x 141
128 x 143
128 x 144
128 x 146
128 x 160
128 x 176
128 x 220
128 x 256
130 x 130
132 x 65
132 x 126
132 x 128
132 x 136
132 x 142
132 x 144
132 x 147
132 x 156
132 x 158
132 x 160
132 x 162
132 x 163
132 x 176
136 x 120
136 x 176
140 x 160
144 x 135
144 x 136
144 x 140
144 x 144
144 x 156
144 x 176
144 x 262
150 x 100
150 x 170
160 x 120
160 x 128
160 x 160
160 x 180
160 x 198
160 x 240
162 x 176
162 x 178
162 x 216
174 x 132
176 x 144
176 x 157
176 x 160
176 x 164
176 x 176
176 x 178
176 x 180
176 x 182
176 x 183
176 x 184
176 x 185
176 x 186
176 x 187
176 x 192
176 x 198
176 x 200
176 x 208
176 x 220
176 x 229
176 x 240
177 x 223
178 x 220
208 x 104
208 x 208
208 x 320
216 x 162
220 x 113
220 x 176
220 x 220
222 x 261
230 x 240
230 x 310
232 x 323
240 x 160
240 x 224
240 x 235
240 x 240
240 x 255
240 x 260
240 x 266
240 x 269
240 x 270
240 x 272
240 x 274
240 x 275
240 x 292
240 x 298
240 x 300
240 x 302
240 x 320
240 x 345
240 x 352
240 x 375
240 x 378
240 x 384
240 x 400
240 x 427
240 x 428
240 x 432
240 x 440
240 x 480
256 x 240
256 x 384
320 x 194
320 x 199
320 x 204
320 x 240
320 x 256
320 x 320
320 x 400
320 x 480
324 x 352
345 x 800
352 x 416
360 x 120
360 x 400
360 x 480
360 x 640
384 x 288
400 x 240
400 x 427
400 x 800
432 x 240
450 x 854
480 x 272
480 x 320
480 x 360
480 x 427
480 x 540
480 x 640
480 x 690
480 x 760
480 x 800
480 x 845
480 x 854
480 x 860
480 x 862
480 x 864
480 x 960
480 x 1024
540 x 960
600 x 800
600 x 1024
640 x 200
640 x 240
640 x 320
640 x 360
640 x 480
640 x 960
640 x 1136
720 x 1280
768 x 1024
800 x 352
800 x 480
800 x 600
800 x 1280
854 x 480
960 x 544
1024 x 480
1024 x 600
1024 x 768
1136 x 640
1280 x 768
1280 x 800
Common “Mobile” Resolutions
240 x 320
240 x 345
240 x 352
240 x 375
240 x 378
240 x 384
240 x 400
240 x 427
240 x 428
240 x 432
240 x 440
240 x 480
256 x 240
256 x 384
320 x 194
320 x 199
320 x 204
320 x 240
320 x 256
320 x 320
320 x 400
320 x 480
324 x 352
345 x 800
352 x 416
360 x 120
360 x 400
360 x 480
360 x 640
384 x 288
400 x 240
400 x 427
400 x 800
432 x 240
450 x 854
480 x 272
480 x 320
480 x 360
480 x 427
480 x 540
480 x 640
480 x 690
480 x 760
480 x 800
480 x 845
480 x 854
480 x 860
480 x 862
480 x 864
480 x 960
480 x 1024
540 x 960
600 x 800
600 x 1024
640 x 200
640 x 240
640 x 320
640 x 360
640 x 480
640 x 960
640 x 1136
720 x 1280
768 x 1024
800 x 352
800 x 480
800 x 600
800 x 1280
854 x 480
960 x 544
1024 x 480
1024 x 600
1024 x 768
1136 x 640
1280 x 768
1280 x 800
1536 x 2048
2048 x 1536
Common Smartphone & Tablet Resolutions
“Popular” Resolutions
320 x 480
480 x 320
480 x 800
600 x 1024
640 x 960
640 x 1136
720 x 1280
768 x 1024
768 x 1280
768 x 1366
800 x 480
800 x 1280
960 x 640
1024 x 600
1024 x 768
1136 x 640
1200 x 1920
1280 x 720
1280 x 768
1280 x 800
1280 x 1024
1366 x 768
1440 x 900
1600 x 900
1680 x 1050
1920 x 1080
iOS Resolutions
320 x 480
480 x 320
640 x 960
640 x 1136
768 x 1024
960 x 640
1024 x 768
1136 x 640
1536 x 2048
2048 x 1536
“The most popular size is every size.” - Jeffrey Zeldman
1. Starting With Content
2. Thinking in Systems
3. Beyond the Box
4. Separating Layout From Atmosphere
5. Separating Content From Context
6. Enhancing for Feature Sets
7. Collaboration
8. Deliverables
Anyone Can Sketch.Everyone Should.
Wait...What Do You Mean “Dead”?
GET EXTREME!
1. Starting With Content
2. Thinking in Systems
3. Beyond the Box
4. Separating Layout From Atmosphere
5. Separating Content From Context
6. Enhancing for Feature Sets
7. Collaboration
8. Deliverables
You Do Not Know Me.
You Do Not Know My Intent.
You Do Not Know My Environment
You Do Not Know My Circumstance.
Oh please! Like you haven’t done it.
You Do Not Know My Circumstance.
Do Not Limit The Content!
Mobile users expect to be able to do all of the things they would be able to do on a desktop.
1. Starting With Content
2. Thinking in Systems
3. Beyond the Box
4. Separating Layout From Atmosphere
5. Separating Content From Context
6. Enhancing for Feature Sets
7. Collaboration
8. Deliverables
Progressive Enhancement
DoWebsitesNeedToLookExactlyTheSameInEveryBrowser.com
“NO”
1. Starting With Content
2. Thinking in Systems
3. Beyond the Box
4. Separating Layout From Atmosphere
5. Separating Content From Context
6. Enhancing for Feature Sets
7. Collaboration
8. Deliverables
Research Design DevelopWireframe Launch
Design Develop Wires
Research
Wires Design Develop Launch
Design Develop Wires
Develop Wires Design
Test
Test
Test
Test
DiscoverySketch &
WireframePlan Prototype
Discussion TestVisualDesign
Deliver
Tear Down That Silo!
1. Starting With Content
2. Thinking in Systems
3. Beyond the Box
4. Separating Layout From Atmosphere
5. Separating Content From Context
6. Enhancing for Feature Sets
7. Collaboration
8. Deliverables
But It’s A Prototype! It’s Not Finished!
“A change gonna come” - Sam Cooke
“A change gonna has already come” - Not Sam Cooke
Growing Up
“Innumerable confusions and a profound feeling of despair invariably emerge in periods of great technological and cultural transitions. Our “Age of Anxiety” is, in great part, the result of trying to do today’s job with yesterday’s tools–with yesterday’s concepts.” - Marshal McLuhan
Thanks!