How to learn

UX UI
designing
in 2024
80 Days Free Plan

Self learning guide for UX UI designer © 2024 by Sunil Kargwal

is licensed under CC BY-NC-ND 4.0

To understand the complete plan in better way, its recommended to

watch this YouTube tutorial video first.

 V1.0

#1 learn

figma tool
The initial step in your self-learning journey is mastering the basics of
the Figma tool, a versatile and intuitive platform used widely in UX/UI
design.

By becoming proficient in Figma, you'll gain the foundational skills

necessary to confidently embark on your design endeavors. This
includes understanding Figma's interface layout, learning how to
efficiently navigate its various tools and features, and grasping key
design principles within the context of this powerful software.

Acquiring these skills will empower you to take your first steps in
creating user-centric designs, enabling you to say, "Yes! I'm prepared to
start designing," with enthusiasm and assurance.

20 Days
#1 learn figma tool
01 Learn figma from YouTube
Learn Figma from YouTube by exploring resources such as Graphics Guruji's channel, which
offers valuable tutorials and insights into mastering this essential tool for UX/UI design.
Watching tutorials on platforms like YouTube is a fundamental step that allows you to
familiarize yourself with Figma's interface, tools, and functionalities.

By engaging with these educational resources, you'll gain practical knowledge and
confidence in using Figma effectively, setting a solid foundation for your journey into the
world of UX/UI design.
YouTube channels: Graphics Guruji Figma complete crash course Figma Official Channel

02 Color and Text styles

Creating color and text styles in design projects is essential for maintaining consistency and
efficiency. Here's why learning to create and use these styles is crucial:

Color Styles: Save specific colors with names for easy reuse and quick updates across
your design.

Text Styles: Define consistent typography for headings, body text, buttons, etc., and easily
update text properties across your project.
Figma style Graphics Guruji Figma Official Channel

03 Components and variants

Components and variants are indispensable for efficient UI design in large projects. Here's
why they're essential:

Components: Create reusable design elements like buttons, cards, or navigation bars.
Using components ensures consistency and saves time by updating all instances
simultaneously.

Variants: Build variations of components (e.g., different button states like hover or active)
within a single component. This streamlines design changes and enhances workflow
efficiency in complex projects.
Video one Video two
04 Auto layout
Understanding the basics of Auto Layout in Figma is essential for efficient design
workflows. Auto Layout allows you to create responsive and flexible designs by
automatically arranging and resizing elements based on specified rules.

Learning the fundamentals of Auto Layout enables you to design interfaces that adapt
seamlessly to different screen sizes and content changes, making it a crucial skill for
effective UI design within Figma.
Autolayout YouTube tutorial

05 No more complex things for now

Keep your launch easy at this stage, don't take much stress on learning Figma deeper for
now.
 V1.0

#2 Copy & learn

technique (basics)
"Copy and learn" is an effective technique for beginners to initiate their

design journey. Start by selecting simple designs to replicate using the

Figma tool you've just learned about.

Focus solely on practicing the mechanics of recreating basic elements

like shapes and text boxes. This exercise is intended to familiarize you

with Figma's interface, tools, and workflows, setting the stage for more

advanced design exploration in the future.

By following this approach, you'll build foundational skills and gain

confidence in using Figma for your design projects.

10 Days
#2 Copy & learn technique (basics)

01 Download simple designs from dribble or behance.

To begin practicing design skills, start by downloading straightforward designs from

platforms like Dribbble or Behance. Look for simple designs that are easy to understand

and replicate, avoiding complex or intricate designs that may be challenging for beginners.

Choose designs that focus on basic elements such as shapes, text, and simple layouts.

This approach allows you to study and analyze these designs effectively, gaining insights

into design principles without feeling overwhelmed.

By working with manageable designs, you'll build confidence and improve your skills

gradually as you progress in your learning journey.

Dribbble Behance

Bring designs to figma and copy same designs as

02 much as you can

Once you have selected a simple design to practice with, begin replicating it within Figma

to the best of your ability. Focus on recreating every visible element of the design using

Figma's tools and features.

While replicating text, shapes, and layout, you may skip complex images or intricate icons if

they are challenging to recreate. The goal is to closely mimic the overall structure and

