The Principles of Beautiful Web Design

Trent Lucier writes "Fellow programmers, beware! Graphic designers have been invading our territory. A flood of books have been released aimed at artists who want to learn web development skills. Oh, it starts innocently enough, usually with CSS and XHTML. But soon they are learning JavaScript, PHP, and even SQL! What have we techies fought back with? What material is there for us to boost our artistic right-brain power? Sadly, our motley collection of Gimp tutorials alone will not win this battle. We need something stronger. We need to understand the principles of graphic design. But the shelves have been empty of books that make this topic accessible to tech-minded people. Well, empty until now." Read below for the rest of Trent's review. The Principles of Beautiful Web Design author Jason Beaird pages 180 publisher O'Reilly Media rating 7 reviewer Trent Lucier ISBN 0975841963 summary A book aimed at developers who want to learn how to make websites look more attractive The Principles of Beautiful Web Design by Jason Beaird is aimed at developers who want to learn how to make websites look more attractive. The 5 chapters each cover one of the pillars of graphic design theory: Layout, Color, Texture, Typography, and Imagery. Full-color and packed with lots of great examples, the book contains screenshots from dozens of modern websites to illustrate graphic design principles. A cumulative case-study ends each chapter, where the author shows you how the theories he just explained can be applied to a real site he is developing for a client.

Except for some CSS sprinkled here and there, the book contains no code. Don't look for tips on creating 3-column layouts or other stylesheet wizardry, because you won't find it here. The author assumes that you know how to take an image mock-up and convert it into an HTML/CSS document. This is a strong point of the book, since the focus can remain on graphic design techniques and not unnecessary code listings Additionally, there isn't much discussion of tool usage. A few examples use Photoshop, but the book focuses mostly on theory and case studies, not step-by-step program tutorials.

The book starts with Layout and Composition. If you have ever wondered why some websites just look better organized than others, this chapter will explain why. Beaird discusses the concepts of grid theory, and how using the golden ratio to divide page elements can improve the visual appeal. Plenty of examples are given that illustrate the principles of balance, unity, and emphasis.

The Color chapter contains my favorite example, where Beaird uses different versions of the same drawing to describe monochromatic, analogous, and complementary colors. As with the previous chapter on layout, this part of the book does an excellent job of teaching you how to learn from attractive websites, instead of mindlessly imitating them. Color is a hard topic to understand, but there are some good tips here that teach readers how to create an appealing palette for a website.

Relying solely on solid colors and grid layouts can make a website look flat. The Texture chapter discusses ways to use style and make your designs much more eye catching. This chapter is probably the most "Web 2.0" chapter in the book. Gel buttons, gradients, and backgrounds are all discussed.

To the dismay of typophiles everywhere, font support on the web is very poor. There are very few "web safe" fonts that designers can safely assume are on all computers. The Typography section shows readers how to make the most out of this situation by understanding letter spacing, justification, and font usage. Beaird also discusses the sIFR technique (Scalable Inman Flash Replacement), which uses Flash and Javascript to display fonts that may not be on the user's computer. The sIFR method is accessible and degrades gracefully. While the book does not discuss the specific implementation details of this method, just bringing it to my attention taught me something new.

Imagery is the subject of the final chapter, and the book ends on a disappointing note. Very little of this section is about the graphic design principles behind imagery. Rather, precious pages are dedicated to discussing various license agreements and tips on finding stock photos. This is useful information, but it should have been relegated to a sidebar at the most. The chapter focuses almost entirely on images as content and not as design elements. If you want to know how to make images in a blog post look pretty, there are some ideas here (drop-shadows, borders). But there is no information about how to work images into a page header or navigation menu. How do I determine if an image matches my color scheme? How can images spice up a design without going overboard? These were just some of the questions I had going into this chapter that were left unanswered. The Texture chapter hinted at these ideas with examples, but I wanted to see a deeper explanation of the underlying principles.

The book is a little short at 180 pages, but that's not as bad as it may seem. Those of us accustomed to reading 800-page tomes on programming tend to forget how much content can be packed into a book when the author doesn't have to waste 300 pages listing code, 200 pages on the API, and 150 pages on an index.

The Principles of Beautiful Web Design is a good book to kick start your graphic-design journey. The biggest benefit that I got from this book is the knowledge to learn from great designs as opposed to just admiring them in a state of awe. The book could have been a little longer, and some of the topics could have been discussed in more detail. This book won't teach you everything, but it's a good place to start and it will leave you excited about learning more.

Trent Lucier is a software engineer. He is the creator of ChessUp, a tool for creating chess diagrams online.

You can purchase The Principles of Beautiful Web Design from amazon.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.

Comments

Don't feel too threatened

[cstec]

Foruntately, artists are too busy creating art to consider either the user interface or usability. In fact, head to the nearest art show and it's practically the opposite. I think most art majors think the plan is to make the whackiest thing you can and then laugh at the viewers who don't get it...

Re:Don't feel too threatened

[Brummund]

Back in the wild 90's, the company I worked for built the web pages for the national railway company. This company has a deep blue color as its major color, and it is not possible to get this color on a 16 color display (as was the norm then) without dithering. In one of the preliminary meetings, the person in charge of corporate design/branding at this company had decided to show up.

The branding manager was outraged by the fact that this color could not be displayed properly on all computers, due to the primitive nature of graphics cards available at the time. 15 minutes into the meeting, I heard someone yell "YOU STUBBORN FSCKER," and our designer just left the meeting. This art guy had blamed our poor web designer for the fact that this was not possible.

Unfortunately, it took me 6 years to realize that web programming was a dead-end. No amount of money can convince me that spending one's life adjusting buttons 1 pixel at a time is something I'm going to look back to with joy when I'm retired.

