Visual design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share
  • 623 views

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

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

Statistics

Views

Total Views
623
Views on SlideShare
623
Embed Views
0

Actions

Likes
1
Downloads
16
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Visual design Presentation Transcript

  • 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. about youhow many people here are:usability practitioners?developers?designers?project managers?all of the above?other?
  • 3. about hk
  • 4. beautiful datanow available from o’reillygrab a copy on amazon
  • 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. a few thoughts on theCreative Process
  • 7. everything we dois based on work that came before
  • 8. creatives are gooddis-assemblers and re-assemblers
  • 9. take disparatepieces and makesomething new
  • 10. systemize everything.the restrictions will setyou free.
  • 11. cultivate your obsessionsbecome a fan of other designersand their work
  • 12. typographerschristian schwartzjonathan hoeflertobias frere-joneserik spiekermanmatthew carter
  • 13. designerskhoi vinhjeffrey zeldmanjason santa mariacameron molldan cedarholm
  • 14. elements of the designer’s craftresources - know your materialsinspirationtoolstechniquesdirty, dirty tricks
  • 15. resourcestypegridscoloriconsimages
  • 16. software toolsphotoshopillustratoromnigraffleindesignacrobat
  • 17. selectingTypography
  • 18. recommendedreading
  • 19. a quick anatomy lesson, courtesy of fontshop.com
  • 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. everything you wanted to know aboutWeb Safe Fontsin 2009OS stats from codestyle.org
  • 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. web typography: type specimen via wikipedia The quick brown fox jumped over the lazy dog repeatedly from 1876 - 2009.
  • 24. web typography: jiffyhealth dashboard by juhan sonin
  • 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. web typography: verdana in action
  • 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. web typography Palatino is underused and underappreciated, especially the italic. 1234567890 * & Designed by: Hermann Zapf (1948) PC: 97.83% Mac 78.81%
  • 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. web typography: arial in action
  • 31. web typography Gill Sans abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Designed by: Eric Gill (1926) PC: 51.00% Mac 91.11% Humanist sans-serif
  • 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. web typography what about non-Web safe fonts? pixel renderings [image file] sIFR [flash] cufon [javascript] typekit [javascript]
  • 34. web typography: type tech
  • 35. web typography: free font resource - theleagueofmovabletype.com
  • 36. web typography Junction abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Designed by: Caroline Hadilaksono (2009) Humanist sans-serif
  • 37. web typography: free font resource - exljbris.com
  • 38. web typography Anivers the quick brown fox jumped over the lazy dog ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Designed by: Jos Buivenga (2008)
  • 39. web typography: type specimen resource - nicewebtype.com
  • 40. web typography Meta the quick brown fox jumped over the lazy dog ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Designed by: Erik Spiekermann (1999)
  • 41. web typography: type setting resource - veer.com
  • 42. usingGrid Systems
  • 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. why bother with a grid?consistencyframework for many pagesease of usepre-existing structure
  • 45. the downsiderigid adherence can make a design seem lifeless
  • 46. don’t forget the white space.the design needs to breathepadding is good10 pixel increments
  • 47. the history of the gridSwissGraphic DesignRICHARD HOLLIS
  • 48. the history of the grid
  • 49. the history of the grid
  • 50. the history of the grid
  • 51. the history of the grid
  • 52. the history of the grid
  • 53. the new york times (www.nytimes.com)
  • 54. the new york times (www.nytimes.com)
  • 55. grid design resource: subtraction.com
  • 56. grid design resource: netprotozo.com/grid
  • 57. grid design resource: netprotozo.com/grid
  • 58. grid design resource: 960.gs
  • 59. grids: web application user interface
  • 60. grids: web application user interface
  • 61. a few tips for choosingColors
  • 62. color choice resource: kuler.adobe.com
  • 63. color choice resource: colorotate.org
  • 64. colorstart with black, white & gray
  • 65. coloruse red for emphasis (sparingly)
  • 66. color to expand a color palette use hsb (hue, saturation, brightness) try changing opacity
  • 67. usingIcons
  • 68. icon choice resource: famfamfam.com
  • 69. icon resource: istockphoto.com
  • 70. icon resource: iconbuffet.com
  • 71. capturingInspiration
  • 72. sketchingresearchingaudio/video
  • 73. moleskine notebooks
  • 74. flip video camera
  • 75. mp3 digital audio recorder
  • 76. keynote
  • 77. questions& Answers
  • 78. thankYoujonfollett@hotknifedesign.comwww.twitter.com/jonfollett617-848-5956