How Clean is Your Web Design?

Clean. A term often used to describe a website design, but what does it mean? How do you define it? I’m fairly sure that it doesn’t mean that the whitespace is whiter than white or that all of the dust has been brushed under the footer…Let’s take a closer look.

Introduction

Designers everywhere gush with admiration upon seeing a web design and exclaim “its beautiful, it’s so clean!”. There are a countless number of webdesign round-ups dedicated to ‘clean’ design and it is a term thrown around quite a bit in the web design community. It can be easy to spot a good example of clean design, as it promotes a certain feeling of professionalism and quality. However, what is not often discussed are the underlying principles and factors that combine to create this ‘clean’ look and that is precisely what this article intends to do.

Photo credit:Jaymie Koroluk

Before we get started, let’s be clear on one thing – clean design is not minimal design.

Some people may confuse the two and it can be easy to do so. While there are some similarities and overlaps of design principles between the two, I believe that there are key differences.

Minimalistic design tends to focus on stripping back superfluous and unessential elements to allow the content and core message of the site to take centre stage. Every element should have a justifiable purpose. Minimalistic design by nature should be highly usable and functional, as there should be no distraction to compete with the information the site is trying to communicate.

Zenhabits is an excellent example of minimalist design

Instead of asking what can be removed, you should be asking how it can be refined.

Yes, clean design should be usable, and yes, the purpose of the site should be plainly obvious. There is however, an allowance for purely aesthetic elements and creative flair when designing a ‘clean’ site. Instead of asking what can be removed (in the case of minimalistic design), you should be asking how it can be refined.

If there was one word I would use to define ‘clean’ design, it is refinement. Every individual element should look like it belongs and should benefit and complement the design as a whole. The overall design needs to be balanced to allow the information to flow and be easy to consume.

Before making it to the final design, every element needs to be scrutinized. The designer should take a moment to consider the purpose of each element and decide whether it is the best it can possibly be and if it can be made any clearer.

O.K, so now that we have a general understanding of ‘clean’ design, let’s take a look at the various contributing factors to this style.

Pixel Perfect Details

An attention to detail is essential in producing a clean website design. Truly great, clean design relies on pixel-perfect execution of many subtle design elements. Seemingly minor details such as borders, highlights, shadows, textures and many others all need to be carefully considered.

As an example, let’s take a closer look at the main feature section of the Studeo WordPress theme, designed by Orman Clark. Orman is widely known for (and extremely successful at) producing clean, user-friendly WordPress themes.

Where some theme designs may simply implement a large, bold image slider, Studeo’s feature area is a haven for delicate design details. Notice the subtle texture overlaid onto the image, the one pixel highlight and the almost imperceivable light gray border at the bottom. All of these details can seem insignificant and may even go unnoticed by some, but collectively they create the feeling of quality and refinement.

Precision is key when choosing to design in such a way. One thing that can destroy a clean site design is the dreaded half-pixel. Half-pixels can occur in Photoshop when the lines and edges of shapes do not line-up exactly on the pixel. When this happens, the edges of a shape become blurred. You can see in the image below, the squares on the right look ever so slightly blurred.

One way you can prevent this when designing in Photoshop is to select the ‘Snap to Pixels’ option. Whenever this option is selected, all of your shape edges will be beautifully crisp and clean.

Spacing

It goes without saying that a clean design cannot appear cluttered in any way. Lots of elements cramped together however will give the appearance of a messy and cluttered website. Not what we want. This is where spacing comes in.

Whitespace, margins, padding and line-height all have a crucial role to play in pulling off a clean website design. Providing elements of a website an appropriate amount of spacing ensures that they appear to belong and fit into the overall design. An adequate amount of spacing also generates an airy and elegant feeling to a website.

960.gs

As well as ensuring that your elements are well spaced, it is also necessary that you are consistent with the values you decide upon. Try to repeat margin and padding values when you can and where it is sensible to do so. Grid systems such as 960.gs are incredibly helpful tools when designing websites in this way (more on this in a moment).

To see the full effect that adequate spacing has on a website design, consider the following two images. The first image is a preview to a blog post with minimal and inconsistent amounts of spacing between elements.

Now here is the same blog post preview with generous amounts of spacing.

