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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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