View
2.522
Download
1
Category
Preview:
DESCRIPTION
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?".
Citation preview
A I G A O R L A N D OD E S I G N I N G F O R C M S
Yesenia Perez-Cruz @ Y E S E N I A A
Designer
Allison Wagner @ A L L I WA G N E R Developer
Thursday, January 17, 13
CLIENTS
Thursday, 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”
- e v e r y c l i e n t , e v e r
Thursday, January 17, 13
CMS FTW OMG1
A I G A O R L A N D O
Thursday, January 17, 13
An interface toadd/update
content on the web
Thursday, 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 Everywhere
Thursday, January 17, 13
Thursday, January 17, 13
Home
Thursday, January 17, 13
News
Thursday, January 17, 13
List
Thursday, January 17, 13
RSS Feed
Thursday, January 17, 13
AVOIDINGBOTTLENECKS
Thursday, January 17, 13
KNOW YOURROLE
• Content Providers
• Content Publishers
• Super Editors
Thursday, January 17, 13
VERSIONCONTROL
Thursday, January 17, 13
INTO THE SUNSET
Thursday, January 17, 13
Design Systems2
A I G A O R L A N D O
Thursday, January 17, 13
YOU CAN’T DESIGN EVERY PAGE
Thursday, January 17, 13
SITE MAP
Thursday, January 17, 13
SITE MAP
Thursday, January 17, 13
THINK MODULARLY
Thursday, 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
PROJECT DEFINITIONWhere User Needs and Business Requirements Intersect
Thursday, 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 & business goals
Thursday, January 17, 13
REQUIREMENTS DOCUMENT
Thursday, January 17, 13
B U S I N E S S G O A L :
Display upcoming events to encourage users to visit the website frequently and stay informed.
M O D U L E :
Events Module
Requirements Inform Modules
Thursday, January 17, 13
HTMLPrototype
• Show Interactions
• Responsive
• Low !delity
• Hierarchy
Thursday, January 17, 13
TWITTER.GITHUB.COM/BOOTSTRAP/
Thursday, January 17, 13
RESPONSIVE
Thursday, January 17, 13
L I S T O F M O D U L E S :
NavigationSocial Media
Account InformationNews Events
Did You Know? contentSearch Results
Stock TickerPresentations
WorkshopsCurrent Outages
etc, etcThursday, January 17, 13
M O D U L E S PA G E T Y P E S
Thursday, January 17, 13
M O D U L E S PA G E T Y P E S
Thursday, January 17, 13
M O D U L E S PA G E T Y P E S
M O B I L E
TA B L E T
Thursday, January 17, 13
SITE MAP
Thursday, January 17, 13
Design Process3
A I G A O R L A N D O
Thursday, January 17, 13
Thursday, January 17, 13
Style Tiles
• Quick
• Layout agnostic
Thursday, January 17, 13
STYLETIL.ES
Thursday, January 17, 13
Type System
• Tailored to your content
• Mobile !rst
• typecast.com
Thursday, January 17, 13
TYPECAST.COM
Thursday, January 17, 13
Grid• Foundation
• Future-thinking
• Flexible
• Eliminates indecision
Thursday, January 17, 13
MODULARGRID.ORG
Thursday, January 17, 13
Grayboxes
• Basic sketches of your layouts
• Ensure that your system will have range
Page Title
NEWS & EVENTS
CENTERS & INSTITUTES
JOURNALS
RELATED LINKS
Page Title
CENTERS & INSTITUTESJOURNALSRELATED LINKS
Page Title
A B C
Page Title
NEWS & EVENTS
CENTERS & INSTITUTES
JOURNALS
RELATED LINKS
Page Title
CENTERS & INSTITUTESJOURNALSRELATED LINKS
Page Title
D E F
Thursday, January 17, 13
Design Blitz
• Designing all the things!
Thursday, January 17, 13
Home Page
Thursday, January 17, 13
Primary Subpage
Thursday, January 17, 13
Long-formContent
Thursday, January 17, 13
SearchResults
Thursday, January 17, 13
Extensibility 4
A I G A O R L A N D O
Thursday, January 17, 13
ORDER & REPETITIONMake deviations purposeful
Thursday, January 17, 13
DESIGN SYSTEM AT WORK
Thursday, January 17, 13
XThursday, January 17, 13
DESIGN SYSTEM AT WORK
Thursday, January 17, 13
Thursday, January 17, 13
Thursday, January 17, 13
PLAN FOR THINGS BREAKING DOWNThey will.
Thursday, January 17, 13
General Styles
• Helps !ll in the gaps that may not have been designed
Thursday, January 17, 13
PLAN FOR VARIATION
Thursday, January 17, 13
PLAN FOR VARIATION
Thursday, January 17, 13
PLAN FOR VARIATION
Thursday, January 17, 13
Putting the System to work5
A I G A O R L A N D O
Thursday, January 17, 13
Template BuildCMS Setup
Client Gathers Content
Thursday, January 17, 13
PORTINGCONTENT
Thursday, January 17, 13
BadContent Entry
Thursday, January 17, 13
GoodContent Entry
Thursday, January 17, 13
THANK YOU! Yesenia Perez-Cruz @ Y E S E N I A A
Designer
Allison Wagner @ A L L I WA G N E R Developer
Thursday, January 17, 13
Recommended