INTERLAB
How to build · 01

UX/UI & Product Design

Research, audits, Figma, prototypes, design systems, grids, typography, accessibility and motion.

Read: 0 / 18UX FundamentalsUX ResearchUX AuditLayout & GridTypography & ColorUI ComponentsFigmaPrototypingDesign SystemsUX PatternsResponsive DesignAccessibilityMotion Design

UX Fundamentals

  1. Fundamentals✓

    UX vs UI: what’s the difference and why a product needs both

    UX (user experience) is the path a person takes to reach their goal: which steps they go through, where they hesitate and what stops them. UI (user interface) is how that path looks: buttons, fonts, colours, spacing. UX answers “does it work?”, UI answers “is it clear and pleasant to use?” — which is why a product needs both: a beautiful screen without a thought-through flow doesn’t sell, and a good flow in a confusing wrapper never gets completed.

    Beginner · 7 min read

UX Research

  1. Fundamentals✓

    UX research: finding out what users need without a big budget

    UX research is a way to test a team’s assumptions on real people before paying for them in development. On a small budget, three tools are enough: interviews about past experience to understand tasks and motives; a usability test with five participants to see where the interface gets in the way; and analytics to learn how many people stumble at the same spot. The core rule is to trust what people do, not what they say they will do.

    Beginner · 10 min read

UX Audit

  1. How-to✓

    UX audit: a step-by-step review of a user flow

    A UX audit is an expert review of a specific user flow: from arriving on the site to the target action, such as submitting an enquiry. It is built on a heuristic evaluation against Jakob Nielsen’s 10 heuristics, carried out independently by 3–5 evaluators who then rate each problem on a 0–4 severity scale. An audit finds obvious problems quickly, but it does not replace research with real users.

    Intermediate · 9 min read · practice ~1–2 h

Layout & Grid

  1. Fundamentals✓

    Visual hierarchy, grids and spacing: how an interface guides the eye

    Visual hierarchy is the order in which people notice elements on a screen: the main thing first, details later. It’s set by size, font weight, contrast, position on the page and the distance between elements. A grid and a consistent spacing scale make that order predictable, and white space separates one idea from the next — without them, even good copy reads like a solid wall.

    Beginner · 7 min read

Typography & Color

  1. Fundamentals✓

    Typography and colour in interfaces: readability, contrast, accessibility

    A readable interface rests on a few rules: a limited type scale, lines no longer than 50–75 characters, line height around 1.5 for body text, and a typeface with well-made Cyrillic. Colour is assigned by role — neutrals, brand, accent and semantic — and checked for contrast: under WCAG, at least 4.5:1 for regular text and 3:1 for large text and interface controls. Meaning is never carried by colour alone.

    Beginner · 6 min read

UI Components

  1. Fundamentals✓

    Anatomy of a UI component: button, input, card and their states

    A UI component is a reusable interface element with predefined parts, variants and states: a button, input or card is specified once so it can be built without guesswork. For each component you define its anatomy (what it is made of), its variants (primary, secondary, sizes) and every state — default, hover, focus, active, disabled, loading and error. A state missing from the mockup still ends up in the product; the only difference is that whoever writes the code decides how it looks.

    Beginner · 11 min read

Figma

  1. Tutorial✓

    Figma from scratch: frames, Auto Layout and components

    Four concepts are enough to start working in Figma: a frame is the container for a screen or element; Auto Layout is the set of rules a frame uses to arrange its contents (direction, padding, gap, Hug and Fill); a component is a main element whose copies update with it; variants and component properties are its states and adjustable parts. These four building blocks make up a button, a card and a whole screen that a developer later opens in Dev Mode.

    Beginner · 14 min read · practice ~1.5–3 h

Prototyping

  1. How-to✓

    Prototyping: from sketch to clickable prototype

    A prototype is a testable version of an interface that answers a specific question before any code is written: will people understand how to book, find the right button, get through the time-slot step. Fidelity follows the question: a sketch or wireframe is enough to test the logic of a flow, while perception and micro-interactions need a clickable high-fidelity prototype. Start not with screens but with a user flow, and finish by testing with five people from the target audience.

    Beginner · 10 min read · practice ~30–60 min

Design Systems

  1. Tutorial✓

    A design system in practice: tokens, components, rules

    A design system is a set of named decisions (tokens), components and usage rules shared by design and code. A practical start is two tiers of tokens: base tokens hold the palette and scales, semantic tokens name roles such as “accent” or “muted text” and switch in dark mode. Tokens are stored as JSON in the W3C DTCG format and compiled into CSS variables that components read.

    Intermediate · 10 min read · practice ~1.5–3 h

