Juggling

940 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
940
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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. Georgia Verdana 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 way too” “Cool. I’ll do it that “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> PEOPLE APPLICATION 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

×