0
DESIGNING FOR CMS                           AIGA ORLANDO                           Yesenia Perez-Cruz     @YESENIAA       ...
CLIENTSThursday, January 17, 13
AN EVENT APARTThursday, January 17, 13
A LIST APARTThursday, January 17, 13
Thursday, January 17, 13
Thursday, January 17, 13
“I want to be able to                           update the site myself”                                      - every clien...
1                           CMS FTW OMG                              AIGA ORLANDOThursday, January 17, 13
An interface to                              add/update                           content on the webThursday, January 17, 13
VIA TRENT WALTON,HTTP://TRENTWALTON.COM/Thursday, January 17, 13
BACK-END      FRONT-ENDThursday, January 17, 13
P.O.D.E.                           Publish Once Distribute EverywhereThursday, January 17, 13
Thursday, January 17, 13
HomeThursday, January 17, 13
NewsThursday, January 17, 13
ListThursday, January 17, 13
RSS FeedThursday, January 17, 13
AVOIDING                           BOTTLENECKSThursday, January 17, 13
KNOW YOUR   •                                       •                                           Content Providers         ...
VERSION                           CONTROLThursday, January 17, 13
INTO THE                           SUNSETThursday, January 17, 13
2                           Design Systems                               AIGA ORLANDOThursday, January 17, 13
YOU CAN’T DESIGN                           EVERY PAGEThursday, January 17, 13
SITE MAPThursday, January 17, 13
SITE MAPThursday, January 17, 13
THINK MODULARLYThursday, January 17, 13
LAYOUTS: THE FOUNDATIONThursday, January 17, 13
MODULES: THE BUILDING BLOCKSThursday, January 17, 13
Thursday, January 17, 13
Thursday, January 17, 13
Thursday, January 17, 13
Thursday, January 17, 13
MOMMY, WHERE DO                           MODULES COME FROM?Thursday, January 17, 13
Where User Needs and Business Requirements Intersect                           PROJECT DEFINITIONThursday, January 17, 13
R E Q U I R E M E N T S G AT H E R I N G :                           Define user needs &                             busin...
REQUIREMENTS                             DOCUMENTThursday, January 17, 13
Requirements Inform Modules                  BUSINESS GOAL:           MODULE:                  Display upcoming         Ev...
HTML                  Prototype                 • Show                           Interactions                 • Responsive...
TWITTER.GITHUB.COM/BOOTSTRAP/Thursday, January 17, 13
RESPONSIVEThursday, January 17, 13
LIST OF MODULES:                                 Navigation                                Social Media                   ...
MODULES   PA G E T Y P E SThursday, January 17, 13
MODULES   PA G E T Y P E SThursday, January 17, 13
MODULES   PA G E T Y P E S                               MOBILE                                               TA B L E TTh...
SITE MAPThursday, January 17, 13
3                           Design Process                               AIGA ORLANDOThursday, January 17, 13
Thursday, January 17, 13
Style Tiles                 • Quick                 • Layout agnosticThursday, January 17, 13
STYLETIL.ESThursday, January 17, 13
Type System                 • Tailored to your                           content                 • Mobile first           ...
TYPECAST.COMThursday, January 17, 13
Grid                 •         Foundation                 •         Future-thinking                 •         Flexible    ...
MODULARGRID.ORGThursday, January 17, 13
Page Title                                                               Page Title                                       ...
Design Blitz                 • Designing all                           the things!Thursday, January 17, 13
Home PageThursday, January 17, 13
Primary                  SubpageThursday, January 17, 13
Long-form                  ContentThursday, January 17, 13
Search                  ResultsThursday, January 17, 13
4                           Extensibility                              AIGA ORLANDOThursday, January 17, 13
ORDER & REPETITION                           Make deviations purposefulThursday, January 17, 13
DESIGN SYSTEM   AT   WORKThursday, January 17, 13
XThursday, January 17, 13
DESIGN SYSTEM   AT   WORKThursday, January 17, 13
Thursday, January 17, 13
Thursday, January 17, 13
PLAN FOR THINGS                           BREAKING DOWN                           They will.Thursday, January 17, 13
General Styles                 • Helps fill in the                           gaps that may                           not h...
PLAN   FOR   VARIATIONThursday, January 17, 13
PLAN   FOR   VARIATIONThursday, January 17, 13
PLAN   FOR   VARIATIONThursday, January 17, 13
5                           Putting the System to work                                     AIGA ORLANDOThursday, January 1...
Template Build                                 CMS Setup                           Client Gathers ContentThursday, January...
PORTING                           CONTENTThursday, January 17, 13
Bad                           Content                           EntryThursday, January 17, 13
Good                           Content                           EntryThursday, January 17, 13
THANK YOU!       Yesenia Perez-Cruz                           Designer                                                  @Y...
Upcoming SlideShare
Loading in...5
×

