Successfully reported this slideshow.

Responsive Design Workflow: Mobilism 2012

212

Share

Upcoming SlideShare
Responsive Design Workflow
Responsive Design Workflow
Loading in …3
×
1 of 76
1 of 76

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Responsive Design Workflow: Mobilism 2012

  1. RESPONSIVE DESIGN WORKFLOW STEPHEN HAY . MOBILISM AMSTERDAM 20120511
  2. SOME ASPECTS OF OUR WORK ARE DECIDEDLY UNSEXY(AND WORKFLOW IS ONE OF THEM)
  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. 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. OUR CLIENT WANTS SOME CHANGES MADE.
  6. The answer is to design from the bottom up, which means
  7. The answer is to design from the bottom up, which means FROM THE CONTENT OUT.
  8. Content and form are lovers, THEIR LOVE-CHILD IS DESIGN
  9. MUCH DESIGN DECISIONMAKING IS BASED ON TECH THIS IS A BAD THING.
  10. ANDY CLARKE ELLIOT JAY STOCKS PAUL BOAG RACHEL ANDREW LEA VEROU DAVID STOREY CHRIS HEILMANN AARRON WALTER Absolutely ARAL BALKAN shameless, BEN SCHWARZ yet tasteful DMITRY FADEYEV book plug MARC EDWARDS AND LITTLE OL’ ME
  11. “One technique I've used for years is to 'design in text'… not necessarily describing everything in textual form[…]” — BRYAN RIEGER
  12. “(which usually results in docs sounding oddly creepy, '–it puts the lotion on it's skin!')[…]” — BRYAN RIEGER
  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. WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT DESKTOP:
  15. WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT DESKTOP: MOBILE
  16. WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT DESKTOP: MOBILE WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS
  17. WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT DESKTOP: MOBILE WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS OR DO WE?
  18. SMABLET
  19. i SMABLET
  20. WORKFLOW NOW
  21. INFORMATION ARCHITECTURE flickr.com/photos/cannedtuna/4853380320/
  22. INTERACTION DESIGN http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png
  23. LOOK, MA! INTERACTION DESIGN http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png
  24. DESIGN flickr.com/photos/zieak/2905918515/
  25. DESIGN PHOTOSHOP, RINSE, REPEAT flickr.com/photos/zieak/2905918515/
  26. DESIGN IS NOT DECORATION AND DECORATION IS NOT DESIGN
  27. RESPONSIVE WORKFLOW
  28. RESPONSIVE WORKFLOW: 10 STEPS
  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 prototype RESPONSIVE 8. Present prototype screenshots WORKFLOW: 9. Present prototype after revision 10 STEPS 10. Document for production
  30. 1. CONTENT INVENTORY
  31. 1. CONTENT INVENTORY 1. Site navigation 2. Logo 3. Date & location 4. Social media links 5. Registration status/link 6. Introductory text 7. Speakers (with photo) 8. Countdown 9. Sponsors 10. Secondary navigation
  32. CONTENT REFERENCE WIREFRAMES http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png
  33. CONTENT REFERENCE WIREFRAMES
  34. CONTENT REFERENCE WIREFRAMES 1 2, 3 4 5 6 7 8 9 10
  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. 3. DESIGNING IN TEXT ENVISIONING STRUCTURED CONTENT
  37. 3. DESIGNING pandoc content.md -o content.html IN TEXT ENVISIONING STRUCTURED CONTENT http://johnmacfarlane.net/pandoc/
  38. 3. DESIGNING IN TEXT ENVISIONING STRUCTURED CONTENT
  39. 3. DESIGNING IN TEXT ENVISIONING STRUCTURED CONTENT
  40. THE WORLD’S FIRST WEBSITE IS ALMOST MOBILE-READY http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html OPERA BROWSER
  41. OPERA MOBILE, SAMSUNG GALAXY TAB
  42. The device landscape is constantly changing. Capabilities are constantly changing. Properly structured content is portable to future platforms.
  43. THE ZERO INTERFACE: THINK, DONE. ANY STEP WE ADD TO THAT HAS THE POTENTIAL TO RUIN EVERYTHING, SO CHOOSE WISELY.
  44. 4. LINEAR “DESIGN” THE BARE ESSENTIALS. START PLAYING AROUND A BIT.
  45. 5. BREAKPOINT GRAPHS STEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS
  46. 5. BREAKPOINT GRAPHS STEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS THINK FIRST IN TERMS OF DEVICE CLASSES, NOT SPECIFIC DEVICES.
  47. 6. DESIGN FOR VARIOUS BREAKPOINTS DON’T FORGET TO SKETCH
  48. 7. IF WE’RE NOT DELIVERING DESIGNS IN PHOTOSHOP, WHAT DO WE DELIVER?
  49. AN HTML/CSS/JS PROTOTYPE LOOKS LIKE THIS:
  50. HOUSTON, WE HAVE A PROBLEM.
  51. STRUCTURED CONTENT LINEAR DESIGN CONTENT REFERENCE WIREFRAMES
  52. STRUCTURED CONTENT LINEAR DESIGN CONTENT REFERENCE WIREFRAMES
  53. STRUCTURED CONTENT LINEAR DESIGN CONTENT REFERENCE WIREFRAMES
  54. STRUCTURED CONTENT LINEAR DESIGN CONTENT REFERENCE WIREFRAMES CSS
  55. STRUCTURED CONTENT LINEAR DESIGN CONTENT REFERENCE WIREFRAMES CSS PROTOTYPE
  56. VERSION CONTROL PREPROCESSORS / HELPER SCRIPTS FRAMEWORKS (BE CAREFUL, THOUGH) HTML TEMPLATING, STATIC SITE GENERATORS DEVELOPMENT APPROACHES (SMACSS, ETC.)
  57. 8 & 9. SOME PRESENTATION PSYCHOLOGY
  58. 8 & 9. SOME PRESENTATION PSYCHOLOGY 1. For the first presentation, use screenshots.
  59. 8 & 9. SOME PRESENTATION PSYCHOLOGY 1. For the first presentation, use screenshots. 2. See above.
  60. 10. AND WHAT DO WE GIVE TO THE DEVELOPERS?
  61. INSPIRATION: JEREMY KEITH’S PATTERN PRIMER https://github.com/adactio/Pattern-Primer
  62. INSPIRATION: JEREMY KEITH’S PATTERN PRIMER https://github.com/adactio/Pattern-Primer
  63. WHAT I USE: DEXY http://www.dexy.it/
  64. WHAT I USE: DEXY http://www.dexy.it/
  65. WHAT I USE: DEXY http://www.dexy.it/
  66. HOW DEXY WORKS http://www.dexy.it/ MARKDOWN HTML CSS HTML DOCS SYNTAX HIGHLIGHTING SCREENSHOTS VIA CasperJS / PhantomJS
  67. YOU’VE JUST CREATED A STYLEGUIDE AND THAT’S SO MUCH MORE USEFUL THAN A SIMPLE PHOTOSHOP FILE
  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 prototype RESPONSIVE 8. Present prototype screenshots WORKFLOW: 9. Present prototype after revision 10 STEPS 10. Document for production
  69. KEEP ADAPTING. KEEPLEARNING.
  70. THX @STEPHENHAY THE-HAYSTACK.COM SPECIAL THANKS TO BRYAN & STEPHANIE RIEGER and ANA NELSON

×