REBORN. University | Responsive Workflow

3,909 views
3,869 views

Published on

Published in: Design

REBORN. University | Responsive Workflow

  1. 1. We shapeour tools,andthereafterour toolsshape us.— MARSHALL MCLUHAN©RobertFlemming
  2. 2. — MARSHALL MCLUHANWe shapeour tools,andthereafterour toolsshape us.
  3. 3. ©HenriDauman
  4. 4. It changesouroutlook,ourattitudes,ourfeelings...©BernardGotfryd
  5. 5. ©BSJPhotography
  6. 6. ©QuentinFiore
  7. 7. 2005©LucaBrunoSt. Peter’s Square, Rome
  8. 8. 2013©MichaelSohnSt. Peter’s Square, Rome
  9. 9. ECOSYSTEMS C R E E N SOF
  10. 10. At times of change, thelearners are the ones whowill inherit the world, whilethe knowers will bebeautifully prepared for aworld which no longer exists.— ALISTAIR SMITH
  11. 11. How canwe—andourdesigns—adapt?
  12. 12. How canwe—andourdesigns—adapt?respond?
  13. 13. ©NamJunePaik
  14. 14. THE WAY
  15. 15. THE WAY
  16. 16. PLANNING
  17. 17. PLANNINGSTATIC WIREFRAMES
  18. 18. PLANNINGSTATIC WIREFRAMESSTATIC DESIGN
  19. 19. PLANNINGSTATIC WIREFRAMESSTATIC DESIGNHTML/CSS/JS
  20. 20. PLANNINGSTATIC WIREFRAMESSTATIC DESIGNHTML/CSS/JSLAUNCH
  21. 21. A NEW WAY
  22. 22. Responsiveness it’snot just somethingwe can build intoour product,—it’s an attitudewe can adopt.— WILSON MINER
  23. 23. ©ToddMcLellan
  24. 24. PLAN
  25. 25. PLANContentInventoryUserJourneysContentReferenceWireframes
  26. 26. 1. Logo2. Social Media3. Navigation4. Introduction5. Case Studies6. Clients7. News8. Secondary NavigationCONTENT
  27. 27. 1. Logo2. Social Media3. Navigation4. Introduction5. Case Studies6. Clients7. News8. Secondary Navigation12 345678CONTENT
  28. 28. TEXTDESIGN
  29. 29. Pandoc
  30. 30. MOBILEREADYALMOST
  31. 31. Properlystructuredcontent isportable tofuture platforms.— STEPHEN HAY
  32. 32. SimplifiedTranslationProgressiveEnhancement
  33. 33. SETBREAKPOINTS
  34. 34. ©Viljamis
  35. 35. Touch-basedsmartphoneDesktop/Laptop9’’ Tablet©Viljamis
  36. 36. ©ViljamisSmall LargeMedium
  37. 37. SKETCH
  38. 38. ©ChrisRisdon
  39. 39. PROTOTYPE
  40. 40. Typecast
  41. 41. Typecast
  42. 42. VISUALDESIGN
  43. 43. ©MwmGraphics
  44. 44. PATTERN LIBRARY
  45. 45. - State and breakpointchanges can be included- Useful for futuredesigners, devs, etc- Design consistency andmaintainabilityPATTERN LIBRARY
  46. 46. TEST
  47. 47. ©J.Mathews
  48. 48. DISCUSS
  49. 49. Discussing with the client duringall iterations and showing HTML/CSS prototypes before staticPhotoshop designs hasstreamlined our workflow andhelped us to set and—manage a client’s expectationsbetter than ever before.— ANDY CLARKE
  50. 50. ITERATE
  51. 51. Sketch → prototype → design → test → discuss©Viljamis
  52. 52. PLANTEXT DESIGNSET BREAKPOINTSSKETCHPROTOTYPEVISUAL DESIGNTESTDISCUSS/ITERATE
  53. 53. ?
  54. 54. ROCK SOLID HTML EMAILS
  55. 55. The digital channelsAustralian marketers use tocommunicate with customers.84% Social37% Blogs83% Traditional Web40% Mobile Apps49%DisplayAdvertising28%MobileMessaging45%MobileWeb97%EmailResponsys2012
  56. 56. Weve gone from beingexposed to about 500ads a day back in the70s to as many as5,000 a day today.— JAY WALKER SMITH, Yankelovich Consumer Research
  57. 57. IT’S A NOISYLANDSCAPE
  58. 58. The average timeallocated to anewsletter afteropening it was only— JAKOB NIELSEN’S Alertbox51 seconds.
  59. 59. CONTENT IS KING
  60. 60. ALL?
  61. 61. nOMASTERPLAN
  62. 62. LOOKING THROUGH THE RECTANGULAR WINDOW
  63. 63. 300-500pxFIRST IMPRESSIONS COUNT
  64. 64. WHAT ABOUT W I D T H ?
  65. 65. It’s a good idea to keep youremails to a width of no morethan 550-640 pixels.— CAMPAIGN MONITOR
  66. 66. 440px
  67. 67. 600px
  68. 68. 750px
  69. 69. HEADER TEXTPRE
  70. 70. The term readability doesn’task simply “can you read it?”—it asks“do you want to read it?”— @TYPOGRAPHICA
  71. 71. VIEW ONLINE VERSIONFORWARD TO A FRIENDVIEW ON MOBILE
  72. 72. IMAGE BLOCKING
  73. 73. of email recipients seeimages automatically.— MERKLE “View From The Digital Inbox”Only 48%
  74. 74. BECOMING A KNOWN SENDERPACKING A PUNCH INTO THE PRE-HEADERPROVIDING ALT TEXTUSING HTML TEXT IN THE DESIGNS
  75. 75. STYLING UP ALT TEXT WITH CSS
  76. 76. TURNING TABLESINTO 8BIT WONDER
  77. 77. CALL TO ACTIONSIN HTML TEXT
  78. 78. THE EMAIL CLIENTSAUSTRALIANS USERemarkably, Apple iPhoneand Apple Mail contributetowards 27% of Australians’email client usage.— RESPONSYS The 2012 Digital MarketingBig Australia Report34% Outlook10.7% Hotmail16% Apple iPhone12% Apple Mail25% Other
  79. 79. MOBILE FRIENDLY
  80. 80. Links and buttons shouldhave a minimum target areaof 44 × 44 pixels, as perApple guidelines.min = 30pxideal = 44px
  81. 81. The minimum font sizedisplayed on iPhones isWP7 recommends nosmaller than 15 px, Applerecommends 17-22 px font.13 pixels.
  82. 82. Responsiveness it’snot just somethingwe can build intoour product,—it’s an attitudewe can adopt.— WILSON MINER
  83. 83. KEEP ADAPTINGK E E P L E A R N I N G

×