The design process of my Eco theme for Fork

11 Apr 2012

Last year Bart De Waele from Netlash bSeen asked me if I would be interested in designing a theme for their Fork CMS. Designing themes is something I always enjoy doing because of the creative freedom that comes with these kind of projects, so it didn't take me all too long to accept this great challenge. Here is another short behind the scenes story of my design adventures…

The briefing

The briefing for this project was pretty straightforward as the client gave me total freedom. I could just choose my own theme, and design style. The boundaries I needed to stay into were the ones of the CMS, but they felt more like guidelines to me. I only had to make sure the different elements of a page were there. In total there were 4 pages to design: homepage, secondary page with sub navigation, blog overview page and blog detail page, but I also delivered a design for the archive page just to show the styling of a list of blog articles.

Finding inspiration and ideas

At first I had no idea which subject I would pick for this theme. The idea of creating an eye-catching visual for the header was something I had in mind from the start. I thought maybe if I just do some sketching the ideas for a theme will come. So I started doodling one of my favorite subjects, which is landscapes. Inspired by the poster series of the Tour de France, the idea of a landscape using minimal and geometrical shapes started to gradually fill my mind. Usually I do several sketches, but for some reason this 1st sketch sparked my inspiration for the next step.

Sketch for Fork CMS theme header visual

While sketching this visual on paper, the idea to use ecology as subject for the theme was born. So I started adding elements that refer to energy, power,… I decided to name it Eco.

Initial design

Trying to find the perfect layout for the homepage was a bit of trial and error as I had a hard time trying to make it look interesting, and eye-catching. One of the reasons was that this visual was lacking some contrast, it felt too flat and light, and I didn't see a clear picture in my head of the structure and layout of the page. I wasn't sure whether to put the main navigation above or below the visual, or have the path above it, have the visual go all the way over the browser screen or not,… Another problem was that I didn't get any content for this page, so I had to come up with something myself. Total freedom over which content to put on the page might seem easier to start from, but to me it's not. The question was also which grid I would go for, 3 or 4 columns?

Trying to find the structure and grid

After a bit of doodling I decided to go for a 3 column grid, having the header go all the way across the browser screen. The idea came to mind it would be fun to build in a parallax effect in the header, using 2 or maybe 3 layers: the sky and clouds, the circles and the sun, and the trees and hills.

Exploring colors
Exploring colors

Meanwhile I was also exploring some colors. At first I tried to combine subtle greens and blues in combination with more vibrant colors and some dark brown, but for this theme I decided to mute things a bit and use subtle colors of nature and stick to sand, brown, green,… with orange as highlight, in combination with a teal blue.

Getting there

After some experimentation, and leaving it rest for a bit, I managed to work out a final and presentable design.

Homepage
Fork CMS theme homepage design

Feedback

It seems I was spot on with my design, as the feedback was really positive. They liked the header illustration and the idea to use a paralax-effect. Only a few minor details needed to be changed, but nothing major really. We also decided to use the typeface Chunk for headings, and other elements like buttons and navigation. My initial idea was to use Bree, but since I had to go for an open-source typeface, I thought Chunk would be the perfect fit, since it adds this nice contrast. After having that out of the way, the other 3 pages followed pretty quickly.

Final design

The header

As for the header, the illustration itself was created in Illustrator, and then pasted as a SmartObject in Photoshop. To make sure the horizontally repeating would occur seamlessly, I've set the width of my document in Illustrator to match the width I use for the website layout.

Header illustration in Illustrator
Creating a seamless repetition

Then I rearranged a few clouds, hills and trees to make sure the repeating would look balanced and seamless. To keep things simple, I try to avoid having the split line right in the middle of a cloud or a tree, but it seems this was inevitable as I wanted to keep a balanced composition. By copying the entire illustration to the left, and then also to the right of the document, I could see if things were connecting seamlessly and how it would look. Then I adjusted where needed, and repeated this action until I got it right.

Header illustration in different layers in Photoshop

Once finished, I copy pasted the different elements in Photoshop layer by layer. First I copy pasted the sky and clouds, then the hills and trees, and lastly the circles and sun. This makes it possible to export each layer separately, with the top ones as transparent PNGs to create the paralax-effect. As you can see from the layers in the above screenshot, I also added a Layer Group where I added a bit of info for the developers to show the repeating area.

Textures and effects

