Возможно, самое важное и примечательное в веб-дизайне это организация содержания или, как еще говорят, контента. Систематизация информации в хорошо сложенный макет является основой веб-сайта и всегда должна волновать больше стиля. Без хорошей разметки и плана содержание не будет чувствоваться единым целым и не будет вести посетителя в правильном направлении.
В этой серии статей мы обсудим 8 полезных решений и приемов, которые помогут вам создать понятный и хорошо организованный макет контента. 8 приемов включают в себя слайдеры, вкладки, прогрессивная компановка, структурированная сетка, модальные окна, всплывающие элементы, аккордеоны, мега выпадающее меню.
Итак, прием первый: слайдеры и карусели.
1. Слайдеры и карусели
Слайдеры, также называют карусели, это организованный, интерактивный и довольно приятный способ представления информации. Слайдеры популярны благодаря своему удобству. Вы можете разместить хороший объем информации в закрепленную и компактную область – без слайдера этот контент нужно будет размещать в другом месте на странице, а свободного места для этого может и не быть или вы сознательно хотите показывать эту информацию только по запросу посетителя. Это помогает пользователю сконцентрировать свое внимание на одном блоке страницы – что очень полезно и удобно. И это именно та ситуация, в которой слайдеры могут пригодиться.
Примеры слайдеров
Пиктограммы и иконки в области навигации
Когда вы работаете над дизайном слайдера с текстом или слайд-шоу с изображениями будет очень полезно обеспечить пользователя пиктограммой или иконкой в области навигации, для того, чтобы перемещение между объектами слайдеры было интуитивным и простым. Пиктограммы и иконки позволяют посетителю ориентироваться, объясняя где они находятся в данный момент и какие возможности навигации доступны (слайд-шоу могут иметь горизонтальную или вертикальную навигацию). Кроме того, посетитель сможет выбрать определенную страницу на слайдере.
В слайдере, который используется на сайте Coda можно увидеть вкладки на самом верху слайдера. Этим создается элемент, объединяющий слайдер и вкладки. Это отличная идея, потому что просто взглянув на иконки можно быстро найти нужную страницу в элементе. Также пиктограммы и иконки обеспечивают очень надежную, запоминающуюся и четкую визуальную поддержку. Кроме иконок для той же цели можно использовать, например, цифры.
Использования слайдеров для отображения единиц продукции
В противоположность предыдущему примеру, слайдеры можно использовать не только для отображения больших объемов информации, но и чтобы, например, помочь пользователям удобным способом перемещаться среди десятков или сотен единиц продукции, представленной на сайте. Пример, представленный на сайте SourceBits, использует несколько слайдеров (горизонтальные и вертикальные), которые обеспечивают посетителей привлекательным способом навигации по обложкам CD дисков.
На слайдере есть большие круглые кнопки на каждом конце, указывающие работы навигации. Плавные переходы делают слайдер привлекательным и удобным для использования. Также примечательно расстояние между иллюстрациями, позволяющее легко выбирать отдельные иконки и также они хорошо организованны. И также каждая единица, при наведении отзывчиво подсвечивается.
Читать дальше »
