This document discusses various aspects of interface design including color, typography, iconography, microformats, and flexibility. It provides tips on choosing color palettes, using typography effectively, designing icons and favicons, implementing microformats, and making interfaces adaptable. Examples of microformats like hCard and hCalendar are shown to demonstrate how they can work together to provide structured data on the web. The document emphasizes starting simply, reusing elements, and testing designs for robustness by turning off images and CSS.

1. INTERFACE DE SIGN JUG GLING
by DAN CEDERHOLM

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

4. http://www.flickr.com/photos/shawnzlea/137209564/

5. COLOR
TYPOGR APHY
ICONO GR APHY
MICROFORMATS
FLEXIB ILITY

6. Learn to juggle
- Passing one object from one hand to the
other.
- Then two ...
- Then three ...
- You’re still not juggling.

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

8. MY BACKYARD
http://www.flickr.com/photos/stuartyeates/45919678/

9. SPECIAL ANNOUNCEMENT

10. (Wig 2.0?)

11. toupeepal.com

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

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

15. Choosing color palettes from nature photos

16. Filter > Pixelate > Mosaic...
#b67f72
#393643

22. SCULPTING
an INTERFACE

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

31. TYPOGRAPHY

33. GREAT TYPOGRAPHY IS
INVISIBLE

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

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

36. “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

37. DO THE BEST WITH
WHAT WE HAVE

39. Verdana
Georgia
Headings Everything else

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

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

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

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

45. <span class=quot;ampquot;>&amp;</span>
span.amp {
font-size: 110%;
font-family: quot;Goudy Old Stylequot;, quot;Palatinoquot;,
quot;Book Antiquaquot;, serif;
font-style: italic;
}

46. webtypography.net

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

48. Avenir

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

51. subtraction.com

52. tanyamerone.com

54. REALLY EASY
or
REALLY DIFFICULT

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

57. salon. com technorati.com
saturn.com andybudd.com
adidas.com veer.com

59. zeldman. com sixfoot6.com
sidesh0w.com photomatt.net
meyerweb.com adactio.com

61. CREATE IN PHOTOSHOP
PASTE INTO ICONOGRAPHER

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

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

71. Reuse/Recycle.
Simplify design and process by reusing
themes, color, graphics.

72. diag-bg.gif

74. MICROFORMATS

75. microformats are ...
- Confusing
- A waste of time
- Something geeks do with a lot of time on
their hands

76. “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

77. “Cool. I’ll do it that
“Cool. I’ll do it that
way too”
“I'm going to mark way too”
up a contact like
this...” “Cool. I’ll do it that
way too”
“Cool. I’ll do it th
way too”
<div class=quot;vcardquot;>
<a class=quot;url fnquot; href=quot;http://simplebits.com/quot;>Dan Cederholm</a>
<div class=quot;orgquot;>SimpleBits, LLC</div>
</div>
APPLICATION
PEOPLE CSS

78. CONTACT INFO?
PRODUCT REVIEW?
EVENT DETAILS?
RELATIONSHIPS?

79. GUIDED BY VOICES
http://www.flickr.com/photos/bluetypewriter/174367695/

81. USE WHAT WORKS TODAY

82. hCard
(contact information)

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

84. hCard
<div class=quot;vcardquot;>
<a class=quot;url fn hidequot; href=quot;http://simplebits.comquot;>Dan Cederholm</a>
<div class=quot;orgquot;>SimpleBits, LLC</div>
<div class=quot;adrquot;>
<div class=quot;street-addressquot;>60 Washington Street, Suite 402</div>
<span class=quot;localityquot;>Salem</span>,
<span class=quot;regionquot;>MA</span>,
<span class=quot;postal-codequot;>01970</span>
<abbr class=quot;country-namequot; title=quot;United States of Americaquot;>USA</abbr>
</div>
<div class=quot;telquot;>
<span class=quot;typequot;>Fax</span>:
<span class=quot;valuequot;>+1 978 744 0760</span>
</div>
</div>

85. hCard
<div class=quot;vcardquot;>
<a class=quot;url fn hidequot; href=quot;http://simplebits.comquot;>Dan Cederholm</a>
<div class=quot;orgquot;>SimpleBits, LLC</div>
<div class=quot;adrquot;>
<div class=quot;street-addressquot;>60 Washington Street, Suite 402</div>
<span class=quot;localityquot;>Salem</span>,
<span class=quot;regionquot;>MA</span>,
<span class=quot;postal-codequot;>01970</span>
<abbr class=quot;country-namequot; title=quot;United States of Americaquot;>USA</abbr>
</div>
<div class=quot;telquot;>
<span class=quot;typequot;>Fax</span>:
<span class=quot;valuequot;>+1 978 744 0760</span>
</div>
</div>

86. SEEING IS BELIEVING

87. THIS STUFF WORKS NOW

89. hReview
hReview

90. rel-tag

91. hCard

92. PLANTING SEEDS

93. “OBLIVIOUS DEVELOPMENT”
http://www.flickr.com/photos/96434059@N00/196061290/

98. I HAD NO IDEA WHAT HE
WAS TALKING ABOUT

100. “ACCIDENTAL API”
—Brian Oberkirch

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

102. XFN
hCard
MICROFORMATS WORK
TOGETHER
hReview

103. What good is one brick?
XFN
hCard hReview
rel-tag hCalendar hResume

104. hReview
hCalendar

105. WIGGREGATOR?

106. microformats.org

107. BULLETPROOFING

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

109. INTEGRITY TESTS

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

112. Styled alt text
#header #logo {
float: left;
margin: 0 0 20px 0;
color: #fff;
}

115. WOW!

117. WOW!

118. Turn CSS off.
Give your design an x-ray. A quot;10-
second usability testquot; isn't scientific—
but it can help illustrate separation of
structure and presentation.

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

124. #wrap {
width: 50em;
}
#content {
width: 30em;
}
#sidebar {
width: 20em;
}

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

127. COLOR
TYPOGR APHY
ICONO GR APHY
MICROFORMATS
FLEXIB ILITY

128. THANK YOU.
http://simplebits.com/publictions/speak/juggling