WooThemes

This isn't the first time that we worked together, I already designed a theme called Abstract for them. WooThemes is a one stop theme shop where you can get high quality WordPress themes and custom support.

The female logo that I created to go with the F01.01 theme

The briefing

There wasn't really a briefing for this project except that it needed to be a feminine look without going overboard like some girly stuff out there. People needed to recognize my personal signature in it.

The male logo that I created to go with the M01.01 theme

The design process

My starting point for this was to design the theme as it would serve as my own. I was thinking along the lines of a very feminine look (hence the ƒ in the name), with lovely contrasting colors (since that's my thing apparently) without going over board into flowery, pinkish, candy, ... which makes it more teenage girly like and less compelling for this project.

I started this theme by drawing the girl illustration and then create the design around it. When the idea for the theme hit me I already had the intention to use this illustration as a huge eye catcher within the page. Below you can see how the illustration evolved from outline to finish by rolling over the image.

The girl illustration created in Adobe Illustrator

Rollover the image to see the outline

The finished girl theme

After I got the girl illustration nailed I started to think about the color palette. Choosing the colors went pretty fast but soon after that I got stuck with the lay-out. I've tried to work with straight and minimal shapes that flowed together as collage with the girl illustration. That didn't work out well and I really got stuck. That's when I left the design alone for a while and started working on something else. Once I got back to it, I started in a new direction with the girl standing on the left side. This direction proved to be the right one and brought me to the finished result you can see in the image below.

Color swatches used in f01.01

Male theme

When I showed the female theme to the guys at WooThemes HQ, they liked it very much and asked me if it was possible to create a male theme as well. That's when I jumped back into Illustrator to create a male character. Next task was to create a new color palette that would suit the male character.

Color swatches used in m01.01

Discount Coupon

If you really like this WordPress theme, and would like to buy it, I have a discount for you. The guys over at WooThemes HQ created a 25% discount coupon "VPIETERS" for all purchases of F0101. The discount code expires on 10 November 2009. You can view some more of the design in our portfolio

What we did

Graphic Design and art direction

What is Scroll Magazine?

Scroll is founded by long time web industry figures Maxine Sherrin and John Allsopp in 2008, Scroll is a print, PDF and online magazine for web professionals. A magazine where people like us feel right at home. Maxine and John's company Web Directions, holds events (Web Directions South, Web Directions Roadshow) for web designers and developers.

Design process

When Maxine and John approached us to design the web site we were thrilled to explore how we could translate the print version to its web sibling. Usually the process starts by exploring some options by using pencil and paper.

Next up is the design phase so that we can transform our sketch idea to pixels. A great bonus was that we could use our own design of the Scroll logo in the web site. Usually we need to work with what is there and that isn't always easy if the logo doesn't really fit the direction that we had in mind. Those are the challenges a designer faces almost daily.

The end result

We are so happy to finally be able to show this design. Veerle and I are both very happy with the outcome. In this instance we weren't responsible for translating the design to CSS/XHTML, and sometimes that leads to a design that has lost its soul due to bad implementation. However in this instance we are thrilled with the excellent work that was done by Web Directions employee Guy Leech.

Scroll Number 2: place

Scroll Number 2 has just been announced at Web Directions South 09. If you are a web geek, get yourself a copy and enjoy the quality articles by:

• Keeping your place - Cameron Adams
• It's time for content strategy - Melissa Rach
• Yiying Lu - John Allsopp
• Disrupting the conceptual metaphors of the web - Jeremy Keith
• Twitterville - Sebastian Strakowicz
• One web and universal access: a bridge too far? - Henny Swan
• Maps and macroscopes - Matt Web
• What Africa can teach us about place - Erik Hersman
• Unlocking the power of place - Rachel Hinman
• Home is where 127.0.0.1 is - Faruk Ateş

What we did

Brand design and consulting, graphic design.

I'm excited to announce that I'll be speaking at this first European ExpressionEngine and CodeIgniter Conference. The conference is scheduled to take place on October 22-23, Leiden, The Netherlands. Looking at the speaker list it feels a bit intimidating that there is so much developer talent scheduled and that I'll be the lonely designer outside her familiar habitat ;)

Conference Schedule

The first day of the conference will be packed with talks from some really great minds in the community. The ExpressionEngine team will be represented by Leslie Camacho and Derek Allard. I'm also excited to finally talk to Simon Collison again because I think we last met years ago at @Media. Simon was one of the people that got me excited about ExpressionEngine after being a pMachine user myself. There are more fine folks on the list so this will be an interesting experience for me. Second day will be filled with nine different workshops to help you fine tune your ExpressionEngine or CodeIgniter skills.

Designing and using the new EE 2.0 (beta) interface

My talk will be about the work we did on the design for the EE 2.0 (beta) interface. Get to know the full design process behind the new ExpressionEngine 2.0 (beta) GUI. Find out why and how certain design decision were made. What was the thinking process to come up with an interface that meets the expectations of hardcore developers as well as beginners, clients and designers. All followed up with a practical hands on example of how to use this fabulous new version seen through a designer's eye.

5x1 free tickets + 25% incentive discount

Go to my personal blog to win free tickets for this conference or to register with a 25% discount. Instructions are published in the article.

Summer is in full swing but we aren't relaxing on a beach somewhere :) Work has been pretty hectic as always. These are some of the projects you may expect soon in our portfolio.

Finalizing a web site design

Finalizing a web site for a Belgian construction company.

Cecif.com visuals

Currently updating the visuals of Cecif.com

Light design makeover of a web site

Working on the CSS/(X)HTML coding of the light design makeover of the Prudential Kansas City Realty web site.

Logo design still in process

Trying out different poses of a pig for logo project.

Logo design for ThemeGarden

In the final stage of a logo design for ThemeGarden.

At time icons have to carry out an important mission. In some case they do the heavy lifting in a design. Think about buttons for an application for example. The icon needs to tell the user what will happen when the button is clicked.

A series of icons used in different projects

Icons never have been on the forefront here so I thought why not showcase some of the icons that I've designed lately. I can't count the amount of different icons for different projects so far, but here is a list of a few that I want to share with you:

Icons designed for the web site of Exonet.

Icons designed for the web site design of Gourmates

Icons designed for the web site design of Greenpeace 'Green My Apple' campaign

Icons designed for the web site design of Woningbouw Huyzentruyt.

Icons designed for the web site design of Medshop Express

Icons designed for a recent web site design for a project called OCEAN2012.

Icons designed for a web site design for a project called Open Congress

Avatars designed for Scrapblog.

Icons of all kinds

Sometimes icons are like complete illustrations and sometimes they are so tiny that they only consist of a few pixels. They are created pixel by pixel using the Pencil tool in Photoshop. The more illustrative ones are created in Illustrator. Though I must say I often combine both apps these days: start in Illustrator with the basics, place the shapes in Photoshop either as Shape layers or Smart Objects and finish things off in Photoshop.

Icons designed for a CRM application for SDWorx.

Icons designed for the web site design of SocialSignal

Icons designed for an application called EasyCare for Belgian internet and cable TV provider Telenet

Icons designed for an application called Internet Security for Belgian internet and cable TV provider Telenet

Icons designed for a web site design for Tripster.

Icons designed for Weblogs SL for the Actibva BBVA web site.

Icons designed for Weblogs SL for the Xataka weblog.

Some of the icons shown here never saw the daylight

I think I could write an article or 2 on projects that never saw the daylight or designs that didn't make it for some reason. Here are the icons of a few:

The briefing

There wasn't really a briefing as this was more like a request for me to design a new theme for WooThemes. There were no specific boundaries set, except that they asked for my creativity and design style.

The design process

As I was given total carte blanche, I thought it was best to look at which themes they already had in their assortment. This way I could base the direction of the design on a theme that I thought was more highly in demand.

Proposal 1

That's how I came up with the idea of designing a theme for small businesses.

My initial design proposal for Woothemes was called 'Cool structure', aimed for small businesses.

I was thinking of a way to deliver a theme that was not too personal, but a bit more commercial instead. My thinking was wrong. The reason WooThemes approached me was exactly because they preferred a theme in my 'typical' personal design style.

Sketching for proposal 2

And so I started all over, thinking in a whole different direction: more illustrative, bold and high contrasting colors, dark background,... If I think about what my typical design style is, than I have no other choice than to create an illustration. It has even become a bit of my trademark.

Random sketches made in the past that helped me for the creation of the my WordPress theme called 'Abstract' design.

While sketching in one of my Moleskines I came across this page from a few months ago and always wondered if I would create posters from them or use them for some project. The shapes I drew in the illustration at the bottom left with the word smile seemed interesting to use as I could see some possibilities here to work with. So I traced the shapes and experimented with colors and overlaying color modes in Illustrator. The result was exactly what the client was looking for...

The final design

I decided to keep the elements I thought would suit this new theme also: the horizontal navigation and its styling, and the subtle background structure, only this time layered on a different background color.

This is the final illustration used for the WordPress theme 'Abstract' for WooThemes.

The colors and general style of this illustration were used to set the style for this theme.

An illustration is often the central starting point of my creations. Once I have this illustration I think in ways of how to use that illustration in the layout and new ideas come to live while trying different things out. I do a lot of experimenting and I also try to re-use parts of this illustration in a different way e.g. for icons or decorative elements (dotted lines or flower kinda shape).

I baptised my theme Abstract because not only did I like the naming, I also thought it goes well with the illustration. This was a very fun project to work on because I could entirely do my thing. It was an honor creating this theme.

The Deep House Cat Show is run by DJ philE and is a free dance music podcast. philE plays numerous genres ranging from Deep, Soulful, Funky House to Elektro, Minimal, Tech and Progressive House, while focusing on new digital releases and promos.

One of the best deep house podcasts

This podcast is one of my personal favorites and is probably one of the best deep house podcasts out there right now. I'm not 100% sure anymore where I got to know this gem but this podcast is one of my main sources to discover and buy new music. Big was my surprise when Philipp Eirich aka DJ philE contacted me to design a printed ad for the WMC 2009 (Miami, FL - U.S.). As deep house lovers ourselves and frequent listeners to this show, it was an honor to design this ad.

Process behind this printed ad

Smaller jobs like this one can make me very exciting. Although this job seem to be pretty straightforward, I couldn't help noticing that the Deep House Cat Show's logo and housestyle was not entirely focussed on one and the same style. The client told me I could entirely do my thing, which is always nice of course, but I wouldn't do a proper job if I didn't design something that fits the housestyle perfectly.

Sketching

While doing a bit of basic sketching I thought smooth round shapes seemed to work best. It suits the style of this type of music and it blends perfect with the housestyle.

Since the logo is usually in magenta, I thought of using a warm color palette. My thinking was that it would be nice to create some sort of a gradient color effect going from green, to yellow over to orange and back to magenta.

Deep House Cat Show ad version 1

Less is more

My aim was not to go overboard with all the flashiness you often see in these kind of ads. My opinion is, if everything screams for attention, than there is no focus and nothing will get any attention. Use enough breathing room, give one element a large font-size and reduce all other text so you achieve a typographical order of hierarchy. This way you put focus on one element and you can draw the attention in.

Deep House Cat Show ad version 2

Tutorial

If you are interested in how these ribbon looking shapes where created step-by-step, go over to Veerle's blog to read the tutorial.

What we did

Graphic Design and art direction

Social Signal is a web strategy company that helps business, non-profit and government clients use the latest web tools to engage their customers, supporters and the general public in crucial conversations.

The scope

Our mission was to create a site with a design that creates these adjectives:

• Creative, warm, fun
• Innovative, cutting-edge
• Brilliant, smart, insightful

The balance had to lean towards creative and fun. Our client didn't want to feel dry or corporate and still come across as smart and knowledgeable. As designer it is our task to translate all these goals in something that works.

You win some, you lose some

The very first design proposal started off with a more neutral feeling, using subtle colors for the content and color accents for the navigation. For some reason we got stuck on the idea of using the colors of the logo for the different sections for the site. It didn't really cross our minds to use more of the colors of the logo throughout the design. We just thought that this would be one step too far, and that the site would look way too playful.

The first feedback we received was that the design didn’t feel as creative and funky as the brand. They were wondering if the design just needed a few playful graphic elements and the judicious use of more colour, or a completely new concept. They did like the very clean, almost Mac-like design and the distinct areas of the page. They wanted a more creative, less corporate looking design.

And so 'colors happened'...

We decided to use a lot of the primary colors of the housestyle which are warm ranging from red to yellow. Red is the main color throughout the site and is used as link color, as well as accent color. Yellow is used as a background color for the footer. Together with the red to orange gradient, we tried to create some sort of a transition between red at the top towards yellow at the bottom. This way things look colorful, but still balanced. Using green and blue for different kind of accents throughout the page, helped giving the design a visual hierarchy.

Final design

After several tweaks and revisions, this was our final design:

The client liked the rainbow very much but wondered if visitors might misinterpret it. Using only the primary warm colors for this and making it look more like a signal seemed to be the ideal compromise.

Impact of the design on the website

It is hard to imagine but there are still people who think that design isn't important. We strongly believe that it plays a very important role in the greater story. To learn what impact the Social Signal design had for our client we asked Rob Cottingham this question.

What kind of impact and or results did you see from this redesign of Social Signal?

The most immediate impact was with our team: we love, love, love the new design. It's made us much more enthusiastic about encouraging people to visit our site.

The response from customers, colleagues and visitors alike has been overwhelmingly positive: lots of compliments on the new look, but more important, we're seeing a big upswing in engagement on the site. Everything from overall traffic to blog comments to contacts from the site is up sharply.

And one unexpected but delightful outcome: we love to spend time there. Because it feels so much like Alex and me, and because it's so attractive, we're much more motivated to generate new content and engage with the site ourselves.

What we did

Brand design and consulting, user interface design, graphic design, and CSS/(X)HTML template development.

Espresso

Both Geert and I are very happy users of CSSEdit, and the fact that it is being developed in Belgium is even sweeter. When we learned that CSSEdit would get a companion named Espresso, we couldn't wait to try it out. Espresso is a brand new code editor for the Mac that shares many interface similarities with CSSEdit and the same polished interface that we are so found of. With the introduction out of the way lets take a look at the work we did.

Research, thinking process, and sketches

Usually when people ask us to create an illustration I take my sketchbook to do some brainstorming with Geert. My initial idea was to create an illustration around coffee and caffeine, using a dark brown background with a jute fiber structure in combination with some bright colors.

We thought some funny text doodles would be a cool idea to add in the illustration as if they arise from the damping espresso cup. We were thinking along the lines of: once you start using espresso, you are on caffeine and become an unstoppable coder. You code like you never coded before. The feeling you have after a strong double espresso shot. You feel like you have all this energy and that you can conquer the world.

Dark brown background with a jute fiber structure in combination with some bright colors. Click on the image to see the full size on Flickr.

Our client liked this general idea, especially the doodles. However the very vertical shape of the illustration didn't really work well. There was also the issue of a brown background not really fitting with the application's interface. My client really liked the colored lines and the doodles. So he suggested to try out to implement the lines in a different way with the doodles still in place and on another background color, definitely lighter, preferable lighter grey. We created many variations. This is only one of them.

The issue with most of them was that the illustration needed to stand on its own in the center because having them aligned at the bottom wasn't really practical. My client also suggested to try to spread the doodles a bit to create a more natural flow. He also wondered how things would look if I rearranged the colored lines, adding a few and using more color variations.

After several trials we ended up with this version, a version we are both happy with.

Promising newcomer

Espresso is a promising newcomer in the Mac development scene with great potential. Knowing Jan's passion I know that exciting new features are planned. If you want to read a good review on the application I recommend this article. Even without this project I would fully recommend that you try it out. Excuse me now as I go back to coding and wondering about any upcoming new features. :)

What we did

Graphic design.

The logo design brief

Design is a collaborative process between the designer and the client so the first stage of the process is always trying to understand the nature of the client's business. Social Signal is a web strategy company that helps business, non-profit and government clients use the latest web tools to engage their customers, supporters and the general public in crucial conversations.

We want the logo to evoke:

• Our emphasis on both the human and the technological (we’re a tech company, but we’re a tech company whose expertise is understanding people)
• Creativity, fun, artistic expression
• A sense of innovation, intellect
• Hopefulness for the future

Look and feel

We probably want a symbol and accompanying text treatment.

Research, thinking process, and sketches

Before we start anything else we do some research in books, web etc. Research is an essential part in the logo design process as this ensures that your logo will differ from competitors for example. We know about competitors because it is one of the questions we ask in our questionnaire. The next stage in this design process is where creativity comes into play and usually the most fun part, namely the sketching cycle. Veerle concentrated in this stage on the 'signal' part.

Proposal 1

The people factor and wavy shape of a signal coming from the 2 i’s in the name as sort of antenna sending out a signal. The colors symbolize the diversity of people.

Proposal 2

Basically the same idea as logo 1, but a bit more abstract. People socializing, expressing the intersection of social media… The bigger cluster of dots could be the signal-to-noise expression, with the i being the ‘signal’ factor and the bigger dots the ‘noise’.

Proposal 3

Here I worked with the ‘signal’ idea like the initial logo, but with a typographical twist and dept effect.

Client feedback

Great work! We were so excited to see these, and have had a lively morning conferring with the team. All of us liked different aspects of each of the three designs, but we all agreed that version 1—the people-as-wave-form—was our favorite, and a very strong representation of both the social/community and tech/communications dimensions of our work.

We did have several thoughts about the current version, and some elements that we liked about the alternative options that we’d love to try incorporating. We’d love to see two or three takes on the first logo that could show some different possibilities.

Proposal 4

Before arriving at the final logo Veerle tried another comp but this time without the rainbow of colors.

Client liked proposal 4, but with the rainbow colors instead of the yellow-red range. This version was used as the basis for the final logo.

Final logo

However Veerle tweaked a few more things before it was finally approved. This is what Veerle did to get to the end point:

I’ve adjusted the colors a bit and went back to the rainbow colors. I think the yellow should stay in place because it creates the perfect contrast with the red. I had to create an extra bright red and an orange-red to make it work. So the green, blue violet stays as it is and there are more warm color variations or steps from red to yellow than there is from yellow to violet. I also tweaked the kerning of the letters a bit and altered the shape of the letter 'g' to achieve a perfect vertical aligning between the 'a' and the 'g' and the 'n' and the 'l'.

What we did

Brand design and consulting