Designing for CMS 2013

2,568

Published on

Static, brochureware websites are a thing of the past. These days, as web designers, we work with dynamic content that will change countless times before, during, and after we hand off our work to clients. We're at a time where designing for Content Management Systems (CMS) is a must. In this lecture, Happy Cog's Allison Wagner and Yesenia Perez-Cruz will cover some best practices for designing CMS-driven websites, starting with square one, "What is a CMS?".

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

No Downloads
Views
Total Views
2,568
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
42
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Transcript of "Designing for CMS 2013"

  1. 1. DESIGNING FOR CMS AIGA ORLANDO Yesenia Perez-Cruz @YESENIAA Designer Allison Wagner @ A L L I WA G N E R DeveloperThursday, January 17, 13
  2. 2. CLIENTSThursday, January 17, 13
  3. 3. AN EVENT APARTThursday, January 17, 13
  4. 4. A LIST APARTThursday, January 17, 13
  5. 5. Thursday, January 17, 13
  6. 6. Thursday, January 17, 13
  7. 7. “I want to be able to update the site myself” - every client, everThursday, January 17, 13
  8. 8. 1 CMS FTW OMG AIGA ORLANDOThursday, January 17, 13
  9. 9. An interface to add/update content on the webThursday, January 17, 13
  10. 10. VIA TRENT WALTON,HTTP://TRENTWALTON.COM/Thursday, January 17, 13
  11. 11. BACK-END FRONT-ENDThursday, January 17, 13
  12. 12. P.O.D.E. Publish Once Distribute EverywhereThursday, January 17, 13
  13. 13. Thursday, January 17, 13
  14. 14. HomeThursday, January 17, 13
  15. 15. NewsThursday, January 17, 13
  16. 16. ListThursday, January 17, 13
  17. 17. RSS FeedThursday, January 17, 13
  18. 18. AVOIDING BOTTLENECKSThursday, January 17, 13
  19. 19. KNOW YOUR • • Content Providers Content Publishers ROLE • Super EditorsThursday, January 17, 13
  20. 20. VERSION CONTROLThursday, January 17, 13
  21. 21. INTO THE SUNSETThursday, January 17, 13
  22. 22. 2 Design Systems AIGA ORLANDOThursday, January 17, 13
  23. 23. YOU CAN’T DESIGN EVERY PAGEThursday, January 17, 13
  24. 24. SITE MAPThursday, January 17, 13
  25. 25. SITE MAPThursday, January 17, 13
  26. 26. THINK MODULARLYThursday, January 17, 13
  27. 27. LAYOUTS: THE FOUNDATIONThursday, January 17, 13
  28. 28. MODULES: THE BUILDING BLOCKSThursday, January 17, 13
  29. 29. Thursday, January 17, 13
  30. 30. Thursday, January 17, 13
  31. 31. Thursday, January 17, 13
  32. 32. Thursday, January 17, 13
  33. 33. MOMMY, WHERE DO MODULES COME FROM?Thursday, January 17, 13
  34. 34. Where User Needs and Business Requirements Intersect PROJECT DEFINITIONThursday, January 17, 13
  35. 35. R E Q U I R E M E N T S G AT H E R I N G : Define user needs & business goalsThursday, January 17, 13
  36. 36. REQUIREMENTS DOCUMENTThursday, January 17, 13
  37. 37. Requirements Inform Modules BUSINESS GOAL: MODULE: Display upcoming Events Module events to encourage users to visit the website frequently and stay informed.Thursday, January 17, 13
  38. 38. HTML Prototype • Show Interactions • Responsive • Low fidelity • HierarchyThursday, January 17, 13
  39. 39. TWITTER.GITHUB.COM/BOOTSTRAP/Thursday, January 17, 13
  40. 40. RESPONSIVEThursday, January 17, 13
  41. 41. LIST OF MODULES: Navigation Social Media Account Information News Events Did You Know? content Search Results Stock Ticker Presentations Workshops Current Outages etc, etcThursday, January 17, 13
  42. 42. MODULES PA G E T Y P E SThursday, January 17, 13
  43. 43. MODULES PA G E T Y P E SThursday, January 17, 13
  44. 44. MODULES PA G E T Y P E S MOBILE TA B L E TThursday, January 17, 13
  45. 45. SITE MAPThursday, January 17, 13
  46. 46. 3 Design Process AIGA ORLANDOThursday, January 17, 13
  47. 47. Thursday, January 17, 13
  48. 48. Style Tiles • Quick • Layout agnosticThursday, January 17, 13
  49. 49. STYLETIL.ESThursday, January 17, 13
  50. 50. Type System • Tailored to your content • Mobile first • typecast.comThursday, January 17, 13
  51. 51. TYPECAST.COMThursday, January 17, 13
  52. 52. Grid • Foundation • Future-thinking • Flexible • Eliminates indecisionThursday, January 17, 13
  53. 53. MODULARGRID.ORGThursday, January 17, 13
  54. 54. Page Title Page Title Page Title Grayboxes CENTERS & INSTITUTES NEWS & EVENTS • Basic sketches of JOURNALS RELATED LINKS JOURNALS CENTERS & INSTITUTES your layouts RELATED LINKS A B C • Ensure that your system will have Page Title Page Title Page Title range CENTERS & INSTITUTES NEWS & EVENTS RELATED LINKS JOURNALS CENTERS & INSTITUTES JOURNALS RELATED LINKS D E FThursday, January 17, 13
  55. 55. Design Blitz • Designing all the things!Thursday, January 17, 13
  56. 56. Home PageThursday, January 17, 13
  57. 57. Primary SubpageThursday, January 17, 13
  58. 58. Long-form ContentThursday, January 17, 13
  59. 59. Search ResultsThursday, January 17, 13
  60. 60. 4 Extensibility AIGA ORLANDOThursday, January 17, 13
  61. 61. ORDER & REPETITION Make deviations purposefulThursday, January 17, 13
  62. 62. DESIGN SYSTEM AT WORKThursday, January 17, 13
  63. 63. XThursday, January 17, 13
  64. 64. DESIGN SYSTEM AT WORKThursday, January 17, 13
  65. 65. Thursday, January 17, 13
  66. 66. Thursday, January 17, 13
  67. 67. PLAN FOR THINGS BREAKING DOWN They will.Thursday, January 17, 13
  68. 68. General Styles • Helps fill in the gaps that may not have been designedThursday, January 17, 13
  69. 69. PLAN FOR VARIATIONThursday, January 17, 13
  70. 70. PLAN FOR VARIATIONThursday, January 17, 13
  71. 71. PLAN FOR VARIATIONThursday, January 17, 13
  72. 72. 5 Putting the System to work AIGA ORLANDOThursday, January 17, 13
  73. 73. Template Build CMS Setup Client Gathers ContentThursday, January 17, 13
  74. 74. PORTING CONTENTThursday, January 17, 13
  75. 75. Bad Content EntryThursday, January 17, 13
  76. 76. Good Content EntryThursday, January 17, 13
  77. 77. THANK YOU! Yesenia Perez-Cruz Designer @YESENIAA Allison Wagner @ A L L I WA G N E R DeveloperThursday, January 17, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×