Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
A More Responsive Workflow
Hello!
This is me

Where I work.

@BrandonGray

@AKQA
Whatchu Talkin Bout Willis?
What is it? How should the content display when viewed on a
television? How do we resize images for various resolutions?
W...
The World As We Know It
Research

Sketch

Design

Printer

Delivery
Research

Wireframe

Design

Develop

Launch
Waterfall Process Born From Print Design

Research

Wireframe

Design

Develop

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 perfe...
Tesla Type-S - 17” touch display
Samsung Galaxy Skin - Flexible AMOLED
Display
•

Extremely wide landscape view

•

“Retina” quality resolution

•

Potenti...
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.

Separat...
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqu...
Content here. Content here. Content here. Content here.
Content here. Content here. Content here. Content here.
Content he...
“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.

Separat...
1.

Starting With Content

2.

Thinking in Systems

3.

Beyond the Box

4.

Separating Layout From Atmosphere

5.

Separat...
Common “Desktop” Resolutions
800 x 600

1366 x 768

1024 x 768

1440 x 900

1280 x 768

1600 x 900

1280 x 800

1680 x 105...
Common “Mobile” Resolutions
64 x 98

101 x 67

120 x 115

128 x 120

132 x 176

176 x 164

222 x 261

240 x 400

400 x 800...
Common Smartphone & Tablet Resolutions
240 x 320

256 x 384

360 x 400

480 x 540

600 x 800

800 x 600

240 x 345

320 x ...
“Popular” Resolutions
320 x 480

768 x 1366

1280 x 768

480 x 320

800 x 480

1280 x 800

480 x 800

800 x 1280

1280 x 1...
iOS Resolutions
320 x 480

960 x 640

480 x 320

1024 x 768

640 x 960

1136 x 640

640 x 1136

1536 x 2048

768 x 1024

2...
“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.

Separat...
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.

Separat...
You Do Not Know Me.
You Do Not Know My Intent.
You Do Not Know My Environment
You Do Not Know My Circumstance.
You Do Not Know My Circumstance.

Oh please!
Like you haven’t done it.
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.

Separat...
Progressive Enhancement
DoWebsitesNeedToLookExactlyTheSameInEveryBrowser.com

“NO”
1.

Starting With Content

2.

Thinking in Systems

3.

Beyond the Box

4.

Separating Layout From Atmosphere

5.

Separat...
Research

Wireframe

Design

Develop

Launch
Design

Research

Develop

Test
Wires

Design

Develop

Test
Design

Wires

Test
Develop

Wires

Develop

Test
Wires

Desi...
Discovery

Deliver

Plan

Discussion

Sketch &
Wireframe

Prototype

Test

Visual
Design
Tear Down That Silo!
1.

Starting With Content

2.

Thinking in Systems

3.

Beyond the Box

4.

Separating Layout From Atmosphere

5.

Separat...
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...
Thanks!
A More Responsive Workflow
A More Responsive Workflow
A More Responsive Workflow
A More Responsive Workflow
A More Responsive Workflow
A More Responsive Workflow
A More Responsive Workflow
A More Responsive Workflow
A More Responsive Workflow
A More Responsive Workflow
A More Responsive Workflow
A More Responsive Workflow
A More Responsive Workflow
Próxima SlideShare
Cargando en…5
×

A More Responsive Workflow

It wasn’t all that long ago that we made a giant shift in how we design and develop for the web. We slowly stopped using table-based layouts and switched to semantic markup and CSS.
Today we're facing another shift; making our websites responsive. Our processes, workflows, and tools break down when faced with an infinite array of devices, resolutions, and feature sets.
Designing from content, systematic thinking, separating layout from atmosphere, progressive enhancement, and project deliverables are just a few of the topics that Brandon Gray, a maker of awesome stuff for the web at AKQA, will cover to help you tame the modern web creation process.
The web is growing up fast, it's time our process grows up with it!

Audiolibros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