arrangement of the design.

This exercise will deepen your understanding of Figma's capabilities and refine your design

skills through practical application. Don't worry about achieving perfection—instead, focus

on learning and improving with each attempt.

03 Copy 2 screens per day for 10 days
Setting daily targets encourages consistency in your learning process. Aim to replicate at
least two screens or pages per day for a minimum of 10 days.

This structured approach helps establish a routine and commitment to practice regularly.
By consistently copying designs within this timeframe, you'll reinforce your skills, gain
confidence in using Figma, and develop a deeper understanding of design concepts. Over
time, this dedicated effort will contribute significantly to your progress and proficiency in
UI/UX design.

04 No need to show anyone for review

During this stage of learning, there's no requirement to share your designs for review with
anyone. Instead, focus on the process of copying and practicing without the pressure of
seeking feedback.

Enjoy the creative journey and use this time to explore and experiment with Figma freely. By
allowing yourself to learn at your own pace and in a stress-free environment, you can build
confidence and develop your skills without external expectations.

Embrace the learning process as a personal exploration and enjoy the satisfaction of
making progress on your own terms.
But what if
You can't do self learning like this
You don't have a mentor for review your progress
You don't know from where to learn
You don't have an expert to answer
your doubts anytime

I have a solution
I am providing premium course to more than

5000 students
Well structures courses
Pre recorded and live sessions
Clear doubts anytime from me
I will review your assignments one on one
I will help in creating your portfolio
I will prepare you for interviews
I will provide you certificate through

IT company

Download the App Visit website

 V1.0

#3 Learn UI design

basics
Once you have mastered the design tool, it's important to shift your

focus towards learning the fundamental principles of UI/UX design.

While becoming proficient with a tool like Figma is essential, it's equally

crucial to understand that UI/UX design goes beyond simply using the

software.

Learning UI/UX principles involves studying concepts such as user-

centered design, visual hierarchy, usability, and interaction design.

This phase of learning will enable you to create designs that are not only

visually appealing but also functional, intuitive, and user-friendly.

Remember, mastering UI/UX design requires a combination of technical

proficiency with design tools and a solid understanding of design

principles and methodologies.

10 Days
#3 Learn UI design basics

01 Color theory

Color theory in UI design involves using colors strategically for visually appealing and user-

friendly interfaces:

1. Color Wheel and Harmony: Understand color relationships like complementary,

analogous, triadic, and monochromatic schemes to create balanced designs.

2. Color Contrast: Use variations in hue, value, and saturation to improve readability and

emphasize important elements.

3. Color Psychology: Different colors evoke specific emotions and cultural meanings;

choose colors that align with the design's message.

4. Accessibility: Consider color blindness and visual impairments by selecting accessible

color combinations for inclusive design.

5. Consistency and Branding: Establish a consistent color palette to strengthen brand

identity and maintain visual coherence across interfaces.

Color theory How to choose colors

02 Typography

Typography in UI design involves the careful selection and arrangement of fonts and text

elements to enhance readability and communication within a user interface. It

encompasses:

- Font Selection: Choosing appropriate typefaces (such as serif, sans-serif, or display fonts)

that align with the design's tone and message.

- Hierarchy: Establishing a clear hierarchy through variations in font size, weight (boldness),

and style (italic, uppercase) to guide users' attention and convey information effectively.

- Spacing and Alignment: Utilizing proper letter spacing (tracking), line spacing (leading),

and text alignment (left, right, center, justified) to ensure readability and visual balance.

- Contrast: Using font contrast (such as pairing serif with sans-serif fonts) to create visual

interest and emphasize key information

Typography rules How to choose font colors

03 Layout grids
Layout grids are foundational structures used in graphic and web design to organize
content systematically within a given space. They consist of a series of horizontal and
vertical lines that help align and arrange elements on a page or screen.

Grids provide a framework for achieving balance, consistency, and visual harmony in
designs. By defining columns, rows, gutters (spacing between columns or rows), and
margins, layout grids ensure that elements are positioned with precision and facilitate
efficient design workflows.

They can range from simple structures with a few columns to complex grids that
accommodate diverse content arrangements.
Grids tutorial

