Design Meltdown: Study the Colour Usage

• Black

Black is such a strong color. Its weight is almost as powerful as the color red, but in a different way. It is a strong color without the attention grabbing aspects of red.

One really interesting thing about black is how it makes color pop. Photos really stand out on black, and anything with some color to it can really carry a lot of weight.

Adding color to a mostly black design creates a rich and tasty contrast. One of the most common features of these sites is how saturated the imagery is. When laying in images on top of black these rich colors typically look far better then washed out ones.

Connotations of black : Evil, self-confidence, power, strength, death, sophisticated, designer, formal, conservative, serious, mysterious, sexy, mourning, rebellion, elegant, night, illegal, wicked, intensity, mature, advanced, fashionable, stylish, chic, and trendy.

• Black and White

McNeil ponders a connection between the simple beauty of the color usage and the appeal of black and white photography. Something about simple b&w photos is so remarkably beautiful and the same seems to apply to some of the websites. 

The black and white combo is one with both classic appeal and modern pop. This color pallet can be made to have very traditional classy aesthetics, or it can easily be combined with sharp saturated colors for a look that is very hip and stylish. The combo is perfect for presenting content that really needs to stand out. By having such a neutral framework, the contents of such a design can be made to come forward in the design giving them the most visual dominance. Ultimately this combo is far more useful then one might expect. It is in no way out dated as its B&W film counterpart.

Nostalgic designs can take on many forms. Sometimes through classic typography. Sometimes through the visual language of an era like retro pop 1950's elements. In this case the color combo forces such an appeal onto the design. Combine this with other classic elements and one has a recipe for success.

• Blue

The color blue is perhaps one of the safest colors to use for a web site. It can apply to nearly any subject simply because blue is one of the most well liked colors. Blue is calming, safe, and feels very trustworthy; this is perfect for the web, where one never knows who to trust. Good old trusty blue. It is like the opposite of red in so many ways. It is diplomatic, passive, and far from confrontational. 

It comes as no real surprise that blue continues to be such a popular color. In fact, it would almost be surprising if it weren't. Its ability to apply to most any topic, combined with the mostly universal appeal of the color makes it about as fundamental as white or black.

Connotations: Patriotism, stability, power, trustworthiness, conservative, water, coolness, fun, cold, defeat, trouble, calm, strong, steadfast, light, friendly, confident, safe, corporate, intelligence, unity, sad, depression, old-fashioned, mourning, richness, superiority, truthful, loyal, faithful, noble, scholarly, unexpected, harmony, unity, clean, and technology.

• Blue and Green

The blue and green combo is one of those trusty old stand buys. A combo that always looks great and almost always comes across as conservative and safe. This is most certainly not to say that it isn't a great choice, or that it can't have an impact on its viewers. Perhaps that is just what is intended. These colors of nature connect with everything that is life giving. Green for plants and growth; blue for air.

Consider some alternatives like green and brown or blue and brown; other combos that allude to nature. These combinations have completely different connotations and certainly give an entirely different meaning to sites using them. It is amazing to see how much a difference color choice can make in how a site feels.

Perhaps this is why the combo is often seen in use on software related sites. Those sites want to draw on the friendly "natural" feel of the colors and convince potential clients that the application is not hard to use. Sure this is a subtle connection, but in design every element matters, and every element adds up to the cumulative effect of the design. Color is a critical choice. Choose wisely!

• Brown

The color brown can offer a variety of meanings to a design. One of the most obvious is the association to nature. Some sites have subject matter which makes this a logical choice, such as a park, or a wilderness lodge. But some layouts use this color for other reasons, such as Weightshift , who draws on its power to show dependability and honesty, two critical attributes for a designer. Brown certainly creates a warm and inviting atmosphere, as seen in all the samples below.

The color brown falls into one of the lesser used color categories, and yet it can yield some absolutely beautiful results. It can create tasty delicious visuals that pull users in. McNeil loves the natural down to earth feel they create. 

Many sites have pretty straight forward reasons for using the color. Take the Backpackers Bazaar for example. The site is all about activities that take place away from a computer in nature. Thoughts of getting in touch with nature are pretty obvious here. So using brown was a wise choice. It quickly sets a peaceful, nature oriented mood to the site. Connecting with the experience users desire is the key here. The site could have been all shiny and trendy, but what would that be saying? It would just be a random wrapper for the content.

Connotations of brown : Warmth, comfort, steady, conservative, earthy, natural, nature, down-to-earth, wholesomeness, simplicity, friendliness, dependability, health, honesty, old, and aged.

• Green

