Возможно, самое важное и примечательное в веб-дизайне это организация содержания или, как еще говорят, контента. Систематизация информации в хорошо сложенный макет является основой веб-сайта и всегда должна волновать больше стиля. Без хорошей разметки и плана содержание не будет чувствоваться единым целым и не будет вести посетителя в правильном направлении.
В этой серии статей мы обсудим 8 полезных решений и приемов, которые помогут вам создать понятный и хорошо организованный макет контента. 8 приемов включают в себя слайдеры, вкладки, прогрессивная компановка, структурированная сетка, модальные окна, всплывающие элементы, аккордеоны, мега выпадающее меню.
Итак, прием первый: слайдеры и карусели.
1. Слайдеры и карусели
Слайдеры, также называют карусели, это организованный, интерактивный и довольно приятный способ представления информации. Слайдеры популярны благодаря своему удобству. Вы можете разместить хороший объем информации в закрепленную и компактную область – без слайдера этот контент нужно будет размещать в другом месте на странице, а свободного места для этого может и не быть или вы сознательно хотите показывать эту информацию только по запросу посетителя. Это помогает пользователю сконцентрировать свое внимание на одном блоке страницы – что очень полезно и удобно. И это именно та ситуация, в которой слайдеры могут пригодиться.
Примеры слайдеров
Пиктограммы и иконки в области навигации
Когда вы работаете над дизайном слайдера с текстом или слайд-шоу с изображениями будет очень полезно обеспечить пользователя пиктограммой или иконкой в области навигации, для того, чтобы перемещение между объектами слайдеры было интуитивным и простым. Пиктограммы и иконки позволяют посетителю ориентироваться, объясняя где они находятся в данный момент и какие возможности навигации доступны (слайд-шоу могут иметь горизонтальную или вертикальную навигацию). Кроме того, посетитель сможет выбрать определенную страницу на слайдере.
В слайдере, который используется на сайте Coda можно увидеть вкладки на самом верху слайдера. Этим создается элемент, объединяющий слайдер и вкладки. Это отличная идея, потому что просто взглянув на иконки можно быстро найти нужную страницу в элементе. Также пиктограммы и иконки обеспечивают очень надежную, запоминающуюся и четкую визуальную поддержку. Кроме иконок для той же цели можно использовать, например, цифры.
Использования слайдеров для отображения единиц продукции
В противоположность предыдущему примеру, слайдеры можно использовать не только для отображения больших объемов информации, но и чтобы, например, помочь пользователям удобным способом перемещаться среди десятков или сотен единиц продукции, представленной на сайте. Пример, представленный на сайте SourceBits, использует несколько слайдеров (горизонтальные и вертикальные), которые обеспечивают посетителей привлекательным способом навигации по обложкам CD дисков.
На слайдере есть большие круглые кнопки на каждом конце, указывающие работы навигации. Плавные переходы делают слайдер привлекательным и удобным для использования. Также примечательно расстояние между иллюстрациями, позволяющее легко выбирать отдельные иконки и также они хорошо организованны. И также каждая единица, при наведении отзывчиво подсвечивается.
Большие вертикальные слайдеры контента
Давайте взглянем на слайдер, используемый на сайте QuickSnapper. Мы увидим очень функциональный вертикальный слайдер, который безупречно вписывается в разметку страницы. Слайдер состоит из снимков экрана. Элемент хорошо организован и в нем легко найти нужное изображение. Самая лучшая часть в этом слайдере – это кнопки наверху и снизу. Они расположены по всей ширине слайдера. Большие кнопки упрощают использование слайдера. Также кнопки имеют приятный для глаза и практичный эффект при нажатии.
Скрипты слайдеров
Для того чтобы встроить слайдеры на свой сайт можете использовать эти бесплатные скрипты, способы и учебные пособия. Ссылки, как и сами сайты на английском языке:
Slick Accessible Slideshow using jQuery
Coda-Slider 1.1.1
jquery.scrollable 1.0.2
Create an Amazon Books Widget with jQuery and XML
Agile Carousel
Easy Image or Content Slider
Slider Gallery
Coda Slider Effect
iCarousel
Продолжение следует…
Об авторе
Мэт Кронин (Matt Cronin) – алчный графический дизайнер, веб-дизайнер/разработчик. В данный момент работает над запуском проекта VAEOU, который скоро принесет нам новые сервисы. Follow Matt on Twitter
Источник: 8 Layout Solutions To Improve Your Designs
Оставляйте свои мнения и пожелания в комментариях ниже. Также подписывайтесь на RSS-поток для удобного получения свежих статей.
Может Вас заинтересовать:
- 8 решений для улучшения дизайна сайта. Решение второе
- 53 свежие темы для WordPress. Весна 2009
- 33 необычайно интересных, веселых и курьезных рекламных картинок
