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.

1. HOW DESIGN LIVE | ABOVE THE FOLD | JUNE 25, 2011 | CHICAGO, IL.

2. From Print to Web
HOW Design Live
Brian Miller
6.25.11

3. Brian Miller
Owner of the Brian Miller Design Group
Education
Hartford Art School, BFA, Graphic Design, magna cum laude
Pratt Institute, MPS, Design Management, with distinction
Experience
Gartner, Global Creative Director
Wunderman Interactive, Associate Creative Director
Publicis Modem, Senior Art Director
Author
Above the Fold: Understanding the Principles of Successful Web Site Design
Published by HOW Design Books, March 2011
Adjunct Professor
Shintaro Akatsu School of Design, University of Bridgeport
Service
Type Directors Club

4. Above the What? A bit about the book

6. Analyze Client User Plan
Above the Fold
Designer
Design

7. The Internet: According to NFL coach Vince Lombardi

9. This is a football

10. This is the Internet

11. 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 launches
Mosaic, the Internet Explorer Microsoft releases
standardize HTML introduced Google Adwords Friendster.com
first consumer Microsoft releases Netscape version 5, which Internet Explorer
launches launches
Web-browsing Netscape Navigator Internet Explorer Microsoft releases Communicator Google.com, founded allowed users to version 6, which
application, 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 7
released 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

12. Twitter.com
launches
Microsoft releases Twitter.com is
Internet Explorer used to organize
Facebook.com
version 7, which Microsoft launches and mobilize
MySpace.com launches
introduced tabbed Bing.com to compete relief efforts in
launches
Flickr.com launches browsing and a Candidate Web sites with Google Haiti following
WordPress content feed reader Apple introduces and social media play a the devastating
Mozilla Firefox Web Microsoft releases
blogging software is the iPhone and pivotal role in the earthquake.
browser is released, Mozilla Firefox Internet Explorer
introduced. mobile apps U.S. elections
which utilizes the version 2 is released version 8 with Mozilla Firefox
Apple releases the Gecko layout engine YouTube.com with tabbed Netscape Navigator Mozilla Firefox improved support for version 3.6 is
Safari 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

13. 97% 76% 59% 46%
Millions of Colors Higher Than Windows XP Firefox
1024 x 768
Color depth Monitor resolution Operating system Browser

16. I think they mean “designers”

17. Form & function of Web design: Design conventions

23. 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 Domain
Internal Factors Click-through
Rate

26. Micro Bar
88 x 31, 10K, :15
Vertical Banner
120 x 240, 30K, :15
Pop-Under Button 1
720 x 300, 40K, :15 120 x 90, 20K, :15
Button 2 Square Button
120 x 60, 20K, :15
Leaderboard 125 x 125, 30K, :15
728 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, :15
Vertical Rectangle Square Pop-Up 3:1 Rectangle Large Rectangle Medium Rectangle Rectangle
240 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

27. Site planning: Information architecture
Information Architecture (IA) is the blueprint that maps out the
pages of a site and illustrates their relative weight or importance.

32. Anatomy of a Web page: Design conventions

33. 1
2
3 5
4
6
7

35. Anatomy of a Web page: Headers
Headers act as a grounding force for the user by identifying
and visually unifying all the pages of a site.

41. Anatomy of a Web page: Navigation
Navigation is a broad term that encompasses any aspect of a site
that links a user to another area of the site and is the cornerstone
of a site’s usability.

44. Anatomy of a Web page: Feature area
To achieve hierarchy, designers use a focal point—an area in the
composition that is perceived before all others.

49. Anatomy of a Web page: Body/content
Breaks in the content allow users to scan the layout quickly and
gives them multiple entry points into the page.

63. Typography rule of thumb:
The optimal line length for ideal legibility is no more than two to
two and a half alphabets—52 to 65 characters.

64. Jaded zombies
acted quietly but
kept driving their
oxen forward.
Jaded zombies acted quietly but kept driving their oxen forward.
The wizard quickly jinxed the gnomes before they vaporized. All
questions asked by five watched experts amaze the judge. Six boys
guzzled 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 questions
asked by five watched experts amaze the judge. Six boys guzzled cheap raw plum vodka quite joyfully. Just keep examining every low bid
quoted for zinc etchings. Sixty zippers were quickly picked from the woven jute bag. Few black taxis drive up major roads on quiet hazy
nights. Six big devils from Japan quickly forgot how to waltz. Painful zombies quickly watch a jinxed graveyard.

65. Anatomy of a Web page: Sidebar
Sidebars are useful for providing supporting information
as well as advertising space.

67. Anatomy of a Web page: Footer
The footer has emerged over recent years as a critical part
of Web design, performing tasks for both the user and search
engine optimization.

70. Anatomy of a Web page: Background
Backgrounds can be used to create depth or dimension, add richness
with texture and color to a page, or even expand the content beyond
the borders of the page.

76. Web Typography

77. Types of Web type
The optimal choice for displaying type depends mostly on the
needs 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)

78. Web typography: Images of type
Images of type enable a designer to exactly match branding
requirements for a client, or express a concept precisely as
the designer (or client) envisions.

82. Web typography: Web-safe type
Being able to do more with less is an essential skill
for a Web designer.

83. Windows Mac
Arial Arial, Helvetica
Arial Black Arial Black, Gadget
Comic Sans MS Comic Sans MS
Courier New Courier New, Courier
Georgia Georgia
Impact Impact, Charcoal
Lucida Console Monaco
Lucida Sans Unicode Lucida Grande
Palatino Linotype Palatino
Book Antiqua Georgia
Tahoma Tahoma
Times New Roman Times
Trebuchet MS Trebuchet MS
Verdana Verdana
Symbol Symbol
Webdings Webdings
Wingdings Zapf Dingbats
MS Sans Serif Geneva
MS Serif Georgia

84. Font stacks
Design 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 me
something with a…] serif;

85. Font stacks
Verdana, Helvetica, Arial, sans-serif
Tahoma, Geneva, Arial, sans-serif
Georgia, Times New Roman, Times, serif
Palatino Linotype, Book Antiqua, Palatino, serif
Courier New, Courier, monospace
Lucida Console, Monaco, Courier, monospace

86. 200-Point Georgia 200-Point Times Roman
Designed in 1996 by Matthew Carter Designed in 1931 by Stanley Morison
(hinted for optimal screen viewing by and Victor Lardent (Monotype) for
Tom 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

90. Web typography: Font replacement & embedding
Fonts represent valuable intellectual property and @font-face leaves
some question as to the end user’s ability to reuse the font without
paying for it.

91. @font-face
@font-face {
font-family: “Dispatch”;
src: url(http://www.WebSite.com/fonts/dispatch.ttf);
format(“truetype”);
}
h1 { font-family: “Dispatch”, sans-serif }

94. TypeKit.com
Typekit.com offers subscription-based access to fonts for
Web sites, including fonts from TypeTogether’s font foundry,
also seen here.

98. Cufón
Cufón works by converting font informations into VML
(Vector Markup Language), which is rendered and displayed
on the users’s computer. This proprietary JavaScript function
prevents the end user from ever downloading the font,
avoiding issues of redistribution.
Above
Dispatch The Fold
.ttf

102. End: Q&A

104. End: Thank you!