AIGA Pencil to Pixel Presents: Happy Cog, Bringing Your Clients Online

BRINGING YOUR CLIENTS ONLINE

DESIGN SYSTEMS
AIGA Philadelphia

WHO IS HAPPY COG?
Innovation & Education

WHO IS HAPPY COG?
Collaborative Studio

3
Design Systems

TYPOGRAPHY
HIERARCHY
GRIDS
INTERACTION

TYPOGRAPHY
Information Architecture

What is a wireframe?

Wireframes provide a presentation of the hierarchy of
items present on the page, and an overview of what will
and won't have persistence throughout the site, when it
will persist, and why.
Wireframes are not meant to provide any strict guidelines
for visual design, and a visual designer will significantly
deviate from the visual appearance and layout when
executing them.

HIERARCHY
+
PERSISTENCE

NOT
VISUAL DESIGN

“
“
Honestly, I'm shocked that in 2010 I'm still
coming across 'web designers' who can't code their
own designs. No excuse.”
—ELLIOT JAY STOCKS, DESIGNER

“ 'UX Professional' is a bullshit job title. It's just a
way to over-charge naive clients. All web
designers should be UX pros”
—RYAN CARSON, ENTREPRENEUR

“SWISS” DESIGN
Practicing neutrality

BUT THIS LOOKS AWFUL
In more ways than one...

“ 95% of the information on the web is written
language. It is only logical to say that a web
designer should get good training in the main
discipline of shaping written information, in
other words: Typography.”

—INFORMATION ARCHITECTS, INC.

General Styles,
Reporting for Duty

RELATIVE READABILITY
http://flic.kr/p/5vqVe2

Beyond The Valley of
Trebuchet MS

PHOTOSHOP VS. THE BROWSER
Things are not as they seem

WEBDESIGN-L
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

CODE STYLE
http://www.codestyle.org/css/font-family

FONT STACKS, IMAGES, SIFR, CUFON, @FONT-FACE, TYPEKIT
You DO have options

‣ Font Stacks

‣ Image Replacement

‣ Font Stacks


‣ sIFR

‣ Font Stacks ‣ Cufon


‣ sIFR


‣ Image Replacement ‣ @font-face

‣ sIFR


‣ Image Replacement ‣ @font-face

‣ sIFR ‣ Typekit

KEEP IT REAL
Get your designs ready for development

BOUNDARY BOXES
Dictate your widths

HIERARCHY

Topic Title Topic Title Topic Title Topic Title Topic Title

Topic statement would
go here. Topic
statement
would go here.

Teaser

Teaser

Teaser Full Length Story Title
Photograph browser/video/audio player

Related Department
Related Ofﬁce Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Fusce tristique. Lorem ipsum
dolor sit amet,.
Read the Full Story

Upcoming Events University News
MONTH DATE, YYYY Teaser Title
Posted on mm/dd/yy
Event Title at hh:mm, PM
Lorem ipsum dolor sit amet
h:mm TT - h:mm TT
Location
Teaser Title
Event Title at hh:mm, PM

cue, ShareThis and Inline Tag Editing
Inline Tag Editing
10
dministrators ("rescue Allows site administrators (or entry
promote diary entires across Tag(s): [Tag] authors) to add or remove tags while
[Tag]
s network. [Tag]
browsing entries.
[Tag]
Clicks on Rescue Icon 9. Admin Clicks on Add Tag Cue
9 + Add Tag
t representative of final design. 10. Remove Tag Icon
s Network Sites Eliminates assignment of a tag to an article.
10a. Confirmation message for tag removal.
cks on unchecked box beside
choice to rescue to that site. 11. Tag Input Field
Rescued 12. Add Tag Button
has already been rescued to that [Tag]
13. Cancel Cue
ked and the label for the checkbox [Tag] 12
ess prominent. Restores interface to initial state.
11 Health care Add Tag Cancel
n and Cue 14. New Tag
13 Add to stream and favorited status should be
checked and indicated appropriately.
his 15. Tag Input Field Persists
The tag input field will persist to allow
sitors to share content via adminstrator to add multiple tags. When
administrator has collapsed the article, the next
mail/aim or online sharing Tag(s): [Tag]
time the article is opened the interface is restored
[Tag]
llows the ShareThis icon and to the initial state.
[Tag]
delines found at http:// [Tag]
m/. 14 Health care

