Website in the Design Process. Part 2

By this moment we’ve already finished a brand identity and are all set to start designing a website. Take a sneak peek into our process to see how single puzzles are turning into a picture.

The work starts way, way before the actual design. We are organized guys, so we start with the analysis and research. First, we learn brief templates that we’ve received before along with all the materials from the client. It can be anything: a pitch presentation or any other presentation, documents with essential information about product functionality or service, or even some sketches (why not?). It’s even better if we have an opportunity to test this product. It lets us be on the same page as the client.

But then we conduct our own investigation . There are some key points that help us to get a better understanding of the specific case:

- Field of activity

- Product/Service

- Competition

The first one helps us to build a strong knowledge basis. If a client wants to introduce to the world a new app with legal music for business usage, then we’ll search the internet to understand how music copyright works. The second one is crucial for moving forward. There is no chance to build a strong website without knowing what it’s all about. And the third one adds the context that we need – how this exact business will look among competitors and what we should be aware of.

Wireframing is a way to reflect a website's architecture without digging into such details as visual style or final texts. Wireframes are all about layout and user journey. The whole thing looks like grey rectangles and circles. But these are very important rectangles and circles because they help us to test the usability and find a weak point before we put our effort into design and development.

“It’s not important, let’s skip this” some may say. People are different, we understand it: some are spontaneous and impulsive while others prefer to have everything well-organized and under control. But when it comes to building websites that people will love and that will serve a certain purpose, it becomes clear that no work can be done without proper preparation. What can happen if we just skip this stage? If we start from hi-fi design just having a list of subpages, we can end up with an unclear page hierarchy or lack of content. Such issues can cause a delay in project implementation, misunderstanding, and chaos.

The only disadvantage of wireframes is that it may be hard for the client to imagine a future website without design. Anyway, wireframes should be approved before we move forward. Another important moment to be taken into account is asking the client for real texts for the website. Avoid using Lorem Ipsum just to postpone the decision-making.

What do we do next? We look for inspiration. Again. Our goal is to become easier as we are done with the branding phase and know our style constraints. But we must find all that inspirational stuff for the website anyway. That doesn’t mean that we must “steal” someone’s design, it means that we may take some layout pieces from one website and micro-interactions from another Pen Pineapple Apple Pen and get something new and good-looking. It’s very important for a designer to look through other designers' work because it helps to generate new ideas.

After we’ve gathered all the essentials (project objectives, structure, and style), we can start creating a website. But we shouldn’t go crazy and make all the pages at once. Our goal is to create one page (usually it is a home page) that will reflect the mood we want to convey. That’s okay if the designer has a brilliant idea for e.g. “Our Team“ page and wants to add it to the concept – good ideas must be shown.

But we can’t create the whole website at this stage. What if we have to make some revisions after the presentation, even small ones? It is becoming easier if we use components and styles but it’s time-consuming and demotivating for a team.

It is better to start from 1-2 (sometimes 3) strong and well-thought-out concepts to choose the best one and let it evolve later.

Where would we go without developers? We must talk to them and make sure that the design we want to show the client is safe enough and generally implementable. Of course, it doesn’t mean that we must cut down all the creative parts of it. It’s all about the discussion which should lead us to an agreement. A designer can either simplify the design a bit or prove that it must remain as it is. Every option is good, the point is that the team must understand where decisions come from.

This is the moment when the client sees his future website for the first time. Of course, he has seen and approved the structure and probably knew our ideas. But this moment is thrilling anyway and we can’t screw it up.

Our duty is to present the concept in a way that will leave no room for saying things like “Why these colors?“ and “I don’t like it“. We must tell a story behind each concept (remember that we may have a few), what we want to show, and what emotions we want to evoke. It’s also important not to focus only on aesthetics, but to tell how this exact design will help the brand to stand out.

The client may approve one of the concepts the way it is (perfect, right?), but that’s fine if he wants to discuss it a bit or even has some minor revisions. They say that the truth is born in dispute, but we’ve adjusted it like this: a great website is born in dialogue.

When we are happy with the main page, we can continue with other pages. It is very important to keep the client informed about the next steps – he must know what pages we’ll be designing next. And probably he will want to have a look at our progress somewhere in between.

There is also a very important aspect that can either make work smooth and nice or turn it into a nightmare. Do you remember a paragraph about wireframes? We’ve said that it’s better to avoid using Lorem Ipsum and so on. It’s becoming even more crucial at this stage because we are getting closer to development and don’t want any unwelcome surprises like delays in production or irrelevant texts later.

At this stage, we are passing the prototype of the whole website to developers to understand if everything is OK and can be implemented relatively easily. And like we did it before – we should discuss the website to reach an agreement. Then we can show the whole thing to the client but only after we find a happy medium with developers.

It is an exciting moment that the client has been waiting for so we must do our best to make it smooth. We find it obvious, but the design must be presented as a prototype, not a JPG. It’s a trifle, but it can ruin the whole experience. If we want to have some cool animations on the website, it is a good moment to show them too.

It is also important to explain our choices to minimize the risk of unwanted revisions. But if there are some, they must be gathered in one document so we can continue designing according to that list. It is also necessary to make sure that all the texts are good. The client may want to correct something a bit, but we must provide him with some character limitations.

After the design is approved by the client, we can pass it to the development department.

It’s better to be prepared for this critical moment. Designers must gather all the assets according to our internal system and finish all the necessary elements states, empty states, edge cases, and so on. Remember that handover is a process, not a single action. Even if we do everything according to some checklist, the dev team may need something 2 weeks later and that’s a natural thing.

We believe that clear processes and good communication are the keys to a project that clients can be proud of. But this journey isn’t finished yet. It will be continued in the development department. Stand by!