Principles of Web Design

Praise for Previous Editions

"One of the Best Books Available on the Web Design Process

Brian clearly put a lot of thought and careful consideration into the structure, content and flow of the book. It’s well done. I’ve been building websites for 4 or 5 years now and this is the first book I’ve found that does a good job of walking the reader through the entire thought process of planning and creating a structured strategy for designing websites."

– Published on Amazon.com by Steffan Antonas

"Web Design Demystified

‘Above the Fold’ provides everything that you need to build a strong foundation for a successful Website."

– Published on Amazon.com by Ted A. Dobbs

"I’m Glad I Started Here

Brian Miller gives a sensible and well thought out approach to web design. As a person who is interested in getting into this field I found this book a great place to begin my journey. He links all the steps to be successful at web design. The talent and skills must be your own, but if you’re looking for a tool to focus existing talent into a career in web design, this book is an excellent place to begin."

– Published on Amazon.com by JStein

"Fantastic Guide

Above the Fold provides you with the fundamentals required for a successful digital experience. Anyone who is looking to promote themselves or business using digital media marketing tools should own a copy of this book. As Brian Miller thoroughly demonstrates, principals of design very much apply to each of your digital properties. Thank you, Brian, for an extremely comprehensive guide of an ever changing landscape. While technology will continue to change, principals of effective design do not."

– Published on Amazon.com by B. Crosland

"Great for Budding Devs

If you’re into the web and building sites then this, IMHO, is a must read. Brian Miller took his time and laid out the fundamentals of web development and design here in a concise and accessible manner. You don’t need a lot of technical acumen or programming prowess to get what he’s writing about and you’ll come away with a much greater understanding of the how’s and why’s of dev/design."

– Published on Amazon.com by Frater Zion

"A Useful and Easy Guide

Miller has written here the perfect handbook for a student looking to learn more about web design or a small business owner trying to spice their site up and increase traffic. It’s all here, discussions about the web itself, about how people use it and read different sorts of pages, discussions about the usability of a site and how that affects its design and vice-versa, a checklist of things to do before your site goes live and of things to have as it grows and thrives, everything you could need to know about web design."

– Published on Amazon.com by A Student of eCommerce

"A Must Have for Web Designers

Brian Miller does a great job of introducing people to the Art & Science of Website Design. This book is an excellent introduction and overview of Website Design, but is also packed with great information for old-timers as well."

– Published on Amazon.com by Hugh

Copyright © 2022 by Brian D. Miller

All rights reserved. Copyright under Berne Copyright Convention, Universal Copyright Convention, and Pan American Copyright Convention. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form, or by any means, electronic, mechanical, photocopying, recording or otherwise, without the express written consent of the publisher, except in the case of brief excerpts in critical reviews or articles. All inquiries should be addressed to Allworth Press, 307 West 36th Street, 11th Floor, New York, NY 10018.

Allworth Press books may be purchased in bulk at special discounts for sales promotion, corporate gifts, fund-raising, or educational purposes. Special editions can also be created to specifications. For details, contact the Special Sales Department, Allworth Press, 307 West 36th Street, 11th Floor, New York, NY 10018 or [email protected].

26 25 24 23 22 5 4 3 2 1

Published by Allworth Press, an imprint of Skyhorse Publishing, Inc. 307 West 36th Street, 11th Floor, New York, NY 10018. Allworth Press® is a registered trademark of Skyhorse Publishing, Inc.®, a Delaware corporation.

www.allworth.com

Cover design by Brian D. Miller

Interior design by Brian D. Miller

Library of Congress Cataloging-in-Publication Data is available on file.

Print ISBN: 978-1-62153-787-8

eBook ISBN: 978-1-62153-788-5

Printed in China

Designed and art directed

by Brian D. Miller

WiltonCreative.com

Every reasonable attempt has been made to identify owners of copyright. Errors or omissions will be corrected in subsequent editions.

For my two beautiful girls, Sarah and Rachel, this book, and everything I do, is for you.

Acknowledgments

Special thanks to my college professor and very good friend for over 30 years, Alex White. Here’s to the next 30, Axe.

Thanks to the guy who breathes life into our work, Jason Ackerman. The future is Bright!

To my friend and copywriting partner, Greg Voornas (Voornas.com). You taught me what it means to be creative and how to live your blood type—be positive!

With great appreciation for the talented team at Axioned (Axioned.com), including Libby and Dave, whose partnership I value greatly.

Thanks to Dan and Kelly at LS Media (LSMedia.com). I am continually inspired by your drive and talent.

To my clients. My goal is always to serve you with expertise, patience and value. Thank you for trusting your brands with me and my team.

And thank you to my family, Bridgette, Sarah, and Rachel. I love you, always.

Table of Contents

Acknowledgments

Foreword by Jason Ackerman

Introduction to Web Design

SECTION I: PLAN

Chapter 1 Website Planning

Chapter 2 Elements of Usability

Chapter 3 Space, Grids, and Responsive Design

SECTION II: DESIGN

Chapter 4 Anatomy of a Web Page

