Web Design for Developers: A Programmer's Guide to Design Tools and Techniques: Making Design as Easy as Coding (Pragmatic Programmers) [Paperback]

I recently finished reading Web Design For Developers: A Programmer's Guide to Design Tools and Techniques and while I would like to have seen a few more specific details in a few places, the book overall does a great job of breaking down the mystic art of web design in a manner that allows almost any left-brained analytical developer to grasp the concepts and produce work of sufficient quality. If you are a software developer that is interested in web design, this is the book for you. It is full of great parallels between the two worlds and will help you understand how to create a design that works, while conforming to standards and be accessible to all types of browsers and devices.

The book starts out by describing a fairly common set of scenarios where a customer is involved in some discussion about what their current website looks like and does, vs what they want it to do. It's an accurate portrayal of what really goes on in these types of meetings, leaving the reader with a sense of "ugh. not another nebulous, undefined set of `requirements'."

After that brief introduction into the world of dealing with customers, the book jumps into the basics of design and talks about some of the key elements of laying out a site, including the need to do pencil sketches as wire frames. One mild issue that I have with this section of the book is that the author uses a lot of standard notations for various elements in the sketches but fails to define those notations or provide any links to information on what those notations are. While most of it is rather obvious, I was able to understand the intent of some of the sketches only because I have experience with wire framing tools that use the same notations.

There is a large section devoted to dealing with color, choosing color schemes and understanding the basics of how color blind people will see your site. This was one of my favorite sections of the book - both toward the front and later on when discussing accessibility. The author does a great job of explaining how to select color schemes and themes, even with a complete absence of creativity and eye for design. He points to some great tools on the web and other resources that will help almost anyone pick a set of colors that work well together. He also talks about the difference between light that reflects off surfaces like in the real world, vs. light that is projected from a monitor. This is a subject that I have wondered about for more than 15 years - why is a monitor RGB and real world light RYB? - and I have never found such a clear and concise description of the difference.

The next few sections of the book dive into creating graphics for the site, including the use of typography in those graphics. In these sections, the author introduces the notion of using a grid to layout your designs in the graphics editors and also in the actual website. In my 15+ years of working on the web, I have never heard of this before and I have to say that it was an eye opening experience to see how effective this technique is. You can take a site from "blech" with difficulty getting things lined up and spaced out correctly, to "wow" pretty quickly if you stick with the grid system that he outlines.

Most of the book is then devoted to constructing the homepage of the site... that's right - one page and one page only. The in-depth analysis of every step in the process is quite amazing, though. I never once felt like the author was repeating any information or providing dull, dreary content that could have been better summarized (though I will admit that I skimmed over most of the html content. Since I was not actively building a website while reading this, I wanted to catch the high points of what he was saying without getting mired down in the angle bracket and attribute mechanics).

Toward the end of the book, the author does spend what I felt like was an in inordinate amount of time discussing accessibility for disabled persons. He does do a good job of explaining why, though - he is a somewhat disabled person and uses assistive technologies to access websites on a daily basis. Having done accessibility work on the web in recent years, I can assure you that every point he makes is correct. If you need to create a site that conforms to "section 509" for example, this part of the book is a great place to start. Beyond the in-depth look at accessibility for disabled persons, though, the author does a great job of explaining how accessibility is more than just that. He discusses making website accessible by anyone, anywhere, on any device - not just a PC with a full web browser, but a mobile phone and other devices that provide limited web capabilities.

Pro's For The Book:

Approaches web development as developer not as a designer and makes the web feel comfortable for a back end software developer. In depth look at HTML and other web standards for getting a site done, not just for the sake of talking about web standards. Great discussion on CSS and how to effectively use it. Excellent information on color theory, graphics layout, and other seemingly "mystical" design areas. Provides a ton of information on great tools and how to use them to make your job easier.

Con's For The Book:

Covers HTML 4, with only a few minor notes about HTML 5. Uses Photoshop and Illustrator throughout the book - very expensive tools - though he does offer alternate suggestions but says that you'll have to figure them out yourself. Lacks a few resources for things like standard wireframe notation ("what does that big X in the middle of the sketch mean, anyways?!" ... well, it's an image place holder... but he never explained that).

Final Score:

In the end, I felt that this book was a great read and provided a lot of valuable information. Even with my extensive background in web design and development, I found multiple gems of knowledge that will have a direct impact on how I approach web design. I give the book a 4 out of 5. There were a few things I would have liked to see, but the book is an all around great resource for developers doing web design.

On a technical note: if you buy the e-book version, make sure you get a color copy as a PDF or another format. You will lose out on all of the benefit of the images and differences that the author illustrates if you don't have a color copy. For me, I read the book on my kindle which is black & white. This made it hard for me to see what he was talking about - especially in the color theory section. However, I do have a print copy of the book as well, which made up for this.

When it comes to creating websites, there are typically two sorts of people involved in the process. There are web developers, creating complex and wonderful application backends, and web designers, who take textual markup and perhaps a bit of imagery, and create a beautiful web experience -- at least, in theory. Web Design for Developers, by Brian Hogan, is designed to teach the developers a bit about what it is that the designers do.

