Анатомия идеального сайдбара

Знание сила

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

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

В этой статье мы обсудим » Анатомия идеальной боковой панели«.

Боковые колонны: определение и значение

Сначала нам нужно определить боковую панель. Вот как это выглядит:

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

Это не полное мое определение. Я использовал материал из Википедии.

Боковая панель, i.e. Боковая панель содержит контекстные элементы, которые соответствуют текущему содержанию или являются общими для всех страниц, включая формы поиска и навигационные меню. Эти элементы могут содержать рекламу или » Цитаты дня«.

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

Боковая панель определяется WordPress как платформа управления контентом ( Система управления контентом — CMS) ( Область виджета). Вот области, в которых разработчики тем WordPress должны размещать виджеты.

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

Сколько боковых панелей необходимо для данной темы??

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

Боковая панель

Одна боковая панель

Это пример проекта с боковой панелью: Тема WordPress Twenty Twelve

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

ЧИТАТЬ ЕЩЁ:  Как защитить личные данные в Google Chrome в три клика

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

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

Боковые колонтитулы

Две боковые панели

Вот пример сайта с боковыми панелями. Семнадцать тем WordPress

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

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

Боковые колонтитулы: три-четыре

Три или четыре боковые панели

Вот пример проекта с четырьмя боковыми панелями. SmashingMagazine.com

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

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

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

Боковые колонны не требуются

Нет боковых панелей

Бейн.org Пример дизайна, не включающего боковые панели

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

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

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

ЧИТАТЬ ЕЩЁ:  Фотосток - заработок на фотографиях

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

Хороший дизайн — это тонкая работа

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

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

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

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

Высота и ширина боковой панели

Ширина и высота боковой панели

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

Наилучшее значение ширины боковой панели — от 20% до 40%. Лучше всего ограничить ширину многих боковых панелей до 20%-40% (или 15% и 35% соответственно).

Вы можете использовать » Золотое сечение» для создания боковой панели. Его ширина примерно на 38% больше, чем основная площадь.

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

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

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

Цвета и изображения

Использование цветов и изображений

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

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

ЧИТАТЬ ЕЩЁ:  10 советов по ускорению загрузки WordPress

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

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

Размер и расположение шрифтов

Размеры шрифтов и позиционирование элементов

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

Шрифты в боковых колонках обычно на 10-20% крупнее, чем в основном контенте. Сайдбары привлекают внимание к основному содержанию, но не отвлекают от него — в этом их предназначение. Привлечение внимания также может быть достигнуто путем сокращения объема текста.

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

Расположение боковой панели

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

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

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

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

Выводы

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

Оцените статью