Back to Basics Design Part 2

Posted by Roan Lavery on Oct 28

Following on from my last article, I thought I'd explore more the concept of getting back to basics with design, with some practical examples of how you can give it a go. Before we dive in, let me indulge myself with a short Zen story that illustrates my point:

"Whenever anyone asked him about Zen, the great master Gutei would quietly raise one finger into the air.

A boy in the village began to imitate this behavior. Whenever he heard people talking about Gutei’s teachings, he would interrupt the discussion and raise his finger.

Gutei heard about the boy’s mischief. When he saw him in the street, he seized him and cut off his finger. The boy cried and began to run off, but Gutei called out to him.

When the boy turned to look, Gutei raised his finger into the air. At that moment the boy became enlightened."

In the story, the boys mimicry of his masters gesture is the very thing which is stopping him from attaining Zen enlightenment. He uses it as a “crutch” to hide his inadequacies and lack of true wisdom. It’s only when this “crutch” is removed, and the boy can no longer pretend, that he is able to attain enlightenment.

Now I'm not advocating we go about lopping fingers off but this story is relevant to what I'm talking about. Really. It is.

If we’re honest, there are certain “crutches” or “shortcuts” to good design. Go get yourself some high quality stock photography, whip up some trendy floral ornaments, use a bright colour palette, slap reflections and glass effects onto every menu bar or logo and anyone with a half decent eye should be able to produce designs that look pretty.

Stunning photography can make up for a multitude of typographic sins. Eye catching colours and pretty decorations can hide poor content layout and visual hierarchy. I know, I’m guilty of this stuff all the time.

However the more you rely on these "crutches" to support your shortcomings, the less you'll focus on the true fundamentals of design.

Now listen. I'm specifically not saying there's anything wrong with taking the easy road; we've all got jobs to do, often on tight deadlines, but if you really want to grow as a designer, sometimes it's useful to abandon these crutches and get back to the basics of design.

So what are the basics?

If you can design beautiful looking websites then you should be proud. If you can design beautiful looking websites with no pictures, limited colour palette and simple text then not only should you be proud but you'll also know you've mastered the true fundamentals of design.

For examples of designers who I think have got it sussed check out Mark Boulton, Subtraction or Jason Santa Maria. What have all of these designs got in common? A well thought out visual hierarchy, with excellent content structure and effective grids, rounded off with simple colour scheme and beautiful typography. To me that's the basics of good design.

Throw away the crutches

Convinced yet? If you are read on. I've laid out a series of tips for improving your work flow and your understanding of the basics of design.

Preparation is everything

Many designers are tempted to immediately fire up Photoshop when they are beginning a new design. Sometimes even, God forbid, an HTML editor! Don't!

Start the design process with a pen and paper not Photoshop Sketch out design or even aspects of the design. Doodle lots and see what happens. It’s much easier to be creative when you’re not stressing about why your layers have disappeared.

You don't have to be a good drawer for this process to be useful. I’m not. People without a traditional artistic background are sometimes scared of this approach but it is helpful. Sketches don’t have to look pretty, but they will give you ideas about where to position elements of a design.

Create Wireframes of the designs
Take the doodles and layout the most crucial content areas, concentrating on what the user needs to focus on. I like Visio for this but there are other diagrammatic drawing programs available. By doing this you will be concentrating on visual hierarchy and content structure. You’ll be solving fundamental problems without worrying about exactly how big a reflection your logo needs.

Less is more

Use a limited colour palette
Start the design process by translating your wireframes into Photoshop or whatever graphics program you're using. Lay out everything in shades of grey first. You won't be distracted by decisions about colour scheme and you'll be more focused on composition. Mark Boulton and Andy Clarke have both produced excellent article on this subject, so go check them out.

When you do add colour, try using limited colour palettes, focusing on a few colours instead of splashing reds, greens and blues everywhere like crazy. You want to learn how subtle variations in hue or tone affect the feel and atmosphere.

Create the design with no or limited images
It can daunting at first to design only with text, as images are such an easy way to create impact, mood or emotion within a design, but once you start working more text, you appreciate the subtleties of typography. It's the details that matter here, where even small decisions on kerning, leading or measure can have a big effect in the overall feel of your design.

There are no shortcuts to great typography though, you just have to work with text, obsess about text, love text. If it sounds creepy, that's because it is.

Avoid all those "design ornaments"
Force yourself NOT to use a single drop shadow, gradient or rounded corner. Often people use these because they feel a design "needs" them. Trust me, if you've got all the other stuff right, it won't. Remember this is about making life hard for yourself so you have to improve at the basics. No one said it was going to be easy.

Take your time

As I have become better as a designer, I’ve also become slower at designing. That might sound weird but it’s completely true. When I started, I would rush through designs often churning out a bunch of them in a day which would all be presented to the client. The quality was low, but I didn’t have the confidence to focus a single design and keep going until it was right.

Nowadays, I’ll spend days on a single design until I’m completely happy with it. Then, and only then, will be the client be presented with the single design. If you are struggling with something, then just leave it. Walk away and sleep on it, maybe it just isn’t happening that day. You might be amazed the next morning when you come along and suddenly it’s so obvious what it should look like.

Be patient, believe in yourself and motivate yourself to keep at it until you get there. I truly believe that any design talent I have is 90% stubbornness.

A simple caveat

Much of the work flow process I've described above is useful in every project, but is the ultra simplistic approach appropriate for every design? Hell no. Somebody asks you to design the site for the latest Disney movie and you'd clearly be insane to go for a black and white text only website. But there is a time and a place for it and remember this isn't about the destination; it's about the journey. It's about challenging yourself so you can improve your understanding of the most fundamental skills of what you do.

So what do you think? Pick a project, maybe it's even your own website, and get back to basics with design!

3 Comments for Back to Basics Design Part 2

J Phill - 28 October 2006

Good stuff here. I just about ready to comment heavily when you started talking about the use of crutches and shortcuts!:)

It’s always important to remember that design is a solution, not a decoration. I’ve thought about trying out a greyscale grid for a design before I start adding images and color. It seems that it would help you focus on heirarchy and typography so much more.

Elliott Cross - 29 October 2006

Wow…great article…! I completely agree that design is important, but it is the content that should take place first. Then, the design should complement the content to draw the reader or viewer into the site. It should be simple, yet appealing to make it comfortable for each user. You want to make them feel like they are welcome and in a special place on the web.

Great information!

Alan - 30 October 2006

Another great article from the zen stable.

One of the things I tried to do with the redesign of my site was to design without images and use text for the design. One of the problems that arose from this was that some people complained about the legibility of the text so it has changed slightly.

I am in the process of assessing my new requirements for my site so that I can go back to basics and re-align the site to include more features but also adjust my colour palette. Black is just too dark :(

I love my design but my monitor sucks and I cannot develop the design any further using my original psd as I can’t see the subtle details. This lead me to come to the conclusion that others probably have the same problem. I would rip your colour scheme but that would be cheating lol…

FreeAgent sign-up