Doklab creates ways for normal people to casually access archives in a fun way. They may for instance place a big touch screen table in a library and let passers-by explore their own neighbourhood a hundred years ago. I was asked to design and build a fresh website to showcase their many good looking products.

Clear and simple design

Before explaining the process we went through, have a look at the final results: the new website. As you can see, the people at Doklab create visually attractive stuff. They mainly do custom development, so we wanted to show a nice overview of their current and successful releases.

I created a simple visual style and navigation, directing visitors’ attention to Doklab’s nice photos and let these lead them to the pages of their interest. The unique border-to-border layout assigns about half the screen surface to images. Just take a look at the site and let me know what you think of the design.

Doklab website -  project page

Creating a good website as fast as possible

As with most projects, I started with defining requirements for functionality and style. The long list was sorted by importance. The work was divided in phases in such a way that it could be ended after each phase of two weeks, like in Agile projects. This way, after each phase I delivered release-ready results and, more importantly, we could use the insights we gathered during the project in following phases. That led to leaving some features out that were considered relevant at the start and adding some nice extras later, such as the image galleries.

Sketching, prototyping, building

With the requirements set, each project phase consisted of drawing sketches. Pen and paper are still the most important tools for the design process: it allows for making extremely quick idea generation, iteration without getting stuck in fixed patterns provided by software tools.

A4 Sheets with a 4x3 browser window layout template with my website design sketches on them.

For each screen I took the most viable ideas from my sketches and used these to build clickable prototypes. Prototypes provide a sense for sizes, style and interaction. At Doklab, these models invoked new ideas for functionality and refined directions for styling. That feedback was used in a more detailed prototype. After the design was approved, I proceeded building. For those interested in the nuts and bolts: I created a WordPress child theme with a completely customized style sheet. Whenever possible, I use premium plugins and when necessary I make custom PHP scripts. The site is multilingual, easily maintainable and has integrated social media and analytics without compromising visitors’ privacy.

Need to know more about making a website?

If your organisation needs a new website, let me know if you have any questions about how to get that done.