Chapter 5 The Elements of Web Design

Chapter 6 Web Typography

SECTION III: OPTIMIZE

Chapter 7 Search Engine Optimization

Chapter 8 Marketing and Conversion

Chapter 9 Analysis

Index

Foreword

It still happens, no matter how hard we try. In our agency, we get clients who look at the proposal, see the line item marked Design, and question why we can’t just design it as we build. And there was a time we would just go ahead and do it. I used to consider myself a designer/developer, the rare unicorn that could do both—a solid eye for design and all the sensitivity of a real artist, combined with the technical prowess and engineering mindset of a real nerd. I was the perfect web guy.

Brian Miller and his design team cured me of that. It was from them that I really learned what design was about in the context of web technology. I learned how much really goes into a quality website design. I learned that it’s as much about what is NOT on the screen as what IS on the screen. I learned that everything we were looking at on the first PSD was there for a reason—everything had a purpose. And it wasn’t just a purpose, it was a defendable purpose. Every font-size, every margin-left, every padding-top, line-height, letter-spacing, height and width . . . each one was carefully considered and important.

I first met Brian when my now-defunct firm was contracted to build the front end for a website he was designing. Having now worked with Brian for nearly a decade, for a time as his employee and now again as colleagues with my own new and different agency, I find it hard to work with a lot of designers. It’s not because they aren’t talented, it’s because very few put the kind of thoughtfulness and consideration into the WHY of their design. That’s what makes this book so valuable of a resource . . . it doesn’t try to teach you how to be a talented designer. That’s on you. This teaches the why, and intuitively links it to the how.

As a developer, it took quite some time for me to understand the true partnership design and development can have in a project. So often that relationship is confrontational—designers making things that developers have to figure out how to make work, and constantly pushing and pulling between the two until you end up with a final product that is the result of compromise, and it shows. But it doesn’t have to be that way. Design that takes into account the elastic medium of the browser, as well as the unpredictable whims of the user, is not only a better end product, but also a joy to build.

By my count, I’ve worked on close to 100 sites with Brian, each one made better by the principles found in this book. I hope you find it as useful as I have.

Jason Ackerman

Founder, Overtime Agency

www.overtimeagency.com

Introduction to Web Design

There’s an old legend in the world of football that says Vince Lombardi, head coach of the Green Bay Packers, started every season with a speech to his players about the game of football. He began the lecture by holding up a football and saying, Gentlemen, this is a football. He proceeded to describe its size and shape, and talk about how it could be thrown, kicked, and carried. Then he’d point down at the field and say, This is a football field. He’d walk around, describing the dimensions, the shape, the rules, and how the game was played.

This Is the Internet

The message from the two-time Super Bowl-winning coach was simple: to truly be effective at anything, one can never forget the basics. This simple demonstration stripped away the complexities of the game and reduced it to its essence. In doing this, Lombardi refocused his team’s attention on what was truly important about succeeding at the game of football.

Taking a cue from Vince Lombardi, I’d like to conduct a similar exercise for you: Turn on a web-enabled device (PC, laptop, tablet, mobile phone, etc.), open the web browser of your choice (Safari, Chrome, Firefox, Microsof Edge, etc.), type in the address of your favorite website, and behold—this is the internet. The internet is a series of interconnected computers, called servers, that enables companies, brands, organizations, governments, religious groups, and individuals to share information on a worldwide scale in real time. The World Wide Web or web, for short, is actually only a portion of the internet, which also includes all aspects of computer-to-computer communication like email, messaging, and file serving, just to name a few.

When an internet user types the address of a website into his or her web browser, the device transmits a signal to a server, and the server responds by sending bits of information back to the computer. This information includes images, raw content, and instructions for the computer to reassemble the layout, called markup (the M in HTML). The computer then takes that information and configures the files based on two things: the markup and styles that came from the designer/developer, and the preferences and limitations of the web browser and device itself. When a device reassembles a web page that it has received from a server, the following factors influence exactly how that page appears on the screen.

DEVICE

The type of device and version of the operating system (OS) the audience is using to browse a site can have an effect on how a site is seen. The number of operating systems has increased over recent years. Instead of focusing on Apple versus Microsoft, designers and developers now have mobile platforms to contend with—iOS (Apple), Windows Mobile, Android (Google), and to some extent Blackberry. A primary difference between operating systems is how typography is handled, including the fonts that are available natively and how smoothly the fonts are rendered. Chapter 6 takes an in-depth look at typography.

SCREEN RESOLUTION

Not to be confused with the screen size in inches, resolution is the dimension in pixels measured horizontally and vertically on a screen. Most desktop monitors range from 800 pixels wide by 600 pixels high to 1024 pixels wide by 768 pixels high—and high resolution, or Retina Displays, can reach as much as 3072 × 1920. Tablets have similar resolutions, while mobile devices can be as little as 320 pixels wide. Because of this dilemma of differing screen resolutions, designers and developers created the idea of responsive design. Discussed further in chapter 3, responsive design displays different layouts for a single web page in response to the screen resolution, making it possible to maximize legibility and usability regardless of the