Five Simple Steps: Designing for the Web Review

Update: Designing for the Web is now available online for free reading.

I bought Mark Boulton‘s Five Simple Steps: A Practical Guide to Designing for the Web last year while it was on sale and somehow managed to not get the time to read it thoroughly until this past week. After reading it, I’m sorry that I took so long to get around to it!

This book has its start from a series of blog posts that Mark published on his blog, and has been a long time in the coming. He describes it best when he says

…this little book isn’t about documenting a moment in time, or providing pretty pictures of the latest trends and biggest, best designs on the web. It’s about the basics of graphic design craft – the basics of communicating by design.

Quick review so you don’t have to scroll down: even though the book reproduces some posts from Mark’s blog, they’ve all been refined and edited so that they flow really well. The new chapters also add a lot of value and the book is easily worth the price.

In keeping with the ‘five’ theme, the book is divided into five parts, with each part consisting of five chapters:

1. Getting Started
2. Research and Ideas
3. Typography
4. Colour
5. Layout

Part 1: Getting Started

This part contains five short chapters on Designing for the web, The Job, Understanding Workflow, The Tools and Working for yourself. Mark begins with a primer on the web that should serve as an excellent, if brief, introduction to the way the web works for people who may be new to designing for the web. He also points out how quickly users’ habits change and how important it is that designers adapt to this change.

He then shares some insights about working for both large and small agencies and goes on to point out the different methodologies that exist there, and quite rightly noting that there is no perfect methodology that is suitable for every project.

A quick run-through of the tools that he uses is then followed by a some sound business advice for professionals who are thinking about going freelance, with an emphasis on UK laws.

Part 2: Research and Ideas

These five chapters—The Design Process, The Brief, Research, Ideas and Putting it together—begin by sharing the design process that Mark Boulton Design uses, which is also quickly summarized in the What We Do section of his site. It then goes into a bit of detail with a funny metaphor about the different kinds of briefs that you’re likely to encounter, before going into research methodologies, idea generation and finally how to wrap it all together with a case study for a gardening website.

This is a very quick outline of the design process and some chapters ended rather abruptly. However, I wouldn’t dock points because of this as the book isn’t aiming to go into these topics very deeply. It’s true value really lies in to following chapters.

I would recommend the excellent A Project Guide to UX Design: For user experience designers in the field or in the making by Russ Unger and Carolyn Chandler for a much more in depth discussion when it comes to research process and managing entire projects.

Part 3: Typography

The first chapter in this section, Anatomy, consists only of a two-page spread of large type set in Mrs. Eaves that showcases the 16 different parts of the typical serif font. It really is quite nice to look at and Mark has summarized a lot of information in these two pages.

The Classification chapter details the ten groups for type classification as decided upon in 1964 by the German standards organization Deutsche Normenausschuss and then showcases some iconic typefaces with a brief history of each.

Chapter thirteen, Hierarchy, combines and expands on the final two parts of Mark’s Five Simple Steps to Better Typography: Typo­graphic Hier­archy—size and Typo­graphic Hier­archy—weight. It ends off with a diagram that is used to guide a designer when using different weights and styles of a typeface to create emphasis. However, I found that the diagram from the Typographic Hierarchy—weight article on his site did a much better job of explaining it and I ended up finishing this chapter feeling a bit frustrated.

The typesetting chapter is one of the gems of the book. It combines, expands and refines many of the articles from Mark’s site into a tight, cohesive treatise on typesetting for the web. It touches on typographic basics such as measure, leading and tracking before going into ellipses, quotation marks (versus the ubiquitous prime and double-prime!), ligatures, hanging punctuation and of course, the different types of dashes. No longer will I have to google Mark’s site when I need to find out which dash I should be using! Each section is also accompanied by figures that clearly illustrate each point that Mark is making.

This part of the book then closes off with a chapter on Printing the Web, containing a case and some helpful pointers for when you’re writing your print stylesheet. If you need any more examples you need look no further than Mark’s own Mark Boulton Design site and do a print preview of any of the pages, they all look lovely and you can tell that a bit of thought was put into them.

This part, Typography, was the first true chapter on design in the book and it is a really great read, bringing the core concepts of typographic design to the web in a clear, easy-to-understand way. Even though it’s made up mostly of articles that were published on Mark’s site, you can tell that they were all polished, refined and expanded a bit for this book. It would also be worthwhile for readers to visit his site and go through the comments on those articles as the discussions there are also very useful.

Part 4: Color

As I mentioned before, the famous designer and color theorist Johannes Itten once told his students “…if you are unable to create masterpieces in color out of your un-knowledge, then you ought to look for knowledge.” These chapters on color contain an excellent but short introduction to color theory and is aimed at those of us that Itten described above.

Image taken from the sample chapter at the Five Simple Steps website.

The first two chapters in this part—The Color Wheel and Hue, Saturation and Brightness—quickly cover color combinations and terminologies. People new to color theory may have to read through the chapter on hue, saturation and brightness a few times to fully understand it as Mark’s writing style is very short and to-the-point.

The next three chapters—Color Combinations and Mood, Designing without Color and Color and Brand— give a quick overview of the kinds of moods different color combinations can convey and highlight the inescapable relationship that brands have with their colours, with a chapter on the importance of no color at all in between.

Because color theory is such a large subject, this part of the book manages to barely touch the surface of it and leaves the reader feeling a bit less satisfied than the typography part. But this no fault of Mark it may have been his intention to convey that a lot more study in this area is necessary to get a solid grasp of this area.

Part 5: Layout

The first chapter in this section, The Basics of Composition, introduces the Golden Ratio and the rule of thirds before giving some useful, though basic tips, for photography composition and how to effectively use photos on websites.

Chapter twenty-two, Spatial Relationships, then continues with a look a typographic color and whitespace, which almost serves as a bit of a continuation of the typesetting chapter.

The following chapter, Grid Systems introduces us to the grid as it applies to the web, discusses CSS frameworks in general and then gives an interesting real life example of how Mark Boulton Design used Blueprint in their drupal.org redesign.

The final chapter of the book neatly wraps up this part with an inside look at how Mark’s agency redesigned the De Standaard. I always find that case studies like this to be very useful as they really bring home all of the previous theoretical points, and this one was no exception.

Overall thoughts on Five Simple Steps to Designing for the Web

This book brings reproduces quite a bit of content from Mark’s blog, but edited and polished very well, while adding a considerable amount of new material. Together, it makes for an excellent introduction to a number of important core topics on design that are essential for designing for the web. Highly recommended.

Other Five Simple Steps Books in the series

Mark’s website actually gives us a sneak peek at the new titles that should be available sometime this year, in addition to the other ones already listed on the Five Simple Steps website. All-together, we can expect to see these in the future:

• Designing Grid Systems for the Web
• Designing the Invisible
• Designing Information Archictecture
• Designing Web App Success
• Designing with Statistics

I’m looking forward to each and every one of them.