The difference it can make is quite substantial. The second design looks much more balanced and clean now that all of the elements have a lot more breathing room and space to stretch out.

As with most things in life however, it is possible to have too much of a good thing. Too much spacing can make elements seem lost and disconnected from one another. As a result, the cohesiveness and flow of a website can be broken.

Alignment

One of the best tools you can use to help you create a ‘clean’ website design is a grid system. We’ve already touched upon how they can be extremely useful in terms of spacing, but they are also invaluable to make sure your alignment is spot on.

Just like spacing, alignment can make a significant difference to the appearance of a website. Correct and continuous alignment allows for clean lines to run throughout the length and width of your site design. Smooth and unbroken lines are visually pleasing and can lead the eye further down the page.

The eye is very sensitive to changes in alignment and it is able to detect minute changes and inconsistencies. It is therefore important that you are not only pixel-perfect in creating your design mock-ups but also that this precision does not get lost in the development stage that follows.

Ideally, large bodies of text should be (in most cases) left aligned. Left aligned text produces a solid line and creates easily distinguishable columns of information. Centrally aligned text on the other hand creates an uneven edge on either side and can be difficult to read in large columns. Save the central alignment for short lines of text.

As an excellent example of alignment, you may want to check out Design Without Frontiers. The designer has not only made exceptional use of alignment, they have made it blindingly obvious of their intentions by simulating Photoshop guide lines running throughout the website.

Typography

With the arrival of @font-face and many type services, typography in web design has never been bigger and considering that the vast majority of information on the web is text, there is little wonder why. We’re not going to delve into the intricacies of typography here, as there are many great resources, but we will look at a couple of ways it can have an important role to play.

Buckenmyer & Co is a beautifully clean site with a focus on Typography

Firstly, using typography is an effective way to establish a very strong visual hierarchy. If you have ever studied the fundamentals of web design, you realize that hierarchy is kind of a big deal. Using typography to establish your hierarchy is a very elegant and clean method for doing so. Simply by changing the size or weight of your text you can guide the user around your site and communicate the importance of various elements. No need for glossy arrows or loud badges to emphasize what you want the user to see.

Secondly, just as certain colors work harmoniously and complement each other, the same is true for fonts. There are many suggestions and guidelines for pairing and working with multiple fonts, but for a clean design, it’s best to keep it simple.

Selecting two typefaces is generally a safe option, as too many different fonts can complicate a design. Opting for a bolder or more decorative typeface for your headings and a safer, more readable type for your body text can rarely go amiss. Combining a serif and a sans-serif font can work well and is commonly practiced.

Color

Adobe’s Kuler

There are many articles and tutorials discussing color theory and how it applies to web design. There are also many useful resources to help you select an appropriate color palette. When it comes to clean design, there are a few basic guidelines.

The vast majority of clean websites opt for a light, neutral and limited color palette for a number of reasons.

Whites, grays and light colors are simple and understated, allowing any content to receive the focus of the user. This is ideal from a usability point of view, and for those who want their work to take center stage such as designers and photographers. Small splashes of color are often used to accentuate certain elements such as logos, navigation and headings to help establish a visual hierarchy.

The portfolio pieces and green accents stand out well on Martin Hipps clean online portfolio.

Bold colors, especially if many are used, can over-complicate a clean design and distract the user’s attention. Color evokes certain emotions and reactions and too many colors can induce multiple and conflicting feelings. The last thing we want is for a user to feel confused when viewing our website.

This is not to say that a clean design cannot be colorful, as always there are exceptions to the rule and there are many examples of clean design that utilize color effectively. There are also general guidelines should you want or need to use color in your clean designs.

Opt for single, solid colors rather than gradients in your design. Solid blocks of color create clear, unbroken lines and help distinguish different sections of a design. Gradients, patterns and textures can be distracting and may reduce the readability of text. If you decide to use gradients and textures, keep it understated and subtle.

Conclusion

Knowing what goes into making a clean design and how to implement this design style can be invaluable to a web designer. A clean design communicates a sense of refinement and sophistication, precisely what many clients and we ourselves want to be associated with. Hopefully you can take something away from this article and apply some of these methods in one of your future projects.

Are there any other features of clean design you have noticed? Or you do know of a particularly good demonstration of clean design? Please let us know in the comments.