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

SXSWi 09

Southby has been growing year by year and just when you thought it would slow down due to the economic crisis it even got bigger. This year the sessions expanded even throughout the Hilton hotel because there wasn't any room left in the big Austin convention center.

From what I learned attendance was up by 20%. Big means harder to talk to all friends but we still actually managed to have some good times along the way. Choosing what to see was quite a challenge as there where 14 tracks running at the same time to choose from. Geert and I only went to a few of them as Southby is all about the people. We wandered the floors at the convention center to meet some interesting new people.

My talk at Southby

Last year I decided not to speak and just relax instead. This year however I got the opportunity to be joined by some very good friends of mine to do a talk about color in a session called: Color Angels, Episode 1: Colors: It's Not Black and White. I was joined on stage by Cindy Li and Leslie Jensen-Inman.

What is it about?

Exploring the challenges in color combinations as a key to successful website designs. Advice on what tools you'll need in your arsenal to be inspired. Navigating through cultural and accessibility differences in color and showcasing some of the best uses of color the web has to offer. In case you are interested you can read a full report on my blog where I highlight all the content and where you can download the slides as well.

The site has some very good tips on podcasting and video editing in Final Cut Pro. If you are actively seeking information on that domain we recommend that you subscribe to the devia RSS feed.

The project

Devia contacted Duoh! to create the company logo (which we will discuss in a later post), stationary, web site and ExpressionEngine back-end. First let's take a look at the briefing.

Briefing and description of the company.

Software Development is the main target during the first year(s), but our goal is to become one of the top companies in Belgium (maybe even Benelux) which can offer consultancy, implementation and support for New Media Technologies (podcasting, vodcasting, ... ) The site should primarily offer information about the company (which might be very basic in the beginning) with the option of having a (few) blogs. In a second phase the site should also be able to support Customer / Members / Premium content. Some information (text, video, files) which is not available to the public, but which will be made available to those with a correct login / password.

The design

We wanted to do something different with this site so we tried to be innovative from a layout point of view. The typography fans among you will recognize that we used the typeface Bryant Pro. Veerle created some nice illustrations that fit the Devia branding style for this project. The site got placed on a 975 pixel, 12 column based grid with 15 pixel gutters and with special attention towards the reading length, possible content (eg. video, Slideshare embeds, screenshots) and extendability.

Design that didn't make it

Like with most projects you don't always hit the nail on the head on first try. Before hitting that point where all puzzle pieces fall in the right place we explored a different design. We got stuck on that one and on most occasions it helps to just leave it for what it was and start fresh.

Different design direction that we got stuck on during the first try

Content

A nicely designed site means nothing if it isn't accompanied by good content. Stefaan has some good content on his site if you are interested in podcasting and video. We set this site up so that it would be able to handle a wide variety of screenshots, slides and video as that are the primary resources that will be used.

ExpressionEngine as CMS

The site is powered by a largely out-of-the-box copy of ExpressionEngine. We set the site up to be as scalable as possible since the second phase of the project will involve Customer / Members / Premium content, but for the initial launch, the back-end system acts only as a web publishing system. We supplied the client with a How-To so that the site admin could familiarize with the tags that are needed to achieve the look that defines the branding of the content. This way it is only a minor learning curve, but the output of the back-end is still web standards based accessible code.

ExpressionEngine tip

If your site has a blog or news section where visitors can leave a comment, it's always nice to add special styling to accentuate the comment of the site's owner. This way the comment will immediately get noticed in the rest of the comments.

Once you've created a special class style and you are ready to apply it, all you have to do is a conditional in your ExpressionEnginetemplate.

This conditional works on the user's e-mail address. It will check if the user's e-mail address matches the e-mail address in the conditional and only if it matches, the class will be added and the comment will be rendered with the special styling.

What we did

Information architecture, user interface design, graphic design, CSS/(X)HTML template development, and CMS development.

The fine people of Web Accessibly in Mind conducted a survey during December 2008 through January 2009 to get know more about the preferences of screen reader users. They received 1121 valid responses that gives us some guidance.

The results

Before we look a little close you should understand that these numbers aren't the absolute truth, but serve as a valuable guidance. Let's dig a little deeper into these figures.

Demographics

Disabilities Reported

Users could select multiple options. 118 respondents (10.4%) reported multiple disabilities. 52 (4.6%) reported blindness and low vision/visually impaired. 33 respondents (2.9%) reported being both deaf and blind.

Computer and Screen Reader Proficiency

The responses for computer proficiency and screen reader proficiency were similar. Those who use screen readers for evaluation rated their screen reader proficiency much lower (80% chose Beginner or Intermediate) than those that always use screen readers (only 37% chose Beginner or Intermediate).

