Дизайн лендингов для новичков

Введение. Важность структуры и композиции

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

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

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

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

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

Работа над композиционной структурой

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

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

На этапе создания структуры вы не просто «размещаете текст». Вы заранее продумываете, какие ещё элементы будут на странице и зачем. Где должны появиться иллюстрации (и что они должны делать: объяснять, подтверждать, создавать доверие). Где нужна инфографика (чтобы быстро показать процесс или цифры). Какие куски информации лучше превратить в карточки или плашки. И самое главное: вы решаете, как человек будет двигаться взглядом по странице. Ваша задача — выстроить удобную линию пути взгляда зрителя.

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

Взгляд зрителя и его путь

Расставляйте элементы так, чтобы взгляд плавно переходил от объекта к объекту. Без резких скачков, без длинных «прыжков» через пустоту. Непродуманная композиция приведёт к тому, что зритель просто пропустит какую-либо информацию. Либо случайно ее не заметив, либо специально проигнорировав, решив, что в таком месте ничего важного написано не будет. При грамотной композиции внимание зрителя идёт по направленному пути само собой, ему не нужно заставлять себя читать и находить блоки текста. Содержимое сайта усваивается без усилий.

Самый простой способ собрать композицию — противопоставление. «Большое — малое» почти всегда работает. Например: крупный заголовок рядом с маленьким анонсом; большой визуальный акцент рядом с компактным списком; большая цифра рядом с маленькой подписью.

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

Чтобы также задать ритм в композиции и скролл сайта не был скучным, полезно добавлять умеренную динамику: иногда взгляд может смещаться чуть вправо-влево, если вы чередуете блоки «текст слева — визуал справа» и наоборот. Но как уже было сказано выше — чрезмерные пустые пробелы лишь рвут вашу структуру на не связанные между собой части.

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

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

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

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

Лендинг должен быть единым целым.

Шрифты — тоже композиция

Как уже говорилось, в первую очередь человеческий взгляд определяет силуэты, а шрифты тоже представляют собой силуэты, и с ним работают те же принципы композиции. Поэтому также важна разница в весе шрифтов — обычный текст нужного размера для удобства чтения, и заголовки заметно больше простого текста. Шрифтом тоже можно выстраивать ритм в композиции, и пустое пространство — отступы, также являются её частью. Когда вы начинаете подбирать шрифтовую гарнитуру для сайта, то помните о том, что не нужно брать слишком много шрифтов. Чрезмерное количество разных шрифтов превратят ваш макет в разнородную «кашу». Лучше всего использовать 2–3 различных друг от друга шрифта. Ну может быть ещё один дополнительно для выделения каких-нибудь важных деталей. Например, для ценников. Подберите себе следующие шрифтовые стили:

1. Основной шрифт для массы текста.
2. Шрифт для заголовков.
3. Опционально — акцидентный стиль для выделения небольших, но важных блоков текста.

Шрифт для текста должен быть простым и удобным для чтения. Без ненужной декоративности и сложных форм. Всё-таки мы подбираем такой шрифт, которым будут написаны большие блоки текста. Идеально для такого стиля текста подойдут простые и лёгкие шрифты. Такие как Museo Sans, Roboto, Inter, Lato и многие-многие другие в том же ключе. Красивые, сложные декоративные шрифты лучше оставить заголовкам: заголовки короткие и большие по размеру, поэтому в данном случае подобные шрифты не повредят читаемости.

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

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

Делаем чтение приятнее

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

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

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

Сокращение длины сайта

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

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

Главное показать слайдер так, чтобы было очевидно, что объект является слайдером и что его можно полистать. В идеале без нанесения на экран лишних элементов. Одним из хороших способов показать слайдер — поместить содержимое на плашку и/или показать рядом выглядывающей следующую страницу слайда. Но в любом случае, в слайдеры лучше не помещать особо важную информацию.

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

Графическое оформление готовой структуры

