Categories
Uncategorized

Website in the Design Process. Part 2

View the original post

Cover design by https://dribbble.com/mariablaze

This is the second part of the design workflow. This time, we delve into another topic — the website design process.

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

Where do I start

The work starts way, way before the actual design. As an organized girl, I start from the analysis and research. First, I learn brief templates that I’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 to have an opportunity to test this product. It allows being on the same page as the client.

But then I conduct my investigation 🔎. There are some key points that help to get a better understanding of the specific case:

  • Field of activity
  • Product/Service
  • Competition

The first one helps 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 I’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 essential context — how this exact business will look among competitors and what I 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 to test the usability and find a weak point before putting the effort into design and development.

“It’s not important, let’s skip this” some may say. People are different, I 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 I start from hi-fi design just having a list of subpages, the whole story can end up with unclear pages 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 to do next? Look for inspiration? Again. The goal is becoming easier as the branding phase is done and style constraints are known. But I must find all that inspirational stuff for the website anyway. Steal like an artist: 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 all the essentials are gathered (project objectives, structure, and style), I can start creating a website. But going crazy and making all pages at once can cost you valuable time. The goal is to create one page (usually it is a home page) that will reflect the mood of the whole website. That’s okay if you have a brilliant idea for e.g. “Our Team“ page and want to add it to the concept — good ideas must be shown.

But it’s better not to create the whole website at this stage. What if the client would like to make some revisions after the presentation, even small? It is becoming easier when using 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? It’s good to talk to them first and make sure that the design is safe enough and generally implementable. Of course, it doesn’t mean that all the creative parts must be cut down. It’s all about the discussion which should lead to an agreement. As a designer, I 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 the ideas. But this moment is thrilling anyway and it’s better to not screw it up.

The aim 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“. As a designer, I must tell a story behind each concept (remember that there may be a few), what I wanted to show and what emotions I 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 I’ve adjusted it like this: a great website is born in dialogue.

Other screens

When I am happy with the main page, I can continue with other pages. It is very important to keep the client informed about the next steps — he must know what pages I’ll be designing next. And probably he will want to have a look at 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? I’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, the whole website prototype is being passed 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 I can show the whole thing to the client but only after I find a happy medium with developers.

Final presentation

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

It is also important to explain the choices to minimize the risk of unwanted revisions. But if there are some, they must be gathered in one document so I 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 it’s better to provide him with some characters limitations.

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

Design-to-dev handoff

It’s better to be prepared for this critical moment. Then, all the assets should be gathered according to the internal design system (or your own if you don’t work in a team) and all the elements states, empty states, and edge cases should be finished. Remember that handover is a process, not a single action. Even if everything is done according to some checklist, the dev team may need something 2 weeks later and that’s a natural thing.

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


Website in the Design Process. Part 2 was originally published in Muzli – Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.