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