Implementing a Design Strategy: Part 2: Print to Web

iMPLeMentinG A deSiGn StRAteGy part 2: print to web ppa 2009 annual convention february 28, 2009 ppa 2009 annual convention 02.28

iMPLeMentinG A deSiGn StRAteGy part 2: print to web digital media properties + identity + structure + navigation + eXperience ppa 2009 annual convention 02.28

implementing a design str ategy: web diGitAL MediA PROPeRtieS: all website content should be searchable n customizable n fleXible n eXpandable n ppa 2009 annual convention 02.28

implementing a design str ategy: web identity: it’s visual & eXperiential logo + typography + color + imagery ppa 2009 annual convention 02.28

implementing a design str ategy: web identity: rotating logos are so 1998 use the same logo as print n or a variation that is different only in its n orientation and size. typeface and color should match print. n taglines should be repeated as well. n ppa 2009 annual convention 02.28

implementing a design str ategy: web identity: LOGOtyPe Parents ppa 2009 annual convention 02.28

implementing a design str ategy: web identity: LOGOtyPe parents.com ppa 2009 annual convention 02.28

implementing a design str ategy: web identity: sans-serif fonts rules use web standard fonts for all type. n eXceptions would be the logotype and global n navigation to enhance brand. format type properly with css measurements n of ems and %. piXels are not the best options as they are not resizable in internet eXplorer. ppa 2009 annual convention 02.28

implementing a design str ategy: web identity: tyPOGRAPHy Wondertime ppa 2009 annual convention 02.28

implementing a design str ategy: web identity: tyPOGRAPHy wondertime.com ppa 2009 annual convention 02.28

implementing a design str ategy: web identity: web colors are free sticK to a defined color palette. n use color to communicate an identity n and to organize information. n ppa 2009 annual convention 02.28

implementing a design str ategy: web identity: COLOR Cookie ppa 2009 annual convention 02.28

implementing a design str ategy: web identity: COLOR cookiemag.com ppa 2009 annual convention 02.28

implementing a design str ategy: web identity: images are not free the way you worK with imagery says as much n about your visual identity as your use of type and color. be careful of overusing stocK. it’s more n visible online than in print. be consistent. n ppa 2009 annual convention 02.28

implementing a design str ategy: web identity: iMAGeRy Wondertime ppa 2009 annual convention 02.28

implementing a design str ategy: web identity: iMAGeRy wondertime.com ppa 2009 annual convention 02.28

implementing a design str ategy: web StRUCtURe: build a sound construction information architecture + grid ppa 2009 annual convention 02.28

implementing a design str ategy: web StRUCtURe: information architecture organize the content of your website n according to user needs not the organization of your print publication. most print publications are organize the same n way. toc, feature articles, columns, departments, letters, marKetplace, etc. users tend to looK for topics, themes, n resources, features. ppa 2009 annual convention 02.28

implementing a design str ategy: web StRUCtUReS: i. A. print ppa 2009 annual convention 02.28

implementing a design str ategy: web StRUCtUReS: i. A. web ppa 2009 annual convention 02.28

implementing a design str ategy: web StRUCtUReS: i. A. Cookie ppa 2009 annual convention 02.28

implementing a design str ategy: web StRUCtUReS: i. A. cookiemag.com ppa 2009 annual convention 02.28

implementing a design str ategy: web StRUCtUReS: i. A. Parents ppa 2009 annual convention 02.28

implementing a design str ategy: web StRUCtUReS: i. A. parents.com ppa 2009 annual convention 02.28

implementing a design str ategy: web StRUCtURe: grids… use ‘em a grid is a grid no matter if its in print or on the n screen. it helps create hierarchy and organization n throughout the website. the grid should be fleXible enough to be used n with all the different sections of your website. ppa 2009 annual convention 02.28

implementing a design str ategy: web StRUCtUReS: GRid Family Fun ppa 2009 annual convention 02.28

implementing a design str ategy: web StRUCtUReS: GRid familyfun.com ppa 2009 annual convention 02.28

implementing a design str ategy: web nAViGAtiOn: clicK me, clicK me the simple test + types + visual clues + conventions ppa 2009 annual convention 02.28

implementing a design str ategy: web nAViGAtiOn: the simple test where am i n what’s here n where can i go n where have i been n ppa 2009 annual convention 02.28

implementing a design str ategy: web nAViGAtiOn: tyPeS njfamily.com ppa 2009 annual convention 02.28

implementing a design str ategy: web nAViGAtiOn types of type global. clearly define the global navigation to n get users to the main sections of your website no matter where they enter the website. local. contains linKs to content relevant to n the section. conteXtual. these are embedded in the content n of the page. linK from descriptive words and phrases not the ubiQuitous “clicK here.” ppa 2009 annual convention 02.28

implementing a design str ategy: web nAViGAtiOn: tyPeS wondertime.com ppa 2009 annual convention 02.28

implementing a design str ategy: web nAViGAtiOn: how about a visual clue mystery. navigation shouldn’t be: hidden, n difficult to find, or inappropriately playful. visual hierarchies. color, position, size, and n shape help users comprehend structure & maKe choices. labels. navigation should be clearly labeled. n ppa 2009 annual convention 02.28

