Визуальная иерархия сайта

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

Les enfants de moins de cinq ans sont les plus touchés par la maladie d'Alzheimer. - и организация и оформение информации таким образом, чтобы посетитель мог быстро разобраться с00 и отличить главное от второстепенного.

в Google, в стать"Коммуникация через визуаль,директор по дукту в Google, в стать"Коммуникация через визуальную иерархию"говорит, веб-страницы должна помогать посетителю бай на таы б-страницы должна посетителю быстро найти ответы на три вопроса :

е хтрое оформление, а прежде всего тщатель анализ и структуртурий анализ и структурий рование котента.

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

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

Les deux parties sont d'accord sur le fait qu'il n'y a pas d'accord sur le fait qu'il n'y a pas de problème. Вы уже выписали на лист бумаги разделы будущего сайта.

садписями самого разного смыслового калибра - от "велосипедные аксесуры" до "расписание велосипедные" расписание велосипедных прогулок по городу".

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

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

• велосипедная музыка

• велосипедисты в городе

• старинные фотографии велосипедов

как эти три заголовка были сформированы в групу, они находились в общем хаотическом ворохее. Как только они стали частными случаями одной групы - сразу стало проще нащупать название, которое их объединяет. Например, вы решаете дать этой группе имя "велосипедное вдохновение". Название сразу помогает понять, не попали ли в групу лишние элементы или чего-то не хватает.

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

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

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

Les deux sont en train de s'entendre sur un plan d'action. Клчевые слова этой части статьи - кто, что, когда, где, почему, как. Ответы на эти условные вопросы - самая важная часть текста.

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

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

Рассмотрим приемы, которые помогут это сделать.

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

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

• Первый уровень : здесь располагается самый приоритетный контент ; заголовки на этом уровне бросаются в глаза и считываются прежде остальных.
  
  
• на этом уровне находятся подзаголовки, названия вкладок - все то, что обозначает главные "темы". Именно на этом уровне располагаются элементы, по которым пользователь попадает в разделы сайта.
  
  
• уровень : к этому уровно тнести текстовые блоки, описания изображений, коротие заметки - все то, что раскрывает тему, но служит е названием. Именно здесь вы можете подробно рассказать о всех деталях вашего проекта.

картина, веб-страница или разворот, - он еосознана сле следут одной одно схем анализа следут : схем анализа схем анализа : схема F или схема Z. изображде чем приступить к внимательному изучени44E↩ любого изображения, зритель как бы "сканирует" его, перемещая взглядо дной из этих воображаемых букв. Это стоит держать в голове, выстраивая элементы на странице. Мы в первую очередь считываем элементы, расположенные на пути взгляда, который неосознанно следут рисунку буквы.

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

Якоб Нильсенспециалист по юзабилити, провел исследование удобочитаемостиоснованое наблюдении за 232 пользователями, сканировавших тысячи веб-сайтов, и рассказал о практических последствиях паттерна F :

• редко буду читать каждое слово вашего текста.

• два абзаца являются самыми важными и должны содержать что-то, что зацепит посетителя.

• Начинайте абзацы, подзаголовки и списки с00 слов, которые привлекают внимание.

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

Композицию таких странижно условно разделить на блока : верхний с названием и заголовками, центральный с изображеним иж нижний с дополнительной информацией и призывом к действию.

по букве Z обеспечивает ясное считцват сное считцание всей информации : левы угол - место для логотипа ; расположеные по горизонтали заголовки - следом, справа верху можно добавить призыв к00.

по диагонали внизизт, пересекая центральное с изображением. Это пауза между верхней и нижней групой. Z (правыы нижний угол) - идеальное место для размещения блока с предложением о предложение родписка с предложением о подписке или покупке : эта кнопка называется "appel à l'action", дословно - призыв к действию.

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

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

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

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

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

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

Les deux parties sont d'accord sur le fait qu'il s'agit là d'une question d'éthique et d'équité. достигать эффекта минимальными средача - достигать эффекта минимальными средствами. Простой белый фон является таким же участником общей композиции, как и находящиеся на нем элементы. Не старайтесь избавиться от воздуха - визуальное пространство должно "дышать" : это и есть залог того, что объекты будут свободно заявлять о себе, а не теряться в близком соседстве другом.

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

прием - присоить каждому элементу (текстовому блоку, заголовку, фотографии) номер - от одного до десяти по важности ; причем сделать это как на изначальной схеме, так и анализируя готовый сайт. Соответствует ли получившийся порядок задуманному ? Если нет - баланс надо подкорректировать. Не идите на поводу у дизайна ; следуйте смыслу.

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