Plan the process

In the world of design, a certain discussion has been going on for years, which will probably never end with a clear conclusion.

This discussion concerns what the process of designing the interface and its implementation should look like.

• Should you start designing in figma (or a similar tool) and then turn it into code?
• Or maybe it's better to start programming right away and not waste time and money designing in figma?
• Or maybe you should take a step back and prepare sketches on paper?

There is no one-size-fits-all solution and it is fair to say that it is largely a matter of personal preference and the resources at your disposal.

However, in my experience one thing always works:

If this sounds a bit contradictory and unclear to you, don't worry, everything will become clear in a moment.

Perfect flow (for me)

I will not convince you that the scheme that I and my team use is the best possible way. It's just the way we prefer, but as I wrote above, it's largely a matter of preference.

So you can use it as inspiration and at the same time adapt it to yourself.

1. Primary questions first

We talked about it in the lesson about primary questions - an absolutely key element, without which there is no point even starting the project, is finding answers to these 2 simple questions:

• Who is the target group?
• What is the main goal of the project?

2. Secondary questions second

After finding the answer to the primary questions, it's time to think about secondary ones.

• What are the secondary goals? Could it be, for example, creating the author's personal brand?
• What will be the perfect flow for the user? In what order and from what pages he should he go? And what pages should he go to?

3. Draw it on paper

According to the principle "don't start with the roof", we should avoid working on details at the beginning of the process, and focus entirely on laying the foundations.

As we discussed in the previous lesson, a simple trick to avoid the pitfall of working on the details is to draw your first design on a physical piece of paper.

4. Choose a project personality

If we already have a well-defined target group, it should be quite easy for us to determine the best personality of the project.

5. Prepare Design System

The selection and preparation of the Design System is the next step, without which it is not worth starting work.

6. If you need - design it in Figma

In my opinion, this is not a mandatory point. However, if these are your or your team's preferences - transfer your project from a piece of paper to Figma or another tool to pass it on for coding in this form.

7. Start coding as soon as possible (i.e. when you complete the above points)

To speed up your work even more, you can choose a library that is adapted to your Design System. For example, Material Minimal has libraries dedicated to Bootstrap and Tailwind.

All right, we now have the necessary theoretical foundations. So it's time to get down to business and focus on the Material Minimal Design System 🚀