После того как структура готова, визуально оформлять страницу станет заметно проще. Потому что вы больше не распыляетесь на бесконечное количество идей о том «как бы интересно задизайнить». У вас есть твёрдый фундамент — и теперь вы просто добавляете цвета и эффекты как в раскраске. А с учётом стилей цветов в Figma можно довольно легко менять и подбирать палитру, решая, что подойдёт лучше.

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

Приоритеты визуального оформления

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

В дальнейшем похожее сильное внимание должен привлечь CTA- блок (Call To Action), то есть блок, который призывает посетителя к действию. Обычно он предлагает оставить на сайте свою заявку, заполнив форму с данными. Этот блок должен ярко выделяться, чтобы привлечь на себя внимание, то есть всем своим видом быть «продающим». Обычно, если весь сайт сделан в скромных чистых тонах, то такому блоку позволительно быть наоборот ярким и цветастым, а также иметь привлекательную иллюстрацию.

Подбор цветовой палитры

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

Можно провести для себя небольшой тест. Загляните на привычный себе сайт с референсами лендингов, например Pinterest (Пинтерест) или Awwwards (Авввардс). Посмотрите на дизайны различных лендингов, не читая текст. Можете ли вы таким образом, по сути, не зная о чём сайт, догадаться, какая у него тематика? Так и работают ассоциации. Если тематика сайта считывается сразу на визуальном уровне, значит его внешнее оформление подобрано в точку. Если же ассоциация, которую вызвал у зрителя внешний вид сайта, в итоге не совпадёт с тем с его тематикой, то это опять же может привести к диссонансу в голове посетителя сайта.

Таким же образом можно не вглядываясь осмотреть свой дизайн лендинга. Вызывает ли он подходящие ассоциации?

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

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

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

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

Насыщение иллюстрациями

Как бы красиво ни был расставлен текст и как бы ни была составлена типографика, иллюстрации всё равно смогут хорошо разнообразить визуально ваш сайт, особенно если это продающий лендинг.

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

Как правило, иллюстрации «просятся» на первый экран и в CTA-блок, поскольку, по сути, это должны быть самые завлекающие экраны сайта.

Важные мелочи относительно иллюстраций с людьми:

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

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

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

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

Проверка ошибок и подготовка к сдаче

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

Но важнее всего — убедиться, что лендинг удобен для чтения. Смотрите как пользователь: понятно ли что кликабельно, а что нет? Заметны ли важные элементы? Не теряются ли кнопки? Нет ли мест, где хочется пролистнуть быстрее, потому что блок тяжело читать?

Поставьте себя на месте зрителя следующим образом. Откройте сайт в реальном масштабе, закройте глаза на какое-то время, дабы отдохнуть от макета сайта, на который вы смотрите уже так много времени, откройте глаза и прокручивайте в привычном темпе страницу. Глаз автоматически пробегается по текстам и захватывает их смысл? Или же наоборот, вы никак не задерживаетесь на тексте и просто пропускаете весь посыл. Это надёжно работающий способ оценить качество дизайна и понять, что можно улучшить.

Когда ваш сайт готов, то пора проверить его весь на предмет ошибок. Замерить все отступы в сайте, они должны быть выстроены по одной логике (например, быть кратны 10 или 5), это впоследствии облегчит труд верстальщику. Проверить все выравнивания, ничего ли не съехало, не затесались ли ненужные элементы, применены ли на объектах одинаковые эффекты (чтобы избежать разнобоя), стоят ли именно те шрифты и цвета, что задуманы, и прочая мелочевка. Сделайте на кнопках ховеры (то, как выглядят кнопки при наведении на них курсором), фавиконы (иконка сайта в верхней панели браузера) и бейджик (картинка, которая автоматически прикрепляется к ссылке сайта в соцсетях), и подготовьте легенду. То есть макет, в котором будут показаны используемые в сайте стили шрифтов, цветовая палитра и используемые эффекты. Опять же, это будет полезно верстальщику.

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

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

Тогда ваш лендинг будет хорошо работать, и выполнять свою задачу.