User interface design is a craft that involves building an essential part of the user experience; users are very swift to judge designs on usability and likeability. Designers focus on building interfaces users will find highly usable and efficient. Thus, a thorough understanding of the contexts users will find themselves in when making those judgments is crucial.
Before starting your design, you need thinking about the teams you'll collaborate. It will help to build a vision and making sure everyone looks in the same direction.
Here’s a quick list of the disciplines that can be represented in your team to create an effective design:
- Designers to define the visual elements of the system
- Researchers who can help you understand customer needs
- Front-end developers to create modular, efficient code
- Product managers to manage process, performance and quality of the product
- Leaders to ensure and align the vision throughout the project
Step 1: Gather data to get a full picture of the project
Like any product in a design process, it’s important to do your research. Who will be using your design system and how will they use it? These goals will evolve with time and it’s normal. We just have to make sure that changes are broadly communicated.
The process can include:
- From branding to UI: you should define your target audience, take the time on proper marketing of the product and analyze competition. On the basis of all that data you will have branding elements and the look and feel about the branding.
- Read UX Research documentation and wireframe about the project
- Requirements gathering via task analysis, tech planning, and convention setting
- Product tours to immerse in as-is products and in-flight designs to which the system will apply, taking screenshots and notes.
Step 2: Design screens first
The journey to creating a design system starts with designing actual screens first. It's essential to decide the look and feel of your design. Based on the target user and product’s requirement, we define layout style. Make references from Dribbble, Behance or other showcase sites to catch up with the current design trends.
After you have some actual screens for the project, you will send them to your leader or product manager and receive their feedback to modify them
Step 3: Build a Design System (Read more)
Step 4: Start designing screens according to the wireframe
After finalizing the design system, you will base on them to continue to design UI for the project. Keep interfaces always consistent and simple. Every element must serve a purpose. Focus on hierarchy and readability and concentrate on maintaining brand consistency.
Step 5: Get feedback from your leader to finalize them
Figma, Sketch, Adobe XD