10 интересных лейаутов для ваших проектов

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

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

Хороший лейаут важен

В первые годы существования Интернета веб имитировал печатные издания. Колонки и строки, жесткие линии, размещенные в специально отведенных местах контент и изображения — все напоминало газетные полосы. Такие однородные макеты ограничивали разнообразие веб-сайтов. Но по мере развития языков разметки и программирования, таких как HTML, CSS и JavaScript, время загрузки сокращалось, функциональность сайтов расширялась и появлялись новые возможности, инструменты и шаблоны для создания лейаутов.

Способ представления контента не менее важен, чем сам контент. Если некоторые элементы отвлекают пользователей или затрудняют восприятие важной информации, страдает опыт взаимодействия (UX). 

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

Надеемся, эти 10 идей помогут вам создать сайт, который будет находить отклик у посетителей и дарить им незабываемый опыт.

1. Добавьте глубину с помощью эффекта параллакса

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

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

2. Используйте наложение элементов

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

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

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

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

3. Разбейте контент на фрагменты с помощью смещённых заголовков, подзаголовков и колонок

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

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

Фармацевтическая компания Alvogen использует “ступенчатый” дизайн, сдвигая основной текст относительно заголовков и размещая текст справа, а изображения слева в одних разделах и меняя их местами в других. Все это создает эффект визуальной лестницы, который направляет посетителей сайта вниз по странице.

4. Горизонтальный лейаут

Горизонтальный лейаут — простой способ избежать перегруженности дизайна. А на смартфонах мы можем расположить соответствующие блоки вертикально.

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

5. Разделенный экран

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

Компания по продаже продуктовых наборов, Ono, использует разделенный экран с анимацией прокрутки, для создания динамичного, красочного опыта. Такой подход позволил выстроить четкий путь к конечному CTA (призыву к действию) в нижней части обеих колонок: посетители сайта продолжают прокрутку, чтобы дочитать текст, размещенный справа. По мере прокрутки слева появляются новые визуальные элементы, которые вносят разнообразие и не дают читателям заскучать. 

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

6. Гигантские буквы

Если сделать все правильно, гигантский текст может привлечь внимание пользователей и громко заявить о бренде.

Гигантский заголовок и стрелка вниз на сайте цифрового агентства Okalpha сразу же побуждают пользователя прокрутить страницу вниз, чтобы узнать больше. А вступление — "Привет. У нас все хорошо" — выглядит так, будто вы уже спросили, как у них дела. Когда посетители прокручивают страницу вниз, их встречает краткое описание компании и ее деятельности. 

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

7. Горизонтальная прокрутка

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

Дизайнер Альфредо Брикколо хорошо справился с задачей, выбрав боковую прокрутку для демонстрации портфолио на сайте Krasa Architecture, Light & Design.

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

На сайте Krasa Architecture этот лейаут позволяет посетителям ознакомиться с работами компании. Еще одна интересная деталь — черно-белые обложки проектов становятся цветными при наведении.

8. Встроенные слайдеры

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

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

Refokus Slider Generator — инструмент, который поможет вам создать кастомный слайдер со статическими элементами, не написав ни строчки кода. Такой подход особенно эффективен на сайтах электронной коммерции: вы можете показывать продукты без перенаправления пользователей на новую страницу.

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

Примечание. В коллекции Refokus Tools вы можете найти не только слайдер, но и другие бесплатные готовые компоненты и решения для Webflow. 

9. CSS-grid (гриды)

CSS-grid (или гриды) — это технология, которая позволяет выравнивать элементы лейаута по горизонтальной и вертикальной осям. Пример — этот смайлик, сделанный прямо в Webflow.

С помощью CSS-grid дизайнеры могут определять позиционирование элементов в двух измерениях, что дает им более точный контроль над визуалом и контентом. Гриды отлично подходят для экспериментов, ведь вы можете “ломать” сетки и создавать другие уникальные дизайны. 

10. Сохраняющаяся популярность брутализма

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

Этот сайт-портфолио дизайнера Джошуа Гарсиа с аккордеоном проектов — отличный пример брутализма.

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

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