INTERFACE DE SIGN JUG GLING
        by DAN CEDERHOLM
http://www.flickr.com/photos/designerbrent/194242417/
http://www.flickr.com/photos/shawnzlea/137209564/
COLOR
TYPOGR APHY
ICONO GR APHY
MICROFORMATS
FLEXIB ILITY
Learn to juggle


 - Passing one object from one hand to the
   other.
 - Then two ...
 - Then three ...
 - You’re still n...
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?)
toupeepal.com
Color.

Start with a small, core palette. Reuse
that set throughout the design.
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
http://www.informationarchitects.jp/the-web-is-all-about-typography-period
Too few fonts?

     “During the Italian renaissance the
   typographer had one font to work with,
  and yet this period p...
“Information design is not about the use of
good typefaces, it is about the use of good
 typography ... Anyone can use typ...
DO THE BEST WITH
 WHAT WE HAVE
Verdana
Georgia
Headings   Everything else
CSS Typography

-font-family
-font-size
-font-weight
-letter-spacing
-text-transform
-text-align
h1 {
  font-family: Georgia, serif;
  font-weight: normal;
  }
h3 {
  font-family: Georgia, serif;

 font-size: 90%;

 text-transform: uppercase;

 letter-spacing: 2px;
  color: #963;
  }
5.1.3 In heads and titles, use the best available ampersand.
<span class=quot;ampquot;>&amp;</span>

span.amp {

 font-size: 110%;

 font-family: quot;Goudy Old Stylequot;, quot;Palat...
webtypography.net
Harmonize type set
in graphics.
Use as an opportunity to treat type
consistently.
Avenir
Favicons.

The most important design element of
any site. No, really.
subtraction.com
tanyamerone.com
REALLY EASY
       or
REALLY DIFFICULT
Three choices


- 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
microformats are ...


 - Confusing
 - A waste of time
 - Something geeks do with a lot of time on
   their hands
“Designed for humans first and
machines second, microformats are a
set of simple, open data formats built
upon existing an...
“Cool. I’ll do it that
                                                     “Cool. I’ll do it that
                       ...
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

<div class=quot;vcardquot;>
 <a class=quot;url fn hidequot; href=quot;http://simplebits.comquot;>Dan Cederholm</a>
...
hCard

<div class=quot;vcardquot;>
 <a class=quot;url fn hidequot; href=quot;http://simplebits.comquot;>Dan Cederholm</a>
...
SEEING IS BELIEVING
THIS STUFF WORKS NOW
hReview


hReview
rel-tag
hCard
PLANTING SEEDS
“OBLIVIOUS DEVELOPMENT”




               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
XFN
                hCard



MICROFORMATS WORK
     TOGETHER

      hReview
What good is one brick?

                        XFN

                hCard         hReview

      rel-tag      hCalendar ...
hReview




          hCalendar
WIGGREGATOR?
microformats.org
BULLETPROOFING
“Bulletproof”


 - Embracing flexibility
 - Preparing for worst-case scenarios
 - Protecting your designs from “breaking”
...
INTEGRITY TESTS
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;
 
}
WOW!
WOW!
Turn CSS off.

Give your design an x-ray. A quot;10-
second usability testquot; isn't scientific—
but it can help illustra...
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;
  }
Validate.

Validate markup and stylesheets when
possible—especially during the design
process.
COLOR
TYPOGR APHY
ICONO GR APHY
MICROFORMATS
FLEXIB ILITY
THANK YOU.
http://simplebits.com/publictions/speak/juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Juggling
Upcoming SlideShare
Loading in...5
×

Juggling

