Post on 09-May-2015
AIGA Philadelphia
DESIGNING FOR CMSPENCIL TO PIXEL
Tuesday, November 15, 2011
WHO IS HAPPY COG?Education
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
WHO IS HAPPY COG?Collaborative Studio
Tuesday, November 15, 2011
2
DEMYSTIFYING THE CMS
Tuesday, November 15, 2011
“
—KAREN MCGRANE, CONTENT STRATEGIST
I know the CMS is this black box you'd really rather not look into.
Tuesday, November 15, 2011
VITSOE 606
Dieter Rams, 1960 http://www.vitsoe.com/en/us
Tuesday, November 15, 2011
ID CHAIR CONCEPT
Vitra, 2011 http://www.vitra.com/en-no/office/products/id-chair-concept/overview/
Tuesday, November 15, 2011
“
—JENNIFER MORLA, 2010 AIGA MEDALIST
Design is like architecture; we structure space to facilitate the experience. Are you creating a minimal, modernist masterpiece, or a dense maze of information?
http://morladesign.com/designisms/
Tuesday, November 15, 2011
DESIGNING FOR A CITY’S WORTH OF CONTENT
Tuesday, November 15, 2011
Tuesday, November 15, 2011
WILLIAM PENN’S PLAN FOR PHILADELPHIA
1683
Tuesday, November 15, 2011
1755MANHATTAN2011 http://www.flickr.com/photos/thisisbossi/6200063720/sizes/l/in/photostream/
EXTINSIBLE PHILADELPHIA
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
“
—JEFFREY ZELDMAN
Content precedes design. Design in the absence of content is not design, it's decoration.
http://twitter.com/#!/zeldman/status/804159148
Tuesday, November 15, 2011
JUST SAY “NO”
Tuesday, November 15, 2011
3
WHAT IS CONTENT?
Tuesday, November 15, 2011
CONTENT IS ABOUTPEOPLE
Tuesday, November 15, 2011
TEXT
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
CONTENTneeds to be managed
Tuesday, November 15, 2011
THE OLD WAY: STATIC
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
CMS FTW!
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
is it always the answer?CHOOSING A CMS
Tuesday, November 15, 2011
“—EVERY CLIENT, EVER
I want to be able to update the site myself.
Tuesday, November 15, 2011
‣ No coding experience required
‣ Streamlines the editorial process
‣ Edit/publish from anywhere
‣ Decrease site maintenance costs
Benefits
Tuesday, November 15, 2011
TEXT
Tuesday, November 15, 2011
4Our Process
PROJECTDEFINITION
INFORMATIONARCHITECTURE
GRAPHICDESIGN DEVELOPMENT
Tuesday, November 15, 2011
Project Definition
1. Stakeholder Interviews
2. Comparative Analysis & Benchmarking
3. Kickoff & Workshop
4. Business Requirements
5. Communications Brief
Tuesday, November 15, 2011
MOOD BOARD
Style and tone for a healthcare website
Tuesday, November 15, 2011
WIREFRAMESTuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
5
SYSTEM PLANNING
Tuesday, November 15, 2011
SITE MAPTuesday, November 15, 2011
“VIP” PAGESTuesday, November 15, 2011
WIREFRAMESTuesday, November 15, 2011
LET’S SKETCH!Tuesday, November 15, 2011
LET’S SKETCH!Tuesday, November 15, 2011
THE GRAYBOX PLAN
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
‣ Full-Column “Hero”
‣ Primary Events
‣ Secondary News
‣ Secondary Events
‣ Donate Module
‣ Related Links
TEMPLATE A
Tuesday, November 15, 2011
‣ Full-Column “Hero”
‣ Primary Events
‣ Secondary News
‣ Secondary Events
‣ Donate Module
‣ Related Links
TEMPLATE A
Tuesday, November 15, 2011
‣ Full-Column “Hero”
‣ Primary Events
‣ Secondary News
‣ Secondary Events
‣ Donate Module
‣ Related Links
TEMPLATE A
Tuesday, November 15, 2011
‣ Full-Column “Hero”
‣ Primary Events
‣ Secondary News
‣ Secondary Events
‣ Donate Module
‣ Related Links
TEMPLATE A
Tuesday, November 15, 2011
‣ Full-Column “Hero”
‣ Primary Events
‣ Secondary News
‣ Secondary Events
‣ Donate Module
‣ Related Links
TEMPLATE A
Tuesday, November 15, 2011
‣ Full-Column “Hero”
‣ Primary Events
‣ Secondary News
‣ Secondary Events
‣ Donate Module
‣ Related Links
TEMPLATE A
Tuesday, November 15, 2011
‣ Full-Column “Hero”
‣ Primary Events
‣ Secondary News
‣ Secondary Events
‣ Donate Module
‣ Related Links
TEMPLATE A
Tuesday, November 15, 2011
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
Tuesday, November 15, 2011
REVISIT THE SITEMAPTuesday, November 15, 2011
REVISIT THE SITEMAP
A
Tuesday, November 15, 2011
REVISIT THE SITEMAP
A B
Tuesday, November 15, 2011
REVISIT THE SITEMAP
A BC
Tuesday, November 15, 2011
REVISIT THE SITEMAP
A BC
D
E
FA A B
B BB B
FB
B
B
C
C
C
C
C
D
D
D
F F
C
C C
C
B
B
B
B
B
A A
D
D
F F
D
D
D
D
F FB
B
B
B
B
C
C
C
C
C
C
C
C
C
C
C
C
C
C
D
D
Tuesday, November 15, 2011
PRIMARY NEWSSECONDARY NEWSPRIMARY EVENTS
SECONDARY EVENTSPHOTO SLIDESHOW
RELATED LINKSRECENT SCHOLARSHIP
PRIMARY VIDEOSECONDARY VIDEO
RECENT TWEETSFOOTER SUITCASE
LONG-FORM ARTICLEDONATE - HORIZONTAL
DONATE - VERTICALRECENT YOUTUBE VIDEOS
CALENDAR DATE SWITCHER
FROM THE BOOKSTORELARGE PROMO AREASMALL PROMO AREA
PRIMARY NEWSSECONDARY NEWSPRIMARY EVENTS
SECONDARY EVENTSPHOTO SLIDESHOW
RELATED LINKSRECENT SCHOLARSHIP
PRIMARY VIDEOSECONDARY VIDEO
RECENT TWEETSFOOTER SUITCASE
LONG-FORM ARTICLEDONATE - HORIZONTAL
DONATE - VERTICALRECENT YOUTUBE VIDEOS
CALENDAR DATE SWITCHER
FROM THE BOOKSTORELARGE PROMO AREASMALL PROMO AREA
PRIMARY NEWSSECONDARY NEWSPRIMARY EVENTS
SECONDARY EVENTSPHOTO SLIDESHOW
RELATED LINKSRECENT SCHOLARSHIP
PRIMARY VIDEOSECONDARY VIDEO
RECENT TWEETSFOOTER SUITCASE
LONG-FORM ARTICLEDONATE - HORIZONTAL
DONATE - VERTICALRECENT YOUTUBE VIDEOS
CALENDAR DATE SWITCHER
FROM THE BOOKSTORELARGE PROMO AREASMALL PROMO AREA
Tuesday, November 15, 2011
PRIMARY NEWSSECONDARY NEWSPRIMARY EVENTS
SECONDARY EVENTSPHOTO SLIDESHOW
RELATED LINKSRECENT SCHOLARSHIP
PRIMARY VIDEOSECONDARY VIDEO
RECENT TWEETSFOOTER SUITCASE
LONG-FORM ARTICLEDONATE - HORIZONTAL
DONATE - VERTICALRECENT YOUTUBE VIDEOS
CALENDAR DATE SWITCHER
FROM THE BOOKSTORELARGE PROMO AREASMALL PROMO AREA
PRIMARY NEWSSECONDARY NEWSPRIMARY EVENTS
SECONDARY EVENTSPHOTO SLIDESHOW
RELATED LINKSRECENT SCHOLARSHIP
PRIMARY VIDEOSECONDARY VIDEO
RECENT TWEETSFOOTER SUITCASE
LONG-FORM ARTICLEDONATE - HORIZONTAL
DONATE - VERTICALRECENT YOUTUBE VIDEOS
CALENDAR DATE SWITCHER
FROM THE BOOKSTORELARGE PROMO AREASMALL PROMO AREA
PRIMARY NEWSSECONDARY NEWSPRIMARY EVENTS
SECONDARY EVENTSPHOTO SLIDESHOW
RELATED LINKSRECENT SCHOLARSHIP
PRIMARY VIDEOSECONDARY VIDEO
RECENT TWEETSFOOTER SUITCASE
LONG-FORM ARTICLEDONATE - HORIZONTAL
DONATE - VERTICALRECENT YOUTUBE VIDEOS
CALENDAR DATE SWITCHER
FROM THE BOOKSTORELARGE PROMO AREASMALL PROMO AREA
Tuesday, November 15, 2011
THAT’S A LOT OF PATTERNS!Tuesday, November 15, 2011
Page Title
NEWS & EVENTS
CENTERS & INSTITUTES
JOURNALS
RELATED LINKS
PLAN YOUR GRIDTuesday, November 15, 2011
6
GRID SYSTEMS
Tuesday, November 15, 2011
WILLIAM PENN’S PLAN FOR PHILADELPHIA
1683
Tuesday, November 15, 2011
NATIONAL PARK SERVICE UNIGRID
1977
Tuesday, November 15, 2011
NATIONAL PARK SERVICE FOLD-OUTS
http://www.peterme.com/images/nps_mesa_dv_sidebyside.jpg
Tuesday, November 15, 2011
“
—MASSIMO VIGNELLI
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.
http://www.vignelli.com/canon.pdf
Tuesday, November 15, 2011
960: LOVED & LOATHEDTuesday, November 15, 2011
MODULAR TYPE SCALES
http://modularscale.com/
Tuesday, November 15, 2011
MODULAR TYPE SCALES
http://modularscale.com/
Tuesday, November 15, 2011
MODULAR TYPE SCALES
http://modularscale.com/
Tuesday, November 15, 2011
MODULAR TYPE SCALES
http://modularscale.com/
Tuesday, November 15, 2011
MODULAR TYPE SCALES
http://modularscale.com/
Tuesday, November 15, 2011
MODULAR TYPE SCALES
http://modularscale.com/
Tuesday, November 15, 2011
MODULAR GRID
http://modulargrid.org/#app
Tuesday, November 15, 2011
“
—SOME DESIGNER, RIGHT NOW, NOT THINKING ABOUT THE CMS
It’s just a few pages. We’ll be fine withouta grid.
Tuesday, November 15, 2011
CMS WITHOUT A FLEXIBLE GRID
How pages are made.
Tuesday, November 15, 2011
Think modularly.DON’T LACK DISCIPLINE
Tuesday, November 15, 2011
7
CONTENT PATTERNS
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
CONTENT LEADS DESIGN
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
EXTENSIBILITYPlanning for the Future!
Tuesday, November 15, 2011
PATTERN LIBRARYTuesday, November 15, 2011
PATTERN LIBRARYTuesday, November 15, 2011
ID CHAIR CONCEPT
Vitra, 2011 http://www.vitra.com/en-no/office/products/id-chair-concept/overview/
Tuesday, November 15, 2011
Tuesday, November 15, 2011
ZAPPOSTuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
EXTENDING THE BRANDTuesday, November 15, 2011
WHAT IF IT BREAKS?!
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
8General Styles
ALL THE TAGS
Tuesday, November 15, 2011
Tuesday, November 15, 2011
Tuesday, November 15, 2011
9
DEVELOPMENT
Tuesday, November 15, 2011
AUDIT THE BLITZ
Tuesday, November 15, 2011
HANDOFF MEETING
Tuesday, November 15, 2011
PSDS TO TEMPLATES
Tuesday, November 15, 2011
ALL THE MODULESTuesday, November 15, 2011
ALL THE MODULESTuesday, November 15, 2011
HTML
CSS
Tuesday, November 15, 2011
CMS INTEGRATION
Tuesday, November 15, 2011
Tuesday, November 15, 2011
‣ Title
‣ Image
‣ Date
‣ Location
‣ Time
‣ Ticket price
‣ Copy
Tuesday, November 15, 2011
‣ 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
{title}
{event-feature-image}
{event-location}
Tuesday, November 15, 2011
{event-date}
{event-time}
{event-body}
{event-price}
Tuesday, November 15, 2011
CREATE EACH PAGE IN THE SITE MAPTuesday, November 15, 2011
CONTENT ENTRY
Tuesday, November 15, 2011
LAUNCH!
Tuesday, November 15, 2011
10Takeaways
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
THANK YOU!‣ Michael Johnson (@mleland), Senior Designer
‣ Yesenia Perez-Cruz (@yeseniaa), Designer
‣ Allison Wagner (@alliwagner), Developer
Tuesday, November 15, 2011
QUESTIONS?
Tuesday, November 15, 2011