Need a discount on popular programming courses? Find them here. View offers

< Back to All Roadmaps

UI Designer Roadmap

You will learn how to get started in the world of designing beautiful apps and websites people love to visit.

  • Interest in art and design in general is always helpful
  • Understanding of the digital world - Apps and websites

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)
Submitted by Jack 5 years ago 6k+ views August 11, 2017 discuss
Free Video Beginner

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)
Submitted by User5 years ago
Free Video Beginner

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)
Submitted by Jack 5 years ago 4.3k+ views September 9, 2017 discuss
Paid Video Beginner

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
Prem Kumar 10 points
2 years ago

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

report

Please tell us what's wrong with the comment. Thanks.

Jonas Meyer
Jonas Meyer 10 points
2 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

report

Please tell us what's wrong with the comment. Thanks.

Marwa 1213
Marwa 1213 10 points
4 years ago

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

report

Please tell us what's wrong with the comment. Thanks.

We recognized you are using an ad blocker.
We totally get it.

Still, ads support Hackr and our community. That's why we give you the option to donate to us, and we will switch ads off for you.

Already a member?