The color green primarily symbolizes nature and environment. Green is closely associated with money and the suggestion to "proceed", as suggested by traffic signals. The color can range from Irish, to financial, or even punk. The use of green also creates a soothing and safe feel, and many of the sites are very refreshing. A versatile color for sure. 

Green is one of those colors that somehow manages to offer a wide variety of usage and overall feel. By that I mean that it seems to be a really flexible color. You can get a lime green that really pops, a deep green like a cozy forest, or a grayish green that feels really subdued. It is a fresh and lively color and this perhaps accounts for the main reason it is used so widely. 

Green is one of the more versatile colors available to the web designer. McNeil would argue that blue is the most flexible, and green the second. This explains why the blue and green color combo is such a common choice. Green is simply a pleasant color. It isn't over bearing, instead it is calming, friendly, and connected with nature. These positive connotations make it a safe and effective color to use.

Connotations of green: Nature, environment, money, wealth, family, harmony, health, peace, posterity, soothing, relaxing, springtime, youth, humor, fun, happiness, life, growth, jealousy, envy, novice, restful, calming, balance, stability, summer, organic, recycled, plants, trees, fertility, fresh, good luck, and vigor.

• Grey

Grey is kind of an odd beast in terms of color since it is more about what it isn't instead of what it is. It isn't bold, powerful or intense, and it is more about the lack of color then having it. 

Grey is commonly associated with technology. There is a strong connection between stark neutral tones and modern design and technology. Perhaps this is a results of modernism's roots. Early modern design included lots of samples of neutral colors. This is probably where this association began and has persisted since.

Quite commonly portfolio sites will make heavy use of a neutral layout. This really makes the samples stand out. This is one of the real strengths of grey, establishing hierarchy in a design. By having most of the layout in grey you reduce those elements importance in the overall design, allowing color elements to really pop. 

McNeil views grey as the workhorse of colors on the web as it finds its way into nearly every design in one way or another. It works well with any colors, it is subtle and doesn't draw attention, all this makes it great for reducing elements in the hierarchy of importance on a page. 

Connotations of grey : Stylish, chic, elegant, classy, fresh, innovative, modern, futuristic, technology, spacious, fashionable, soft, airy, high-tech, sleek, neutral, conservative, smart, designer, trendy, light, open, state-of-the-art, impartial, calm, comfortable, peaceful, and relaxed.

• Muted

The muted color pallet is essentially the polar opposite of the Ultra Pop pallet. Instead of working to make everything bold and in one's face, muted pallets work to be more restrained, and perhaps even sophisticated.

Don't confuse this with designing with gray, there is certainly a difference. Many of these muted designs, if not all of them, use gray. But, one can certainly create wonderful muted designs that don't purely rely on it.

One major bonus of working with such a pallet is that when one really need to make something stand out, one can do so very easily. All one has to do is put in a bit of full color and one can make an element leap out of the page. Certainly too much of this can destroy the atmosphere created by such a color scheme, but it is a real bonus of this style. Actually, this isn't just a bonus, but perhaps the real reason to use this design. It has the ability to let certain content leap out at user.

• Orange

The color orange is a very flexible color. In some ways it is closely associated with Halloween. Orange carries a lot of power, not quite as bold or harsh as red, yet not as light and soft as yellow. It somehow conveys the sense of a friendly and inviting environment while still maintaining a level of professionalism and seriousness. Orange also seems to be a very hip and youthful color.

Connotations of orange : Fall, Thanksgiving, Halloween, nature, earth, warmth, energy, flamboyant, energetic, sun, stimulating, health, sociable, friendly, citrus, balance, enthusiasm, vibrant, fertility, fire, luxury, heat, and activity.

• Pink

What's in a color? Everything. The color pink primarily symbolizes love and beauty. Pink tends to be calm and soothing. It can also can be very stylish and is currently a very trendy color.

It doesn't appear to be used primarily to convey the typical connotations of romance and a feminine quality. It seems to be hot right now for conveying a fun relaxed atmosphere, or for showing a creative side. It has a very stylish appeal when mixed with grays. The cool thing about this stylish combo is that it doesn't feel to serious, it retains a relaxed and approachable feel.

The color pink doesn't seem to be going away. Something about it is trendy, stylish and fun. 

So perhaps that is the lesson in pink. A color typically reserved for cute little girls. Combined with the right pallet pink can create a very professional, hip, and enticing design. 

Some colors appeal to certain demographics; some have universal appeal; some are trendy; others are boring; but pink is the one color that when used well just makes things work. Somehow this color can just ooze with style and elevate a site to an aesthetic other wise not possible. McNeil love how this presumably feminine color can cut across the sex barrier and appeal to men and women alike.

