Download as PDF, PPTX
![web typography
what about non-Web safe fonts?
pixel renderings [image file]
sIFR [flash]
cufon [javascript]
typekit [javascript]](https://image.slidesharecdn.com/visualdesign-1287005290512-phpapp02/85/Visual-Design-33-320.jpg)
![Things I Know About Type [Field Guide]](https://cdn.slidesharecdn.com/ss_thumbnails/thingsiknowabouttype-fieldguide-121030022134-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Visual Design
- 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. about you how manypeople here are: usability practitioners? developers? designers? project managers? all of the above? other?
- 3.
- 4. beautiful data now availablefrom o’reilly grab a copy on amazon
- 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. a few thoughtson the Creative Process
- 7. everything we do isbased on work that came before
- 8. creatives are good dis-assemblersand re-assemblers
- 9. take disparate pieces andmake something new
- 10. systemize everything. the restrictionswill set you free.
- 11. cultivate your obsessions becomea fan of other designers and their work
- 12. typographers christian schwartz jonathan hoefler tobiasfrere-jones erik spiekerman ma hew carter
- 13. designers khoi vinh je reyzeldman jason santa maria cameron moll dan cedarholm
- 14. elements of thedesigner’s craft resources - know your materials inspiration tools techniques dirty, dirty tricks
- 15.
- 16.
- 17.
- 18.
- 19. a quick anatomylesson, 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) le er spacing - lower case, don’t do it! kerning - the space between individual le ers color - type vs. white space
- 21. everything you wantedto know about Web Safe Fonts in 2009 OS stats from codestyle.org
- 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. web typography: typespecimen via wikipedia The quick brown fox jumped over the lazy dog repeatedly from 1876 - 2009.
- 24. web typography: jiyhealth dashboard by juhan sonin
- 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. web typography: verdanain 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: arialin 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 Ho mann (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.
- 35. web typography: freefont resource - theleagueofmovabletype.com
- 36. web typography Junction abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Designed by: Caroline Hadilaksono (2009) Humanist sans-serif
- 37. web typography: freefont 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: typespecimen 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: typese ing resource - veer.com
- 42.
- 43. what was oldis 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. why bother witha grid? consistency framework for many pages ease of use pre-existing structure
- 45. the downside rigid adherencecan make a design seem lifeless
- 46. don’t forget thewhite space. the design needs to breathe padding is good 10 pixel increments
- 47. the history ofthe grid Swiss Graphic Design RICHARD HOLLIS
- 48. the history ofthe grid
- 49. the history ofthe grid
- 50. the history ofthe grid
- 51. the history ofthe grid
- 52. the history ofthe grid
- 53. the new yorktimes (www.nytimes.com)
- 54. the new yorktimes (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 applicationuser interface
- 60. grids: web applicationuser interface
- 61. a few tipsfor choosing Colors
- 62. color choice resource:kuler.adobe.com
- 63. color choice resource:colorotate.org
- 64. color start with black,white & gray
- 65. color use red foremphasis (sparingly)
- 66. color to expand a color palette use hsb (hue, saturation, brightness) try changing opacity
- 67.
- 68. icon choice resource:famfamfam.com
- 69.
- 70. icon resource: iconbuet.com
- 71.
- 72.
- 73.
- 74.
- 75. mp3 digital audiorecorder
- 76.
- 77.
- 78.