Дизайн сайта-справочника
Дизайн сайтов для бизнеса: анализ задачи, прототип, макеты в Figma для телефона и компьютера и передача разработчику.
- Сначала прототип, потом дизайн
- Макеты для телефона и компьютера
- Число правок — в договоре
С первого экрана начинаем
Первый экран видят все, кто открыл страницу, поэтому концепцию начинаем с него. Зоны ниже — методика, наполнение у каждого проекта своё.
- 1
Шапка с контактом
Логотип, короткое меню, телефон или мессенджер — чтобы связаться можно было сразу.
- 2
Оффер
Заголовок о том, что вы делаете и для кого. Подзаголовок — главная деталь: срок, район, формат работы.
- 3
Изображение
Товар, результат работы или команда — то, что показывает предмет, а не абстракцию.
- 4
Кнопка действия
Одно главное действие: записаться, рассчитать, купить. Второе — менее заметной ссылкой.
- 5
Доверие
То, что можно проверить: лицензия, договор, оценка на картах, реквизиты.
- 6
Форма
Форма на 1–3 поля, если заявка — главная цель страницы. Остальное уточняют в разговоре.
Кейсы
Добыча наших клиентов
Частный юрист · Симферополь
350 ₽
стоимость заявки в контекстной рекламе Яндекса
Дизайн сайта-визитки частного юриста из Симферополя: стоимость заявки в контекстной рекламе Яндекса — 350 рублей.
Интернет-магазин спецтехники
Дизайн сайта интернет-магазина спецтехники Lonking
Дизайн сайта интернет-магазина спецтехники Lonking: продажа по всей России, сервис, запчасти и лизинг.
Компания по строительству бассейнов · Севастополь
Дизайн сайта компании по строительству бассейнов в Севастополе
Дизайн сайта компании, которая строит бассейны на заказ в Севастополе и по Крыму: планирование, проектирование и строительство. Десктопная и мобильная версии.
Частное охранное предприятие · Севастополь и Ялта
Дизайн корпоративного сайта частного охранного предприятия
Дизайн корпоративного сайта частного охранного предприятия в Севастополе и Ялте. Десктопная и мобильная версии.
Что передаём после дизайна
- Исходники в FigmaВсе макеты и прототип — с правами владельца или доступом на редактирование
- UI-китЦвета, шрифты, кнопки, поля и их состояния
- АдаптивыВерсии для телефона, планшета и компьютера
- Спецификация для разработчикаСетка, отступы, поведение элементов
- ГрафикаИконки и иллюстрации в форматах для вёрстки
- Права на макетыПередаём по договору; шрифты и фото — с лицензией для коммерческого использования
Как работаем над дизайном
Сроки — ориентиры для проекта до 10 шаблонов: лендинг быстрее, магазин дольше. Точный график — в договоре.
2–3 дня
Бриф
Задача, аудитория, конкуренты, текущая версия и данные Метрики, если проект уже работает.
Итог этапаБриф и список шаблонов
3–7 дней
Прототип
Схемы страниц без цвета и картинок: блоки, их порядок, кнопки и формы.
Итог этапаСогласованная структура страниц
3–5 дней
Концепция первого экрана
Шрифты, цвета, фото и кнопки на одном экране. После согласования стиль переходит на остальные страницы.
Итог этапаУтверждённый стиль
2–3 недели
Макеты страниц
Все шаблоны из брифа, включая формы, сообщения об ошибках и служебные страницы.
Итог этапаМакеты для компьютера
3–5 дней
Адаптив
Версии для телефона и планшета: порядок блоков, меню, размеры кнопок и текста.
Итог этапаМакеты для телефона и планшета
1–2 дня
Передача разработчику
UI-кит, состояния элементов, спецификация. По договорённости сверяем вёрстку с макетами.
Итог этапаФайл Figma и спецификация
Стоимость дизайна сайта
Цена зависит от числа уникальных шаблонов, адаптивов и того, нужно ли исследование. Точную назовём после брифа.
-
Лендинг
Одна страница под рекламу или акцию. Ориентир — 2–3 недели
от 40 000 ₽
- Прототип
- Макет для компьютера и телефона
- Две итерации правок
-
Сайт до 10 шаблонов
Для компании или сферы услуг. Ориентир — 4–6 недель
от 90 000 ₽
- Прототип и концепция
- До 10 уникальных шаблонов
- Адаптив и UI-кит
-
Интернет-магазин
Каталог, карточка товара, корзина. Ориентир — 5–8 недель
от 150 000 ₽
- Каталог, фильтры и карточка
- Корзина и оформление заказа
- Личный кабинет
- Сверка вёрстки с макетами
- Число правок — в договоре
- Вёрстка и программирование — отдельная услуга
FAQ
Вопросы о дизайне сайтов
Не нашли ответ?
Сколько стоит дизайн сайта?
Ориентиры — в тарифах выше. Больше всего цену меняют число экранов и исследование до дизайна. Точную называем после брифа и фиксируем в договоре.
Сколько длится работа над дизайном?
Ориентиры: лендинг — 2–3 недели, сайт до 10 шаблонов — 4–6 недель, магазин — 5–8 недель. Больше всего на срок влияют скорость согласований и готовность материалов: текстов, фото, логотипа.
Сколько правок входит в работу?
Число итераций правок на каждом этапе фиксируем в договоре. Правки идут в рамках согласованного прототипа; если после утверждения концепции меняется сама идея, это новый этап.
В каком виде вы передаёте дизайн?
Файлом Figma со всеми макетами, прототипом, UI-китом и адаптивами. Разработчику — спецификация: сетка, отступы, состояния кнопок и полей. Иконки и иллюстрации — в форматах для вёрстки.
Можно заказать только дизайн, а сверстать у своего разработчика?
Да. Готовим макеты под вашу платформу и передаём разработчику всё, что нужно для вёрстки. По договорённости отвечаем на его вопросы и сверяем вёрстку с макетами.
Сделаете дизайн под Tilda или нашу CMS?
Да. Ограничения платформы учитываем уже в прототипе: сетку и блоки Tilda, возможности темы и шаблона CMS. Нестандартные экраны для Tilda рисуем под Zero Block — её редактор, где блок собирают с нуля.
Как сайт будет выглядеть на телефоне?
Так, как нарисовано в макете для телефона: его делаем отдельно, а не оставляем на усмотрение верстальщика. На небольшом экране меняются порядок блоков, меню и размеры кнопок — это решаем в дизайне.
Кому принадлежат права на дизайн?
Права на макеты передаём вам по договору, файл Figma — с правами владельца или доступом на редактирование. Шрифты и фото берём с лицензией для коммерческого использования или покупаем на ваше имя — это согласуем заранее.
Что подготовить к старту работы?
Бриф, логотип или брендбук, если они есть, примеры сайтов, которые нравятся и не нравятся, и доступ к Метрике, если сайт уже работает. Остальное уточним на первой встрече.
Можно ли использовать нейросети в дизайне?
Используем как инструмент — например, для черновых вариантов иллюстраций и фонов. Макет делает и проверяет дизайнер, права на итог передаём вам.
Для сайта-справочника также делаем
Первый шаг
Обсудим задачу и объём макетов
Пришлите ссылку или опишите проект — предложим состав макетов, этапы и число правок.
Что написать в заявке, чтобы план был точнее:
- Нужен дизайн с нуля или редизайн
- Есть ли фирменный стиль и логотип
- Кто будет верстать — наш разработчик или ваш
