Back to basics – apply design principles to your theme

Today’s 12 days of WordPress and BuddyPress is brought to you by Tammie Lister.  Lets meet her in her own words:

I‘m a web designer whose worked in the industry long enough to remember a time before animated gifs.
For several years now my focus has almost 100% been on WordPress and BuddyPress themes working as a theme designer, but I also have a soft spot for interface design.
I blog at BuddyDress and also at my own blog.  You can also find me on twitter at @karmatosed.

Is your theme confused, crying in the corner and wishing it was special? Don’t leave it being a creep this Christmas treat your theme to some design principles and put it’s frown upside down.

Balance, rhythm, proportion, dominance, unity … chant with me

Your mantra on this journey to enlightenment will be the following: “Balance, rhythm, proportion, dominance, unity”.  Now buckle up and lets get down to some application of these principles.

First a little exercise.

Load up your site or theme you are working on currently. Close your eyes and now look at it.

Now lets look at some basic principles and consider that design.

Balance: Does the site work together? Is there symmetry to the design? Does the lack of symmetry benefit the design? Go with your gut if your design feels unbalanced it is. Balance isn’t about being equal or symmetry don’t fall into that trap.

Rhythm: Repeating isn’t bad. Repeating isn’t bad. Repeating is good. Is there a flow to the design? Does it take the user through the experience? Does it lead to the end goal of the site without distraction?

Proportion: Scale is crucial to good design. The most important at the front so to speak then gradual reduction to the least important. Don’t jar your user bring some proportionality to the table.

Dominance: What’s the focal point? Where do you want the eye? Can you see the wood for the trees in your theme?

Unity: Everything in your design should make sense.  Does every element unite the design into one solid success or is something fighting against the rest of your design?

Theory’s great but what about practice?

Time to now look at a few key areas you can use to bring those design principles into play. These are some starting points and not intended as the only aspects by any means, everything needs a starting point though so lets get on.

White space isn’t a dirty word

There are 2 key areas where white space can help and those are in containing and calming. We don’t like to live in little boxes so why would your content? Don’t just whack another box around it use white space and let the negative space be your border. Don’t cram every pixel full step back and drop those last 5 elements you just added – your user will thank you.

Where is your light source?

Shadows don’t fall in different directions in the real world from one point of light so check they don’t on your theme. Have firmly in your mind where the point of light on your theme is and keep to it. It’s the small details like this which raise your theme to the next level.

One of these things is not like the others… so why should it work like the other?

Using the same styling for elements that have the same action is a key area to usability and making your theme make sense to a user. There is so much talk about usability you can bring this simply to your theme by taking the simple rule of making things that do the same action look the same. Style all links the same way, style all submit button the same way – these are small steps that have a large impact.

What’s the point?

Do you know what you are trying to do with this theme? Reasons can be varied and many but not having one is no excuse. Get a reason in your mind and work towards that. If you need to visualize a user – get them in your mind and fixate on Fred the user and what he needs from your theme to get to his goal.

Ebony and ivory live together in perfect harmony but yellow and purple don’t in that shade

Bring color harmony to your theme. Why throw lots of colors together when you can make a far more striking design using 1 or 2 key colors and a tone to contrast? Look at the palette you are using for color and make sure it’s carried through in your design. If color is something you struggle with don’t struggle in silence use a tool like ColorSchemer or site like Colour Lovers.

This won’t be the last design you do unless you treat it that way

One piece of advice above all other is don’t throw the design kitchen sink at the design. Sure those 10 button treatments look sweet but on the same design? Don’t design in desperation using every technique under your bookmark folders universe. Edit your design palette and simplify your visual message to make it stronger.

Fridge magnet theme designs do not for a good experience make

Just like we’ve covered use white space and editing to make sure you do not cram so much information onto your design it looks like a fridge bursting with magnets or a teenager’s school book covered in stickers.

Russian doll typography

You know those Russian dolls which sit in each other? Treat your typography like that. Your H1 or first header should be the largest and then progress in equal scales down the headers and typographical elements of your theme.

Good enough to feel

How about adding some depth to your design? This can be done through either a background to an element or even the theme itself. You could also add shadows but beware the obsessive compulsive shadow monster.

Conclude with a mantra… less is more

It’s perhaps something we’ve all heard so much we have grown immune to it. I’m not crying out for a minimal theme frenzy, it’s just about learning to edit and step away before you create a Frankenstein theme.

Close down your browser, close down your application and come back in a hour or even a day – let your theme brew then edit and it will be stronger for this process.

Sarah Gooding on Google+