Home > Design > Web Design Zen: The Power of Simplicity

You might be surprised at how much time and work goes into making a web design simple.  Rather than looking for ways to fit more stuff in, simple websites strip away the excess to deliver direct, concise messages in a limited screen-space.   What you may not realize is that taking the “less is more” approach to web design has some added benefits.  Beyond delivering faster-loading, easier-to-maintain websites, simpler sites also have a dramatic effect on increasing conversion rates.

Every site, no matter what it sells or promotes, has to get its message across in microseconds – otherwise the visit and potential conversion (to subscriber, reader or customer) is lost.  Below, you’ll find examples of how to do simplicity right, as well as what steps to take to clear out the clutter on your own pages.

Firetask – Empowering Task Management with a Clean, Simple Design

Firetask presents an uncluttered, easy-to-navigate website that supports its goal to
help users get more done, more efficiently.

Firetask is a task management app whose easy-to-browse website fits several key points nicely into one screen-width.  Not only can you see an illustration of the app at work, but the main features are neatly presented with easily-scannable “chunks” of text.  The call-to-action form clearly lets you decide if you want to buy or try.

What You Can Learn from This Layout:

• Break up large areas of text into visually-digestible pieces so that one idea is expressed per “block” of text.   Offset text with icons to draw the eye downward and into the “meat” of your offer.
• Slideshow scripts (like Slidedeck) let you combine several messages into one set space. A great idea if you have several features but limited room to show them all.
• Test adding your call-to-action buttons above the fold for maximum impact.  It’s generally regarded as a best practice to increase conversions, but only accurate split testing will tell you if it works for you.

iMyGarden – Plan Before You Plant

iMyGarden combines easy-to-follow steps, features and visual proof in one place

iMyGarden is an app that lets you plan and design a garden before you plant a single seed.  This powerful little program walks readers through each step by having the main app image change when any of the steps are hovered over with the mouse.

In addition, from this one screen-space alone, you can see the beginnings of user-created garden galleries, and a list of features offset by icons.  The large call-to-action button and simple layout makes it easy to tell, at-a-glance, what this app is about.

What You Can Learn from This Layout:

• A “disjointed” rollover (when you move the mouse over one area, and something else on the page changes) can be an easy way to elaborate on your product or service without forcing the user to scroll needlessly.
• Offering a teaser section slightly above the fold which showcases user-designed creations and features will encourage visitors to learn more and browse what others have created.  This kind of social proof lends itself well to increasing downloads (“hey, if they can create something that nice, so could I!”)
• A large, prominent call-to-action button is easy to notice because of its size, and because its color offsets the brown and green throughout the rest of the site. (The FREE Star helps too!)

Vera Wellness – Simplicity in Service-based Businesses

Vera combines a lot of information into an easy-to-scan space while giving each item plenty of breathing room.

Here’s an example of a service-based business using simplicity in its design.  Staying true to their color scheme throughout the layout, this design includes not just the aforementioned photo slideshow, but also coupons, a members’ area, and distinct sections for each service.  Even further within the site, each piece of navigation or call-to-action button is clearly defined and events are easy to browse.

What You Can Learn from This Layout

• Consistent navigation from your main page as well as your inner pages is crucial to ensuring that your site is user-friendly. Keep a similar layout, color scheme and order for all your navigation bar items.
• Consider separating each offer into not just its own distinct area, but with its own color scheme as well. This way, visitors can tell, at-a-glance, which part of the site they’re in by using visual clues alone.
• Include your most popular items (coupons, logins, new offers) near the top of the page to command attention.

These are just a few simple changes you can make to your pages to help boost conversions and keep visitors on your site longer.  Remember, simplicity doesn’t have to mean that your site looks like a poorly formatted Word document. It also doesn’t mean that you have to sacrifice tried-and-true approaches for something a bit more unusual just for the sake of being creative.  Think of ways that you can trim the excess from your pages, and you’ll be well on your way to web design zen.

Image Credits: Firetask.com, iMyGarden.com, VeraWellness