After the Jump > Jamie Neely: Prototyping web typography.

501 views

Published on

Web designers are looking for a smarter and more creative workflow to meet the demands of an increasingly complex digital world. Consciousness is turning to content, and therefore typography as the starting point for the design process. But type online is tricky: it has to look good AND behave well. This has lead to a trend of setting type for the web as a working prototype from the very start of a digital project, and developing a branded experience outwards from that key ingredient: readability.

Jamie Neely was co-founder of Front, a web strategy, design and technology studio and is also the Creative Director at Typecast, which was recently acquired by Monotype. “We believe that as sites become more responsive, devices proliferate and screens shrink, typographic decisions become even more important and influential on site success.” http://www.typecast.com

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
501
On SlideShare
0
From Embeds
0
Number of Embeds
41
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

After the Jump > Jamie Neely: Prototyping web typography.

  1. 1. PROTOTYPING WITHWEB TYPOGRAPHYtweet @jamneely @typecastappJAMIE NEELY
  2. 2. TYPE FIRSTPROTOTYPINGPRACTICAL EXAMPLES
  3. 3. 2009/2010
  4. 4. 2009/2010With great power comes… (you know the rest)
  5. 5. 8%17%May‘12 May‘13Websites that use web fonts haveDOUBLED in the past yearSource: httparchive.com/trends
  6. 6. Sony USA homepage (set in ITC Avant Garde Gothic)
  7. 7. Microsoft worldwide homepage (set in Segoe UI)
  8. 8. “Into the Arctic”from Greenpeace (set in Brandon Grotesque and Rooney)
  9. 9. The World Wildlife Fund homepage (set in Open Sans and custom WWF font)
  10. 10. The World Wildlife Fund homepage (set in Open Sans and custom WWF font)The World Wildlife Fund
  11. 11. “Dadaab Stories”from Film Aid (set in Cubano and Nunito)
  12. 12. War Child
  13. 13. About.me web font options
  14. 14. TYPE FIRST
  15. 15. The shift
  16. 16. PROTOTYPING
  17. 17. In case you didnt get the memo,wireframing is dead and prototypesare the only way forward.— Joshua Porter, hubspot
  18. 18. IDEO sketchnote From 99u Conference by C Todd Lombardo
  19. 19. HTML/CSS is real in a wayPhotoshop will never be.— Jason Fried, 37 Signals
  20. 20. Typography for the Webis really hard to design anywhereother than inside the browser.— Viljami Salminen
  21. 21. CSSp {font-style: italic;font-weight: 400;font-family: MillerDisplay;}
  22. 22. Working with web fonts is hard
  23. 23. Typecast  screencastTypecast.com
  24. 24. Early demos of Typecast
  25. 25. Early demos of Typecast
  26. 26. Early demos of Typecast
  27. 27. PRACTICAL EXAMPLES
  28. 28. Type as brandThe reading experienceCross-screen journeys
  29. 29. Type as brandThe reading experienceCross-screen journeys
  30. 30. Type is the clothes that words wear.— Steve Mattheson
  31. 31. A quoteElevator pitchProject briefWord cloudHello worldSPECIMENS
  32. 32. Early typography prototyping in Typecast for Vogue.co.uk (courtesy of Kat Windley)
  33. 33. Early typography prototyping in Typecast for Vogue.co.uk (courtesy of Kat Windley)
  34. 34. A Typecast‘canvas’showing side-by-side type specimens
  35. 35. Early typography prototyping in Typecast for Vogue.co.uk (courtesy of Kat Windley)
  36. 36. The winning specimen, Brandon Grotesque and Caslon 224
  37. 37. Type as brandThe reading experienceCross-screen journeys
  38. 38. LikableLegibleReadable
  39. 39. Webfontspecimen.com from Tim Brown / Typekit
  40. 40. Helvetica (grey) vs Helvetica eText (red)
  41. 41. LikableLegibleReadable
  42. 42. Lorum ipsum et stupid
  43. 43. ListsNavigation schemesComment streamsGalleriesMastheads & footersGLOBAL CONTENTA blog articleHome pageMission statementAuthor bioAn event descriptionUNIQUE CONTENT
  44. 44. Rendering & clarityFamily size & weight availabilityLanguage supportOpenType supportFile size & page weightAccessibility & fall backsPERFORMANCE
  45. 45. Type as brandThe reading experienceCross-screen journeys
  46. 46. Smart phonesNot-so smart phonesComputers and tabletsE-readersCarsFridgesKiosks
  47. 47. Size of viewportScreen densityOrientationAspect ratioRendering technologyDEVICE & TECHNOLOGYNoise and distractionScreen-to-eye distanceLight & illuminationWeight to holdUser disabilityHUMAN & ENVIRONMENT
  48. 48. Working with web fonts is hard
  49. 49. Working with web fonts is hard
  50. 50. Working with web fonts is hard
  51. 51. Working with web fonts is hard
  52. 52. Working with web fonts is hard
  53. 53. Working with web fonts is hard
  54. 54. Working with web fonts is hard
  55. 55. Working with web fonts is hard
  56. 56. Working with web fonts is hard
  57. 57. Working with web fonts is hard
  58. 58. Working with web fonts is hard
  59. 59. Working with web fonts is hard
  60. 60. Working with web fonts is hard
  61. 61. Working with web fonts is hard
  62. 62. Working with web fonts is hard
  63. 63. Working with web fonts is hard
  64. 64. Working with web fonts is hard
  65. 65. Working with web fonts is hard
  66. 66. InvoicesReceiptsForgot passwordMarketing emailsNewslettersBlank slatesProduct updatesService maintenanceActivity updatesTRANSACTIONAL, MARKETING & SERVICE EMAILS
  67. 67. Type as brandSpecimens, font choiceThe reading experienceGlobal & unique contentCross-screen journeysDevices, locations & email
  68. 68. Working with web fonts is hardTypography
  69. 69. QUESTIONS?tweet @jamneely @typecastappJAMIE NEELY

×