You are on page 1of 23
INTERFACE DESIGN JUGGLING by DAN CEDERHOLM

INTERFACE DESIGN JUGGLING

by DAN CEDERHOLM

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

TYPOGRAPHY COLOR MICROFORMATS FLEXIBILITY ICONOGRAPHY

TYPOGRAPHY COLOR MICROFORMATS FLEXIBILITY ICONOGRAPHY
TYPOGRAPHY COLOR MICROFORMATS FLEXIBILITY ICONOGRAPHY http://www.flickr.com/photos/shawnzlea/137209564/ Learning
http://www.flickr.com/photos/shawnzlea/137209564/
http://www.flickr.com/photos/shawnzlea/137209564/
Learning to juggle - Passing other. one object from one hand to the - -

Learning to juggle

- Passing other. one object from one hand to the

- - - Then Then You’re two three still not juggling.

Juggling is - - Keeping Adapting all to objects shift, changes consistently in pattern, in

Juggling is

- - Keeping Adapting all to objects shift, changes consistently in pattern, in the etc. air

SPECIAL ANNOUNCEMENT

SPECIAL ANNOUNCEMENT

toupeepal.com
toupeepal.com
MY BACKYARD http://www.flickr.com/photos/stuartyeates/ 45919678/
MY BACKYARD
http://www.flickr.com/photos/stuartyeates/ 45919678/
(Wig 2.0?)
(Wig 2.0?)
Color. Start that set with throughout a small, core the palette. design. Reuse

Color.

Start that set with throughout a small, core the palette. design. Reuse

C O L O R IS EMOTIONAL

COLOR IS EMOTIONAL

C O L O R IS EMOTIONAL “I hate that green. It reminds girlfriend’s me of
C O L O R IS EMOTIONAL “I hate that green. It reminds girlfriend’s me of
“I hate that green. It reminds girlfriend’s me of quilt.” my ex- —Awesome Client

“I hate that green. It reminds girlfriend’s me of quilt.” my ex-

—Awesome Client

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

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

Choosing color palettes from nature photos

Filter > Pixelate > Mosaic #b67f72 #393643

Filter > Pixelate > Mosaic

#b67f72

Filter > Pixelate > Mosaic #b67f72 #393643
Filter > Pixelate > Mosaic #b67f72 #393643
Filter > Pixelate > Mosaic #b67f72 #393643

#393643

Filter > Pixelate > Mosaic #b67f72 #393643
Filter > Pixelate > Mosaic #b67f72 #393643
Filter > Pixelate > Mosaic #b67f72 #393643
Filter > Pixelate > Mosaic #b67f72 #393643
Filter > Pixelate > Mosaic #b67f72 #393643
SCULPTING an INTERFACE
SCULPTING an INTERFACE
SCULPTING an INTERFACE Link weight. color carries On an important link-heavy design pages, element. link color
SCULPTING an INTERFACE Link weight. color carries On an important link-heavy design pages, element. link color
SCULPTING an INTERFACE Link weight. color carries On an important link-heavy design pages, element. link color
Link weight. color carries On an important link-heavy design pages, element. link color can be

Link weight. color carries

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

TYPOGRAPHY GREAT TYPOGRAPHY IS I N V I S I B L E
TYPOGRAPHY GREAT TYPOGRAPHY IS I N V I S I B L E
TYPOGRAPHY GREAT TYPOGRAPHY IS I N V I S I B L E
TYPOGRAPHY GREAT TYPOGRAPHY IS I N V I S I B L E
TYPOGRAPHY

TYPOGRAPHY

GREAT TYPOGRAPHY IS I N V I S I B L E

GREAT TYPOGRAPHY IS

I N V I S I B L E

http://www.informationarchitects.jp/the-web-is-all-about-typography-period
http://www.informationarchitects.jp/the-web-is-all-about-typography-period
“Information good typefaces, design it is is about not about the use the of use