04 Visual Hierarchy
Visual hierarchy plays a crucial role in guiding viewers through a design or layout by
emphasizing certain elements over others based on their importance or significance. This
arrangement is achieved through strategic use of various design principles such as size,
color, contrast, and placement.

- Size: Larger elements tend to attract more attention and convey importance, allowing key
elements like headings or focal points to stand out prominently.

- Color: Bright or contrasting colors can draw attention and signify importance. Using color
strategically helps highlight specific elements within a design.

- Contrast: Variations in contrast, such as light versus dark or bold versus regular text,
create visual interest and emphasize hierarchy by making certain elements more
noticeable.

- Placement: The position of elements on a page influences their perceived importance.

Elements placed prominently (e.g., at the top or center) are typically considered more
significant.
Video tutorial
05 Design principles and laws
Design principles and laws are fundamental concepts that designers use to create visually
appealing and effective compositions.

- Balance ensures that elements are distributed harmoniously within the design, whether
through symmetrical (equal visual weight on both sides) or asymmetrical (unequal but
balanced visual weight) arrangements.

- Contrast involves using differences in color, size, shape, or other visual characteristics to
highlight important elements and create visual interest.

- Proximity refers to grouping related elements together to establish connections and

hierarchy, making the design more organized and understandable.

- Alignment involves positioning elements relative to each other or to a grid to create a

sense of order and cohesion throughout the design.

- Gestalt principles describe how humans perceive and organize visual elements into
meaningful patterns and wholes, including concepts like closure (perceiving incomplete
shapes as whole), similarity (grouping similar elements together), proximity (perceiving
close elements as related), and continuity (interpreting continuous lines as flowing
together).
UI principles part 1 Ui principles part 2 UI Rules tutorial UX laws

06 UI design elements
UI design elements form the foundational components of intuitive and visually appealing
user interfaces, enhancing user interaction and experience. These elements encompass
buttons for interactive actions, forms for data input, icons for visual representation of
functions, navigation menus for seamless page navigation, typography for text
presentation, color schemes for visual hierarchy and branding, and layout principles
including spacing and alignment. Each element is carefully crafted to optimize usability,
clarity, and aesthetic appeal.

Buttons are designed to be distinct and inviting, forms are structured for efficient data
entry, icons are simplified for quick recognition, and navigation menus are organized for
easy exploration. Typography choices guide readability and hierarchy, while color schemes
establish mood and reinforce brand identity. Proper spacing and layout ensure visual
balance and clarity. Together, these elements contribute to creating user interfaces that are
not only visually engaging but also functional, accessible, and conducive to a positive user
experience.
UI elements series 27 UI elements
07 Check some design systems(figma community)
Design systems encompass standardized elements like buttons, forms, icons, typography,
and colors to ensure consistency and usability in user interfaces. By defining cohesive
styles and guidelines for these components, design systems promote efficiency and
maintain visual harmony across various screens and devices.

Buttons within a design system have consistent size, shape, and behavior, while forms
feature standardized input fields for clarity and ease of use.

Icons are designed with uniform visual styles to convey meaning efficiently, and typography
guidelines establish consistent font families, sizes, and styles for improved readability and
brand identity.

A defined color palette ensures visual coherence, hierarchy, and accessibility throughout
the interface.

Overall, design systems enhance collaboration among design teams and contribute to
building user trust and familiarity with interfaces by providing cohesive and user-friendly
designs.

Links for UI design systems

 V1.0

#4 Copy & learn

technique (Advance)
This time its advance level of copy and learn technique. You will need all

previously copied design during this phase.

Copying existing designs and analyzing them is a valuable learning

strategy for developing UX/UI design skills, understanding design

principles, and applying design laws effectively.

By studying well-executed designs, aspiring designers can gain insights

into how various design elements are strategically planned and

integrated. This process involves observing the use of color,

typography, layout, spacing, and interactive components within the

design.

By dissecting existing designs, designers can decipher the thought

process behind decision-making, such as how visual hierarchy is

established to guide user attention, how contrast and alignment are

used for emphasis and organization, and how user interactions are

facilitated through intuitive UI elements like buttons and forms.

Through this hands-on approach, designers can deepen their

understanding of design fundamentals and hone their skills by applying

