Дизайн: прототипы до кода
Согласуем визуал и структуру до кода — так экономятся дни переделок и споров «мы ожидали другое». Дизайн — не «картинки ради красоты», а проверка, что сайт ведёт к заявке или покупке.
Зачем дизайн до разработки
Когда макет утверждён, разработка идёт по чеклисту блоков: герой, услуги, отзывы, форма. Не возникает ситуации «переделайте всю главную, мы передумали». Для лендинга часто хватает одного круга правок; для магазина или CRM — два-три итерации по ключевым экранам.
Подробнее о подходе к интерфейсам: проектирую интерфейс перед кодом.
Этапы дизайна
- Структура (wireframe): блоки на странице, порядок, тексты-заглушки. Без цветов — только логика и иерархия.
- UI-макет: цвета, типографика, кнопки, отступы, адаптив (десктоп + мобильная версия в Figma).
- Согласование: вы смотрите ссылку, оставляете комментарии; я вношу правки в согласованном объёме.
- Handoff в разработку: экспорт ассетов, шрифты, спецификация отступов — чтобы вёрстка совпала с макетом.
Что учитываю в макете
- Читаемость на телефоне: крупные заголовки, контраст, кнопки не «в угол».
- Один главный CTA на экран — не пять одинаковых «Заказать».
- Скорость: без тяжёлых декораций, которые убьют загрузку (см. Core Web Vitals).
- Доверие: отзывы, цифры, логотипы партнёров — если они есть у вас.
- Юридические блоки: политика, реквизиты — место закладываю сразу.
Шаблон или уникальный дизайн
Для старта часто беру проверенную структуру лендинга и адаптирую под ваш бренд — быстрее и дешевле. Уникальный дизайн с нуля — когда важен сильный визуальный отличие от конкурентов; сроки и бюджет выше. Об этом говорим на брифе.
Сроки
| Задача | Ориентир |
|---|---|
| Прототип лендинга (структура блоков) | 3–4 часа |
| Готовый UI лендинга (десктоп + мобилка) | 5–11 часов |
| Сайт-визитка 5–7 страниц | 1–2 дня |
| Интернет-магазин / CRM (ключевые экраны) | 2–5 дней |
| Круг правок (в рамках ТЗ) | 1–3 часа |
Сроки растут, если контент (тексты, фото) появляется только на этом этапе — лучше передать материалы на брифе.
Что нужно от вас
Логотип, фирменные цвета (если есть), референсы «нравится / не нравится», тексты или тезисы по блокам. Комментарии лучше списком: «кнопка крупнее», «убрать блок X» — так быстрее, чем «сделайте красивее».
После утверждения макета
Стартует разработка: вы уже видите финальную картинку, остаётся перенести её в код и подключить формы, оплату, админку. Предыдущий этап — бриф. Обзор процесса — услуги.
Обсудить похожую задачу — без обязательств.
Написать в Telegram →