RESPONSIVE DESIGNWORKFLOW  STEPHEN HAY . MOBILISM AMSTERDAM 20120511
SOME ASPECTS OF OUR WORK ARE DECIDEDLYUNSEXY(AND WORKFLOW IS ONE OF THEM)
Technology is advancing constantly.We’re starting to design for multiple platforms.We’re learning & using new tech all the...
Technology is advancing constantly.We’re starting to design for multiple platforms.We’re learning & using new tech all the...
OUR CLIENT WANTS SOME CHANGES MADE.
The answer is to design from the bottom up,which means
The answer is to design from the bottom up,which meansFROM THE CONTENT OUT.
Content and form are lovers,THEIR LOVE-CHILD IS DESIGN
MUCH DESIGN DECISIONMAKING IS BASED ONTECH   THIS IS A BAD THING.
ANDY CLARKE               ELLIOT JAY STOCKS               PAUL BOAG               RACHEL ANDREW               LEA VEROU   ...
“One technique Ive used for years is to design in text… not necessarily describing everything in textual form[…]”         ...
“(which usually results in docs sounding oddly creepy, –it puts the lotion on its skin!)[…]”                              ...
“essentially what is the message that needs to be communicated if I was ONLY able to provide the user with unstyled HTML?”...
WE CURRENTLY HAVE A WORD FOREVERYTHING THAT IS NOT DESKTOP:
WE CURRENTLY HAVE A WORD FOREVERYTHING THAT IS NOT DESKTOP:MOBILE
WE CURRENTLY HAVE A WORD FOREVERYTHING THAT IS NOT DESKTOP:MOBILEWE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & ...
WE CURRENTLY HAVE A WORD FOREVERYTHING THAT IS NOT DESKTOP:MOBILEWE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & ...
SMABLET
i SMABLET
WORKFLOWNOW
INFORMATIONARCHITECTUREflickr.com/photos/cannedtuna/4853380320/
INTERACTION                                                 DESIGNhttp://commons.wikimedia.org/wiki/File:Article-Feedback-...
LOOK, MA!                                                 INTERACTION                                                 DESI...
DESIGNflickr.com/photos/zieak/2905918515/
DESIGNPHOTOSHOP, RINSE, REPEATflickr.com/photos/zieak/2905918515/
DESIGN IS NOTDECORATIONAND DECORATION IS NOT DESIGN
RESPONSIVE       WORKFLOW
RESPONSIVEWORKFLOW:10 STEPS
1.    Content inventory             2.    Content reference wireframes             3.    Design in text (structured conten...
1. CONTENT INVENTORY
1. CONTENT INVENTORY1. Site navigation2. Logo3. Date & location4. Social media links5. Registration status/link6. Introduc...
CONTENT REFERENCE WIREFRAMES        http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26...
CONTENT REFERENCE WIREFRAMES
CONTENT REFERENCE WIREFRAMES                              1                       2, 3        4                           ...
CONTENT REFERENCE WIREFRAMES                                      1                               2, 3        4 1. Site na...
3. DESIGNINGIN TEXTENVISIONINGSTRUCTURED CONTENT
3. DESIGNING    pandoc content.md -o content.html                           IN TEXT                                    ENV...
3. DESIGNINGIN TEXTENVISIONINGSTRUCTURED CONTENT
3. DESIGNINGIN TEXTENVISIONINGSTRUCTURED CONTENT
THE WORLD’S FIRST WEBSITE IS ALMOSTMOBILE-READYhttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.htmlO...
OPERA MOBILE, SAMSUNG GALAXY TAB
The device landscape is constantly changing.Capabilities are constantly changing.Properly structured content is portableto...
THE ZERO INTERFACE:THINK, DONE.ANY STEP WE ADD TO THAT HAS THE POTENTIAL TO RUIN EVERYTHING,SO CHOOSE WISELY.
4. LINEAR “DESIGN”      THE BARE ESSENTIALS. START PLAYING AROUND A BIT.
5. BREAKPOINT GRAPHSSTEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS
5. BREAKPOINT GRAPHSSTEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHSTHINK FIRST IN TERMS OF DEVICE C...
6. DESIGN FOR VARIOUS BREAKPOINTSDON’T FORGET TOSKETCH
7. IF WE’RE NOT DELIVERING DESIGNS INPHOTOSHOP,WHAT DO WE DELIVER?
AN HTML/CSS/JS PROTOTYPE LOOKS LIKE THIS:
HOUSTON, WE HAVE A PROBLEM.
STRUCTURED CONTENTLINEAR DESIGNCONTENT REFERENCE WIREFRAMES
STRUCTURED CONTENTLINEAR DESIGNCONTENT REFERENCE WIREFRAMES
STRUCTURED CONTENTLINEAR DESIGNCONTENT REFERENCE WIREFRAMES
STRUCTURED CONTENTLINEAR DESIGNCONTENT REFERENCE WIREFRAMES       CSS
STRUCTURED CONTENTLINEAR DESIGNCONTENT REFERENCE WIREFRAMES       CSSPROTOTYPE
VERSION CONTROLPREPROCESSORS / HELPER SCRIPTSFRAMEWORKS (BE CAREFUL, THOUGH)HTML TEMPLATING, STATIC SITE GENERATORSDEVELOP...
8 & 9. SOME PRESENTATION PSYCHOLOGY
8 & 9. SOME PRESENTATION PSYCHOLOGY1. For the first presentation, use screenshots.
8 & 9. SOME PRESENTATION PSYCHOLOGY1. For the first presentation, use screenshots.2. See above.
10. AND WHAT DO WE GIVE TO THEDEVELOPERS?
INSPIRATION: JEREMY KEITH’S PATTERN PRIMERhttps://github.com/adactio/Pattern-Primer
INSPIRATION: JEREMY KEITH’S PATTERN PRIMERhttps://github.com/adactio/Pattern-Primer
WHAT I USE: DEXYhttp://www.dexy.it/
WHAT I USE: DEXYhttp://www.dexy.it/
WHAT I USE: DEXYhttp://www.dexy.it/
HOW DEXY WORKShttp://www.dexy.it/                           MARKDOWN            HTML                        CSS           ...
YOU’VE JUST CREATED ASTYLEGUIDEAND THAT’S SO MUCH MORE USEFUL THAN A SIMPLE PHOTOSHOP FILE
1.    Content inventory             2.    Content reference wireframes             3.    Design in text (structured conten...
KEEP ADAPTING.KEEPLEARNING.
THX@STEPHENHAYTHE-HAYSTACK.COMSPECIAL THANKS TO BRYAN & STEPHANIE RIEGER and ANA NELSON
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
Upcoming SlideShare
Loading in...5
×

Responsive Design Workflow: Mobilism 2012

44,142

Published on

Almost exactly the same slides as for BDConf, but some might appreciate having the actual slides from this event.

Published in: Technology, Design
1 Comment
184 Likes
Statistics
Notes
No Downloads
Views
Total Views
44,142
On Slideshare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
979
Comments
1
Likes
184
Embeds 0
No embeds

No notes for slide

Responsive Design Workflow: Mobilism 2012

  1. 1. RESPONSIVE DESIGNWORKFLOW STEPHEN HAY . MOBILISM AMSTERDAM 20120511
  2. 2. SOME ASPECTS OF OUR WORK ARE DECIDEDLYUNSEXY(AND WORKFLOW IS ONE OF THEM)
  3. 3. Technology is advancing constantly.We’re starting to design for multiple platforms.We’re learning & using new tech all the time.Web design workflow generally remains unchanged.
  4. 4. Technology is advancing constantly.We’re starting to design for multiple platforms.We’re learning & using new tech all the time.Web design workflow generally remains unchanged.THIS IS *^%$#@! WEIRD.
  5. 5. OUR CLIENT WANTS SOME CHANGES MADE.
  6. 6. The answer is to design from the bottom up,which means
  7. 7. The answer is to design from the bottom up,which meansFROM THE CONTENT OUT.
  8. 8. Content and form are lovers,THEIR LOVE-CHILD IS DESIGN
  9. 9. MUCH DESIGN DECISIONMAKING IS BASED ONTECH THIS IS A BAD THING.
  10. 10. ANDY CLARKE ELLIOT JAY STOCKS PAUL BOAG RACHEL ANDREW LEA VEROU DAVID STOREY CHRIS HEILMANN AARRON WALTERAbsolutely ARAL BALKANshameless, BEN SCHWARZyet tasteful DMITRY FADEYEVbook plug MARC EDWARDS AND LITTLE OL’ ME
  11. 11. “One technique Ive used for years is to design in text… not necessarily describing everything in textual form[…]” — BRYAN RIEGER
  12. 12. “(which usually results in docs sounding oddly creepy, –it puts the lotion on its skin!)[…]” — BRYAN RIEGER
  13. 13. “essentially what is the message that needs to be communicated if I was ONLY able to provide the user with unstyled HTML?” — BRYAN RIEGER
  14. 14. WE CURRENTLY HAVE A WORD FOREVERYTHING THAT IS NOT DESKTOP:
  15. 15. WE CURRENTLY HAVE A WORD FOREVERYTHING THAT IS NOT DESKTOP:MOBILE
  16. 16. WE CURRENTLY HAVE A WORD FOREVERYTHING THAT IS NOT DESKTOP:MOBILEWE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS
  17. 17. WE CURRENTLY HAVE A WORD FOREVERYTHING THAT IS NOT DESKTOP:MOBILEWE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS OR DO WE?
  18. 18. SMABLET
  19. 19. i SMABLET
  20. 20. WORKFLOWNOW
  21. 21. INFORMATIONARCHITECTUREflickr.com/photos/cannedtuna/4853380320/
  22. 22. INTERACTION DESIGNhttp://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png
  23. 23. LOOK, MA! INTERACTION DESIGNhttp://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png
  24. 24. DESIGNflickr.com/photos/zieak/2905918515/
  25. 25. DESIGNPHOTOSHOP, RINSE, REPEATflickr.com/photos/zieak/2905918515/
  26. 26. DESIGN IS NOTDECORATIONAND DECORATION IS NOT DESIGN
  27. 27. RESPONSIVE WORKFLOW
  28. 28. RESPONSIVEWORKFLOW:10 STEPS
  29. 29. 1. Content inventory 2. Content reference wireframes 3. Design in text (structured content) 4. Linear design 5. Breakpoint graph 6. Design for various breakpoints 7. HTML design prototypeRESPONSIVE 8. Present prototype screenshotsWORKFLOW: 9. Present prototype after revision10 STEPS 10. Document for production
  30. 30. 1. CONTENT INVENTORY
  31. 31. 1. CONTENT INVENTORY1. Site navigation2. Logo3. Date & location4. Social media links5. Registration status/link6. Introductory text7. Speakers (with photo)8. Countdown9. Sponsors10. Secondary navigation
  32. 32. CONTENT REFERENCE WIREFRAMES http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png
  33. 33. CONTENT REFERENCE WIREFRAMES
  34. 34. CONTENT REFERENCE WIREFRAMES 1 2, 3 4 5 6 7 8 9 10
  35. 35. CONTENT REFERENCE WIREFRAMES 1 2, 3 4 1. Site navigation 5 2. Logo 6 3. Date & location 4. Social media links 5. Registration status/link 7 6. Introductory text 7. Speakers (with photo) 8. Countdown 8 9. Sponsors 9 10. Secondary navigation 10
  36. 36. 3. DESIGNINGIN TEXTENVISIONINGSTRUCTURED CONTENT
  37. 37. 3. DESIGNING pandoc content.md -o content.html IN TEXT ENVISIONING STRUCTURED CONTENThttp://johnmacfarlane.net/pandoc/
  38. 38. 3. DESIGNINGIN TEXTENVISIONINGSTRUCTURED CONTENT
  39. 39. 3. DESIGNINGIN TEXTENVISIONINGSTRUCTURED CONTENT
  40. 40. THE WORLD’S FIRST WEBSITE IS ALMOSTMOBILE-READYhttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.htmlOPERA BROWSER
  41. 41. OPERA MOBILE, SAMSUNG GALAXY TAB
  42. 42. The device landscape is constantly changing.Capabilities are constantly changing.Properly structured content is portableto future platforms.
  43. 43. THE ZERO INTERFACE:THINK, DONE.ANY STEP WE ADD TO THAT HAS THE POTENTIAL TO RUIN EVERYTHING,SO CHOOSE WISELY.
  44. 44. 4. LINEAR “DESIGN” THE BARE ESSENTIALS. START PLAYING AROUND A BIT.
  45. 45. 5. BREAKPOINT GRAPHSSTEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS
  46. 46. 5. BREAKPOINT GRAPHSSTEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHSTHINK FIRST IN TERMS OF DEVICE CLASSES, NOT SPECIFIC DEVICES.
  47. 47. 6. DESIGN FOR VARIOUS BREAKPOINTSDON’T FORGET TOSKETCH
  48. 48. 7. IF WE’RE NOT DELIVERING DESIGNS INPHOTOSHOP,WHAT DO WE DELIVER?
  49. 49. AN HTML/CSS/JS PROTOTYPE LOOKS LIKE THIS:
  50. 50. HOUSTON, WE HAVE A PROBLEM.
  51. 51. STRUCTURED CONTENTLINEAR DESIGNCONTENT REFERENCE WIREFRAMES
  52. 52. STRUCTURED CONTENTLINEAR DESIGNCONTENT REFERENCE WIREFRAMES
  53. 53. STRUCTURED CONTENTLINEAR DESIGNCONTENT REFERENCE WIREFRAMES
  54. 54. STRUCTURED CONTENTLINEAR DESIGNCONTENT REFERENCE WIREFRAMES CSS
  55. 55. STRUCTURED CONTENTLINEAR DESIGNCONTENT REFERENCE WIREFRAMES CSSPROTOTYPE
  56. 56. VERSION CONTROLPREPROCESSORS / HELPER SCRIPTSFRAMEWORKS (BE CAREFUL, THOUGH)HTML TEMPLATING, STATIC SITE GENERATORSDEVELOPMENT APPROACHES (SMACSS, ETC.)
  57. 57. 8 & 9. SOME PRESENTATION PSYCHOLOGY
  58. 58. 8 & 9. SOME PRESENTATION PSYCHOLOGY1. For the first presentation, use screenshots.
  59. 59. 8 & 9. SOME PRESENTATION PSYCHOLOGY1. For the first presentation, use screenshots.2. See above.
  60. 60. 10. AND WHAT DO WE GIVE TO THEDEVELOPERS?
  61. 61. INSPIRATION: JEREMY KEITH’S PATTERN PRIMERhttps://github.com/adactio/Pattern-Primer
  62. 62. INSPIRATION: JEREMY KEITH’S PATTERN PRIMERhttps://github.com/adactio/Pattern-Primer
  63. 63. WHAT I USE: DEXYhttp://www.dexy.it/
  64. 64. WHAT I USE: DEXYhttp://www.dexy.it/
  65. 65. WHAT I USE: DEXYhttp://www.dexy.it/
  66. 66. HOW DEXY WORKShttp://www.dexy.it/ MARKDOWN HTML CSS HTML DOCS SYNTAX HIGHLIGHTING SCREENSHOTS VIA CasperJS / PhantomJS
  67. 67. YOU’VE JUST CREATED ASTYLEGUIDEAND THAT’S SO MUCH MORE USEFUL THAN A SIMPLE PHOTOSHOP FILE
  68. 68. 1. Content inventory 2. Content reference wireframes 3. Design in text (structured content) 4. Linear design 5. Breakpoint graph 6. Design for various breakpoints 7. HTML design prototypeRESPONSIVE 8. Present prototype screenshotsWORKFLOW: 9. Present prototype after revision10 STEPS 10. Document for production
  69. 69. KEEP ADAPTING.KEEPLEARNING.
  70. 70. THX@STEPHENHAYTHE-HAYSTACK.COMSPECIAL THANKS TO BRYAN & STEPHANIE RIEGER and ANA NELSON
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×