How to Learn UI/UX Design From Scratch for Beginners Until You Have a Portfolio

Why UI/UX Skills Are Worth Learning Right Now

Understand First What You Are Actually Learning

Many beginners assume learning UI/UX means practicing how to make pretty screens. The largest part of it is thinking about the people who will use the product. UX (user experience) handles research, flow, and structure so the product feels sensible. UI (user interface) handles the look: typography, color, layout, and components so everything stays tidy and consistent. Good news for those just starting, this path is open without a design or coding background. What it takes is a sensitivity to readability, the patience to listen to user needs, and the willingness to practice in Figma until you move with ease. The roadmap below lays out an orderly sequence for learning UI/UX, so you avoid jumping to color and fonts before you understand the problem you want to solve.

Seven Stages of Learning UI/UX Design From Scratch

Take them in order. Each stage stacks on the one before it, and each stage leaves one real result that will later fill your portfolio.

1. 1

   Stage 1: Master Figma Basics and Visual Sensitivity

   Begin with just one tool, Figma, so your energy stays focused on a single canvas. Learn how to create frames, arrange layers, use grids, and build simple components. Alongside that, train your eye to read good design: observe the apps you use every day, notice the spacing between elements, the size of text, and the hierarchy of information. The most effective practice at this stage is recreating one screen from a favorite app, say the profile page of a social media platform, until it matches exactly. The act of recreating forces you to notice small details that often slip by. Set aside two to three weeks so your hands grow comfortable with the Figma canvas before moving on to research.

   Tips

   • Use Figma's free starter plan, it is already more than enough for the entire learning journey
   • Name your layers clearly from the start, this habit saves you on large projects
2. 2

   Stage 2: Practice User-Centered Thinking

   Before touching a wireframe, get to know the product designer's thinking framework. Design thinking divides it into five phases: empathize (understand the person), define (frame the problem), ideate (search for many ideas), prototype (bring the design to life), and test (try it with users). These five phases explain why research always comes ahead of the visuals. At this stage, build the habit of asking: who will use this product, what troubles them, and which problem is most worth solving first. A simple exercise, take one app you find annoying to use, then write down three concrete complaints along with your guess at the root cause. These notes become raw material for the real research stage.

   Tips

   • Hold back from guessing solutions before the problem is clear, this is a beginner's costliest mistake
   • Write your assumptions separately from the facts, so they are easy to test later

   Skipping this way of thinking and designing screens straight away makes your work look pretty in a gallery, yet confusing the moment someone else tries it.
3. 3

   Stage 3: Practice Simple User Research

   User research sounds fancy, yet its beginner version is very down to earth. Simply interview three to five people who represent the future users of the product you want to design. Ask open questions about their habits and difficulties, and avoid questions that steer the answer. Summarize your findings into one concise persona and one sharp problem statement. From here you build a user flow, the sequence of steps a user takes to reach their goal. Map the flow in FigJam so you can freely move boxes and arrows around. The results of this stage, research notes and a flow diagram, are the foundation that makes every later screen born from an observed need.

   Tips

   • Interviewing five people is already enough to reveal the main problem patterns for a learning project
   • Record or note the source's exact words, avoid rushing to conclusions while you are still listening
4. 4

   Stage 4: Build Low-Fidelity Wireframes

   A wireframe is a rough skeleton of the layout, made with gray boxes and lines without color or final imagery. Its purpose is to test arrangement and flow while it is still cheap and fast, long before you spend time on polish. Translate the user flow from the previous stage into a series of simple screens in Figma. Focus on placement: what matters most appears where, which button carries the user to the next step. Make the first version quickly, then show it to one or two people and ask them to explain what they understand. Feedback at the skeleton stage is far cheaper to fix than once the visuals are finished.

   Tips

   • Use only gray so you avoid the temptation to fuss over aesthetics too early
   • Make a few alternative versions for one important screen, then compare which is clearest
5. 5

   Stage 5: Move Up to UI Visual Design

   Once the skeleton feels logical, only then give it a face. In the UI stage, you work on typography, color palette, layout, spacing, and icons so the display looks tidy, readable, and carries a clear hierarchy. Learn a simple typographic scale, color pairings that are easy on the eyes, and consistent spacing between elements. Use auto layout and components in Figma so similar elements are easy to reuse and update all at once. Turn your gray wireframes into a high-fidelity display that feels like a real product. This is where the visual sensitivity from the first stage pays off, since small decisions about color and spacing separate an amateur look from one that appears professional.

   Tips

   • Limit the palette to one main color, one accent, and a few shades of gray so it looks calm
   • Build the button and card components once, then reuse them, avoid redrawing on every screen
6. 6

   Stage 6: Bring It to Life as a Prototype and Test It With People

   Assemble your UI screens into a clickable prototype in Figma, complete with transitions between screens. A prototype turns your idea into something people can actually click and try. After that, run simple usability testing: ask three to five people to complete one task, then observe where they hesitate, misclick, or get lost. Hold back from guiding them. Five minutes of observation often reveals problems you missed for hours. Note the findings, refine the design, then test again if needed. You may use Maze for remote testing, or simply sit beside the person trying it. This testing is what turns guesses into design decisions grounded in evidence.

   Tips

   • Give a concrete task, for example complete one order, so you observe real behavior on a real goal
   • Stay quiet and observe, let the user's confusion show as it truly is without your help

   Designers easily fall in love with their own work. Without testing it on other people, you are only guessing whether the design is genuinely easy to use.
7. 7

   Stage 7: Assemble It Into a Portfolio Case Study

   The final stage turns that long process into one case study that tells a story. Product recruiters want to see how you think, alongside a polished final display. Arrange the story in order: what problem you found, what research you did, the flow and design decisions you made, and what changed after testing. Include images of the wireframe, the UI, and one sentence about the test results. One deep case study leaves a stronger impression than five shallow works. Publish it to a portfolio site or design platform so it is easy to share when you apply. This is the evidence of thinking that makes your application stand out.

   Tips

   • Tell the reason behind each decision, this is the part recruiters value most
   • Choose one project and work it deeply, it lands better than many thin pieces

Time Estimate for Each Stage for Beginners

Three Paths to Learning UI/UX and How They Differ

Many beginners combine self-study for Figma basics with mentor guidance once they begin building research and a portfolio.

Checklist Before Calling Yourself Ready to Apply

How Much Does Learning UI/UX at EduPoint Cost

The guided learning path stays affordable. UI/UX design lessons at EduPoint start from Rp 110,000 per session for online lessons, and from Rp 140,000 per session for in-person. A small group of two to three students is also available from Rp 95,000 per student. The final price adjusts to your learning goal, location, and lesson format. For beginners who want to travel the roadmap above with guidance, the regular package helps you learn consistently each week until one full product, while the career and portfolio package steers you until you are ready to apply. The mentor adjusts the emphasis to your starting point, so your study time goes to what you need most.

Questions About Learning UI/UX From Scratch