UI/UX - lesson 1 | HackIndia Skills

Key point

One screen, one job

A good screen makes one job obvious. The user should know where they are, what matters most, and what to do next.

Before you polish colours or fonts, decide the screen’s primary action. Everything else should support it or move lower.

Start with a 5-second read

Open one screen from your project. Show it to a friend for 5 seconds. Then hide it and ask: what is this screen for, and what would you tap first?

If they cannot answer, the screen has a hierarchy problem. This is common in hackathon apps because teams add features fast and give every element equal weight.

Your to-do

Build the hierarchy

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Name the screen in one short title, like “Track expenses” or “Find blood donors”.
Choose one primary action, like “Add expense”, “Request donor”, or “Generate summary”.
Place the primary action where it is easy to notice without hunting.
Group related details together instead of scattering cards, buttons, and stats.
Move secondary actions lower, smaller, or behind a menu if they are not needed first.

0 of 5 done

Common mistake

Equal weight breaks clarity

Do not make the title, cards, links, badges, and buttons all compete. When everything is bold, colourful, and large, nothing feels important.

For example, a dashboard with 6 same-size cards and 4 bright buttons may look full, but it does not guide the user.

Example

Screen audit file

Use a small note file before editing the UI. This helps your team agree quickly, even if you are building in React, Flutter, or plain HTML.

Keep it in your repo so reviewers can see that your design choices were intentional.

screen-audit.md

Screen: Student budget dashboard
User goal: Check spending and add a new expense
Primary action: Add expense
Most important info: This month’s remaining budget
Secondary info: Recent expenses, category split
Remove or move lower: Export CSV, settings, old alerts
5-second test result: Friend noticed remaining budget, but tapped category split first
Fix: Make Add expense the only primary button and move category split below recent expenses

Tip

Use AI for critique

You can ask ChatGPT, Gemini, or Claude to review a screenshot. Do not ask for a redesign first. Ask what the screen’s main action appears to be.

Check the answer against your real goal. If the AI guesses wrong, a recruiter or judge may also miss it.

Prompt:
Look at this app screen as a first-time user.
1. What do you think this screen is for?
2. What is the first action you would take?
3. Which elements compete for attention?
Keep the answer short and practical.