Screen Reader Usage

Of the 1121 respondents, 74% use JAWS, 23% use Window-Eyes, 8% use NVDA, and 6% use VoiceOver. While several other screen readers were reported, these were the most prominently reported. Individual versions of screen readers are not yet computed, but generally the majority of users are using the most up-to-date version of their screen reader.

Screen Reader Updates

This was the most surprising part of the survey because it was popular believe that screen reader users are slow to update. Of course this relates to the people who took this survey and maybe doesn’t represent screen reader users in general. Still it is interesting to see that 74,6% updates within a year.

Headings

The next part really shows how important it is to structure your documents with HTML headings. HTML headings, created with the h1-h6 elements serve more than one purpose in our humble opinion as they also improve readability for people without a disability. However the most important reason is that using real headings improves accessibility. To get an idea on how screen reader users use them in the real world you should watch this video showing the Importance of HTML Headings for Accessibility. The video shows you how a screen reader user navigates a document by skipping from one heading to another.

Just a small part of the results

I recommend that you check out the rest of the interesting results over at the WebAIM web site. There is a lot more to be found there such as results for Flash, PDF's, repeated links etc. Another interesting piece to listen to is How do blind people use computers?.

The logo design brief

The first thing that we always do when designing a logo is trying to understand the product or the services that will be offered. In this case it involves discipline. EducatorsHandbook.com is a web-based service that replaces traditional paper discipline referrals. It automates reporting, communication with parents, and communication among school staff about student behavior. The Great Behavior Game – a free, web-based service that helps teachers reward appropriate behavior and academic achievement.

The organization’s mission is to bring about data-based decision making in education by making student data easy to access and analyze. The primary focus is the application of Applied Behavior Analysis methodology to the school setting, which emphasizes the use of data (visually displayed as charts) to make decisions about student behavior. The site will grow into a resource for educators to use to find information about behavior management (which is where the EducatorsHandbook.com name comes from). Accessible behavioral science” is our general theme. It is a reference site as well as a storefront for our products and services.

On the topic of typefaces the client mentioned:

Don't use Comic Sans. I am open to nearly any typeface, but have a preference towards sans-serif fonts.

Audience

Education professionals: administrators, principals, teachers, guidance counselors, behavior analysts, and school psychologists.

Look and feel

When we discussed the look and feel for the logo our client mentioned these guidelines:

All of the icons for our products have been designed using the Tango Icon Guidelines. I like the color palette and the style. The logo does not, by any means, need to follow those guidelines or the palette – it is just an example of a style I really like. Please avoid the use of apples in the logo. The education market is completely saturated with them.

Sketches and thinking process

What we often do before we think about shapes and graphical elements etc. is writing down keywords that come to mind. We wrote down: education, school, book, satchel, brain, teacher, student, graduation,... After this short brain storm session, we both start doodling. The most obvious keyword for us was the word 'book' since this word is also in the name. So we doodled books in all kinds of positions and angles.

Proposal 1

At first we played only with the idea of using a book as icon. One of the ideas was to encapsulate it into a circle.

Proposal 2

The 2nd proposal differs from all other design styles because of its realistic 3D illustrative style. The central idea was to create a 'magical' handbook hence the clouds and stars. Still, we made sure a transformation into a black & white version was still possible.

Proposal 3

We thought that using a book as icon was good, but it didn't not really convey the message of education as well. So we tried to think of ways how we could add this into the icon. Drawing the book from another angle was one of the ideas we came up. This way we turned the book into a satchel as well.

Proposal 4

Then we though of the typical hat that gets associated with graduation (in the US). To keep the distinction between the hat and the book, so both remain recognizable, we played with 2 different colors.

Client feedback

Our client wondered how it would look if it should it read handbook.com rather than just handbook. It might be better (if it works with the design) to have the ”.com” added as part of the logo. This seemed like a good idea so we worked out a final proposal.

Final logo

How it looks in use on the web site

It is always a satisfying feeling when everything comes together nicely. Below you'll see the logo in use on the new EducatorsHandbook.com web site.

What we did

Brand design and consulting

2008

It is really hard to believe that 2008 is almost over and that there are only a few more hours left until we turn the page and start fresh for another year of challenges. First, and formost, we want to thank you for all the beautiful work that we were able to create. Things have been hectic on more than one occasion, but we made it. May your business flourish in these difficult times, and Veerle and I hope that 2009 will present many new opportunities and a good health.

2009

We will continue to talk about our creation process on this blog, and we hope our content will inspire as many people as possible to be creative in this new year.