< 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 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)
Add
My Courses
Submitted by Pawan 1 year ago 63 views
Free Beginner
Better Web Typography in 13 Simple Steps (creativebloq.com)
Add
My Courses
Submitted by Rajat 1 year ago 99 views
Free Video Beginner
Building Better UI Designs With Layout Grids (smashingmagazine.com)
Add
My Courses
Submitted by Rajat 6 months ago 54 views
Free Beginner

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)
Add
My Courses
Submitted by Jack 1 year ago 69 views
Free Video Beginner
Wireframing for Beginners (uxmastery.com)
Add
My Courses
Submitted by May 1 year ago 76 views
Free Video Beginner

Resource

12 Wireframe Examples

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)
Add
My Courses
Submitted by Pawan 1 year ago 110 views
Free Video Beginner
Getting Started With Sketch (switchtosketchapp.com)
Add
My Courses
Submitted by Rajat 6 months ago 77 views
Free Video Beginner Sketch 3

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

Design Better User Interfaces (coursera.org)
Add
My Courses
Submitted by Jack 1 year ago 38 views
Paid Video Beginner
Introduction to UI Design (coursera.org)
Add
My Courses
Submitted by Jack 1 year ago 25 views
Paid Video Beginner

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.

Kickstart the conversation!