WebDesign Tutorial - Plan the process
This is part 19. You can find the part 18, Design System, here
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: Start coding as early as possible (but not earlier!)
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 ๐
Next part - About Material Minimal
Material Minimal, which is basically Material Design on steroids can be found here on Figma.
Material Design for Bootstrap is a UI Kit, that uses Material Minimal, check it out here.
And TW Elements, our newest child is based on Tailwind CSS. Check it out!
Subscribe to my newsletter
Read articles from Keep Coding directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by