Визуальная иерархия сайта: оформление и организация контента

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

Tilda Education

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

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

Содержание

Что такое визуальная иерархия сайта?
Создание иерархии через работу с контентом
Прием «перевернутой пирамиды»
Приемы создания визуальной иерархии
Как проверить визуальную иерархию
Резюме: как применять принципы визуальной иерархии при создании сайта

Что такое визуальная иерархия сайта?

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

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

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

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

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

Создание иерархии через работу с контентом

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

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

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

Сгруппировать вырезанные листочки по темам.

Выстроить смысловую логику в каждой теме.

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

Пример

Вы создаете сайт о велосипедах. Вы уже выписали на лист бумаги разделы будущего сайта.

На столе перед вами лежат листочки с надписями самого разного смыслового калибра — от «велосипедные аксессуары» до «расписание велосипедных прогулок по городу».

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

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

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

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

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

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

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

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

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

Прием «перевернутой пирамиды»

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

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

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

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

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

Приемы создания визуальной иерархии

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

1. Размер элемента

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

Лендинг редактора для веб-дизайна http://zero.tilda.cc

2. Структура в типографике

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

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

Лендинг образовательного курса http://archskills.ru

3. Композиция на странице

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

Схема F

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

www.nngroup.com/articles/f-shaped-pattern-reading-web-content

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

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

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

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

Акценты расставлены по пути движения глаз по траектории F: логотип, кнопка, заголовок, подзаголовок, выделенные слова в начале абзаца. Контент структуирован и воспринимается легко. Скриншот статьи: http://tilda.education/how-to-build-website

Схема Z

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

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

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

Далее взгляд скользит по диагонали вниз, пересекая центральное поле с изображением. Это пауза между верхней и нижней группой. Точка, которой заканчивается буква Z (правый нижний угол) — идеальное место для размещения блока с предложением о подписке или покупке: эта кнопка называется «call to action», дословно — призыв к действию.

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

Движение глаз по странице: услуги → призыв к действию → фоновое изображение и название → адрес → телефон. Эту страницу можно использовать как шаблон: https://tilda.cc/tpls/page/?q=samandjuo

4. Повторение и группировка

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

Выделить смысловую группу помогут расстояния между объектами. Отступы внутри группы, должны быть меньше отступов снаружи.

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

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

5. Цвет

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

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

Цель лендинга — мотивировать посетителя на действие: подписаться, зарегистрироваться или купить. Чтобы призыв к действию не затерялся, делаем кнопку (важное) яркой, все остальное приглушенным.

6. Белое (пустое) пространство

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

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

Лендинг видео студии http://norwed.tilda.ws. Впрочем, «белое пространство» не всегда именно белое.

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

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

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

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

Резюме: как применять принципы визуальной иерархии при создании сайта

Ключевая формула иерархии — гармоничное сочетание главных и второстепенных компонентов.

Подготовьте контент заранее, до того, как приступили к дизайну сайта

Структурируйте контент, выделив уровни иерархии — главное, важные детали и дополнительная информация. Hикакие декоративные приемы не спасут «разваливающийся» по логике и сумбурный по структуре сайт.

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

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

Текст: Инна Бурштейн
Иллюстрации, дизайн и верстка: Юлия Засс

Если материал вам понравился, расскажите о нем друзьям. Спасибо!

Читайте также:

Как стать дизайнером — 3 составляющие профессии дизайнера

Флэт (flat) дизайн: лучшие практики плоского дизайна

Навигация по сайту — примеры как сделать навигацию удобной

Обучение веб дизайну: 70+ лучших ресурсов о веб-дизайне

Как правильно писать тексты для сайта

Картинки для сайта — как подбирать фото и изображения на фотостоках

Как создать презентацию: правила создания эффективных презентаций

Анализ и подготовка контента при создании сайта

Как создать сайт.

Пошаговое руководство

37 лонгридов с отличным дизайном

27 документальных фильмов для дизайнеров

Необходимый минимум книг для дизайнеров

Показать больше

Как сделать дизайн для сайта лучше: 8 визуальных приемов

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