The color pink continues to be a popular color in web design, which is of course a bit surprising. This is certainly not the color one might expect to be so widely popular. Interestingly this color is found in many place one might not expect it. Its playful, happy, and hip connotations make it an attractive color to those looking to set a different type of expectations and mood on a site. 

Connotations of pink: Passion, romance, love, innocence, soothing, relaxing, fresh, sensuous, restful, tranquilizing, marriage, healthy, happy, sweet, nice, playful, good health, life, sexuality, purity, gratitude, appreciation, feminine, fun, free.

• Purple

Certainly the color is seldom used. McNeil believes the key is in that it is perceived as being too feminine. This certainly doesn't have to be the case of course. However, it seems it is a real challenge to turn purple into something stylish. 

And of course, one cannot escape the obvious religious connotations of this color. According to the Easter story in the Bible, one knows that purple robes were placed on Jesus prior to his crucifixion. They were of course mocking him because they had conquered this "king of the Jews." It seems this is the root of purple and Jesus connection. Strangely one seldom find purple used in a church related site. Seems an obvious connection to make, and yet few do. 

Connotations of purple: Royalty, prosperity, wealth, Easter, Jesus, spirituality, wisdom, healing, nobility, romantic, delicate, cheerful, feminine, justice, mystery, mourning, death, humility, and purity.

• Red

Red is an emotionally charged color. The emotional connotations of red are all about the extremes. From courage and love to danger and hell. Red is known to be a powerful color, some even think red is so tied to victory that simply wearing it can aid in one's success. In a more serious business web site red is bold and powerful , compared to the traditional corporate blue which is conservative and safe. On the opposite end of the spectrum Bad Design Kills uses red to grab attention and issue a warning, a very appropriate usage of the color.

Connotations of red: Patriotism, conservatism, Christmas, stability, power, trustworthy, warmth, fire, fun, blood, success, sacred, hearth, emotion, courage, love, good fortune, heat, hot, evil, hell, anger, stop, respect, vitality, strength, aggression, intense, high energy, danger, communism, passion, and of course Valentines Day.

• Ultra Pop

McNeil thinks the idea of using these ultra saturated colors embodies what the new internet is all about. They are fresh and fun colors, that evoke friendliness and ease of use. So many new little apps are coming out and many of them are treated with this fresh color style. The web is moving away from things that look like programmers built them and more towards mainstream easy to use well designed applications. The psychology of the colors used couldn't play into this more.

This isn't for everyone and it won't work in all situations, but there are strong connotations and power in the colors one chooses. Choose them wisely.

This pattern of using super saturated colors seems to be here to stay. McNeil particularly loves how it escapes the limits of print and uses colors that would be next to impossible to print making the web a unique medium.

A few connotations of ultra pop : Fun, fresh, new, young, hip, easy, simple, exciting, happy, and cheerful.

• White

White is such an underrated color. McNeil feels compelled to point out that white does not equal boring.

More often then not the usage of white results from a need for a clean and simple design. These designs often contain quality content that doesn't necessarily need a flashy wrapper. Or, the owners of the site are not as interested in grabbing as much attention as possible with the design, and prefer to rely on quality goods to attract interest.

Connotations of white : Cleanliness, purity, life, stability, trustworthy, peace, happiness, cold, marriage, goodness.

• Yellow

Yellow is somewhat of a less popular color. It doesn't show up very much in web design, at least not in very prominent ways. 

The no-spec.com is the first to stand out. They clearly use yellow to reinforce the purpose of the site, to warn people about the down side to accepting spec work. The entire site is a great big caution sign, it is only appropriate that they use the color yellow. Caution is one of the most common connotations of the color yellow.

Yellow is not nearly as powerful as red, but at the same time it carries some impact. Perhaps it is the less used nature of the color, or just that it is a bold one.

Connotations of yellow: Nature, earthy, warmth, fun, sun, summer, illumination, inspiration, energy, hazard, warning, emergency, sunshine, happiness, joy, cowardice, deceit, cheerful, excitement, healthy, hope, support, laid back, spring, and relaxed.

• ProgressForge discussed about How Color Affects Purchases using infographic

• Randy Krum made a infographic about The Most Powerful Color On The Web
  

Design Melt Down: Study the Design Elements

• Badges

Badges are so web 2.0. One simply can't be a modern site without a badge! These Badges are intended to be attention grabbers. It can certainly draw the eye if one has something new or exceedingly important to highlight.

Some sites put them to marvelous use and emphasis the most important elements. From the “Buy now!” to the “hire me” or the “Love design”. These badges serve a purpose and take a prominent place in the page. Remember there is a hierarchy to a page, and designer must work the scale of importance, to emphasize everything is to emphasize nothing.

