9 лучших примеров макетов сайта и идей для веб-дизайна в 2018 | by Margarita M | NOP::Nuances of Programming

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

Команда разработчиков проекта Mockplus собрала 9 лучших примеров компоновки сайтов 2018 года, чтобы вдохновить вас и помочь с созданием вашего следующего проекта.

Идея макета сайта: использование изображений сайта для отображения сферы деятельности компании

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

Минимальное количество элементов помогает полностью сосредоточить внимание посетителя на конкретном продукте.

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

Сайт: https://www.behance.net/gallery/22105949/Diker-Bau-Website

Идея макета сайта: Разделение страницы на секции

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

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

Сайт: https://chekhov.withgoogle.com/alive#home

Идея макета сайта: параллакс эффект при прокрутке страницы

Timоthee Roussilhe — это сайт-резюме дизайнера Тимоти Руссилье. Сайт довольно простой, но в то же время креативный. Здесь используется параллакс эффект, который помогает привлечь посетителей. При прокрутке вниз появляются блоки, перемещающиеся по экрану. Интересно, что в самих блоках также используются эффекты параллакса, которые при прокрутке создают ощущение просмотра фильма.

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

Сайт: https://timroussilhe.com/

Идея макета сайта: закрепленная боковая панель навигации

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

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

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

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

Сайт: https://www.happinessabscissa.com/

Идея макета сайта: сетка карточек

Assemble использует в своем дизайне сетку (grid) карточек, которые позволяют показывать огромное количество интерактивной информации. Такой эффект помогает посетителю легко ориентироваться на сайте, находить интересующий контент и узнавать детали одним щелчком по выбранной карточке.

Данный вариант популярен при создании гибкого дизайна макета. Сетка карточек отлично подойдет для работы с переменными элементами, такими как размер, интервал, количество столбцов и экранов, отображая одновременно множество элементов с одинаковой иерархией. Если короче, то сетка карточек отлично подойдет для нагруженного контентом сайта.

Сайт: http://assemble.edge-themes.com/landing/

Идея макета сайта: макет со множеством столбцов

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

Данный макет похож на журнал. Хороший выбор для публикаций со сложной иерархией и большим количеством контента на странице.

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

Сайт: https://medium.com/

Идея макета сайта: блоки: большой блок в заголовке и несколько маленьких

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

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

Сайт: https://p.w3layouts.com/demos_new/template_demo/07-03-2018/beverages-demo_Free/883271017/web/index.html

Идея макета сайта: асимметрия

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

Обратите внимание, что асимметрия — это не то же самое, что дисбаланс. Цель асимметрии заключается в создании баланса, когда использование равных частей для двух разделов либо невозможно, либо нежелательно. Асимметрия позволяет создать напряжение и динамику. Она способствует лучшему восприятию информации, так как фокусирует внимание читателя на отдельных объектах (узловых моментах). Изменяя ширину, масштаб и цвет каждой асимметричной части контента, дизайнер усиливает визуальную вовлеченность посетителя.

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

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

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

Сайт: http://www.casangelina.com/

Идея макета сайта: большая фотография с четким призывом к действию

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

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

Чтобы привлечь посетителей, можно также использовать видео вместо изображений. Особенно если нужно продемонстрировать продукт в действии.

Сайт: https://tinkerwatches.com/

Вот и все 9 лучших примеров макетов сайта, которые мы нашли. Надеемся, что они окажутся полезными для вашего проекта. И напоследок: не забудьте запустить программу Mockplus, когда соберетесь создавать очередной сайт. Благодаря широкому набору компонентов и значков вы можете легко переносить элементы и завершить свой проект. Удачи и приятного создания!

Перевод статьи Amy Smith: 9 Best Website Layout Examples and Ideas for Web Design in 2018

Лучшие Макеты Сайтов, Которым Надо Следовать в 2022

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

Стоит признать, что когда вы только начинаете и хотите узнать про создание собственного сайта, это не будет главным приоритетом, но так или иначе вы должны обратить на макет своё внимание. Для пользователя занимает порядка 0,05 секунд, чтобы решить нравится ли ему ваш сайт или нет^[1] — 0,05 секунд!

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

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

Содержание

• 1. Почему Макеты Сайтов Важны?
• 2. Общие Правила Для Макетов Сайтов
• 2.1. 1.Шаблон F
• 2.2. 2. Простота — Это Ключ
• 2.3. 3. Размещение Разделов Важно
• 3. Примеры Реальных Сайтов, Макетов
• 3.1. 1. Amazon
• 3.2. 2. Squarespace
• 3. 3. 3. Bethesda
• 3.4. 4. Wikipedia
• 3.5. 5. Forbes
• 4. Лучшие Конструкторы Для Лучшего Макета
• 5. Заключение

Почему Макеты Сайтов Важны?

Чтобы начать наш разговор про макеты сайтов и дизайны сайтов, для начала мы должны напрямую обратиться к основному вопросу — почему кто-либо должен пытаться использовать лучшие макеты сайтов для своего проекта?

Другими словами, почему макеты сайтов вообще важны?

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

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

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

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

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

Самые Популярные Запросы

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

Общие Правила Для Макетов Сайтов

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

1.Шаблон F

Изучая макеты сайтов и лучшие способы создавать для себя один, вы могли наткнуться на термин «Шаблон F».

Проще говоря, это подходящий набор правил как при составлении макета сайта, так и при определении расположения (также форматирования) контента в определённом макете.

Шаблон «F» связан с шаблоном естественного движения нашего глаза (внимания) при посещении сайта и чтении какой-либо информации на нём. Следуя этому определённому шаблону, вы можете оптимизировать контент на вашей странице так, чтобы «точки внимания» отображали только лишь самую необходимую информацию, а также элементы призыва к действию.

Очевидно, что шаблон «F» также окажет влияние на макет сайта, пример в следующей части нашей статьи подтвердит это. Честно говоря, огромное число хороших макетов для сайтов использует этот шаблон!

2.

Простота — Это Ключ

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

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

Вы можете спросить, как простота может быть применима к современным макетам сайтов? Что же, здёсь всё довольно просто (да, я сделал это специально) — большинство людей привыкло к определённому формату сайтов. Это значит, что вы вроде как ожидаете, что меню сайта будет находиться вверху страницы, поиск в правой части или центре и так далее.

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

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

3. Размещение Разделов Важно

Вы можете подумать, что это нечто слишком очевидное, но не торопитесь — чаще всего это не так.

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

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

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

Вы улавливаете смысл?

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

Примеры Реальных Сайтов, Макетов

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

1. Amazon

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

Аспект узнаваемости связан с комбинацией цветовой схемы и самим макетом сайта. Презентабельное чёрно-синее меню вверху страницы в сочетании со шрифтом меню вызывает необратимую реакцию «да, я определённом нахожусь на Amazon!«.

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

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

2. Squarespace

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

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

Squarespace использует минималистичный подход для общего макета страницы — на нём не так много опций для исследования. Но есть возможности, которые БЫЛИ интегрированы креативным и умным способом — отличный пример!

3. Bethesda

Bethesda является одной из самых известных игровых компаний во всём мире.

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

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

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

4. Wikipedia

Даже если Wikipedia является сайтом, который мы все неоднократно посещаем почти каждый день, очень редко люди обращают внимание на макет сайта, хотя пример из него очень хороший.

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

Так как Wikipedia в основном используется для поиска какой-либо информации, то поисковое поле находится прямо в центре страницы. Сайт также использует стерильный, простой и приветливый дизайн.

5. Forbes

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

При посещении Forbes вы можете увидеть, что — в какой-то степени — сайт использует шаблон «F». Это становится очевидно при прокручивании главной страницы — несмотря на то, что большую часть пространства занимают изображения, текстовые данные краткие и чёткие. Кстати, находятся они при этом в определённом разделе сайта.

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

