Less is More: Clean WebsitesGuest_Blogger | Aug 01, 2011
What does effective website design look like to you? If you survey the web landscape today, you'll likely notice that companies are shying away from cluttered layouts full of links in favor of simple and clean. Freelance web designer and writer Scott Stanton shares his perspective on this trend of minimalist web design and the particular elements that make it pleasing to the eye.
We’ve all heard the saying, “Less is more.” And I’m sure we’ve all been told to clean up after ourselves, perhaps some of us more often than others. So it’s no surprise that the minimalist web design trend is always a safe bet when you’re looking for a design that will withstand an industry where trends seem to change more often than the coffee filter in the break room. So how do you make a white background pop?
There are a few reoccurring design aspects that are popular in minimalist sites: gradients, shadows, rounded corners, and clean lines. A lot of times you’ll see a combination of these elements in the main navigation bar of the site. The gradient helps give the site some depth and sets modern websites apart from the ones of yesteryear. It’s rare that I come across a site with a white, or solid color background, and a navigation bar that’s also a solid color. Not only would it make me shudder from flashbacks to a time of bowl haircuts and grunge music, but it gives the website a flat appearance. Nothing has any depth and the eye has a hard time determining which color is supposed to be on top of the other.
One site that some of us might be familiar with that incorporates gradients in to their design is, well, this one. If you’re signed in to Elance, notice the use of a linear gradient in the main navigation bar at the top, starting dark at the top and fading to a lighter gray at the bottom. This adds another dimension that feels as though it’s protruding towards us. Now try and picture how different this page would look if that was one solid color, the page would seem flat and much further away from us.
If you’re not signed in, take a quick look at how Elance uses a light blue, linear gradient along the top to help soften that edge and make the page feel as though it’s tucking back away from the viewer. Or just notice how each blog has a light gray linear gradient at the top, fading to white, thus helping lift it up off the blank white background of the page and stand out more.
Depth can also be achieved by applying drop shadows to elements. Drop shadows help the eye easily distinguish which element is on top of another. This detail helps the eye relax and gives the website a nice, polished, professional look. Apple is a great example of this. Not only does their website ooze simplicity, but they are a company who has completely rebuilt their brand on keeping everything clean and simple. Not only does every content box have a shadow, but they’ve also incorporated gradients, rounded corners, and clean lines. A minimal grand slam!
Rounded corners help soften the feel of the site and allow for your eyes to make a smooth transition from one element to the next. It also achieves a more open feel, opposed to square, 90 degree corners that can give a site a cold and boxed in feeling. LinkedIn is a good example of this. Imagine what your eye would be doing if the main navigation and “Join LinkedIn Today” boxes had square edges. It would cause me to think the site was originally designed out of Legos. See any other aspects we’ve talked about?
Clean lines help keep everything neat, orderly and aesthetically pleasing. They help the eye flow smoothly and uninterrupted over, across and down a site. This means that everything needs to be aligned to pixel-perfection. The eye likes to follow a straight, smooth line. Scoot back and pan your eyes along the top of your desk. Cringe? Probably because your eye had to make its way over coffee mugs from last week, dirty plates, and half read newspapers, just to name the things sitting on top of the bills you “still need to go through.” Now compare that to the day you bought the desk and there was nothing on top of it, just a clean, smooth, continuous plane, uninterrupted. Galluzzo Communications is one of the best minimalist sites I’ve come across with clean lines. Notice how the top border line for the sub navigation aligns itself perfectly with the middle of the “Galluzzo” in the logo as well as the mid-point of the brand being displayed below. It’s almost as if they thought that one out! Again, note the use of rounded corners and drop shadows.
This doesn’t necessarily mean that all horizontal rule, straight line, or element boxes have to span from the absolute left to the absolute right. That would be terrible; viewers would have to work their necks to look from the left to right side of your page. And who wants to work when they’re sitting in front of a computer?
In the not-so-rare instances that you need to break that solid line in order to have multiple design elements side by side, make sure they’re aligned on the same y-axis. Dustin Heerken’s site is an interesting blend of a good and bad example of this. His header is pixel-perfect, images are evenly spaced, and the top of his name aligns perfectly with the top of the images, while the bottom line aligns perfectly with the bottoms of the images. But in the right column with Insight, Categories and Updates everything appears to be shifted up slightly more than the tops and bottoms of the images to the left.
Clean lines can be tricky. Things may only be off by a pixel or two, but your eye picks that out and draws to it. These imperfections can give the wrong impression, and trust me when I say there’s nothing worse than a client who thinks you developed his site at the bar during happy hour. Not that I’ve ever done that, of course.
About the Author
Scott Stanton has spent the past decade working nights as a freelance web designer, only to write about the latest design trends at his day job as a freelance writer.