Every app you open, from a bus-ticket booking app to your college results page, was designed by someone. When it feels easy, you hardly notice it. When it is confusing, you notice at once. UI/UX design is the work of making digital products useful, easy and pleasant for the people who use them. This first lesson gives you the big picture before we go deeper in the lessons that follow.
What do UI and UX stand for?
UX means user experience: everything a person feels and goes through while trying to get something done with a product. UI means user interface: the screens, buttons, text, icons and colours the person actually sees and touches.
A simple way to remember the difference: UX asks “Can people do what they came to do, without stress?” UI asks “Does each screen look clear, consistent and inviting?” The two overlap so much that many job titles say “UI/UX Designer”. We compare them properly in the next lesson, UX vs UI.
Why good UI/UX design matters
Think of a food-delivery app at 9 pm. A hungry user wants to find a dish, check the price and pay in under a minute. If the search hides vegetarian filters, or the final price jumps at checkout without explanation, the user gets annoyed and may leave. Nothing was technically broken, yet the experience failed.
Good design matters because it:
- helps people finish tasks faster and with fewer mistakes;
- builds trust, especially for payments, health and government services;
- reduces support calls and complaints for the business;
- makes products usable for more people, including those with disabilities (accessibility).
What does a UI/UX designer do?
The day-to-day work changes from company to company, but most designers move through a similar loop of activities:
| Activity | What it means | Lesson in this track |
|---|---|---|
| Understand the problem | Agree on goals with the team and learn what users need | Design thinking |
| Research users | Talk to and observe real people | User research, Personas |
| Organise content | Decide what goes where and what it is called | Information architecture |
| Sketch layouts | Draw low-detail screens quickly | Wireframing |
| Make it clickable | Link screens so people can try the flow | Prototyping in Figma |
| Design the visuals | Hierarchy, colour and type | Lessons 9 to 11 |
| Test and improve | Watch people use it and fix problems | Usability testing |
Tip: Design is not a straight line. You will often go back: a usability test may show that a label is confusing, which sends you back to the information architecture or the wireframe. That is normal and healthy.
Tools designers use today
You do not need many tools to start. Paper and a pen are still excellent for early ideas. For digital design, Figma is the most widely used tool in product teams right now. It runs in the browser, has a free plan, and lets designers and developers work in the same file. Its key features, which we use later in this track, are:
- Auto layout – frames that grow and shrink with their content, similar to CSS Flexbox;
- Components and variants – reusable buttons, cards and inputs with different states;
- Variables – saved colours, numbers and text values, including light and dark modes;
- Prototyping – links, overlays and Smart Animate transitions between screens;
- Dev Mode – a view where developers inspect sizes, colours and spacing.
Watch out: Do not spend your first month learning every tool on the market. Adobe XD, for example, is in maintenance mode and not a good choice for new learners. Learn the thinking first and one main tool well.
Skills you will build
UI/UX design mixes soft and hard skills. Empathy and curiosity help you understand users. Clear writing helps you label buttons and explain decisions. Visual skills such as spacing, colour and typography make screens readable. A basic understanding of HTML and CSS helps you design things that can actually be built – the HTML and CSS tracks on this site are a good companion to this one.
How to use this track
- Read the lessons in order; each one builds on the previous one.
- Do the exercise at the end of every lesson – design is learned by doing.
- Pick one small practice project (for example, a bus-ticket booking app for a town you know) and carry it through all twelve lessons.
- Keep your sketches and notes. By lesson 12 you will have a mini case study for your portfolio.