Лучшие Конструкторы Для Лучшего Макета

Показывая примеры и дизайны макетов сайтов, стоит также упомянуть некоторые конструкторы сайтов, которые будут способны предоставить вам инструменты для создания и использования уникальных макетов на вашем сайте.

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

• Squarespace. Squarespace предлагает современные и привлекательные шаблоны, все из которых адаптированы под мобильные устройства. Каждый шаблон имеет различные макеты сайтов и опять же, все они настраиваемые в какой-то степени. Цены на тарифные планы Squarespace начинаются от $12 в месяц.
• Shopify. Если вы хотите создать платформу для электронной коммерции, то с уверенностью не будет более лучшего конструктора, чем Shopify, который будет способен помочь вам с этой задачей. Он не только супер простой в использовании, но конструктор также имеет некоторые великолепные шаблоны и макеты на выбор — все они оптимизированы для потребностей электронной коммерции. Цены начинаются от $29 в месяц.
• WordPress. Несмотря на то, что версия WordPress в виде конструктора вполне достойная, если вы хотите полную свободу при изменении вашего макета сайта, то должны использовать WordPress.org. С небольшими знаниями и правильными плагинами для WP, вы сможете создать любые макеты сайта, которые только сможете себе представить. Помимо этого, это полностью бесплатно — вам нужно лишь найти хорошего провайдера для хостинга сайта.

Самые Популярные Статьи

Взгляните на нашу коллекцию самых детальных статей, руководств и уроков про Конструктор Сайтов. Всегда будьте в курсе и принимайте взвешенные решения!

Заключение

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

Взгляните на наш список лидеров индустрии конструкторов сайтов и удачи вам в создании лучшего макета для вашего сайта!

Ссылки

✓ Проверка Фактов

1. Gitte Lindgaard Gary Fernandes Cathy Dudek & J. Brown: ‘Attention web designers: You have 50 milliseconds to make a good first impression!’

Оставьте ваш честный отзыв

Оставляйте ваше честное мнение и помогите тысячами людей выбрать лучший конструктор сайтов. Все отзывы, позитивные или негативные, будут приниматься только в случае их честности. Мы не публикуем предвзятые отзывы или спам. Поэтому, если вы хотите поделиться опытом, мнением или дать совет — у вас есть всё необходимое!

Лучшие макеты веб-сайтов, которые никогда не устаревают

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

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

• Их можно использовать . Общие макеты веб-сайтов стали обычным явлением, потому что они доказали, что пользователи могут с ними работать.
• Они знакомы . Хороший пользовательский опыт создается путем создания чувства знакомства с пользователями. Посетители испытывают приятное чувство дежа-вю, когда видят знакомые элементы, расположенные так, как они и ожидали. В результате люди будут тратить время на переваривание контента, а не на уникальный дизайн страницы.
• Они экономят деньги . Повторное использование существующих веб-макетов экономит время. Дизайнеры будут тратить меньше времени на эксперименты с макетом и будут уделять больше внимания визуальной иерархии и другим аспектам дизайна, которые напрямую влияют на взаимодействие с пользователем.

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

1. Один столбец

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

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

Когда использовать

Этот макет находит
применение во многих личных блогах, основанное на принципах минималистического дизайна.
Это обычный макет для микроблогов, таких как Tumblr.

Medium , платформа для ведения блогов, использует один столбец

Совет по дизайну

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

Изображение CodeMyUI

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

Разделенный экран (или один
экран разделен надвое) веб-макет идеально подходит для страницы, которая имеет два основных
фрагменты контента равной важности. Это позволяет дизайнерам отображать как
элементы одновременно, уделяя им одинаковое внимание.

Image by 62 Models

Когда использовать

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

Используйте контрастные экраны для разных вариантов использования.
Изображение предоставлено Google Настройки Star Wars

Советы по дизайну

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

