Веб-дизайн — это что такое: простыми словами, из чего состоит и зачем он бизнесу

Веб-дизайн — это проектирование внешнего вида и логики сайта: как устроены страницы, что человек видит первым и как доходит до кнопки «Записаться» или «Заказать». Это не только цвета и шрифты, но и структура, удобство на телефоне, расстановка акцентов. Хороший дизайн отвечает на один вопрос: помогает ли страница посетителю быстро понять, что вы предлагаете, и оставить заявку. Если человек полминуты искал, как к вам записаться, дизайн не справился, как бы красиво он ни выглядел.

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

Веб-дизайн простыми словами: что это и чем он не является

Представьте магазин. Есть планировка: где вход, где выложены популярные товары, где касса. Есть интерьер: свет, цвета, вывески, оформление полок. Если планировка продумана плохо, покупатель мечется между стеллажами и уходит, даже когда ассортимент хороший. Веб-дизайн делает то же самое для сайта: расставляет всё так, чтобы клиент нашёл нужное и дошёл до «кассы», то есть до заявки, звонка или заказа.

Частая путаница в терминах стоит денег, поэтому сразу границы:

• Графический дизайн делает логотип, визитки, листовки, фирменный стиль. Это основа, от которой отталкивается веб-дизайнер, но не сам сайт.
• Веб-дизайн проектирует страницы: структуру, порядок блоков, поведение кнопок и форм, визуальный стиль, версию для телефона.
• Разработка превращает макет в живой сайт: вёрстка, код, админка, формы, подключение аналитики. Дизайнер рисует, разработчик делает так, чтобы это работало.

Главная ошибка заказчика: думать, что дизайн равен «красиво нарисовать». Красота важна, но вторична. Первична задача бизнеса. Салону нужны записи, юристу обращения, грузоперевозчику расчёты. Дизайн сайта — это способ решить эту задачу через интерфейс: что показать, в каком порядке, на что надавить, что убрать совсем.

Из чего состоит веб-дизайн: пять частей, которые видит и не видит посетитель

1. Структура и прототип

Это скелет: какие блоки есть на странице, в каком порядке они идут, где стоит кнопка и форма. На этом этапе нет цветов и фотографий, только схема. Здесь решается главное: что человек увидит сначала, что потом, в какой момент ему предложат оставить заявку. Если структура неверная, никакая отделка её не спасёт.

2. UX и юзабилити

UX (user experience) — это путь человека по сайту. Откуда он пришёл, что хочет узнать, где может запутаться. Юзабилити — удобство на каждом шаге: понятно ли меню, не прячется ли телефон, легко ли выбрать услугу и записаться. Эта часть почти не видна: когда всё сделано хорошо, посетитель просто делает нужное и не думает, как это устроено.

3. UI и визуал

UI (user interface) — это то, что видно глазами: цвета, шрифты, фотографии, иконки, внешний вид кнопок, отступы. Задача не «чтобы красиво», а чтобы был единый стиль, читаемый текст и понятные акценты. Кнопка заявки должна отличаться от остального, а не теряться среди десяти похожих элементов.

4. Адаптив

Адаптив — это то, как сайт выглядит и работает на телефоне. По рынку у локальных услуг (салоны, ремонт, юристы, перевозки) обычно больше половины визитов приходит со смартфонов, а у некоторых ниш заметно больше. Поэтому мобильную версию нельзя «подогнать потом»: её нужно проектировать вместе с основной, а часто и раньше неё.

5. Скорость и доступность

Сюда входит вес картинок, читаемость, контраст текста и фона, размер шрифта, область нажатия кнопки. Тяжёлый сайт на мобильном интернете открывается долго, и часть посетителей уходит, не дождавшись. Серый текст на светло-сером фоне выглядит стильно в макете и нечитаем на солнце.

Сведём в таблицу, что каждая часть решает и чем грозит небрежность:

Виды веб-дизайна и что нужно именно вашему бизнесу

По типу сайта

Задачи дизайна сильно зависят от того, что за сайт вы делаете.

