The Principles of Beautiful Web Design

Reviewed July 9th, 2007 @ 08:18PM

[Book Cover] The Principles of Beautiful Web Design

The Principles of Beautiful Web Design by Jason Beaird is a concise book about basic design principles. To some, design is something that is tough to grasp and is a mystery to understand. To others it simply comes naturally. If you find yourself struggling with design and need some direction, then this book is for you. Throughout each of the chapters Jason breaks down the specifics of layout and composition, color, texture, typography, and imagery.

Jason states his intended audience as someone who might be:

…squeamish about choosing colors, feel uninspired by a blank browser window, or get lost trying to choose the right font.

It is important to note that this book is not a book about code, but is about principles, inspiration, and education. With that brief disclaimer out of the way, here is a breakdown of the content found in the book.

  • The journey starts with chapter 1 and layout and composition. Before any keys are pressed on a keyboard, there is much work and research to be done. Jason talks about his design process and starting things off right with your clients. He gives a brief definition of what makes up good design. I am sure this could be many different things to different people, but he stresses the key points in relation to user interaction on the web. How easy is it for people to find what they are looking for? Does the design help them achieve their goals, or is the design visual eye-candy that inhibits them completing a specific task? Is the navigation and information easy to understand? Can the user navigate without feeling lost? The design process takes time.

    Next he looks to the anatomy of a web page. Many pages have a consistency to them. There is a navigation, sub navigation. A masthead with branding information. There might be a search field to help locate different pages. There are an array of columns used for placement. There is a footer that usually has more details or contact information. These are just a few, and they don’t all have to look the same.

    The next few pieces discuss grid theory, balance, unity, and emphasis. Each of these play an important role on how your information is presented. Aligning your items to a grid. Aligning your type to a vertical rhythm. Having balance between your sections. Having unity in your sub-pages as the navigation gets deeper. Placing emphasis on any given section. Each of these are discussed in detail and are accompanied by examples found on the web.

    This chapter rounds off by Jason showing some bread and butter layouts, finding inspiration on and off the web, giving introduction to some new and fresh trends (you know, the Web 2.0 stuff), and then begins the application that we will watch unfold throughout the rest of the book, a website for Florida Country Tile.

  • With a firm foundation of layout and composition beneath us, it is time to address the aspect of color. We have all seen beautiful color combinations, and most likely our fair share of not-so-friendly-to-the-eyes color combinations. How do you go about selecting a color scheme for your website? Jason starts this chapter off by discussing the psychology of color. Color theory simply addresses how people react and relate to different colors. There are many variables involved, and some of them are even geographical in nature. What types of colors should you choose for your target audience? Looking to develop a site for a restaurant? Find out how different colors convey different emotions in your users. Color theory gives great insight into how people perceive colors found on your website.

    The next few sections discuss things such as the temperature of your colors, the value of your colors, and then into a little bit of color theory. Each of these pieces are given adequate attention with even more examples shown. Things start to get fun as he moves into color theory. Here is where we see some methods used to creating elegant color schemes. No longer do you have to randomly select colors, now you can give your entire website some of that balance that we discussed above. Selecting a color scheme can be very difficult, but as Jason shows there are many options to selecting a color scheme that will fit the needs of your site. As he shows the process for creating a color palette, he moves on to the process of selecting a color palette for the application section. The Florida Country Tile website is starting to get filled out with an elegant color scheme.

  • The application is starting to come to life. We have a layout, we have a color scheme, and now it is time to see how we can make some subtle improvements through the use of texture. This chapter defines such things as points, line, shape, volume and depth, and pattern. Each of these come with illustrations to further elaborate on the topics. After looking through each of these things, Jason moves to the practical side and building your own textures for your website. This includes subtle background textures, textures for use as borders, and textures are backgrounds for different elements on a page. He gives the application a subtle enhancement by adding a textured background. Things are starting to evolve even more, and the site is starting to take form and life. Background images, drop-shadows, and section separators are just a few ways textures can be used to enhance a layout.

  • One of the often overlooked aspect of a website is that of typography. This is mainly due in part to the small selection of fonts available to web designers. Jason covers some ways to get around this shortcoming by use of sIFR and other image replacement techniques. Image replacement has been discussed in depth in many different avenues, and Jason doesn’t spend much time discussing these. This is an out of classroom assighment for you as the reader.

    Now it’s time to dive in a little deeper. The next few sections are a brief history lesson. He discusses things like letterform, text spacing, letter spacing, text alignment, adjusting line height for an optimal reading experience, and some of distinctions of typefaces. Here you will see a breakdown of serif versus sans-serif, and some of the different variations of each.

    With the history behind us, we move forward to what it takes to choose the right font for your project. This is always dependent on the client and the branding that needs to take place. Choosing a typeface is sometimes a difficult process, especially with the large amounts of fonts and variants available to you as a designer. Jason moves on to apply some of these principles to the application that we have been working on. He chooses the fonts he will use throughout the website, both in images and in the body of the pages. He proceeds to add some text on top of the imagery, as well as give some breathing room and separation to the content on the homepage.

  • Our journey to design bliss is coming to a close. The last chapter discusses adding imagery to give your site a bit of visual flair. Again, Jason begins with a few sections covering some history, what to look for, and where to look for it. This includes the legal implications of the different kinds of images that you may come across. Once we safely secure the images we want to use for the website, and are sure we have full permission to do so, we then move to cropping, adjustments with photoshop, and the different formats and resolutions available to use. Here we see a brief discussion of applying CSS to achieve some re-usable border treatments to our images. Finally, all of this knowledge is used to extend upon the application and give it its final touches.

Overall, this book is an excellent resource for those seeking design instruction and inspiration. The book is filled with screenshots of different sites and sources for inspiration as the author encourages us to look around for inspiration in our own designs. Seeking inspiration doesn't always mean emulation. Find a way to make things your own for you and your client. As a reminder, this book might seem elementary for those who have a background and education in design. This book is for those looking to take small steps to improve their websites.

I did have one qualm with this book. This book is primarily constructed of principles, history, and philosophy of design. This means discussion of code and application specific techniques are kept to a minimal. However, given the target audience, it seems as though Jason makes many assumptions about the understanding of Photoshop and the techniques described therein. I know that it would take extra time to explain this process, and he even gives a disclaimer that it is hard for him to explain his entire process. Maybe it would have been nice to have an appendix with some more details to the Photoshop techniques he discusses throughout the book.