Принципы дизайна • Ostapich - разработка сайтов
Scroll to top
© 2019, Ostapich - веб-дизайнер Пользовательское соглашение

Принципы дизайна

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

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

Что же, наш сегодняшний материал будет поделен на несколько блоков:

  1. Смысловые секции
  2. Визуальная иерархия
  3. Призыв к действию и формы
  4. Обложка
  5. Навигация
  6. Цвет
  7. Шрифт
  8. Изображения
  9. Иконки
  10. Анимация
  11. Общий стиль и аккуратность
  12. Закрепление материала

 

Смысловые секции

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

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

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

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

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

Еще один способ – чередуйте цвета фона секций. Таким образом вы зададите ритмичность вашей странице. А если вы сделаете 1-2 секции более яркими (например, выделив их желтым или синим цветом), то сможете расставить акценты. 

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

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

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

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

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

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

Похожие записи