Выбор правильного макета является одним из самых первых шагов в создании веб-сайта, и очень важно, чтобы получить правильный. Служа основой вашего дизайна, макет сайта может значительно повлиять на то, насколько коммуникативным и интуитивным будет ваш сайт.
Что такое макет сайта?
Макет веб-сайта-это расположение всех визуальных элементов на веб-странице и результирующие отношения между ними. Благодаря преднамеренному размещению элементов страницы макет может улучшить сообщение сайта, а также его удобство использования.
Верстка является ключевым компонентом дизайна сайта. Он определяет последовательность, в которой элементы страницы регистрируются среди посетителей, какие элементы привлекают наибольшее внимание, и общий баланс, достигнутый в дизайне.
Проще говоря, хороший макет сайта может привести фокус посетителей в правильном направлении. Это может помочь им тяготеть к тому, что наиболее важно в первую очередь, а затем перейти к следующим разделам в порядке значимости.
01. Z-образный макет
Когда мы сталкиваемся с новой веб-страницей, мы сразу же просматриваем ее, чтобы понять суть вещей. Это быстрое сканирование, называемое ским-чтением, часто выполняется в форме буквы Z или в форме зигзага. Наши глаза перемещаются из верхнего левого угла в верхний правый угол, затем вниз в нижний левый и, наконец, снова вправо.
Макет веб-сайта Z-pattern использует эту нашу привычку чтения, распространяя всю важную информацию по форме Z. Логотип обычно помещается в верхнем левом углу, так что он регистрируется первым. Напротив него, в самом правом углу, вы можете разместить меню навигации вместе с заметным призывом к действию.
Диагональная часть Z-паттерна, охватывающая всю страницу сверху донизу,-это то место, где должна находиться наиболее привлекающая внимание информация. Это может быть достигнуто с помощью захватывающих визуальных эффектов и краткой строки текста, представляя, что такое веб-сайт.
Нижняя часть Z-паттерна должна быть кульминацией всего, что вело к нему до сих пор. Независимо от того, готовились ли вы к покупке продукта или бронированию услуги, сейчас самое время привлечь посетителей сайта. Поместите самую важную кнопку призыва к действию (CTA) в самом конце Z-образной формы, побуждая пользователей к действию.
Идеально подходит для: страниц, которые очень визуальны и содержат минимальную письменную копию. Целевые страницы, которые служат определенной цели преобразования, обычно идеально подходят.
02. F-шаблон компоновки
Как и макет Z-pattern, этот дизайн также основан на обычном поведении сканирования страниц. На сайтах с большим объемом текста мы склонны пропускать или читать информацию в форме буквы F. Это означает, что верхняя горизонтальная часть страницы получает большую часть нашего внимания, и наши глаза идут вертикально вниз оттуда, с левой стороны, служащей нашим фокусом.
При использовании макета F-pattern не забудьте вложить ресурсы в верхнюю часть страницы, где посетители, скорее всего, задержатся немного дольше. Напишите контент веб-сайта, который представляет остальную часть страницы убедительным образом. Эта верхняя часть фигуры F обычно включает в себя заголовок, подзаголовок и показанное изображение.
Вертикальная линия F-шаблона в левой части страницы предназначена для того, чтобы сделать текст более привлекательным. Это можно сделать с помощью изображений, значков или с помощью элементов форматирования, таких как маркеры или нумерация.
Идеально подходит для: веб-сайтов, которые в основном вращаются вокруг текста. Например, при создании блога этот макет веб-сайта применим как для главной страницы, так и для отдельных страниц блога.
03. Полноэкранный макет изображения
Этот макет веб-сайта включает короткий текст поверх отличаемого изображения, которое либо большое, либо полноэкранное. Один визуальный элемент, размещенный спереди и в центре, может привести к эффектному и захватывающему дизайну домашней страницы. Он одновременно служит для передачи сообщения эффективно и мгновенно.
Большие медиа-функции могут передать многое о том, кто вы и что вы делаете - в такой степени, как проблеск. Сам визуальный элемент может быть чем угодно-от фотографии до иллюстрации или видео. В любом случае, он должен быть высокого качества и соответствовать вашим услугам, продукту или общей атмосфере.
В этом типе макета веб-сайта полноэкранный визуальный элемент сопровождается короткой строкой текста, чтобы дополнительно объяснить, что такое сайт. Создайте сильный заголовок или броский слоган, чтобы представить то, что вы предлагаете как бизнес, заставляя посетителей с нетерпением ждать, чтобы узнать больше.
Наконец, этот макет обычно выглядит так же здорово и на его мобильной версии веб-сайта.
Идеально подходит для: компаний, которые хотят выделить определенную нишу или продукт. Например, сайты ресторанов могут с гордостью демонстрировать то или иное блюдо, а сайт свадебных торжеств-счастливую пару.
04. Раскладка разделенного экрана
Раскладка с разделенным экраном является одной из основных тенденций веб-дизайна. Вертикально разделяя экран посередине, он создает идеально симметричный баланс, важный принцип дизайна. Это аккуратное деление на две части позволяет каждому разделу выражать совершенно иную идею - или, наоборот, ссылаться на одну и ту же идею с двух разных точек зрения.
Шаблон макета веб-сайта, показанный здесь, представляет собой обед с привлекательным визуальным изображением слева, а текст и соответствующие векторные изображения справа. Расположение позволяет обеим сторонам полностью дополнять друг друга, а не конкурировать за внимание. Этот же дизайн может также хорошо работать в тех случаях, когда посетителей сайта просят выбрать между двумя противоположными вариантами, такими как "мужские" и "женские" категории на веб-сайте электронной коммерции.
Чтобы максимально использовать макет разделенного экрана, рассмотрите возможность включения некоторого движения, заставляя каждую половину экрана вести себя немного по-разному. Например, вы можете использовать эффекты прокрутки параллакса только на одной стороне экрана. Другой вариант-расширить этот макет на второй сгиб вашего дизайна, но поменять местами содержимое на двух сторонах экрана для дополнительного визуального интереса.
Идеально подходит для: веб-сайтов, которые предлагают два существенно различных типа контента,или веб-сайтов, которые хотят равномерно сочетать письменную копию и изображения. Интернет-магазины, которые сегментируют пользователей по возрасту, полу или поведению, хорошо подходят для этого макета.
05. Асимметричная планировка
Подобно макету с разделенным экраном, Этот стильный макет веб-сайта также разделяет экран. Только на этот раз две части не равны по размеру и весу. Это смещение баланса с одной стороны на другую создает визуальное напряжение и делает страницу более динамичной. Это смелый дизайн, служащий мощным инструментом для создания и удержания вовлеченности пользователей.
Благодаря неравномерному распределению масштаба, цвета и ширины страницы фокус посетителей может быть направлен на определенные элементы, а не на другие. Чтобы достичь этого, придайте некоторым элементам больше визуального веса, чтобы они действовали как фокусы.
Решите, какую часть вашего контента вы хотите выделить. Это может быть что угодно, от фотографии продукта до онлайн-формы, которую пользователи должны заполнить. Затем выделите его, используя высокий цветовой контраст, увеличенные пропорции и другие виды визуального акцента.
Идеально подходит для: веб-сайтов, которые собираются для современного и инновационного вида,и заинтересованы в привлечении пользователей. Хорошим примером может служить бизнес-сайт или портфолио дизайн-агентства.
Подписывайтесь на канал и делитесь материалами в социальных сетях.