This element carries so much more power and potential than some designers realize, a badge can easily be the first element to be noticed on the page. Putting something meaningless in it seems like a really bad idea. Many of the samples contain calls to action, a brilliant way to use the element to draw users to the action one want them to take. 

McNeil knows if he had a product to sell he would either make it a "Buy Now" badge, or he would put the most compelling reason to buy his product in the badge. Reduce the sites purpose to the single most important point, do you want to be hired? Do you want to sell a product? Do users need to know the site is pure spam? These little badges not only look nice, but they serve a role and can be a powerful design tool.

Examples:

• Decorative Animation

Decorative Animation is animation in an interface that is pretty much there for decoration. McNeil finds the use of decorative animation to be quiet inspiring. It is fascinating to see how a little (or a lot) of animation can really breath some life into a design. 

Example:

http://www.lab25.com/ - this website has interesting decorative animation for its buttons and logo.

• Icons

Icons are such incredible little visual devices. Their sole purpose is to communicate lots of information in the simplest possible way. Their usage on the web is of course no surprise. The web is an environment filled with impatience, wandering eyes, and easy distractions; a place in dire need of quick visual indicators. Icon can serve as great helpers showing users where to go for what they need. Instead of scanning text user can scan images, and often they will tell user what he or she needs. This is no different then street signs, where recognizable forms communicate quicker than text.

The key to successful usage of icons in a web design is integration. Not only should the style of the icons fit the site, but the color pallet as well. This seems obvious, but at the same time it can be so easy to not do this. The icons should really work to reinforce the design of the site and in many ways become the focus. 

The use of icons in design is not likely to ever end. The practice of summing up lots of information in a little package will never go away. It all boils down to the most rapid form of communication possible. Design is in fact all about communication. 

Examples:

http://www.cropix.ru/ - this website has amazing icons designs.

http://www.icozon.com/ - has many icons for its webpages.

• Mascots

If there is one thing missing for the typical web site it is personality. Personality is hard to get across with out putting some "live" element into a design. Mascots are just such a tool. They imbue the design with a character which inevitable has some sort of personality. The amazing thing is that these characters need not be animated in any way to effectively fill this roll.

Not every site needs a mascot, but it can most certainly be a powerful tool to help set the mood designer wants his or her site to have.

Examples:

• Ornate Elements

Ornaments have been around for ages and have long been used by typesetters and blacksmiths. They have decorated everything from park benches to wedding invitations, and now of course, web sites.

Ornaments are beautiful and can really enhance the feel of site. In others it is more subtle and it is simply used as decorative element adding an extra bit of flair to a page.

Ornate elements are one of those things that may gain more trendy status from time to time, but on the whole will never go away or be out of style. Ornament has always been really beautiful and will always have a place. What McNeil finds truly wonderful is when people use it in ways that feel fresh, new, and just look beautiful. Not just beautiful in a Victorian old school sort of way, but when the element is morphed into an uber-modern and stylish element.

Example:

• Rounded Corners

The rounded corner. A mainstay in web design since the beginning of the Internet. Typically, rounded corners work well on sites that communicate technological design , but now, rounded corners can be used to communicate a variety of themes.

Rounded corners serve a secondary purpose as well. They break up the box-like nature of web design. With rounded corners. 

Rounded corners should server as a communicative device first, and a decorative device second. Consider The Church at Bethany site. The rounded corners here serve a dual purpose, initially breaking up the box-like layout, but more importantly, giving the church an appeal to an audience accustomed to the rounded look, thereby inviting them in.  

Example:

Scottsaw.com's use of rounded corners initially appears to be an arbitrary decision. Look closer at the art. It's full of organic shapes, would another framing device have been more appropriate? Doubtful.

• Web Typography

Typography can be a beautiful thing, and sometimes it can be the most elegant part of a design. The sites featured below followed this model and choose to use the type as the primary focus. This reduces the need to rely on strong photography or illustration and forced them to resort to basic elements such as hierarchy, balance, and composition. The end results are elegant and very readable.

Useful links:

- Elements of Typographic Style Applied to the Web
- Five simple steps to better typography 
- Text sizing (tons of screenshots showing variations by browser and platform)
- Type Tester (great tool for deciding on typefaces)
- sIFR
- The Elements of Typographic Style Applied to the Web 
- CSS Based Image Replacement (Replace text with an image of text)

http://subversive.dk/?p=a53 - this website shows some typography guideline.

http://www.fastcodesign.com/1664719/infographic-of-the-day-why-should-you-care-about-typography - this website which did the same.

http://www.ill-studio.com/works/art-direction/103-gq-magazine.htm - this website showcases some appealing typefaces and arrangements.

