Thom Bennett - Website and graphic design

Thom
Bennett

Website & graphic design

info@tbgd.co.uk
07875 662 614

 

Principles of Design

Monday, December 15th, 2008

Original Source: Design Meltdown

Nice article below by Patrick McNeil…

Introduction

One of the topics which I have long wanted to cover is the basic principles of design. My approach to design analysis and learning has always been from a sample stand point. That is to say I much prefer to analyze samples of design and how they address various topics instead of abstract talk about vague topics. The basics are no different. I believe that through the analysis of sample sites we can all get a refresher on the basic underlying principles of design. This is not only good for the beginner, but also the more advanced designer. I often find that when I go back to the basics I find something new that I didn’t get before.

View on Amazon.comFor the basic principles covered here I turned to the book Basics of Design by Lisa Graham. It is the book I used in school and has always served as a basic reference point for me. According to Graham the basic principles are emphasis, contrast, balance, alignment, repetition and flow. All design is built on these basic blocks, and the more thought that is put into those elements the better the design will be. It seems that design goes astray when this is forgotten. By returning to the fundamentals we can refocus our eyes and minds when producing design.

For a long time now I have been building out these sets of samples, I have tried really hard to get the very best examples of each topic. I also made a large effort to create a diverse set of examples demonstrating the principles in an assortment of usages. These sets are by no means huge, instead they are small focused sets which demonstrate the power of each principle.

The Design Principle

The first design principle we will take a look at is that of emphasis. Emphasis is defined as special importance or significance. In many ways emphasis is closely, if not the same as, related to hierarchy. Basically emphasis is the analysis of a site’s content in order to determine what the hierarchy of importance the content has. Once this is determined a design can be created that carries out these goals. One great method is to list all of the elements required on a page in order of importance. Then, design with that in mind so that the visual hierarchy of the page reflects the determined importance. One reason this is so important is to avoid an attempt to emphasize everything. Remember, if you try to emphasize everything, you effectively emphasize nothing. Lets look at some samples to see what has been done.

Sample 1 – Zedmo

Sample 1

The ‘, 145)” onmouseout=”hideddrivetip()”>Zedmo site is a nice example of emphasis. I have placed numbers over the elements of the page to order them in terms of the hierarchy and emphasis I perceive in the page. In this case, the order starts at the top and works its way down the page. Physical location plays into hierarchy and the elements at the top of the page have a greater weight. In this case, the top most element (the logo) has been sized such that it stands out, making it the most emphasized element on the page. The logo also has the highest contrast on the page, which further emphasizes it. But lets not get ahead of ourselves, contrast is a topic for another day!

On the Zedmo site the brand name is the most impactful element on the page. This is great in terms of stamping the name and image on the users mind. Being remembered on the web is a difficult task. The second key element of the page is the sign in & sign up section. It is of the utmost importance to sites such as this to get people to sign up. In this case the sign up link is heavily emphasized. In fact, the sign up block closely competes with the logo for the most visual dominant element of the page. It could easily be argued that this is in fact the real number one element on the page.

Finally we get to the lower section of the page to find some supporting copy and secondary tasks for the site. The designers of this site clearly understood the goals and purpose of the home page and designed it appropriately.

Sample 2 – Oaktree Creative

Oaktree Creative

The ‘, 145)” onmouseout=”hideddrivetip()”>Oaktree Creative site is a bit more complex when it comes to hierarchy and emphasis. Part of the difficulty in determining hierarchy on this site lies in the close similarity of so much content. But there is a hierarchy at play here. First and foremost the central white band of content pops out. This is the largest text on the page, it is near the top of the design, it spans the entire width of the page and it is the highest contrast section of the page. All of this makes it pop out.

The difficulty comes after this stage. My perception is that number two is the logo, and then the tabs. In terms of brand consumption this is a nice order of business. First we get a snippet of what they do, then we get the brand reinforced, and finally we are given a set of options for navigation. A nice flow in terms of visual consumption.

The bottom three columns of data come in last place. But even inside of these 3 buckets we can see a hierarchy at work. The text at the top of each is larger and creates an order.

Again, the order of emphasis on this site follows a logical progression of important brand messages to less significant clutter of content.

Sample 3 – Spine

Spine

The ‘, 145)” onmouseout=”hideddrivetip()”>Spine site is most defiantly one of the more complex examples of this principle. In this case the large text at the top easily gets the most emphasis and therefore the number one slot in the hierarchy. The simple statement is powerful and connects with visitors on an effective level. It is a great start for sure.

Things most definitely get more complex from there. Second in the hierarchy of the page is the main chunk of content. It’s close proximity to the most emphasized part of the page helps make it more dominate. The larger font size helps as well.

Clearly the third most dominant element is the image to the right. If only because it is the only image on the page and easily draws attention. From there it jumps back to the left of the page and continues down.

