Interface Design Juggling

128
DAN CEDERHOLM by INTERFACE DESIGN JUGGLING

description

Presented at An Event Apart - Boston by Dan Cederholm.

Transcript of Interface Design Juggling

Page 1: Interface Design Juggling

DAN CEDERHOLMby

INTERFACE DESIGN JUGGLING

Page 2: Interface Design Juggling
Page 5: Interface Design Juggling

COLOR

TYPOGRAPHY

ICONOGRAPHY

MICROFORMATS

FLEXIBILITY

Page 6: Interface Design Juggling

Learn to juggle

- Passing one object from one hand to the other.

- Then two ...

- Then three ...

- You’re still not juggling.

Page 7: Interface Design Juggling

Juggling is ...

- Keeping all objects consistently in the air

- Adapting to shift, changes in pattern, etc.

Page 8: Interface Design Juggling

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

MY BACKYARD

Page 9: Interface Design Juggling

SPECIAL ANNOUNCEMENT

Page 10: Interface Design Juggling

(Wig 2.0?)

Page 12: Interface Design Juggling

Color.

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

Page 14: Interface Design Juggling
Page 15: Interface Design Juggling

Choosing color palettes from nature photos

Page 16: Interface Design Juggling

#b67f72

#393643

Filter > Pixelate > Mosaic...

Page 17: Interface Design Juggling
Page 18: Interface Design Juggling
Page 19: Interface Design Juggling
Page 20: Interface Design Juggling
Page 21: Interface Design Juggling
Page 22: Interface Design Juggling

SCULPTING INTERFACEan

Page 23: Interface Design Juggling
Page 24: Interface Design Juggling
Page 25: Interface Design Juggling
Page 26: Interface Design Juggling
Page 27: Interface Design Juggling

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

Page 28: Interface Design Juggling
Page 30: Interface Design Juggling
Page 31: Interface Design Juggling

TYPOGRAPHY

Page 32: Interface Design Juggling
Page 33: Interface Design Juggling

GREAT TYPOGRAPHY ISINVISIBLE

Page 34: Interface Design Juggling

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

Page 35: Interface Design Juggling

Too few fonts?

—Oliver Reichenstein

“During the Italian renaissance the typographer had one font to work with,

and yet this period produced some of the most beautiful typographical work.”

Page 36: Interface Design Juggling

“Information design is not about the use of good typefaces, it is about the use of good typography ... Anyone can use typefaces,

some can choose good typefaces, but only few master typography.”

—Oliver Reichenstein

Page 37: Interface Design Juggling

DO THE BEST WITH WHAT WE HAVE

Page 38: Interface Design Juggling
Page 39: Interface Design Juggling

Georgia VerdanaHeadings Everything else

Page 40: Interface Design Juggling

CSS Typography

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

Page 41: Interface Design Juggling

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

Page 42: Interface Design Juggling

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

Page 43: Interface Design Juggling
Page 44: Interface Design Juggling

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

Page 45: Interface Design Juggling

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

span.amp { font-size: 110%; font-family: "Goudy Old Style", "Palatino", "Book Antiqua", serif; font-style: italic; }

Page 47: Interface Design Juggling

Harmonize type set in graphics.Use as an opportunity to treat type consistently.

Page 48: Interface Design Juggling

Avenir

Page 49: Interface Design Juggling

Favicons.

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

Page 50: Interface Design Juggling
Page 53: Interface Design Juggling
Page 54: Interface Design Juggling

REALLY EASY or

REALLY DIFFICULT

Page 55: Interface Design Juggling

Three choices

- Scale the mark down to 16x16

- Choose a fragment to focus on

- Use something unique

Page 56: Interface Design Juggling
Page 57: Interface Design Juggling

salon. com technorati.com

saturn.com andybudd.com

adidas.com veer.com

Page 58: Interface Design Juggling
Page 59: Interface Design Juggling

zeldman. com sixfoot6.com

sidesh0w.com photomatt.net

meyerweb.com adactio.com

Page 60: Interface Design Juggling
Page 61: Interface Design Juggling

CREATE IN PHOTOSHOPPASTE INTO ICONOGRAPHER

Page 62: Interface Design Juggling
Page 65: Interface Design Juggling

Add detail without adding complexity.Understand the limitations of background images and boring boxes. Please recycle.