3. Асимметричное расположение

Недостаток асимметрии
равенства между двумя сторонами макета. Асимметрия — давний фаворит
техника в мире искусства и в последнее время стала популярной среди дизайнеров, когда
создание макетов сайта.

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

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

Когда использовать

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

Асимметрия делает страницу Dropbox динамичной.

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

Советы по дизайну

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

Цветовой контраст добавляет визуальный вес. Изображение от Культуры PL.

4. Сетка карт

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

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

Когда использовать

Сетка карточек
хорош для сайтов с большим количеством контента, которые отображают множество элементов с одинаковым
иерархия.

Сетка карточек YouTubeСетка карточек Pinterest

Советы по дизайну

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

Анимированные отзывы Smashing Magazine на своих карточках.

5. Журнал

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

Макеты в журнальном стиле поощряют сканирование.

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

Когда использовать

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

Журнальные макеты хорошо подходят для новостных сайтов.

Советы по дизайну

• Этот веб-макет подчеркивает заголовки и изображения. Размер заголовка/изображения напрямую связан с вниманием, которое оно привлекает. Более заметные элементы привлекают внимание пользователя быстрее, чем менее заметные. Возьмем, к примеру, New York Times: самый важный контент на странице имеет более крупные эскизы, более крупные заголовки и более подробный текст.

The New York Times использует
другой размер текста, чтобы создать ощущение важности — размеры текста варьируются в зависимости от
создать визуальную иерархию.

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

6. Коробки

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

Когда использовать

Это довольно
универсальный макет, который можно использовать как для отдельных сайтов, похожих на портфолио, так и для
для корпоративных/электронных коммерческих сайтов.

Изображение от mrporter

Советы по дизайну

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

Изображение Microsoft Surface

7. Фиксированная боковая панель

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

Когда использовать

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

Изображение от measponte

Советы по дизайну

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

Trefecta предоставляет параметры настройки и обмена на боковой панели.

8. Избранное изображение

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

Когда использовать

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

Отсутствие других элементов в этом макете привлекает внимание пользователя.

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

Image by Species in Pieces

Советы по дизайну

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

9. Макет F-образной формы

Этот тип макета веб-сайта был создан на основе того, как пользователи читают контент в Интернете. F-образный шаблон сканирования, первоначально определенный NNGroup, гласит, что пользователи обычно просматривают тяжелые блоки контента по схеме, похожей на букву F или E. Наши глаза начинают с правого верхнего угла страницы, сканируют горизонтально, затем опуститесь на следующую строку и делайте то же самое снова и снова, пока не найдете что-то, что привлечет наше внимание (интересный контент). Этот шаблон сканирования актуален не только для пользователей настольных компьютеров, но и для мобильных пользователей.

Когда использовать

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

Домашняя страница The New Yorker имеет форму буквы F.

Советы по дизайну

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

10. Z-образная компоновка

Аналогично
по сравнению с F-образной компоновкой, Z-образная компоновка также имитирует естественные привычки сканирования. Посетители сайта (из западных культур) начинают с
верхний левый угол. Они сканируют от верхнего левого угла к верхнему правому, образуя
горизонтальная линия. Следующий шаг, однако, немного отличается — вместо
опускаясь прямо вниз, как в F-образном узоре, их глаза блуждают вниз и
к левой стороне страницы, создавая диагональную линию. Наконец, взгляд назад
снова направо, образуя вторую горизонтальную линию.

Когда использовать

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

Z-шаблон работает, когда на сайте есть определенный призыв к действию.

Советы по дизайну

• Engage
  пользователи с зигзагом (или продолжением Z-образной формы). Можно вовлечь пользователей в
  сканирование путем чередования текста и изображений несколько раз, чтобы создать зигзаг.

Зигзаги создают ритм на веб-странице Evernote.

11. Рекомендуемые визуальные материалы

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

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

Когда использовать

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

Советы по дизайну

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

Заключение

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

