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 a good UI designer you don’t have to be well-versed in all the graphic design principles, but there are some design fundamentals that are applied a lot in UI design and are an absolute must to master. The Hackr community collected hundreds of tutorials in this area. Here are a few to get you started.

A virtual Crash Course in Design Thinking (dschool.stanford.edu)

Resources

10 Great Google Fonts Combinations

Flat UI Colors

Material UI Colors

Wireframing

In order to get started with wireframing, you need to understand the structure of the design at a high level. This applies to apps and websites. Represent the structure in the simplest way possible. In our experience, you can get started with paper, whiteboards, or tablets instead of expensive cloud-based wireframing tools. Here are a few tutorials to help you get started. Just remember, wireframing is more about ideation and research and less about presentation.

Wireframing for Beginners (uxmastery.com)

Design Tools

Our designers shared several of their favorite resources for learning design tools. The industry standard remains with Adobe, so we recommend the Adobe Experience Design and the ever-popular Adobe Creative Suite as potential starting points. Professional designers also regularly rely on Sketch, so take a look into it to get started.

UI Design Basics

Once you have a good grasp of the basic design principles and feel comfortable with your favorite tools, you're ready to get started with the basics of UI. Our community prefers YouTube as a starter in this area, and we found several additional resources as well. Our research shows beginners learn best from engaging sessions and projects, so try out a few to find the right fit for your learning style.

Introduction to UI Design (coursera.pxf.io)

Project

Become a better designer in 100 days.

Additional Design Resources

The designers at Hackr use a range of additional tools and resources in their daily lives. While some of the courses and tutorials mentioned earlier cover these topics, you'll want to familiarize yourself with user feedback, design testing, and quality assurance before applying for jobs in the field. Here are a few additional design resources our team found helpful.

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

2 years ago

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

Jonas Meyer

10 points

3 years 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

4 years ago

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