The order of emphasis on this page might not flow in the most common of paths, but it ultimately works. One neat thing to note about the design is how when going from 3 to 4 you can easily get caught back on number 1. This really helps to beat that message into the viewers mind.

Conclusion

I will not analyze the other three examples below, but rather let you explore them on your own. But hopefully this refresher on emphasis and hierarchy will remind us of the importance of the element. It is so easy to get lost in the design process and simply forget about the hierarchy of the page. I suggest you map out what is most relevant and use it as a checklist before you declare a design complete!

The Design Principle

The second key principle of design we will be discussing is contrast. Contrast as you might expect is pretty self explanatory. But hey, this is the basics, so some clarification is in order. Contrast is simply the visual differentiation of two elements. Elements with strong contrast look distinct, elements with low contrast appear similar or blend together. There are many ways to achieve contrast, some of these include: color, size, position, font choice and font weights. Through contrast a site design can have visual variety, and avoid being stale. It is also through contrast that focus can be achieved, there by addressing the need for emphasis on certain elements.

A key purpose behind contrast is to implement the hierarchy of a page and enforce the desired emphasis. Contrast can be used to draw attention to the most important elements of a page. Things like the content, action items or purpose statements. Depending on the needs of a site, the designer can choose to draw attention to certain elements though the deliberate control of contrast. As always, lets look at some samples to see what designers have done with this.

Sample 1 – Studio 3k

The Studio 3k is a great example of a common sense approach to the use of contrast. The design of this site features a very logical approach to the use of contrast. By playing into the strengths of contrast and the natural order of things the site makes no attempt to force contrast to achieve difficult tasks. Enough with the abstract talk. Lets break down the design to see what I mean.

Above all this site uses position combined with contrast to establish hierarchy. The hierarchy of the page rather clearly goes from top to bottom. The top most elements of the page are first in the hierarchy and the steps just go down from there. It most certainly took some time for the designer to tweak the design to ensure this happened. A little to much contrast here or there and all the sudden this order would change and the viewers eyes would bounce around the page.

Lets start at the top of the page where the highest contrast part of the page is found. The bright white logo stands out on the gray background. This reinforces the brand of this design shop and helps its logo and name stand out. A wise thing considering the vast selection of design shops.

The next band of content we find is a simple purpose statement. The white background of this section helps to establish a more powerful contrast. Especially when combined with fairly large and dark text. The photographs are also the largest in the page and overlap the section above it. This type of contrast has been leveraged to effectively focus users attention on an important element of the page.

Below this white section is the final third of the page. At the top most portion of this section we find the third level of hierarchy in the page. Again we find the use of color contrast, in this case blue on gray. Additional larger type has been used to help draw attention. This image serves as a header to the 3 columns below it and are visually connected to them by being placed inside the same gray section. This is important because it helps keep the user from wandering off. If the visitor has made it that far down the page with out clicking on something, the 3 columns provide a host of links that might be of interest.

It is easy to see how the top down approach of this sites simply makes sense and plays on visitors natural top to bottom motion. This creates a really clean and effective design that doesn’t leave the user confused or lost.

Sample 2 – Clear Function

Clear Function is a great example of the use of contrast in a more complex way. For starters their home page is very content heavy and with out the use of contrast all of it would run together and be impossible to scan. By careful usage of contrast they have reduced the overwhelming nature of so much content and made it far more manageable. Lets look at this site from a few different perspectives.

One of the first things I notice is the large bold purpose statement across the top. Several elements give this text an increased contrast that ultimately makes it stand out above the rest of the page. The text is larger then any other text on the page, even the main logo. It is also white on dark, where as the main content chunk is dark on light. Also, it contains the only green text on the page. The green is echoed in other smaller parts of the page to unify things. The prominent placement at the top of the page also gives it more weight and plays nice with the need for greater contrast. All of these things basically give this chunk of text the first order of hierarchy in the page and ultimately the most emphasis.

From there the eye is drawn in several directions. But each section has effectively used contrast to direct attention. For example the main content text is the only part of the page with text set on white. This makes the container of this text pop out the page. This is a really nice way to help avoid content overload. The side bars for example has quite a bit of text which combined with the main copy would cause a visual meltdown. Instead these side bars are far lower contrast. One has dark gray on light gray text, the other light gray on dark gray. Both of these are very low contrast and don’t draw the users eyes as easily. The copy in these chunks is also smaller, further contributing to this order of things.

Notice how in the main content region the article headings stand out very nicely. This vastly increase the scanability of the page and makes for a much friendly presentation.

Conclusion

Contrast is a tool we all use, whether we think about it or not. The trick is to remember that your using it, to put some thought into the contrast of the page. Contrast is one of the most powerful tools in the quest for effective hierarchy.

You can red the rest of the article here…

Original Source: Design Meltdown Nice article below by Patrick McNeil… Introduction One of the topics which I have long wanted to cover is the basic principles of design. My approach to design analysis and learning has always been from a sample stand point. That is to say I much prefer to analyze samples of design [...]