Above the Fold: Web Typography for Print Designers

1,257 views

Published on

This presentation was originally give on September 11, 2011 in at the Type Directors Club in New York City.

This talk focuses on Web typography, specifically for print designers looking to transition to Web design.

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,257
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Above the Fold: Web Typography for Print Designers

  1. 1. Feeling social? Use hashtag #tdc_salon
  2. 2. Type Directors Club Presents: Web Type for Print DesignersBrian Miller9.22.11
  3. 3. Brian MillerOwner of the Brian Miller Design GroupEducationHartford Art School, BFA, Graphic Design, magna cum laudePratt Institute, MPS, Design Management, with distinctionExperienceGartner, Global Creative DirectorWunderman Interactive, Associate Creative DirectorPublcis Modem, Senior Art DirectorAuthorAbove the Fold: Understanding the Principles of Successful Web Site DesignPublished by HOW Design Books, March 2011ServiceType Directors ClubDirector at Large, Web Committee Chairman2012 Competition Chair (TDC58)
  4. 4. Above the What? A bit about the book
  5. 5. @taylor_jacob@Above_the_Fold Bought your book yesterday.Was floored to find a Web Design resource thatwasnt 90% CSS Tutorials. Thank you.
  6. 6. Analyze Client User Plan Above the Fold Designer Design
  7. 7. The Internet: According to NFL coach Vince Lombardi
  8. 8. This is a football
  9. 9. This is the Internet
  10. 10. Amazon.com launches DrudgeReport.com Napster.com, a CompuServe Craigslist.org Yahoo.com launches launches peer-to-peer file NYTimes.com changes its name to expands beyond sharing Web site, Image of Microsoft. launches Lycos.com Image of Apple.com San Francisco launches Wikipedia.org com from 1994 from 1997 (originally launched CraigsList.org Cascading style launches Microsoft releases in 1995) WC3 is formed to launches sheets (CSS) Ebay.com launchesMosaic, the Internet Explorer Microsoft releases standardize HTML introduced Google Adwords Friendster.comfirst consumer Microsoft releases Netscape version 5, which Internet Explorer launches launchesWeb-browsing Netscape Navigator Internet Explorer Microsoft releases Communicator Google.com, founded allowed users to version 6, whichapplication, is Web browser versions 1 (August) Internet Explorer replaces Netscape by Larry Page and save Web pages for Netscape version 6 included support Netscape version 7released is released and 2 (November) version 4 Navigator Sergey Brin, launches the first time is released for CSS is released 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002
  11. 11. Twitter.com launches Microsoft releases Twitter.com is Internet Explorer used to organize Facebook.com version 7, which Microsoft launches and mobilizeMySpace.com launches introduced tabbed Bing.com to compete relief efforts inlaunches Flickr.com launches browsing and a Candidate Web sites with Google Haiti followingWordPress content feed reader Apple introduces and social media play a the devastating Mozilla Firefox Web Microsoft releasesblogging software is the iPhone and pivotal role in the earthquake. browser is released, Mozilla Firefox Internet Explorerintroduced. mobile apps U.S. elections which utilizes the version 2 is released version 8 with Mozilla FirefoxApple releases the Gecko layout engine YouTube.com with tabbed Netscape Navigator Mozilla Firefox improved support for version 3.6 isSafari Web browser to display Web pages launches browsing version 9 is released version 3 is released Ajax, CSS, and RSS released 2003 2004 2005 2006 2007 2008 2009 2010
  12. 12. I think they mean “designers”
  13. 13. 97% 76% 59% 46% Millions of Colors Higher Than Windows XP Firefox 1024 x 768Color depth Monitor resolution Operating system Browser
  14. 14. Form & function of Web design: Design conventions
  15. 15. Micro Bar 88 x 31, 10K, :15 Vertical Banner 120 x 240, 30K, :15Pop-Under Button 1720 x 300, 40K, :15 120 x 90, 20K, :15 Button 2 Square Button 120 x 60, 20K, :15Leaderboard 125 x 125, 30K, :15728 x 90, 40K, :15 Half-Page Ad Wide Skyscraper Skyscraper 300 x 600, 40K, :15 160 x 600, 40K, :15 120 x 600, 40K, :15 Full Banner 468 x 60, 40K, :15 Half Banner 234 x 60, 30K, :15Vertical Rectangle Square Pop-Up 3:1 Rectangle Large Rectangle Medium Rectangle Rectangle240 x 400, 40K, :15 250 x 250, 40K, :15 300 x 100, 40K, :15 336 x 280, 40K, :15 300 x 250, 40K, :15 180 x 150, 40K, :15
  16. 16. Search engine optimization (SEO)Getting discovered: Browsing and searching
  17. 17. Crawler-based search engines 64 % Google.com Google 64% Yahoo! 16% Bing 11% AOL Search 3% Ask 2% Other 3%
  18. 18. Elements and Weight of Google Ranking1. Trust in the Host Domain2. Link Popularity3. Anchor Text of External Links4. On-Page Keyword Usage5. Traffic and Click-Through Rate6. Social Graph Metrics7. Registration and Host Data
  19. 19. KeywordsIt’s essential to select keywordsbased on the customer’s point ofview—not necessarily the client’sinternal vernacular.
  20. 20. Search engine optimization: Designing for spidersDesigning for SEO means using Web-specific design methods,especially when it comes to displaying content, that yield visuallyinteresting and dynamic results that search engines can index.
  21. 21. Site planning: Information architectureInformation Architecture (IA) is the blueprint that maps out thepages of a site and illustrates their relative weight or importance.
  22. 22. Anatomy of a Web page: Design conventions
  23. 23. 123 5467
  24. 24. Anatomy of a Web page: HeadersHeaders act as a grounding force for the user by identifyingand visually unifying all the pages of a site.
  25. 25. Anatomy of a Web page: NavigationNavigation is a broad term that encompasses any aspect of a sitethat links a user to another area of the site and is the cornerstoneof a site’s usability.
  26. 26. Anatomy of a Web page: Feature areaTo achieve hierarchy, designers use a focal point—an area in thecomposition that is perceived before all others.
  27. 27. Anatomy of a Web page: Body/contentBreaks in the content allow users to scan the layout quickly andgives them multiple entry points into the page.
  28. 28. Organization & unity: ModularityModularity in Web design not only helps create design efficiencies,but it can also aid in usability by repeating recognizable elementsthat a user can identify.
  29. 29. Organization & unity: ContainmentBorders, lines, and boxes can be helpful in defining the space andcontaining elements within sub-groups.
  30. 30. Anatomy of a Web page: SidebarSidebars are useful for providing supporting informationas well as advertising space.
  31. 31. Anatomy of a Web page: FooterThe footer has emerged over recent years as a critical partof Web design, performing tasks for both the user and searchengine optimization.
  32. 32. Anatomy of a Web page: BackgroundBackgrounds can be used to create depth or dimension, add richnesswith texture and color to a page, or even expand the content beyondthe borders of the page.
  33. 33. Elements of Web design style
  34. 34. Elements of Web design style: ColorRelationships of color help users create associations amongotherwise unrelated elements within a design. Contrasting color canhelp a designer guide and direct a user through a layout.
  35. 35. Web design style: TextureAdding texture to a Web design gives the user the sense of a tactileexperience and helps connect him or her to the content of a page.
  36. 36. Web design style: Imagery & iconographyThe use of images or iconography can mean replacing wordydescriptions with single images, making a layout easier for a userto quickly get information.
  37. 37. Web design style: ScaleContrast of size or scale is one way designers can add a sense ofdrama to a design.
  38. 38. Web design style: Depth & DimensionApplying depth and dimension to a page gives it an element ofrealism, and, like texture, gives the user a more tactile experience.
  39. 39. Web design style: AnimationAnimation is a tool used by digital designers to layerinformation, create a sequence of information, or simplysurprise and delight the user.
  40. 40. Web design style: VariabilityWhat was once considered to be unthinkable can now be a playfulway to add relevance and variety.
  41. 41. Web Typography
  42. 42. Types of Web typeThe optimal choice for displaying type depends mostly on theneeds the client and the capabilities of the target user.Designer Control User Control Images of type Font replacement Type and image Web-safe type (chirp.twitter.com) (typekit.com) combination (seedconference.com) (branding.sva.edu)
  43. 43. Web typography: Images of typeImages of type enable a designer to exactly match brandingrequirements for a client, or express a concept precisely asthe designer (or client) envisions.
  44. 44. Web typography: Web-safe typeBeing able to do more with less is an essential skillfor a Web designer.
  45. 45. Windows MacArial Arial, HelveticaArial Black Arial Black, GadgetComic Sans MS Comic Sans MSCourier New Courier New, CourierGeorgia GeorgiaImpact Impact, CharcoalLucida Console MonacoLucida Sans Unicode Lucida GrandePalatino Linotype PalatinoBook Antiqua GeorgiaTahoma TahomaTimes New Roman TimesTrebuchet MS Trebuchet MSVerdana VerdanaSymbol SymbolWebdings WebdingsWingdings Zapf DingbatsMS Sans Serif GenevaMS Serif Georgia
  46. 46. Font stacksDesign is about having a plan.Web design is about having a backup plan.font-family = Georgia, [if you don’t have that then use]“Times New Roman”, [if you don’t have that then use]Times, [if you don’t have that, please just give mesomething with a…] serif;
  47. 47. Font stacksVerdana, Arial, Helvetica, sans-serifTahoma, Geneva, Arial, sans-serifGeorgia, Times New Roman, Times, serifPalatino Linotype, Book Antiqua, Palatino, serifCourier New, Courier, monospaceLucida Console, Monaco, Courier, monospace
  48. 48. 200-Point Georgia 200-Point Times RomanDesigned in 1996 by Matthew Carter Designed in 1931 by Stanley Morison(hinted for optimal screen viewing by and Victor Lardent (Monotype) forTom Rickner) specifically for the Web the Times newspaper Counters X-Height Cap Height Baseline The larger counters Notice the difference Even the height of The line on which on Georgia increase in x-height at the the capital letters letters sit and the legibility same type size differ at the same starting point when point size measuring the x-height and cap height
  49. 49. Web typography: Font replacement & embeddingFonts represent valuable intellectual property and @font-face leavessome question as to the end user’s ability to reuse the font withoutpaying for it.
  50. 50. @font-face@font-face {font-family: “Dispatch”;src: url(http://www.WebSite.com/fonts/dispatch.ttf);format(“truetype”);}h1 { font-family: “Dispatch”, sans-serif }
  51. 51. TypeKit.comTypekit.com offers subscription-based access to fonts forWeb sites, including fonts from TypeTogether’s font foundry,also seen here.
  52. 52. Web typography: Font conversion
  53. 53. CufónCufón works by converting font informations into VML(Vector Markup Language), which is rendered and displayedon the users’s computer. This proprietary JavaScript functionprevents the end user from ever downloading the font,avoiding issues of redistribution. AboveDispatch The Fold .ttf
  54. 54. End: Q&A
  55. 55. End: Thank you!

×