Design Melt Down: Study the Site Structures

• 3 Little Buckets

It seems there is an endless supply of things that come in threes. The number holds some magic that just plain works. On the web designers often find manifestations of threes on home pages. Three steps to do something, three key selling points, three main products, three main options. Users love threes. McNeil believe it is because it is an easy to consume amount of information. Three options isn't so bad. Put 10 options on the page (of equal weight) and users become lost. 

Many of them are action items, and quiet frequently they contain a button to inspire the user to do something. Consider the fact that these sets of buckets present themselves as a single visual entity. The user then scans through it. The point is that it is a massive visual draw and is the perfect spot to put a call to action. What does the designer wants his or her users to do? Sign up for an eval? Request more information? Register with the site? What ever it is this is a perfect spot to encourage it.

Why it is so appealing. For one it creates a perfect balance. One item split in the middle and one on each side. Four is balanced as well, but not quiet as perfectly. The other big plus is that three items is not too much to consume. One can easily scan it, four is a stretch and any more becomes cumbersome. Three is indeed the magical number. One other nice feature is that they act as a single unit and carry a lot of visual weight; through in some design elements that reinforce this and designer has the perfect spot to put calls to action. 

Examples:

http://business-paper.dk/ - this website design has clearly demonstrated the '3 little buckets' concept.

http://www.attitudedesign.co.uk/ - this website is another good example that demonstrated the '3 little buckets' concept.

• One Page Sites

The one page web site is in someway's the epitome of efficient communications. It lumps all of the content in one nice list. This clearly will not work for everyone, but for many situations it is a great idea. Portfolio sites are a perfect example of this. 

On a portfolio site the real goal is to grab the attention of someone who is potentially going to be paying the designer to do work. It seems there are two key elements to make this happen:

One, present the portfolio in the nicest way possible. This is especially important for those in the business of making things that look good. Designer clearly has to do his or her best to make it stand out visually while showing his or her work in the best possible light. 

Secondly, enable viewer to see the work as easily as possible. McNeil thinks the one page portfolio does this in the best way possible. A nice long flow of the stuff designer has done. It isn't as easy to overlook any of the great pieces since viewer doesn't have to visit 20 pages to really see everything. Not to mention the fact that a large page of stuff looks impressive.

In non portfolio situations the single page site can still make sense. Depending on the needs it is just a matter of not over complicating things that don't need to be. 

It is so fun to see what designers have done with a single page. There is no need for hundreds of complex pages to manage. A single page will do. In fact, ease of use is by far the best aspect of this style of site. 

Example:

http://www.cubancouncil.com/fieldguides - this is a good example of a 'one page website'.

• Tabs

Tabs are fundamental to web design, and most large sites incorporate them. Even if they don't look exactly like tabs, they have the same function. The pattern of making them looks like tabs obviously stems from the idea of a file cabinet organized by folders. Considering this it is obvious to see why many designers have chosen to use tabs in their design. It simply helps users understand that they are getting into an area of data, not necessarily a specific page yet, but a pool of data they want to be in. 

a) Traditional Tabs

Generally as McNeil explained, traditional tabs means tabs with the typical rounded top corners which also in some ways feel like a more literal or physical tab.

http://www.kits4rbaby.com.br/ - this website has a 'traditional tab' at the top left of the page.

b) Stylized Tabs

These tabs are extremely gorgeous and help create a polished look, this attention to detail has really pushed these sites.

Sarajoypond.com is a terrific example. The tabs maintain the concept of major navigational sections, and carry the visual weight needed to establish a primary navigation element. This combined with some elegant stylization unifies the design of the site.

Design Melt Down: Study the Principles of Design

According to Lisa 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.

• 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 one tries to emphasize everything, one effectively emphasize nothing.

Sample 1 - Zedmo

The Zedmo site is a nice example of emphasis. Patrick McNeil has placed numbers over the elements of the page to order them in terms of the hierarchy and emphasis he perceives 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.

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, one can find some supporting copy and secondary tasks for the site at the lower section of the page. The designers of this site clearly understood the goals and purpose of the home page and designed it appropriately.

Sample 2 - Oaktree Creative

The 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. McNeil's 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

The 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 one can easily get caught back on number 1. This really helps to beat that message into the viewers mind.

Conclusion

Designers should map out what is most relevant and use it as a checklist before they declare a design complete.

• Contrast

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.

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.

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.

One of the first things McNeil notices 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 all designer use, whether they think about it or not. The trick is to remember to put some thought into the contrast of the page. Contrast is one of the most powerful tools in the quest for effective hierarchy.

• Balance

