How to Become a UI/UX Designer? Step by Step Roadmap

UI/UX design guide

Scope of the guide

Short answer: To become a UI/UX designer, you gradually acquire visual design fundamentals, user flow, wireframe, component and state design, prototyping and small-scale testing skills, demonstrate these with three or four case studies explaining the problem and decisions, and enter the field with internships, junior positions or small freelance jobs.

I'm Selçuk Aker. I graduated from Marmara University, Faculty of Fine Arts, Graphic Design department; I have been working on brand, publishing and digital interface projects for over 19 years. Today, a significant part of my work consists of web, mobile application and management panel interfaces. In this guide, I explain a step-by-step roadmap for UI/UX beginners, criteria for evaluating training options, and what employers really look for in a portfolio. I do not promise time; Because the pace of learning varies greatly depending on the time you have available, your previous experience, and the quality of the feedback you receive. Instead, I describe the skill thresholds you need to reach at the end of each stage.

Before starting UI/UX: familiarize yourself with the field and roles

“UI/UX designer” is used as a broad umbrella in postings. Some companies look for a visual interface specialist with this title, some a profile heavy on research and flow. The first step is to understand what these roles do and which one is closer to you. UX researcher conducts interviews and testing; UI designer builds components and visual system; The product designer becomes more involved in product decisions.

I explained the roles and the content of the daily job in detail on the page What does a UI/UX designer do. For basic concepts and the difference between UI and UX, you can start from UI/UX design guide. You don't have to finalize your direction from the beginning; However, knowing which jobs you are curious about will make it easier when choosing your first exercises.

UI/UX roadmap: five stages

The roadmap below can be used for both self-learners and those pursuing a course or department. The stages are not separated by clear boundaries; It's normal to go back to the first once you get to the second stage. The important thing is to produce a concrete output at the end of each stage.

Stage 1: Visual language basics

It's tempting to start interface design directly with the program; but if you don't know what to decide when you open the program, the screens turn into copies of other applications. First, learn the concepts of hierarchy, typography, color, contrast and spacing. Take screenshots from the applications you use and ask "Where do my eyes go first? Why?" Taking notes is an effective exercise. You can find the equivalent of these topics in graphic design in the graphic design elements and principles guide.

phase 2: Stream and wireframe

At this stage you learn to think about the task, not the screen. Choose a simple task: ordering from a cafe, registering for an event, paying a bill. Diagram the steps of the task and points where the user may give up or make a mistake. Then draw an outline with uncolored, actual text for each step. Paper and pencil are sufficient for this stage.

phase 3: Component and case design

A design program is now needed. Figma, a widely used tool in the industry; You can check the current conditions of the program offered for students and educators on the manufacturer's page (available as of October 2026). At this stage, learn to define the button, form field and card as components, create variants and draw the states of each component. Tool selection and alternatives are explained in detail in the UI/UX design programs guide.

Phase 4: Prototype and small trial

Connect the screens together and set up a clickable prototype. Then give a task to three people around you who don't know design and follow it without helping. Note where they paused, what they misunderstood. This little essay is not a substitute for professional research; but it is the quickest way to see that your design does not work as you think.

Stage 5: Writing a case study

The last step is the one most beginners skip: explaining what you do. As well as beautiful displays, a case study should show what problem you are trying to solve, what options you tried and why you chose one. This skill is discussed separately in the following section. Let me give you a simple example: You designed an event registration flow, and in the experiment, two of the participants did not understand the difference between ticket types. Writing this observation in the case study, the two alternatives you tried (comparison chart and brief description under each ticket type), and why you chose the latter says more than adding ten new screens. In this expression, the employer sees your research, decision and communication skills at the same time.

University, course, bootcamp or self-guided?

Undergraduate programs directly dedicated to UI/UX are limited in Turkey; Some of the designers in the field come from departments such as graphic design, visual communication, industrial design, computer engineering or psychology. Some of them have educated themselves through courses and personal projects. None of the options is correct on its own; When choosing, consider these criteria:

A certificate shows that you have completed a learning process; Competence is shown by your portfolio and the way you describe your work. I have prepared a detailed checklist that you can use in course selection in the graphic design course selection guide; Most of the criteria also apply to UI/UX training.

Switching to UI/UX from another field

Those who come from graphic design have an advantage in typography, color and composition. Their challenge is often to think about states, flows, and variable content rather than a single “perfect screen.” A poster is designed once; A list screen has to work with zero, one and thousand records separately. I also studied graphic design and today I design interfaces as well as branding; The most important difference I see when running the two areas together is that every decision in the interface affects the next step. I explained the path to graphic design in the how to become a graphic designer guide; You can find my history on the about me page.

People coming from software know technical constraints and data structure well; This is a great advantage for workable design. What needs to be improved is often visual hierarchy, typography and the habit of talking to the user. If you have front-end development experience, don't hide it; Profiles that can build the bridge between design and code are especially sought after in small teams. Showing both the design file and the working version of a component in your portfolio is a good way to solidify this advantage.

