Основные правила верстки лендинга

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

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

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

Теория близости

Об это этом принципе говорил Артемий Лебедев в книге «Ководство»: «рядом — значит вместе».

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


Дизайнер Артемий Лебедев

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

Как применяется это правило? Например, часто заголовок ставят на одинаковом расстоянии между двумя текстами и непонятно, он относится к верхнему или нижнему пояснению.

В примере ниже между текстом и заголовком расстояние 69 px, а между другими текстом и заголовком 520 px — сразу видно, к чему относится заголовок. Никакой путаницы нет.

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

В левом столбце мы сделали расстояния между товарами 40 px — разобраться, что к чему практически не возможно. 

В правом столбце сделали отступы между описанием и товаром 20 px, а между товарами 60 px, чтобы разделение было явным. Так посетителю сайта удобно воспринимать информацию, и можно сосредоточиться на выборе.

Немного о шрифтах

На Flexbe есть четыре стиля шрифтов:  

  • текст
  • заголовок
  • подзаголовок
  • цитата 

На одной странице нельзя выбрать несколько шрифтов для одного стиля. Только четыре шрифта для четырех стилей. Если вы сделали заголовок шрифтом Roboto — все заголовки на этом лендинге будут Roboto. 

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

Не выбирайте декоративный шрифт для основного текста. Рукописный, с завитушками, оригинальный — он затруднит чтение, и человек не получит нужной информации. Для основного текста подойдет Roboto, Arial, Tahoma, Verdana, Open Sans, PT Sans.

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

Сколько заглавных букв выдержит предложение

Не пишите целые фразы заглавными буквами. 

Во-первых, это моветон и вне правил русского языка.

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

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

Предел элементов в шапке

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

Когда оформляете шапку на лендинге — четырех элементов вполне достаточно. Самое основное: логотип, меню из 3-4 названий, телефон и кнопка «Оставить заявку». 

Вот как такая шапка будет выглядеть на экране смартфона:

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

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