Add another Add Tag Cancel
ks on ShareThis Icon
ptions 15
r to share this article via traditional
cell phone text message. Interface
s within this pop-up.
Close
10a
ptions Are you sure you want to
to share this article via online
remove this tag?
es including Digg, Twitter and
No, Cancel or Yes, Remove
ce for each opens within this pop-

n and Cue

MAINTAIN?
In more ways than one...

SOURCE ORDER
Top to Bottom != Order of Importance

FROM DESIGN TO DEVELOPMENT
Print lives!

“ In the same way an author makes an outline
before writing a book, [the grey box] serves as my
visual outline before creating a design.”
—JASON SANTA MARIA, Grey Box Methodology

GRIDS

Primary messaging explaining what the organization does.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tristique. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Fusce tristique. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Fusce tristique. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tristique. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tristique. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Fusce tristique. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Fusce tristique. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tristique. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tristique.

Suggested topic Search

Primary messaging explaining
Logo/branding what the organization does.
Main Menu Item Story/News For Primary Message
Main Menu Item mm/dd/yy at hh:mm, PM
Main Menu Item Lorem ipsum dolor sit amet,
Main Menu Item consectetuer adipiscing elit.
Main Menu Item Fusce tristique. Cras ipsum urna.

Photograph description Photograph description Photograph description

Heading 1 Heading 2 Heading 3
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,

Main Menu Item mm/dd/yy at hh:mm, PM
Main Menu Item Lorem ipsum dolor sit amet,
Main Menu Item consectetuer adipiscing elit.
Main Menu Item Fusce tristique. Cras ipsum urna.

Photograph description Photograph description Photograph description

consectetuer adipiscing elit. consectetuer adipiscing elit. consectetuer adipiscing elit.
Fusce tristique. Fusce tristique. Fusce tristique.
Itemitem Itemitem Itemitem

Story/News Story/News Story/News Story/News
mm/dd/yy at hh:mm, PM mm/dd/yy at hh:mm, PM mm/dd/yy at hh:mm, PM mm/dd/yy at hh:mm, PM

consectetuer adipiscing elit. consectetuer adipiscing elit. consectetuer adipiscing elit.
Fusce tristique. Fusce tristique. Fusce tristique.


Story photograph Story photograph Story photograph Story photograph

Heading Heading Heading Heading Heading
Itemitem Itemitem Itemitem Itemitem Itemitem



Story photograph Story photograph Story photograph Story photograph

Heading Heading Heading Heading Heading

Main Menu Item Primary messaging explaining what the
Main Menu Item
organization does.
Main Menu Item
Main Menu Item
Main Menu Item Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tristique. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tristique. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Fusce tristique. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Fusce tristique. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Fusce tristique. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Fusce tristique. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Fusce tristique.

Main Menu Item Primary messaging explaining what Heading
Main Menu Item Itemitem
the organization does. Itemitem
Main Menu Item
mm/dd/yy at hh:mm, PM Itemitem
Main Menu Item
Itemitem
Main Menu Item Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Fusce tristique. Lorem ipsum dolor sit amet, consectetuer Heading
adipiscing elit. Fusce tristique. Lorem ipsum dolor sit Itemitem
amet, consectetuer adipiscing elit. Fusce tristique. Lorem Itemitem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce Itemitem
tristique. Lorem ipsum dolor sit amet, consectetuer Itemitem
adipiscing elit. Fusce tristique. Lorem ipsum dolor sit
Heading
amet, consectetuer adipiscing elit. Fusce tristique. Lorem
Itemitem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce
Itemitem
tristique. Lorem ipsum dolor sit amet, consectetuer
Itemitem
adipiscing elit. Fusce tristique. Lorem ipsum dolor sit
Itemitem
amet, consectetuer adipiscing elit. Fusce tristique.