The principle of balance revolves around the idea of how the elements in a design are distributed and how they relate to the overall distribution of visual weight. Balance is all about how elements are distributed on the page and the way this affects the stability of the page. As elements are grouped together in a design they create visual weight, typically this weight must be balanced out by an equal and opposite weight in order to achieve a desired balance in the design. Not doing so results in a design which feels unstable. The idea is that a balanced designed is more appealing and creates a subtle notion of stability. Well balanced designs are often very comfortable and appealing.

Symmetrical Balance

The first method for accomplishing balance is through symmetrical design. This is when the design of a page is mirrored on some axis and the two halves have identical visual weights. Typically in web design this is when the left and right sides are split vertically and each side has an equal weight. 

Sample 1 - Mobile Web Design

The Mobile Web Design site by Cameron Moll is a perfect example of this. It is fairly obvious that the split is split on a vertical axis and is reflected in equal weight on each side. The site has a very nice balance to it that feels incredibly stable.

The real beauty of this site is that the balance doesn't just feel nice, it is actually really functional. The purpose of the site is to promote an ebook about mobile web development. As such the central image of a mobile device helps to clearly establish the purpose of the site. This image is the central focus of the design. When combined with the high contrast page title the image instantly lets the visitor know what the purpose of the site is. There is no fuzz on it. From there the hierarchy turns to the two side bars which contain all the juicy details the reader will no doubt want.

Sample 2 - Rebuilt World

The Rebuilt World site clearly has a symmetrical balance to it. The simple grid of images is centered on the page as are the other elements in the design. While this layout is not extraordinary, it is extremely clean and comfortable. In this case the central focus combined with high contrast helps the main logo and title to really pop out. It is important to remember that with symmetrical design the center points become the focus of the design and ultimately have the most weight to them. This makes the space prime real estate for a high location in the hierarchy of the design.

Sample 3 - HBC Web

While the Bill Share site has a side to side balance to it, it also has a vertically oriented version of symmetrical design. If one were to split the page along the axis the left and right arrows are on one would find that the top and bottom halves reflect on this axis. The horizontal band across the top containing the logo and tabs is reflected in the band along the bottom containing three large images.

While this sort of balance is not necessarily overly obvious, it does serve one key role in that it effectively frames the content with a top and bottom. By doing so the visitor is encouraged to bounce up and down in the site and focus on the content. Instead of having an overly heavy header or footer, they are just enough to frame the content. Thus the focus is subtly placed on the contents of the site. A very nice balance indeed.

Symmetrical balance is actually relatively common in web design. Especially in home page design. Dozens of examples can easily be found of this type.
Asymmetrical Balance

Asymmetrical balance is achieved when the visual weight of a page is equally distributed on some axes but the individual elements of these halves are not mirror images. That is a really complex way of saying that asymmetrical balance is a result of the use of dissimilar elements to create an overall balance. 

Sample 1 - Green Renaissance

The Green Renaissance site is a fine example of asymmetrical balance. In this case the very heavy green column on the left is balanced out by the combination of the header and two columns on the right. In this way the entire right side of the page is viewed as a single element. What this does is allow the left bar to easily be the most prominent element and occupy the focus of the page. Users eyes are easily drawn to visually heavy elements which contain less content. The weight of this side bar has been balanced out through the unification of the remaining elements so as to create a visually appealing design that is nice and stable.

Without such a balance the weight created on the left side would feel awkward and unstable. Resulting in a less appealing design. The lack of appeal would be subtle and hard to identify, but the subtle nature of design is not to be underestimated.

So in this sample, asymmetrical balance has been used to not only create a comfortable design, but also to establish hierarchy in a page and control the user experience.

Sample 2 - Further

The Further organization which specializes in online marketing has a web site which demonstrates the idea behind asymmetrical balance very effectively. In this case the axis of symmetry is dead center and runs vertically as most samples of balance do. In this case the left side contains more images which stand alone with a lot of visual weight. Each of these is balanced out as a group by an equally heavy set of content. In this way the right side is richer in terms of depth creating a weight as a whole. While the left sides beefy visuals create an equal weight.

The neat thing about this sample is how the left side is simpler in terms of ease of consumption and thereby creating a hierarchy in the page. And yet the visual balance of the page is maintained. So again balance was used to establish both a unified design and a hierarchy within the page.

Conclusion

Balance is one of the elements of design which tends to come naturally. And yet at times, it can still be overlooked. McNeil find that one way to tell if a design is balanced is to step back and squint at the design. If it feels like it is falling to one side it is probably unbalanced. Another strange thing is that designer tend to attach a lot of designs at the top of the page and let everything hang down; McNeil refers to this as a curtain style site. In contrast many sites (and some of the above) consider the entire vertical balance of the site. This is most defiantly more difficult to do, but is still an important thing to consider. This is perhaps most true on home pages where one can more easily control it.

