How to really start your UI Design Project – step by step guide.
Confucius said that a journey of a thousand miles begins with a single step. Building UX/UI Design System is this kind of journey. It is often very hard to take the first step, but this article will guide you through the phase of a trip that helps you to start building yours.
First, Feel the Force Around You
You possibly read some articles with advice to start the project. Most of them encourage you to create a few directories, open Sketch or other design tool and set up colors, typography etc. In one sentence – build project design system. If you learned to start with this type of flow, here you will unlearn it. Creating design system is not a beginning – it is a result of initial creative process
We, designers, are creative professionals and creativity is our Force. Before we start UI Design project, we have to get some fuel.
Let’s begin!
The Creativity Awakens
Through the years of professional work, I have discovered that there may be a process that unleashes the creative force. It was formed spontaneously, but there is a magical consequence in it.
What if we could apply some design thinking inside wider design thinking process? This kind of inception gives the opportunity to build better UI.
1. Open your mind
Do not close thoughts on the assumptions you have. If you will close your mind and follow only paths you know, you may feel safer, but the final design may not be good enough. The right attitude – to expect unexpected, may bring inspiring results.
2. Understand the problem
I assume that you know what you are going to design, the wider UX design process has to lead you to this moment. You have got some materials like personas, user journey, use cases or stories.
Now you should start sketching. Pen and Paper always were the ultimate design tools. Take them and create the concepts of your UIs. This phase will help you visualize first ideas.
3. Explore
If you have already sketched a few ideas, you are ready to get some inspiration. Fortunately, there is a lot of great places on the web that helps us to discover great concepts. It is important to research what is currently available in the market, but also seek for trends that are coming in the near future.
If you do not have a digital place to collect inspiration I would like to you to try making it on Pinterest. Pinterest board creation is often the first thing I do before I start to search for great designs.
To find inspiring UIs you can simply search Pinterest collections. The unique value of the site is that it collects content from many sources. If you would like to find beautiful concepts elsewhere I recommend to find them on Dribbble.com, Uplabs.com or Behance.com.
Beware of cute designs that do not provide value. There are plenty of UIs that only look nice, but would not be a good app or website. It is good to remember that before you decide to add them to your collection. However, it always depends on what you seek. If it is just an interesting color composition or unique appearance of UI control – you may find the inspiration even in UI that is useless in general.
Always try to find inspirations in many different fields – color, UI style, iconography, UI presentation, typography or images.
4. Give yourself a break
Like in a design thinking process after intensive brainstorming you should make a break to clear your mind before the next phase. This will make your mind fresh and prepare it to discover the idea that is possibly the best one.
How long should be the break? If you have this comfort leave a project for a day – do it. It will be surely enough time to look a the project from a fresh perspective. However, the priority should be to focus the mind on something else. So if you do not have time to wait. Return to the project after 1-2 hour break.
5. Select
Your fresh mind will notice the patterns that will work and the elements that should not appear in the project. Try to browse inspiration board and analyze the collection of UIs. Delete the unwanted pins from your board.
It is good to add some comments that describe what you like in a particular concept – because you will probably return to the board regularly. Every time you fill stuck, go back and browse your collection – this may help you continue to back to the work.
If you would like to make some additional sketches it is a good time to do it now.
6. Prototype
Finally, you should feel ready to begin digital creation. Open your design tool. It may be Sketch, Adobe XD, Figma or even Photoshop. Create spontaneously a few UI pages of a solution.
It is good to make two or three versions based on the sketches you have done before. Let the idea crystalize.
Remember you are not building a design system yet. You are creating some possibilities that may be used later to design one.
7. Validate
Analyze how the elements of each concept work together and show them to people that are not involved in the project. Collect some feedback. If you create mobile app many tools let you upload artboards into the device to check how it looks in the real environment.
Show the most promising mockups to your team, then share it will your stakeholders. Let them choose favorite concept.
8. Decide or Iterate
When you or your client thinks that there is a need to create something else, repeat the process. If you are satisfied with the created concept, it is time to move the next level. Now, you can start preparing a design system!
Summing up
Starting UI design is always hard. Build good design system may be also challenging. This is why a good process that helps you to unleash creativity is extremely important.
If you would like to learn more about building creative mind I have discovered the article with a similar framework – The Pocket Guide to Creativity.
I am really curious what are the methods that you are applying when you start projects. Please let me know in comments. Thanks!
If you would like to read and share articles like this with other designers – feel free to join UX Misfits Community on Facebook. UX Misfits is a group of designers who would like to discover inspiring articles.
Similar articles: