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
Labels: atmedia07, color, css, microformats, typography
