Разработка дизайна страниц сайта - это не выбор красивых цветов, а проектирование того, как посетитель читает страницу, понимает предложение и доходит до заявки. Хороший дизайн незаметен: человек просто легко находит нужное. Плохой дизайн заставляет искать кнопку, вчитываться в мелкий текст и уходить. В клубе ВИПМИ мы делаем дизайн сайтов и лендингов, который опирается на структуру спроса, смысл и удобство, а уже потом на эстетику. Если нужно заказать дизайн сайта вместе с прототипом и мобильной версией, начните с бесплатной консультации.
В статье расскажем, из каких этапов состоит разработка дизайна, чем UX отличается от UI, сколько это занимает и как оценить работу дизайнера, даже если вы не специалист.
Что такое дизайн страницы сайта на самом деле
Под дизайном часто понимают только внешний вид. На практике в него входят три уровня:
- UX, пользовательский опыт. Логика страницы: какие блоки, в каком порядке, что видит человек первым, где принимает решение.
- UI, интерфейс. Визуальный язык: сетка, шрифты, цвета, кнопки, иконки, состояния элементов.
- Контент. Тексты, изображения, видео и анимация, которые наполняют макет смыслом.
Если проработан только UI, получается красивая, но неработающая страница. Поэтому мы начинаем с прототипа и текста, а не с картинки.
Важно знать. Дизайн без текстов - это рисование вслепую. Длина заголовков, количество аргументов и размер блоков зависят от содержания. Поэтому тексты для лендинга лучше готовить до или параллельно с макетом.
Этапы разработки дизайна страниц сайта
- Бриф и анализ. Изучаем бизнес, аудиторию и конкурентов. Фиксируем, какое действие должен совершить посетитель.
- Структура и прототип. Собираем каркас страницы из блоков без визуального оформления. На этом этапе правки обходятся дешевле всего.
- Мудборд и стиль. Подбираем референсы, цветовую палитру, шрифты, стиль иллюстраций и фото.
- Дизайн ключевого экрана. Прорабатываем первый экран как концепцию, согласовываем направление.
- Макеты всех страниц. Главная, услуги, карточки, статьи, контакты, служебные страницы.
- Адаптивные версии. Отдельно продумываем телефоны и планшеты, потому что основная доля трафика часто мобильная.
- UI-кит. Собираем библиотеку элементов, чтобы новые страницы выглядели единообразно.
- Передача в разработку. Готовим макеты к вёрстке и сопровождаем программистов.
Индивидуальный дизайн или шаблон: что выбрать
| Критерий | Индивидуальный дизайн | Доработка шаблона |
|---|---|---|
| Уникальность | Полная, под ваш бренд | Похож на другие сайты |
| Сроки | Дольше | Быстрее |
| Скорость загрузки | Только нужные элементы | Часто много лишнего кода |
| Гибкость | Любые блоки и сценарии | Ограничена возможностями шаблона |
| Когда подходит | Бренд, конкурентная ниша, сложный продукт | Быстрый тест гипотезы, ограниченный бюджет |
Плюсы и минусы заказа дизайна у команды, а не у фрилансера
| Плюсы | Минусы |
|---|---|
| Дизайн сразу согласован с вёрсткой и SEO | Нужно участвовать в согласованиях и брифе |
| Тексты, графика и анимация делаются в одном стиле | Проектный подход занимает больше времени, чем «нарисовать картинку» |
| Нет разрыва между макетом и готовым сайтом | Стоимость выше, чем у шаблона |
| Есть кому доработать дизайн после запуска | Требуется чёткое техзадание на старте |
Дизайн, который продаёт: на что мы обращаем внимание
Первый экран
За несколько секунд посетитель решает, остаться или уйти. Первый экран должен ответить на вопросы: что это, для кого, чем лучше и что делать дальше. Никаких абстрактных слоганов без смысла.
Визуальная иерархия
Главное крупнее, второстепенное мельче. Заголовки, подзаголовки, акценты и кнопки выстраиваются так, чтобы страницу можно было «просканировать» глазами за полминуты.
Доверие
Реальные фото, кейсы, этапы работы, гарантии, понятные контакты. Стоковые картинки с улыбающимися людьми доверия не добавляют.
Скорость и адаптивность
Тяжёлые изображения и избыточные эффекты замедляют сайт и ухудшают позиции в поиске. Мы используем векторную графику, оптимизированные изображения и лёгкую анимацию. Если нужна динамика, делаем моушен-дизайн в коде, который весит меньше видео.
Продающая структура
Для коммерческих страниц важна логика «проблема - решение - доказательства - предложение - заявка». Такие страницы хорошо работают и в рекламе, и в поиске, подробнее в статье про продвижение продающими страницами.
Обратите внимание. Макет, который отлично выглядит на большом мониторе, может развалиться на телефоне. Всегда просите показать мобильную версию ключевых страниц до начала вёрстки.
Как выбрать подрядчика для разработки дизайна
Перед тем как заказать дизайн страниц сайта, задайте подрядчику несколько вопросов:
- Начинаете ли вы с прототипа? Если дизайнер сразу рисует картинку, логика страницы останется на волю случая.
- Показываете ли мобильную версию? Макеты для телефона должны быть частью работы, а не опцией.
- Кто будет верстать? Лучше, когда дизайнер и разработчик работают в одной команде.
Мнение эксперта
«Заказчики часто оценивают дизайн по принципу «нравится или не нравится». Я предлагаю другой вопрос: понятно ли с первого экрана, что вы продаёте и что делать дальше? Если да, дизайн уже работает. Всё остальное - стиль, и его можно отполировать в процессе».
Эксперт клуба ВИПМИ, арт-директор направления веб-дизайна
Какие страницы требуют отдельного дизайна
При заказе дизайна сайта важно понимать, что «страниц» у сайта меньше, чем кажется. Дизайнер проектирует не каждую страницу, а шаблоны, по которым они собираются. Обычно это:
- Главная страница - витрина компании, задаёт стиль всего сайта.
- Страница услуги или посадочная страница - основной продающий шаблон, на нём держится реклама и SEO.
- Категория и карточка товара - для каталогов и магазинов.
- Статья блога - удобное чтение, оглавление, блоки внимания, ссылки на услуги.
- Кейсы и портфолио - формат «задача - решение - результат».
- Контакты и служебные страницы - форма, карта, страница 404, политика конфиденциальности.
Чем больше уникальных шаблонов, тем больше работы. Зато когда они готовы, новые страницы собираются из блоков за минуты, и сайт остаётся единообразным даже через годы.
Ошибки заказчиков при разработке дизайна
- Копировать конкурента. Чужой дизайн решал чужие задачи. Лучше взять удачные решения и адаптировать под свою аудиторию.
- Согласовывать по картинке на большом мониторе. Большинство посетителей увидит сайт на телефоне.
- Добавлять всё и сразу. Каждый новый блок отвлекает от главного действия. Меньше, но точнее.
- Откладывать тексты. Макет с условным текстом после наполнения почти всегда приходится переделывать.
Сколько стоит разработка дизайна страниц сайта
Стоимость зависит от количества уникальных шаблонов страниц, глубины проработки, наличия фирменного стиля, иллюстраций и анимации. Дизайн лендинга обычно делается быстрее, чем дизайн корпоративного сайта или магазина. Мы оцениваем объём после брифа и даём смету с этапами. Если вам нужен не только дизайн, но и готовый сайт, выгоднее сразу заказать разработку сайта под ключ: макет и вёрстка делаются одной командой.
Как оценить готовый макет: чек-лист
- Понятно ли с первого экрана, что вы предлагаете?
- Видна ли кнопка заявки без прокрутки?
- Легко ли читать текст на телефоне?
- Есть ли на странице доказательства: кейсы, этапы, гарантии?
- Не перегружена ли страница эффектами?
- Похожи ли все страницы на одно семейство?
Что вы получаете по итогам работы
По завершении разработки дизайна страниц сайта у вас на руках остаётся не просто набор картинок, а полноценный комплект для разработки и развития:
- прототипы ключевых страниц с логикой блоков;
- макеты всех шаблонов в десктопной и мобильной версиях;
- UI-кит: кнопки, формы, карточки, иконки, типографика и цвета;
- иллюстрации и графика в векторном формате;
- рекомендации по анимации и поведению интерактивных элементов;
- исходные файлы, которые принадлежат вам.
С таким комплектом любой разработчик соберёт сайт без догадок, а новые страницы будут выглядеть частью единой системы.
Частые вопросы
Сколько времени занимает дизайн страниц сайта?
Дизайн лендинга обычно укладывается в несколько дней после согласования прототипа. Многостраничный сайт требует больше времени, сроки фиксируем в смете.
Можно ли заказать только дизайн без разработки?
Да. Мы передадим макеты и UI-кит вашему программисту. Но если вёрстку делает та же команда, меньше риск расхождений между макетом и сайтом.
Сколько вариантов дизайна вы предлагаете?
Мы согласовываем направление на прототипе и мудборде, а затем развиваем одну концепцию с правками. Это быстрее и полезнее, чем выбирать из нескольких случайных вариантов.
Нужен ли фирменный стиль до дизайна сайта?
Желательно, но не обязательно. Если стиля нет, мы предложим базовые цвета, шрифты и элементы, которые потом можно использовать и в соцсетях.
Делаете ли вы дизайн с анимацией?
Да, добавляем лёгкую анимацию там, где она помогает понять продукт, и следим, чтобы она не мешала скорости загрузки.
Закажите дизайн страниц сайта после бесплатной консультации
Покажите нам текущий сайт или расскажите об идее, а мы предложим структуру, стиль и оценим сроки. Оценка проекта - в течение 24 часов. Обо всех направлениях можно узнать на странице всех направлений клуба.
