Above the Fold is more than a book about Web design, it’s a book about the fundamentals of sound communication design set within the context of the Web. Semantics? Hardly. Most books on Web design assume many things about the reader and skip right to the nuts and bolts of the technology behind the design. Above the Fold looks at the basics of hierarchical communication with the specific considerations inherent in Web design. Read the introduction
SECTION I: DESIGN & TYPOGRAPHY
Section one explores the areas of Web design and typography and includes a brief history of Web design timeline, anatomy of a Web site and the elements of Web design. Each chapter features relevant examples to illustrate the points being discussed.
SECTION II: PLANNING & USABILITY
Section two of Above the Fold helps the reader understand the steps necessary to begin a successful Web design project. From project planning and creative briefs to mapping and wireframing, this section has practical information about the process of designing for the Web. Also in this section are the elements of usability — the items and areas a designer must consider to ensure the best user experience.
SECTION III: BUSINESS VALUE
Section three examines the business aspects of Web design including attracting users and maximizing their value. Methods of attracting users like search engine optimization and various types of marketing — social marketing, viral marketing, email marketing, for example — are looked at from the perspective of the designer. Finally the book finishes with a primer on Web traffic analysis and how it affects the design process.
CHARLES NIX Chairman, Type Directors Club Professor, Parsons School of Design
“Alas, I wish this book had existed when I began designing for the Web. It’s some consolation to know that Above the Fold will become an essential part of Web design curricula for years to come. It’s a must-read/must-have book for anyone studying Web design.”
DAVID VOUGLER Creative Director, NBC Universal
“Brian clearly articulates the symbiotic connection between the Web designer, client, and end user. Above the Fold is one of the best books I’ve seen that treats the creative process as a vital asset necessary for business success.”
BRYAN HAMILTON User Experience Director, Razorfish
“Above the Fold is one of the few Web design books that goes past just the display of a Web site and dives into the entire process of unlocking the strategy to create a successful digital product.”
THOMAS BEEBY Principal, Chief Creative Officer, Beeby, Clark and Meyler
“Brian presents a rather well-rounded picture of the Web design process—from design and usability, to aspects of marketing and analysis—providing the reader with clear insights they can take away and apply. Nicely done.”
Above the Fold Student Web Design Competition
The Above the Fold Awards is the only student Web design competition honoring the best Web, motion and interactive designs from around the world.Learn more at AboveTheFoldAwards.com
This year’s best in show winner is Attune: Bringing Musicians Together by Ashley Einspahr from Kansas City Art InstituteClick here to see all the winning entries
See student work, school profiles and Web design lesson plans plus a lot more at the Above the Fold Awards Blog.Visit the Blog
The next Student Web Design Competition will take place in January 2014, with the deadline in mid-May.
Introduction to Above the Fold
It’s difficult to determine, really, the number of times I’ve assured a client that his or her name, product, ad, or idea will appear “above the fold,” but I’m sure it’s easily in the hundreds. What’s interesting is that the majority of my clients don’t ask me to produce anything that can actually be folded. I’m a Web designer, and it’s taken me sixteen years to admit that publicly.
The problem with admitting you’re a Web designer is that inevitably the person you’re talking to has a twelve-year-old niece who designed and produced a Web site over her summer vacation. Most people don’t think of Web sites as even needing a designer. “People can make a living doing that?” they say.
In fact, it’s true that throughout the history of the Web, non-Web designers have been shaping the aesthetic of the Web landscape. In the early days of the Web, most “designers” weren’t designers at all, but technicians focused on pioneering new means of communication. Soon, due mostly to increasing client demand, classically trained print designers began porting their talents over to Web site design, bringing with them many of the design conventions they were accustomed to.
One of these transplanted conventions is the idea of being “above the fold,” which is a phrase that comes from the newspaper industry. It refers to the fact that the most important news items of the previous day would need to appear on the upper portion of the front page. Since most papers were folded for shipping, anything at the bottom of the page would not be seen by passersby. The content that appeared above the fold—BAND PLAYED TILL END; WAR! OAHU BOMBED BY JAPANESE PLANES; MEN WALK ON MOON—attracted people and sold newspapers.
Fast forward to the rise of the Internet, where monitor resolution has as much influence over information hierarchy as the fold in a newspaper did. The information that appears in a browser window needs to engage the user in the same way information on the top half of the first page of a newspaper did. Thus, the phrase above the fold was adopted by millions of Internet users.
The phrase “above the fold” reminds us that there are both close similarities and vast differences between print and Web design. The principles of space usage, typography, and other elements of effective hierarchical communication are essential to both print and Web design, but the methods of achieving these principles involve different skill sets and considerations for the end user. That’s what this book is about—the fundamentals of graphic design and the specific considerations a designer makes for effective Web communication. And it’s the reason Above the Fold is a fitting title.
The other reason for choosing Above the Fold as the title is more metaphorical and has to do with the type of information you’ll find within the book. If the information that appears above the fold on a newspaper or Web site is the most important and engaging of its time, the information you’ll find in the book Above the Fold is too. It is important that Web designers learn, in addition to the necessary technical aspects of digital media, the fundamentals of design that lead to clear communication. This book looks at Web design as a form of graphic communication—a point of difference from most of the other Web design books on the market. Most of the current books on Web design are outdated before they’re even printed, because they focus heavily on style and trends. More troubling is the fact that most books depict Web design as a medium whose ultimate expression is somewhere between print pieces with movable parts, and movie titles with buttons—more form than substance. The sites in this book put the user first and drive value for the clients they represent.
The majority of the samples chosen to illustrate the concepts in this book are real-world examples produced for clients with strategic business objectives. Designing for clients is significantly more challenging than designing for designers. Portfolio sites and design blogs are often the most beautiful sites on the Web, but being aesthetically pleasing is only one aspect of Web design. Above the Fold is divided into three sections: Design & Typography, Planning & Usability, and Business Value. Each section represents a phase in the continuous cycle of Web design. These three sections also neatly align with the players in a Web project—the designer, the target audience, and the client. It’s the balance between design, usability, and return on investment that makes a Web site truly great.
Over the past sixteen years of my career, Web designers have gone from being technicians and hobbyists to critical members of the business environment. And for this reason, I’m proud to admit I am a Web designer.