“Information good typefaces, design it is is about not about the use the of use good of some typography can few choose master good typography.” typefaces, but only

Anyone can use typefaces,

—Oliver Reichenstein

only Anyone can use typefaces, —Oliver Reichenstein Too few fonts? “During the Italian renaissance the and
Too few fonts? “During the Italian renaissance the and typographer most yet this beautiful period

Too few fonts?

“During the Italian renaissance the and typographer most yet this beautiful period had typographical one produced font to some work work.” with, of the

—Oliver Reichenstein

DO WHAT THE BEST WE HAVE WITH

DO WHAT THE BEST WE HAVE WITH

Georgia

Headings

Verdana

Everything else

CSS Typography

-font-family -font-weight -font-size -letter-spacing -text-transform -text-align

CSS Typography - font-family - font-weight - font-size - letter-spacing - text-transform - text-align

h3 ! font-size: font-family: { 90%; Georgia, serif;

! ! text-transform: letter-spacing: uppercase; 2px; color: #963;

}

5.1.3 In heads and titles, use the best available ampersand.

h1 font-family: font-weight: { Georgia, normal; serif;

}

font-family: font-weight: { Georgia, normal; serif; } <span class="amp">&amp;</span>
font-family: font-weight: { Georgia, normal; serif; } <span class="amp">&amp;</span>

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

! ! font-family: font-size: 110%; "Goudy Old Style", "Palatino",

! font-style: "Book Antiqua", italic; serif;

! }

webtypography.net
webtypography.net
Avenir
Avenir
webtypography.net Avenir Harmonize in graphics. type set Use consistently. as an opportunity to treat type DISCOVERING
Harmonize in graphics. type set Use consistently. as an opportunity to treat type

Harmonize in graphics. type set

Use consistently. as an opportunity to treat type

DISCOVERING TYPE

DISCOVERING TYPE

Avenir Harmonize in graphics. type set Use consistently. as an opportunity to treat type DISCOVERING TYPE
veer.com
veer.com
veer.com tanyamerone.com Favicons. The any site. most No, important really. design element of subtraction.com
tanyamerone.com
tanyamerone.com
Favicons. The any site. most No, important really. design element of

Favicons.

The any site. most No, important really. design element of

subtraction.com
subtraction.com

subtraction.com

veer.com tanyamerone.com Favicons. The any site. most No, important really. design element of subtraction.com
REALLY EASY REALLY DIFFICULT or

REALLY EASY REALLY DIFFICULT

or

REALLY EASY REALLY DIFFICULT or Three choices - - - Choose Use Scale something the a
REALLY EASY REALLY DIFFICULT or Three choices - - - Choose Use Scale something the a

Three choices

- - - Choose Use Scale something the a mark fragment down unique to to focus 16x16 on

Three choices - - - Choose Use Scale something the a mark fragment down unique to
salon. com technorati.com saturn.com andybudd.com
salon. com
technorati.com
saturn.com
andybudd.com

adidas.com

veer.com

zeldman. com sixfoot6.com sidesh0w.com photomatt.net
zeldman. com
sixfoot6.com
sidesh0w.com
photomatt.net

meyerweb.com

adactio.com

PASTE CREATE INTO IN ICONOGRAPHER PHOTOSHOP Add adding detail complexity. without background Understand Please recycle.
PASTE CREATE INTO IN ICONOGRAPHER PHOTOSHOP Add adding detail complexity. without background Understand Please recycle.
PASTE CREATE INTO IN ICONOGRAPHER PHOTOSHOP Add adding detail complexity. without background Understand Please recycle.
PASTE CREATE INTO IN ICONOGRAPHER PHOTOSHOP Add adding detail complexity. without background Understand Please recycle.
PASTE CREATE INTO IN ICONOGRAPHER PHOTOSHOP Add adding detail complexity. without background Understand Please recycle.
PASTE CREATE INTO IN ICONOGRAPHER PHOTOSHOP Add adding detail complexity. without background Understand Please recycle.
PASTE CREATE INTO IN ICONOGRAPHER PHOTOSHOP Add adding detail complexity. without background Understand Please recycle.