• Лендинг. Одна страница под одну услугу или акцию. Дизайн ведёт человека сверху вниз к одной цели: заявке. Лишних ссылок и отвлекающих элементов почти нет.
• Сайт компании. Несколько страниц: услуги, цены, работы, контакты. Задача дизайна: удобная навигация, единый стиль на всех страницах, понятные блоки для разных запросов клиента.
• Интернет-магазин. Каталог, фильтры, карточки товаров, корзина. Здесь дизайн в основном про удобство выбора и оформление заказа без лишних шагов.
• Сервисный сайт. Калькуляторы, личные кабинеты, конфигураторы. Дизайн отвечает за понятный интерфейс сложной логики.

Подробнее о том, как выбрать тип сайта под задачу, я писал в статье «Создание и разработка сайтов: сколько стоит, как выбрать тип сайта и подрядчика».

По способу создания

Для малого бизнеса часто хватает продуманной структуры на основе проверенных решений и аккуратной своей подачи: цвета, фото, тексты. Дизайн с нуля оправдан, когда сайт должен выделяться (премиальный сегмент, дорогой чек) или в нём есть нестандартная механика.

По нишам

• Барбершоп и салон красоты. Акцент на запись и прайс. Кнопка записи видна на каждом экране телефона, цены читаются без раскрывающихся списков, фото мастеров и работ живые.
• Юрист и психолог. Акцент на доверие и спокойствие. Сдержанная палитра, много воздуха, дипломы и практики, понятные этапы работы, простая форма обращения без давления.
• Строительство и грузоперевозки. Акцент на этапы, расчёт, конкретику. Человеку важно понять, как всё будет происходить, сколько займёт и как получить цифру, поэтому здесь работают схемы этапов, калькулятор или форма расчёта, примеры объектов.

Как дизайн влияет на заявки: что реально меняет результат

Первый экран

За несколько секунд посетитель должен понять три вещи: что вы делаете, для кого и что нажать. Если на первом экране красивая абстрактная фотография и слоган «Мы ценим ваше время», он не поймёт ничего. Лучше конкретный заголовок («Ремонт стиральных машин в Нижнем Новгороде, выезд в день обращения»), подзаголовок с главным преимуществом и заметная кнопка.

Кнопки, формы и контакты

• Главная кнопка встречается на сайте несколько раз: на первом экране, после блока с услугами, в конце страницы. Человек не должен прокручивать назад, чтобы найти её.
• В форме оставляйте минимум полей. Для первой заявки обычно достаточно имени и телефона. Каждое дополнительное поле отсекает часть тех, кто дошёл до формы.
• Телефон на мобильном должен нажиматься и набирать номер. Мессенджеры должны открываться в один клик.
• Контакты не прячутся только в подвале страницы. Часть людей ищет именно их.

Доверие: реальные фото, цены, отзывы

Стоковые фотографии улыбающихся людей в офисе мало кого убеждают. Реальные фото работ, мастерской, салона, команды работают намного лучше, даже если сняты на хороший телефон при нормальном свете. Цены (хотя бы «от») снимают главный страх «а вдруг дорого». Отзывы с именами и реальными деталями работают лучше, чем обезличенное «Всё отлично, рекомендую».

Проверьте свой сайт за 5 минут

Откройте свой сайт на телефоне и пройдите по пунктам:

1. Через 5 секунд на первом экране понятно, чем вы занимаетесь и где? Покажите экран знакомому и спросите.
2. Видна ли кнопка заявки или звонка без прокрутки?
3. Читается ли текст без увеличения пальцами?
4. Нажимаются ли кнопки с первого раза, не попадаете ли в соседние ссылки?
5. Можно ли найти цену или хотя бы её ориентир за 2–3 нажатия?
6. Сколько полей в форме? Если больше трёх-четырёх, подумайте, все ли они нужны.
7. Страницы открываются быстро на мобильном интернете, а не на домашнем Wi-Fi?
8. Есть ли реальные фото работ и хотя бы пара отзывов?

Если по трём и более пунктам «нет», вероятно, дизайн мешает заявкам. Для сильного эффекта не обязательно переделывать всё: часто хватает перестроить первый экран и форму.

Сколько стоит веб-дизайн и из чего складывается цена

Отдельно дизайн заказывают реже: чаще он входит в стоимость сайта вместе с версткой и настройкой. Ориентиры по моим услугам:

