UI design for beginners: interface basics in 5 steps

Step 1

Learn to see components

UI (user interface) is everything a person sees and touches in a product: text, buttons, fields, icons, navigation. Almost every screen is built from a limited set of repeating parts called components. Open three apps you use daily (a bank, a messenger, food delivery), take two or three screenshots of each and label everything that repeats:

• •buttons: primary, secondary, text button;
• •input fields, switches, checkboxes, dropdowns;
• •cards and list rows;
• •navigation: a bottom tab bar, a top bar with a title, a Back button.

💡 Notice that the same things look the same everywhere. That's Jakob Nielsen's usability heuristic “Consistency and standards”: people shouldn't have to wonder whether different words or buttons mean the same thing.

Step 2

Build a hierarchy: one main action per screen

Visual hierarchy leads the eye from the most important to the least. According to Nielsen Norman Group, it's created with three tools: color and contrast, scale, and grouping. For an app screen this means a simple rule: decide which one action people take most often here and make its button the most noticeable. Every other action is a secondary button or a text link.

• •the screen title is the largest text; captions and helper text are the smallest;
• •the accent color is only for the main action and active states, not decoration;
• •don't make destructive actions (delete, cancel a subscription) the primary button, and don't mark them with red alone;
• •only a few text sizes: each new size should mean something in the hierarchy, not appear at random.

💡 The squint test NN/g describes: squint or blur the screenshot. If the main action is still the first thing you notice, the hierarchy works.

Step 3

Spacing and grid: tidiness without color

A screen is often broken not with colors but with random spacing: 13 px here, 17 px there. Pick a base unit, such as 8 px, and make every spacing value a multiple of it (4 px for small gaps). Group by proximity: things that belong together sit closer, separate groups sit further apart. Then the structure shows even in a black-and-white layout.

• •the same side margins across the whole screen;
• •more space between groups than inside a group;
• •alignment to shared lines, not by eye;
• •in Figma, auto layout keeps the gaps between items once you've set them.

Step 4

Design states, not just a “pretty picture”

A finished mockup shows one moment, but an interface lives in many situations. Nielsen's first heuristic is visibility of system status: people should always understand what's going on. So every component is a set of states:

• •button: default, hover (on desktop), pressed, disabled, keyboard focus, loading;
• •field: empty, focused, filled, error. Put the label above the field, not inside it: NN/g explains that placeholder text disappears as people type, which makes it harder to check what they've entered;
• •an error message is specific and next to the field, marked not only by color but also by text or an icon;
• •screen: loading (for example, a skeleton: gray placeholders in place of content), empty state, network error.

💡 An empty state isn't emptiness. NN/g recommends using it to explain what will appear here and to offer a button for the first action.

Step 5

Check accessibility and do the exercise

A few numbers from the WCAG 2.2 accessibility standard are worth knowing by heart: regular text needs a contrast ratio of at least 4.5:1 against its background, large text 3:1; field borders, icons and other essential UI parts also need at least 3:1 against adjacent colors. The minimum tap target is 24 by 24 CSS pixels, and main buttons are better larger. Now an exercise for tonight:

• •draw a sign-in or sign-up screen for an imaginary app in Figma;
• •turn the button and the field into components with all the states from step 4;
• •add an error screen (wrong password) and a loading screen;
• •check contrast with a plugin or an online checker and fix whatever fails.

💡 Show the result in the community and ask a specific question: “What do you notice first on this screen?” The answer tells you right away whether your hierarchy works.