CSS FRAMEWORKS
Maybe. Maybe not.

‣ Blueprint: a CSS Framework


‣ 960 Grid System


‣ 960 Grid System

‣ YUI Grid CSS

‣ Blueprint: a CSS Framework ‣ YAML - Yet Another
Multicolumn Layout
‣ 960 Grid System

‣ YUI Grid CSS

BREAKING THE GRID
Working with variable content height

DEFINING ALL STATES
Move over flat files, welcome interactive machines!

‣ Hover States for Text Links


‣ Hover States for Image
Links


Links

‣ Slideshow Controls

‣ Hover States for Text Links ‣ Tab States

Links



‣ Hover States for Image ‣ Expand/Collapse
Links Functionality



‣ Hover States for Image ‣ Expand/Collapse
Links Functionality

‣ Slideshow Controls ‣ Accordion Functionality

VISUAL CUES
Let your users know something is happening

INTERACTION

CONTINGENCY DESIGN
If when your design crashes into a brick wall.

YAHOO DESIGN PATTERN LIBRARY
They catalogued them, so you don’t have to.
http://developer.yahoo.com/ypatterns/

YAHOO DESIGN PATTERN LIBRARY STENCILS!
They wireframed them, so you don’t have to.
http://developer.yahoo.com/ypatterns/about/stencils

Option 2 Option 4
Field Label:
Field Label:
Checkbox: Instructional text associated with this field
What checking this box means
Instructional text associated with this field
Checkbox Array: Option 1 ! Option 3 ! Option 5
Error Title
Field Label: ! Option 2 Option 4 Recovery instructions
Error Title
Field Label: appear in instructions
Recovery this space
appear in this space
y, State, Postal Code:
City - State - Postal Code

Calendar Picker
Spinner: 16
Switches & Knobs YUI Code Design Pattern
Date: 16
Spinner: mm/dd/yyyy

itches & Knobs
Select Field: - Select One -
< July 2007
Select Field: - Select One -
> <
ON
ON
July 2007
OFF
>
OFF < July 2007 >
OFF
OFF
Su Mo Tu We Th Fr Sa Su Mo Tu We Th Fr Sa Su Mo Tu We Th Fr Sa

DESIGN STENCILS
Combo Box: 1 2 3 4 5 6 7 1 2 3 4 5 6 7 1 2 3 4Form Elements
5 6 7
Nhttp://design.yahoo.com 10
N OFF Box: 8 9
OFF
Combo OFF
OFF
11 12 13 14 8 ON
ON
9 10 11 12 13 14 OFF
OFF 8 ON
ON
9 10 11 12 13 14 ver. 1.0
15 16 17 18 19 20 21 15 16 17 18 19 20 21 15 16 17 18 19 20 21
Multi-select: Full List My Items 50
50
Multi-select: 22 23 List 25 26 27 28
Full 24 22 23 24 25 26 My Items
27 28 22 23 24 25 26 27 28
Item 1
29 30 31 1 2 3 4 29 30 31 > 1 2 none4
3 25
25
29 30 31 1 2 3 75
75
4
Item 1
Item 2 none
5 6 50
50
7 8 9 10 11 5 6 7 >8 9 10 11 5 6 7 8 9 10 11
Item 2
Item 3 <
25
25 Item 3
Item 4 75
75 <
Item 4 0
0 August 2007 100
100
< July 2007 August 2007 >
YAHOO DESIGN PATTERN LIBRARY STENCILS!
Radio Button Array:
Radio Button Array:
SuOption 1We Th Fr Option 3
Mo Tu
Option 1
Sa Option 5
Su Mo Tu We Th Fr Sa
Option 3 Option 5 29 30 31 1 Label 4
Knob Label
Knob 2 3
Su Mo Tu We Th Fr Sa

