Направление визуального контента Что нужно знать
визуальное направление содержания это менее широко обсуждаемый, но важный аспект веб-дизайна с высокой степенью конверсии. Каждый посетитель «впитывает» новый сайт при первой загрузке страницы - делает это сознательно или нет.
Эстетика играет свою роль, но это больше о общее ощущение дизайна. Это чувство может быть затронуто пробелами, типографикой, симметрией, но в основном отношения между элементами страницы.
Дизайнеры хотят, чтобы посетители оставаться на странице а также продолжать прокручивать привлекая их внимание и поддерживая их интерес к сайту. Принципы дизайна всегда должны быть сосредоточены на функции перед формой. Это означает, что дизайн должен дополнить содержание, не засунуть в запоздалую мысль.
В этом посте я хотел бы показать вам несколько советов о том, как вы можете улучшить макеты и потоки визуального контента на Вашем сайте.
Сосредоточиться на композиции
Каждый кусок сайта строит на общий макет. Этот общий макет создает композицию, которая следует правилам гештальт-теории, которая утверждает, что целое всегда больше, чем сумма частей.
Отдельные области страницы объединяются в сформировать целое. Элементы дизайна должны построить гравитационное притяжение на содержание; все на странице должно естественно вести посетителей вниз, пока они не достигнут нижней части страницы.
Вот почему отношения между различными частями контента (визуальные элементы, текст, кнопки и т. Д.) Так важны для разработки.
Ваша цель должна быть поощряя людей просматривать сайт с их собственной склонности. Это легче сказать, чем сделать, но вы можете многому научиться, изучая реальные примеры.
Домашняя страница для Monkop является отличным примером визуальной иерархии с как текстовые, так и визуальные. Между элементами используется много места, а типография дополняет фирменные векторные иллюстрации.
Когда вы прокрутите, вы заметите прямые горизонтальные блоки страницы разделены по цветам, границам и графике. Они построены с шаблоны проектирования в виду предложить последовательность по всей странице.
Внизу вы найдете разделение на две колонки с изображениями на одной стороне, текст на другой. Изображения также поменяться сторонами в шаблоне справа-слева-справа-слева. Это привлекает внимание, и разрушает монотонность типичной страницы пока еще сохраняя естественный поток в содержании.
похожий дизайн эстетичный можно найти на веб-сайте Picjumbo, целевой страницы для добавления фотографий для пользователей Photoshop и Sketch.
На главной странице основное внимание уделяется логотипу и видео для предварительного просмотра. При прокрутке вы заметите пользовательские анимации, которые перемещаются по всей странице. Эта анимация действительно привлекает внимание, и получает зрителя интересно продолжать прокручивать.
В целом страница чувствует открыть а также легко просматривать. Содержание разделены на горизонтальные блоки с четкой типографикой и чистыми значками.
Рассмотрим, как разные элементы страницы сбалансировать вместе, пространство между элементами, контраст между цветами и различные формы. Все эти вещи играют роль в общей композиции. Каждый сайт естественным образом привлекает контент.
Там нет абсолютного ответа, потому что он отличается для каждого сайта. Например, некоторые навигационные ссылки выглядят лучше, когда они большие и негабаритные. Другие подходят лучше, когда они маленький с заглавными буквами.
Я предлагаю вам изучить другие сайты в вашей нише. Действительно проанализируйте, как они соединены. Даже попробуйте перестроить макеты, чтобы увидеть, какие элементы в итоге заставляют дизайн «собраться вместе».
Вопросы дизайна шрифта
То, как вы создадите свою типографику, влияет на направление контента на Вашем сайте. Это связано с иерархией типов и стили оформления различных элементов страницы такие как абзацы, заголовки, маркированные списки, цитаты и специальные элементы макета, такие как столбцы или таблицы.
Визуальные также может повлиять на макет, так что это хорошая идея для разработки контента с естественной прогрессией. Напишите содержание таким образом, чтобы стекает вниз по странице, а также заставляет людей читать через каждый абзац.
Величайший инструмент в вашем распоряжении ваш взгляд на дизайн. Научитесь распознавать различия в типографских элементах и их взаимосвязь с другими элементами страницы. Создавайте отношения между разделами страницы, чтобы различать области содержимого.
Некоторые вещи, которые вы могли бы рассмотреть:
- Размер текста
- Семейство шрифтов
- Цветовой контраст
- Отношения раздела страницы
- Высота строки и поля абзаца
- Межбуквенный интервал и верхний / нижний регистр
Например, посмотрите на домашнюю страницу Campaign Monitor. Верхние ссылки навигации используют все заглавные буквы с маленькими буквами. Другие заголовки на странице следуйте этому же дизайну всех крышек который создает ощущение единообразия.
Другие большие заголовки на сайте гораздо более заметный, и они действительно спрыгивают со страницы. Просто взглянув на типичный дизайн заголовка, должно быть легко объясни разницу между заголовком и его парной основной копией.
Стили типографского дизайна в Campaign Monitor изящны, и они естественно вписаться в макет. Для достижения такого результата требуется практика, но чем больше вы пытаетесь, тем легче будет.
Чтобы узнать немного больше, я настоятельно рекомендую следующие ссылки:
- Принципы проектирования: визуальный вес и направление
- Работа с визуальным весом в ваших проектах
- 19 факторов, которые влияют на композиционный баланс
Руководящий контент
Понять это разные типы сайтов иметь разные методы для направления посетителей через сайт. Например, целевые страницы хотят направлять посетителей кусочки информации, маленькие иконки, скриншоты, а также отзывы.
Другие сайты, такие как блоги, обычно не сразу приводят людей на домашнюю страницу. Большинство людей земля на странице статьи, поэтому макеты постов в блоге предназначены для выделить заголовок, и рисовать людей дальше в содержание. Именно здесь в игру вступает качественный копирайтинг, потому что вы хотите, чтобы читатели отбрасывали каждое слово.
Нужны социальные сети и веб-приложения качественный пользовательский опыт, так что это немного другая тема, но рассмотрим, как канал Facebook предназначен для поощрять прокрутку и взаимодействие с пользователем.
Методы дизайна, которые вы используете, чтобы люди просматривали сайт, изменение с течением времени. Но, как правило, ваша цель состоит в том, чтобы направлять посетителей с направлением визуального контента.
Давайте посмотрим на целевая страница и дизайн блога выявить различия.
Cactus - это генератор статических сайтов для OS X. Их домашняя страница внимательно следит за стилем дизайна Apple - множество пробелов и тонких шрифтов без засечек.
Содержание организовано в столбцы, блоки и куски текста с простой графикой. Эти же эстетики общий с продуктами Apple, так что пользователи Mac будут наслаждаться этим стилем дизайна.
Информация о продукте, включая функции и настройки, приведена прямо на главной странице. Сама страница поощряет прокрутку через уникальный контент, основные значки и чередующийся шаблон столбцов левого / правого блоков контента.
Цель здесь - предоставить информацию существующие пользователи, и продать новые пользователи идея кактуса.
Теперь сравните этот дизайн с домашней страницей The Next Web. Содержание гораздо более спорадический на домашней странице блога, потому что есть много разных тем.
Прямоугольники создают систему сетки, которая инкапсулирует несколько постов в одном макете. Целью здесь является заставить пользователей читать контент на сайте. Не имеет значения, скачивают ли посетители что-нибудь, но имеет значение, если они торчать, чтобы что-то прочитать.
Способ заставить людей читать с великолепные фото а также броские заголовки. TNW отлично справляется с этой задачей, и их макет построенный, чтобы держать людей, просматривающих с соответствующими миниатюрами постов на боковой панели и в области после контента.
Направление посетителей на конкретное действие отличается на каждом сайте. Но вы можете многому научиться, изучив то, что делают другие успешные сайты, и научившись копировать.
Верь глазам своим
Индивидуальные свойства дизайна могут быть объяснены аналитически, но реализация меняется для каждого сайта. Изображение героя со ссылкой «Прокрутка дальше» не выполняет то же самое на всех сайтах.
Обучение дизайну очень визуальный процесс. Ваш взгляд на дизайн является наиболее важным аспектом. Вам нужно видеть вещи правильно чтобы определить это визуальная иерархия. Если вы сможете увидеть его на других сайтах, вы сможете скопировать его на своих сайтах..
Лучший совет, который у меня есть, - просто верь глазам своим. Создайте список ваших любимых веб-сайтов и потратьте 5 минут на просмотр каждого из них. Запишите ваши любимые элементы на странице, и как они влияют на дизайн. Это поможет вам усваивать эти концепции с точки зрения UI / UX, а не точка зрения пользователя.
Также не бойтесь пробовать вещи! Никто не получил хороший дизайн просто читая статьи о дизайне. Да, они помогают - они могут реально помочь. Но ты необходимость в создавать вещи с нуля, чтобы узнать, что работает и что не.
Тренируйте свой взгляд, изучая макеты веб-сайтов, которые вам нравятся, и создавая их заново. Со временем вы создадите библиотеку шаблонов, которая значительно облегчит разработку новых сайтов..
Завершение
Надеемся, что эти советы помогут вам начать работу и дадут вам базовый план действий. Стать веб-дизайнером нелегко, но миру нужны таланты, и никогда не было так легко научить себя этим фундаментальным концепциям..
Изучение лучшие примеры сайтов с элементами страницы, которые вам нравятся. Поезд ваш глаз, чтобы распознать отношения, и вы быстро развивать навыки, необходимые для копировать эти отношения в вашей собственной работе.