UX Patterns

  1. How-to✓

    Loading, empty, error: the interface states everyone forgets

    Every screen has at least four states — loading, empty, error and normal — yet mockups usually cover only the last one. A product feels premium when waiting is shown honestly (a skeleton or a progress bar), an empty screen points to the next step, an error explains how to fix it, and risky actions can be undone. Plan these states into the designs and the spec from day one; otherwise they end up as blank screens and “Something went wrong”.

    Intermediate · 6 min read · practice ~30–60 min
  2. How-to✓

    Painless forms: design decisions that bring in more leads

    Forms don't lose leads because of button colour — they lose them to friction: extra fields, disappearing hints, the wrong keyboard on mobile and errors that scold people before they've finished typing. Keep only the fields you need in a single column, put a label above each one, enable autofill and the right input types, validate after the user leaves a field and write errors as hints. And next to the form, offer an alternative — in Kazakhstan, that's often WhatsApp.

    Intermediate · 6 min read · practice ~30–60 min
  3. Tutorial✓

    Designing a dashboard: from user questions to the screen

    A dashboard is designed from a role’s questions, not from the available data: first find out who looks at the screen and what decisions they make, then pick a metric with a comparison and a form for each question — a KPI card, a line, bars or a table. Nielsen Norman Group recommends that answers be readable at a glance, so the screen keeps only what helps people act, and loading, empty and error states are designed for every widget.

    Intermediate · 11 min read · practice ~1.5–3 h

Responsive Design

  1. Fundamentals✓

    Responsive design: how a website adapts to phones

    Responsive design means the same page rearranges its grid, text and image sizes to fit the screen width: on a desktop, columns sit side by side; on a phone, they stack. It relies on the viewport tag, a fluid grid and CSS rules for different widths (breakpoints). The result has to be checked not only in a browser emulator but on real phones.

    Beginner · 6 min read

Accessibility

  1. Fundamentals✓

    Interface accessibility: WCAG for designers and product managers

    Accessibility is the quality that lets people with visual, hearing, motor and cognitive disabilities use an interface — and, along the way, everyone who is temporarily or situationally limited. The yardstick is the W3C standard WCAG 2.2: four principles (perceivable, operable, understandable, robust) and success criteria at levels A, AA and AAA; level AA is the target for most sites. Contrast, focus, target size, labels and error messages are decided in the design — fixing them after development costs more.

    Intermediate · 8 min read

Motion Design

  1. Fundamentals✓

    Microinteractions and motion: where they help and where they hurt

    Good animation answers a user's question: “Did that register?”, “What changed?”, “Where did this come from and where did it go?”. Most interface animations fit within 100–500 ms, slow down as they settle, animate only transform and opacity, and switch off when someone has asked their system to reduce motion. Animation that explains nothing and only adds delay or pulls attention away from the call to action hurts the product, however beautiful the effect.

    Beginner · 6 min read
  2. Deep dive✓

    Easing and duration: why one animation feels premium and another feels cheap

    What separates premium motion from cheap motion isn't the effect itself but easing and duration: the element starts quickly and settles softly instead of moving at a constant speed like a conveyor belt. Ease-out usually fits elements entering the screen, ease-in fits elements leaving it, ease-in-out fits moving between two points, and most interface animations fall within 100–400 ms depending on distance and element size. To keep the whole product moving to one rhythm, the team fixes a few named durations and curves as design-system tokens.

    Intermediate · 8 min read
  3. Deep dive✓

    Scroll animations: revealing blocks, parallax and video driven by scrolling

    Scroll animations come in three kinds: blocks that reveal as they enter the viewport, motion tied to the scroll position, and video whose frames follow the scroll forwards and backwards. A good scroll animation moves only transform and opacity, plays a reveal once, and switches off for anyone who has turned on "reduce motion" in their system. If the text can't be read without the animation, or visitors have to "scroll through" an effect to reach the contact button, that's a mistake, not a technique.

    Intermediate · 9 min read
  4. Deep dive✓

    Transitions between screens and states: how motion explains where you've landed

    A screen transition exists so people understand where they've landed and how to get back: a step deeper slides in from the right or grows out of the tapped element, going back plays the same motion in reverse, and a modal rises from the bottom. A good transition is short (around 200–300 ms for large screen changes), never blocks input, keeps a shared element — like a card expanding into a page — and falls back to a simple fade when the user has turned on “reduce motion”.

    Intermediate · 10 min read

Learning paths with this direction

UX/UI design: from research to a design system · 9 →Motion and animation · 4 →Markup and layout: HTML and CSS · 7 →← All directions
Tell us about your task — we'll review your request and get back to you

Got a project?
We'll scope and estimate it — for free.

Tell us about the product or the problem. After reviewing the task we'll come back with an architecture, a timeline and a price for the first version.

  • Scope and risks estimated before we start
  • NDA — yours or ours
  • Work starts within a week
Message on WhatsApp

Please do not send passwords, access keys or source code through this form — we will agree a safe way to share access separately.

By clicking the button you agree to the processing of your personal data.