these insights to their own projects, ultimately enhancing their ability to

create impactful and user-friendly designs.

10 Days
#4 Copy & learn technique (Advance)

01 Check your previous 20 designs you copied

Yes, its time to recall 20 designs those you copied earlier. Open every design in figma and

follow the next steps.

02 Review where UI basics were applied on those

Recall those 20 designs you created earlier and the fundamental UI design principles you've

learned. Now, take the opportunity to review the 20 designs you've copied and examine

how these designs align with the UI design basics you've already studied. Pay attention to

aspects such as color usage, typography choices, layout composition, and interaction

design

03 Find issues and solve them

Analyzing existing designs and identifying issues or areas for improvement based on

learned UI skills is a valuable exercise to enhance design proficiency.

04 Inspire from Dribble or Behance type websites

Now, it's time to broaden your design perspective by exploring platforms like Dribbble or

Behance to gather inspiration and ideas for refining your copied designs.

05 Create different designs for all those 20 designs

Based on the inspiration gathered from platforms like Dribbble or Behance, challenge

yourself to create new layouts and designs while maintaining the same content used in your

previously copied designs. This exercise encourages you to approach the project from
different angles, exploring diverse design styles, aesthetics, and techniques.

By working on redesigning the same content with fresh perspectives, you'll develop the

This process fosters

ability to think creatively and critically about design decisions.

adaptability and innovation, teaching you how to iterate on existing projects and refine your

design skills.
06 Ask experts for review new designs
Once you have redesigned your layouts based on new inspiration and creative approaches,
it's beneficial to seek feedback from experienced designers and industry experts. Sharing
your redesigned work for review allows you to gain valuable insights and constructive
criticism that can lead to further improvements.

Experts can provide valuable perspectives on aspects such as usability, visual hierarchy,
consistency, and overall effectiveness of your designs.

Engaging in this review process helps refine your designs by identifying areas that may
need refinement or adjustment. It also provides an opportunity to learn from seasoned
professionals, understand industry standards, and enhance your design skills.
Figma style Graphics Guruji Figma Official Channel
 V1.0

#5 Work on small

dummy projects
Transitioning from copying to creating original designs is an exciting

step in your learning process. Now, instead of imitating others, you'll

start coming up with fresh ideas that showcase your unique style.

Designing original projects means using your imagination to create

something new and different. It's about expressing yourself through

colors, fonts, layouts, and how things work together.

This shift allows you to experiment freely and solve problems creatively.

Each project becomes a chance to learn and improve your skills while

showing what makes your work special.

Building a portfolio of original designs is key to proving your abilities to

clients and employers. They want to see what you can bring to the table

that's fresh and innovative.

Embracing original design is about embracing who you are as a

designer. Find inspiration in everyday life, try new things, and enjoy the

process of bringing your ideas to life through design.

10 Days
#5 Work on small dummy projects
01 Create UI design for a ”Motivational quote app”
Designing a fresh interface for a "Motivational Quote App" involves crafting a user-friendly
layout that highlights inspiring quotes effectively. Consider incorporating uplifting visuals
and intuitive navigation to enhance the user experience. Focus on creating a clean and
motivational design that encourages users to engage with the content positively.

02 Or ask ChatGPT for very simple UX challenge

You can use chatgpt to ask him to give you very small and simple UX challenges/projects
that should have maximum 4-5 screens only. Here is one prompt for you:

I am a fresher, i want to practice app UI design the first time. Give me a very simple UX
challenge for an app that should have a maximum 3-4 screens only.

03 Install similar apps in mobile and explore

Explore motivational quote apps on your phone to understand their features and usability.
Take note of what works and what can be improved. Use this experience to gather ideas
and insights for your own design decisions.

04 Create low fidelity wireframe on paper

Start by sketching out your ideas and features on paper to create low-fidelity wireframes.
This process allows you to quickly iterate and visualize the basic structure of your app
without getting caught up in detailed design elements. Focus on layout and flow, keeping
things simple and easy to understand.

05 Create final UI designs in Figma tool

Refine your wireframes using Figma to create a polished UI for your motivational quote app.
Choose colors, typography, and visuals carefully for a cohesive and professional look. Pay
attention to spacing and alignment for a polished design.

