A screen looks done long before it is usable. The mockup photographs beautifully. The empty state does not exist, the error copy blames the user, the loading moment is a blank hole, and the button everyone was told to press is three words long on a four-word job. Interface work fails in these unglamorous gaps, and the gap between a beautiful screen and a finished one is exactly where a UI designer earns a living.
This roadmap is about that gap. It covers what the role is accountable for, which four areas of the catalog hold the craft, and the sequence that takes a beginner from pretty comps to flows that distracted people finish on bad days. It also puts honest prices on the tools, the time, and the first job, because design education marketing rarely does.
The role gets confused with its neighbors constantly. Product designers decide what to build. Researchers find out what people need. The UI designer owns how the decided thing behaves and looks at the moment of contact, every pixel doing a job or explaining itself. This guide is written for that job, and for the portfolio that proves you can hold it.
What a UI Designer Is Accountable For
A UI designer designs the surfaces through which people use software. Buttons, forms, lists, navigation, cards, dashboards, onboarding, settings, checkout. The deliverable is not a picture. It is a specification of behavior: what each control does, what each screen looks like in every state it can be in, and how the whole set stays consistent when the product grows next quarter. A design file someone can hand to a developer without a meeting per screen is the finished thing.
The job divides into four accountabilities. Interaction, the logic of what happens on tap and after it. Visual craft, type, spacing, color, hierarchy, the layer that makes the logic readable at a glance. Systems thinking, the rules that let fifty screens share one identity without one hundred exceptions. And communication, the rationale that survives the meeting where marketing, engineering, and a deadline all want different buttons. Beginners over-index on the visual layer because it is the visible layer. Hiring managers screen for the other three.
The states are the test. Default, hover, focus, pressed, disabled, empty, loading, error, success, partial data, one item, one thousand items, and the name that is fifteen characters too long for the card. A junior portfolio shows the happy path. A hireable one shows the error and the empty, because those states are where support tickets are born and churn is decided. Every project later in this guide ends with a states checklist for exactly this reason.
The tools conversation is smaller than advertised. The industry default design application is the paid Figma (PAID), and the free Figma Learn (Help Center) (FREE) documentation teaches it completely. Penpot (FREE) is the open-source alternative that performs the real work of layout and prototyping without a seat cost, and none of the stages below care which one you open. Learning judgment first, tool second, is the sequence that keeps software budget from becoming the syllabus.
What the role is not. It is not illustration, though image skill helps. It is not graphic design for print, though the fundamentals are shared and borrowed daily. It is not front-end engineering, though knowing what a browser actually does changes every spec you write. And it is not decoration sitting at the end of a pipeline. A UI designer handed a finished feature list and a deadline does not make it pretty. They make it honest about what it asks of a person.
That honesty is learnable, and the catalog holds the parts. Four areas carry the profession, each answering a question a screen will eventually ask you. The map is next, then the working sequence, then the money.
The role also has a social shape worth stating before the study begins. You work between a product owner who wants the feature out, an engineer who knows what the platform allows, and a support team that hears every confusion the interface causes. A UI designer's real authority comes from making all three of those perspectives visible inside one file, because the review meeting then argues about evidence instead of volume. Teams that treat the designer as a pair of hands for hire never learn the difference. Teams that hire for it stop shipping confusing software, which is the only measurable promise this job makes.
The Shelves That Hold This Craft
UI/UX Design is the home area, Graphic Design supplies the visual fundamentals, Web Development buys you the literacy to spec things developers can actually build, and Branding & Identity keeps the product looking like its company. Each note below states what the area gives the role, with the picks mapped to real screen work rather than to study for its own sake.
UI/UX Design
This is where the behavior knowledge lives. The catalog holds 30 live resources in UI/UX Design, with 20 free and 10 paid, and the free shelf is unusually strong because the platforms want your product to follow their rules.
Reference first. Laws of UX (FREE) collects the psychology every interface quietly relies on, one readable page per principle. Apple Human Interface Guidelines (FREE) and Material Design 3 (FREE) are the two rulebooks with enforcement behind them, the documents developers will quote at you, and Google Design (FREE) publishes the practice stories that make Material feel like decisions instead of dogma. Design Systems Repo (FREE) gathers public design systems to study in bulk, and it is the shelf to reread before every job interview.
For the daily work, the Figma Resource Library (FREE) supplies community files to take apart, Excalidraw (FREE) is the fastest sketch surface between an idea and a critique, and Checklist Design (FREE) gives per-page checklists that read like a senior designer standing behind you. CareerFoundry UX Blog (FREE) is the broadest free teaching shelf on process, and Godly (FREE) curates well-made websites that keep your eye honest about current quality.
Accessibility belongs to this area as a stance, not a phase. Magnifiers, captions, contrast, and one-handed reach describe how real people actually use real devices, and the two rulebooks above already contain their requirements. Treat the accessible pass as part of the states checklist in stage four, because a screen that only works for perfect vision and steady thumbs is one state you forgot to draw.
The reasoning layer is where juniors get separated from seniors. Growth.Design Case Studies (FREE) rewires famous product redesigns into evidence and psychology, and reading one a week with notes is a curriculum in itself. freeCodeCamp (FREE) appears in this area's listings for the code-curious, covered properly under Web Development below.
Paid material here buys structure or research time. Interaction Design Foundation (IxDF) (PAID) is the reading-and-certification library, Learn UI Design (PAID) the focused craft course, and the Google UX Design Professional Certificate (PAID) the guided program if self-study will not finish. Pattern archives, Mobbin (PAID) and Page Flows (PAID), buy back the hours you would spend screenshotting apps for references, and they become worth it when client research, not your learning, is the bottleneck. The paid Create Your UX Portfolio with Adobe Portfolio (Coursera GP) (PAID) is a portfolio-specific option near the end of your first project stretch.
Graphic Design
The screen area assumes you can already do this part. If you cannot, this is the shelf that fixes it, because bad typography in an interface is bad typography wearing pixels. The catalog holds 30 live resources in Graphic Design, with 27 free and 3 paid.
Type is the interface. Butterick's Practical Typography (FREE) teaches setting text that people must read under pressure, which describes every form you will ever design. Typewolf (FREE) trains the eye on type in live websites, and Google Fonts Knowledge (FREE) is the free library explained from the inside, including what each face is bad at. The grouping laws that decide visual hierarchy are covered on the free UI shelves, and you meet them in stage two's labeling exercise before you need the terminology.
Layout and pattern come next. The Grid System (FREE) builds the column discipline that makes dashboards survive real data, and UI Patterns (FREE) collects the reusable interface solutions you should know before inventing. Smashing Magazine (FREE) publishes where design meets production, Satori Graphics (FREE) handles composition reasoning in short essays, and Hack Design (FREE) keeps a weekly curated dose of reasoning arriving by mail. Design Buddies (FREE) runs the critique community where interface work gets posted without being ashamed of it, and The Vignelli Canon (FREE) is the short exacting book on why systems beat styling. Drawabox (FREE) stays worth doing for hand control if your sketches fight your intent.
Web Development
A UI designer who cannot be ignored by a developer is half employed. Under Web Development the catalog holds 36 live resources, 30 of them free and 6 paid.
You are not learning to ship production code. You are learning enough that your specs respect what a browser, a phone, and a tired engineering team can actually do. roadmap.sh Frontend Developer Roadmap (FREE) is the map of the territory your handoffs enter. Responsive Web Design Certification (freeCodeCamp) (FREE) is the long free exercise in how layouts behave on real screens, which no artboard teaches by itself. JavaScript Essentials (FREE) and Beginner VS Code (FREE) cover the language and the workbench, Google Developers Codelabs (FREE) provides small guided builds, and Build Your First React JS Application (FREE) shows what component-driven development means, which is exactly why the names in your design file should match the names in the codebase.
The practical payoffs repeat across every team. You will know why a custom dropdown is expensive and a native select is cheap. Why one spacing value per step beats a scale of odd numbers. Why your hover-only affordance is invisible on a tablet. Frontend Mentor (PAID) appears for designers who want to practice against briefs with real review, and its cost buys feedback, which is the thing tutorials cannot include.
Branding & Identity
Products live inside companies, and this area is what stops your screens from looking like a template with a different logo. The Branding & Identity area carries 30 live resources, with 26 free and 4 paid.
The color argument comes from Interaction Design Foundation: Color Psychology (FREE), keeping palette decisions about evidence rather than favorites. Fonts In Use (FREE) shows how real brands handle type systems, which is the exact question your product type scale is answering. When you inherit a brand rather than build one, Identity Designed (FREE) and David Airey (FREE) teach what a documented identity contains, and the same documents tell you which of your interface decisions the guidelines actually constrain. For the words that appear in your components, the Gera Tools Brand Voice & Tone Guide Builder (FREE) scaffolds the tone decisions error messages will need. Xtensio Brand Positioning Canvas Template (FREE) keeps product surfaces pointed at one promise. The critique habit runs through Brand New (UnderConsideration) (PAID), where famous identities get argued about in public, and that style of argument is the one product reviews quietly reward.
The Working Sequence of One Screen
The areas above are a map. This is the order the skills should actually be built in, aimed at one believable flow rather than at a moodboard. Run the stages on the same product surface top to bottom, because a portfolio of six disconnected screens teaches less than one flow that went through every stage. Every stage names its exit test. The tests are the part employers read your portfolio for.
Stage one: write the flow in words before opening any design tool
Pick one real job a product asks of people. Signing up, exporting a report, rescheduling an order. List every step in plain sentences, including the ones the product does behind the scenes and the two moments a confused person contacts support. Read CareerFoundry UX Blog (FREE) on flow mapping if the sentences will not come. Done means: one page of numbered text, zero rectangles, and the hardest step circled.
Stage two: wireframe it ugly and fast on paper or a sketch canvas
Move the page of sentences into boxes with Excalidraw (FREE) or a real pencil. No color, no brand, no component library, nothing that lets you argue about shade instead of sequence. Put Laws of UX (FREE) beside you and label which principle each decision is leaning on. Done means: a clickable or flippable skeleton a stranger can complete while you stay silent, and you can name which screen they hesitated on.
Stage three: make the type and layout hold up under real data
Now the graphic fundamentals. Set a type scale with Butterick's Practical Typography (FREE) as the law, verify spacing rhythm against The Grid System (FREE), and test the flow's screens against fifteen-character names, empty lists, and a title that needs two lines. Borrow solutions you should not invent from UI Patterns (FREE). Done means: the whole flow typed in two sizes plus bold, and nothing breaks when the data is uglier than the screenshot.
Stage four: give every screen its missing siblings
Draw the states. Empty, loading, error, success, disabled, too-long, offline. For each platform target, follow the rulebooks, Apple Human Interface Guidelines (FREE) and Material Design 3 (FREE), and keep Checklist Design (FREE) open as the pre-flight. Design the error copy like a person wrote it, using tone decisions scaffolded in the Gera Tools Brand Voice & Tone Guide Builder (FREE). Done means: no screen in your file has a single state, and the empty state sells the next action instead of apologizing.
Stage five: build one screen in a browser yourself
Not the whole product. One honest screen, Responsive Web Design Certification (freeCodeCamp) (FREE) or the guided builds in Google Developers Codelabs (FREE) as the path, resized on your actual phone. This stage exists because it permanently changes what you ask of developers. Done means: your own screen works at small width, and you found one design decision you will never spec again.
Stage six: get it reviewed, then make the case study
Post the flow for critique at Design Buddies (FREE), compare your reasoning against one Growth.Design Case Studies (FREE) teardown, and write the project up honestly: the sentences from stage one, the ugly frames, the states, the build, and the one decision you changed because of evidence. Done means: a stranger can read the case and describe what you are accountable for, which is the interview answer before the interview asks it.
Tools, Money, Timelines, and the First Real Review
The learning bill can honestly be zero. The free shelf across these four areas covers reference, craft, process, code literacy, and critique community, and the tool itself is either documented for free or open source. A beginner spending money in month one is usually spending on anxiety, not on gaps. The seats that matter, the paid Figma (PAID) plan or a pattern subscription, announce themselves later, when collaboration or research time is the bottleneck that costs client money.
The calendar bill is the real one. The six stages above, run at an evening-a-day pace with the tests actually enforced, take four to six months to one believable portfolio project. That is not slow. That is the same distance every hireable junior has walked, and the designers who shortcut it produce case studies that die in the first technical interview, which is a longer detour with worse weather.
First results in this field are reviews before they are jobs. The first useful outcome of stage six is a stranger finding the error you drew and the three you did not. Expect your happy path to be called thin and your spacing to be called inherited. Reviews sting in direct proportion to how much the file was treated as a picture rather than a specification. The fix is always the states and the sentences underneath them. When a review turns personal, return it to the artifacts, because a flow written in sentences and a folder of missing states answer tone questions that opinions cannot survive.
Paying earns its place in three named moments. Structure, when self-directed stages keep ending unfinished, is what the Google UX Design Professional Certificate (PAID), Interaction Design Foundation (IxDF) (PAID), or Learn UI Design (PAID) buy. Feedback, when your circle has no senior designer, is what Frontend Mentor (PAID) review against briefs provides. Hours, when client research is the job, is what Mobbin (PAID) and Page Flows (PAID) return. A course bought when the free reference layer could have answered the question is the most common beginner tax in the whole area.
Keep a decision log through all of it, one line per meaningful change: what was wrong, what you changed, what proved it. Hiring managers read logs like that between the case studies, because the log is where judgment shows and the screenshots are where taste shows. Taste gets replaced in an afternoon. Judgment compounds.
Two doors open from the same portfolio, and they want slightly different evidence. The product-team door reads your case studies for collaboration artifacts, the decision log, the review where you changed the work because of what you heard, and a sentence about what actually shipped. The client-work door reads for speed and ownership, whether you can carry a flow from sentences to states to spec without a committee behind you. The stages above produce both kinds of artifact, but you should say which reader each case study was written for, because a portfolio that addresses nobody gets shortlisted by nobody.
One honest warning about the junior market. Screens full of showcase-gorgeous shots are not scarce. People who can walk a review through why a button moved, in states and sentences, are. Every stage above is built to produce the second kind of evidence, which is also the kind that survives tools changing, and tools keep changing.
Where the Screen Work Continues
Each area's full shelf runs through its category guide: UI/UX Design, Graphic Design, Web Development, and Branding & Identity. The neighboring roles explain the boundaries this guide keeps insisting on, so compare UX Researcher for the evidence half, Product Designer for the decision half, Web Designer for the marketing-site cousin, and Graphic Designer for the print-and-brand parent craft. The full role map is in the profession directory.
FAQ
Do I need to code to get hired as a UI designer?
No, and half of yes. Nobody will expect you to ship the product, which is why stage five builds exactly one screen and stops. The literacy changes your specs and your standing in reviews. The free shelf, starting with roadmap.sh Frontend Developer Roadmap (FREE) and Responsive Web Design Certification (freeCodeCamp) (FREE), gives you enough to know why a custom dropdown costs more than a native one, and that knowledge outlasts any framework.
Should I learn Figma or the open-source alternative first?
Whichever your projects get finished in. The Figma Learn (Help Center) (FREE) documentation and the Figma Resource Library (FREE) make the industry default fully learnable before a paid seat earns its cost, and Penpot (FREE) covers the real work without one. Judgment transfers between tools instantly. Keyboard muscle does not. Choose by what your reviewers use.
Is this role the UI half or the UX whole?
The guide trained you for the named role, surfaces and states, which commercially sits beside the research half rather than beneath it. Your flows still need Laws of UX (FREE) psychology and evidence from real use, and the sibling roadmaps for UX Researcher and Product Designer in this directory define the neighboring jobs. Hiring blurs them, so build both muscles and keep your case studies honest about which stage produced which.
What makes a portfolio project believable without a client?
The paperwork of a real job. Sentences before boxes, states beyond the happy path, a build that proves feasibility, and a written decision log. Add a review from outside your head, whether a critique community or teardown comparison, and one thing you changed because of evidence. Employers read for the process artifacts, not permission slips.
When is a paid certificate or bootcamp-style course the right buy?
When finishing is your problem rather than learning. The paid Google UX Design Professional Certificate (PAID), Interaction Design Foundation (IxDF) (PAID), and portfolio-specific guided project in this area's listings all sell structure and deadlines on top of content the free shelves largely already contain. If self-study is finishing projects, they are redundant. If it is not, they are cheap.
Are pattern libraries worth paying for early?
Not while your eye is still forming, because borrowing patterns before you can read their reasons builds cargo-cult work. Learn the rulebooks, Apple Human Interface Guidelines (FREE), Material Design 3 (FREE), and Design Systems Repo (FREE) for shipped systems, first and use them weekly. The paid archives, Mobbin (PAID) and Page Flows (PAID), earn their subscriptions the quarter you are doing client research and screenshotting apps by hand at midnight.
SkillCache Editors · Updated November 12, 2026
