Макеты сайтов

Лучшие примеры и идеи макета сайта


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

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

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

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

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

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

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

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

Мы начнем с самого простого макета шаблона, одного столбца.

1. Одиночная колонка

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

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

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

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

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

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

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

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

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

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

2. Контент-ориентированный макет

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

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

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

Сообщения на Boagworld разбивают содержимое на заголовки, списки, изображения и цитаты.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. Схема разрыва сетки

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

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

VR Arles Festival привлекает ваше внимание к их панели навигации, перекрывая две колонки.

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

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

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

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

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

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

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

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

«Виды и кусочки» - это богатый интерактивный опыт, который происходит без прокрутки.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7. Карточные макеты

Макеты страниц на основе карт – это еще один распространенный подход к макетам, который вы можете увидеть в Интернете..

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

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

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

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

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

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

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

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

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

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

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

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

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

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

8. Расположение героя

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

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

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

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

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

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

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

Гораздо менее распространенный вариант макета – это разделение экрана.

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

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

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

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

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

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

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

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

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

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

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

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

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

Félix Lesouef использует асимметричный макет, чтобы выделить навигацию по своим сайтам.

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

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

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

Как выбрать макет

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

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

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

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

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map