Below are some examples of contemporary German work:

Special mention also has to go to the Berlin Film Museum logo: http://www.deutsche-kinemathek.de/

The first stage before beginning any design is to define exactly you are trying to achieve so you have a framework to asses ideas with. Our goals were as follows:
1. The basics – to show our portfolio and explain our service.
2. Look great
3. Differentiate ourselves from other agencies
4. Make a user’s journey as simple as possible and answer as many of their questions as possible.
5. Ensure the site is simple and quick to update

Design for any project, web or print, begins on the sketch pad. It allows us to quickly gauge what will work and try a myriad of options.

Once we have decided on a route, or several, these are mocked up Photoshop. This gives us a clear picture of what a final site would look like and allows us to start to critique it as a user. This process usually involves several rounds of changes before a final design is fixed.

With the design finished, we could firm up the technical aspects. Our preference was to use the WordPress CMS as a base because we have a lot of experience with it and we knew that by using a series of custom built templates we could extend the platform in the way we wanted. For those familiar with WordPress, our build uses a combination of templates, plugins and jQuery to achieve the design.

There are two fairly complex sections which make up the bulk of our website; the jQuery carousel (the section which slides) which displays the projects and the CMS integration which controls the way WordPress displays posts and pages in order to make it display items correctly. We therefore chose to do the initial part of the build in two separate sections in order to make debugging simpler.

The carousel is based on a pre-built plugin so the first stage was to hack into this and make it work the way we wanted it to.

Next we built in the drop-down functionality which features across much of the site.

With the carousel finished we then started on the WordPress templates which control the content appearance. We start the process using simple text strings rather than full content as this allows us to ensure everything is working and easily pin point bugs.

The next stage was some basic integration and to make sure that the images were appearing correctly.

Now the two sections were working correctly independently they needed integrating together. System bugs start to become more time consuming to locate and fix at this point as the amount of code doubles.

The website will be made from thousands of lines of custom code, plus the thousands which make up the WordPress basic skeleton. It is written in a mixture of html, css, php and jQuery.

Every image on the website has to be made. Some are photos, which need cropping and sizing and some are images, which need drawing from scratch. Below is the tiny arrow which appears when you hover over the sign-up arrow.

The website is taking shape and looking more like a finished product so at this point we start looking at cross browser testing. All of the different browsers, and sometimes just different versions of browsers, render html in separate ways. Therefore sometimes what works in one may not work in another. We therefore cross test the website on as many browsers as we can to ensure it looks correct on all of them.

Whilst the coding is happening the content is being readied. We believe and recommend that website copy and photography are jobs for specialists and we therefore enlisted the help of C+C and Rachael Codling with these sections.

At this point the project was several months in and we decided that we would like to get at least some of it up and running with new work as we hadn’t updated our previous site in a year. We constructed a holding page template which allowed us to show off new work but still gave access to the old site until everything was finished.

With the holding site up we began to assemble the rest of the new content and set it in the CMS so they were ready to go live. Content upload can be a slow process so it’s important to build time into a project for this.

Full load testing with real content generally highlights system bugs that may have been hidden before so another round of debugging takes place.

With last touches done, such as re-directs for the old site urls, we were able to put the site live. The real testing now comes with use. As we track people’s behaviour on it over the coming months we will make tweaks and amends to optimise the journey and add new content to keep the site busy and fresh.

Working around our client projects, the site has probably taken in the region of six months from conception to live date.

We like to have a bit of fun at Christmas, so this is for all our clients, friends and well wishers.

15% increase in average order value

11% increase in average time spent on the site

13% decrease in bounce rate

We communicate this understanding with a simple graphic approach: building the right brand for your company.

See the Children in Need Designer Pudsey work here.