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


implementing a design str ategy: web

diGitAL MediA
PROPeRtieS:
all website content should be
searchable
n

customizable
n

fleXible
n

eXpandable
n



identity:
it’s visual & eXperiential
logo + typography + color + imagery



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



identity: LOGOtyPe

Parents



identity: LOGOtyPe

parents.com



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.



identity: tyPOGRAPHy

Wondertime



identity: tyPOGRAPHy

wondertime.com



identity:
web colors are free
sticK to a defined color palette.
n

use color to communicate an identity
n

and to organize information.
n



identity: COLOR

Cookie



identity: COLOR

cookiemag.com



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



identity: iMAGeRy

Wondertime



identity: iMAGeRy

wondertime.com



StRUCtURe:
build a sound construction
information architecture + grid



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.



StRUCtUReS: i. A.

print



StRUCtUReS: i. A.

web



StRUCtUReS: i. A.

Cookie



StRUCtUReS: i. A.

cookiemag.com



StRUCtUReS: i. A.

Parents



StRUCtUReS: i. A.

parents.com



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.



StRUCtUReS: GRid

Family Fun



StRUCtUReS: GRid

familyfun.com



nAViGAtiOn:
clicK me, clicK me
the simple test + types +
visual clues + conventions



nAViGAtiOn:
the simple test
where am i
n

what’s here
n

where can i go
n

where have i been
n



nAViGAtiOn: tyPeS

njfamily.com



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.”



nAViGAtiOn: tyPeS

wondertime.com



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



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.



nAViGAtiOn: ViSUAL CLUeS

ckamanagement.com




sjb.com.au




njfamily.com




littlerockfamily.com




craigslist.com




teacherxpress.com




projectmiso.com/mainnet.asp



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



nAViGAtiOn: COnVentiOnS

hvparent.com




cookie.com




carolinaparent.com



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.



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.



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



eXPeRienCe: ASSeSSMent

OF tiMe

The Greatest of All Time: A
Tribute to Muhammad Ali




OF tiMe

Bhutan: AVisual Odyssey
Across the Last Himalayan
Kingdom




OF tiMe

parents.com




OF tiMe

njfamily.com



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.



eXPeRienCe: SCAn/SeARCH

parents.com



eXPeRienCe: SCAn/SeARCH

google.com/reader



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.



eXPeRienCe: LOOK/WAtCH

memphisparent.com
flickr.com




familyfun.com




youtube.com



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.



eXPeRienCe: ReAd/

ASSOCiAte/SHARe

parents.com



eXPeRienCe: ReAd/

ASSOCiAte/SHARe

njfamily.com



eXPeRienCe: ReAd/

ASSOCiAte/SHARe

wilmingtonparent.com



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 connec-
tion between writer and audience. this is con-
version.
the community taKes ownership of the content.
n

facebooK pages for companies, twitter updates.



eXPeRienCe: ReSPOnd/

diSCUSS/COnneCt

northernnevadafamily.com




diSCUSS/COnneCt

twitter.com/indyschild




diSCUSS/COnneCt

facebook.com
search: little rock family



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.



LinKS
http://delicious.com/chrisstcyr/ppa09


Implementing a Design Strategy: Part 2: Print to Web

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Implementing a Design Strategy: Part 2: Print to Web

Ähnlich wie Implementing a Design Strategy: Part 2: Print to Web (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Implementing a Design Strategy: Part 2: Print to Web