UI/UX Design Fundamentals: Principles Every Beginner Should Know

Every app you open, from a food delivery app to your university's results portal, is the result of design decisions. When those decisions are good, you barely notice them: you find the button, finish the task and move on. When they are poor, you tap the wrong option, lose your progress or give up. UI/UX design is the discipline of making those decisions deliberately. This guide explains the difference between UI and UX, the process designers follow, and the core principles you can start applying today, with a hands-on exercise at the end.

UI and UX: What Is the Difference?

UX (user experience) is about the whole journey: does the product solve the right problem, in the right order, with as little effort as possible? UI (user interface) is about the visible layer: layout, typography, colour, icons, buttons and spacing. A useful way to remember it: UX decides that a fee payment needs only three steps; UI decides how those three screens look and feel. In small teams one person often does both, which is why job titles frequently combine them.

The Design Process in Five Steps

1. Research: talk to real users and watch them try the current product.
2. Define: write the problem as a clear statement, for example: "First-year students cannot find their exam hall allotment on the college portal before the exam morning."
3. Ideate: sketch many possible solutions quickly on paper. Do not open a design tool yet.
4. Prototype: turn the best idea into a clickable mock-up in a tool such as Figma (figma.com), which offers a free plan and education access for eligible students; check its current terms.
5. Test: ask users to complete a task with your prototype while you observe silently. Note where they hesitate, then go back and improve.

The process is a loop, not a straight line.

Principle 1: Visual Hierarchy

Hierarchy tells the eye what to look at first. You create it with size, weight, colour, position and spacing. On any screen, ask: what is the single most important thing here? That element should be the most prominent. On a results page, for example, the student's overall result should stand out more than the college logo or the footer links.

A practical type scale for beginners is to pick a base size, such as 16px for body text, and multiply by a fixed ratio for headings. With a ratio of 1.25, the sizes become 16, 20, 25 and about 31px. Using a consistent scale prevents the messy look of ten slightly different font sizes.

Principle 2: Consistency

Users learn your interface once and expect it to behave the same everywhere. If the primary button is blue and rounded on one screen, it should not be green and square on the next. Consistency also applies to words: do not call the same thing "Submit" on one page and "Send" on another. Designers handle this with a design system, a shared library of colours, text styles, spacing values and components such as buttons and input fields.

Principle 3: Spacing and Alignment

White space is not wasted space. It groups related items and separates unrelated ones, which is known as the principle of proximity. Many designers use an 8-point spacing system, choosing gaps only from multiples of 8 (8, 16, 24, 32 and so on). It keeps layouts orderly. Align elements to a shared edge or grid; even slight misalignments make a screen feel careless.

Principle 4: Contrast and Accessibility

Good design works for everyone, including people with low vision, colour blindness, or a cheap phone screen in bright sunlight. The Web Content Accessibility Guidelines (WCAG), published by the W3C (w3.org/WAI), set out contrast requirements between text and background. Contrast ratio is calculated from the relative luminance of the lighter colour (L1) and the darker colour (L2):

Contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Black text on white:  (1.0 + 0.05) / (0.0 + 0.05) = 21 : 1  (maximum)
Same colour on itself:  (L + 0.05) / (L + 0.05)    =  1 : 1  (invisible)

For the AA level, WCAG asks for at least 4.5:1 for normal body text and 3:1 for large text. You do not need to calculate this by hand: free contrast checkers, including the one built into Chrome DevTools, do it for you. Other accessibility habits are just as important:

• Never use colour alone to show meaning. Pair a red border with an error message in words.
• Give every input field a visible label, not just placeholder text that disappears when typing starts.
• Add alt text to meaningful images so screen readers can describe them.
• Make tap targets large enough for a thumb, with space between them.

Principle 5: Hick's Law and Fitts's Law

Two classic findings from psychology are widely used in interface design. Hick's Law says decision time grows with the number of choices, roughly following:

T = b x log2(n + 1)

T = time to decide,  n = number of equally likely choices,
b = a constant measured for a given person and task

Because time grows with the logarithm of the choices, going from 3 to 7 options adds less time than you might expect, but long, unsorted menus still slow people down. Group options into clear categories and highlight the most common one.

Fitts's Law says the time to reach a target depends on its distance and size. A common form is:

T = a + b x log2(D / W + 1)

D = distance to the target,  W = width of the target,
a, b = constants measured for the device and user

In practice: make important buttons big and place them where the thumb or cursor already is. This is why many mobile apps put primary actions near the bottom of the screen, and why tiny "close" icons in a corner feel frustrating.

Principle 6: Feedback and Forgiveness

Every action should produce a visible response. Show a loading indicator during a payment, a confirmation after a form is submitted, and a clear message when something fails, explaining what to do next. Equally important is letting users recover from mistakes: an "Undo" option, a confirmation before deleting, and forms that keep entered data when one field has an error. Losing a long application form because of one wrong date is a classic UX failure.

Exercise: Redesign a Login Screen

Pick any login or sign-up screen from an app or website you use, and spend an hour on this exercise:

1. Take a screenshot and list every element on it.
2. Mark the one action most users come for, then check whether it is the most prominent element.
3. Test the text contrast with a contrast checker and note any failures.
4. Count the choices and links. Remove or demote anything that distracts from the main task.
5. Redraw it on paper, then build it in Figma using an 8-point spacing system and one consistent type scale.
6. Show both versions to two classmates, ask them to log in, and note which one they complete faster and why.

Document the before, after and your reasoning. Three exercises like this make a strong start to a design portfolio.

Quick Reference

FAQs

Do I need to know how to draw to become a UI/UX designer?

No. Rough boxes and arrows on paper are enough for sketching. Clear thinking about users and problems matters far more than artistic skill.

Should a UX designer learn to code?

It is not required, but basic HTML and CSS help you understand what is practical to build and make working with developers much smoother.

What should be in a beginner's design portfolio?

Two or three case studies showing the problem, your research, sketches, iterations and test results. Recruiters want to see how you think, not only polished final screens.

Which degree is best for UI/UX design?

Students enter from design, computer science, psychology, engineering and arts backgrounds. A portfolio of solved problems usually matters more than the degree.