Editorial note: Original educational article prepared for Rihuum readers. Check vendor documentation and local regulations before making material technical or financial decisions.
Understand the difference and connection between UX and UI
User experience design considers how a person completes a task across a product or service. It includes research, information architecture, interaction, content, accessibility and testing. User-interface design focuses more directly on the visual and interactive presentation of screens and components.
In real projects, the two overlap. A beautiful screen cannot rescue a confusing flow, while a logical flow can still fail if text is unreadable or controls are inconsistent. Beginners should learn both foundations before specialising.
Choose a small, believable project
Start with a familiar problem such as booking a salon appointment, finding a hotel room, tracking course progress or reporting a maintenance issue. Avoid redesigning an enormous global product without access to its users or business constraints.
Write the target user, situation, main task and desired outcome. State assumptions clearly. A focused project allows you to complete the full design process and explain decisions.
Conduct lightweight research
Interview a small number of relevant people about their current behaviour, not only what features they say they want. Ask them to describe the last time they performed the task, where they struggled and what alternatives they used.
Organise findings into recurring needs and problems. Do not invent a persona filled with irrelevant demographics. A useful research summary connects evidence to design priorities.
Map the task and information
Draw the steps from the user’s starting point to completion. Include decisions, errors and recovery. Then list the information needed at each step. This exposes missing states before visual design begins.
Keep navigation labels familiar and specific. Group information by user expectation rather than internal organisational structure. Test the flow with a paper sketch before spending time on polished screens.
Create wireframes before visual styling
Wireframes show hierarchy, content and interaction without relying on colour and decoration. Begin with the smallest important screen and consider loading, empty, error and success states.
Use realistic content lengths. Placeholder text hides layout problems. Annotate behaviour that cannot be understood from a static screen, such as validation, permissions and confirmation.
Build a simple visual system
Define type sizes, spacing, colour roles, button styles, form patterns and reusable components. Consistency reduces design effort and helps users predict behaviour. Do not create a new style for every screen.
Check contrast, touch-target size and keyboard focus. Visual design should establish hierarchy and confidence without making the interface noisy. Use decoration only when it supports meaning or brand.
Prototype and test with users
A prototype should be detailed enough to test the main task, not every future feature. Give participants a realistic goal and observe where they hesitate. Avoid teaching them how the design works during the test.
Record issues by severity and frequency. Change the design, explain the reasoning and test again. The ability to respond to evidence is more important than defending the first idea.
Write a portfolio case study that shows thinking
A strong case study explains the problem, role, constraints, process, evidence, decisions, final result and what you would improve. Show selected artefacts, not every screen you created.
Be honest when a project is self-initiated and when research is limited. Employers value clear reasoning and communication. A polished picture without context does not demonstrate how you work.
A twelve-week practice plan
| Weeks | Focus |
|---|---|
| 1–2 | Design principles, accessibility and interface analysis |
| 3–4 | Research and task flows |
| 5–6 | Wireframes and content |
| 7–8 | Visual system and responsive screens |
| 9–10 | Prototype and usability tests |
| 11–12 | Iteration and portfolio case study |
Frequently asked questions
Do I need to know how to draw?
No. Clear thinking, layout, interaction and communication matter more than illustration skill.
Is learning one design tool enough?
A tool supports the work, but research, accessibility, systems thinking and testing are the transferable skills.
How many portfolio projects do I need?
Two or three complete, well-explained projects are more useful than many shallow redesigns.
Official references and further reading
Use these primary or official resources to confirm time-sensitive technical details.