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

Как я работаю.

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

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

  1. 01

    Бриф

    Первый разговор. Узнаю задачу, аудиторию, бюджет, сроки. Чем точнее рамка — тем меньше переделок дальше.

    Подробнее
    Как именно
    • Короткая анкета или звонок на 30-40 минут.
    • Цели конкретные, а не «больше клиентов».
    • Кто аудитория и что для неё важно.
    • Ограничения: бюджет, сроки, что нельзя менять.
    Что обычно ломается, если пропустить
    • «Сделай красиво» без объяснения для кого.
    • Цели без числа и срока.
    • Старт без согласованного брифа — переделки гарантированы.
  2. 02

    Изучение ниши

    Смотрю 5-7 сайтов конкурентов: что работает, чего не хватает. Куда никто не пошёл — туда можно нам.

    Подробнее
    Как именно
    • По каждому сайту: палитра, шрифты, структура hero, тон.
    • Если 4 из 5 делают одно — в ту же сторону смысла нет.
    • Чего никто не делает, но полезно — это возможность.
    Что обычно ломается, если пропустить
    • «Все сайты одинаковые» — обычно смотрел один.
    • Копирую «красивое» у других — выходит как у всех.
    • Игнорю что работает — повторяю чужие ошибки.
  3. 03

    Концепция

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

    Подробнее
    Как именно
    • Коротко формулирую: для кого, что обещаем, чем отличаемся.
    • Выбираю одно направление, не смешиваю.
    • Фиксирую — потом сверяю с этим каждое решение.
    Что обычно ломается, если пропустить
    • «Смешаем всё понемногу» — выйдет без характера.
    • Идея только в голове — через неделю забыта.
    • Концепция для галочки — на вёрстке всё расползается.
  4. 04

    Структура

    Какие страницы нужны, что на каждой, в каком порядке блоки. Тут видно — лендинг или многостраничник.

    Подробнее
    Как именно
    • Каждая страница оправдывает себя. «Потому что у всех есть» — выкидываю.
    • Для лендинга — логика блоков: привлечь → убедить → позвать.
    • Для многостраничника — переходы и меню.
    Что обычно ломается, если пропустить
    • «О нас», где нечего сказать.
    • Блог без планов в него писать.
    • Каталог на лендинге, который продаёт одну услугу.
  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 — браузер пугает предупреждением.
    • Пропал сразу после сдачи — мелкий баг лежит неделями.

Есть проект?

Напиши пару строк о задаче — отвечу за день: вопросами или прикидкой по срокам.

Заполнить бриф →