1,319

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,319
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
36
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Juggling"

  1. 1. INTERFACE DE SIGN JUG GLING by DAN CEDERHOLM
  2. 2. http://www.flickr.com/photos/designerbrent/194242417/
  3. 3. http://www.flickr.com/photos/shawnzlea/137209564/
  4. 4. COLOR TYPOGR APHY ICONO GR APHY MICROFORMATS FLEXIB ILITY
  5. 5. Learn to juggle - Passing one object from one hand to the other. - Then two ... - Then three ... - You’re still not juggling.
  6. 6. Juggling is ... - Keeping all objects consistently in the air - Adapting to shift, changes in pattern, etc.
  7. 7. MY BACKYARD http://www.flickr.com/photos/stuartyeates/45919678/
  8. 8. SPECIAL ANNOUNCEMENT
  9. 9. (Wig 2.0?)
  10. 10. toupeepal.com
  11. 11. Color. Start with a small, core palette. Reuse that set throughout the design.
  12. 12. http://wellstyled.com/tools/colorscheme2/index-en.html
  13. 13. Choosing color palettes from nature photos
  14. 14. Filter > Pixelate > Mosaic... #b67f72 #393643
  15. 15. SCULPTING an INTERFACE
  16. 16. Link color carries weight. On link-heavy pages, link color can be an important design element.
  17. 17. TYPOGRAPHY
  18. 18. GREAT TYPOGRAPHY IS INVISIBLE
  19. 19. http://www.informationarchitects.jp/the-web-is-all-about-typography-period
  20. 20. 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
  21. 21. “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
  22. 22. DO THE BEST WITH WHAT WE HAVE
  23. 23. Verdana Georgia Headings Everything else
  24. 24. CSS Typography -font-family -font-size -font-weight -letter-spacing -text-transform -text-align
  25. 25. h1 { font-family: Georgia, serif; font-weight: normal; }
  26. 26. h3 { font-family: Georgia, serif; font-size: 90%; text-transform: uppercase; letter-spacing: 2px; color: #963; }
  27. 27. 5.1.3 In heads and titles, use the best available ampersand.
  28. 28. <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; }
  29. 29. webtypography.net
  30. 30. Harmonize type set in graphics. Use as an opportunity to treat type consistently.
  31. 31. Avenir
  32. 32. Favicons. The most important design element of any site. No, really.
  33. 33. subtraction.com
  34. 34. tanyamerone.com
  35. 35. REALLY EASY or REALLY DIFFICULT
  36. 36. Three choices - Scale the mark down to 16x16 - Choose a fragment to focus on - Use something unique
  37. 37. salon. com technorati.com saturn.com andybudd.com adidas.com veer.com
  38. 38. zeldman. com sixfoot6.com sidesh0w.com photomatt.net meyerweb.com adactio.com
  39. 39. CREATE IN PHOTOSHOP PASTE INTO ICONOGRAPHER
  40. 40. Add detail without adding complexity. Understand the limitations of background images and boring boxes. Please recycle.
  41. 41. Suggest the box. Style portions of the box with minimal background images for simple markup and future-proofing.
  42. 42. Reuse/Recycle. Simplify design and process by reusing themes, color, graphics.
  43. 43. diag-bg.gif
  44. 44. MICROFORMATS
  45. 45. microformats are ... - Confusing - A waste of time - Something geeks do with a lot of time on their hands
  46. 46. “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
  47. 47. “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
  48. 48. CONTACT INFO? PRODUCT REVIEW? EVENT DETAILS? RELATIONSHIPS?
  49. 49. GUIDED BY VOICES http://www.flickr.com/photos/bluetypewriter/174367695/
  50. 50. USE WHAT WORKS TODAY
  51. 51. hCard (contact information)
  52. 52. http://microformats.org/code/hcard/creator
  53. 53. 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>
  54. 54. 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>
  55. 55. SEEING IS BELIEVING
  56. 56. THIS STUFF WORKS NOW
  57. 57. hReview hReview
  58. 58. rel-tag
  59. 59. hCard
  60. 60. PLANTING SEEDS
  61. 61. “OBLIVIOUS DEVELOPMENT” http://www.flickr.com/photos/96434059@N00/196061290/
  62. 62. I HAD NO IDEA WHAT HE WAS TALKING ABOUT
  63. 63. “ACCIDENTAL API” —Brian Oberkirch
  64. 64. http://allinthehead.com/retro/301/can-your-website-be-your-api
  65. 65. XFN hCard MICROFORMATS WORK TOGETHER hReview
  66. 66. What good is one brick? XFN hCard hReview rel-tag hCalendar hResume
  67. 67. hReview hCalendar
  68. 68. WIGGREGATOR?
  69. 69. microformats.org
  70. 70. BULLETPROOFING
  71. 71. “Bulletproof” - Embracing flexibility - Preparing for worst-case scenarios - Protecting your designs from “breaking” - Catch-phrase to sell books and secure speaking engagements
  72. 72. INTEGRITY TESTS
  73. 73. Turn images off. When images are disabled, is the site still readable?
  74. 74. Styled alt text #header #logo { float: left; margin: 0 0 20px 0; color: #fff; }
  75. 75. WOW!
  76. 76. WOW!
  77. 77. 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.
  78. 78. Bump up text size. Increase text size to see how the design reacts. Can it adapt to varying amounts of content?
  79. 79. #wrap { width: 50em; } #content { width: 30em; } #sidebar { width: 20em; }
  80. 80. Validate. Validate markup and stylesheets when possible—especially during the design process.
  81. 81. COLOR TYPOGR APHY ICONO GR APHY MICROFORMATS FLEXIB ILITY
  82. 82. THANK YOU. http://simplebits.com/publictions/speak/juggling
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×