McNeil find this hanging from the top approach interesting considering how unstable it really should feel. In painting a lot of thought often goes into creating triangles with a flat base along the bottom (aka Leonardo da Vinci). These triangles provided a stability to the works. Somehow in web design designers have inverted this and it feels ok.

• Alignment

Alignment is quite simply the arrangement of elements in such a way so that the natural lines (borders) created by them match up as closely as possible. By doing so these elements become unified and form a greater whole. Without being aligned these elements tend to fall apart and lack the unification designers so often seek out. A perfect example of this is having the tops of two columns line up, or the left edges of a series of stacked elements align with each other. When examined carefully, well aligned pages can present rather complex interactions among the elements of the page.

The primary reason to focus on alignment is for unification. Often times a page which somehow doesn't feel very sharp simply lacks alignment. Sometimes McNeil gets so focused on each section of a page, the header, content and footer, that he forgets to look at how they interact in terms of alignment.

Those charged with the task of taking designs and turning them into code should be particularly aware of this principle. As a design is translated into reality it often becomes more tedious and difficult to replicate the alignments established in the original design. Not only is it tedious, but it is often easy to not even notice and perhaps forget about. As developers an awareness of design on this level can really help in the translation process.

Sample 1 - Progressive Design In Motion

The Progressive Design In Motion site is a fine example of alignment. This site is a perfect example of how an underlying grid can help create a unified approach. Imagine if this content heavy site didn't make liberal use of alignment. The result would be a chaotic hard to read page. The grid of the page not only serves to unify it visually, but to also increase the ease with which the page is consumed.

Another interesting point about this site is how the designer broke the grid. Take the logo for example. It would have been really tempting to find a way to make it fit into a single column. But would that have improved the design? Not really. Also, look how the main nav items overflow from one column, but don't fill the second. Again, forcing this to live in a single cell of the grid would have probably just made it harder to use. So in this way the site not only demonstrates the power of a grid system, but also the appropriateness of breaking it.

Sample 2 - Poccuo

The Poccuo site is yet another demonstration of the usefulness of basing a site design on a grid for alignment purposes. In this case the grid has been followed to an extreme. And yet, it doesn't feel forced. Perhaps that is the differentiator. Don't force the grid when it needs to be broken, but follow it when it should. How is that for ambiguous advice.

What McNeil really love about this sample is how the content fits into the grid. At the top of the page the content is large and occupies the full width. As the page goes down the content grows in density and the subdivisions of the grid become smaller. Consider the principle of emphasis in this case. The order of hierarchy in the page follows the page from top to bottom. This couldn't possibly play into the natural order of things any better.

Honestly the beauty of this site speaks for itself. And the power of the grid could not be more obvious.

Sample 3 - Rob Goodlatte

In this less extreme sample, the Rob Goodlatte site demonstrates the principle of alignment in a more typical situation. The home page of this site is designed such that the side bar ends at the same place as the main content column. This simple feat means that these two chunks form a whole. The grid is even extended to the footer, there by unifying it with the design. The end result is a design which doesn't feel pieced together, but rather built to be one solid unified chunk of content.

• Repetition

This principle the focus is on how elements of a design are used more then once throughout a design in varying ways. By doing so designs that contain such repetition become far more unified. This repetition can come in many forms, things such as: color, shape, line, fonts, imagery, theme, or just an overall approach to style. Repetition is an inevitable design principle. If no elements in a design are repeated it typically lacks a unified and cohesive feel.

Sample 1 - Lets Fax

This sample makes use of repetition in pretty obvious ways. And yet, it is still worth talking about. Overall the design of this page is rather simple, and pretty straight forward. No over the top design going on here. But there is a richness to the design, an overall aesthetic that feels soft and cozy, a design which feels unified and clean. In this case repetition has single handedly unified and elevated the design of this site. Rounded corners in this case have been used over and over to bond the page together.

The main frame for the content had rounded corners. As do the main buttons, sub containers and numerical highlights. Even the logo and font choice is all based on soft rounded corners. Clearly the designer consciously chose to unify the page through the repetition of such an element.

The service this site offers is simple and straight forward, as is the design of the site. No cheesy stock photos. No goofy fax machine cliches. Just a simple straight forward design which is nice and cleanly designed.

If instead of rounded corners the designer had chosen the typical pointed ones, the design would feel more typical or default and would simply not feel nearly as sharp.

Sample 2 - Ed Did It

