11 макетов сайтов, которые сделали контент сияющим в 2017 году

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Два центральных элемента отображаются одновременно. Источник изображения: 62 модели

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

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

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

Противоположные характеристики дуальности (противоположные цвета). Источник изображения: настройки Google Star Wars

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

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

Асимметрия - это отсутствие равенства между двумя сторонами макета. Асимметрия - давняя любимая техника в мире искусства, и в последнее время она стала популярной среди веб-дизайнеров.

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

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

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

Асимметрия делает домашнюю страницу Dropbox более энергичной.

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

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

4. Сетка карт.

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

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

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

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

YouTube имеет строгую сетку; прямые ряды карт сгруппированы по категориям.Каждый значок на доске Pinterest представлен в виде карточки.

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

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

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

Макет журнала позволяет читателям сканировать, читать. и понять страницу быстро. Источник изображения: New York Times

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

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

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

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

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

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

6. Коробки.

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

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

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

Источник изображения: mrporter

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

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

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

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

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

Источник изображения: мера

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

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

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

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

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

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

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

Источник изображения: вид в кусочках

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

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

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

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

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

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

Житель Нью-Йорка использует макет F-формы на своей домашней странице.

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

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

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

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

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

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

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

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

  • Привлекайте пользователей зигзагообразным (или продолженным Z-образным рисунком). Можно привлечь пользователей к сканированию, чередуя текст и изображения несколько раз, чтобы создать зигзаг.
Зигзагообразный паттерн - это Z-паттерн, повторяющийся несколько раз на одной странице. Зигзаги создают ритм, который интересует посетителей. Источник изображения: Evernote

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

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

Этот макет отлично подходит, когда вы хотите сказать меньше и показать больше.

Источник изображения: В поисках Сирии

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

  • Тщательно выбирайте фоновое изображение. Поскольку макет основан на одном изображении, важно выбрать правильное. Нерелевантное изображение может легко запутать посетителей.
  • Используйте видео вместо изображений, чтобы привлечь посетителей. Возможно, стоит использовать видео вместо фотографии, особенно когда вам нужно продемонстрировать что-то в действии.
Видео дает вам лучшую возможность привлечь ваших посетителей к статическому изображению. Источник изображения: Тесла
  • Не позволяйте дизайну уменьшить разборчивость. Текст, который вы используете в качестве наложения на изображение, должен быть достаточно контрастным, чтобы его можно было прочитать. Если текст недостаточно контрастный, попробуйте добавить наложение на изображение.
Источник изображения: Google Wallet

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

Первоначально опубликовано на theblog.adobe.com 13 декабря 2017 г.