Направление визуального контента: что нужно знать


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

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

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

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

Сосредоточиться на композиции

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

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

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

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

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

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

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

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

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

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

Вопросы дизайна шрифта

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

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

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

Некоторые вещи, которые вы могли бы рассмотреть:

  • Размер текста
  • Семейство шрифтов
  • Цветовой контраст
  • Отношения раздела страницы
  • Высота строки и поля абзаца
  • Межбуквенный интервал и верхний / нижний регистр

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

Стили типографского дизайна в Campaign Monitor изящны и естественно вписываются в макет. Для достижения такого результата требуется практика, но чем больше вы пытаетесь, тем легче будет.

Чтобы узнать немного больше, я настоятельно рекомендую следующие ссылки:

Направляющий контент

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

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

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

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

Давайте посмотрим на целевую страницу и дизайн блога, чтобы определить различия.
Приложение Кактус для MacCactus – это генератор статических сайтов для OS X. Их домашняя страница полностью соответствует стилю дизайна Apple – множество пробелов и тонких шрифтов без засечек.

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

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

Цель здесь – предоставить информацию существующим пользователям и продать новым пользователям идею Cactus.

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

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

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

Верь глазам своим

Индивидуальные свойства дизайна можно объяснить аналитически, но реализация меняется для каждого сайта. Изображение героя со ссылкой «Прокрутить дальше» не работает одинаково на всех веб-сайтах.

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

Лучший совет, который у меня есть, – это просто доверять своим глазам. Создайте список ваших любимых веб-сайтов и потратьте 5 минут на просмотр каждого из них. Запишите ваши любимые элементы на странице, и как они влияют на дизайн. Это поможет вам усвоить эти концепции с точки зрения UI / UX, а не с точки зрения пользователя.

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

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

Завершение

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

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


0 Comments

Добавить комментарий