Дизайн сайта: что делаем и кому это нужно
Работа над визуалом у нас занимает 3 этапа из 7: прототип, макеты и вёрстку по ним. Создаём макеты под конкретную задачу бизнеса: лендинг для рекламы, сайт компании с услугами и ценами, каталог интернет-магазина, личный кабинет сервиса. Макет не живёт отдельно от кода: человек, который согласовывал с вами экраны, отвечает и за то, как они выглядят на телефоне после запуска.
Услуга подходит, если сайта ещё нет, если вы запускаете новое направление и нужна отдельная посадочная страница, или если нынешний сайт устарел и мешает продажам. В последнем случае начинаем с аудита и смотрим, что выгоднее: редизайн сайта на текущей платформе или новый проект.
Что входит в разработку дизайна сайта
В работу входят 6 частей, и каждая заканчивается результатом, который вы согласуете:
- Анализ ниши и конкурентов
Изучаем сайты конкурентов из выдачи Яндекса по запросам вашей ниши: как подают цены, какие блоки показывают, где у них слабые места. Дизайн строим так, чтобы выделиться, а не повторить соседа.
- Структура и прототип
Карта разделов под поисковые запросы и схемы ключевых страниц без цвета: где оффер, цены, форма заявки. Логику утверждаете до того, как появятся шрифты и фото. Как устроен этот этап, рассказываем в статье про прототип сайта.
- Дизайн-концепция
Первым рисуем главный экран: шрифты, цвет, сетку, стиль фото и иконок. После согласования концепции переносим визуальный язык на остальные экраны.
- Макеты всех шаблонов
Главная, услуга, каталог, карточка товара, статья, контакты: каждый шаблон получает макет для компьютера и телефона, плюс состояния кнопок, форм и ошибок.
- Адаптивная вёрстка
Сами верстаем то, что нарисовали. Адаптивная вёрстка проверяется на реальных телефонах и в 5 браузерах, а не только в эмуляторе.
- SEO в макете
Заголовки, тексты и разметка закладываются до дизайна, поэтому в макете есть место под контент для продвижения, а не только под красивые картинки.
Сколько стоит дизайн сайта?
Отдельной строкой в прайсе дизайн не стоит: он входит в стоимость разработки сайта, и минимальный проект с дизайном, лендинг, стоит от 95 000 ₽. В цену включены анализ, прототип, макеты, вёрстка, SEO-разметка и запуск на вашем домене.
| Проект | Цена с дизайном | Срок |
|---|---|---|
| Лендинг | от 95 000 ₽ | от 2 недель |
| Сайт-визитка на 3-5 страниц | от 95 000 ₽ | от 2 недель |
| Корпоративный сайт | от 250 000 ₽ | от 4 недель |
| Интернет-магазин | от 400 000 ₽ | от 8 недель |
| Веб-сервис или личный кабинет | от 150 000 ₽ | от 4 недель |
| Редизайн действующего сайта | от 90 000 ₽ | от 3 недель |
| Дизайн-макет без вёрстки | смета после брифа | по смете |
Цены одинаковы для Москвы и регионов. Точную смету фиксируем в договоре после брифа.
От чего зависит стоимость дизайна?
На цену влияют 4 фактора. Ориентиры по надбавкам взяты из калькулятора стоимости на главной, там же можно посчитать свой вариант за минуту:
- Число страниц. 6-15 страниц добавляют 40 000 ₽ и неделю, 16-50 страниц добавляют 120 000 ₽ и 3 недели: каждый новый шаблон требует своего макета и вёрстки.
- Фирменный стиль. Если логотипа и фирменных цветов нет, разработаем их в рамках проекта: плюс 40 000 ₽ и 1 неделя.
- Контент. Тексты от студии добавляют 20 000 ₽, тексты и фото 35 000 ₽. Дизайн, нарисованный под реальный текст, не разваливается после наполнения.
- Функционал. Личный кабинет (80 000 ₽), онлайн-оплата (30 000 ₽), каталог с обменом 1С (60 000 ₽) добавляют экраны и состояния интерфейса, которые тоже нужно нарисовать.
Как заказать дизайн сайта: 6 шагов
Начать можно с 1 сообщения, дальше работа идёт по шагам, и каждый шаг вы согласуете:
- 01Заявка и бриф
Пишете в Telegram @seoweb1 или на почту a-seoweb@mail.ru. Обсуждаем задачи, аудиторию, сайты, которые нравятся и не нравятся. На выходе смета и календарный план в договоре.
- 02Анализ и структура
Изучаем конкурентов и поисковые запросы, собираем список разделов будущего сайта.
- 03Прототип
Схемы ключевых страниц: порядок блоков, кнопки, формы. Согласуете логику, не отвлекаясь на цвета.
- 04Концепция
Главный экран в цвете и шрифтах. На этом шаге выбираем визуальный язык всего сайта.
- 05Макеты
Остальные экраны для компьютера и телефона, правки собираем по экранам, а не списком на весь сайт.
- 06Вёрстка и запуск
Верстаем, наполняем, тестируем и запускаем на вашем домене. Доступы передаём в одном документе.
Дизайн и разработка сайта в одной команде
Дизайн сайта и сам сайт разработан у нас одной командой, без передачи макета стороннему верстальщику. Когда дизайн рисует один подрядчик, а создание сайта ведёт другой, по дороге теряются мобильные версии, состояния форм и отступы, а выяснять, кто виноват, приходится заказчику.
Веб-дизайн и создание сайтов идут по одному плану: интернет-дизайн сразу проверяется кодом, поэтому в макет не попадают приёмы, которые нельзя сделать быстрыми. Проект ведёт основатель студии Артём Салыев, опыт в SEO и веб-разработке с 2016 года. Небольшая команда без отдела продаж: с вами общается тот, кто делает работу.
Дизайн для разных типов сайтов
Создаём макеты под задачи бизнеса, а задачи у 6 типов сайтов разные:
- Дизайн лендинга
Экраны по очереди ведут к 1 целевому действию: оффер на первом экране, доказательства, цены, форма. Пример: лендинг пирсинг-мастера с онлайн-записью. Подробнее о формате на странице разработки лендинга.
- Дизайн визитки
3-5 страниц: о компании, услуги, цены, контакты. Задача визитки: быстро показать, чем вы занимаетесь и как с вами связаться.
- Дизайн корпоративного сайта
Шаблоны для услуг, цен, страницы о компании и блога. Сайт «Бухуслуги33» собран так, чтобы каждая услуга отвечала на запрос клиентов региона.
- Дизайн интернет-магазина
Каталог, фильтры, карточка товара, корзина и заказ без регистрации. В магазине Rilis дизайн держит 7 774 позиции и 182 подкатегории без потери скорости.
- Дизайн сервиса и личного кабинета
Таблицы, статусы, роли пользователей, пустые состояния и ошибки. Интерфейс сервиса рисуем от сценариев работы, а не от главного экрана.
- Информационные сайты и порталы
Рубрики, статьи, поиск, навигация по темам. На первом месте читаемость текста и скорость загрузки страниц.
Как понять, что дизайн сайта сделан качественно?
Качественный дизайн проверяется 6 вопросами, и ответить на них можно без профильного образования:
- Понятно ли с первого экрана, что вы продаёте, кому и сколько это стоит.
- Читается ли текст на телефоне без увеличения: размер шрифта, длина строки, контраст.
- Видна ли главная кнопка и одинаково ли выглядят кнопки во всех разделах.
- Нарисованы ли состояния: ошибка в форме, пустая корзина, загрузка.
- Держит ли дизайн реальный текст и фото, а не только идеальные картинки со стока.
- Укладывается ли страница в Core Web Vitals: LCP до 2,5 с, INP до 200 мс, CLS до 0,1.
Почему проектирование сайта начинается со структуры?
Проектирование сайта начинается за 2 этапа до дизайна: с брифа и структуры. Каждый сайт мы проектируем с учётом SEO: разделы под запросы бизнеса, скорость, тексты и разметка закладываются раньше, чем дизайнеры выбирают шрифт. Создание сайта в обратном порядке заканчивается тем, что после запуска разделов под важные запросы нет, а в макете не осталось места для текста.
Переделка готового дизайна обходится дороже, чем несколько дней на структуру сайта в начале проекта. Поэтому техническая часть (адреса, заголовки, блоки под контент) согласуется вместе с прототипом, и дизайн ложится на готовый каркас.
Стандарты и требования к дизайну и вёрстке
Создаём вёрстку с оглядкой на 5 требований и перед запуском проверяем по ним макеты и код:
- Адаптивность: отдельная раскладка для телефона и компьютера, проверка на реальных устройствах и в 5 браузерах.
- Core Web Vitals: тяжёлые видео, шрифты и анимации взвешиваем ещё в макете, чтобы сайт укладывался в официальные пороги Google.
- Доступность: контраст текста и фона, видимый фокус для работы с клавиатуры, подписи к изображениям, крупные области нажатия.
- Формы по 152-ФЗ от 27.07.2006: согласие на обработку персональных данных и ссылка на политику рядом с каждой кнопкой отправки.
- Валидная разметка: чистый HTML и микроразметка Schema.org для услуг, товаров и вопросов.
Отзывы и портфолио: как проверить студию
Проверить студию до заказа можно 2 способами: поговорить с заказчиками и открыть живые сайты. Опубликованных отзывов с именами у нас нет, выдумывать их мы не будем. По запросу даём контакты 2-3 заказчиков с похожими проектами: их опыт и отзыв человека, с которым вы поговорили сами, надёжнее любого текста на сайте студии.
Второй способ: портфолио. Сайты rilis-shop.ru, pirsingchelyabinsk.ru и buhuslugi33.ru открываются с телефона, и по ним видно, как дизайн выглядит не в презентации, а на реальном контенте и реальной скорости.
Оплата, договор и сроки
Работаем по договору: смету и сроки разработки сайта фиксируем после брифа вместе с составом макетов. Этапы оплаты согласуем при подписании, бюджет по ходу проекта не растёт без вашего решения. Цены одинаковы для бизнеса в Москве, Челябинске и любом другом городе.
После запуска 30 дней сопровождаем сайт бесплатно: правки, консультации, мелкие доработки. Дальше можно подключить техническую поддержку от 30 000 ₽ в месяц, SEO-продвижение или работать с сайтом самостоятельно: код, домен и доступы остаются у вас.
Сайт не привязан к конструктору: код, домен и доступы принадлежат заказчику, а развивать проект можно с любым подрядчиком.
Вопросы и ответы
Можно ли заказать только дизайн без вёрстки?
Можно, но такой заказ считаем отдельной сметой после брифа: объём зависит от числа шаблонов, адаптивных версий и состояний интерфейса. Чаще выгоднее заказать дизайн вместе с разработкой: тогда макет сразу проверяется кодом, а за итог создания сайта на экране телефона отвечает один исполнитель. Если вёрстку будет делать ваш программист, заранее согласуем формат передачи макетов и требования к адаптиву.
Сколько длится разработка дизайна сайта?
Дизайн занимает часть общего срока проекта: разработка сайта целиком идёт от 2 недель для лендинга, от 4 недель для сайта компании, от 8 недель для интернет-магазина. Внутри этого срока на прототип и макеты уходит заметная доля времени, и сильнее всего срок зависит от скорости согласований. Быстрее идут проекты, где у заказчика готовы логотип, тексты и фото, а экраны согласует один человек.
Что подготовить, чтобы заказать дизайн сайта?
Достаточно 5 вещей: описание услуг или товаров с ценами, логотип и фирменные цвета вашей компании, если они есть, 2-3 сайта, которые вам нравятся, список конкурентов и фото, если они уже сняты. Если чего-то нет, это не препятствие: тексты пишем сами по брифу, логотип и стиль можем разработать в проекте, стоковые фото подберём или поможем организовать съёмку.
Дизайн будет уникальным или по шаблону?
Создаём для каждого проекта свой дизайн под нишу, аудиторию и задачи, без шаблонов конструктора. Уникальность здесь не самоцель: важнее, чтобы макет отвечал на вопросы клиентов, был удобен на телефоне и быстро грузился. Привычные элементы интерфейса (корзина, меню, форма) оставляем узнаваемыми, а выделяемся подачей, типографикой, фото и структурой разделов.
Можно ли заказать дизайн сайта из Москвы или другого города?
Да, работаем удалённо по всей России, проекты приходят из Москвы и других городов. Цены одинаковы для всех регионов, а согласования идут в Telegram, по почте и на созвонах. Макеты показываем ссылкой, комментарии собираем по экранам, поэтому личные встречи для работы над макетами не нужны.
Что будет с сайтом после запуска?
Первые 30 дней сопровождаем бесплатно: правим, консультируем, делаем мелкие доработки. Дальше на выбор: техническая поддержка от 30 000 ₽ в месяц, SEO-продвижение, реклама в Директе и на Авито, аналитика по Яндекс Метрике. Можно и отказаться от продолжения: код, домен и все доступы уже у вас, и сайт можно развивать с любым подрядчиком.