PASTE CREATE INTO IN ICONOGRAPHER PHOTOSHOP

PASTE CREATE INTO IN ICONOGRAPHER PHOTOSHOP Add adding detail complexity. without background Understand Please recycle.
Add adding detail complexity. without background Understand Please recycle. the images limitations and boring of

Add adding detail complexity. without

background Understand Please recycle. the images limitations and boring of boxes.

Suggest the box. Style background portions images of the for box simple with minimal markup
Suggest the box. Style background portions images of the for box simple with minimal markup
Suggest the box. Style background portions images of the for box simple with minimal markup

Suggest the box.

Style background portions images of the for box simple with minimal markup and future-proofing.

the for box simple with minimal markup and future-proofing. Reuse/Recycle. Simplify themes, color, design graphics.
Reuse/Recycle. Simplify themes, color, design graphics. and process by reusing

Reuse/Recycle.

Simplify themes, color, design graphics. and process by reusing

diag-bg.gif
diag-bg.gif
MICROFORMATS
MICROFORMATS

MICROFORMATS

“Designed for humans first and upon set machines of existing simple, second, open and widely

“Designed for humans first and upon set machines of existing simple, second, open and widely microformats data formats adopted are built a to what standards. solve works simpler Instead today, problems microformats of throwing first by away intend usage adapting patterns to current (e.g. behaviors XHTML, blogging).” and

– http://microformats.org/about

XHTML, blogging).” and – http://microformats.org/about microformats are - Confusing - - Something their A
microformats are - Confusing - - Something their A waste hands of time geeks do

microformats are

- Confusing

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

“I'm up a going contact to mark like ” this “Cool. way I’ll too” do
“I'm up a going contact to mark like
this
“Cool. way I’ll too” do it “Cool. that way I’ll too” do it that
“Cool. way I’ll too” do “Cool. it that I’ll do it th
way too”
<div <a <div class="url class="vcard"> class="org">SimpleBits, fn" href="http://simplebits.com/">Dan LLC</div> Cederholm</a>
</div>
PEOPLE
APPLICATION
CSS
PRODUCT EVENT CONTACT DETAILS? REVIEW? INFO? RELATIONSHIPS?

PRODUCT EVENT CONTACT DETAILS? REVIEW? INFO? RELATIONSHIPS?

PRODUCT EVENT CONTACT DETAILS? REVIEW? INFO? RELATIONSHIPS? hCard (contact information) GVOUIIDCEESD BY

hCard

hCard (contact information)

(contact information)

GVOUIIDCEESD BY http://www.flickr.com/photos/bluetypewriter/174367695/
GVOUIIDCEESD BY
http://www.flickr.com/photos/bluetypewriter/174367695/
USE WHAT WORKS TODAY

USE WHAT WORKS TODAY

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

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

hCard <div <div <a class="url class="vcard"> class="org">SimpleBits, fn hide"

hCard

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

SEEING IS BELIEVING
SEEING IS BELIEVING
744 0760</span> </div> SEEING IS BELIEVING hCard <div <div <a class="url
hCard <div <div <a class="url class="vcard" > class="org" >SimpleBits, fn

hCard

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

THIS STUFF WORKS NOW

THIS STUFF WORKS NOW

hReview

hReview

rel-tag

PSELAEDNSTING
PSELAEDNSTING
rel-tag PSELAEDNSTING hCard “OBLIVIOUS DEVELOPMENT” http://www.flickr.com/photos/96434059@N00/196061290/
hCard
hCard
“OBLIVIOUS DEVELOPMENT” http://www.flickr.com/photos/96434059@N00/196061290/
“OBLIVIOUS DEVELOPMENT”
http://www.flickr.com/photos/96434059@N00/196061290/
rel-tag PSELAEDNSTING hCard “OBLIVIOUS DEVELOPMENT” http://www.flickr.com/photos/96434059@N00/196061290/
I HAD WAS NO TALKING IDEA WHAT ABOUT HE “ACCIDENTAL API” —Brian Oberkirch
I HAD WAS NO TALKING IDEA WHAT ABOUT HE

