AIGA: Designing for CMS

AIGA Philadelphia

DESIGNING FOR CMSPENCIL TO PIXEL

Tuesday, November 15, 2011

WHO IS HAPPY COG?Education





WHO IS HAPPY COG?Collaborative Studio


2

DEMYSTIFYING THE CMS


“

—KAREN MCGRANE, CONTENT STRATEGIST

I know the CMS is this black box you'd really rather not look into.


VITSOE 606

Dieter Rams, 1960 http://www.vitsoe.com/en/us


http://www.vitsoe.com/en/us

http://www.vitsoe.com/en/us

ID CHAIR CONCEPT

Vitra, 2011 http://www.vitra.com/en-no/office/products/id-chair-concept/overview/


http://www.vitra.com/en-no/office/products/id-chair-concept/overview/




“

—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/




DESIGNING FOR A CITY’S WORTH OF CONTENT



WILLIAM PENN’S PLAN FOR PHILADELPHIA

1683


1755MANHATTAN2011 http://www.flickr.com/photos/thisisbossi/6200063720/sizes/l/in/photostream/

EXTINSIBLE PHILADELPHIA


http://www.flickr.com/photos/thisisbossi/6200063720/sizes/l/in/photostream/









“

—JEFFREY ZELDMAN

Content precedes design. Design in the absence of content is not design, it's decoration.

http://twitter.com/#!/zeldman/status/804159148




JUST SAY “NO”


3

WHAT IS CONTENT?


CONTENT IS ABOUTPEOPLE


TEXT




CONTENTneeds to be managed


THE OLD WAY: STATIC





CMS FTW!








is it always the answer?CHOOSING A CMS


“—EVERY CLIENT, EVER

I want to be able to update the site myself.


‣ No coding experience required

‣ Streamlines the editorial process

‣ Edit/publish from anywhere

‣ Decrease site maintenance costs

Benefits


TEXT


4Our Process

PROJECTDEFINITION

INFORMATIONARCHITECTURE

GRAPHICDESIGN DEVELOPMENT


Project Definition

1. Stakeholder Interviews

2. Comparative Analysis & Benchmarking

3. Kickoff & Workshop

4. Business Requirements

5. Communications Brief


MOOD BOARD

Style and tone for a healthcare website


WIREFRAMESTuesday, November 15, 2011



5

SYSTEM PLANNING


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




‣ Full-Column “Hero”

‣ Primary Events

‣ Secondary News

‣ Secondary Events

‣ Donate Module

‣ Related Links

TEMPLATE A



‣ Primary Events

‣ Secondary News


‣ Donate Module

‣ Related Links

TEMPLATE A



‣ Primary Events

‣ Secondary News


‣ Donate Module

‣ Related Links

TEMPLATE A



‣ Primary Events

‣ Secondary News


‣ Donate Module

‣ Related Links

TEMPLATE A



‣ Primary Events

‣ Secondary News


‣ Donate Module

‣ Related Links

TEMPLATE A



‣ Primary Events

‣ Secondary News


‣ Donate Module

‣ Related Links

TEMPLATE A



‣ Primary Events

‣ Secondary News


‣ Donate Module

‣ Related Links

TEMPLATE A


Page Title

NEWS & EVENTS

CENTERS & INSTITUTES

JOURNALS

RELATED LINKS

Page Title

CENTERS & INSTITUTESJOURNALSRELATED LINKS

Page Title

A B C

Page Title

NEWS & EVENTS


JOURNALS

RELATED LINKS

Page Title

CENTERS & INSTITUTESJOURNALSRELATED LINKS

Page Title

D E F


REVISIT THE SITEMAPTuesday, November 15, 2011

REVISIT THE SITEMAP

A


REVISIT THE SITEMAP

A B


REVISIT THE SITEMAP

A BC


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


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
















































THAT’S A LOT OF PATTERNS!Tuesday, November 15, 2011

Page Title

NEWS & EVENTS


JOURNALS

RELATED LINKS

PLAN YOUR GRIDTuesday, November 15, 2011

6

GRID SYSTEMS


WILLIAM PENN’S PLAN FOR PHILADELPHIA

1683


NATIONAL PARK SERVICE UNIGRID

1977


NATIONAL PARK SERVICE FOLD-OUTS

http://www.peterme.com/images/nps_mesa_dv_sidebyside.jpg






“

—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




960: LOVED & LOATHEDTuesday, November 15, 2011

MODULAR TYPE SCALES

http://modularscale.com/




MODULAR TYPE SCALES





MODULAR TYPE SCALES





MODULAR TYPE SCALES





MODULAR TYPE SCALES





MODULAR TYPE SCALES





MODULAR GRID

http://modulargrid.org/#app




“

—SOME DESIGNER, RIGHT NOW, NOT THINKING ABOUT THE CMS

It’s just a few pages. We’ll be fine withouta grid.


CMS WITHOUT A FLEXIBLE GRID

How pages are made.


Think modularly.DON’T LACK DISCIPLINE


7

CONTENT PATTERNS




CONTENT LEADS DESIGN





EXTENSIBILITYPlanning for the Future!


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/







ZAPPOSTuesday, November 15, 2011




EXTENDING THE BRANDTuesday, November 15, 2011

WHAT IF IT BREAKS?!

















8General Styles

ALL THE TAGS




9

DEVELOPMENT


AUDIT THE BLITZ


HANDOFF MEETING


PSDS TO TEMPLATES


ALL THE MODULESTuesday, November 15, 2011

ALL THE MODULESTuesday, November 15, 2011

HTML

CSS


CMS INTEGRATION



‣ Title

‣ Image

‣ Date

‣ Location

‣ Time

‣ Ticket price

‣ Copy


‣ Title: {title}

‣ Image: {event-feature-image}

‣ Date: {event-date}

‣ Location {event-location}

‣ Time: {event-time}

‣ Ticket price: {event-price}

‣ Copy: {event-body}


{title}

{event-feature-image}

{event-location}


{event-date}

{event-time}

{event-body}

{event-price}


CREATE EACH PAGE IN THE SITE MAPTuesday, November 15, 2011

CONTENT ENTRY


LAUNCH!


10Takeaways

1. Don’t be afraid of Content Management

Systems!

2. Plan your system before diving into

Photoshop

3. Think modularly

4. Look ahead


THANK YOU!‣ Michael Johnson (@mleland), Senior Designer

‣ Yesenia Perez-Cruz (@yeseniaa), Designer

‣ Allison Wagner (@alliwagner), Developer


QUESTIONS?


Technology

AIGA: Designing for CMS