Words by
Ник Бабич

Ник Бабич — UX-архитектор и писатель. Ник провел последние 10 лет, работая в индустрии программного обеспечения, уделяя особое внимание исследованиям и разработкам. Он считает рекламу, психологию и кино среди множества своих интересов.

Лучшие макеты веб-сайтов на 2021 год (с примерами)

Макет вашего веб-сайта может определить его успех.

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

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

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

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

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

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

Тем не менее, давайте рассмотрим наиболее распространенные варианты макета, доступные вам.

1. Макет с одним столбцом

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

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

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

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

Из-за своей простоты макет с одним столбцом вызывает мало проблем. Тем не менее, вам необходимо тщательно продумать поток информации. В каком порядке пользователь должен видеть ваш контент?

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

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

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

2. Макет, ориентированный на контент

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

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

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

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

Особое внимание следует уделить боковым стойкам. Крайне важно, чтобы веб-дизайнер поместил правильный контент в эти столбцы и чтобы они визуально имели правильный вес.

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

Например, обратите внимание, как журнал Smashing Magazine использует красочную иллюстрацию кота, чтобы привлечь внимание к форме подписки на новостную рассылку в правой колонке.

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

3. Макет журнала

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

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

Это также отличный макет для выделения контента, который регулярно меняется. Вот почему новостные сайты, такие как The Washington Post, так его поддерживают.

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

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

Самый эффективный способ решить эту проблему — создать четкую визуальную иерархию. Другими словами, сделайте некоторые «истории» больше, чем другие.

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

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

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

4. Макет, разбивающий сетку

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

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

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

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

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

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

5. Полноэкранный макет

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

Возьмем, к примеру, Виды в штуках. Этот богатый и интерактивный презентационный опыт рассказывает истории 30 задействованных видов.

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

Не то чтобы вы должны строго придерживаться подхода с одним экраном. На первый взгляд веб-сайт Roux на площади Парламента кажется полноэкранным веб-сайтом в том же смысле, что и Species in Pieces. Их великолепные образы заполняют все окно просмотра.

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

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

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

6. Чередующийся макет

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

Свое название ему дало то, что изображение чередуется. Таким образом, в первом блоке содержимое будет слева, а изображение справа, а в следующем блоке этот макет будет перевернут.

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

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

Например, Convertkit включает отзыв и призыв к действию вместе с текстом в каждом блоке контента.

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

Конечно, ваши требования могут быть другими, поэтому можно рассмотреть еще один вариант — карточный макет.

7. Макеты на основе карточек

Макеты страниц на основе карточек — еще один распространенный подход к макетированию, который вы встретите в Интернете.

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

Это делает их популярным выбором для страниц со списком товаров на сайтах электронной коммерции. Это позволяет веб-сайту отображать изображение продукта, описание и цену. Вы даже можете добавить такие функции, как «сохранить на потом», как вы можете видеть на веб-сайте Asos.

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

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

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

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

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

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

Тем не менее, это незначительная проблема, которая объясняет широкое распространение такого подхода к компоновке.

Другим не менее популярным дизайном является макет главного изображения.

8. Макет героя

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

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

Как видно из приведенных выше веб-сайтов Pixave и Apple, они обычно состоят из большого фонового изображения, заголовка или стропы и описания. Макеты героев также часто сопровождаются заметным призывом к действию.

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

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

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

Значительно реже используется раскладка с разделенным экраном.

9. Макет с разделенным экраном

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

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

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

Например, модельное агентство 62 Management использует разделенный экран, чтобы побудить пользователей определить, ищут ли они модель мужского или женского пола.

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

Аналогичным вариантом, обеспечивающим немного большую гибкость, является асимметричный макет.

10. Асимметричный макет

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

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

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

Напротив, веб-сайт Nourish Eats использует вторую колонку, чтобы вы могли увидеть следующий раздел своего веб-сайта.

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

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

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

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

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

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

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

Примечание:

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