Это стартовые цены для типового объёма. По рынку это уровень опытного разработчика, а не студии с большим штатом и менеджерами на каждом этапе. У студий с полным циклом ценники обычно заметно выше, а у новичков и по шаблонам заметно ниже, но с другим результатом.

От чего зависит цена

• Количество страниц и типов блоков. Пять страниц из одинаковых блоков дешевле, чем пять страниц, где каждый блок уникален.
• Уникальные иллюстрации и фото. Если нужно рисовать или снимать, это отдельный объём работы.
• Анимации. Плавные появления блоков дёшевы, сложные интерактивные сцены нет.
• Сложные элементы. Калькулятор, конфигуратор, фильтры с пересчётом цены. Их нужно проектировать как интерфейс, а потом программировать.
• Готовые материалы клиента. Есть фирменный стиль, фото, тексты: работы меньше. Нет ничего: готовится больше.

Почему цены «от»

Два сайта для салонов могут сильно отличаться: у одного 10 услуг и запись через Telegram, у другого 80 услуг, мастера, акции и онлайн-запись. Назвать честную цену без разбора невозможно. Поэтому точную стоимость и срок я называю после короткого разбора задачи, до начала работы. Срок «от 7 дней» значит типовой объём, а не обещание для любого проекта.

Ошибки и подводные камни: когда дизайн красивый, а заявок нет

Дизайн ради дизайна

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

Макет не продуман под телефон

Классический сценарий: нарисовали десктопную версию, а мобильную «ужали» в конце. В итоге на телефоне блоки идут в странном порядке, заголовки занимают пол-экрана, кнопка уехала вниз. Правильный порядок обратный: сначала продумываем мобильный экран, потом расширяем.

Нет единого стиля

На главной кнопка одного цвета и формы, на внутренней странице другая, шрифты разные, отступы случайные. Для посетителя это выглядит как неаккуратность, а неаккуратный сайт ассоциируется с неаккуратным сервисом. Лечится набором правил: палитра, шрифты, размеры, вид кнопок. Они фиксируются один раз и применяются везде.

Макет без учёта контента

Дизайнер рисует красивую карточку с названием в два слова. На деле названия по 60 символов, в каталоге не 12 товаров, а 200, в списке стран не 3, а 9, и вёрстка ломается. Макет нужно делать на реальных данных: длинных, неудобных, разных по объёму.

Дизайнер и разработчик не общаются

Макет утверждён, разработчик получает его и реализует «как смог». В живом сайте отступы другие, анимации не работают, форма выглядит иначе. Поэтому, когда дизайн и разработка в одних руках или под единым руководством, результат ближе к задуманному, а компромиссы обсуждаются заранее.

Что отличает сильную работу от просто красивой, я подробно разбирал в статье «Лучшие разработки сайтов».

Как я делаю веб-дизайн: от задачи до живого сайта

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

Дальше продумываю структуру и акценты, и только потом визуал. Проект веду лично, а над ним работает команда, поэтому дизайн сразу учитывает, как это будет работать в коде и в админке. Не бывает ситуации «нарисовали, а сделать нельзя» или «сделали, но владелец сам ничего не поменяет».

Кейс: студия красоты «ПЛЕН»

Задачи сайта были конкретные: онлайн-запись, акции, которые владелец меняет сам из админки, заявки на скидку и обратный звонок с уведомлением в Telegram. Под них и подчинён дизайн. Запись заметна и доступна с любого места страницы. Акции вынесены в блок, который управляется из админки без программиста, поэтому макет заранее рассчитан на разное количество и длину акций. Формы короткие, потому что заявка на скидку не должна превращаться в анкету.

Кейс: адвокат по гражданским делам

Здесь задача обратная: не «привлечь яркостью», а вызвать доверие. Это премиальный сайт-визитка, где визуал выстроен на сдержанности. Практики объяснены понятно, этапы работы показаны как последовательность, форма обращения простая, без лишних полей. Человек, который обращается к юристу, обычно в стрессе, и сайт не должен усложнять ему жизнь.

Что входит по умолчанию

• адаптив под телефон;
• подключение Яндекс Метрики;
• заявки с форм в Telegram и на почту;
• защита формы от спама.