implementing a design str ategy: web nAViGAtiOn: i need another visual clue icons. don’t always translate well across n cultures & eXperiences. add teXt labels to icons. options. too many or too few options can be n confusing. help. if you have to put a note such as “need n help navigating the site” you’ve failed as a web designer. ppa 2009 annual convention 02.28

implementing a design str ategy: web nAViGAtiOn: ViSUAL CLUeS ckamanagement.com ppa 2009 annual convention 02.28

implementing a design str ategy: web nAViGAtiOn: ViSUAL CLUeS sjb.com.au ppa 2009 annual convention 02.28

implementing a design str ategy: web nAViGAtiOn: ViSUAL CLUeS njfamily.com ppa 2009 annual convention 02.28

implementing a design str ategy: web nAViGAtiOn: ViSUAL CLUeS littlerockfamily.com ppa 2009 annual convention 02.28

implementing a design str ategy: web nAViGAtiOn: ViSUAL CLUeS craigslist.com ppa 2009 annual convention 02.28

implementing a design str ategy: web nAViGAtiOn: ViSUAL CLUeS teacherxpress.com ppa 2009 annual convention 02.28

implementing a design str ategy: web nAViGAtiOn: ViSUAL CLUeS projectmiso.com/mainnet.asp ppa 2009 annual convention 02.28

implementing a design str ategy: web nAViGAtiOn: conventions contact & about. users eXpect to see contact n and about us linKs. logo linK. the logo is the linK to the homepage. n search. search fields n ppa 2009 annual convention 02.28

implementing a design str ategy: web nAViGAtiOn: COnVentiOnS hvparent.com ppa 2009 annual convention 02.28

implementing a design str ategy: web nAViGAtiOn: COnVentiOnS cookie.com ppa 2009 annual convention 02.28

implementing a design str ategy: web nAViGAtiOn: COnVentiOnS carolinaparent.com ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: design for behavior assessment of time + scan / search + looK / watch + read / associate / share + respond / discuss / connect websites are active and interactive spaces. readers use them in different ways then a print publication. understanding reader behavior can direct the designed eXperience of an online publication. ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: assessment of time unliKe a print publication websites don’t n immediately provide visual clues to the scope of the website. the thicKness of a booK, the proportion of teXt & image, edit & ad are all clues to the reader about the assessment of time. ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: assessment of time home page. it should answer the Questions of n what is this website and what’s new. it’s the cover – grabs your attention it’s the table of contents – headlines & images, linK to feature articles it’s the indeX – searching for specific information ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: ASSeSSMent OF tiMe The Greatest of All Time: A Tribute to Muhammad Ali ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: ASSeSSMent OF tiMe Bhutan: AVisual Odyssey Across the Last Himalayan Kingdom ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: ASSeSSMent OF tiMe parents.com ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: ASSeSSMent OF tiMe njfamily.com ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: scan / search scanning. does the display teXt and image allow n for scanning? headlines should be: content specific. Keyword n searchable. linK ready. headlines are often taKen out of conteXt of the story and placed in a list of linKs. body teXt. get to the main point of the article in n the first paragraph. ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: SCAn/SeARCH parents.com ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: SCAn/SeARCH google.com/reader ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: looK / watch imagery. leave the large high resolution images n for your print publication. for the website use smaller singular images, photo galleries,and slideshows. slideshows and videos with audio immerse the n audience in the content in ways that print can- not. flicKr, slideshare, youtube. ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: LOOK/WAtCH memphisparent.com flickr.com ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: LOOK/WAtCH familyfun.com ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: LOOK/WAtCH youtube.com ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: read / associate / share linKing from within the content of articles n provides a seamless associative connection that replicates thinKing and conversation. conversation is about sharing information. n provide tools to allow users to share your n content. social booKmarKing, postings on facebooK. ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: ReAd/ ASSOCiAte/SHARe parents.com ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: ReAd/ ASSOCiAte/SHARe njfamily.com ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: ReAd/ ASSOCiAte/SHARe wilmingtonparent.com ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: respond / discuss / connect reader commenting, uploading photos, allow n users to become part of the community. allowing you audience to interact with the n content, not Just read it, establishes a connection between writer and audience. this is con- version. the community taKes ownership of the content. n facebooK pages for companies, twitter updates. ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: ReSPOnd/ diSCUSS/COnneCt northernnevadafamily.com ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: ReSPOnd/ diSCUSS/COnneCt twitter.com/indyschild ppa 2009 annual convention 02.28

implementing a design str ategy: web eXPeRienCe: ReSPOnd/ diSCUSS/COnneCt facebook.com search: little rock family ppa 2009 annual convention 02.28

implementing a design str ategy: web USABiLity Usability happens when content and design come together to provide a well-written, designed, and constr ucted website that provides users with the means to gain new knowledge and/or share their own knowledge. ppa 2009 annual convention 02.28

implementing a design str ategy: web LinKS http://delicious.com/chrisstcyr/ppa09 ppa 2009 annual convention 02.28

Implementing a Design Strategy: Part 2: Print to Web

0 comments

Notes on slide 1

1 Favorite