Парадокс в том, что заказчик, который платит дизайнеру, сам принимает решение насчет функционала, дизайна. Хотя мало в этом разбирается.

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

Насколько дизайн вашего сайта хорош

1. Анализировали ли вы сайты конкурентов? Посмотрите их. По сравнению с ними ваш сайт более удобен, больше призывает к действию?

2. Понятно ли вашим клиентам, кто вы, что предлагаете и как с вами связаться/купить?

3. На ваш сайт приходили жалобы от знакомых, клиентов, обслуживающих его компаний по поводу функционала или интерфейса?

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

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

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

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

Это очень заметно на этапе разработки сайта.

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

Хорошая структура сайта включает в себя уже написанные, отредактированные тексты, разбивку по разделам и контейнеры для фото/видео, слайдеры и пр.

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

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

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

Какие приемы дизайнеры применяют сегодня для топовых сайтов, которые получают награды и вызывают восхищение?

Рассмотрим, что может помочь сайту выглядеть и понятно и стильно. Ведь некоторые можно использовать, даже если вы делаете сайт на Тильде или Readymag.

1. Антиква – рукописный шрифт в больших заголовках

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

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

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

Эксперименты со шрифтами проводили разные дизайнеры. Например, в 2012 году всемирно известная The New York Times провела исследование, согласно которому читателям предлагалось выбрать фейковые новости, исходя из того, каким шрифтом они написаны. В ходе эксперимента NYT обнаружила, что сообщениям, которые набрали шрифтом с засечками Baskerville (есть засечки), верят больше, чем фразам, написанным Comic Sans или Arial (у которых засечек нет).

Как это может нам пригодиться?

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

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

Ссылка

Ссылка

Ссылка

2. Крупный план, обстановка и эмоциональный контент

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

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

Люди привыкли к обилию крутого визуального контента, и это делает их вкусы более избирательными. Чтобы отличиться от десятков других магазинов, которые продают похожие товары, понадобится особенная стратегия. Иллюстрация, текст и месседж должны создавать определенное настроение. Например, модная коллекция раскрывается на тематических сайтах, где главный акцент сделан на обстановке и моделях, привлекающмх внимание. Позы моделей не случайны: они композиционно обыгрывают либо название бренда, либо кнопку «Каталог»/«Купить», что помогает перевести пользователя от ознакомления к продажам.

Вспомните, как в последний раз сталкивались с Инстаграм-страницей, где рассматривали часы или красивое пальто на модели. В тот момент, когда мы смотрим на пост в Инстаграме, мы чувствуем все вместе: антураж, модель, эмоции. Если это нравится, то мы начинаем испытывать желание выглядеть так же, быстрее принимаем решение про покупку пальто/часов/платья – всего того, что так красиво показано в обстановке. Такие же эмоции должна вызывать страница товара вашего сайта.

Как это правильно использовать?

Создавайте качественный контент, выберите моделей и дайте задачу арт-директору ваших съемок, чтобы на выходе у фотографий четко можно было проследить чувственность и живость. Этот прием поможет вам сделать свой сайт лучше.

Где такой прием не очевиден, но уместен?

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

Ссылка

Ссылка

Ссылка

Ссылка

Ссылка

3.

Минимализм

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

Главное правило в минимализме при создании дизайна веб-страниц – не более трёх цветов в оформлении, иконках, шрифтах.

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

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

Ссылка

Где это уместно?

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

4. Градиентный фильтр

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

Какие виды бизнеса чаще других используют это?

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

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

Где этим приемом можно удивить?

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

5. Акцент на шрифтах и заголовке

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

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

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

Перечитайте тексты на своем сайте. Иногда даже примитивного «Новая коллекция» или «Бренд итальянской обуви» – вполне достаточно, чтобы все понять и пойти смотреть каталог, перейти в другой, нужный вам раздел. Не усложняйте – в лучшем случае для вашего клиента у вас есть 30 секунд, когда он попал к вам на сайт, чтобы поймать его внимание. Не тратьте его на чтение длинного текста, а направляйте к полезному контенту.

Ссылка

Ссылка

Ссылка

Ссылка

6. Чистый цвет

