Contact Us: 904-395-5105

Layout & Color

The first two chapters of The Principles of Beautiful Web Design provide a brief yet informative outline about layout/composition and color. In the beginning of chapter one, Beaird provides an example of a designer and client relationship and gives his own personal opinions and experiences of a professional meeting with a client. He lists important questions to ask the client in order to obtain the information needed to begin the design process. I found his tips to be very helpful and do plan on referring back to this chapter before I have my first client meeting. Along with the steps to design process, he discusses the basic principles of design such as balance, symmetry, unity, proximity, contrast, repetition and etc. He covers the grid system and the use of the rule of thirds for designing a properly proportioned web page layout.

An example of a website that utilizes the rule of thirds is


I am very familiar with all of these principles having been taught them in previous art classes, but its nice to get a refresher on the theories that essentially produce the foundation for which ALL design is created, especially when delving into a new direction of design and helps me not overlook these theories when designing for the web.


The chapter continues to further explain the structure of a proper website; containing a header, navigation, content, white space and footer. He talks about the most commonly used bread-and-butter layouts, left and right-column navigation, and three-column navigation along with the pros and cons of fixed widths and liquid width layouts. With my experience of browsing different websites on the Internet, it is apparent that most sites make use of the fixed width layout over liquid. This makes sense as fixed widths give the designer control of the way the content appears on the site page no matter the size of the computer screen.

Ex. Right column navigation, fixed width  –

Ex. Left column, fixed width  –

I found the website to be helpful in understanding  different navigational layouts. The site gives basic visual expamples of shapes that create the specific layout.


In the beginning of chapter two, Beaird goes over the color wheel and the feelings and emotions evoked from different colors. Color association is key when branding a company that draws interest towards a designated audience. He then moves onto color values and the use of light and dark colors that establish different feelings by using tints and shades.

A tint is made by adding white to a given color white a shade is any pure color to which black has been added. In the next section, he discusses color theory and the proper use of color schemes such as monochromatic, analogous, complementary, split-complementary, triadic and tetradic color schemes in website design.

Ex. of complimentary website  – 

Ex. of split-complementary website  –

Ex. of analogous  –  


Share with your friends