Creative process behind an interactive website

However, if you take time to continuously research and ‘tune-into’ a specific level of quality of those creative websites, you’ll notice that most of them are very harmonious. Every element, every animation or typography choice is somehow synchronized, and there is an underlying story that makes you feel delighted. You realize that this digital creation has a soul – a concept.

When we designers use the word concept, we are usually talking about design that is made for fun or practice (and rarely sees the light of the day). While this is not inherently wrong, I would like to define what kind of concepts we’ll be discussing in this article.

The concepts I’ll talk about can be defined as sets of emotional attributes (clean, bold, bright) or simple statements whose meaning is apparent throughout your creation. A good example of this would be a case study website we created for one of our projects. It clearly communicates the message that interactive installations have been made for the largest museum in the world. And the concept behind this microsite is simple – ‘big’.

How to create a strong concept?

To create a good concept for real-life client projects, we first have to have to tick a few checkboxes.

Info about a client’s brand

Fully understanding what our client’s brand is about is really useful while you’re in the process of creating a concept. Ideally, your concept and your client’s brand should work hand in hand or at least not conflict with each other. Developing digital branding for a client alongside a website is an ideal case as it enables you to create a concept that encompasses both the brand and the creative website.

Website goals

Everything that’s being designed needs to be able to solve a problem. In other words, it needs to have a set of defined goals. This is something you can define with a client via a website brief or by conducting a structured workshop.

Target audience

A concept is something that should invoke emotion in the user and add a sense of depth to the project. That is why you should really know your audience and have a general idea of how your concept could be received. Think of it as preparing a meal for a friend – if you know they don’t like certain types of food, you probably won’t use them in your meal.

Draft content

Why draft? Well, if you’re working on a project where the client provides the content, it is unrealistic to expect that it will be entirely web-ready right from the get-go. That is why you need to have a designer or someone from your content team to do a content review. Final content will be that aspect that will help make your concept more concrete.

Let’s do an analysis

Depending on the brief you received and the provided content, you should be able to list a couple of sentences or words that could form the basis of the concept. Is your website about architecture? Perspective imagery and unusual grid can convey the order and innovative approach.

But, what happens when you have an industry that is not easily visualized? For example, if you work for a client in the financial industry or venture capital industry, there might not be an immediate visual association that would work for the average user. This is a situation when a concept can be described as a series of attributes (as we’ve described before) such as ‘trustworthy’, ‘stable’, ‘polished’, ‘serious’.

Every element you choose from this point onward needs to be in line with those attributes, as they’ll form a cohesive impression. A good example of this is the Omonia website we designed and developed. As you can see, it doesn’t have an easily describable concept, but you can see it’s definitely there – clean, speed, digital, abstract. Every element used is deliberate, from the typeface and layout to the choice of imagery.

What does the process look like?

To keep it as direct and clear as possible, I’ll use one of our latest projects as an example. Here’s the deal – a client approached us with and said they wanted us to build a website that would facilitate donations for the reforestation of fire-devastated areas in Dalmatia. The project I’m talking about is Boranka, the largest reforestation campaign in Croatia.

Their campaign started by collecting the ashes of burnt trees to create crayons that can be used to draw a tree. The drawing of the tree would then be uploaded via our website and it would motivate users to attach a small donation in addition to uploading a drawing.

1. Brainstorming for a concept

There were quite a lot of possible ways to approaches this project, so we gathered the whole team that worked on the project to contribute with their own ideas. This included back-end developers, front-end developers, designers and experts from our strategic partnerships department.

After the brainstorming session, we agreed upon a concept – we’re going to build a 3D forest. We even came up with a rough user flow we could iterate later on, in order to make sure we covered every edge case.

2. Defining a final user flow and wireframes

Even though this was imagined as a creative website, it did have some specific tasks it needed to accomplish – it needed to facilitate donations that will help finance the process of reforestation. That goal is why we integrated an external payment service to support donations from a technical aspect.

That being said, donations were not mandatory for users as we didn’t want to prevent them from planting a tree, but we did entice them to donate so that particular tree they planted in our virtual forest would also be planted in the real forest in Dalmatia.

To help our front end-developers, we designers created a set of wireframes for the website as it needed a bit more details that would set the foundation for the prototype.

3. Moodboard and art direction

At the same time, we also worked on the visual look and feel of the website. By defining a moodboard, we based our approach around simple tree models in the virtual space.

From that point onward, we started creating early versions of UI elements, so our front-end developers could build a prototype with a higher fidelity. We did this as it would enable us to do some more fine tuning during the production phase.

You’ll notice that all those micro decisions are guided by a simple concept – let’s make a 3D forest where you can plant your trees in. Having a concept defined right from the start keeps everybody anchored to a common understanding, and it also makes all decision-making much easier because of a well-defined direction.

4. Building a prototype

As soon as we agreed on the initial concept (which also included a rough flow and basic wireframes), front-end development started working on the prototype. Prototyping is an excellent way to reduce the chance of encountering any kinds of risks later in the project risks and allows us to tackle unknown tech difficulties. In this particular case, front-end developers needed to test the process of importing and displaying pre-made tree models. They also used the prototype to sync the color scheme with the previously defined art direction.

5. Fine-tune & polish

This phase is a collaboration phase, and it’s a bit different than the one that usually occurs during your traditional website-building process. For this phase, we had designers and developers sit together in a couple of short feedback sessions whose goal was to nail down element placement, animation eases, performance optimizations… After those sessions, developers continued with their part of the project, and our designers went on to work on missing assets and other visual modifications that would be incorporated into the finished website.

The concept we defined in the beginning was extremely helpful here, as it guided us through the process of creation of all small UI elements. Every single element of the website can be connected with forest theme, and this reinforces the concept even further.

A concept is the basis of innovation

I always say this because concepts are grounded in an idea rather than any particular medium (web, film, print or anything else). Before I end, I just want you to keep this thought in mind before you start working on your next project – strong creative concepts are sometimes easier to feel rather than describe with words.

In any case, I hope this gave you some insight into how web concepts work and how they can tie everything together.