overflow
PLRUENUA
ПРОЦЕС · 10 ЕТАПІВ

Як я працюю.

Кожен сайт веду через десять кроків. Не жорсткий регламент, а порядок, який прибирає більшу частину проблем заздалегідь.

Нижче — що роблю на кожному етапі і навіщо. Після брифу погоджуємо кожен наступний крок, щоб результат не був сюрпризом.

  1. 01

    Бриф

    Перша розмова. Дізнаюся задачу, аудиторію, бюджет, терміни. Чим точніша рамка — тим менше переробок далі.

    Детальніше
    Як саме
    • Коротка анкета або дзвінок на 30-40 хвилин.
    • Цілі конкретні, а не «більше клієнтів».
    • Хто аудиторія і що для неї важливо.
    • Обмеження: бюджет, терміни, що не можна змінювати.
    Що зазвичай ламається, якщо пропустити
    • «Зроби красиво» без пояснення для кого.
    • Цілі без числа і терміну.
    • Старт без узгодженого брифу — переробки гарантовані.
  2. 02

    Вивчення ніші

    Дивлюся 5-7 сайтів конкурентів: що працює, чого бракує. Туди, куди ніхто не пішов — можемо йти ми.

    Детальніше
    Як саме
    • Для кожного сайту: палітра, шрифти, структура hero, тон.
    • Якщо 4 з 5 роблять одне — бігти туди ж сенсу немає.
    • Чого ніхто не робить, але корисно — це можливість.
    Що зазвичай ламається, якщо пропустити
    • «Усі сайти однакові» — зазвичай дивився один.
    • Копіюю «гарне» в інших — виходить як у всіх.
    • Ігнорую що працює — повторюю чужі помилки.
  3. 03

    Концепція

    Вирішую, як подати: тон, акцент, одна головна обіцянка. Один напрямок, а не «потроху з усього».

    Детальніше
    Як саме
    • Коротко формулюю: для кого, що обіцяємо, чим відрізняємось.
    • Обираю один напрямок, не змішую.
    • Фіксую — потім звіряю з цим кожне рішення.
    Що зазвичай ламається, якщо пропустити
    • «Змішаймо все потроху» — вийде без характеру.
    • Ідея лише в голові — за тиждень забута.
    • Концепція для галочки — на верстці все розповзається.
  4. 04

    Структура

    Які сторінки, що на кожній, у якому порядку блоки. Тут видно — лендинг чи multipage.

    Детальніше
    Як саме
    • Кожна сторінка виправдовує себе. «Бо у всіх є» — викидаю.
    • Для лендингу — логіка блоків: привернути → переконати → покликати.
    • Для multipage — переходи і меню.
    Що зазвичай ламається, якщо пропустити
    • «Про нас», де нема що сказати.
    • Блог без планів у нього писати.
    • Каталог на лендингу, що продає одну послугу.
  5. 05

    Тексти

    Пишу копірайт до верстки. Спершу зміст — потім форма. Це сильно змінює якість.

    Детальніше
    Як саме
    • Тон обраний заздалегідь: спокійний, дружній, технічний.
    • Кожен блок із метою: що зрозуміти або зробити.
    • Кнопки — конкретні дієслова, не «дізнатися більше».
    Що зазвичай ламається, якщо пропустити
    • Маркетингова вода: «інноваційне рішення», «найкраща якість».
    • «Потім перепишемо» — означає ніколи.
    • Верстати на lorem ipsum — структура під неіснуючий текст.
  6. 06

    Стиль

    Палітра, шрифти, базові елементи — одразу у CSS-змінних. Один набір, з якого збирається весь сайт.

    Детальніше
    Як саме
    • Палітра: пара варіантів настрою, світла і темна.
    • Шрифти: заголовки і текст, іноді моноширинний для чисел.
    • Кнопки, поля, картки — у змінних, щоб перевикористати.
    Що зазвичай ламається, якщо пропустити
    • Inter і чорний за замовчуванням — лінь, а не рішення.
    • Кольори без перевірки контрасту — текст не читається.
    • Елементи «по ходу» — між сторінками різнобій.
  7. 07

    Ключові екрани

    Макети у Figma не малюю — одразу верстаю головні екрани в коді, десктоп і мобільний. Так раніше видно, як воно реально живе.

    Детальніше
    Як саме
    • Спершу перший екран і 2-3 ключові блоки — на реальних текстах.
    • Перевіряю на довгих і коротких рядках.
    • Показую, збираю правки, доводжу до згоди.
    Що зазвичай ламається, якщо пропустити
    • Узгоджувати по картинці, яку потім не повторити в коді.
    • Тільки десктоп — на телефоні ламається.
    • Показ на одному пристрої — сюрприз на телефоні.
  8. 08

    Розробка

    Добиваю решту сторінок за затвердженими екранами. Чистий код, оптимізація зображень, адаптив під усе.

    Детальніше
    Як саме
    • Стек під задачу: статика, multipage, e-commerce — різні відповіді.
    • Зображення в WebP/AVIF, під розмір екрана.
    • Код компактний, без зайвих бібліотек.
    Що зазвичай ламається, якщо пропустити
    • Бібліотеки «бо популярні» — зайва вага.
    • «Майже як на екрані» = ні.
    • Адаптив в останній момент — переробка верстки.
  9. 09

    Контроль якості

    Чек-лист перед здачею: швидкість, доступність, бази SEO, кросбраузерність, форми.

    Детальніше
    Як саме
    • Lighthouse на бойовому домені, не на локалці. Нижче 90 — розбираюся.
    • Chrome, Firefox, Safari — на телефоні і десктопі.
    • Тестова заявка: перевіряю, що повідомлення доходить.
    • Кожне посилання клікаю.
    Що зазвичай ламається, якщо пропустити
    • «У Chrome ок» замість Safari — про баг дізнаєшся від клієнта.
    • Форма не доходить — клієнт не знає, що заявки губляться.
    • Lighthouse міряв на localhost — на проді інакше.
  10. 10

    Здача

    Деплой на бойовий домен, SSL, коротка інструкція як правити тексти. Далі сайт працює без мене.

    Детальніше
    Як саме
    • Домен і хостинг налаштовую сам, не залишаю клієнту.
    • Інструкція: як змінити телефон, додати новину, замінити зображення.
    • Треба правка за пів року — на зв'язку, без окремого контракту.
    Що зазвичай ламається, якщо пропустити
    • Віддав «як є» без інструкції — клієнт боїться чіпати.
    • Забутий SSL — браузер лякає попередженням.
    • Зник одразу після здачі — дрібний баг лежить тижнями.

Є проєкт?

Напиши пару рядків про задачу — відповім за день: питаннями або прикидкою за термінами.

Заповнити бриф →