INTER FACE DE SIGN J UG GLING by DAN CEDERHOLM
http://www.flickr.com/photos/designerbrent/194242417/
COLO R TYPOGRA PHY ICONO GR AP HY MICRO FO RMATS FLEXIB IL IT Y
http://www.flickr.com/photos/shawnzlea/137209564/
Learning to juggle - Passing one object from one hand to the other. - Then two ... - Then three ... - You’re still not juggling.
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
COLOR IS EMOTIONAL
“I hate that green. It reminds me of my exgirlfriend’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 typography ... Anyone can use typefaces, some can choose good typefaces, but only few master typography.”
DO THE BEST WITH WHAT WE HAVE
—Oliver Reichenstein
Georgia
Verdana
Headings
Everything else
CSS Typography -font-family -font-size -font-weight -letter-spacing
h1 { font-family: Georgia, serif; font-weight: normal; }
-text-transform -text-align
h3 { font-family: Georgia, serif; ! font-size: 90%; ! text-transform: uppercase; ! letter-spacing: 2px; color: #963; }
<span class="amp">&
5.1.3 In heads and titles, use the best available ampersand.
span.amp { ! font-size: 110%; ! 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 or
REALLY DIFFICULT
- Scale the mark down to 16x16 - Choose a fragment to focus on - 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
MICROFORMATS
“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
- Something geeks do with a lot of time on their hands
“I'm going to mark up a contact like this...”
“Cool. I’ll do it that way too”“Cool. I’ll do it that way too” “Cool. I’ll do it that way too” “Cool. I’ll do it that way too”
PEOPLE
APPLICATION
CSS
CONTACT INFO? PRODUCT REVIEW? EVENT DETAILS? RELATIONSHIPS?
GUIDED BY VOICES
http://www.flickr.com/photos/bluetypewriter/174367695/
USE WHAT WORKS TODAY
hCard (contact information)
http://microformats.org/code/hcard/creator
hCard
hCard
Dan Cederholm
Dan Cederholm
SimpleBits, LLC
SimpleBits, LLC
60 Washington Street, Suite 402
60 Washington Street, Suite 402
<span class="locality">Salem,
<span class="locality">Salem,
<span class="region">MA,
<span class="region">MA,
<span class="postal-code">01970
<span class="postal-code">01970
USA
USA
<span class="type">Fax: <span class="value">+1 978 744 0760
<span class="type">Fax: <span class="value">+1 978 744 0760
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 TOGETHER
hCard rel-tag
hReview
hCalendar
hResume
hReview
hReview
WIGGREGATOR? hCalendar
microformats.org
BULLETPROOFING
“Bulletproof” - Embracing flexibility - Preparing for worst-case scenarios - 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; ! }
INTEGRITY TESTS
WOW!
WOW!
Turn CSS off. Give your design an x-ray. A "10second 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. Validate markup and stylesheets when possible—especially during the design process.
TYPOGRA PHY ICONO GR AP HY MICRO FORMATS FLEXI BIL ITY
THAN K YOU. http://simplebits.com/publications/speak/juggling