Abstract, my WooThemes design
2008 at 04.12 pm posted by Veerle Pieters
Begin September Adriaan of WooThemes asked me if I would be interested in the creation of a WordPress theme. Last week WooThemes announced the theme on their site, which is the perfect opportunity for me to to share some of my design process of this project.
As far as briefing was concerned, this was very limited to "Design a theme consisting of a homepage and a secondary page". They gave me complete freedom over the concept. Since I haven't developed for WordPress before, the client suggested that I only deliver Photoshop files. So CSS/XHTML conversion wasn't part of the scope.
Complete freedom over the concept
Having complete freedom over the concept sounds nice and it has its advantages; you can do your own thing. Like in most good things there is also a 'but' that translates in a disadvantage in my opinion. Having no boundaries or direction in terms of concept or style feels a bit to me like designing blind. You need to find your own direction. In my case, I always think they want my typical design style: bold, colorful, playful etc. On the other hand, I was considering the commercial aspect as well. A design that looks too much like a personal blog might not sell very well, only a few people might like it. As I could read from the comments on WooThemes, I noticed there was a spot left for a theme that looked a bit business-like, neutral yet stylish, and not too corporate and cold. A bit somewhere in between.
My 1st proposal
In that respect, I decided to try to fill this gap and create this kind of theme and proposed my theme called 'Cool Structure':
It felt OK to me, but a little voice in my head told me the client might have expected something different, something that has my name written all over it. This design doesn't really have this. It's a bit too neutral. In the way people approach you by e-mail you can often read and learn a lot about what they want and like etc. I guess this time my gut feeling came a bit too late, because I was right. The feedback was a bit like I expected. I understood that and decided to start all over.
My design process of the 2nd and final proposal
For the new proposal I decided to keep the choice of typeface Helvetica, with the exception of Helvetica Neue Light, since my client's reaction was that most people wouldn't see this font. He's right of course. So Helvetica Regular was used instead. The other two things I kept was the navigation styling and the background structure. The rest I threw away.
My client mentioned I could include illustrations. Illustrations often add this personal touch to a website and I knew if I add my typical illustration style to it I would have a design he likes. I decided to start with this first. Once finished I often get ideas for the whole page. When people ask me to describe my design process I have to tell them that it differs per project. For me there isn't a magical solution that always work. Though, there are usually 2 different routes I try out and eventually one of them will give me the spark that I need.
These are usually my 2 starting points I try out at the very begin of my design process:
- Starting with the most visual part of the site, the eye-catcher, meaning the header or the illustration
- Starting with a basic grid to layout the different building blocks of your page
Sometimes, like with the creation of this theme, I start with the eye-catcher, the illustration or graphic. While designing this I don't think about the webpage. I focus purely on the illustration or graphic. The only thing I might think of is that I'm creating a composition that could be used horizontally or vertically in some way. This is me in this phase: music on my ears, total isolation 'do-not-disturb' mode, forget pressure or deadline, relax and go for it :) I'm not saying this always work, but it helps a lot to find inspiration. The state of mind is a key factor to me. I need to feel happy and forget about the work and maybe even, and this might sound weird, forget 'the world' for a moment. No, I'm not smoking anything ;)
The illustration came by experimenting with shapes I created in one of my Moleskine sketches (bottom left).
Starting with one shape and a few colors (subtle gradient fills), I experimented by duplicating and rotating them following my sketch as guidance and starting point. To achieve these vivid colors I used the Overlay transparency mode. At the bottom I added a freeform shape. To finalize it, I copied the the layer into a new layer on top. Removed the fill and chose a dashed stroke instead. I moved and rotated the lines a bit. I gave each stroke a color that contrasted well with the fills. Some of the lines and fills were removed, reshaped or redrawn.
Once the illustration was finished, I started to see the picture of how my theme could look. I decided to call my theme 'Abstract' because it was the first word I came up with when I looked at my creation. Once I placed my illustration in Photoshop, I extracted colors from it to use for my theme: green for the big titles and active button in the navigation, aqua 'greenish blue' for the links and also for the theme logo. Then I created some sort of grid to divide my page into the different main areas using a 2 column layout and footer area. To finish things off I repeated some of the elements of my illustration in the footer and header. I created a tiny version of it to use as a hover effect on the bullets in the navigation of the categories and a dashed curly line to finish off the tagcloud box. I also decided to add a calendar because I felt this would add a nice touch in the design.
Tip on finding inspiration
I had most fun creating this theme, because I could be myself, and fully express myself. Just create what I like. Total freedom can sometimes cause a designer's block because, you need to find your own route and it feels a bit like designing blind. Which direction should I go? Which style? The only solution is to give it some time and not to pressure yourself. At least for me, it helps to feel relaxed and think of nothing. This isn't always obvious if you have deadlines to catch and trying to do the double amount of work in half the time... which is often the case for me. I do not always have the luxury to give a design the proper time it needs. The experience I've built over the years is playing a mayor role here, and people are having faith in my ability. This gives me so much positive energy. So believing in yourself is very important. Put music on your ears and block yourself from the world for a moment. If that isn't enough, then try to find your ultimate way to free your mind. Go for a walk or bit of fresh air. Do something totally relaxing so you can start again with a fresh mind.
You can demo the end result of this theme at the WooThemes website. The guys at WooThemes HQ also created 4 different color versions of my theme in case the default one doesn't do it for you. If you are using Wordpress don't forget to check it out and maybe jump on the 4 for the price of 1 special that runs until December 24th. Thanks guys for the opportunity to work on this :)