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