overflow
PLRUENUA
PROCESS · 10 STEPS

How I work.

I take every site through ten steps. Not a rigid rulebook — an order that removes most problems before they show up.

Below — what I do at each step and why. After the brief we sign off each next step, so the result isn't a surprise.

  1. 01

    Brief

    First conversation. I learn the task, the audience, the budget, the deadlines. The clearer the frame — the less rework later.

    Details
    How exactly
    • A short questionnaire or a 30-40-minute call.
    • Goals concrete, not "more clients".
    • Who the audience is and what matters to them.
    • Constraints: budget, deadlines, what can't change.
    What usually breaks if you skip this
    • "Make it nice" without saying for whom.
    • Goals with no number or deadline.
    • Starting without an agreed brief — rework guaranteed.
  2. 02

    Studying the niche

    I look at 5-7 competitor sites: what works, what's missing. Where no one has gone — that's where we can go.

    Details
    How exactly
    • For each site: palette, fonts, hero structure, tone.
    • If 4 of 5 do the same — no point running there too.
    • What no one does but would help — that's the opening.
    What usually breaks if you skip this
    • "All sites look the same" — usually you looked at one.
    • Copying what's "nice" elsewhere — you end up like everyone.
    • Ignoring what works — repeating others' mistakes.
  3. 03

    Concept

    I decide how to present it: tone, accent, one main promise. One direction, not "a bit of everything".

    Details
    How exactly
    • I phrase it briefly: for whom, what we promise, how we differ.
    • I pick one direction, no blending.
    • Lock it in — then check every decision against it.
    What usually breaks if you skip this
    • "Let's blend a bit of everything" — comes out with no character.
    • The idea only in your head — forgotten in a week.
    • Concept for show — and it all falls apart in code.
  4. 04

    Structure

    Which pages, what's on each, in what order the blocks go. Here you see — landing or multipage.

    Details
    How exactly
    • Every page earns its place. "Because everyone has it" — dropped.
    • For a landing — block logic: attract → convince → call to action.
    • For multipage — transitions and a menu.
    What usually breaks if you skip this
    • An "About" page with nothing to say.
    • A blog with no plans to write for it.
    • A catalog on a landing that sells one service.
  5. 05

    Copy

    I write the copy before the code. Meaning first — form after. It changes quality a lot.

    Details
    How exactly
    • Tone chosen upfront: calm, friendly, technical.
    • Every block with a goal: what to understand or do.
    • Buttons — concrete verbs, not "learn more".
    What usually breaks if you skip this
    • Marketing fluff: "innovative solution", "the highest quality".
    • "We'll rewrite later" — means never.
    • Coding on lorem ipsum — structure for text that doesn't exist.
  6. 06

    Style

    Palette, fonts, base elements — straight into CSS variables. One set the whole site is built from.

    Details
    How exactly
    • Palette: a couple of moods, light and dark.
    • Fonts: headings and body, sometimes monospace for numbers.
    • Buttons, fields, cards — in variables, so they're reusable.
    What usually breaks if you skip this
    • Inter and black by default — lazy, not a decision.
    • Colors without a contrast check — text unreadable.
    • Elements "on the fly" — pages drift apart.
  7. 07

    Key screens

    I don't draw mockups in Figma — I code the main screens straight away, desktop and mobile. You see how it really behaves sooner.

    Details
    How exactly
    • First the hero and 2-3 key blocks — on real copy.
    • I check with long and short lines.
    • Show, collect feedback, refine until we agree.
    What usually breaks if you skip this
    • Signing off on a picture you can't reproduce in code.
    • Desktop only — it breaks on phone.
    • Demo on one device — a surprise on the phone.
  8. 08

    Development

    I finish the rest of the pages from the approved screens. Clean code, image optimization, responsive everywhere.

    Details
    How exactly
    • Stack to fit the task: static, multipage, e-commerce — different answers.
    • Images in WebP/AVIF, sized to the screen.
    • Compact code, no extra libraries.
    What usually breaks if you skip this
    • Libraries "because popular" — dead weight.
    • "Almost like the screen" = no.
    • Responsive at the last minute — layout redone.
  9. 09

    Quality control

    Checklist before handover: speed, accessibility, SEO basics, cross-browser, forms.

    Details
    How exactly
    • Lighthouse on the live domain, not localhost. Below 90 — I dig in.
    • Chrome, Firefox, Safari — on phone and desktop.
    • A test submission: I check the message arrives.
    • Every link clicked.
    What usually breaks if you skip this
    • "Works in Chrome" instead of Safari — you hear of the bug from the client.
    • The form doesn't arrive — the client doesn't know leads vanish.
    • Lighthouse measured on localhost — different on prod.
  10. 10

    Handover

    Deploy to the live domain, SSL, a short manual on editing the text. After that the site runs without me.

    Details
    How exactly
    • I set up the domain and hosting myself, I don't leave it to the client.
    • A manual: how to change the phone, add a news item, swap an image.
    • Need a fix in six months — I'm reachable, no separate contract.
    What usually breaks if you skip this
    • Handed over "as is" with no manual — the client is afraid to touch it.
    • SSL forgotten — the browser scares with a warning.
    • Vanishing right after handover — a small bug sits for weeks.

Have a project?

Drop a couple of lines about the task — I'll reply within a day: questions or a rough timeline.

Send a brief →