This site is of course another demonstration of how to effectively use repetition. In this case the use of it is not necessarily what makes the page such a grand success, but it certainly is an element of the design which makes it successful. It is obvious of course, but the curly brackets on the side elements echo the same treatment in the logo. This simple, semi graphic element, unifies the bare bones page in such a way so as to give it a much more designer feel. Without these simple little brackets, the design would feel very bland. It is truly amazing how such a small element can be make the difference between success and failure.

Sample 3 - Bandpush

The Bandpush 07 site is an interesting example. In this case the usage of repetition is somewhat hidden, or at least it is a less dominant element of the page. Sure the bold yellow headings repeat each other and from a glance visually unify the page. But what really pulls the page together is its rich use of texture and distressed design. The wooden background fits well with the worn and tattered paper. Every element of the page has been worn and battered to visually unify them.

Sample 4 - iMarc

Another less obvious approach can be found on iMarc . Here repetition has been used in terms of layout. Well sure color has been repeated, but a 3 bucket layout has also been repeated. In the header we find 3 main elements. Then we find two bands of 3 elements. It is these repeating chunks which manage to give the page an overall unified feel.

• Flow

Flow is simply the path a users eyes take through a design. This is primarily a result of how elements like emphasis and contrast are used. In fact, flow is entirely the result of how other elements are put together.

One thing to always remember when considering flow is the natural order of things. There have been studies to determine where eyeballs go (eye tracking study) and it is pretty clear that people tend to work in a rather predictable fashion. Typically things go from left to right and top to bottom; with some variation in there of course. This is why a web site that is right justified feels so funky to us left to right readers. Nothing wrong with doing so of course, designers simply must understand the implications of such decisions.

So selecting sites based on flow is a really tough challenge. Every site has flow, good or bad. So ultimately designers have to determine what defines good flow? McNeil have settled in on this: Flow that feel stable, comfortable and as natural as possible. It can be complex, but it must feel natural and comfortable so that one doesn't feel like he/she is bouncing around the page like a pinball. Now of course the eyes naturally do bounce around, but a site with what McNeil considers good flow will encourage him to take a nice stable path.

Sample 1 - Rikcat Industries

McNeil has superimposed over this first sample site what he believes to be the visual flow of the site. Certainly this is a matter of opinion, but McNeil believes that he has fairly accurately assessed it. This site is super clean and has a pretty much minimal approach to it. As such it is pleasing to see that the flow of the site has been setup so as to resonate with this style of design. The focus starts just where we expect, the top left, and flows down from there, making its way to the right column, and finally the footer of the page. This natural progression follows a patter found all over the web and merges our expectations with our natural tendencies. Nice and easy on the eyes making the site rather easy to consume.

Sample 2 -

The Mark Boulton site presents a bit more complex solution to a similar situation, and yet it retains an easy to use model. The extreme emphasis placed on the main tag line forces the user to start their visual exploration there. The natural tendency is to flow down from there and the next most emphasized text is directly below the tag line. This flows to the right side and finally to the bottom where the sheer quantity of content draws the viewer downward.

This sites flow is not quite the "standard" approach, but it is still very effective. Clearly the focus is on making sure you get the main theme of "beautiful, simple design." In fact, the overall feel of the design reflects the mantra, even more supported by a nice and comfortable flow.

Sample 3 - Kineda

The Kineda site presents a slightly more complex flow then the first two. First the bold red open sign grabs the users attention. Intentional or not, this is the boldest element on the page, and it is prominently placed at the top. So it simply grabs one's attention. From there the mass of images and copy in the top block draws one's attention as one filters through the mass of 8 topics. This section is easy to get lost in. This is not a bad thing, it is actually a bit of feat to have a block of 8 articles like that and to actually capture one's attention in such a way that one can't help but look through them. McNeil find himself not skimming them as much as he typically would. From there the large ad in the lower right quickly draws his attention. Ads are the sort of thing one wants to give enough priority to so as to make them valuable, yet not so high a priority that the content takes second stage. Then again, McNeil guesses it depends on the style of site one is running. Finally the users eyes scan the bottom section and swoop back up to the headline.

Sample 4 - Golden Apple

This final example has a much richer complex looking design then the first two examples, and yet it retains a very simple and clear flow. This is again mostly related to a through analysis of emphasis and an effort to carry out such goals. The reason McNeil finds this sample encouraging is that it is more typical of how sites tend to look. Not in a particular style so much, but just that there are lots of container stuff, tabs, links, lists etc. And yet, it is so simple to scan and consume and the eyes find a pleasant path through the content.

Conclusion

Certainly this is one of the more subjective topics, and only actually testing would show where users eyes go in these designs. Designers should keep in mind the natural tendencies of viewers and how they might consume the designs they create.