You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Dec 22

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.

The briefing

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':

Wootheme that wasn't chosen

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.

Abstract, my Woothemes design (homepage)

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.

Abstract, my Woothemes design (2nd page)

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).

Sketches with ballpoint pen

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.

WooThemes

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 :)


35served

gravatar

1

permalink this comment Vin Thomas Mon Dec 22, 2008 at 04.37 pm

I purchased your theme last week. Great work! I will be using it for my wife’s blog.

Thanks!


gravatar

2

permalink this comment Vasili Mon Dec 22, 2008 at 04.45 pm

Lovely Veerle. I would love to get into illustrating, but I can’t get my hands on Illustrator. :(


gravatar

3

permalink this comment Aristides Mon Dec 22, 2008 at 04.49 pm

the abstract theme is yelling Veerle!!! Nice work miss! :)


gravatar

4

permalink this comment chris Mon Dec 22, 2008 at 05.15 pm

Great job, really inspiring write up too.

I have been meaning to add some personality into my own site and this has given me a lot of inspiration :D


gravatar

5

permalink this comment Milano Mon Dec 22, 2008 at 05.43 pm

Nice work Veerle!

I also find it’s very hard to work without limitations. When there are limitations it’s interesting because designer needs to use head to solve specific problem. When there are no limitations it means there are no problems, and number of possible solutions is unlimited.


gravatar

6

permalink this comment Lieven Mon Dec 22, 2008 at 05.45 pm

Noticed some key-differences between the image and the theme ( the grid in the calendar, the fill-in form). To be honest I prefer the image, for those details…

Did you designed for multiple colour-variations?


gravatar

7

permalink this comment bobh Mon Dec 22, 2008 at 05.53 pm

“some title comes here”
loving your flemglish :)


gravatar

8

permalink this comment Adii Mon Dec 22, 2008 at 06.00 pm

@Veerle - You’d be surprised at how little people online know me as Adriaan… :)

Anyway… We loved working with you on Abstract and I fully understand that even though an open brief like the one we provided, may be fun and flattering - it can be just as hard at times. The end-result is however beautiful and we love the fact that you have totally scribbled your signature onto our theme offerings at WooThemes.

Working with you on Abstract really showed me (personally now) why some designers are better, have bigger reputations and are more well-known than others - you were truly top-notch and we could not have asked for anything more from the design.

We might just be tempted to take out our wallets and send another open brief your way in 2009…


gravatar

9

permalink this comment Neil MacLean Mon Dec 22, 2008 at 06.04 pm

It’s a great theme. Very original. But…
I would love to see the other one developed into a theme. Have you got plans for it? I hope it’s not going to gather dust somewhere. Yes, it’s neutral but it’s still high quality work and at least one of us here would like to see it developed.
Please.
Thanks.


gravatar

10

permalink this comment Magnus Mon Dec 22, 2008 at 06.08 pm

Very nice and detailed walk through of your design process!

I wish I could draw like you ;)


gravatar

11

permalink this comment Mark Forrester Mon Dec 22, 2008 at 06.45 pm

Hey Veerle,

As Adii has already mentioned it was a pleasure working with you on this project. Your vibrant, colourful design style has added a nice angle to our portfolio of commercial themes.

Hopefully you like some of the other styles I produced for Abstract. I must admit I did feel quite a bit of pressure designing some alternate colour palettes for this one, especially after reading your blog in the past and seeing your intricate attention to detail and of course your mass readership!


gravatar

12

permalink this comment bibox Mon Dec 22, 2008 at 06.52 pm

It’s always a pleasure Veerle that you share your design process. Very interesting, and at least, a lovely theme for Abstract, certainly much personal and vibrant than “Cool structure”.


gravatar

13

permalink this comment Hiranthi Mon Dec 22, 2008 at 08.28 pm

No wonder I totally loved that theme :) (also reminded me of you, so now I know why ;)).

Also like Cool structure btw. Very different, but it has a more ‘professional’ (as in: business) feel to it which I like :)


gravatar

14

