Develop and standardise the graphical interface of the product.
At this stage of our design process we begin to develop the graphical interface of the product. Here we apply everything we have learned from users and stakeholders, and proceed with exploring ways to design interfaces that are consistent and scalable.
Here are all the stages we cover in the visual and UI design phase:
- Visual Design
- UI Animations
- Design System & UI Library
- Design Specification For Developers
- Let's talk!
- Next Stage
Once I have a solid understanding of how the user flow works, it’s time to think about how we want the product to look and feel like. A great way to start with that is through compiling a moodboard which is a diverse compilation of design inspiration to help us lay out our options in front of us.
Mockups are a visual depiction of how the user interface will look like.
They can be low or high fidelity, static or interactive, single or multi-page. We create our visual style based on branding guidelines provided by stakeholders or come up with a style from scratch.
You can check
I also deliver short animations as part of our UX design in order to enhance the overall presentation and interactivity of a product. UI animations show the main interactions, transitions, and flows within the system.
Design System & UI Library
A Design System is a collection of iterative components and guidelines that explain how these components work. Or more simply, it’s a set of standards for design and code that reinforce design consistency.
A design system features the following components:
- Style and design guidelines - icons, typography, colors, spacing, and illustrations.
- UI libraries form design elements, images, navigation, and overlays.
- Content style guide - voice, tone, language, principles and objectives.
I'm passionate about design system to bridge the gaps across design and development to make reusable components and more
Design Specification For Developers
Design specifications are developed at the end of the design phase and are intended to be used by developers. These documents communicate details about the UI – such as colors, typography, and measurements – and information about the product – such as user flow, behavior, and functionality. Developers use this document to build the product to the designer’s specifications.