UI/UX Introduction (UI/UX Design Tutorial)

By the end of this lesson you will be able to explain UI and UX in plain words, spot the difference in any app you use, and change a small screen to make it clearer.

Think of the last time you booked a train ticket, paid a shop with UPI or checked a result on a college website. Some apps felt easy. Others made you tap back and forth, guess what a button did, or wonder if your money had gone. That feeling is the work of UI and UX design.

What is UX?

UX stands for user experience. It is the whole experience a person has while trying to get something done with a product. A product here means an app, a website, a ticket machine or even a printed form.

UX asks questions like these:

Who is using this, and what are they trying to do?
What steps do they need to take?
Where do they get stuck, confused or worried?
Did they finish the task, and how did they feel?

Here is an everyday comparison. Imagine two chemist shops in Lucknow. Both sell the same medicines at the same price. In the first shop, the counter is near the door, the staff ask what you need and you leave in two minutes. In the second shop, you wait in the wrong queue, nobody explains the bill and you are not sure if you got the right strip. The medicines are the same. The experience is very different. UX design is about making the first shop happen, on a screen.

What is UI?

UI stands for user interface. It is the part of the product you actually see and touch: buttons, text, colours, icons, input boxes, spacing and the way things move.

If UX is the journey, UI is the road signs, the paint and the shape of the road. A good UI makes the next step obvious. A poor UI hides the step, even if the journey itself is well planned.

UI vs UX side by side

	UX (user experience)	UI (user interface)
Main question	Does this solve the person's problem easily?	Is each screen clear, readable and pleasant?
Typical work	Research, user flows, structure, testing	Layout, typography, colour, components, states
Typical output	Personas, journey maps, flows, wireframes	High-fidelity screens, design systems, prototypes
Example	Show the total price before asking for payment	Make the total bold and the Pay button stand out

In real teams the two overlap a lot. Many job posts ask for a product designer, who does both. You will learn both in this course.

See the difference: a ticket card

Run this example. It shows the same ticket information twice. The first card has weak UI: everything is the same size, the button looks like plain text, and the price is hidden in a sentence.

HTMLTry it yourself

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ticket card: before and after</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f4f4f7; padding: 16px; display: grid; gap: 16px; max-width: 360px; }
    .card { background: #fff; border-radius: 8px; padding: 16px; }
    /* Before: no hierarchy */
    .before p { margin: 0; font-size: 14px; color: #555; }
    .before a { font-size: 14px; color: #555; }
    /* After: clear hierarchy */
    .after .route { font-size: 20px; font-weight: 700; margin: 0 0 4px; color: #1a1a2e; }
    .after .meta { margin: 0 0 16px; color: #4b5563; }
    .after .price { font-size: 24px; font-weight: 700; margin: 0 0 16px; color: #1a1a2e; }
    .after button { width: 100%; padding: 12px; font-size: 16px; font-weight: 600; border: 0; border-radius: 8px; background: #5b21b6; color: #fff; }
  </style>
</head>
<body>
  <div class="card before">
    <p>Train 12015 from New Delhi to Jaipur on 14 Nov, departs 06:10, seat available, fare is ₹845 including charges. <a href="#">continue</a></p>
  </div>
  <div class="card after">
    <p class="route">New Delhi to Jaipur</p>
    <p class="meta">Train 12015 · 14 Nov · 06:10 · Seats available</p>
    <p class="price">₹845</p>
    <button type="button">Book this train</button>
  </div>
</body>
</html>

You should see two white cards. Your eye jumps straight to the route, the price and the purple button in the second card. In the first card you have to read every word. That is visual hierarchy, a UI idea you will study in Visual Design Principles.

See the difference: an experience problem

UX problems are often about order and information, not looks. In this example, both buttons look fine. But the first flow asks for payment before it tells you the convenience fee. The second shows the full total first.

HTMLTry it yourself

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden fee vs clear total</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; max-width: 360px; color: #1a1a2e; }
    section { border: 1px solid #d4d4dc; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
    h2 { font-size: 16px; margin: 0 0 8px; }
    table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
    td { padding: 4px 0; }
    td:last-child { text-align: right; }
    .total td { font-weight: 700; border-top: 1px solid #d4d4dc; }
    button { padding: 10px 16px; border: 0; border-radius: 8px; background: #5b21b6; color: #fff; font-size: 15px; }
  </style>
</head>
<body>
  <section>
    <h2>Flow A: fee appears after you tap Pay</h2>
    <p>Fare: ₹845</p>
    <button type="button">Pay now</button>
  </section>
  <section>
    <h2>Flow B: full total before payment</h2>
    <table>
      <tr><td>Fare</td><td>₹845</td></tr>
      <tr><td>Convenience fee</td><td>₹20</td></tr>
      <tr class="total"><td>Total</td><td>₹865</td></tr>
    </table>
    <button type="button">Pay ₹865</button>
  </section>
</body>
</html>

Flow B builds trust. The person knows the exact amount, and the button repeats it. No surprise appears after they commit. This is a UX decision, and it then shapes the UI.

Who does the work?

You will meet these roles in Indian product companies, agencies and startups:

UX researcher: talks to users, runs tests and turns findings into insights.
UX designer: plans flows, structure and wireframes.
UI designer or visual designer: creates the final look, colours, type and components.
Product designer: does most of the above for one product area.
UX writer: writes the words on buttons, errors and screens.

In a small startup in Pune, one person may do all five jobs. That is normal.

How this course works

You will follow the order designers usually follow in real projects:

Understand people through research.
Plan structure and flows.
Sketch wireframes.
Apply visual design: hierarchy, type, colour, spacing.
Build screens and prototypes in Figma, step by step.
Test with real users and improve.
Hand the design to developers, and write a case study for your portfolio.

The small HTML demos let you see each principle and change it. You do not need to be a developer. If you want to learn the code side properly, the HTML tutorial and CSS tutorial are there.

Common mistakes

Thinking UX means "making it pretty". Beautiful screens can still fail if the steps are confusing.
Designing for yourself. You are not the user. A college student and a 60-year-old shopkeeper may use the same app very differently.
Starting in Figma on day one. Tools come after you understand the problem.

Key points

UX is the whole experience of getting a task done; UI is the part people see and touch.
UX decides what happens and in what order; UI decides how each screen looks and feels.
Clear hierarchy helps people find the important thing first.
Showing full information early, like a total price, builds trust.
In real teams the roles overlap, and product designers often do both.

Exercise

Pick one app you use often, such as a UPI app, a food delivery app or a railway booking app. Write three things about its UX (steps, order, how it made you feel) and three things about its UI (colours, buttons, text size). Then open the first example and change the second card so it shows a train from Pune to Mumbai at ₹380, with a green button.

Show solution

HTML

<div class="card after">
  <p class="route">Pune to Mumbai</p>
  <p class="meta">Train 12124 · 20 Nov · 07:15 · Seats available</p>
  <p class="price">₹380</p>
  <button type="button" style="background:#0b6e4f">Book this train</button>
</div>

The dark green #0b6e4f keeps white text readable (about 6.2:1 contrast). Your UX notes might say "the app shows the fare before login" or "I could not find the cancel option", and your UI notes might say "the Pay button is large and blue".

Quick Quiz

1. Which statement describes UX best?

2. Showing the full total before the Pay button is mainly a decision about:

3. A designer who handles research, flows and final screens for one product area is often called a: