The process behind

posted by Geert Leyseele
05 March 2009

We recently launched another exciting project that we are quite proud of. It's for a Belgian startup called Devia. The site is run by Stefaan Lesage, an active podcaster with over 2 years of experience in New Media Technologies.

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

Grid for Devia
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


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.

Example of content on the Devia site
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.

<li{if email == "[email protected]"} class="devia"{/if}>

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.


  1. 1 Bob H Thu Mar 5, 2009 at 08.59 pm

    The moment I saw this design in a certain CSS gallery, I knew it was yours. The tagline font, colorful graphics and the little ‘view all’ button just scream ‘Duoh’. Well done!

  2. 2 Martin Vataha Sun Mar 8, 2009 at 09.46 pm

    Veerle, I just want to say - excellent work, again. Wonderful , for you characteristic color combination, that I really love.

  3. 3 Amenda Fri Jun 26, 2009 at 05.56 pm

    Excellent design and worth categorized into CSS galleries. Brilliant work mate, keep going on.