Если на сайте часто меняются цены, работы, товары или акции, делаю для этого админку. Это тоже часть дизайна: макет должен выдерживать, что владелец завтра добавит новый блок или поменяет цены.

Как проект проходит от первого разговора до запуска, расписано в статье «Разработка проекта сайта: этапы, сроки, стоимость».

Как выбрать веб-дизайнера или студию и что попросить до старта

На что смотреть в портфолио

• Решает ли работа задачу бизнеса, а не просто выглядит эффектно. Спросите, какой результат был нужен заказчику.
• Как сайт выглядит на телефоне. Откройте его на своём смартфоне, а не в макете.
• Есть ли живые сайты по ссылкам, а не только картинки на красивом фоне. Картинку можно нарисовать для чего угодно, работающий сайт сложнее.
• Есть ли примеры из вашей или похожей ниши.

Вопросы подрядчику

• Кто отвечает за результат и с кем вы будете общаться?
• Сколько правок входит в стоимость и что считается новой работой?
• Что вы получите на выходе: только макет, готовый сайт или сайт с админкой?
• Кто делает вёрстку и как дизайнер взаимодействует с разработчиком?
• Что будет после запуска: кто вносит мелкие правки и как быстро?

Что подготовить самому

• Фото ваших работ, места, команды. Даже неидеальные, лучше стоков.
• Тексты или хотя бы список услуг с ценами.
• 2–3 примера сайтов, которые нравятся, и объяснение, чем именно.
• Главное действие, которого вы ждёте от посетителя: запись, звонок, заказ, расчёт.

Если хочется сначала разобраться в общей картине, начните с материалов про этапы проекта, выбор типа сайта и критерии сильной работы.

Частые вопросы

Веб-дизайн — это что такое простыми словами?

Это проектирование того, как выглядит сайт и как по нему удобно двигаться. Дизайнер решает, какие блоки будут на странице, в каком порядке, где стоит кнопка, какие цвета и шрифты использовать, как всё будет смотреться на телефоне. Цель не в красоте самой по себе, а в том, чтобы посетитель быстро понял предложение и оставил заявку.

Чем веб-дизайн отличается от разработки сайта?

Дизайн отвечает за то, как сайт задуман: структура, внешний вид, удобство. Разработка отвечает за то, как это работает технически: вёрстка, код, формы, админка, подключение аналитики. Дизайнер создаёт макет, разработчик превращает его в работающий сайт. Для заказчика важно, чтобы эти два этапа были согласованы, иначе живой сайт будет отличаться от макета.

Чем занимается веб-дизайнер?

Веб-дизайнер продумывает структуру страниц, рисует макеты (в том числе мобильные), подбирает палитру, шрифты, иконки, оформляет кнопки и формы, готовит файлы для разработчика. Хороший дизайнер начинает с вопросов о бизнесе и клиентах, а не с поиска красивых картинок.

Сколько стоит веб-дизайн сайта?

Отдельно дизайн заказывают реже, обычно он входит в стоимость сайта. По моим услугам стартовые цены такие: лендинг от 25 000 ₽ (от 7 рабочих дней), сайт компании от 45 000 ₽ (от 14 рабочих дней), интернет-магазин от 90 000 ₽ (от 21 рабочего дня). Точную стоимость и срок я называю после короткого разбора задачи, до начала работы, потому что многое зависит от количества страниц, сложности блоков и того, какие материалы у вас уже есть.

Что такое UX и UI дизайн и в чём разница?

UX (user experience) отвечает за путь человека по сайту: логику, удобство, понятность шагов. UI (user interface) отвечает за внешний вид: цвета, шрифты, кнопки, иконки. Проще всего так: UX это «как устроено и куда ведёт», UI это «как выглядит». Оба элемента нужны: красивый, но запутанный сайт не принесёт заявок, а удобный, но неряшливый вызовет недоверие.

Нужен ли дизайн с нуля или хватит шаблона?

Зависит от задачи и бюджета. Для проверки спроса или простой визитки шаблон часто достаточен. Если нужна своя подача, нестандартные блоки или сайт должен выделяться среди конкурентов, лучше доработанный шаблон или дизайн с нуля. Для большинства малых бизнесов оптимален продуманный сайт со своей структурой, реальными фотографиями и аккуратным стилем, без дорогой уникальной графики.