UI/UX - lesson 2 | HackIndia Skills

Key point

One spacing rule

Things that belong together should sit close together. Things that are different should have more space between them.

This is how a user understands your screen before reading every word.

Why it matters

A hackathon app often has many pieces: forms, cards, filters, buttons, charts, and status text. If every gap is random, the screen feels messy even when the code works.

Good spacing helps recruiters and judges scan your work fast. They can see what is primary, what is secondary, and what action to take next.

Your to-do

Use a spacing scale

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.

Pick one base unit, usually 4px or 8px.
Use only a few values: 4, 8, 12, 16, 24, 32, 48.
Use small gaps inside a group, like label to input.
Use medium gaps between groups, like one form field to the next.
Use large gaps between sections, like profile details to payment history.

0 of 5 done

Common mistake

Random gaps

Beginners often drag items until they feel okay. That creates 13px here, 19px there, and 27px somewhere else.

Instead, make spacing boring and consistent. Your app will look more designed without adding decoration.

Your to-do

Align the edges

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.

Choose one left edge for the main content.
Keep headings, body text, form fields, and primary buttons on that edge.
Avoid centering long text or form labels.
Align cards in a grid with equal width and equal gap.
Check that icons, text, and buttons sit on the same visual line where needed.

0 of 5 done

Tip

Use AI lightly

You can paste a screenshot into ChatGPT, Gemini, or Claude and ask: “Find spacing and alignment issues. Suggest fixes using an 8px spacing scale.”

Do not accept vague feedback like “make it cleaner”. Look for exact fixes: increase card gap to 16px, align button with input left edge, reduce label gap to 4px.

Example

Tailwind example

This card uses repeated spacing values. The title, text, input, and button share one left edge. The button is not floating randomly.

Use the same idea in React, Next.js, plain HTML, Flutter, or Figma.

<div className="max-w-md p-6 space-y-6 rounded-xl border bg-white">
  <div className="space-y-2">
    <h2 className="text-xl font-semibold">Create study group</h2>
    <p className="text-sm text-gray-600">
      Add your college, subject, and preferred time.
    </p>
  </div>

  <div className="space-y-4">
    <label className="block space-y-1">
      <span className="text-sm font-medium">Subject</span>
      <input className="w-full rounded-md border px-3 py-2" />
    </label>

    <button className="w-full rounded-md bg-black px-4 py-2 text-white">
      Create group
    </button>
  </div>
</div>

Your to-do

Do this now

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.

Open 3 screens or flows from your hackathon project.
Mark related items that should sit closer together.
Replace random gaps with a 4px or 8px spacing scale.
Align headings, text, inputs, cards, and buttons to clear edges.
Commit the changes with a message like “Fix spacing and alignment”.

0 of 5 done

Fix spacing and alignment

One spacing rule

Why it matters

Use a spacing scale

Random gaps

Align the edges

Use AI lightly

Tailwind example

Do this now

Quick check