A BEGINNER'S GUIDE TO UI/UX DESIGN
A practical introduction to the core ideas, process and portfolio skills behind UI/UX design.
UI/UX can look complicated from the outside, but the basics are straightforward: understand the person using the product, make the flow clear, and design an interface that supports the task. This guide gives you a practical starting point without burying the field in jargon.
DECODING THE BASICS
User Interface (UI) design covers the visual and interactive layer of a product: layout, typography, buttons, icons, states and the way those pieces work together. Good UI should feel clear, consistent and easy to act on.
User Experience (UX) design looks at the whole experience around a task, not just the screen. It asks whether the product is useful, understandable, efficient and appropriate for the people who need it.
The difference? Think of a house: UX is the layout and flow; UI is what you see and touch as you move through it.
PILLARS OF GOOD DESIGN
Visual Hierarchy
Using size, spacing, color and contrast to show what matters first and where the eye should go next.
Consistency
Keeping patterns predictable in both appearance and behavior so users do not have to relearn the interface.
Feedback
Making the result of an action visible, whether it succeeded, failed, loaded or needs another step.
Simplicity
Removing unnecessary choices and visual noise so the important task remains easy to understand.
Accessibility
Designing so people with different abilities, devices and ways of interacting can still use the product.
THE UX DESIGN PROCESS
A useful UX process is iterative: learn, make, test and adjust instead of treating design as a one-shot handoff.
User Research
Learn what users are trying to do, what gets in the way and what context shapes their decisions.
Ideation
Explore several possible ways to solve the problem before committing to one direction.
Prototyping
Turn ideas into wireframes or prototypes that are concrete enough to review and test.
Testing
Put the prototype in front of real users, observe where they struggle and ask focused questions.
Analysis & Iteration
Look for patterns in the evidence, refine the design and test the important changes again.
BUILDING A PORTFOLIO
A beginner portfolio does not need ten projects. One or two thoughtful case studies that show how you think are more useful than a gallery of polished screens.
→ State the problem, the user and the constraint before showing the solution.
→ Show the evidence and process that mattered: research, flows, wireframes and prototypes.
→ Explain why you made the key decisions, including what changed after feedback or testing.
EMBARKING ON YOUR JOURNEY
Treat this as a starting map, not a checklist you need to finish before you can design. Pick a real problem, make something, test it with people and write down what you learned. Repeating that cycle will teach you more than collecting tools or memorizing terminology.
For a longer version with additional detail and the full works-cited section, use the original PDF guide.
Download Full UI/UX PDF GuideTHINGS I WISH BEGINNERS HEARD EARLIER
Figma is not UX
Knowing the tool helps. Knowing what problem you are solving helps more.
You do not need a fake process
If you did not run 27 interviews, don’t write “extensive user research”. Show the evidence you actually had and the decision it changed.
Your first work can be ugly
The point of the first project is to learn enough to make the second one less bad.
Copy is interface
A button label can fix or create as much friction as the shape of the button.
Ask “what happens next”
Most weak flows look fine on one screen. The problems show up in states, errors, returns and weird edge cases.
Ship something real
One project with a real user and a real constraint will teach you more than five perfect Dribbble screens.