Visual Design               for Web               Sites &     Web Applications     UPA Boston Workshop     Jonathan Follet...
about youhow many people here are:usability practitioners?developers?designers?project managers?all of the above?other?
about hk
beautiful datanow available from o’reillygrab a copy on amazon
overview9:10 - 9:40     presentation part 19:40 - 10:10    selecting type10:10 - 10:20   break10:20 - 10:50 presentation p...
a few thoughts on theCreative Process
everything we dois based on work that came before
creatives are gooddis-assemblers and re-assemblers
take disparatepieces and makesomething new
systemize everything.the restrictions will setyou free.
cultivate your obsessionsbecome a fan of other designersand their work
typographerschristian schwartzjonathan hoeflertobias frere-joneserik spiekermanmatthew carter
designerskhoi vinhjeffrey zeldmanjason santa mariacameron molldan cedarholm
elements of the designer’s craftresources - know your materialsinspirationtoolstechniquesdirty, dirty tricks
resourcestypegridscoloriconsimages
software toolsphotoshopillustratoromnigraffleindesignacrobat
selectingTypography
recommendedreading
a quick anatomy lesson, courtesy of fontshop.com
web typography     typesetting considerations    serif or sans serif?    line length (12 words is good)    leading (1.1 - ...
everything you wanted to know aboutWeb Safe Fontsin 2009OS stats from codestyle.org
web typography    Georgia is    gorgeous.    Designed by: Matthew Carter (1996)    PC: 95.98% Mac 94.06%    A transitional...
web typography: type specimen via wikipedia     The quick brown fox     jumped over the lazy dog     repeatedly from 1876 ...
web typography: jiffyhealth dashboard by juhan sonin
web typography    Verdana is so darn    easy to read.    Verdana bold is    crazy big.    Designed by: Matthew Carter (199...
web typography: verdana in action
web typography    Lucida is the default of the    Facebook phenomenon.    Use Lucida Grande for    Mac, and Lucida Sans   ...
web typography    Palatino is underused    and underappreciated,    especially the italic.     1234567890 * &    Designed ...
web typography    Arial is not nearly as fun    as Helvetica, but has a    wicked cool compatriot    Arial Black.    Desig...
web typography: arial in action
web typography    Gill Sans    abcdefghijklmnopqrstuvwxyz    abcdefghijklmnopqrstuvwxyz    ABCDEFGHIJKLMNOPQRSTUVWXYZ    1...
web typography    Helvetica Neue    the quick brown fox jumped over    the lazy dog    ABCDEFGHIJKLMNOPQRSTUVWXYZ    12345...
web typography     what about non-Web safe fonts?    pixel renderings [image file]    sIFR [flash]    cufon [javascript]  ...
web typography: type tech
web typography: free font resource - theleagueofmovabletype.com
web typography    Junction    abcdefghijklmnopqrstuvwxyz    ABCDEFGHIJKLMNOPQRSTUVWXYZ    1234567890    Designed by: Carol...
web typography: free font resource - exljbris.com
web typography    Anivers    the quick brown fox jumped over    the lazy dog    ABCDEFGHIJKLMNOPQRSTUVWXYZ    1234567890  ...
web typography: type specimen resource - nicewebtype.com
web typography    Meta    the quick brown fox jumped over    the lazy dog    ABCDEFGHIJKLMNOPQRSTUVWXYZ    1234567890    De...
web typography: type setting resource - veer.com
usingGrid Systems
what was old is new againSince the 1930s, graphic designers have usedgrid systems for laying out pages. Over the past5 yea...
why bother with a grid?consistencyframework for many pagesease of usepre-existing structure
the downsiderigid adherence can make a design seem lifeless
don’t forget the white space.the design needs to breathepadding is good10 pixel increments
the history of the gridSwissGraphic DesignRICHARD HOLLIS
the history of the grid
the history of the grid
the history of the grid
the history of the grid
the history of the grid
the new york times (www.nytimes.com)
the new york times (www.nytimes.com)
grid design resource: subtraction.com
grid design resource: netprotozo.com/grid
grid design resource: netprotozo.com/grid
grid design resource: 960.gs
grids: web application user interface
grids: web application user interface
a few tips for choosingColors
color choice resource: kuler.adobe.com
color choice resource: colorotate.org
colorstart with black, white & gray
coloruse red for emphasis (sparingly)
color    to expand a color palette    use hsb (hue, saturation, brightness)    try changing opacity
usingIcons
icon choice resource: famfamfam.com
icon resource: istockphoto.com
icon resource: iconbuffet.com
capturingInspiration
sketchingresearchingaudio/video
moleskine notebooks
flip video camera
mp3 digital audio recorder
keynote
questions& Answers
thankYoujonfollett@hotknifedesign.comwww.twitter.com/jonfollett617-848-5956
Upcoming SlideShare
Loading in...5
×

Visual design

497

Published on

http://noteandpoint.com/, http://presportal.ru/, http://presuniversity.com/ Портал Как сделать презентацию, Международная Высшая Школа Презентаций и Коммуникаций. Обучение презентациям. Тренинги по презентациям.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
497
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Visual design

  1. 1. Visual Design for Web Sites & Web Applications UPA Boston Workshop Jonathan Follett President & Chief Creative Officer Hot Knife Design, Inc. jonfollett@hotknifedesign.com www.twitter.com/jonfollett 617-848-5956
  2. 2. about youhow many people here are:usability practitioners?developers?designers?project managers?all of the above?other?
  3. 3. about hk
  4. 4. beautiful datanow available from o’reillygrab a copy on amazon
  5. 5. overview9:10 - 9:40 presentation part 19:40 - 10:10 selecting type10:10 - 10:20 break10:20 - 10:50 presentation part 210:50 - 11:20 selecting a grid, colors & icons11:20 - 11:30 break11:30 - 11:50 omnigraffle & photoshop techniques11:50 - 12:00 wrap up
  6. 6. a few thoughts on theCreative Process
  7. 7. everything we dois based on work that came before
  8. 8. creatives are gooddis-assemblers and re-assemblers
  9. 9. take disparatepieces and makesomething new
  10. 10. systemize everything.the restrictions will setyou free.
  11. 11. cultivate your obsessionsbecome a fan of other designersand their work
  12. 12. typographerschristian schwartzjonathan hoeflertobias frere-joneserik spiekermanmatthew carter
  13. 13. designerskhoi vinhjeffrey zeldmanjason santa mariacameron molldan cedarholm
  14. 14. elements of the designer’s craftresources - know your materialsinspirationtoolstechniquesdirty, dirty tricks
  15. 15. resourcestypegridscoloriconsimages
  16. 16. software toolsphotoshopillustratoromnigraffleindesignacrobat
  17. 17. selectingTypography
  18. 18. recommendedreading
  19. 19. a quick anatomy lesson, courtesy of fontshop.com
  20. 20. web typography typesetting considerations serif or sans serif? line length (12 words is good) leading (1.1 - 1.5 em) letter spacing - lower case, don’t do it! kerning - the space between individual letters color - type vs. white space
  21. 21. everything you wanted to know aboutWeb Safe Fontsin 2009OS stats from codestyle.org
  22. 22. web typography Georgia is gorgeous. Designed by: Matthew Carter (1996) PC: 95.98% Mac 94.06% A transitional serif that’s easy to read due to its large x-height.
  23. 23. web typography: type specimen via wikipedia The quick brown fox jumped over the lazy dog repeatedly from 1876 - 2009.
  24. 24. web typography: jiffyhealth dashboard by juhan sonin
  25. 25. web typography Verdana is so darn easy to read. Verdana bold is crazy big. Designed by: Matthew Carter (1996) PC: 98.34% Mac 95.45% Humanist sans-serif with large x-height for good legibility.
  26. 26. web typography: verdana in action
  27. 27. web typography Lucida is the default of the Facebook phenomenon. Use Lucida Grande for Mac, and Lucida Sans Unicode for PC. Designed by: Charles Bigelow & Chris Holmes (1985) PC: 96.14% Mac 94.46%
  28. 28. web typography Palatino is underused and underappreciated, especially the italic. 1234567890 * & Designed by: Hermann Zapf (1948) PC: 97.83% Mac 78.81%
  29. 29. web typography Arial is not nearly as fun as Helvetica, but has a wicked cool compatriot Arial Black. Designed by: Robin Nicholas & Patricia Saunders (1982) PC: 98.01% Mac 96.83%
  30. 30. web typography: arial in action
  31. 31. web typography Gill Sans abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Designed by: Eric Gill (1926) PC: 51.00% Mac 91.11% Humanist sans-serif
  32. 32. web typography Helvetica Neue the quick brown fox jumped over the lazy dog ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Designed by: Max Miedinger & Eduard Hoffmann (1957) PC: 1.33% Mac 93.33%
  33. 33. web typography what about non-Web safe fonts? pixel renderings [image file] sIFR [flash] cufon [javascript] typekit [javascript]
  34. 34. web typography: type tech
  35. 35. web typography: free font resource - theleagueofmovabletype.com
  36. 36. web typography Junction abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Designed by: Caroline Hadilaksono (2009) Humanist sans-serif
  37. 37. web typography: free font resource - exljbris.com
  38. 38. web typography Anivers the quick brown fox jumped over the lazy dog ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Designed by: Jos Buivenga (2008)
  39. 39. web typography: type specimen resource - nicewebtype.com
  40. 40. web typography Meta the quick brown fox jumped over the lazy dog ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Designed by: Erik Spiekermann (1999)
  41. 41. web typography: type setting resource - veer.com
  42. 42. usingGrid Systems
  43. 43. what was old is new againSince the 1930s, graphic designers have usedgrid systems for laying out pages. Over the past5 years, Web site and Web application designershave shown an increased interest in thetechnique as well.
  44. 44. why bother with a grid?consistencyframework for many pagesease of usepre-existing structure
  45. 45. the downsiderigid adherence can make a design seem lifeless
  46. 46. don’t forget the white space.the design needs to breathepadding is good10 pixel increments
  47. 47. the history of the gridSwissGraphic DesignRICHARD HOLLIS
  48. 48. the history of the grid
  49. 49. the history of the grid
  50. 50. the history of the grid
  51. 51. the history of the grid
  52. 52. the history of the grid
  53. 53. the new york times (www.nytimes.com)
  54. 54. the new york times (www.nytimes.com)
  55. 55. grid design resource: subtraction.com
  56. 56. grid design resource: netprotozo.com/grid
  57. 57. grid design resource: netprotozo.com/grid
  58. 58. grid design resource: 960.gs
  59. 59. grids: web application user interface
  60. 60. grids: web application user interface
  61. 61. a few tips for choosingColors
  62. 62. color choice resource: kuler.adobe.com
  63. 63. color choice resource: colorotate.org
  64. 64. colorstart with black, white & gray
  65. 65. coloruse red for emphasis (sparingly)
  66. 66. color to expand a color palette use hsb (hue, saturation, brightness) try changing opacity
  67. 67. usingIcons
  68. 68. icon choice resource: famfamfam.com
  69. 69. icon resource: istockphoto.com
  70. 70. icon resource: iconbuffet.com
  71. 71. capturingInspiration
  72. 72. sketchingresearchingaudio/video
  73. 73. moleskine notebooks
  74. 74. flip video camera
  75. 75. mp3 digital audio recorder
  76. 76. keynote
  77. 77. questions& Answers
  78. 78. thankYoujonfollett@hotknifedesign.comwww.twitter.com/jonfollett617-848-5956
  1. A particular slide catching your eye?

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

×