Дизайн сайта: понятия "красиво" нет

Здравствуйте!

Можно ударить вас в лоб? Причём так сильно, как когда-то мы получили этот удар. Готовы? Дизайн сайта не всегда влияет на конверсию. Точнее, красота не всегда положительно сказывается на показателях. Больно? Когда мы увидели это в аналитике, то были просто шокированы.

Всё не так просто, как кажется. Поэтому разберём подробнее тему визуальной разработки landing page.

Красота — понятие размытое

Почему одни считают блондинок самыми красивыми созданиями на свете, а другие говорят, что только брюнетки достойны любви? Потому что нет такого понятия, как «красиво». Есть понятия «мне нравится» и «стандарты». Получается, что с точностью нельзя быть уверенным, каким должен быть дизайн сайта — красивым или «страшным, как моя жизнь».

О ужас! И как теперь определить?

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

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

Возвращаясь к делу: сайт должен соответствовать желаниям целевой аудитории. Если взять для примера бабушек, то им совсем не нужны ваши тенденции 2026 года, навороты в анимации и наслаиваемых объектах. Им нужен максимально простой сайт с крупным текстом и белым фоном для удобства изучения.

Что важно для дизайна

Владельцы не очень приятных глазу сайтов сейчас выдохнули, подумав, что можно сэкономить десятки тысяч на редизайне. И зря. Разработать дизайн сайта — это не только подобрать цвета.

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

1. Стандарты

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

В сайтах тоже есть свои стандарты дизайна. Их обязан знать каждый дизайнер. Таких стандартов сотни, поэтому подробно разобрать их в рамках одной статьи невозможно.

Мы уверены: вы не собираетесь самостоятельно делать продающий дизайн сайта для своей компании. Ваша задача — убедиться, что подрядчик или дизайнер понимает базовые элементы дизайна. Для теста можно использовать три вопроса (правильные ответы указаны):

1. Как можно выделить ссылки на сайте? (синим цветом или подчёркиванием)
2. В какой размер нужно уложить элементы сайта, если не делаем адаптив? (до 1280 пикселей — самый популярный размер экрана)
3. Можно ли деформировать шрифты текстовых элементов? (нельзя)

Кто-то может поспорить, что стандартов в веб-дизайне нет. Мы считаем иначе: есть каноны, которые не режут глаз и привычны для пользователя, а значит, ими стоит пользоваться для создания удобства. К нему и переходим.

2. Структура и расположение

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

Важно понимать: дизайнер — не маркетолог. Это разные люди с разным образованием, разными мозгами и разными взглядами на жизнь. Маркетинг — это анализ и цифры. Дизайн — это творчество и фантазия (плюс капелька стандартов).

Поэтому, если вы решили самостоятельно сделать лендинг, не отдавайте полностью это дело дизайнеру. Сделайте это сами. Единственное, что можно частично доверить дизайнеру, — расположение элементов для более удобного перемещения по landing page. Прислушаться — не значит отдать. Сделайте сами и получите обратную связь.

Кстати, создайте собственный сайт через конструктор. В арсенале — любой сайт от лендинга до интернет-магазина, готовые шаблоны, мобильная версия, корзина, платежи и ещё +10 инструментов.

Как сделать дизайн сайта

С базовой теорией разобрались. Пора переходить к делу — к тому, как создать дизайн сайта. Разберём этапы создания.

Этап 0. Шаблоны или уникальность

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

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

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

Этап 1. Прототип

С чего начать делать дизайн сайта? Всё начинается с идеи, но создание дизайна начинается с прототипа — схематично изображённого будущего сайта. Как вы помните, делаете это вы лично. Этот этап нельзя пропускать.

Очень жизненно… Либо заранее приготовьтесь ругаться с исполнителем.

Реализовать прототип можно на листке бумаги с помощью ручки или в специальной программе. Мы используем Balsamiq — конструктор, который позволяет быстро и удобно перемещать блоки, тексты и т. д. В процессе создания дизайна постоянно приходят новые идеи, а на бумаге можно разориться. Ниже — пример прототипа и его воплощения.

Прототип и воплощение

Чаще всего уже на этапе прототипа нужно продумать расположение блоков и элементов дизайна, хотя бы ориентировочно. Например, изображение — слева, текст — справа (ещё один стандарт). На основе этого дизайнер будет всё реализовывать. Не загоняйте его в тупик — добавьте заметку «Возможны изменения расположения блоков и текстов».

Этап 2. Фирменный стиль или «мне нравится»

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

И не нужно мыслить словами «Ты же дизайнер, сделай красиво!». Если мы ещё раз внимательно прочитаем первую главу статьи, то вспомним: такого понятия нет. Для всех «красиво» выглядит по-разному. Запомните: либо фирменный стиль, либо сайты, которые нравятся (+ изображения).

Этап 3. Первые два экрана

Даже при наличии этапа 2 могут возникнуть проблемы. Чтобы клиенту не тратить зря ограниченное количество переделок (которые обсуждаются заранее и прописываются в договоре), а дизайнеру — не тратить личное время, сначала согласуйте первые два экрана, а уже потом двигайтесь дальше. Потом — дизайн кнопок, всплывающих форм, поп-апов и так далее.

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

Этап 4. Реализация и правки

Вам, как владельцу, не обязательно вникать в то, как происходит создание дизайна сайта. Но для общего понимания: дизайн landing page создаётся в Photoshop или, как сейчас любят делать продвинутые специалисты, в zeplin.io.

Интерфейс zeplin

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

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

Коротко о главном

Дизайн лендинга безусловно важен, но не настолько, как многие думают. Мы вывели у себя в компании фразу: «Главное, чтобы дизайн сайта не отталкивал». Она очень хорошо описывает всю ситуацию.

По программе максимум ваш дизайн должен нравиться вашей целевой аудитории, а не вам и вашим сотрудникам.

Выписать конкретные пункты, которые станут критериями оценки сайта, невозможно. Хоть и есть стандарты, дизайн — дело творческое, поэтому без чувства прекрасного здесь не обойтись. Если у вас его нет, попросите оценить других, но не забывая, что самое важное — мнение ваших клиентов.

Чтобы не отпускать вас на «водянистой ноте», дам несколько советов, которые помогут хотя бы концептуально понять, куда двигаться, если чувство прекрасного — не ваш конёк:

1. Во всём сайте должен проглядываться общий стиль (в заголовках, иконках, изображениях, переходах).
2. Продающий дизайн сайта должен акцентировать внимание на текстах и изображениях, а не на себе.
3. Шрифты должны быть нестандартными (не Arial, Times New Roman, Verdana и т. д.).
4. Пространства между элементами должно быть достаточным для удобного изучения.

До новых встреч!