Макеты сайтов для верстки: Бесплатные шаблоны PSD HTML CSS

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

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

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

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

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

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

02. Макет с F-образным рисунком

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

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

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

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

03. Макет полноэкранного изображения

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

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

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

Наконец, этот макет обычно отлично смотрится и на мобильной версии веб-сайта.

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

04. Разделение экрана

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

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

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

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

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

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

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

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

Идеально для: веб-сайтов, которые имеют современный и инновационный вид и заинтересованы в привлечении пользователей.Хороший пример — бизнес-сайт или портфолио дизайнерского агентства.

06. Макет в один столбец

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

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

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

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

07. Блочный макет

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

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

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

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

08. Макет карточек

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

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

Идеально для: Веб-сайтов с богатым содержанием.Этот макет сайта идеально подходит для видеоблога или интернет-магазина.

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

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

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

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

Идеально для: веб-сайтов с большим объемом контента, таких как новостные публикации или блоги.

10. Макет горизонтальных полос

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

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

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

Автор: Эден Спивак

Эксперт и писатель по дизайну

Идеи макета веб-сайта: различные типы и примеры макета веб-сайта — создание вашего веб-сайта

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

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

• Начните с вашего контента (макет веб-сайта, ориентированный на контент)

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

• Полная ширина в сравнении с шириной в рамке Макет веб-сайта

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

Изображение взято с веб-сайта Unlocked Capital

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

Изображение взято с веб-сайта Beauty INU

• Изображение статического заголовка и макет веб-сайта для слайд-шоу

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

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

Изображение взято с веб-сайта Pet Milestone Cards

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

Изображение взято с веб-сайта Baby Fresh

Изображение взято с веб-сайта Baby Fresh

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

• Карточный макет веб-сайта против разрыва сетки

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

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

Изображение взято с веб-сайта Эми Чемберс

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

Изображение взято с веб-сайта Drumpants

• Разделенный экран и асимметричный макет веб-сайта

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

Изображение взято с веб-сайта Strikingly — формальный шаблон

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

Изображение взято с веб-сайта Strikingly — шаблон Figapps

• Фиксированная боковая панель и макет веб-сайта журнала

Фиксированная боковая панель — это идеальный макет, который делает навигацию намного проще, чем бесконечные прокрутки и смахивания, ведущие в никуда.Боковая панель — это раздел, в котором вы размещаете меню содержимого вашего веб-сайта. Вы можете закрепить боковую панель в левой или правой части экрана. Когда посетители прокручивают страницу вверх и вниз, они не теряют ту часть, где они могут легко перейти в раздел «Предварительный заказ» или «Купить сейчас». Интернет-магазины могут попробовать. Точно так же, как этот один из пользователей Strikingly проделал потрясающую работу, используя макет веб-сайта с фиксированной боковой панелью.

Изображение взято с веб-сайта Fodi

Макет веб-сайта журнала применим для сайтов публикаций.Он представляет собой иерархию информации вместе с хорошо представленными изображениями. Несмотря на то, что это дает зрителям комплексное представление, иногда это может вызвать ошеломляющее ощущение из-за слишком большого количества информации, представленной на одной странице. Вы должны быть осторожны и изобретательны при использовании этого макета, чтобы выделить наиболее важные детали. Поскольку это комбинация текста, контента и изображений, вы можете использовать либо стиль разрыва сетки, либо асимметричный макет. Это большая проблема — как организовать свой веб-сайт в соответствии с предпочтениями зрителей.Люди, посещающие ваш сайт, имеют разный вкус к информации. Они ищут конкретные вещи, поэтому вы должны максимально использовать макет веб-сайта журнала. У компании Strikingly есть новый шаблон Remote Joy, который идеально подходит для создания макета журнала. Простые правки облегчают вашу жизнь.

Изображение взято с веб-сайта Strikingly -Transmit template

Почему вы должны выбрать создание веб-сайта с помощью Strikingly?

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

Изображение взято с веб-сайта Strikingly

У нас есть режим перетаскивания

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

Снимок экрана из редактора веб-сайтов Strikingly

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

Ваш новый макет веб-сайта убивает вашу вовлеченность?

[Это гостевая статья, доктор философии Лираз Маргалит]

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

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

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

Но насколько эффективна эта горизонтальная компоновка?

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

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

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

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

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

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

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

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

Оригинальный вертикальный макет сайта:

Новый горизонтальный макет сайта:

Критическая важность показателей взаимодействия

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

Если вы продаете товары, эти показатели, скорее всего, будут коррелировать с продажами.

Но есть и вторичный удар. Большинство экспертов считают, что Google использует показатели вовлеченности (к которым он может получить доступ через Google Analytics, браузер Chrome и поведение пользователей при поиске) в качестве индикатора удовлетворенности пользователей. Это, в свою очередь, может быть одним из многих факторов, влияющих на рейтинг в результатах поиска Google.

Ранее в этом году Рой Хинкис из компании Similar Web сообщил о результатах крупномасштабного исследования 200 000 доменов. В статье на Moz.com Хинкис описывает умеренную корреляцию между показателями вовлеченности, такими как время просмотра, количество страниц за посещение и рейтинг.

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

Чем объясняется разница по вертикали / горизонтали?

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

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

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

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

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

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

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

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

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

Психологические открытия

Термин «Распознавание объекта» обозначает то, как мы интерпретируем значение объекта.

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

Нашему мозгу нравится распознавать закономерности, которые ранее приводили к успешному взаимодействию. В книге How We Decide Джона Лерер пишет, что наш мозг производит вызывающее удовольствие нейрохимическое вещество, дофамин , когда мы распознаем знакомые закономерности в окружающем нас мире.

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

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

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

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

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

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

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

Основываясь на гештальтском «Законе замыкания», наш разум имеет тенденцию завершать незавершенные формы и создавать ментальные объекты, даже если отображается только небольшая часть формы. Наш разум делает это, игнорируя пробелы и завершая контурные линии, чтобы сформировать формы, уже представленные в нашем сознании.

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

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

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

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

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

Фиксация горизонтального расположения

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

Если вы застряли с горизонтальной компоновкой, вот несколько быстрых исправлений, которые вы можете попробовать:

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

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

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

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

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

Другие проблемные схемы

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

Например, вот недавний редизайн домашней страницы Pinterest:

Как видите, он показывает нам iPad и iPhone, которые обрезаны внизу страницы, создавая впечатление, что остальные изображения (и, возможно, дополнительный контент) скрыты ниже сгиба.

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

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

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

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

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

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

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

13 правильных макетов веб-сайтов

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

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

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

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

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

Пусть узнают о вас.

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

Некоторые элементы дизайна, которые следует учитывать в макете веб-сайта:

• Визуальная иерархия
• Цвет
• Негативное пространство

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

• Яркие цвета
• Иллюстрации
• Дополненная реальность

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

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

Итак, что вы планируете попробовать в течение месяца или недели? Что касается меня, я думаю, что хочу пойти в театр.

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

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

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

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

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

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

Еще один интересный момент, на который следует обратить внимание, — это когда вы немного прокручиваете, нажимаете кнопку «удивите меня» и узнаете что-то новое о Уэлсли.Вы также заметите, что они сложили туда фотографии, что также свидетельствует об асимметрии и визуальной иерархии.

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

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

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

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