Как организовать правильную иерархию на сайте

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

правильная иерархия на сайте

Формирование визуальной иерархии путем работы с контентом

Контент – всегда нуждается в предварительном анализе и тщательном структурировании в зависимости от важности отдельных элементов.

Этапы формирования визуальной иерархии путем работы с контентом:
• 1-й этап – определение коммерческой цели;
• 2-й этап – оценка тематики сайта;
• 3-й этап – определение ключевых слов;
• 4-й этап – написание заголовков;
• 5-й этап – группирование заголовков по тематическим группам;
• 6-й этап – установление иерархии внутри тематических групп, в зависимости от важности тем заголовков;
 7-й этап – определение названий основных и второстепенных разделов сайта.

Самый простой способ формирования контента

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

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

«Перевернутая пирамида»

Прием «перевернутой пирамиды» (другое название «фронтальная загрузка») используется журналистами при написании и оценке текстов. Краткая суть приема – чем важнее информация, тем ближе она помещается к заголовку. Наиболее важные детали излагаются в первых двух абзацах, самые второстепенные выносятся в конец статьи.

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

Способы создания иерархии

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

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

• Использование неброских, простых шрифтов, позволяющих более легко понимать суть изложенного материала.

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

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

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

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

6.Цвет
Специалисты не рекомендуют при оформлении контента увлекаться всем многообразием цветовой гаммы. Достаточно использовать два цвета: основной и дополнительный (для выделения отдельных элементов).

7.Свободное (белое) пространство
Элемент, размещенный на свободном белом пространстве, обязательно привлечет внимание.

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

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

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

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

12. Композиция
Композиция сайта строится по одной из двух схем, F или Z. Названия сформированы от основных понятий глазных движений. Люди просматривают изображение по траектории этих букв.

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

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

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