When my wife and I moved into our house, one of our first major projects was to update the bathroom. The horribly gaudy floral wallpaper pattern, along with the gold sink fixtures, obnoxious mirrors, and tacky lighting, made us feel like we’d stepped into a previous decade every time we entered the master bathroom. Removing wallpaper is a tough job, but it’s even more difficult when there are multiple layers of the stuff. This was the case with our bathroom. Apparently the previous homeowners’ taste in wallpaper changed every few years, and rather than stripping off the wallpaper and starting over, they just covered ugly with more ugly. Ah, the joys of home ownership!
If there’s one thing our renovation adventures have taught me, it’s that there are strong parallels between designing a room’s decor and designing a good website.
Good design is about the relationships between the elements involved, and creating a balance between them.
Whether we’re talking about a website or bathroom makeover, throwing up a new layer of wallpaper or changing the background color isn’t a design solution in itself—it’s just part of a solution. While we removed the wallpaper and rollered some paint onto our bathroom, we also had to change the light fixtures, remove the gold-trimmed shower doors, replace the mirrors, upgrade the lighting, paint the cabinets, change the switches and plugs, and scrape off the popcorn ceilings. If we’d just removed the tacky wallpaper and left all the other stuff, we’d still have an outdated bathroom. Website design is similar: you can only do so many minor updates before the time comes to scrap what you have and start over.
Fads come and go, but good design is timeless.
Conforming to the latest design trends is a good way to ensure temporary public appeal, but how long will those trends last? As far as I know, there was hardly ever a time when marquee and blink tags were accepted as professional web design markup … but scrolling JavaScript news tickers, “high readability” hit-counters, and chunky table borders have graced the home pages of many high-profile sites in the past. These are the shag carpets, sparkly acoustic ceilings, and faux wood paneling of the web design world. Take a trip in the Internet Wayback Machine, and look for late-nineties versions of some of the top Fortune 500 and pre-dot-com, boom-era websites. Try to find examples of good and bad design. In the midst of some of the most outdated, laughable websites, you’re likely to find some pages that still look surprisingly relevant. Most likely, these designs aren’t dependent on flashy Photoshop filters or trendy image treatments. As you read this book, keep in mind that good design transcends technology.
The finishing touches make a big impression.
I’ve heard it argued that deep down, people really love “anti-marketing design.” The idea is that we trust sites that have an unpolished appearance and feel amateurish. I think this argument misses the point. No matter what type of website you’re developing, the design should be as intentional as the functionality. My wife and I didn’t change the functionality of our bathroom with the work that we did. We just fine-tuned the details, but it made a world of difference. Some people might have been able to live with the bathroom the way it was, but I doubt you’d find anyone who would say it was exactly what they wanted.
Similarly, if you’re spending time developing a website, you should take time to design it. Under no circumstances should the design feel unpolished or haphazard. If you want to come off as edgy, anti-marketing, and non-corporate, then do it, and do it well—but there’s no reason to be ignorant about, or feel intimidated by, design.
Our goal with this book is simple: to present what we know about designing for the Web in a way that anyone can understand and apply. Why? Because the basics of website design should be common knowledge. We all live in and work on an internet that has been blindly covering up ugly with more ugly since its inception. It’s time to break that chain and make bold moves toward better design.
– Jason
If you’re squeamish about choosing colors, feel uninspired by a blank browser window, or get lost trying to choose the right font, this book is for you. I take a methodical approach to presenting traditional graphic design theory as it applies to today’s website development industry. While the content is directed towards web programmers and developers, it provides a design primer and relevant examples that will benefit readers at any level.
This book comprises the following five chapters. You can read them from beginning to end to gain a complete understanding of the subject, or skip around if you only need a refresher on a particular topic.
An awareness of design relies heavily on understanding the spatial relationships that exist between the individual components of a design. The layout chapter kicks off the design process by investigating possible page components. With these blocks defined, we discuss some tools and examples that will help you start your own designs on a solid foundation. To wrap up this discussion, we’ll begin a project that we'll follow through each chapter—Trashmonger.
Perhaps the most mysterious aspect of design is the topic of color selection. Chapter 2 sheds light on this as we delve into both the aesthetic and scientific aspects of color theory. Armed with these simple guidelines, and some tips for creating harmonious color combinations, you’ll see how anyone can choose a set of colors that work well together to complement the overall message of a website. Finally, we’ll look at how our color palette influences our Trashmonger project.
An aspect of web design that’s often overlooked, texture is the key to creating designs that stand out. By understanding how the individual elements of texture function, you’ll learn how to use points, lines, and shapes to communicate and support your site’s message on a number of levels. We’ll then get to see firsthand how subtle textures helped shape the identity and character of our example website.
The importance of typography is undeniable. Type is everywhere, and understanding the mechanics of written language is essential for any visual designer. In this chapter, we’ll dive beneath the surface of this rich topic, exploring the basics of the letterform, and investigating various typeface distinctions. We'll also construct a practical type system for our Trahmonger project.
The necessary companions to any well-designed site are the images and illustrations that grace its pages. In the final chapter, we’ll discuss what we should look for in the visual elements that we use on our pages, and locate sources of legitimate supporting imagery. Of course, finding the right image is often just the beginning. We’ll also learn some image-editing basics before we see the final steps in our example project.
Code in this book is displayed using a fixed-width font, like so:
<h1>A Perfect Summer's Day</h1>
<p>It was a lovely day for a walk in the park.
The birds were singing and the kids were all back at school.</p>
Where existing code is required for context, rather than repeat all of it, ⋮ will be displayed:
function animate() {
⋮
new_variable = "Hello";
}
Some lines of code should be entered on one line, but we’ve had to wrap them because of page constraints. An ➥ indicates a line break that exists for formatting purposes only, and should be ignored:
URL.open("http://www.sitepoint.com/responsive-web-
➥design-real-user-testing/?responsive1");
You’ll notice that we’ve used certain layout styles throughout this book to signify different types of information. Look out for the following items.
Tips provide helpful little pointers.
Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information.
... pay attention to these important points.
Warnings highlight any gotchas that are likely to trip you up along the way.