UI Design Roadmap 2023
Tags: uidesign, design, ux, learndesign
Published: 2023-02-16 10:55:05

Hello struggling newbie, here is the roadmap to becoming a UI designer in 2023.

**Step 1:** Identify your why. Why do you want to become a UI/UX designer? 

**Step 2:** Understand UI design.
https://www.interaction-design.org/literature/topics/ui-design
https://uxplanet.org/what-is-ui-vs-ux-design-and-the-difference-d9113f6612de

Visual Understanding
https://mobbin.com/browse/android/apps
https://pageflows.com/
https://godly.website/
https://nicelydone.club/

**Step 3:** Learn the principles of design
https://lawsofux.com/
https://humanebydesign.com/

Typography: https://uxdesign.cc/10-principles-for-typography-usage-in-ui-design-a8f038f43ffd

Grids: https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/

Color: https://uxdesign.cc/all-you-need-to-know-about-colors-in-ui-design-theory-practice-235179712522

Selecting assets: https://xd.adobe.com/ideas/process/ui-design/effective-use-images-graphics-ux-design/

Using icons: https://blog.tubikstudio.com/small-elements-big-impact-types-and-functions-of-ui-icons/

Buttons: https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112

Forms: https://medium.com/design-with-figma/ui-designers-guide-to-creating-forms-inputs-b6516f366a93

Accessibility: https://uxdesign.cc/accessibility-guidelines-for-a-ux-designer-c3ba775539be

Inclusivity: https://careerfoundry.com/en/blog/ux-design/beginners-guide-inclusive-design/

Consistency: https://careerfoundry.com/en/blog/ui-design/the-importance-of-consistency-in-ui-design/

**Step 4:** Design guidelines
[Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/) - by Apple
[Material Design Guidelines](https://m3.material.io/) - by Google

**Step 5:** Study design system
[Atlassian design system](https://atlassian.design/)
[Primer design system](https://primer.style/)
[Spectrum, Adobe’s design system](https://spectrum.adobe.com/)
[Carbon design system](https://carbondesignsystem.com/)

**Step 6:** Get familiar with trends and styles
[Flat design by IDF](https://www.interaction-design.org/literature/topics/flat-design)
[Skeuomorphism by IDF](interaction-design.org/literature/topics/skeuomorphism)
[Material design](https://m2.material.io/design/guidelines-overview)
Dark mode

**Step 7:** Get some essential design tools
[Figma](https://www.figma.com/)
Adobe XD
Sketch

**Wireframe**
Whimsical

**Motion UI Design**
Principle
ProtoPie

**Task Management**
G.Cal
Notion

**Communication**
Slack
Loom

**Step 8:** Design Resources
Free Fonts
https://fonts.google.com/
https://www.fontshare.com/
https://fontesk.com/
https://fontspark.com/
https://www.fontsquirrel.com/

Free Photos
https://unsplash.com/
https://barnimages.com/
https://negativespace.photoshelter.com/index
https://www.pexels.com/

Remove Background
https://www.remove.bg/

Free Illustration
https://www.drawkit.com/
https://icons8.com/illustrations
https://grafikstash.com/glaze/
https://undraw.co/illustrations
https://www.manypixels.co/gallery

Free Icons
https://feathericons.com/
https://iconmonstr.com/
https://www.orioniconlibrary.com/all-icons
https://iconic.app/
https://iconscout.com/
https://piqodesign.gumroad.com/l/iconly
https://thenounproject.com/
https://boxicons.com/

Inspiration Sources
https://dribbble.com/
https://mobbin.com/browse/android/apps
https://www.awwwards.com/
https://siiimple.com/
https://www.behance.net/
https://minimal.gallery/

**Step 9:** Practicing Design
https://www.dailyui.co/

**Step 10:** Picking a career path
Make a good portfolios
Search internship opportunities

Move to job
This is an overview of a book written by Michael Filipiuk. I just make a summary and gather all the links together to help the struggling people.

Credit: Michael Filipiuk

Follow me on [dribbble](https://dribbble.com/Hachib) | [Behance](https://www.behance.net/mdhachib02)