Website in the Design Process. Part 2

#design#workflow

This is the second part of our design workflow. This time, we delve into the main design topic - the website process.

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.

Where do we start

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: pitch presentation or any other presentations, 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.

Wireframes

Wireframing is a way to reflect a website 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. And 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.

References

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.

First concepts

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 will have to make some revisions after the presentation, even small? 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 concepts to choose the best one and let it evolve later.

Initial dev review

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.

Concept presentation

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 wanted to show and what emotions we wanted 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.

Other screens

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.

Big dev review

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.

Final presentation

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 JPGs. 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.

Design-to-dev handoff

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 client can be proud of. But this journey isn’t finished yet. It will be continued in the development department. Stand by!

Get a quote

Stop thinking of something when you can have it! Contact us now and make a rocket out of your website.

OR SEND US A NOTE VIA EMAIL