Download - Designing for CMS 2013

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


AN EVENT APARTThursday, January 17, 13

A LIST APARTThursday, 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


CMS FTW OMG1

A I G A O R L A N D O


An interface toadd/update

content on the web


VIA TRENT WALTON,HTTP://TRENTWALTON.COM/


http://trentwalton.com/

http://trentwalton.com/

BACK-END FRONT-ENDThursday, January 17, 13

P.O.D.E.Publish Once Distribute Everywhere


Home


News


List


RSS Feed


AVOIDINGBOTTLENECKS


KNOW YOURROLE

• Content Providers

• Content Publishers

• Super Editors


VERSIONCONTROL


INTO THE SUNSET


Design Systems2



YOU CAN’T DESIGN EVERY PAGE


SITE MAP


THINK MODULARLY


LAYOUTS: THE FOUNDATIONThursday, January 17, 13

MODULES: THE BUILDING BLOCKSThursday, January 17, 13

MOMMY, WHERE DO MODULES COME FROM?


PROJECT DEFINITIONWhere User Needs and Business Requirements Intersect


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


REQUIREMENTS DOCUMENT


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


HTMLPrototype

• Show Interactions

• Responsive

• Low !delity

• Hierarchy


TWITTER.GITHUB.COM/BOOTSTRAP/


RESPONSIVE


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


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


SITE MAP


Design Process3



Style Tiles

• Quick

• Layout agnostic


STYLETIL.ES


Type System

• Tailored to your content

• Mobile !rst

• typecast.com


TYPECAST.COM


Grid• Foundation

• Future-thinking

• Flexible

• Eliminates indecision


MODULARGRID.ORG


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


Design Blitz

• Designing all the things!


Home Page


Primary Subpage


Long-formContent


SearchResults


Extensibility 4



ORDER & REPETITIONMake deviations purposeful


DESIGN SYSTEM AT WORK


XThursday, January 17, 13

DESIGN SYSTEM AT WORK


PLAN FOR THINGS BREAKING DOWNThey will.


General Styles

• Helps !ll in the gaps that may not have been designed


PLAN FOR VARIATION


Putting the System to work5



Template BuildCMS Setup

Client Gathers Content


PORTINGCONTENT


BadContent Entry


GoodContent Entry


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


Download - Designing for CMS 2013

Top Related