They wireframed them, so you don’t have to.
0 1 Option 2 4 1006 Option 4 30 31 1 2 3 4
0 2 3 100 7
5 29
Option 211 12 13 Option 4 6 7 8 9 10 11 5 6 7 8 9 10 11
8 9 10 14 5
http://developer.yahoo.com/ypatterns/about/stencils 15 16 17 18
12 13 14
Checkbox:Knob Label 19 this21 means 14 15 16 17 Knob Label
Knob Label
What17 18
15 16 checking 20 box 12 13 Knob Label
18
Checkbox: What checking this box means 19 20 21 22 23 24 25
22 23 24 25 26 27 28
DESIGN STENCILS 1
DESIGN STENCILS
19 20 21 22 23 24 25
26 27 28 29 30 31

NETFLIX
It’s the Blockbuster Video of the Internetz

Designing
Web
Interfaces
by Bill Scott &
Theresa Neil

‣ You like those fancy
Netflix interfaces? You’ll
like this book!

MORE YAHOO DESIGN PATTERN LIBRARY STENCILS!
http://developer.yahoo.com/ypatterns/about/stencils

e1 Subtitle 2 Subtitle 3 Sub

Item Title 1 Item Title 2 n-2
n-3 Item Title 3 n+3
n+2
Container Title Goes Here
Subtitle 1 Subtitle 2
n-1 n n+1 3
Subtitle
1
gation Tabs Here 2 3 n-3
n-2 n+2n+3
YUI Code Design Pattern
ontainer Title Goes n-1 n n+1
b1 Item Title 1Tab 2 View
>> all Tab 3
Item Title 2 Item Title 3 Tab 1 Tab 2 Tab 3

1 Subtitle 1
2
Subtitle 2
3
Subtitle 3

View all n-3
n-2 n-1
>>

m Title 1
btitle 1
Item Title 2
Subtitle 2
Item Title 3
Subtitle 3
n
Container Title Goes Here
all
1 2 3 4
n-3 1 of 4
YUI Code Design Patternn-2 n-1
1
ule Tabs 2 3 n YUI Code Design Pattern
Tab 1 Tab 2 Tab 3
ontainer Title Goes Here Title 2
10 9 8
Item Title 1 Item Item Title 3
Subtitle 1 Subtitle 2 Subtitle 3 Tab 1

1 >> View all
2 3 1 7
2 3 5 6 Tab 2
4
m Title 1
btitle 1
Item 1Title 2
2 3
Subtitle 2
4 Item Title 3
1 of 4
Subtitle 3
10 9 8
View all 1 7 Tab 3

DESIGN STENCILS YUI Code Design Pattern2 3 5 6
4
MORE YAHOO DESIGN PATTERN LIBRARY STENCILS!
http://design.yahoo.com
DESIGN STENCILS
1 2 3 4 1 of 4 Tab 1
Carousel
http://design.yahoo.com ver. 1.0
Tab 1

http://developer.yahoo.com/ypatterns/about/stencils Tab 2

Tab 2
Tab 3

SHOULDERS OF GIANTS
There are worse places to stand.

“ The only way to have a friend is to be one.”
—RALPH WALDO EMERSON

“ e reason we suddenly need such a word is that during this century
we have for the ﬁrst time been dominated by non-interactive forms
of entertainment: cinema, radio, recorded music and television.
Before they came along all entertainment was interactive: theatre,
music, sport…

We didn’t need a special word for interactivity in the same way that
we don’t (yet) need a special word for people with only one head.

—DOUGLAS ADAMS

THANK YOU!
‣ Kevin Hoﬀman (@kevinmhoﬀman), User Experience Director

‣ Jenn Lukas (@jennlukas), Interactive Development Director

‣ Kevin Sharon (@kevinsharon), Senior Designer

AIGA Pencil to Pixel Presents: Happy Cog, Bringing Your Clients Online

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (18)

Más de Kevin Hoffman

Más de Kevin Hoffman (6)

Último

Último (20)

AIGA Pencil to Pixel Presents: Happy Cog, Bringing Your Clients Online