09/18
Design System &
Wireframes in Figma
During most of 2020 with all the pandemic lockdowns, I took different on-line courses in visual design enough to be dangerous as a developer. My goal should be to create designs that are as objectively good as possible, using design systems, well-established principles and techniques that translate well to code. Starting from the dreaded blank page, I work my way through UI patterns, inspiration, colors, typography and practice in Figma for every step. At the end of the course, I designed an entire app from scratch, from the landing page to the mobile version and create a design system that will bring everything together.
Roles:
UI/UX Design, Visual Design
Tools:
Figma, Adobe Photoshop
Design System
I build a design system that connects designers, coders and stakeholders. This is an effort that have become increasingly popular in teams for the past few years. A design system is a language that bridges design and code, and is a perfect starting point for developers learning more about design and vice versa.
The next images shows some of the design system rules for important parts based on the mobile app.
Typography in San Francisco Display for iOS mobile app.
Color language based on Material UI tool and palettes.
Wireframes
Wireframing is an important aspect of designing webpages and mobile apps.
A wireframe is like a blueprint of how the application's structure will look like.
The following images are several wireframes with light and dark themes using
multiple UI patterns and color contrasts.
Basic light theme wireframe.
Basic dark theme wireframe.
Using a similar color pallet and opacity a new light theme is created .
Using a new UI pattern and color pallet a third light theme is created.
With a new contrasting color pallet a second dark theme wireframe is built.
Wireframing Presentation Example
Example of a presentation slide to showcase a UX/UI wireframe study.