permalink this comment Antoine Olbrechts Mon Dec 22, 2008 at 09.38 pm

Wow, very nice theme, thinking about buying it for a project I’m launching…


gravatar

15

permalink this comment W Mon Dec 22, 2008 at 10.59 pm

“... I noticed there was a spot left for a theme that looked a bit business-like ...”

That’s dead right Veerle. And I loved your first concept. I hope it gets Woo’d sometime soon too.

All the themes Woo publish are first class, but WordPress is much more than a bloggin platform, and I really hope some quality non-blog themes get Woo’d very soon.


gravatar

16

permalink this comment NetOperator Wibby Tue Dec 23, 2008 at 12.16 am

I saw the first one and thought, “Meh”. The second one however, is you in a nutshell. I must say, I continue to be impressed by your work.

The Blue theme looks a bit purplish to me ... My favorite ones are the default [obviously] and the Grey. Maybe Creme too. I often get stuck with the design process as well, when I am given free reign. I either start to do too much or I do too little. Still learning. ;)


gravatar

17

permalink this comment powL Tue Dec 23, 2008 at 12.33 am

really nice theme and great walkthrough. THX for so much inspiration!


gravatar

18

permalink this comment Felicity Tue Dec 23, 2008 at 04.47 am

Hi Veerle, I was just wondering will this theme be released or reworked for blogger? I would love to use this theme on my blog!


gravatar

19

permalink this comment Thijs van der Vossen Tue Dec 23, 2008 at 09.19 am

I don’t understand the reason for not using Neue Helvetica. It’s installed on OS X by default, while Windows users are unlikely to see any variant of Helvetica anyway since it’s not shipped with their platform.


gravatar

20

permalink this comment Jorge Tue Dec 23, 2008 at 10.45 am

Very nice theme. Inspires relax.
Thanks for sharing !


gravatar

21

permalink this comment cssbit Tue Dec 23, 2008 at 03.39 pm

lovely theme, and beautiful interface
thank you


gravatar

22

permalink this comment Soroush Tue Dec 23, 2008 at 03.43 pm

Thank you Veerle for sharing your design process with this theme.

I personally think the first ‘reject’ theme and the second theme are both beautiful, with the second having the “Veerle signature”!

I also have a question, did you get to decide the arrangement of the different blocks and which blocks would be put in the sidebar/footer? In other words, did you have freedom over the structure as well as the design?


gravatar

23

permalink this comment Veerle Pieters Tue Dec 23, 2008 at 05.51 pm

Lieven said:

Did you designed for multiple colour-variations?

No I didn’t do those. I mentioned that in the last paragraph of the article :)

Adii said:

You were truly top-notch and we could not have asked for anything more from the design.

Awww thanks so much for the compliment and the opportunity to do this project.

Felicity said:

Hi Veerle, I was just wondering will this theme be released or reworked for blogger?

The theme is only available for WordPress over at WooThemes.

Thijs van der Vossen said:

I don’t understand the reason for not using Neue Helvetica.

You answered the question yourself, it is because the main audience of this theme will be Windows users.

Soroush said:

did you get to decide the arrangement of the different blocks and which blocks would be put in the sidebar/footer? In other words, did you have freedom over the structure as well as the design?

I did have the freedom over that but I looked at the other themes to get a feeling for the structure.


gravatar

24

permalink this comment Thijs van der Vossen Tue Dec 23, 2008 at 08.16 pm

You answered the question yourself, it is because the main audience of this theme will be Windows users.

I’m sorry, but that doesn’t answer my question. I should have phrased my question a little differently though.

Above, you wrote:

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.

You client is right that almost no Windows user will see Helvetica Neue Light. However, these people also won’t see Helvetica Regular because that’s also not installed by default (Windows doesn’t ship with Helvetica). So, by this logic, it doesn’t seem to make sense to keep using Helvetica because none of the ‘most people’ your client referred to will actually see any variant of Helvetica.

If you would have been designing for Windows users, wouldn’t it have made more sense to use Arial instead?


gravatar

25

