Visual design

657 views

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
657
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
21
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

×