I added textures and effects on the illustration to add a bit more depth and contrast, as it was missing from my initial try in Photoshop. For the trees and hills I duplicated its layer and applied Multiply as layer mode with a 75% opacity, to add extra contrast. Then I added a mask to the original layer and removed some of the inside area of the hills and trees using a transparent smooth brush. This way the borders of the trees and hills got more accentuated by the layer in Multiply mode above it.

Fragment of the hills and trees when exporting to transparent PNG

I also added the paper texture on top of the trees and hills as a separate layer, masking only the trees and hills, to make sure the texture is applied to these elements once this would be exported as a transparent PNG. The tricky part is that the texture is actually a bottom layer in my design, and so once you export the hills and trees to a transparent PNG, the effect of that texture is gone because you have to hide that layer. So you need to add this effect on top of it and apply it with a mask of the hills and trees (see the image above).

Secondary page
Fork CMS theme secondary page design

For this page I used a 4 column grid, using 1 column for the side navigation and 3 for the content. For the 2 other pages, the blog overview and blog detail page, I used the same 3 column grid as I used for the homepage, using 1 column for the sidebar and 2 for the content.

Blog overview page
Fork CMS theme blog overview page design
Blog detail page
Fork CMS theme blog detail page design

For this theme I made sure the link with nature and the environment was everywhere in every little detail. That's why I used leafs and trees for titles, lists or quotations etc. It's of course a matter of finding the right balance here, making sure you don't overdo, or overdecorate. As for the colors, I also tried to find the balance between subtle colors of nature, and still making sure there is a nice contrast for buttons, links and other necessary elements.

A final note…

For the people who follow me on Instagram, you might have noticed that the photos are from my Instagram feed. They are all taken by myself from my cycling adventures here in Flanders, Belgium. What can I say, I had much fun creating this theme, and I hope people will enjoy using it for their website. Don't forget to check it out.

Comments

  1. 1 Wolf 11 Apr 2012

    Nice work & cool case study.

  2. 2 Chip Cullen 11 Apr 2012

    Thank you for taking us through your process! I love posts like this. One question - about how long did this take you?

  3. 3 Rob Cubbon 12 Apr 2012

    Beautiful website design and idea. Looks great and I really like to see other people’s processes. I like Chunk as well – it works very well on websites.

  4. 4 Ciaro 12 Apr 2012

    Hey Veerle

    nice design!

    A small bug: When you resize the window, and have a horizontal scrollbar, the header gets ‘eaten’.

    Let me know if you can come up with a fix for it :)

    Best regards,
    Ciaro

  5. 5 Steve 12 Apr 2012

    Amazing looking theme! The only thing that disappoint is that it’s created for Fork instead of WP but still good for inspiration.

  6. 6 vanni 13 Apr 2012

    Another great design by Veerle. I wanted to test it on Fork. but in spite of having used various CMSes in my life trying to install ECO has been frustrating. If you have contact with the FORK folks you may want to suggest they produce some documentation on applying themes.  I did want to try out your theme.

  7. 7 Veerle Pieters 14 Apr 2012

    Thank you for the comments guys!

    @Chip Cullen that’s really hard to say as I did work on it on and off for a certain period of time. I did look things up, as I time my projects but couldn’t find the data of this one. My estimate would be around 25 hours in total, but I could be wrong.

    @Ciaro

    When you resize the window, and have a horizontal scrollbar, the header gets ‘eaten’. Let me know if you can come up with a fix for it :)

    Thanks for pointing this out. I didn’t do the HTML/CSS for the theme, but I’ll pass to my client.

    @vanni I haven’t installed or used the CMS to be honest so I also have no idea. Thanks for mentioning. I’ll pass your info as well.

  8. 8 Ally 16 Apr 2012

    Thank you Veerle, its so generous of you to share your design process. And the little details such as duplicating the tree layer to add more contrast are gems. I’m going to check out Fork too, because I’ve never used it.

  9. 9 Simon 17 Apr 2012

    I love reading this case studies, very inspiring.

  10. 10 Nicolas Chevallier 08 May 2012

    Great work and great design, thanks for sharing its creation :)

  11. 11 Nora 16 May 2012

    Enjoyed reading your case study, thank you Veerle for sharing!

  12. 12 Amanda Wray 23 May 2012

    Would be fun to see a live demo of the theme! Nicely done. I really enjoyed reading about your process.

  13. 13 tyler 05 Jun 2012

    Great design!

  14. 14 Jose 19 Jul 2012

    Great work! This is rad.

  15. 15 Andy 27 Jul 2012

    It’s really great to see the process you went through to bring the idea to life, especially using your early drawings. I love the theme, as others have mentioned, I would love to try a live demo.