Принцип работы такой же, как и у градиентов, но почему эти сайты настолько привлекательны?

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

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

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

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

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

7. Незаметные паттерны на фоне

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

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

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

Где подойдет этот прием?

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

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

8. Сломайте все правила

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

Просто посмотрите подборку качественного веб-брутализма, чтобы представить, о чем идет речь.

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

Конечно, такие приемы уместны не всегда. Balenciaga i Adidas использовали веб-брутализм для промо-страниц своих коллекций, и они разлетелись по интернету с бешеной скоростью из-за провокационности. Множество агентств, которые предоставляют услуги в цифровом мире – копирайтинг, маркетинг, веб-дизайн – тоже пытались идти по этому пути и делать свои ресурсы в этом плане, но не выдержали стиль и просто остались фриками и источником мемов. Поэтому даже в вызове и отсутствии правил главное – нарушить их не все сразу.

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

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

9 советов по созданию лучшего веб-сайта

11 июля 2013 г.

Резюме

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

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

1. Дизайн должен быть простым, свежим и уникальным. Домашняя страница — это первое, что видят потенциальные клиенты при посещении вашего веб-сайта. Как правило, это самая важная часть веб-дизайна малого бизнеса. Убедитесь, что ваша домашняя страница отвечает на важные вопросы, которые будут задавать новые посетители, в том числе о том, кто вы, чем занимается ваш бизнес и что они могут делать на вашем веб-сайте. Подумайте о впечатлении, которое вы хотите произвести, и сообщении, которое вы хотите донести до своих клиентов и потенциальных клиентов. Хитрость заключается в том, чтобы не перегружать домашнюю страницу, что может отвлекать и сбивать с толку клиентов. Не превышайте 120 слов текста.

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

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

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

5. Сделайте свой сайт легкодоступным. Учтите, что люди с определенными ограничениями (например, с дальтонизмом) будут посещать ваш сайт, и спланируйте дизайн таким образом, чтобы они тоже могли узнать о ваших продуктах и ​​услугах. Также подумайте, как люди с более медленным подключением к Интернету будут просматривать ваш сайт и что вы можете сделать, чтобы улучшить их работу.

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

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

8. Не забывайте про поисковую оптимизацию (SEO) и поисковый маркетинг (SEM). SEO и SEM являются узкоспециализированными областями и требуют значительных затрат времени на изучение. Но кампании SEO и/или SEM могут оказать большое влияние на малый бизнес, и поэтому их нельзя игнорировать. Есть буквально тысячи квалифицированных специалистов, которые могут помочь вам в этом, и правильное выполнение вашей стратегии SEO / SEM окажет огромное влияние на успех вашего сайта.

9. Обратитесь к творческому краудсорсингу для вашего дизайна и письменного контента. Краудсорсинг — это процесс аутсорсинга задач посредством открытого призыва к большой группе работников, например дизайнеров, писателей, музыкантов или кинематографистов. На онлайн-рынке креативного краудсорсинга владельцы бизнеса могут размещать свои творческие проекты и назначать собственную цену. В свою очередь, поставщики креатива по всему миру представляют свои концепции, а покупатель просто выбирает ту, которая ему больше нравится. Итог: творческий краудсорсинг дизайна веб-сайта быстрее, дешевле, проще и предлагает гораздо больший выбор концепций дизайна..

Какие советы по дизайну веб-сайта у вас есть, чтобы создать эффективный сайт?

Читайте другие статьи об интернет-маркетинге.

OPEN Участник карты Майкл Самсон является соучредителем crowdSPRING, www.crowdSPRING.com, крупнейшей в мире торговой площадки для краудсорсингового творчества.

Фото сверху: iStockphoto, Thinkstock.

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

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

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


Зачем создавать сайт с помощью конструктора сайтов?

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

Вот три преимущества использования конструктора сайтов.


1. Вы можете использовать шаблоны сайтов, разработанные профессиональными дизайнерами.

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

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

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


2. Вам не нужно учиться программировать.

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

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


3. Вы можете сделать сайт своим.

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

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


Как создать веб-сайт с помощью конструктора веб-сайтов

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


1. Выберите свой конструктор сайтов.

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

