Visual Design
               for Web
               Sites &
     Web Applications
     UPA Boston Workshop

     Jonathan ...
about you
how many people here are:
usability practitioners?
developers?
designers?
project managers?
all of the above?
ot...
about hk
beautiful data
now available from o’reilly
grab a copy on amazon
overview
9:10 - 9:40     presentation part 1
9:40 - 10:10    selecting type
10:10 - 10:20   break
10:20 - 10:50 presentati...
a few thoughts on the

Creative Process
everything we do
is based on work that came before
creatives are good
dis-assemblers and re-assemblers
take disparate
pieces and make
something new
systemize everything.
the restrictions will set
you free.
cultivate your obsessions
become a fan of other designers
and their work
typographers
christian schwartz
jonathan hoefler
tobias frere-jones
erik spiekerman
ma   hew carter
designers
khoi vinh
je rey zeldman
jason santa maria
cameron moll
dan cedarholm
elements of the designer’s craft
resources - know your materials
inspiration
tools
techniques
dirty, dirty tricks
resources
type
grids
color
icons
images
software tools
photoshop
illustrator
omnigra le
indesign
acrobat
selecting

Typography
recommended
reading
a quick anatomy lesson, courtesy of fontshop.com
web typography



     typesetting considerations
    serif or sans serif?
    line length (12 words is good)
    leading ...
everything you wanted to know about

Web Safe Fonts
in 2009
OS stats from codestyle.org
web typography




    Georgia is
    gorgeous.
    Designed by: Ma hew Carter (1996)
    PC: 95.98% Mac 94.06%
    A tran...
web typography: type specimen via wikipedia




     The quick brown fox
     jumped over the lazy dog
     repeatedly fro...
web typography: ji yhealth dashboard by juhan sonin
web typography




    Verdana is so darn
    easy to read.
    Verdana bold is
    crazy big.
    Designed by: Ma hew Car...
web typography: verdana in action
web typography




    Lucida is the default of the
    Facebook phenomenon.

    Use Lucida Grande for
    Mac, and Lucid...
web typography




    Palatino is underused
    and underappreciated,
    especially the italic.
     1234567890 * &
    ...
web typography




    Arial is not nearly as fun
    as Helvetica, but has a
    wicked cool compatriot
    Arial Black.
...
web typography: arial in action
web typography




    Gill Sans
    abcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyz
    ABCDEFGHIJKLMNOPQRSTUVW...
