Interface Design Juggling by Dan Cederholm

Notes taken at @media 07 at the Business Design Centre, Islington.

SimpleBits.com

Inspiration to the talk comes from last year in Oregan, which was held at the sametime as a juggling convention.

Juggling is... Keeping everything in the air! Special Announcement ToupeePal - Wig 2.0? toupeepal.com

Color

Start with a small color palette Color is emotional Online Color Tools wellstyled.com/tools/colorcecheme2/ Colorjack Take shades from a nature images Pixelate an image in Photoshop Dan normally starts with a blank canvas Then fill with color Take a start point i.e. a logo 4 colour palette Reuse the colors thoughout the design Then from the color palette select some lighter shades to compliment Link color is important. Keep the link color consistant. Squint at the page

Typography

Great typeography is invisible Web design is 95% typeography Too few fonts? In the renaissance the italian artist only had one font. DO THE BEST WITH WHAT WE HAVE Letter spacing, italicising Georgia - headings Verdana for everything else CSS tags make iti nteresting Good book - The elementso of typographic design Use the best ampersand available - different fonts The element of of typographic design for the web - webtypography.net Used Avenir for logo and search button Veer.com - buy a t shirt, and they'll send you stuff. Myfonts.com - newsletter

Favicons

The most importanty design element of any site, no really subtraction.com tanyamerone.com How to create favicons Three choices Scale the mark down to 16 x16 Choose a fragment of the logo Use something unique Iconographer is a good programme - create in Photoshop and paste into Iconographer

Add detail without adding complexity.

Understamd the limitations of current browsers

Suggest the box

Style elements of the box - add subtle border to backgorgn veerle's blog - good example

Microformats

Microformats are... microformats.org - about us page explains Mark up a contact like this Go to microformats to find the right style for your data - i.e for contacts, events etc hCard - Contact Information Go to the online code creator microformats.org/code/hcard/creator See Simplebits example - works using technorati THIS STUFF WORKS NOW Planting Seeds - Use semantic markup to allow other people to do cool stuff with it SPARQL.org - Scrugy - uses microformats to parse cork'd data - like an 'accidental' API Search for Can your website be your API? ToupePal uses hReview for reviews and hCalendar for events http://simplebits.com/publicatopns/speak/juggling What does the h stand for in hCard etc - means html