06 Create 5 small projects in same way

Apply this design process to five more projects to strengthen your skills and showcase your
growth as a designer. Each project is an opportunity to refine your approach and
experiment with different concepts.
 V1.0

#6 UX research and

planing
Understanding the significance of UX research and planning is crucial in

creating successful and user-centric designs. It's essential to delve into

the process of uncovering what real users truly want and need.

UX research allows us to gain valuable insights into user behaviors,

preferences, and pain points through various methods such as user

interviews, surveys, usability testing, and analytics.

By conducting thorough research, we can identify patterns, uncover

hidden motivations, and validate design decisions based on actual user

feedback.

This knowledge enables us to tailor our designs to meet user

expectations and deliver meaningful experiences. Effective UX planning

involves translating research findings into actionable strategies that

guide the design process, ensuring that our solutions align with user

needs and business objectives.

Embracing UX research and planning empowers us to create products

and services that resonate with users and drive meaningful engagement

and satisfaction.

10 Days
#6 UX research and planing

01 Learn UX research methods & user centred designs

To enhance your understanding of UX research, it's important to familiarize yourself with

fundamental methods such as user interviews, surveys, empathy mapping, and more. User

interviews provide direct insights into user perspectives, motivations, and pain points

through structured conversations.

Surveys help gather quantitative data on a larger scale, providing statistical insights into

user preferences and behaviors. Empathy mapping is a valuable technique for

understanding user emotions and experiences, facilitating a deeper connection with user

needs.

By learning and applying these basic UX research methods, you'll gain essential skills for

conducting meaningful research that informs effective design decisions and creates user-

centered solutions.

UX design series Graphics Guruji

02 Work again on Step 5th's 5 small projects

Start working again on 5 projects you already worked on. But this time with UX research

and planing method.

03 Meet end users, ask questions, make notes

Following the previous steps, revisit your five previously created projects for rework. This

time, engage directly with the end users to gain deeper insights into their needs and

challenges.

Rather than delving into complex UX research methods, focus on meeting with users and

asking targeted questions to understand what they truly want and what solutions would

address their specific problems.

By gathering insights directly from users, you can refine and tailor your projects to better

meet their expectations and enhance overall usability. This approach emphasizes the

importance of user feedback in driving iterative improvements and ensuring that your

designs are aligned with user needs.

04 Get inspiration & create low fidelity wireframes
After conducting research and gathering insights, refresh your inspiration and begin
replanning existing projects using low-fidelity wireframes. Sketch out revised concepts
based on user feedback and project objectives.

Low-fidelity wireframes allow for quick iteration and exploration of design ideas focused on
user needs. This process ensures that your designs are grounded in research findings,
setting a strong foundation for further development.

05 User flow diagram

Translate your rough paper sketches into user flow diagrams. Identify key actions and
decision points, then map out the sequence of screens or pages users will encounter. This
process clarifies navigation and ensures a smooth user journey. User flow diagrams refine
your design concepts and validate them before detailed interface design, saving time and
effort later on.
User flow diagrams tutorial article

06 Learn about user behaviour UX elements patterns

To improve your UX design skills, study user behavior and key design elements like layout,
navigation, typography, and color theory. Learn common design patterns such as card
layouts (used in Pinterest), hamburger menus (found in Facebook and Instagram), step-by-
step wizards (like Amazon checkout), infinite scrolling (used in Twitter and Instagram
feeds), and progressive disclosure (seen in expandable sections on websites).
Understanding and applying these patterns will help you create more intuitive and effective
user interfaces.
User behaviour tutorial article UI design patterns website

07 Final UI design in figma & get review for each

Use your sketches, user flow diagrams, user behaviour & UX patterns skills and create
improved UI designs with a focus on better UX. Translate the outlined user flows into
detailed interface designs that prioritize clarity, consistency, and usability. Incorporate
visual elements and interactive components to enhance the overall user experience. By
refining your designs iteratively based on these foundational assets, you can ensure that
the final UI exceeds user expectations and delivers a more engaging product.
 V1.0

#7 Start Learning Use

of AI for UI UX
Understanding the significance of UX research and planning is crucial in