Those from other fields (psychology, marketing, customer service, teaching) may be strong in user understanding and communication. Turn your previous industry knowledge into an advantage: if you're coming from a healthcare background, your first case study could be an appointment flow.

First projects: how to write a fictional brief?

You can produce meaningful projects without a real customer. The important thing is to write the fictional brief with realistic constraints. A brief should include: the target user, the main task to be completed, the platform, at least one constraint (e.g. “most users are using older model phones”), and how success will be understood.

I recommend three exercises to get you started:

1. Redesign an existing flow: Choose a step of a service you use frequently that you find difficult. First document the current flow, then show your change and the rationale.
2. Design a small flow for a local business: Like a hair appointment, a library book reservation, or a neighborhood bakery's pre-order flow.
3. Design an administration screen: A simple panel with a table, filter, and batch action. Working with intensive data sets you apart from candidates who only design mobile screens.

A warning: Clearly indicate fictional or self-initiated projects as “personal project” or “concept work” in your portfolio. If you use the name of a real brand, write that you do not work with that brand. For the employer, this is not a deficiency, but a sign of openness.

How to set up UI/UX portfolio and case study?

Employers look at your way of thinking rather than the number of screens in your portfolio. Each case study should include the following sections:

Three or four strong case studies to start with are more effective than ten superficial screen galleries. Collecting case studies on a personal website makes it easy to share links; On this subject, you can look at the personal portfolio design page. I discussed portfolio and internship preparation for students in portfolio article for graphic design students, and explaining the portfolio during the interview in portfolio explanation article.

Common mistakes while learning

In my portfolio interviews with startups and reviewing job applications, I see some recurring mistakes:

• Producing solo window displays: Shadowed cards and vividly colored single displays look impressive at first glance; But if there is no flow, situation and real content, the employer cannot see your way of thinking.
• Mistaking learning programming as learning design: Knowing all the features of Figma does not teach you to decide which information will appear on the screen first.
• Re-drawing popular applications verbatim: Copying practice builds dexterity, but it does not show your judgment in the portfolio. If you are redesigning, explain what you changed and why.
• Avoiding feedback: Share things at an early stage rather than showing them when they are “done”. Criticism coming at the flow chart stage costs much less effort than criticism coming on finished screens.
• Leaving accessibility for last: If controls such as contrast and touch area are not made from the beginning, correcting them later may require changing the entire color system. It's a good habit to take a look at WCAG 2.2 metrics at an early stage.

To get feedback, it helps to ask for regular critiques from an experienced designer, share work in design communities, or conduct weekly reviews with a few co-learners. It is important not to take criticism personally and to ask each comment “What problem does this indicate?” Reading with questions is one of the habits that accelerates development the most.

First job: internship, junior application and freelance start

There are three ways to get started and they are not mutually exclusive:

• Internship: Seeing a real product process within the team is the most valuable way to learn to work with feedback. Even when applying for an internship, prepare at least two case studies.
• Junior position: Read the list of responsibilities of the posting; An ad that says “UI/UX” may only expect a visual interface. Submit your application with the case study you highlight based on that posting.
• Small freelance jobs: You have to manage the scope, schedule and delivery responsibility on your own. Therefore, it is generally healthier to switch to freelancing after gaining process experience in a team. I explained the business side of working independently in the becoming a freelance graphic designer guide.

Professional networking is also important. Joining design communities, regularly sharing your work, and asking for feedback makes opportunities visible. For how to describe your portfolio in your profile, you can see the article Portfolio description on LinkedIn.

How do salaries and wages vary?

I do not give salary figures on this page; Because the figure given without current, dated and clearly sourced data will quickly become misleading. Salary is generally determined by the following factors: seniority and strength of portfolio, company's scale and industry, city or remote working, scope of the role (UI only or research included), and ability to work in a foreign language. When looking at a salary survey, check the date of the data, how many people it was collected from, and what job titles it covers. I explained the method of evaluating salary data in the graphic designer salaries guide; The same criteria apply to UI/UX.

How do AI tools impact learning?

Today, artificial intelligence tools can produce screen sketches, text suggestions and images. These can speed up the learning process; but you still need basic skills to evaluate why a draft does or doesn't work. Missing states on a produced screen, accessibility problems, or a structure that does not fit the flow will only be noticed by a knowing eye. My suggestion: Use the tools to vary the initial idea, but write the decision and rationale yourself. I discussed this issue in detail in the articles web and UI/UX design with artificial intelligence and can applications be made with artificial intelligence.

Summary: UI/UX roadmap checklist

• Get to know the roles; Know the difference between UI, UX, product design and research.
• Start with the basics of visual language, then move on to task and flow thinking.
• Learn how to draw component, variant and status screens in Figma.
• Test your prototype with at least three people and modify it based on the findings.
• Describe your problem, constraint, decision and role with three or four case studies.
• Clearly state personal projects; Don't present it as real client work.
• See UI/UX designer skills for details on required skills, and UI/UX design principles for guidelines when evaluating screens.

Do you have a digital product project?

This guide gives information about UI/UX design. You can share your current screens and goals for your digital product.

• Target user of the product
• Prioritized task and flow
• Platform (web, iOS, Android)