AIGA: Designing for CMS

3,748 views

Published on

Published in: Technology, Business

AIGA: Designing for CMS

  1. 1. PENCIL TO PIXEL DESIGNING FOR CMS AIGA PhiladelphiaTuesday, November 15, 2011
  2. 2. WHO IS HAPPY COG? EducationTuesday, November 15, 2011
  3. 3. Tuesday, November 15, 2011
  4. 4. Tuesday, November 15, 2011
  5. 5. Tuesday, November 15, 2011
  6. 6. WHO IS HAPPY COG? Collaborative StudioTuesday, November 15, 2011
  7. 7. 2 DEMYSTIFYING THE CMSTuesday, November 15, 2011
  8. 8. “ I know the CMS is this black box youd really rather not look into. —KAREN MCGRANE, CONTENT STRATEGISTTuesday, November 15, 2011
  9. 9. VITSOE 606 Dieter Rams, 1960 http://www.vitsoe.com/en/usTuesday, November 15, 2011
  10. 10. ID CHAIR CONCEPT Vitra, 2011 http://www.vitra.com/en-no/office/ products/id-chair-concept/overview/Tuesday, November 15, 2011
  11. 11. “ Design is like architecture; we structure space to facilitate the experience. Are you creating a minimal, modernist masterpiece, or a dense maze of information? —JENNIFER MORLA, 2010 AIGA MEDALIST http://morladesign.com/designisms/Tuesday, November 15, 2011
  12. 12. DESIGNING FOR A CITY’S WORTH OF CONTENTTuesday, November 15, 2011
  13. 13. Tuesday, November 15, 2011
  14. 14. WILLIAM PENN’S PLAN FOR PHILADELPHIA 1683Tuesday, November 15, 2011
  15. 15. MANHATTAN EXTINSIBLE PHILADELPHIA 1755 http://www.flickr.com/photos/thisisbossi/ 2011 6200063720/sizes/l/in/photostream/Tuesday, November 15, 2011
  16. 16. Tuesday, November 15, 2011
  17. 17. Tuesday, November 15, 2011
  18. 18. Tuesday, November 15, 2011
  19. 19. Tuesday, November 15, 2011
  20. 20. Tuesday, November 15, 2011
  21. 21. “ Content precedes design. Design in the absence of content is not design, its decoration. —JEFFREY ZELDMAN http://twitter.com/#!/zeldman/status/804159148Tuesday, November 15, 2011
  22. 22. JUST SAY “NO”Tuesday, November 15, 2011
  23. 23. 3 WHAT IS CONTENT?Tuesday, November 15, 2011
  24. 24. CONTENT IS ABOUT PEOPLETuesday, November 15, 2011
  25. 25. TEXTTuesday, November 15, 2011
  26. 26. Tuesday, November 15, 2011
  27. 27. Tuesday, November 15, 2011
  28. 28. CONTENT needs to be managedTuesday, November 15, 2011
  29. 29. THE OLD WAY: STATICTuesday, November 15, 2011
  30. 30. Tuesday, November 15, 2011
  31. 31. Tuesday, November 15, 2011
  32. 32. Tuesday, November 15, 2011
  33. 33. CMS FTW!Tuesday, November 15, 2011
  34. 34. Tuesday, November 15, 2011
  35. 35. Tuesday, November 15, 2011
  36. 36. Tuesday, November 15, 2011
  37. 37. Tuesday, November 15, 2011
  38. 38. Tuesday, November 15, 2011
  39. 39. Tuesday, November 15, 2011
  40. 40. CHOOSING A CMS is it always the answer?Tuesday, November 15, 2011
  41. 41. “ I want to be able to update the site myself. —EVERY CLIENT, EVERTuesday, November 15, 2011
  42. 42. Benefits ‣ No coding experience required ‣ Streamlines the editorial process ‣ Edit/publish from anywhere ‣ Decrease site maintenance costsTuesday, November 15, 2011
  43. 43. TEXTTuesday, November 15, 2011
  44. 44. 4 Our Process PROJECT INFORMATION GRAPHIC DEVELOPMENT DEFINITION ARCHITECTURE DESIGNTuesday, November 15, 2011
  45. 45. Project Definition 1. Stakeholder Interviews 2. Comparative Analysis & Benchmarking 3. Kickoff & Workshop 4. Business Requirements 5. Communications BriefTuesday, November 15, 2011
  46. 46. MOOD BOARD Style and tone for a healthcare websiteTuesday, November 15, 2011
  47. 47. WIREFRAMESTuesday, November 15, 2011
  48. 48. Tuesday, November 15, 2011
  49. 49. Tuesday, November 15, 2011
  50. 50. 5 SYSTEM PLANNINGTuesday, November 15, 2011
  51. 51. SITE MAPTuesday, November 15, 2011
  52. 52. “VIP” PAGESTuesday, November 15, 2011
  53. 53. WIREFRAMESTuesday, November 15, 2011
  54. 54. LET’S SKETCH!Tuesday, November 15, 2011
  55. 55. LET’S SKETCH!Tuesday, November 15, 2011
  56. 56. THE GRAYBOX PLANTuesday, November 15, 2011
  57. 57. Tuesday, November 15, 2011
  58. 58. Tuesday, November 15, 2011
  59. 59. ‣ Full-Column “Hero” ‣ Primary Events ‣ Secondary News ‣ Secondary Events ‣ Donate Module ‣ Related Links TEMPLATE ATuesday, November 15, 2011
  60. 60. ‣ Full-Column “Hero” ‣ Primary Events ‣ Secondary News ‣ Secondary Events ‣ Donate Module ‣ Related Links TEMPLATE ATuesday, November 15, 2011
  61. 61. ‣ Full-Column “Hero” ‣ Primary Events ‣ Secondary News ‣ Secondary Events ‣ Donate Module ‣ Related Links TEMPLATE ATuesday, November 15, 2011
  62. 62. ‣ Full-Column “Hero” ‣ Primary Events ‣ Secondary News ‣ Secondary Events ‣ Donate Module ‣ Related Links TEMPLATE ATuesday, November 15, 2011
  63. 63. ‣ Full-Column “Hero” ‣ Primary Events ‣ Secondary News ‣ Secondary Events ‣ Donate Module ‣ Related Links TEMPLATE ATuesday, November 15, 2011
  64. 64. ‣ Full-Column “Hero” ‣ Primary Events ‣ Secondary News ‣ Secondary Events ‣ Donate Module ‣ Related Links TEMPLATE ATuesday, November 15, 2011
  65. 65. ‣ Full-Column “Hero” ‣ Primary Events ‣ Secondary News ‣ Secondary Events ‣ Donate Module ‣ Related Links TEMPLATE ATuesday, November 15, 2011
  66. 66. Page Title Page Title Page Title CENTERS & INSTITUTES NEWS & EVENTS JOURNALS RELATED LINKS JOURNALS CENTERS & INSTITUTES RELATED LINKS A B C Page Title Page Title Page Title CENTERS & INSTITUTES NEWS & EVENTS RELATED LINKS JOURNALS CENTERS & INSTITUTES JOURNALS RELATED LINKS D E FTuesday, November 15, 2011
  67. 67. REVISIT THE SITEMAPTuesday, November 15, 2011
  68. 68. A REVISIT THE SITEMAPTuesday, November 15, 2011
  69. 69. A B REVISIT THE SITEMAPTuesday, November 15, 2011
  70. 70. A C B REVISIT THE SITEMAPTuesday, November 15, 2011
  71. 71. A A A C F B B B B B B E C C C C B F A A C C C C B F F D C C D C B C D C C D C D C C C C C F F C C C D D B B F F D B B D D B B D B B D B B REVISIT THE SITEMAPTuesday, November 15, 2011
  72. 72. PRIMARY NEWS SECONDARY NEWS PRIMARY EVENTS SECONDARY EVENTS PHOTO SLIDESHOW RELATED LINKS RECENT SCHOLARSHIP PRIMARY VIDEOTuesday, November 15, 2011 SECONDARY VIDEO
  73. 73. DONATE - VERTICAL RECENT YOUTUBE VIDEOS CALENDAR DATE SWITCHER FROM THE BOOKSTORE LARGE PROMO AREA SMALL PROMO AREA PRIMARY NEWSTuesday, November 15, 2011 SECONDARY NEWS
  74. 74. THAT’S A LOT OF PATTERNS!Tuesday, November 15, 2011
  75. 75. Page Title CENTERS & INSTITUTES NEWS & EVENTS JOURNALS RELATED LINKS PLAN YOUR GRIDTuesday, November 15, 2011
  76. 76. 6 GRID SYSTEMSTuesday, November 15, 2011
  77. 77. WILLIAM PENN’S PLAN FOR PHILADELPHIA 1683Tuesday, November 15, 2011
  78. 78. NATIONAL PARK SERVICE UNIGRID 1977Tuesday, November 15, 2011
  79. 79. NATIONAL PARK SERVICE FOLD-OUTS http://www.peterme.com/images/ nps_mesa_dv_sidebyside.jpgTuesday, November 15, 2011
  80. 80. “ There are infinite ways of [applying content] and that is why the grid is a useful tool, rather than a constricting device. However, one should learn to use it so as to retrieve the most advantageous results. — MASSIMO VIGNELLI http://www.vignelli.com/canon.pdfTuesday, November 15, 2011
  81. 81. 960: LOVED & LOATHEDTuesday, November 15, 2011
  82. 82. MODULAR TYPE SCALES http://modularscale.com/Tuesday, November 15, 2011
  83. 83. MODULAR TYPE SCALES http://modularscale.com/Tuesday, November 15, 2011
  84. 84. MODULAR TYPE SCALES http://modularscale.com/Tuesday, November 15, 2011
  85. 85. MODULAR TYPE SCALES http://modularscale.com/Tuesday, November 15, 2011
  86. 86. MODULAR TYPE SCALES http://modularscale.com/Tuesday, November 15, 2011
  87. 87. MODULAR TYPE SCALES http://modularscale.com/Tuesday, November 15, 2011
  88. 88. MODULAR GRID http://modulargrid.org/#appTuesday, November 15, 2011
  89. 89. It’s just a few pages. We’ll be fine without “ a grid. —SOME DESIGNER, RIGHT NOW, NOT THINKING ABOUT THE CMSTuesday, November 15, 2011
  90. 90. CMS WITHOUT A FLEXIBLE GRID How pages are made.Tuesday, November 15, 2011
  91. 91. DON’T LACK DISCIPLINE Think modularly.Tuesday, November 15, 2011
  92. 92. 7 CONTENT PATTERNSTuesday, November 15, 2011
  93. 93. Tuesday, November 15, 2011
  94. 94. Tuesday, November 15, 2011
  95. 95. CONTENT LEADS DESIGNTuesday, November 15, 2011
  96. 96. Tuesday, November 15, 2011
  97. 97. Tuesday, November 15, 2011
  98. 98. Tuesday, November 15, 2011
  99. 99. EXTENSIBILITY Planning for the Future!Tuesday, November 15, 2011
  100. 100. PATTERN LIBRARYTuesday, November 15, 2011
  101. 101. PATTERN LIBRARYTuesday, November 15, 2011
  102. 102. ID CHAIR CONCEPT Vitra, 2011 http://www.vitra.com/en-no/office/ products/id-chair-concept/overview/Tuesday, November 15, 2011
  103. 103. Tuesday, November 15, 2011
  104. 104. ZAPPOSTuesday, November 15, 2011
  105. 105. Tuesday, November 15, 2011
  106. 106. Tuesday, November 15, 2011
  107. 107. Tuesday, November 15, 2011
  108. 108. EXTENDING THE BRANDTuesday, November 15, 2011
  109. 109. WHAT IF IT BREAKS?!Tuesday, November 15, 2011
  110. 110. Tuesday, November 15, 2011
  111. 111. Tuesday, November 15, 2011
  112. 112. Tuesday, November 15, 2011
  113. 113. Tuesday, November 15, 2011
  114. 114. Tuesday, November 15, 2011
  115. 115. Tuesday, November 15, 2011
  116. 116. Tuesday, November 15, 2011
  117. 117. Tuesday, November 15, 2011
  118. 118. Tuesday, November 15, 2011
  119. 119. Tuesday, November 15, 2011
  120. 120. Tuesday, November 15, 2011
  121. 121. Tuesday, November 15, 2011
  122. 122. Tuesday, November 15, 2011
  123. 123. Tuesday, November 15, 2011
  124. 124. Tuesday, November 15, 2011
  125. 125. 8 General Styles ALL THE TAGSTuesday, November 15, 2011
  126. 126. Tuesday, November 15, 2011
  127. 127. Tuesday, November 15, 2011
  128. 128. 9 DEVELOPMENTTuesday, November 15, 2011
  129. 129. AUDIT THE BLITZTuesday, November 15, 2011
  130. 130. HANDOFF MEETINGTuesday, November 15, 2011
  131. 131. PSDS TO TEMPLATESTuesday, November 15, 2011
  132. 132. ALL THE MODULESTuesday, November 15, 2011
  133. 133. ALL THE MODULESTuesday, November 15, 2011
  134. 134. HTML CSSTuesday, November 15, 2011
  135. 135. CMS INTEGRATIONTuesday, November 15, 2011
  136. 136. Tuesday, November 15, 2011
  137. 137. ‣ Title ‣ Image ‣ Date ‣ Location ‣ Time ‣ Ticket price ‣ CopyTuesday, November 15, 2011
  138. 138. ‣ Title: {title} ‣ Image: {event-feature-image} ‣ Date: {event-date} ‣ Location {event-location} ‣ Time: {event-time} ‣ Ticket price: {event-price} ‣ Copy: {event-body}Tuesday, November 15, 2011
  139. 139. {title} {event-feature-image} {event-location}Tuesday, November 15, 2011
  140. 140. {event-date} {event-time} {event-body} {event-price}Tuesday, November 15, 2011
  141. 141. CREATE EACH PAGE IN THE SITE MAPTuesday, November 15, 2011
  142. 142. CONTENT ENTRYTuesday, November 15, 2011
  143. 143. LAUNCH!Tuesday, November 15, 2011
  144. 144. 10 Takeaways 1. Don’t be afraid of Content Management Systems! 2. Plan your system before diving into Photoshop 3. Think modularly 4. Look aheadTuesday, November 15, 2011
  145. 145. THANK YOU! ‣ Michael Johnson (@mleland), Senior Designer ‣ Yesenia Perez-Cruz (@yeseniaa), Designer ‣ Allison Wagner (@alliwagner), DeveloperTuesday, November 15, 2011
  146. 146. QUESTIONS?Tuesday, November 15, 2011

×