Successfully reported this slideshow.
Your SlideShare is downloading. ×

AIGA: Designing for CMS

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
WPC Briefing
WPC Briefing
Loading in …3
×

Check these out next

1 of 146 Ad

More Related Content

Recently uploaded (20)

Advertisement

AIGA: Designing for CMS

  1. 1. PENCIL TO PIXEL DESIGNING FOR CMS AIGA Philadelphia Tuesday, November 15, 2011
  2. 2. WHO IS HAPPY COG? Education Tuesday, 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 Studio Tuesday, November 15, 2011
  7. 7. 2 DEMYSTIFYING THE CMS Tuesday, November 15, 2011
  8. 8. “ I know the CMS is this black box you'd really rather not look into. —KAREN MCGRANE, CONTENT STRATEGIST Tuesday, November 15, 2011
  9. 9. VITSOE 606 Dieter Rams, 1960 http://www.vitsoe.com/en/us Tuesday, 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 CONTENT Tuesday, November 15, 2011
  13. 13. Tuesday, November 15, 2011
  14. 14. WILLIAM PENN’S PLAN FOR PHILADELPHIA 1683 Tuesday, 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, it's decoration. —JEFFREY ZELDMAN http://twitter.com/#!/zeldman/status/804159148 Tuesday, 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 PEOPLE Tuesday, November 15, 2011
  25. 25. TEXT Tuesday, November 15, 2011
  26. 26. Tuesday, November 15, 2011
  27. 27. Tuesday, November 15, 2011
  28. 28. CONTENT needs to be managed Tuesday, November 15, 2011
  29. 29. THE OLD WAY: STATIC Tuesday, 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, EVER Tuesday, November 15, 2011
  42. 42. Benefits ‣ No coding experience required ‣ Streamlines the editorial process ‣ Edit/publish from anywhere ‣ Decrease site maintenance costs Tuesday, November 15, 2011
  43. 43. TEXT Tuesday, November 15, 2011
  44. 44. 4 Our Process PROJECT INFORMATION GRAPHIC DEVELOPMENT DEFINITION ARCHITECTURE DESIGN Tuesday, November 15, 2011
  45. 45. Project Definition 1. Stakeholder Interviews 2. Comparative Analysis & Benchmarking 3. Kickoff & Workshop 4. Business Requirements 5. Communications Brief Tuesday, November 15, 2011
  46. 46. MOOD BOARD Style and tone for a healthcare website Tuesday, November 15, 2011
  47. 47. WIREFRAMES Tuesday, November 15, 2011
  48. 48. Tuesday, November 15, 2011
  49. 49. Tuesday, November 15, 2011
  50. 50. 5 SYSTEM PLANNING Tuesday, November 15, 2011
  51. 51. SITE MAP Tuesday, November 15, 2011
  52. 52. “VIP” PAGES Tuesday, November 15, 2011
  53. 53. WIREFRAMES Tuesday, 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 PLAN Tuesday, 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 A Tuesday, November 15, 2011
  60. 60. ‣ Full-Column “Hero” ‣ Primary Events ‣ Secondary News ‣ Secondary Events ‣ Donate Module ‣ Related Links TEMPLATE A Tuesday, November 15, 2011
  61. 61. ‣ Full-Column “Hero” ‣ Primary Events ‣ Secondary News ‣ Secondary Events ‣ Donate Module ‣ Related Links TEMPLATE A Tuesday, November 15, 2011
  62. 62. ‣ Full-Column “Hero” ‣ Primary Events ‣ Secondary News ‣ Secondary Events ‣ Donate Module ‣ Related Links TEMPLATE A Tuesday, November 15, 2011
  63. 63. ‣ Full-Column “Hero” ‣ Primary Events ‣ Secondary News ‣ Secondary Events ‣ Donate Module ‣ Related Links TEMPLATE A Tuesday, November 15, 2011
  64. 64. ‣ Full-Column “Hero” ‣ Primary Events ‣ Secondary News ‣ Secondary Events ‣ Donate Module ‣ Related Links TEMPLATE A Tuesday, November 15, 2011
  65. 65. ‣ Full-Column “Hero” ‣ Primary Events ‣ Secondary News ‣ Secondary Events ‣ Donate Module ‣ Related Links TEMPLATE A Tuesday, 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 F Tuesday, November 15, 2011
  67. 67. REVISIT THE SITEMAP Tuesday, November 15, 2011
  68. 68. A REVISIT THE SITEMAP Tuesday, November 15, 2011
  69. 69. A B REVISIT THE SITEMAP Tuesday, November 15, 2011
  70. 70. A C B REVISIT THE SITEMAP Tuesday, 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 SITEMAP Tuesday, November 15, 2011
  72. 72. PRIMARY NEWS SECONDARY NEWS PRIMARY EVENTS SECONDARY EVENTS PHOTO SLIDESHOW RELATED LINKS RECENT SCHOLARSHIP PRIMARY VIDEO Tuesday, 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 NEWS Tuesday, 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 GRID Tuesday, November 15, 2011
  76. 76. 6 GRID SYSTEMS Tuesday, November 15, 2011
  77. 77. WILLIAM PENN’S PLAN FOR PHILADELPHIA 1683 Tuesday, November 15, 2011
  78. 78. NATIONAL PARK SERVICE UNIGRID 1977 Tuesday, November 15, 2011
  79. 79. NATIONAL PARK SERVICE FOLD-OUTS http://www.peterme.com/images/ nps_mesa_dv_sidebyside.jpg Tuesday, 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.pdf Tuesday, November 15, 2011
  81. 81. 960: LOVED & LOATHED Tuesday, 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/#app Tuesday, 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 CMS Tuesday, 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 PATTERNS Tuesday, November 15, 2011
  93. 93. Tuesday, November 15, 2011
  94. 94. Tuesday, November 15, 2011
  95. 95. CONTENT LEADS DESIGN Tuesday, 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 LIBRARY Tuesday, November 15, 2011
  101. 101. PATTERN LIBRARY Tuesday, 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. ZAPPOS Tuesday, 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 BRAND Tuesday, 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 TAGS Tuesday, November 15, 2011
  126. 126. Tuesday, November 15, 2011
  127. 127. Tuesday, November 15, 2011
  128. 128. 9 DEVELOPMENT Tuesday, November 15, 2011
  129. 129. AUDIT THE BLITZ Tuesday, November 15, 2011
  130. 130. HANDOFF MEETING Tuesday, November 15, 2011
  131. 131. PSDS TO TEMPLATES Tuesday, November 15, 2011
  132. 132. ALL THE MODULES Tuesday, November 15, 2011
  133. 133. ALL THE MODULES Tuesday, November 15, 2011
  134. 134. HTML CSS Tuesday, November 15, 2011
  135. 135. CMS INTEGRATION Tuesday, November 15, 2011
  136. 136. Tuesday, November 15, 2011
  137. 137. ‣ Title ‣ Image ‣ Date ‣ Location ‣ Time ‣ Ticket price ‣ Copy Tuesday, 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 MAP Tuesday, November 15, 2011
  142. 142. CONTENT ENTRY Tuesday, 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 ahead Tuesday, November 15, 2011
  145. 145. THANK YOU! ‣ Michael Johnson (@mleland), Senior Designer ‣ Yesenia Perez-Cruz (@yeseniaa), Designer ‣ Allison Wagner (@alliwagner), Developer Tuesday, November 15, 2011
  146. 146. QUESTIONS? Tuesday, November 15, 2011

×