SXSX wysiwys panel slides

6,254 views

Published on

Panel given by Alex Breuer, Dan Gardner and Dave Rupert @SXSW on 11th March 2012

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,254
On SlideShare
0
From Embeds
0
Number of Embeds
1,105
Actions
Shares
0
Downloads
37
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

SXSX wysiwys panel slides

  1. 1. Aboutis WYSIWYS What you see what you spec’d Alex Breuer, Creative Director, The Guardian Dan Gardner, Founder & Creative Director, Code & Theory Dave Rupert, Lead Developer, Paravel #WYSIWYS RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 1Monday, 18 March 13
  2. 2. Learnings from Code and Theory RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 2Monday, 18 March 13
  3. 3. How it’s done RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 3Monday, 18 March 13
  4. 4. 1 2 3 4 5 6 7 8 9 RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 4Monday, 18 March 13
  5. 5. 1 2 3 4 5 6 RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORYMonday, 18 March 13
  6. 6. 1 2 3 RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORYMonday, 18 March 13
  7. 7. a b c RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORYMonday, 18 March 13
  8. 8. Done. a b c RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORYMonday, 18 March 13
  9. 9. Done. a b c RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY Thanks.Monday, 18 March 13
  10. 10. The biggest challenge of Responsive Design is decision-making Purpose, Platform, Prioritization, Process RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 10Monday, 18 March 13
  11. 11. Definitions Help Device Specific Individually coded & designed for specific device (ie. mdot) Adaptive Designing and developing elements for targeted devices. (back-end serves up specific device code for device) Responsive One front-end Code base that optimally presents designs across devices. (often fluid design) RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 11Monday, 18 March 13
  12. 12. Purpose, Platform, Prioritization, Process RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 12Monday, 18 March 13
  13. 13. System Design The design system must be purpose driven G G CE N IN HI ER ET IS M RK BL M A CO PU M TYPOGRAPHICALLY IMAGE DRIVEN DRIVEN RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 13Monday, 18 March 13
  14. 14. Monday, 18 March 13
  15. 15. Monday, 18 March 13
  16. 16. Monday, 18 March 13
  17. 17. Content Strategy The Content Determines Content considerations include: The Design - Formats - Frequency - Pathing and desired user flow RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 17Monday, 18 March 13
  18. 18. Purpose, Platform, Prioritization, Process RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 18Monday, 18 March 13
  19. 19. Consider the Ecosystem How does this responsive site exist with other products on the same devices RESPONSIVE REPLICATED DIFFERENTIATED NATIVE RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 19Monday, 18 March 13
  20. 20. Adaptive Design in a Responsive Framework Device Specific Differentiation Considerations and Challenges: - Technology (cms management and time) - Content (what’s needed on what device?) - Functionality (where can we add value?) RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 20Monday, 18 March 13
  21. 21. App like, not web like This Isn’t Page Design, - Gestures + Animation It’s Interaction Design - Sandboxes for freedom and extension - Leverage functionality and assets RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 21Monday, 18 March 13
  22. 22. Items Page Templates Modules Librarys (Outfits) Custom Pages RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 22Monday, 18 March 13
  23. 23. Monday, 18 March 13
  24. 24. Purpose, Platform, Prioritization, Process RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 24Monday, 18 March 13
  25. 25. System Design Page Templates Custom Pages Librarys (outfits) Modules Items Design Design Big Small RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 25Monday, 18 March 13
  26. 26. It’s not mobile first first, its all platforms at once More, But Simple RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 26Monday, 18 March 13
  27. 27. Midpoints or Breakpoints TIME TO MARKET LONGEVITY OF EXPERIENCE RESOURCES TARGET DEVICES COMPLEXITY OF BEHAVIORAL USAGE RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 27Monday, 18 March 13
  28. 28. Monday, 18 March 13
  29. 29. Purpose, Platform, Prioritization, Process RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 29Monday, 18 March 13
  30. 30. How It’s Used Using the system is as important Organizational and Workflow as the system itself considerations include: - Org Structure, Resources - CMS access, authority and hierarchy - Content creation process RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 30Monday, 18 March 13
  31. 31. How We Do It Constantly Refining Our Process Some of our best practices include: - Team composition - Argue early and often - Prototype early and often - Tools: Indesign & Keynote RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 31Monday, 18 March 13
  32. 32. Design Is Not Done... ...Until It’s Developed and it’s still probably not done. RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 • CODE AND THEORY 32Monday, 18 March 13
  33. 33. The empire Premium mobile technology Intuitive UX and reading experience RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 33Monday, 18 March 13
  34. 34. A new hope RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 34Monday, 18 March 13
  35. 35. Old technology RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 35Monday, 18 March 13
  36. 36. A new hope (again) RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 36Monday, 18 March 13
  37. 37. not the droids... RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 37Monday, 18 March 13
  38. 38. A new hope (AGAIN!) RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 38Monday, 18 March 13
  39. 39. RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 39Monday, 18 March 13
  40. 40. the easy bit Display area RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 40Monday, 18 March 13
  41. 41. equivalence Content and template bundle Text size/dpi ranges Grid based on baselines and and columns scaled to image aspect ratio Number of columns Number of rows RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 41Monday, 18 March 13
  42. 42. The hard bit Estimation Distribution Filter Test Render RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 42Monday, 18 March 13
  43. 43. The hard bit Estimation Minimum pages for compulsory content to minimise white space RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 43Monday, 18 March 13
  44. 44. The hard bit Distribution Using rules defined for display area. number of items per page hierachy and position across pages RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 44Monday, 18 March 13
  45. 45. The hard bit Filter Test valid combinations of elements defined by distribution Best combination of content sizes to fill minimum number of pages in desirable paced sequence RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 45Monday, 18 March 13
  46. 46. The hard bit most significant sizes of the most significant content items on the most significant pages Cartesian product sequences to limit combinations (a more important than b) [a1, a2, a3] [b1, b2, b3] [a1, b1] [a1, b2] [a1, b3] [a2, b1] [a2, b2] etc RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 46Monday, 18 March 13
  47. 47. The hard bit Test Configure a limit to the number of tests before optimum is chosen RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 47Monday, 18 March 13
  48. 48. The hard bit Render Specific rules and precedents and overides from cms during distribution and filtering RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 48Monday, 18 March 13
  49. 49. RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 49Monday, 18 March 13
  50. 50. Responsive DeliverablesMonday, 18 March 13
  51. 51. Ye olde way: Pages PSD js Welcome to my css “Hey, code this.” html FTP Shit WebsiteMonday, 18 March 13
  52. 52. Does not account for complexity.Monday, 18 March 13
  53. 53. “Developers should build a program out of simple parts connected by well defined interfaces, so problems are local, and parts of the program can be replaced in future versions to support new features.” The UNIX PhilosophyMonday, 18 March 13
  54. 54. Monday, 18 March 13
  55. 55. Monday, 18 March 13
  56. 56. The new way: Modules Module 1 Module 2 js js Welcome to my css css html html Build Process WebsiteMonday, 18 March 13
  57. 57. How then to organize these modules?Monday, 18 March 13
  58. 58. SMACSS by Snook http://smacss.comMonday, 18 March 13
  59. 59. Self-realization!! Theme State (:hover) Module (.module) Layout (grid & structure) Base (reset & type defaults) SMACSS Organization of CSSMonday, 18 March 13
  60. 60. .module { background: pink; } .module:hover { opacity: 0.8; } .module--blue { background: blue; }Monday, 18 March 13
  61. 61. Brand Identity System for WebMonday, 18 March 13
  62. 62. Monday, 18 March 13
  63. 63. Monday, 18 March 13
  64. 64. With RWD we’re creating systems, not pages.Monday, 18 March 13
  65. 65. Flexible grid Carousels Responsive typography Dropdowns RWD images plan Pagination Scalable navigation Data tables Performance budget Icon fonts Accessible form controls more...Monday, 18 March 13
  66. 66. Monday, 18 March 13
  67. 67. Interactive Style Guides, Prototypes, [insert buzzword],Monday, 18 March 13 etc.
  68. 68. Demo or it didn’t happen isn’t billable.Monday, 18 March 13
  69. 69. Tiny bootstraps, for every client.Monday, 18 March 13
  70. 70. Uhh..Works on iPhone.Monday, 18 March 13
  71. 71. Thanks @ajbreuer @danjgardner @davatron5000 #WYSIWYS RESPONSIVE DESIGN • SXSW • 11 MARCH 2013 71Monday, 18 March 13

×