Design Roadmap
UI/UX Designer
UX is how a product works and UI is how it looks; the same person often does both. The sequence is design fundamentals, then research — because designing without it is decoration — then information architecture and wireframes, then visual design and prototyping, then design systems and handoff, and finally a portfolio that shows your reasoning rather than your screens.
By the end: Take a real problem from research through to a tested, buildable design.
The UI/UX Designer Roadmap
Design Fundamentals~1 month
The visual grammar everything else is written in.
Layout and hierarchy
Grids, alignment, spacing and what the eye reaches first. Hierarchy is the whole job in miniature.
Typography
Scale, line length and rhythm. Most amateur interfaces are a typography problem before anything else.
Colour and contrast
Palettes that carry meaning, and contrast ratios that meet WCAG rather than merely look fine to you.
Design principles
Proximity, similarity, consistency and feedback — why an interface feels obvious or does not.
Learn Figma
Frames, auto layout, components and variants. The industry default, and worth real fluency.
User Research~1 month
Design without this is decoration with a job title.
Interviewing users
Ask about past behaviour, not future intentions. People are unreliable predictors of themselves.
Surveys and analytics
Quantitative signal to size what the interviews suggested, not to replace them.
Personas and journey maps
Synthesis artefacts that keep a team arguing about the same user.
Usability testing
Five people will surface most of the serious problems. Watch, do not explain.
Competitive analysis
Learn the conventions of your category before deciding which to break.
Structure and Flow~1 month
Decide what goes where before deciding what it looks like.
Information architecture
Navigation, grouping and naming. Most "we need a redesign" is really an IA problem.
User flows
Map the path to the goal, including the error and empty states everyone forgets.
Wireframing
Low fidelity on purpose, so feedback is about structure rather than colour.
Content design
Labels, microcopy and error messages. Words are interface, and usually the cheapest fix available.
Visual Design and Prototyping~1 month
Make it real enough to test.
High-fidelity UI
Apply the visual system to the wireframes, consistently across every screen.
Prototyping
Clickable flows in Figma. A prototype answers questions a static mockup cannot.
Responsive and adaptive design
One product across phone, tablet and desktop — not three unrelated designs.
Motion and micro-interactions
Transitions that explain what changed. Motion is feedback, not garnish.
Dark mode and theming
A second theme designed deliberately, not an inverted palette.
Design Systems and Handoff~1 month
Work the way a product team works.
Design systems
Tokens, components and rules, so a growing product stays coherent without you policing it.
Accessibility in practice
Focus order, targets, labels and contrast. Frequently a legal requirement, always the right call.
Developer handoff
Specs, states and edge cases. Ambiguity gets resolved by an engineer guessing.
Enough HTML and CSS to be dangerous
Knowing what is cheap and what is expensive to build changes what you propose.
Component documentation
OptionalA living reference beats a static file everyone has a different copy of.
Portfolio and Job Hunt~1 month
Show the thinking, not the screens.
Three deep case studies
Problem, research, what you rejected, what shipped, what happened after. Depth beats volume decisively.
Present your reasoning
You will be asked to defend a decision live. Practise saying why out loud.
A real client or project
One genuine constraint-laden project outweighs a folder of unbriefed redesigns.
Resume and applications
Design resumes still pass through the same automated filters as everyone else's.
Frequently Asked Questions
Do UX designers need to code?
Not to design, but understanding what is cheap and what is expensive to build makes you far easier to work with. Enough HTML and CSS to read a component and grasp responsive behaviour will change what you propose, and engineers will notice.
What matters most in a UX portfolio?
The reasoning, not the pixels. Hiring managers look for the problem, what you learned from users, what you rejected and why, and what happened after launch. Three deep case studies beat twenty polished screens with no story behind them.
Is Figma the only tool I need?
Almost. Figma covers wireframing, UI, prototyping and handoff and is the industry default. Add something for research notes and synthesis, and something for quick user testing — but do not spend the early months collecting tools instead of doing the work.
UX or UI — should I specialise?
Start broad, specialise later. Smaller companies hire one person for both, which is where most first jobs are. Once you are working, the split becomes clearer: UX leans toward research and strategy, UI toward visual craft and systems.