I HAD WAS NO TALKING IDEA WHAT ABOUT HE

“ACCIDENTAL API” —Brian Oberkirch

“ACCIDENTAL API”

—Brian Oberkirch

WHAT ABOUT HE “ACCIDENTAL API” —Brian Oberkirch
WHAT ABOUT HE “ACCIDENTAL API” —Brian Oberkirch
http://allinthehead.com/retro/301/can-your-website-be-your-api

http://allinthehead.com/retro/301/can-your-website-be-your-api

hCard
hCard
XFN
XFN
hCard XFN MICROFORMATS TOGETHER WORK hReview
hCard XFN MICROFORMATS TOGETHER WORK hReview
hCard XFN MICROFORMATS TOGETHER WORK hReview

MICROFORMATS TOGETHER WORK

hReview
hReview
hReview hCalendar
hReview
hCalendar
microformats.org

microformats.org

XFN hCard hReview rel-tag hCalendar hResume
XFN
hCard
hReview
rel-tag
hCalendar
hResume

What good is one brick?

WIG GREGATOR?

WIGGREGATOR?

BULLETPROOFING

BULLETPROOFING

“Bulletproof” - Embracing flexibility - - - Protecting Catch-phrase Preparing for your worst-case to designs

“Bulletproof”

- Embracing flexibility

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

Turn images off. When still readable? images are disabled, is the site

Turn images off.

When still readable? images are disabled, is the site

Styled alt text

#header #logo {

! ! ! margin: float: color: left; #fff; 0 0 20px 0;

! }

Styled alt text #header #logo { ! ! ! margin: float: color: left; #fff; 0 0
INTEGRITY TESTS

INTEGRITY TESTS

site Styled alt text #header #logo { ! ! ! margin: float: color: left; #fff; 0
site Styled alt text #header #logo { ! ! ! margin: float: color: left; #fff; 0
Turn CSS off. but structure second Give it your can usability and help design presentation.
Turn CSS off. but structure second Give it your can usability and help design presentation.
Turn CSS off. but structure second Give it your can usability and help design presentation.

Turn CSS off.

but structure second Give it your can usability and help design presentation. illustrate test" an x-ray. isn't separation scientific— A "10- of

WOW!
WOW!

WOW!

and help design presentation. illustrate test" an x-ray. isn't separation scientific— A "10- of WOW! WOW!
Bump up text size. Increase reacts. Can text it size adapt to see to varying
Bump up text size. Increase reacts. Can text it size adapt to see to varying

Bump up text size.

Increase reacts. Can text it size adapt to see to varying how the design amounts of content?

#wrap { width: 50em; } #content { width: 30em; } #sidebar { width: 20em; }
#wrap {
width: 50em;
}
#content {
width: 30em;
}
#sidebar {
width: 20em;
}
how the design amounts of content? #wrap { width: 50em; } #content { width: 30em; }
how the design amounts of content? #wrap { width: 50em; } #content { width: 30em; }
how the design amounts of content? #wrap { width: 50em; } #content { width: 30em; }
Validate. possible—especially Validate process. markup and during stylesheets the design when

Validate.

possible—especially Validate process. markup and during stylesheets the design when

THANK YOU. http://simplebits.com/publications/speak/juggling

THANK YOU.

http://simplebits.com/publications/speak/juggling

TYPOGRAPHY COLOR MICROFORMATS ICONOGRAPHY FLEXIBILITY

TYPOGRAPHY COLOR MICROFORMATS ICONOGRAPHY FLEXIBILITY