(On a side note: It is amazing that this web 2.0 crap is hyped like hell. I got a book explaining techinques similar to "AJAX" from 1997, and a few of you might even remember Lotus Corp's InfoBus project.)

Just work your way down the tiers, preferably at tier 2 and downwards, and find happiness. Just remember: Life's too short to move pixels for people with sideburns and a highpitched voice.

Re:Give me Edward Tufte

[Timesprout]

That's the whole point. I would prefer a clear and informative website rather than someone elses interpretation of 'beautiful', because we all know beauty is in the eye of the beholder.

Re:Ah...That explains...

[MightyMartian]

That's right. Coders will be called in sooner or later to fix up the abortions that web designers create.

Re:hmm...so what?

[DwarfGoanna]

As a design student myself, I'm going to let you in on a secret: graphic design attracts a lot of really uncreative people, and this is why we're continually assaulted with bad graphic design. Don't get me wrong, there is really really good design out there, but only at the very top end do they crossover into "artist" territory. Sad but true. Now, what would be really interesting is someone with technical ability working in concert with an actual fine artist to produce the type of stuff designer largely half ass. Unfortunately, designers have wedged themselves in between the two fields.

Usability vs. Visibility

[shidoshi]

I've been somebody who, for many years, has loved web design from both the visual and technical sides of things. How well a website works is obviously important, but just as important is how it looks. There are many people out there who disagree, and say that usefulness is key and how "pretty" a page is isn't important, but they're completely wrong. (In my opinion, of course.)

The reason they're wrong is that web design isn't either/or, no matter what some may say. There are obvious examples of design over use - countless, countless examples - but that doesn't mean that making a website visually attractive kills the chance to also make it work like a charm.

For me personally, one of my favorite projects web design wise has been my personal forums, where I've put just as much important on how they look as well as how they work. Forum design is, to put it bluntly, god-awful across the internet. If message forums don't just stick with the defaul theme, they slightly modify it to make it look average AND ugly.

Message forums are about reading the posts presented there, but they're also about the community, so the design of the forums should reflect that. Here's a screenshot of the new theme I have in progress - it's far, far from done, but gives an idea of my kind of sense of forum style. First off, avatars are 600x150; a bit larger than the previous 600x120 avatars we were running. Some see that kind of thing as a waste, but our large avatars were one of the things that made our forums stand out, be remembered, and the way the board was coded, you could turn off avatars and still have the forum work perfectly and look very nice. Users will be able to select their own background color for their posts; it makes things more colorful, and personal, but it also then lets a user quickly scan a thread and find their own posts, due to knowing what color they're looking for. Items such as thread title, page navigation, and search box will be part of a bottom-of-the-window-pinned navigation bar, extending on the previous navigaion bar we had; this helps to reduce the clutter in layouts, and give the forum another unique visual aspect, but it also presents important navigation and UI items in one consistant, always available on-screen location, instead of scrolling up and down the page to hunt them down every time.

Not that I'm trying to toot my own horn here - my point is that with just a bit of thought, web design can be both visually appealing and enhance the user experience, but that idea seems to be lost on people far too often. And, obviously, the same design elements and planning I'm using for my new forum skin wouldn't work for other types of websites, but we need to better understand what each type of website needs and requires, and work from there. Nobody would make sense in saying that every type of website needs to be visually stunning, but those saying that sites don't need to be fancy or appealing are just as wrong. A website being visually unique, pleasing to look at, providing quality design at the same time it presents quality UI, those are all important factors that too often go overlooked.

Re:Give me Edward Tufte

[PhoenixSnow]

I just went to E. Tufte's one day class yesterday. It was not as useful as it'd been hyped up to be. However, I don't think he was just all about numbers. He did have a great deal of knowledge on how to present the information in general. The main component that's lacking in his books/class was understanding of the users as an average person on the street with no scientific background. He actually said, " yeah it's good to know your audience but it really doesn't matter." and he was all about 'high resolution' data. In my opinion, there's such a thing as reducing the resolution (by resolution, he means data/information) for the sake of clarity. From all the books I've read, Robin William's Non-Designer's Design Book is probably the most effective book to teach myself some visual and graphic design. Another good one is Steve Krug's 'Don't make me think'. But it's more web design than graphic design. The old classic 'Design of Everyday Things' is very dry and it probably was really useful when most people didn't know the usability fundamentals. But now, it just seems like everyone already knows the basic principles and it's not adding much more value anymore.

Re:Give me Edward Tufte

[T3kno]

I would argue that functionality is also in the eye of the beholder. Our brains work differently, which is why we all have preferences in art, music, etc... including functionality. Certain sites, designed by very well paid people make absolutely no sense to me, I for one hate Amazon's interface, but that's me. Obviously they spent a lot of money and research time to develop a site that works for most people, to my eyes it pretty much sucks.

dev vs design: so sick of this discussion

[Anonymous Coward]

What bothers me the most about the design vs/ developer discussion is that devs tend to think that there is little transferrable process/logic behind the presentation of information, branding, color, etc. Bullshit -- it's real, it's evolved, and is learnable.

There are phenomenal design programs out there that teach logic and creativity as the core of design, not "creative" alone. Programs that heavily emphasize typograhy tend to focus more on logic -- not "art." The Bauhaus, Ulm, and the Schule für Gestaltung Basel are the foundations of modern design education. Grids, typeface development and usage, color, form, flow are all trainable (in good design programs). Sure, these kinds of things are important to "art" -- but they're more important to information conveyance, be it in the form of a website, software interface, or anything else visual.