Page 66: Interface Design Juggling
Page 67: Interface Design Juggling

Suggest the box.

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

Page 68: Interface Design Juggling
Page 69: Interface Design Juggling
Page 70: Interface Design Juggling
Page 71: Interface Design Juggling

Reuse/Recycle.

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

Page 72: Interface Design Juggling

diag-bg.gif

Page 73: Interface Design Juggling
Page 74: Interface Design Juggling

MICROFORMATS

Page 75: Interface Design Juggling

microformats are ...

- Confusing

- A waste of time

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

Page 76: Interface Design Juggling

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

– http://microformats.org/about

Page 77: Interface Design Juggling

“I'm going to mark up a contact like

this...” “Cool. I’ll do it that way too”

APPLICATIONPEOPLE CSS

<div class="vcard"> <a class="url fn" href="http://simplebits.com/">Dan Cederholm</a> <div class="org">SimpleBits, LLC</div></div>

“Cool. I’ll do it that way too”

“Cool. I’ll do it that way too”

“Cool. I’ll do it that way too”

Page 78: Interface Design Juggling

CONTACT INFO? PRODUCT REVIEW?

EVENT DETAILS?RELATIONSHIPS?

Page 79: Interface Design Juggling

GUIDED BY VOICES

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

Page 80: Interface Design Juggling
Page 81: Interface Design Juggling

USE WHAT WORKS TODAY

Page 82: Interface Design Juggling

hCard(contact information)

Page 84: Interface Design Juggling

hCard

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

Page 85: Interface Design Juggling

hCard

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

Page 86: Interface Design Juggling

SEEING IS BELIEVING

Page 87: Interface Design Juggling

THIS STUFF WORKS NOW

Page 88: Interface Design Juggling
Page 89: Interface Design Juggling

hReview

hReview

Page 90: Interface Design Juggling

rel-tag

Page 91: Interface Design Juggling

hCard

Page 92: Interface Design Juggling

PLANTING SEEDS

Page 93: Interface Design Juggling

“OBLIVIOUS DEVELOPMENT”

http://www.flickr.com/photos/96434059@N00/196061290/

Page 94: Interface Design Juggling
Page 95: Interface Design Juggling
Page 96: Interface Design Juggling
Page 97: Interface Design Juggling
Page 98: Interface Design Juggling

I HAD NO IDEA WHAT HE WAS TALKING ABOUT

Page 99: Interface Design Juggling
Page 100: Interface Design Juggling

“ACCIDENTAL API”—Brian Oberkirch

Page 102: Interface Design Juggling

XFNhCard

hReview

MICROFORMATS WORK TOGETHER

Page 103: Interface Design Juggling

What good is one brick?

XFN

hCard hReview

rel-tag hCalendar hResume

Page 104: Interface Design Juggling

hCalendar

hReview

Page 105: Interface Design Juggling

WIGGREGATOR?

Page 106: Interface Design Juggling

microformats.org

Page 107: Interface Design Juggling

BULLETPROOFING

Page 108: Interface Design Juggling

“Bulletproof”

- Embracing flexibility

- Preparing for worst-case scenarios

- Protecting your designs from “breaking”

- Catch-phrase to sell books and secure speaking engagements

Page 109: Interface Design Juggling

INTEGRITY TESTS

Page 110: Interface Design Juggling

Turn images off.

When images are disabled, is the site still readable?

Page 111: Interface Design Juggling
Page 112: Interface Design Juggling

Styled alt text

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

Page 113: Interface Design Juggling
Page 114: Interface Design Juggling
Page 115: Interface Design Juggling

WOW!

Page 116: Interface Design Juggling
Page 117: Interface Design Juggling

WOW!

Page 118: Interface Design Juggling

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.

Page 119: Interface Design Juggling
Page 120: Interface Design Juggling
Page 121: Interface Design Juggling
Page 122: Interface Design Juggling

Bump up text size.

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

Page 123: Interface Design Juggling
Page 124: Interface Design Juggling

#wrap { width: 50em; }

#content { width: 30em; }

#sidebar { width: 20em; }

Page 125: Interface Design Juggling
Page 126: Interface Design Juggling

Validate.

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

Page 127: Interface Design Juggling

COLOR

TYPOGRAPHY

ICONOGRAPHY

MICROFORMATS

FLEXIBILITY

Page 128: Interface Design Juggling

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

THANK YOU.