Above the Fold: Print to Web


Published on

This presentation was originally given at the HOW Design Live Conference in Chicago, Il on June 25, 2011.

This talk covers much of the content of Above the Fold and introduces the audience to the process of becoming a Web designer. It's a comprehensive, 30,000-foot view of the Web design process from planning and IA to design and creative to marketing and analytics.

Published in: Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Above the Fold: Print to Web

  2. 2. From Print to WebHOW Design LiveBrian Miller6.25.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 DirectorPublicis Modem, Senior Art DirectorAuthorAbove the Fold: Understanding the Principles of Successful Web Site DesignPublished by HOW Design Books, March 2011Adjunct ProfessorShintaro Akatsu School of Design, University of BridgeportServiceType Directors Club
  4. 4. Above the What? A bit about the book
  5. 5. Analyze Client User Plan Above the Fold Designer Design
  6. 6. The Internet: According to NFL coach Vince Lombardi
  7. 7. This is a football
  8. 8. This is the Internet
  9. 9. 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
  10. 10. 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
  11. 11. 97% 76% 59% 46% Millions of Colors Higher Than Windows XP Firefox 1024 x 768Color depth Monitor resolution Operating system Browser
  12. 12. I think they mean “designers”
  13. 13. Form & function of Web design: Design conventions
  14. 14. External Factors Outbound Links Inbound Host Data Links Title Tags Site Architecture Telegraphic URLs Keyword-rich Content Internal Links Clean Code Age of Site Traffic DomainInternal Factors Click-through Rate
  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. Site planning: Information architectureInformation Architecture (IA) is the blueprint that maps out thepages of a site and illustrates their relative weight or importance.
  17. 17. Anatomy of a Web page: Design conventions
  18. 18. 123 5467
  19. 19. Anatomy of a Web page: HeadersHeaders act as a grounding force for the user by identifyingand visually unifying all the pages of a site.
  20. 20. 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.
  21. 21. Anatomy of a Web page: Feature areaTo achieve hierarchy, designers use a focal point—an area in thecomposition that is perceived before all others.
  22. 22. 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.
  23. 23. Typography rule of thumb:The optimal line length for ideal legibility is no more than two totwo and a half alphabets—52 to 65 characters.
  24. 24. Jaded zombiesacted quietly butkept driving theiroxen forward.Jaded zombies acted quietly but kept driving their oxen forward.The wizard quickly jinxed the gnomes before they vaporized. Allquestions asked by five watched experts amaze the judge. Six boysguzzled cheap raw plum vodka quite joyfully.Jaded zombies acted quietly but kept driving their oxen forward. The wizard quickly jinxed the gnomes before they vaporized. All questionsasked by five watched experts amaze the judge. Six boys guzzled cheap raw plum vodka quite joyfully. Just keep examining every low bidquoted for zinc etchings. Sixty zippers were quickly picked from the woven jute bag. Few black taxis drive up major roads on quiet hazynights. Six big devils from Japan quickly forgot how to waltz. Painful zombies quickly watch a jinxed graveyard.
  25. 25. Anatomy of a Web page: SidebarSidebars are useful for providing supporting informationas well as advertising space.
  26. 26. 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.
  27. 27. 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.
  28. 28. Web Typography
  29. 29. 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)
  30. 30. 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.
  31. 31. Web typography: Web-safe typeBeing able to do more with less is an essential skillfor a Web designer.
  32. 32. 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
  33. 33. 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;
  34. 34. Font stacksVerdana, Helvetica, Arial, sans-serifTahoma, Geneva, Arial, sans-serifGeorgia, Times New Roman, Times, serifPalatino Linotype, Book Antiqua, Palatino, serifCourier New, Courier, monospaceLucida Console, Monaco, Courier, monospace
  35. 35. 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
  36. 36. 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.
  37. 37. @font-face@font-face {font-family: “Dispatch”;src: url(http://www.WebSite.com/fonts/dispatch.ttf);format(“truetype”);}h1 { font-family: “Dispatch”, sans-serif }
  38. 38. TypeKit.comTypekit.com offers subscription-based access to fonts forWeb sites, including fonts from TypeTogether’s font foundry,also seen here.
  39. 39. 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
  40. 40. End: Q&A
  41. 41. End: Thank you!