Read on Twitter
So many newbies kept on asking how and where to start from in learning UI UX.
I designed a pathway guide to help.
@_shyone @imasuen_design @namnsoukpanah @Aderinsola_O @EmmanuelCAdigwe @pixelDahn @Abiola_Usman @ukauwa_david @marvinographer
1/n
I designed a pathway guide to help.
@_shyone @imasuen_design @namnsoukpanah @Aderinsola_O @EmmanuelCAdigwe @pixelDahn @Abiola_Usman @ukauwa_david @marvinographer
1/n
Getting Started
Start by familiarizing yourself with what UI Design is, where it originates from, and what are some common tools and principles tools that the field relies on.
2/n
Start by familiarizing yourself with what UI Design is, where it originates from, and what are some common tools and principles tools that the field relies on.
2/n
Design Patterns
Learn how to recognize common design patterns and best practices for creating your own UI components within a design system.
3/n
Learn how to recognize common design patterns and best practices for creating your own UI components within a design system.
3/n
Design Principles & Visual Hierarchy
Understand how the order of elements on a page impacts how a user views and interacts with it. Z-Pattern, F-Pattern, Visual Hierarchy, and White Space Gestalt Principles of Grouping
4/n
Understand how the order of elements on a page impacts how a user views and interacts with it. Z-Pattern, F-Pattern, Visual Hierarchy, and White Space Gestalt Principles of Grouping
4/n
Layouts and Grids
Learn how to create visual alignment and harmony by utilizing grids.
5/n
Learn how to create visual alignment and harmony by utilizing grids.
5/n
Color
Learn how color can impact the look and feel of a product and its interface.
6/n
Learn how color can impact the look and feel of a product and its interface.
6/n
Typography
Look at different type classifications, styles, and learn how to choose the right typefaces.
7/n
Look at different type classifications, styles, and learn how to choose the right typefaces.
7/n
Iconography
Learn how to use icons to create hierarchy, highlight information, and help express meaning in a product.
8/n
Learn how to use icons to create hierarchy, highlight information, and help express meaning in a product.
8/n
Responsive Web Design
Examine best practices for creating designs that scale across different devices, viewports, and display resolutions.
9/n
Examine best practices for creating designs that scale across different devices, viewports, and display resolutions.
9/n
User Interface Design Process
Moving on to the visual design of your screens - developing a moodboard and adding more complex styling to your screens based on your established style guide
10/n
Moving on to the visual design of your screens - developing a moodboard and adding more complex styling to your screens based on your established style guide
10/n
User Experience Design Process
It's difficult to find a UI design role that doesn't require knowledge of UX design. Explore the key steps in the UX design process, from conducting research and designing personas to sketching designs and testing them out on potential users.
11/n
It's difficult to find a UI design role that doesn't require knowledge of UX design. Explore the key steps in the UX design process, from conducting research and designing personas to sketching designs and testing them out on potential users.
11/n
Prototyping
Create your very own high fidelity prototype and learn more about rapid iteration.
12/n
Create your very own high fidelity prototype and learn more about rapid iteration.
12/n
Handoffs
Finish the course by learning how to hand off designs to other members of a product team.
13/13
Finish the course by learning how to hand off designs to other members of a product team.
13/13
There can be more to this. So feel free to add what's needed.
