Tips for Setup Clean UI Project
In making a UI Design project, we need to have some plans and preparations. This preparation is not only in the form of a visual idea, hence we also need to set up our project as neatly as possible so that we can enjoy the work and we have a strong motivation to work on our project.
There are some tips from me, as a junior UI Designer to setting up your UI Projects clean.
Figma provides a Page feature in it. We can add multiple pages to the project that we create. Therefore, we need to maximize this feature so that the process of designing a UI Design becomes easier and neater.
a. Cover
The cover is the page where you can add your thumbnail for the file of your projects. This feature makes you find out the project that you want to work on.
b. Lofi
Not like Lofi hip-hop, but this Lofi means “Low fidelity” User Interface. Lofi UI is a wireframe that you can lay out your website/app design at a low fidelity level. This can make it easier in making the high-fidelity User Interface.
c. Design System
One of the most important things that use to be forgotten by the junior designer is Design System. Design System is a collection of reusable UI components (designcode.io). A design system is very important for us. It makes it easier when we want to make a lot of designs. We can just pull our design from assets to the hi-fi design and it definitely makes us simpler and easier to do design (and it can help the front-end engineer to work simpler)
d. Hifi
This page will contain a design that already has a good visual level. Hifi or “High Fidelity” Design is a design that will be coded by the development team (web/app engineer) and will be used by the user. On this page, we only do drag and drop components from the design system that we created and we will adapt them to the design Lofi (layout) that we have created.
e. Moodboard
Moodboard helps us in gathering ideas for creating User Interface design. We can look for design inspiration from many websites, such as dribbble.com, behance.net, and pinterest.com. Those designs can help us to create our design for our project.
f. Archive
When we work on our project, there will definitely be revisions from our client or from ourselves. Therefore, we must have an archive page to store the revised design form. Why should it be put on the archive page? why wouldn't we just delete it? Because later if the clients want the design back to the first design, we don't have to redesign the first design, we just drag and drop it from the archive to the design system page, and we can use that design again
Those are some tips from me. Remember, I’m just a junior UI Designer that still learning UI and UX Design in college and courses. If you have some corrections or feedback, let’s just discuss it in the comment section!
