This document summarizes a presentation about designing content management systems (CMS). It discusses designing for extensibility, creating modular components, establishing style guides, and planning for variations and changes over time to allow clients to easily update content. The goal is to empower clients to manage their websites independently through a consistent and adaptable design system.

1. DESIGNING FOR CMS
AIGA ORLANDO
Yesenia Perez-Cruz @YESENIAA
Designer
Allison Wagner @ A L L I WA G N E R
Developer
Thursday, January 17, 13

2. CLIENTS
Thursday, January 17, 13

3. AN EVENT APART
Thursday, January 17, 13

4. A LIST APART
Thursday, January 17, 13

5. Thursday, January 17, 13

6. Thursday, January 17, 13

7. “I want to be able to
update the site myself”
- every client, ever
Thursday, January 17, 13

8. 1
CMS FTW OMG
AIGA ORLANDO
Thursday, January 17, 13

9. An interface to
add/update
content on the web
Thursday, January 17, 13

10. VIA TRENT WALTON,HTTP://TRENTWALTON.COM/
Thursday, January 17, 13

11. BACK-END FRONT-END
Thursday, January 17, 13

12. P.O.D.E.
Publish Once Distribute Everywhere
Thursday, January 17, 13

13. Thursday, January 17, 13

14. Home
Thursday, January 17, 13

15. News
Thursday, January 17, 13

16. List
Thursday, January 17, 13

17. RSS Feed
Thursday, January 17, 13

18. AVOIDING
BOTTLENECKS
Thursday, January 17, 13

19. KNOW YOUR •
•
Content Providers
Content Publishers
ROLE • Super Editors
Thursday, January 17, 13

20. VERSION
CONTROL
Thursday, January 17, 13

21. INTO THE
SUNSET
Thursday, January 17, 13

22. 2
Design Systems
AIGA ORLANDO
Thursday, January 17, 13

23. YOU CAN’T DESIGN
EVERY PAGE
Thursday, January 17, 13

24. SITE MAP
Thursday, January 17, 13

25. SITE MAP
Thursday, January 17, 13

26. THINK MODULARLY
Thursday, January 17, 13

27. LAYOUTS: THE FOUNDATION
Thursday, January 17, 13

28. MODULES: THE BUILDING BLOCKS
Thursday, January 17, 13

29. Thursday, January 17, 13

30. Thursday, January 17, 13

31. Thursday, January 17, 13

32. Thursday, January 17, 13

33. MOMMY, WHERE DO
MODULES COME FROM?
Thursday, January 17, 13

34. Where User Needs and Business Requirements Intersect
PROJECT DEFINITION
Thursday, January 17, 13

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 goals
Thursday, January 17, 13

36. REQUIREMENTS
DOCUMENT
Thursday, January 17, 13

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. HTML
Prototype
• Show
Interactions
• Responsive
• Low fidelity
• Hierarchy
Thursday, January 17, 13

39. TWITTER.GITHUB.COM/BOOTSTRAP/
Thursday, January 17, 13

40. RESPONSIVE
Thursday, January 17, 13

41. LIST OF MODULES:
Navigation
Social Media
Account Information
News
Events
Did You Know? content
Search Results
Stock Ticker
Presentations
Workshops
Current Outages
etc, etc
Thursday, January 17, 13

42. MODULES PA G E T Y P E S
Thursday, January 17, 13

43. MODULES PA G E T Y P E S
Thursday, January 17, 13

44. MODULES PA G E T Y P E S
MOBILE
TA B L E T
Thursday, January 17, 13

45. SITE MAP
Thursday, January 17, 13

46. 3
Design Process
AIGA ORLANDO
Thursday, January 17, 13

47. Thursday, January 17, 13

48. Style Tiles
• Quick
• Layout agnostic
Thursday, January 17, 13

49. STYLETIL.ES
Thursday, January 17, 13

50. Type System
• Tailored to your
content
• Mobile first
• typecast.com
Thursday, January 17, 13

51. TYPECAST.COM
Thursday, January 17, 13

52. Grid
• Foundation
• Future-thinking
• Flexible
• Eliminates
indecision
Thursday, January 17, 13

53. MODULARGRID.ORG
Thursday, January 17, 13

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 F
Thursday, January 17, 13

55. Design Blitz
• Designing all
the things!
Thursday, January 17, 13

56. Home Page
Thursday, January 17, 13

57. Primary
Subpage
Thursday, January 17, 13

58. Long-form
Content
Thursday, January 17, 13

59. Search
Results
Thursday, January 17, 13

60. 4
Extensibility
AIGA ORLANDO
Thursday, January 17, 13

61. ORDER & REPETITION
Make deviations purposeful
Thursday, January 17, 13

62. DESIGN SYSTEM AT WORK
Thursday, January 17, 13

63. X
Thursday, January 17, 13

64. DESIGN SYSTEM AT WORK
Thursday, January 17, 13

65. Thursday, January 17, 13

66. Thursday, January 17, 13

67. PLAN FOR THINGS
BREAKING DOWN
They will.
Thursday, January 17, 13

68. General Styles
• Helps fill in the
gaps that may
not have been
designed
Thursday, January 17, 13

69. PLAN FOR VARIATION
Thursday, January 17, 13

70. PLAN FOR VARIATION
Thursday, January 17, 13

71. PLAN FOR VARIATION
Thursday, January 17, 13

72. 5
Putting the System to work
AIGA ORLANDO
Thursday, January 17, 13

73. Template Build
CMS Setup
Client Gathers Content
Thursday, January 17, 13

74. PORTING
CONTENT
Thursday, January 17, 13

75. Bad
Content
Entry
Thursday, January 17, 13

76. Good
Content
Entry
Thursday, January 17, 13

77. THANK YOU! Yesenia Perez-Cruz
Designer
@YESENIAA
Allison Wagner @ A L L I WA G N E R
Developer
Thursday, January 17, 13