INTER FACE DE SIGN J UG GLING

by DAN CEDERHOLM

http://www.flickr.com/photos/designerbrent/194242417/ http://www.flickr.com/photos/shawnzlea/137209564/

Learning to juggle
COLO R
TYPOGRA PHY - Passing one object from one hand to the
other.
ICONO GR AP HY
- Then two ...
MICRO FO RMATS - Then three ...
- You’re still not juggling.
FLEXIB IL IT Y
Juggling is ...

- Keeping all objects consistently in the air

- Adapting to shift, changes in pattern, etc.

MY BACKYARD

http://www.flickr.com/photos/stuartyeates/
45919678/

SPECIAL ANNOUNCEMENT
(Wig 2.0?)

Color.

Start with a small, core palette. Reuse

that set throughout the design.

toupeepal.com
 “I hate that green.
COLOR IS EMOTIONAL It reminds me of my ex-
girlfriend’s quilt.”

—Awesome Client

http://wellstyled.com/tools/colorscheme2/index-en.html

Choosing color palettes from nature photos

Filter > Pixelate > Mosaic...
#b67f72

#393643
SCULPTING
an INTERFACE

Link color carries

weight.
On link-heavy pages, link color can be
an important design element.
 TYPOGRAPHY

GREAT TYPOGRAPHY IS
INVISIBLE
 Too few fonts?

“During the Italian renaissance the

typographer had one font to work with,
and yet this period produced some of the
most beautiful typographical work.”
—Oliver Reichenstein

http://www.informationarchitects.jp/the-web-is-all-about-typography-period

“Information design is not about the use of

good typefaces, it is about the use of good DO THE BEST WITH
typography ... Anyone can use typefaces,
WHAT WE HAVE
some can choose good typefaces, but only
few master typography.”
—Oliver Reichenstein

Georgia Verdana
Headings Everything else
CSS Typography

-font-family
h1 {
-font-size font-family: Georgia, serif;
-font-weight font-weight: normal;
}
-letter-spacing
-text-transform
-text-align

h3 {
font-family: Georgia, serif;
! font-size: 90%;
! text-transform: uppercase;
! letter-spacing: 2px;
color: #963;
}

<span class="amp">&amp;</span>

span.amp {
! font-size: 110%;
5.1.3 In heads and titles, use the best available ampersand. ! font-family: "Goudy Old Style", "Palatino",
"Book Antiqua", serif;
! font-style: italic;
! }
 Harmonize type set
in graphics.
Use as an opportunity to treat type
consistently.

webtypography.net

Avenir
DISCOVERING TYPE
veer.com
Favicons.

The most important design element of

any site. No, really.

subtraction.com

tanyamerone.com
 Three choices

REALLY EASY - Scale the mark down to 16x16

or - Choose a fragment to focus on
REALLY DIFFICULT - Use something unique

salon. com technorati.com

saturn.com andybudd.com

adidas.com veer.com

zeldman. com sixfoot6.com

sidesh0w.com photomatt.net

meyerweb.com adactio.com
 CREATE IN PHOTOSHOP
PASTE INTO ICONOGRAPHER

Add detail without

adding complexity.
Understand the limitations of
background images and boring boxes.
Please recycle.
Suggest the box.

Style portions of the box with minimal

background images for simple markup
and future-proofing.

Reuse/Recycle.

Simplify design and process by reusing

themes, color, graphics.
 diag-bg.gif

microformats are ...

- Confusing
- A waste of time
- Something geeks do with a lot of time on
MICROFORMATS their hands

“Designed for humans first and “Cool. I’ll do it that

way too”“Cool. I’ll do it that
machines second, microformats are a “I'm going to mark way too”
up a contact like
set of simple, open data formats built this...” “Cool. I’ll do it that
upon existing and widely adopted way too”
“Cool. I’ll do it that
standards. Instead of throwing away way too”
what works today, microformats intend
<div class="vcard">

to solve simpler problems first by <a class="url fn" href="http://simplebits.com/">Dan Cederholm</a>

<div class="org">SimpleBits, LLC</div>
</div>

adapting to current behaviors and

usage patterns (e.g. XHTML, blogging).”
PEOPLE APPLICATION CSS
– http://microformats.org/about
 CONTACT INFO?
PRODUCT REVIEW?
EVENT DETAILS? GUIDED BY
VOICES
RELATIONSHIPS?

http://www.flickr.com/photos/bluetypewriter/174367695/

USE WHAT WORKS TODAY

hCard
(contact information)

http://microformats.org/code/hcard/creator
hCard hCard

<div class="vcard"> <div class="vcard">

<a class="url fn hide" href="http://simplebits.com">Dan Cederholm</a> <a class="url fn hide" href="http://simplebits.com">Dan Cederholm</a>
<div class="org">SimpleBits, LLC</div> <div class="org">SimpleBits, LLC</div>
<div class="adr"> <div class="adr">
<div class="street-address">60 Washington Street, Suite 402</div> <div class="street-address">60 Washington Street, Suite 402</div>
<span class="locality">Salem</span>, <span class="locality">Salem</span>,
<span class="region">MA</span>, <span class="region">MA</span>,
<span class="postal-code">01970</span> <span class="postal-code">01970</span>
<abbr class="country-name" title="United States of America">USA</abbr> <abbr class="country-name" title="United States of America">USA</abbr>
</div> </div>
<div class="tel"> <div class="tel">
<span class="type">Fax</span>: <span class="type">Fax</span>:
<span class="value">+1 978 744 0760</span> <span class="value">+1 978 744 0760</span>
</div> </div>
</div> </div>

SEEING IS BELIEVING THIS STUFF WORKS NOW

hReview

hReview
 hCard

rel-tag

“OBLIVIOUS DEVELOPMENT”

PLANTING
SEEDS

http://www.flickr.com/photos/96434059@N00/196061290/
I HAD NO IDEA WHAT HE
WAS TALKING ABOUT

“ACCIDENTAL API”
—Brian Oberkirch

http://allinthehead.com/retro/301/can-your-website-be-your-api
 What good is one brick?
XFN
hCard

XFN
MICROFORMATS WORK hCard hReview
TOGETHER
rel-tag hCalendar hResume

hReview

hReview
WIGGREGATOR?

hCalendar

microformats.org BULLETPROOFING
“Bulletproof”

- Embracing flexibility
- Preparing for worst-case scenarios
INTEGRITY TESTS
- Protecting your designs from “breaking”
- Catch-phrase to sell books and secure
speaking engagements

Turn images off.

When images are disabled, is the site

still readable?

Styled alt text

#header #logo {
! float: left;
! margin: 0 0 20px 0;
! color: #fff;
! }
 WOW!

WOW!

Turn CSS off.

Give your design an x-ray. A "10-

second usability test" isn't scientific—
but it can help illustrate separation of
structure and presentation.
 Bump up text size.

Increase text size to see how the design

reacts. Can it adapt to varying
amounts of content?

#wrap {
width: 50em;
}

#content {
width: 30em;
}

#sidebar {
width: 20em;
}
 COLO R
Validate.
TYPOGRA PHY
Validate markup and stylesheets when ICONO GR AP HY
possible—especially during the design
process.
MICRO FORMATS
FLEXI BIL ITY

THAN K YOU.
http://simplebits.com/publications/speak/juggling