creating successful and user-centric designs. It's essential to delve into

the process of uncovering what real users truly want and need.

UX research allows us to gain valuable insights into user behaviors,

preferences, and pain points through various methods such as user

interviews, surveys, usability testing, and analytics.

By conducting thorough research, we can identify patterns, uncover

hidden motivations, and validate design decisions based on actual user

feedback.

This knowledge enables us to tailor our designs to meet user

expectations and deliver meaningful experiences. Effective UX planning

involves translating research findings into actionable strategies that

guide the design process, ensuring that our solutions align with user

needs and business objectives.

Embracing UX research and planning empowers us to create products

and services that resonate with users and drive meaningful engagement

and satisfaction.

10 Days
#7 Start Learning Use of AI for UI UX

01 Watch and learn from Youtube

Recently many AI tools were introduced and any of them helps in UI UX designing. You can

learn about them through YouTube videos and explore yourself.

AI, AR and VR tutorials

02 Get mastery in ChatGPT

ChatGPT is on the top to solve your daily UI UX designing related questions. You can get

help not only for learning but to understand projects and for better planing.

UX research with ChatGPT How to use chatgpt AI for an interview or cv creation

03 Get mastery in Mid-journey and similar tools

For visual inspirations and image creation you should learn how to use them with proper

prompts.

AI image generation tutorial

04 Use bing copilot to review your designs

Bing copilot allows you to upload your designs and you can ask to review them. Copilot also

can give you suggestions to make improvements.

Bing copilot AI

05 Explore more AI tools

Keep learning about AI tools, their are plenty of them ready to help you in UI UX and
shaping your career.

Framer AI : UI design with AI UI zard.io Midjourney Ai generating art List of AI tools for UI UX
 V1.0

#8 Train your mind

daily
Continuous learning and growth in UX/UI design is essential for staying

relevant and effective in the field. Keep your training and skill

development ongoing to stay ahead of trends and advancements.

Stay inspired by exploring design trends, attending workshops, and

studying successful case studies. Building a strong social network

within the design community is also valuable for sharing ideas, receiving

feedback, and collaborating on projects.

Most importantly, always prioritize the end user's perspective in your

designs. Empathize with their needs, preferences, and challenges to

create meaningful and user-centered experiences that truly resonate.

By embracing continuous learning, networking, and user-centric design

principles, you can elevate your UX/UI skills and make a positive impact

in your design practice.

on going
#8 Train your mind daily
01 Pick 2 designs daily
Pick 2 designs daily from real apps, from dribbble or behance.

02 Review and note good & bad points on each design

Review those designs and make notes what is good and bad on those. Always, keep UX
and UI point of view while reviewing.

03 Start reviewing other designers’ designs

Join communities, groups, follow design pages where designers share their designs for
review. Start reviewing other designers’ work.
Telegram group Graphics Guruji

04 Post your designs on social media

Post your designs on social media and ask people to review and give suggestions on
improvements.

05 Follow good insta, youtube accounts

Follow best instagram accounts, youtube channels, linkedin profiles and pages, etc to get
daily design dose and inspiration. You need to keep yourself upto date.

06 Subscribe to UI UX design newsletters

L earning through email newsletters is always easy and inspiring. You will get info about
latest in our industry, tutorials, offers, and much more.
L ist of UI UX design blogs
Special promo codes for you to buy premium courses
If you are interested, request on WhatsApp to assign below coupon codes to your account

Pre recorded + Live

UX Design course
₹2500 ₹2200
RESUX Course introduction short video
Click here for course page

Pre recorded + Live

Mobile app UI design course
₹4000 ₹3700
RESMOB Course introduction short video
Click here for course page

Pre recorded + Live

COMBO of UX & App UI course
Watch above two videos
₹6500 ₹5700 Click here for combo course page

RESCOM

Pre recorded + Live

Web UI design course
₹12000 ₹8000
RESWEB Course introduction short video
Click here for combo course page

Why my courses?
Pre recorded videos
Call support
Interview preparation

Live sessions
Download kits
Earning plans

Whatsapp support
Certificate from IT company
Assignments

One on one support Portfolio building App and pc access

Have questions? or for coupon assign request, WhatsApp now at +91 8003344414