To provide a bit of background, I'm approaching this book as a seasoned web developer, having worked as a professional in the field for over a decade now. While I am a web developer at heart, I have taken the time to pick up some tricks of the designer trade here and there, though I still fight with the occasional float and mix up my margins and padding. I tried to redesign my personal site once, and I think I made a dozen people blind with my color choices, so I welcomed the opportunity that this book presented me, to learn more about what goes into design -- and I really did learn a lot. I only had one or two major gripes with some of the content.

The book is divided into four major sections:

1. THE BASICS OF DESIGN

As previously mentioned, I have virtually zero concept of what makes for good design, and the book opens up right away with the basics. I found this section absolutely wonderful. Having worked with several designers of varying quality over the years, I'd picked up on some ideas, such as "Grid-based design is good" and "Color choice is important", but I really didn't have any context as to the "why" behind many of those decisions. Brian Hogan really laid that information out quite well, and if nothing else, I'm pleased that I got to read this section, and would advocate that all developers at least pick up on these basics.

2. ADDING GRAPHICS

The first section was mostly based on theory, and in this section of the book, we move into more application and practice of these skills. Adobe Photoshop is used as the primary tool for creating the logo and mockup and such, but everything is presented in such a way that even if you do not have access to Photoshop, you would be able to fairly easily translate these tasks into other tools, such as the GIMP. Some various photo editing techniques were covered that I was not familiar with, and while I don't see myself pulling out any image-editing tools anytime soon, I know that I'll be able to turn back to these chapters if I need to start making some imagery.

3. BUILDING THE SITE

This section was something of a mixed bag for me, which is where my mixed emotions come from. I am a huge fan of HTML5, as well as clean semantic markup -- and both of those topics do get covered in this book. However, I feel like the argument for semantics kind of gets blown out at the very end. In particular, when discussing the markup for the footer of the web page, Brian has set up the copyright notice as a paragraph tag, and there are a couple of links for the terms of service and privacy policy for the page, which are just two anchor tags in a paragraph. The rationale given here is that "these new elements take only one line of text apiece, so it doesn't make sense to add the extra markup for the div tags" -- what extra markup? Three letters for div instead of one for p? Neither of these elements are actually paragraphs. A div with the copyright notice and an unordered list with inline list items for the links would have been a more semantic decision, in my opinion.

With regards to the CSS discussions in this section, as well as some image optimization techniques, there's definitely some good information -- but really, for as silly as it sounds, hearing discussion on the importance of semantics and then seeing an example piece of markup that runs completely counter to semantics -- well, it kind of soured me for the rest of the experience.

4. PREPARING FOR LAUNCH

An entire chapter is dedicated to working with Internet Explorer and other browsers -- and if nothing else, the information in here about IE is quite valuable if you're not already familiar with it. If you don't know about IE conditional comments, they're about one of the best things ever in the battle against old, crappy browsers, and that particular chapter does a great job of covering their use.

There's also some other great content here. An entire chapter is dedicated to accessibility -- but not just for the blind. There's discussion of color choices, hearing-impaired users, and mouseless users as well. Too many people think accessibility means coverage for the blind, but it's really so much more - even for those of us who simply prefer to navigate sites with a keyboard instead of a mouse.

There's also a couple of sections discussing other site aspects, such as mobile experiences and optimizations that can be made, though some of that seems to go beyond the discussion of web design for developers. Still, some good content here. Finally, it wraps with some "Where to go from here" content, including discussion of some of the CSS grid frameworks. I'm glad that the frameworks were saved until the end, so that the reader has some understanding of what goes into developing a good framework.

Putting It All Together

On the whole, Web Design for Developers really is a solid book. I have to admit, that feeling of frustration that I encountered put me in something of a negative mindset as I finished out the book, but I can't deny that most of the content in this book really is pretty accurate and useful. More than once, I've found myself reviewing some of the basics of design or looking for a CSS trick for IE within the book, which I think speaks to its usefulness.

Web Designers and Web Developers are something of an odd bunch. We're simultaneously like chocolate and peanut butter, working together to make tasty web experiences, and yet, we often treat our two crafts more like oil and water, refusing to mix. I'm not going to go out and pursue a degree in color theory anytime soon, much as I suspect many designers could care less about PHP versus Ruby on Rails, but I do think it's important that as developers, we pick up at least some basic knowledge about what's happening on the other side. For that purpose, Web Design for Developers is a solid way to do so.

---------------

A Webuquerque community member review by Brian Arnold

I only wish I'd had this book earlier in my professional life! The author explains web design - colors, fonts, mocking up in PhotoShop, CSS and more - in terms developers get, not in language graphic designers use. The result: you get it.

The chapter on color is worth the book - exactly what you as a developer need to understand and not a bit more.

The title really should have been how to make your web apps look as good as the code behind them, but that's probably too long.

› Go to Amazon.com to see all 9 reviews  4.0 out of 5 stars