Tag Archives: web design principles

8 Essential Principles of Web (and Every Other Kind of) Design

Monday we brought you a summary of flat design and presented many pros and a few cons of this approach to web design. We also talked briefly about skeuomorphic design, which uses more 3D elements to convey a more realistic sense of depth on a 2D screen.

These are only two of many, many styles in web design. To better understand any design, whether it be for web, print, or just art for art’s sake, we have to go back to the fundamentals.

Hierarchy
Your various pieces of content have different purposes and levels of importance, and your designs should reflect that. But it’s more complicated that just listing your most recent posts at the top since you’ll also have modules like search fields, logos, and call to actions to work in.

So how do you establish heirarchy? By using any of the below elements to help you make the most critical parts of your web design pop!

Direction
When viewing a website, most people in the Western hemisphere tend to naturally move their eyes from left to right and top to bottom – just like we read. You can either use this tendency to your advantage by arranging your content from left to right and top to bottom, or you can buck the trend and lead the eye in a different pattern by using strong elements that divert the natural pattern.

Below, you can see that Sony is using a typical web layout to emphasize important elements along the natural path of the eye.

sony

37 Signals, on the other hand, starts your eye in the center, then down and across, then back up to less crucial elements in a layout that still works because it effectively leads your eye through the design.

37-signals

Color
There’s a million different ways you can use color on your website, but the basic principle is to use the most saturated, brightest colors to draw the eye to your most important elements. Beyond that, you want to find colors that complement each other and don’t overwhelm the eye, which can be done with color tools like Kuler.

Contrast
Hand-in-hand with color is contrast, which is basically the difference in brightness, saturation, and hue of adjacent elements. For text, you want a high-contrast between the text color and background – like black text on a white background. Less important elements might be lower contrast, like a light green search field on a darker green background – still visible, but it won’t draw too much attention.

Spacing
Spacing can make a design beautiful or illegible. White space (whether it’s literally white or not) is the empty space around an element, and in general, the more white space around a particular item, the more important it seems. When trying to pack a lot of information on one page or above the fold, white space is often sacrificed, leaving the design looking cluttered and visually confusing. Consider your spacing carefully!

Similarity
This is usually an easy one for web designers who’ve taken the time to make even a rudimentary branding plan. Some elements of similarity will be universal across the site – like rounded corners or drop shadows, while other similarities, like a specific color or shape used in just a few places, can denote that these places contain similar content or functionality.

Dominance
Usually relating to size, dominance is another way to establish your hierarchy. Larger elements are obviously the most prominent, but the most colorful or bold (as in text) will also draw attention.

Texture
A textured background can add depth and character to your site, while a textured element like a button can be visually appealing in comparison to a flat background. Use textures sparingly, though, as too much texture can be overwhelming.

Honestly, web hierarchy could have another post all it’s own… so I guess we’ll go get to work on that!