Channels ▼

Mike Riley

Dr. Dobb's Bloggers

Web Design for Developers Book Review

December 19, 2009

Like many left-brain developers, I am fairly adept at creating functional web applications but humbly amateur at wrapping them within attractive user interfaces.  With the release of Brian Hogan's Web Design for Developers, I hoped I could elevate my novice design skills to something worthy of the application logic that surrounds it.  Did the book achieve this lofty goal?  Read on to find out.

I am unabashedly more comfortable with grokking loop, iterator and ORM than I am with terms like color fluting, page folds and RYB.  However, it was with these and many other graphic arts terms that author Brian Hogan coaxed me to become more comfortable with effective use of color, image weight and content balance when constructing web pages.  He also taught me some helpful designer tricks like the use of grids for graphic element (titles, descriptions, buttons, etc.) placement, anti-aliasing icons the right way, using the right measurements and font weights for the page presentation and the subtle use of photos to enhance the page's intended message.

The book, occasionally displaying 4-color graphics to better emphasize its design outcomes, is presented in three parts.  The first part covers design basics like color and font choices as well as the typical process for sketching out a napkin-style approach for graphic element placement that satisfies the application requirements.  Part Two refines this rudimentary outline with graphic mock-ups ranging from logos and layers to mastheads and search boxes.  The remaining sections consume the bulk of the book.  Part Three spans the conversion of multicolumn mock-ups to CSS-defined, HTML 4.0.1 Strict and HTML5-compliant web pages and validating them using the superb Firebug and Web Developer Toolbar Firefox plug-ins.  Part Four highlights several page rendering aspects to consider, from multi-browser compatibility (especially with Microsoft Internet "The Evil You Can't Ignore" Explorer) and accessibility/usability validation to mobile device and performance optimization.  SEO and even optimal 'favicon' creation are also discussed.

While I can't say that I learned anything new about functional web design, I did pick up on and appreciate the author's comments on what makes attractive web design.  Even so, I have two minor criticisms.  First, the book could have had a chapter or, at the very least, an appendix dedicated to design principles and considerations when working with AJAX-driven sites.  He does provide a jQuery example, but given the range of dynamic page elements (especially those introduced with HTML5), more on this subject would have been appreciated.  Second, although I respect the fact that most graphic designers still adhere to the Adobe product line for graphic creation and editing (i.e., the author's preference to use Adobe Acrobat, Dreamweaver, Kuler, Illustrator and Photoshop), it's too bad Brian didn't empathize that most developers have limited or no access/budget/interest for such tools.  And since there were no graphic editing procedures in the book that used proprietary techniques, the author should have demonstrated his design suggestions via open source alternatives like the GIMP or Inkscape (though to be fair, he does acknowledge their availability for such purposes).  Fortunately, the necessary means described in the book to create and manipulate graphic elements are easily transferrable to these open source graphic applications.  

Regardless of the type of tool used, the ideas are what count and for what its worth, the ideas imparted by the author match the book's cover price.  This is especially true for developers who have not had much experience creating web front-ends beyond simple CMS, Django or Rails pre-existing, template-driven websites.

 



Title: Web Design for Developers
Author: Brian P. Hogan
Publisher: Pragmatic Bookshelf
ISBN: 978-1-93435-613-5
Pages: 300
Price: $42.95 US

 

Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 


Video