UI Designer Roadmap Curated by the Programming Community

What you'll learn

Design fundamentals- Color theory, Typography, Grids
Wireframing and sketching
Design tools (Sketch, Adobe Xd)
UI Design Basics

overview

This roadmap aims to give a good starting point if you are willing to be a digital design also referred to as a UI Designer. UI Designers are tasked with designing beautiful and functional interfaces that will help users do certain tasks while providing them a smooth and delightful experience. We will cover topics from design basics to wireframing and creating fully functional interfaces.

Design Fundamentals

To be good UI designer you don’t have to be well-versed in all the graphic design principals but there are some design fundamentals that are applied a lot in UI design and are an absolute must to master.

The Fundamentals of Understanding Color Theory (99designs.com)

Better Web Typography in 13 Simple Steps (creativebloq.com)

Unapproved

Building Better UI Designs With Layout Grids (smashingmagazine.com)

Resources

10 Great Google Fonts Combinations

Flat UI Colors

Material UI Colors

Wireframing

Wireframing is understanding and visualizing the high-level structure of the design (app or website) and representing it with the simplest means possible.

Wireframing can be done on paper by simply sketching out the design or you can use any of the amazing tools.

Remember, wireframing is more about ideation and research and less about presentation.

Web Design Tutorial: Getting Started with Wireframes (codementor.io)

Wireframing for Beginners (uxmastery.com)

Design Tools

Adobe Experience Design and Sketch are two of the most popular tools in the industry, among many others. Do a little bit of research and tinkering around with some of them and pick the one you like the most.

Adobe Experience Design Tutorials (youtube.com)

Getting Started With Sketch (switchtosketchapp.com)

UI Design Basics

Once you have a good grasp of the basic design principles and are hands-on with any of your favorite tool you are ready to start your first digital screens.

Here you need to learn how you can divide an interface into different UI component and how you are going to distribute the available content among those components

User Interface Design Specialization (coursera.pxf.io)

featured

Introduction to UI Design (coursera.pxf.io)

Project

Become a better designer in 100 days.

Feedback

This is included here for a reason. Remember, everyone is a designer! Everyone has his own way of using digital products and personalizing them to their taste. Hence taking feedback, screening it and incorporating it is a skill no designer can compromise on.

And remember, it is never too early to take feedback.

Resources

Effective Design Feedback

Take Design Feedback from Non-Designers

How to follow this roadmap?

It is advised to to through all of the section provided in this roadmap and really try to understand what design is and how it is perceived by world.
UI Design is a very subtle art and hence it needs a lot of care and perfection.
Try to attempt all the assignments and take feedback from your friends and family and everyone around on what they think of your work.
Spend some good time completing this roadmap and once you are comfortable with designing we will suggest you go through our UX Designer Roadmap, which is a lot of the times the next step in the career of a UI Designer.
Have fun learning and Happy Designing!

Discuss this roadmap:

Ask a question or write your feedback/review of this roadmap or tell anything to the people considering this roadmap.

Prem Kumar

10 points

1 year ago

I've heard Figma design tool is good too, do consider adding it! Thanks for the roadmap! :)

Jonas Meyer

10 points

1 year ago

I'm glad you mentioned the impact on user emotions - which is largely overlooked by many developer-led projects that do well technically but completely miss the opportunity to make the user feel good - something that can pay huge dividends in the form of loyalty, engagement and follow-up recommendations. mailchimp figured it out!

Check https://axisbits.com/blog/The-Roadmap-for-Good-UI-Design

Marwa 1213

10 points

2 years ago

اشعر ان هذا الموقع رائع