При поиске лучшего конструктора веб-сайтов учитывайте:

• Простота использования — Вы не хотите тратить часы на изучение того, как использовать новый конструктор веб-сайтов, и вам это не нужно. Многие разработчики веб-сайтов предоставляют интуитивно понятные инструменты и ресурсы для редактирования, которые помогут вам сразу же ознакомиться с продуктом. В частности, ищите функцию перетаскивания, которая упрощает редактирование для всех, независимо от уровня навыков.
• Стоимость . Некоторые конструкторы веб-сайтов с функцией перетаскивания бесплатны, но большинство функций, которые вам понадобятся, будут стоить от 5 до 40 долларов в месяц — и это постоянные расходы, вы буду платить до тех пор, пока вы поддерживаете свой сайт. Убедитесь, что вы выбрали доступный конструктор веб-сайтов, за который вы можете платить сейчас, а также в ближайшие месяцы и годы.
• Мобильная совместимость — Многие ваши посетители будут приходить с мобильных устройств, поэтому ваш веб-сайт должен выглядеть на маленьком экране так же хорошо, как и на компьютере. Убедитесь, что ваш конструктор веб-сайтов предоставляет простые возможности для адаптации вашего веб-сайта к мобильным устройствам, например адаптивные шаблоны.
• Количество шаблонов —  Когда вы начинаете с шаблона, который очень близок к тому, как должен выглядеть ваш веб-сайт, его настройка будет проще. Чем больше вариантов у вас есть, тем проще будет выбрать правильный шаблон.
• Мультимедийные функции — Если вы когда-нибудь надеетесь включить видео или аудио на свой веб-сайт, подумайте, какие варианты предлагает конструктор веб-сайтов для их добавления.
• Возможности SEO – Поисковая оптимизация (SEO) – важная тактика, позволяющая убедиться, что люди смогут найти ваш сайт. Несмотря на то, что для эффективного SEO нужно многое, хорошей отправной точкой является наличие конструктора веб-сайтов, который предлагает функции SEO, упрощающие оптимизацию на сайте.
• Библиотека изображений – Поиск хороших изображений — важная часть создания веб-сайта, который выглядит великолепно. Конструктор веб-сайтов, который предоставляет библиотеку изображений, может сделать процесс намного быстрее и проще, будь то для вашего малого бизнеса или личного блога.
• Аналитика — Легкий доступ к аналитике веб-сайта поможет вам отслеживать успех вашего веб-сайта с течением времени. Подумайте, какие возможности аналитики предлагает ваш конструктор сайтов.

Выясните, каковы ваши основные приоритеты в конструкторе веб-сайтов, и найдите тот, который предоставляет все, что вам нужно.


2. Выберите понравившийся шаблон.

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

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


3. Выберите цветовую схему.

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

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

Если вы действительно не знаете, как выбрать цвета, которые хорошо смотрятся вместе, вы можете найти ряд бесплатных онлайн-ресурсов, которые помогут вам. Поищите вдохновение на таких сайтах, как Design Seeds и Color Hunt. Или воспользуйтесь инструментом Canva Color Wheel, который использует «теорию цвета», чтобы получить идеальное сочетание цветов.

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

4. Создайте руководство по стилю для своего сайта.

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

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

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


5. Определите цели вашего веб-сайта.

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

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

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


6. Уточните свои сообщения.

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

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

Напишите свое уникальное ценностное предложение (UVP) — одну или две строки, описывающие, что может предложить ваш веб-сайт и чем он отличается от любого другого сайта. Вы можете разместить УТП прямо на главной странице вашего веб-сайта, и это также поможет вам создать копию для остальной части сайта.


7. Выберите страницы и организацию вашего веб-сайта.

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

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

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


8. Приступайте к созданию своего сайта.

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

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


9. Посоветуйтесь с кем-нибудь еще, чтобы узнать второе мнение.

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

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


Раскройте свой прекрасный веб-сайт

После всей этой работы ваш веб-сайт готов для более широкой аудитории. Безопасный хостинг веб-сайтов (если вы еще этого не сделали) и опубликуйте его в Интернете.

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