A More Responsive Workflow

  1. 1. A More Responsive Workflow
  2. 2. Hello! This is me Where I work. @BrandonGray @AKQA
  3. 3. Whatchu Talkin Bout Willis?
  4. 4. What is it? How should the content display when viewed on a television? How do we resize images for various resolutions? What are the advantages of this? How do we figure out what those break points should be? What are the “break points” for the site? What are the disadvantages? Which interface design patterns work best for small screens? How and when do we involve the client? How many comps do I need to create for each page? How much more time is this going to require? How do we support “retina” displays? What size do I start my Photoshop document at? How much more does this cost? How do we translate ideas amongst team members? What devices are we targeting?
  5. 5. The World As We Know It
  6. 6. Research Sketch Design Printer Delivery
  7. 7. Research Wireframe Design Develop Launch
  8. 8. Waterfall Process Born From Print Design Research Wireframe Design Develop Launch
  9. 9. “Pages”
  10. 10. “Lock-Up”
  11. 11. “The Fold”
  12. 12. You make me feel so comfortable. 1024 x 768
  13. 13. Welcome to the party! Eh, maybe we’ll invite you... but probably not. Who the? GTFO!
  14. 14. Absolute. Total. Control.
  15. 15. Feeling slightly less comfortable...but still pretty comfortable.
  16. 16. “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
  17. 17. Tesla Type-S - 17” touch display
  18. 18. Samsung Galaxy Skin - Flexible AMOLED Display • Extremely wide landscape view • “Retina” quality resolution • Potential for new types of interactions with a truly flexible device
  19. 19. A Whole New World.
  20. 20. Our job now is to create solutions that are flexible and designed with the future in mind.
  21. 21. 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
  22. 22. 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.
  23. 23. 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.
  24. 24. “Content precedes design. Design in the absence of content is not design, it’s decoration.” - Jeffrey Zeldman
  25. 25. 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
  26. 26. 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
  27. 27. Common “Desktop” Resolutions 800 x 600 1366 x 768 1024 x 768 1440 x 900 1280 x 768 1600 x 900 1280 x 800 1680 x 1050 1280 x 1024 1920 x 1080
  28. 28. Common “Mobile” Resolutions 64 x 98 101 x 67 120 x 115 128 x 120 132 x 176 176 x 164 222 x 261 240 x 400 400 x 800 640 x 480 64 x 112 101 x 80 120 x 116 128 x 121 136 x 120 176 x 176 230 x 240 240 x 427 432 x 240 640 x 960 64 x 128 101 x 111 120 x 117 128 x 127 136 x 176 176 x 178 230 x 310 240 x 428 450 x 854 640 x 1136 80 x 120 102 x 80 120 x 120 128 x 128 140 x 160 176 x 180 232 x 323 240 x 432 480 x 272 720 x 1280 95 x 76 104 x 80 120 x 124 128 x 131 144 x 135 176 x 182 240 x 160 240 x 440 480 x 320 768 x 1024 96 x 44 104 x 208 120 x 126 128 x 141 144 x 136 176 x 183 240 x 224 240 x 480 480 x 360 800 x 352 96 x 64 108 x 82 120 x 127 128 x 143 144 x 140 176 x 184 240 x 235 256 x 240 480 x 427 800 x 480 96 x 65 110 x 72 120 x 128 128 x 144 144 x 144 176 x 185 240 x 240 256 x 384 480 x 540 800 x 600 96 x 68 111 x 100 120 x 130 128 x 146 144 x 156 176 x 186 240 x 255 320 x 194 480 x 640 800 x 1280 96 x 72 111 x 106 120 x 143 128 x 160 144 x 176 176 x 187 240 x 260 320 x 199 480 x 690 854 x 480 96 x 76 112 x 64 120 x 144 128 x 176 144 x 262 176 x 192 240 x 266 320 x 204 480 x 760 960 x 544 96 x 78 112 x 76 120 x 145 128 x 220 150 x 100 176 x 198 240 x 269 320 x 240 480 x 800 1024 x 480 96 x 84 112 x 84 120 x 160 128 x 256 150 x 170 176 x 200 240 x 270 320 x 256 480 x 845 1024 x 600 96 x 89 112 x 128 123 x 69 130 x 130 160 x 120 176 x 208 240 x 272 320 x 320 480 x 854 1024 x 768 96 x 90 116 x 122 125 x 96 132 x 65 160 x 128 176 x 220 240 x 274 320 x 400 480 x 860 1136 x 640 96 x 91 116 x 181 128 x 50 132 x 126 160 x 160 176 x 229 240 x 275 320 x 480 480 x 862 1280 x 768 96 x 95 118 x 114 128 x 64 132 x 128 160 x 180 176 x 240 240 x 292 324 x 352 480 x 864 1280 x 800 96 x 96 118 x 128 128 x 80 132 x 136 160 x 198 177 x 223 240 x 298 345 x 800 480 x 960 96 x 104 118 x 256 128 x 83 132 x 142 160 x 240 178 x 220 240 x 300 352 x 416 480 x 1024 96 x 113 119 x 64 128 x 92 132 x 144 162 x 176 208 x 104 240 x 302 360 x 120 540 x 960 96 x 120 120 x 72 128 x 95 132 x 147 162 x 178 208 x 208 240 x 320 360 x 400 600 x 800 98 x 64 120 x 80 128 x 96 132 x 156 162 x 216 208 x 320 240 x 345 360 x 480 600 x 1024 100 x 120 120 x 96 128 x 97 132 x 158 174 x 132 216 x 162 240 x 352 360 x 640 640 x 200 101 x 54 120 x 108 128 x 100 132 x 160 176 x 144 220 x 113 240 x 375 384 x 288 640 x 240 101 x 64 120 x 110 128 x 112 132 x 162 176 x 157 220 x 176 240 x 378 400 x 240 640 x 320 101 x 65 120 x 112 128 x 115 132 x 163 176 x 160 220 x 220 240 x 384 400 x 427 640 x 360
  29. 29. Common Smartphone & Tablet Resolutions 240 x 320 256 x 384 360 x 400 480 x 540 600 x 800 800 x 600 240 x 345 320 x 194 360 x 480 480 x 640 600 x 1024 800 x 1280 240 x 352 320 x 199 360 x 640 480 x 690 640 x 200 854 x 480 240 x 375 320 x 204 384 x 288 480 x 760 640 x 240 960 x 544 240 x 378 320 x 240 400 x 240 480 x 800 640 x 320 1024 x 480 240 x 384 320 x 256 400 x 427 480 x 845 640 x 360 1024 x 600 240 x 400 320 x 320 400 x 800 480 x 854 640 x 480 1024 x 768 240 x 427 320 x 400 432 x 240 480 x 860 640 x 960 1136 x 640 240 x 428 320 x 480 450 x 854 480 x 862 640 x 1136 1280 x 768 240 x 432 324 x 352 480 x 272 480 x 864 720 x 1280 1280 x 800 240 x 440 345 x 800 480 x 320 480 x 960 768 x 1024 1536 x 2048 240 x 480 352 x 416 480 x 360 480 x 1024 800 x 352 2048 x 1536 256 x 240 360 x 120 480 x 427 540 x 960 800 x 480
  30. 30. “Popular” Resolutions 320 x 480 768 x 1366 1280 x 768 480 x 320 800 x 480 1280 x 800 480 x 800 800 x 1280 1280 x 1024 600 x 1024 960 x 640 1366 x 768 640 x 960 1024 x 600 1440 x 900 640 x 1136 1024 x 768 1600 x 900 720 x 1280 1136 x 640 1680 x 1050 768 x 1024 1200 x 1920 1920 x 1080 768 x 1280 1280 x 720
  31. 31. iOS Resolutions 320 x 480 960 x 640 480 x 320 1024 x 768 640 x 960 1136 x 640 640 x 1136 1536 x 2048 768 x 1024 2048 x 1536
  32. 32. “The most popular size is every size.” - Jeffrey Zeldman
  33. 33. 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
  34. 34. Anyone Can Sketch. Everyone Should.
  35. 35. Wait...What Do You Mean “Dead”?
  36. 36. GET EXTREME!
  37. 37. 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
  38. 38. You Do Not Know Me.
  39. 39. You Do Not Know My Intent.
  40. 40. You Do Not Know My Environment
  41. 41. You Do Not Know My Circumstance.
  42. 42. You Do Not Know My Circumstance. Oh please! Like you haven’t done it.
  43. 43. 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.
  44. 44. 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
  45. 45. Progressive Enhancement
  46. 46. DoWebsitesNeedToLookExactlyTheSameInEveryBrowser.com “NO”
  47. 47. 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
  48. 48. Research Wireframe Design Develop Launch
  49. 49. Design Research Develop Test Wires Design Develop Test Design Wires Test Develop Wires Develop Test Wires Design Launch
  50. 50. Discovery Deliver Plan Discussion Sketch & Wireframe Prototype Test Visual Design
  51. 51. Tear Down That Silo!
  52. 52. 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
  53. 53. But It’s A Prototype! It’s Not Finished!
  54. 54. “A change gonna come” - Sam Cooke
  55. 55. “A change gonna has already come” - Not Sam Cooke
  56. 56. Growing Up
  57. 57. “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
  58. 58. Thanks!

×