UX/UI Design for Web Projects

Typical situation: developers receive mockups two days before sprint start. In Figma — 80 frames, half without mobile states, buttons are not components, colors hardcoded as hex values without tokens. Result — the developer makes design decisions right in the code, and after three months UI maintenance becomes guesswork.

Design that works in development is built differently.

Figma as an Engineering Tool

Figma is not just "where we draw." It's an environment where a developer should get precise values without calling the designer.

What this means in practice:

Auto layout everywhere. Components built without auto layout break when text changes. A button with fixed width that doesn't stretch for a long label — classic.

Design tokens in Variables. Figma Variables (2023+) allow binding colors, spacing, radii to named variables. color/primary/500, spacing/md, radius/button — this translates to CSS custom properties or Tailwind config one-to-one. Without tokens, design and code diverge within a month.

Components with variants. Button/Primary/Default, Button/Primary/Hover, Button/Primary/Disabled — all in one component set. Developer sees all states at once, instead of asking "what does disabled look like?" for every component.

Prototype for flows. Interactive prototype is cheaper than fixes after development. Especially for non-trivial flows: multi-step form, wizard, onboarding — they need to be clicked before writing code.

Responsiveness: Not Three Breakpoints, but a System

Common mistake — making "desktop + mobile," ignoring tablets and non-standard resolutions. In 2024, tablet traffic is 8–12% depending on niche — that's not zero.

We design for a breakpoint system compatible with what's used in code. If frontend is on Tailwind CSS — breakpoints sm:640, md:768, lg:1024, xl:1280, 2xl:1536. Designer works with same values in Figma.

Fluid typography and fluid spacing via clamp() — when font and spacing change smoothly between breakpoints without jumps. Not needed for every project, but for landings and public sites improves perception on non-standard screens.

Process: From Wireframe to Handoff

Full design cycle looks like this:

1. UX research and analytics. For existing products — Hotjar / Microsoft Clarity analysis: heat maps, scroll maps, session recordings. For new — customer journey map, competitor analysis, interviews if project is large.

2. Information Architecture. Page structure, navigation, content hierarchy. At this stage — only diagrams, no visuals.

3. Lo-fi wireframes. Grayscale, no details. Goal — agree on block placement and page logic. In Figma or Whimsical.

4. Design system / UI kit. Before drawing pages — components. Typography scale, color system, spacing scale, basic elements: buttons, inputs, cards, modals. Without this, design falls apart.

5. Hi-fi mockups. Final design with real content. Not placeholder text — real headlines, real numbers. Design with lorem ipsum hides layout problems.

6. Handoff. Figma Dev Mode or Zeplin. Developer sees CSS values, exports icons to SVG, sees tokens. Comments on non-standard behaviors — in annotations right in Figma.

What Affects Conversion and Retention

UX is not just about beauty. Several concrete patterns:

Registration form. Every extra field lowers conversion. Name + email + password versus name + surname + phone + birth date + email + password + confirm password. Progressive profiling — collect data gradually after user gets value.

Error states. Inline validation instead of submit-and-scroll-to-top. Error should appear next to field on blur or submit, not in toast in corner.

Loading states. Skeleton screens instead of spinners on content blocks. User sees page structure while data loads — reduces perceived wait time.

Empty states. Empty list with no explanation — UI bug. "You don't have orders yet" + CTA — normal empty state.

Design System: When It's Needed and When It's Overengineering

Design system is justified if:

• 2+ designers work on the project
• Multiple related products (mobile app + web + admin panel)
• Frequent UI updates from product side

For a business card site or landing, design system is overengineering. Sufficient UI kit with basic components.

If project is on React, design system logically builds on Radix UI (headless) with Tailwind CSS for styles — that's what Shadcn/ui does. Components are fully controllable, no dependency lock-in to third-party library.

Timeline Guidelines

Timelines depend on number of unique screens and component base complexity. Cost is calculated individually.