web typography




    Helvetica Neue
    the quick brown fox jumped over
    the lazy dog
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
...
web typography



     what about non-Web safe fonts?
    pixel renderings [image file]
    sIFR [flash]
    cufon [javasc...
web typography: type tech
web typography: free font resource - theleagueofmovabletype.com
web typography




    Junction
    abcdefghijklmnopqrstuvwxyz
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    1234567890


    Designe...
web typography: free font resource - exljbris.com
web typography




    Anivers
    the quick brown fox jumped over
    the lazy dog
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    123...
web typography: type specimen resource - nicewebtype.com
web typography




    Meta
    the quick brown fox jumped over
    the lazy dog
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    1234567...
web typography: type se   ing resource - veer.com
using

Grid Systems
what was old is new again
Since the 1930s, graphic designers have used
grid systems for laying out pages. Over the past
5 ...
why bother with a grid?
consistency
framework for many pages
ease of use
pre-existing structure
the downside
rigid adherence can make a design seem lifeless
don’t forget the white space.
the design needs to breathe
padding is good
10 pixel increments
the history of the grid



Swiss
Graphic Design
RICHARD 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 choosing

Colors
color choice resource: kuler.adobe.com
color choice resource: colorotate.org
color




start with black, white & gray
color




use red for emphasis (sparingly)
color



    to expand a color palette
    use hsb (hue, saturation, brightness)
    try changing opacity
using

Icons
icon choice resource: famfamfam.com
icon resource: istockphoto.com
icon resource: iconbu et.com
capturing

Inspiration
sketching
researching
audio/video
moleskine notebooks
flip video camera
mp3 digital audio recorder
keynote
questions

& Answers
thank

You
jonfolle @hotknifedesign.com
www.twi er.com/jonfolle
617-848-5956
Upcoming SlideShare
Loading in...5
×

Visual Design for Web Sites and Web Applications

10,435

Published on

This slideshow accompanied a workshop for the Usability Professionals Association, Boston Chapter at Bentley College. It covers the basic visual design elements used in creating Web sites and Web application designs including typography, grids, color, and icons.

Published in: Design, Business, Technology
5 Comments
87 Likes
Statistics
Notes
No Downloads
Views
Total Views
10,435
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
1,615
Comments
5
Likes
87
Embeds 0
No embeds

No notes for slide

Visual Design for Web Sites and Web Applications

  1. 1. Visual Design for Web Sites & Web Applications UPA Boston Workshop Jonathan Folle President & Chief Creative O icer Hot Knife Design, Inc. jonfolle @hotknifedesign.com www.twi er.com/jonfolle 617-848-5956
  2. 2. about you how many people here are: usability practitioners? developers? designers? project managers? all of the above? other?
  3. 3. about hk
  4. 4. beautiful data now available from o’reilly grab a copy on amazon
  5. 5. overview 9:10 - 9:40 presentation part 1 9:40 - 10:10 selecting type 10:10 - 10:20 break 10:20 - 10:50 presentation part 2 10:50 - 11:20 selecting a grid, colors & icons 11:20 - 11:30 break 11:30 - 11:50 omnigra le & photoshop techniques 11:50 - 12:00 wrap up
  6. 6. a few thoughts on the Creative Process
  7. 7. everything we do is based on work that came before
  8. 8. creatives are good dis-assemblers and re-assemblers
  9. 9. take disparate pieces and make something new
  10. 10. systemize everything. the restrictions will set you free.
  11. 11. cultivate your obsessions become a fan of other designers and their work
  12. 12. typographers christian schwartz jonathan hoefler tobias frere-jones erik spiekerman ma hew carter
  13. 13. designers khoi vinh je rey zeldman jason santa maria cameron moll dan cedarholm
  14. 14. elements of the designer’s craft resources - know your materials inspiration tools techniques dirty, dirty tricks
  15. 15. resources type grids color icons images
  16. 16. software tools photoshop illustrator omnigra le indesign acrobat
  17. 17. selecting Typography
  18. 18. recommended reading
  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) le er spacing - lower case, don’t do it! kerning - the space between individual le ers color - type vs. white space
  21. 21. everything you wanted to know about Web Safe Fonts in 2009 OS stats from codestyle.org
  22. 22. web typography Georgia is gorgeous. Designed by: Ma hew 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: ji yhealth dashboard by juhan sonin
  25. 25. web typography Verdana is so darn easy to read. Verdana bold is crazy big. Designed by: Ma hew 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 Ho mann (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 se ing resource - veer.com
  42. 42. using Grid Systems
  43. 43. what was old is new again Since the 1930s, graphic designers have used grid systems for laying out pages. Over the past 5 years, Web site and Web application designers have shown an increased interest in the technique as well.
  44. 44. why bother with a grid? consistency framework for many pages ease of use pre-existing structure
  45. 45. the downside rigid adherence can make a design seem lifeless
  46. 46. don’t forget the white space. the design needs to breathe padding is good 10 pixel increments
  47. 47. the history of the grid Swiss Graphic Design RICHARD 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 choosing Colors
  62. 62. color choice resource: kuler.adobe.com
  63. 63. color choice resource: colorotate.org
  64. 64. color start with black, white & gray
  65. 65. color use red for emphasis (sparingly)
  66. 66. color to expand a color palette use hsb (hue, saturation, brightness) try changing opacity
  67. 67. using Icons
  68. 68. icon choice resource: famfamfam.com
  69. 69. icon resource: istockphoto.com
  70. 70. icon resource: iconbu et.com
  71. 71. capturing Inspiration
  72. 72. sketching researching audio/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. thank You jonfolle @hotknifedesign.com www.twi er.com/jonfolle 617-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.

×