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

Give me Edward Tufte

[Timesprout]

Anyday

Re:Give me Edward Tufte

[Doctor Memory]

Tufte doesn't say squat about web design. He doesn't really get into page or content design at all. He's all about the presentation of data, and how to try to turn it into information. He'll tell you that you should stick to primary colors or simple textures, but he'd try to dissuade you from adding a drop shadow to your graphic (indeed, from even adding a graphic if it wasn't intimately related to the data set you were trying to present).

He's the man if you're trying to present data, but if you want to present text or other non-numeric information, he's not much help.

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:Give me Edward Tufte

[Billosaur]

I would prefer a clear and informative website rather than someone elses interpretation of 'beautiful'...

Amen. If you want art, go to an art gallery. I want websites to be clean, functional, easy-to-navigate, and more importantly, I want to be able to find the information I'm looking for without having to hunt through and around annoying graphics and being subjected to vomit-inducing color schemes.

Re:Give me Edward Tufte

[fbjon]

Humans share a lot of common points in their interpretations of beautiful. These can be learned, and exploited. Don't kid yourself, beautiful is always better than ugly.

Re:Give me Edward Tufte

[Anonymous Coward]

beautiful is always better than ugly.

But never better than useful, useable, clear, available, working - in fact, beauty is WAAAAAAAAY down the list

Tragically, this hasn't sunk in for most web designers.

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.

Re:Give me Edward Tufte

[ShieldW0lf]

There are two approaches to setting usability goals. One goal is to make the system as easy as possible for someone who doesn't know what they're doing to use. This approach is best for transient users, such as customers buying big ticket items that won't frequently patronize the site. It's also best when you're presenting internal use stuff to executive clients, because they're usually far removed from the day to day operations of the company and will not be the "power users" of the software. Artists are usually more adept at designing for this goal, because the demands of their job require that they be more closely in tune with other people than the next person. The other goal is to make use of the system as efficient as possible for someone who has taken the time to learn it inside out. I think of it as "make it as easy as possible for someone who has already completed each task three times". This is the best approach for expert systems where the person can be expected to dedicate several hours of each day to using it as part of their job, and it's reasonable to expect them to work at learning. It's also best when you want to make it easy for frequently returning customers to be impulse-sold, like Amazon. Propeller heads are usually more adept at designing for this goal, because the demands of their job require that they be more closely in tune with the underlying system. Most cases end up with some degree of compromise between the two goals, some duplication of user interface into "Expert Mode" and "Novice Mode", and some clutter in the interface to bridge the gap. That would be Amazon.

Non-Designer's Design Book

[johnrpenner]

'Perfection is achieved not when there is nothing more to add,
    but rather when there is nothing more to take away'. (Antoine de Saint-Exupery)

as a technical writer for ten years, i've found the best book on the subject
for people who aren't designers is: Robin William's Non-Designer's Design Book.

it covers the four basic principles of Design:

1) Proximity: Make sure than when you Poke button X, status indicator Y is PROXIMATE to X.

2) Alignment: Don't start things out on a new Arbitrary Visual Margin, reuse existing Bounding Rectangles to ALIGN things to each other.

3) Repetition: Don't use a different icon for the same thing; consistently use the same Motif throughout.

4) Contrast: If two elements are not exactly the same, make them distinguishably different.

all the best,
j

Re:Non-Designer's Design Book

[pycnanthemum]

I found the book by Robin Williams to be a great resource as well.

But I specifically remember her listing the design principles in a different and purposeful order:

Contrast
Repetition
Alignment
Proximity

...and I have never forgotten them! :-)

yeah

[User 956]

Oh, it starts innocently enough, usually with CSS and XHTML. But soon they are learning JavaScript, PHP, and even SQL!

I always knew Java was a gateway drug.

Re:yeah

[Brummund]

1. Build timemachine
2. Set machine from 1. to 1995
3. Silence the Netscape jerk that coined the JavaScript name
4. Party like its 1999!

Re:Maybe we'll finally see...

[Phisbut]

...some Cubist web pages.

We already have this one page about cube stuff. We don't need a single more, you dog brain student.

Some related websites...

[Cr4wford]

http://www.webdesignfromscratch.com/ - covers pretty much everything web design related

http://www.sheriftariq.org/design/index.html - articles on some design elements

http://www.adampolselli.com/getthelook/ - guides that basically hold your hand to achieve various styles

http://webtypography.net/intro/ - typography applied to the web

http://www.alvit.de/handbook/ - list of links related to web design/graphic design/etc.

You can also try enrolling in a class at a community college or something...that way you can learn, practice, and receive feedback from a teacher/peers.

Just to be fair

[spun]

Web designers will be called in sooner or later to fix the artistic abortions that coders create. And then user-interface designers will be called in to fix the usability mistakes of both.

Re: Eye of the Beholder

[andrewd18]

Wow! You're saying that I could get a +1 modifier to my Charisma if I carry a Beholder Eye in my knapsack? That's an extra use of Turn Undead per day!

It's not about you...

[theshowmecanuck]

...not trying to sound cliche. Unless you are developing a web site for you to look at exclusively.

I do agree with you that a clear, easy to navigate site is important... who wouldn't agree with that? But at the same time, an overwhelming number of the average public are attracted more to graphics containing 'cool' looking web sites than 'Plain Jane' web sites. The web sites that are trying to sell or advertise a product or service to the general public need to appeal to the general public. That is one of the reasons why web sites are redesigned so often, to attract new people. It can't be 'cool' unless it is new and on the 'bleading edge'. As far as 'beauty is in the eye of the beholder': the people creating the site, if they really know what they are doing, know their target audience. They will appeal to what they know the majority of that group finds beautiful. But most people belong in that big general public demographic...

Another reason it needs to be fancy is that it shows the viewers that there is something behind the web site. They will assume that there are people willing to invest time (=money) in the site design, meaning they are looking at something that is likely to be more legitimate (we all make assumptions in life... we have to). When people see a product being advertised on a text only web page and an equivalent product on a 'cool' web site complete with good graphics, they will usually go for the product with a well designed graphics laden site. And I am not talking about some horrible mishmash of graphics put together by someone using their windows front page lite or whatever the hell windows comes with these days. It's basically like the reason you wear a suite or good clothes to a client's site. To make a good impression.

A true story about JavaScript.

[Ayanami Rei]

You know why it was called that? Because Netscape thought Java was going to be the future. JavaScript was a way to glue HTML page elements (forms, mouse clicks, page loads, images, links) to an embedded java applet in the page that would do the "heavy lifting" or allow you to control the java applet using native-looking controls couched in action-less forms. And LiveConnect was the magic glue that made it possible. JavaScript used to be called "LiveScript" for just that reason.

And now we have this crazy confusion about JavaScript Java, when they now have little to do with each other.

Let's just call it ECMAScript so no one gets confused.

Graphic Design and good websites...

[okinawa_hdr]

I'd say good design is more about controlling the presentation of your message, and has very little to do with the "graphics". In my experience there is one driving element to good design in print and online: legibility. If your message can be understood by great use of type, then you achieve getting the message across. This applies to both print and web. I don't think flashy graphics help, and can sometimes distract. When we're designing ads for clients, or doing page layout, we stay away from the real flashy stuff and use the type to control the message. You also need to be weary of reader tendencies in how you approach putting the type elements on a page. If you do this one simple thing you may find your stuff looks way more polished. Wanna see awesome type layout online? http://alistapart.com/ That's a classy website.