davemcnally.net

Now, whilst the title is quite contradictory, it actually makes sense. I’m talking about simplicity in your designs. Specifically website designs.

One of the many trends to that have branched out from our 2.0 era have been designs that are visually simple, clean and tidy but also functional. Looking at one of these at first glance could very well lead you to believe that they are indeed very basic and would be easy to recreate. I’m afraid this isn’t the case, a lot of work has gone into the visual aspects of a lot of these layouts and what looks simple to begin with really isn’t that simple at all.

So where does this term of simplicity come from if the designs themselves are not all that simple? It’s all about the user experience and their first impressions upon landing on your homepage. Simplicity within a design doesn’t have to mean the user suffers; it’s usually quite the opposite. It has become fairly popular to design websites that are pleasing to look at whilst maintaining a minimal design approach. Sometimes, the visitor is not even sure why it looks appealing, all they know is – they like it, and this is what we’re aiming for. An excellent example of simplicity within a design would be Khoi Vinh’s Subtraction. There are several factors that make up the simplicity of this design and many others out there. Let’s take a look at some of them.

Layout

The actual layout itself plays a very important role with keeping your design simple and pleasing to the eye. Khoi’s design is based upon a grid which instantly keeps everything in check and having everything line up throughout the design not only helps with consistency but is also a key feature of simplicity. Your average visitor may not even know what a grid based design is, and they may not care either. All they care about is their experience whilst at your site and looking at a grid layout like this will greatly impact their impressions.

They may think it is extremely simple to recreate as it is visually basic to look at but creating a successful grid isn’t that easy to do and maintaining your content around this can prove tricky too. Grids are too big a topic to cover within this entry, I may cover them in depth in the future but for now, I would recommend Mark Boulton’s Five Simple Steps to Designing Grid Systems.
You don’t need to master grids to keep a simplistic layout but keeping some of the basic principles in place will really help you down the line.

Typography

A huge topic to cover and way too much to go into here but ever popular it is and we’ll touch on how it can help your simplistic layout here. Referring back to Khoi’s design, typography places a key role in the success of his simple approach to design. From choosing the right typefaces throughout the design right down to specifying line widths will greatly alter the overall appearance of your site.

Using effective typography alone can make a great design as is the case with Subtraction. Khoi has done an excellent job with his typography and I highly suggest you check it out when planning your next design.

Smallest details make the biggest difference when it comes to typography and making use of what is available to you through CSS will ensure your visitors have the best possible experience whilst reading at your site. There are several properties that can be used in unison to create a simple looking design that ‘just works’ as far as your visitors are concerned. Things like the line-height property can help keep consistency throughout your site whilst font weights and styles can be used to effectively create a difference between the elements on the page.

Design Elements

You don’t need to completely strip your design of images for it to be considered simple. Effective use of background images and subtle shadows etc can make a big difference on simple designs. You may have a solid block of colour behind an element on your page which alone is in line with simplicity but may not be all that appealing to look at, unless it’s done right. Contrast and saturation can go a long way on their own without resorting to images. I won’t go into colour here as again, it’s a pretty huge topic to cover here but playing around with different values of one colour can really help visually while maintaining that simple look.

It’s those single pixels when it comes to background elements that make the difference and being subtle, they still keep your design looking simple and merely compliment it. Visitors may not even notice it’s there, and that’s what you want. If something fits where it is and works, it should go unnoticed. It’s only when something is noticed and sticks out that you’re going wrong somewhere. This is a big chunk of simple design and your visitors won’t know the level of detail you have go into but they will remember how visually simple yet appealing your design was.

Wrapping Up

So your designs may look simple to your visitors but they will also look visually appealing through the consistency of attention to detail. Spend the time beforehand planning your elements on the page looking at spacing – padding and margins can be used to great effect if kept consistent which relays back to the points on grid based layouts.

Cluttered designs don’t just fall out of this simplistic tag; they also sometimes damage the user experience by distracting them. It all depends on the context of the site and its purpose but keeping things looking simple to the user will pay off in the long run. Even if it’s not too simple to create, it will be nice look at and will be worth the effort.