permalink this comment Amber Tue Dec 23, 2008 at 10.54 pm

I can’t tell you how nice it is seeing websites with personality. There are so many stuck in the old fashion 98’ skins that even today simply use mirror images and rounded buttons, but that is not making the cut. You have outdone any design I have seen before - you are truly gifted


gravatar

26

permalink this comment Veerle Pieters Wed Dec 24, 2008 at 10.43 am

Thijs van der Vossen said:

You client is right that almost no Windows user will see Helvetica Neue Light. However, these people also won’t see Helvetica Regular because that’s also not installed by default (Windows doesn’t ship with Helvetica). So, by this logic, it doesn’t seem to make sense to keep using Helvetica because none of the ‘most people’ your client referred to will actually see any variant of Helvetica. If you would have been designing for Windows users, wouldn’t it have made more sense to use Arial instead?

The client did decide this. If it was up to me I would have kept the Helvetica Neue Light, and Windows users would see it as Arial Regular. It’s what I did on the Duoh! website btw. So for Windows users it doesn’t change a thing, it’ll render Arial regular anyhow. I didn’t do the CSS coding for this project and I didn’t want to make a big deal out of it. In the first design it would have made a difference since I’ve used a lot of Helvetica Neue Light, but in the approved design it doesn’t really make a big difference. So I was OK with the decision. I also thought Helvetica Regular is almost the same as Arial Regular, so to me it sounded like a good solution.


gravatar

27

permalink this comment Kalevskis Wed Dec 24, 2008 at 11.33 am

Congrats for creating this lovely theme. The only thing that i didn’t like is no contrast between text color and background color. They are almost similar and I find very hard to such a text. But i guess, something had to bee styled the way theme is named: Abstract.


gravatar

28

permalink this comment Ali B. Fri Dec 26, 2008 at 08.32 pm

Seeing your designs always reminds me how much I suck at it. Oh, there’s actually something good in that…somewhere ;-)


gravatar

29

permalink this comment Rafael Marin Sun Dec 28, 2008 at 07.17 pm

Wow, I mean, Wow! Everything is perfect. Congratulations for another excellent job.


gravatar

30

permalink this comment Ravi Mon Dec 29, 2008 at 07.49 am

Hi…
Very nice theme, thinking about buying it for a project I’m launching…
Thanks


gravatar

31

permalink this comment sarah Sat Jan 3, 2009 at 03.29 am

I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
Sarah


gravatar

32

permalink this comment Lauras Tue Jan 6, 2009 at 07.39 pm

This is awesome! So nice to have your blog to come from an inspiration. Your choice of colors in this design gave birth to my blog design. I will send you a link when its up.

I would love to you write a post about the web-safe fonts, since it was a part of the discussion on this project.

Following your blog for over 4 years, I always admired your choice of colors. It would be great for us rookies out there to read about how you envision the colors before you design, then the adjustments you make and why.
Happy New Year and take care…


gravatar

33

permalink this comment Chris Meeks Tue Jan 6, 2009 at 08.44 pm

Hi Veerle,

I really enjoy the theme that you came up with. I am glad you followed your instincts and realized that they wanted your “brand” to be apparent in the theme, and it certainly is.

Your note about a lack of constraints being difficult is definitely true. Some people think that no constraints would be a designer’s dream. Sometimes that is true, but more often than not it leaves designers like us struggling to find a starting point. It is a fine line between too many constraints or not enough.

When you came up with the second option you started with the constraints of your brand. Obviously it is remarkably comforting because much of the design work has already been done for you (and BY you).

You know that you are going to have some organic design elements, you know you will include bright colors, and you know what your typography is typically going to feel like. That is a lot to start with!

In terms of the Helvetica debate, it is always a tough one. Wouldn’t it be a wonderful world if the full gammet of fonts were available to all users? I talk a little bit more about web typography here if you are interested.

Great work!


gravatar

34

permalink this comment Marky Fri Jan 16, 2009 at 01.27 pm

Woow I really love this!!!! Very good Design! Love the Final! Good job!



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist