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

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

Заголовки страниц

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

1)шрифт заголовка больше основного текст хотя бы на пару пикселей;

2)использован другой цвет шрифта или фона для шрифта;

3)имеется заметное пространство сверху и снизу заголовка;

 Хлебные крошки

«Хлебными крошками» называют цепочки ссылок, которые призваны показать, каким образом текущая страница относится к главной. Часто они расположены непосредственно над заголовком страницы. Например: Главная > Форум > Работа > Вакансии.

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

 

Первичная и вторичная навигация

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

 

Ссылки

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

 

Структура страницы

Важную роль в навигации по сайту играет и структура его страниц. При проектировании страницы помните, что:

  • 1)многие пользователи знакомы со стандартными структурами сайтов, поэтому расположение элементов навигации в тех местах, где их ожидают увидеть, позволяет быстрее сориентироваться. Старайтесь избегать слишком «навороченных» дизайнов.
  • 2)пользователю легче принять решение о том, куда двигаться дальше, если ключевые элементы (ссылки) расположены рядом. Старайтесь группировать ключевые элементы.
  • Прогресс

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

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

     

  • Название страницы (Title)

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

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

 

Какой самый простой, правильный, а иногда и единственно возможный способ создать иллюзию рельефа того или иного элемента (объекта) в веб-дизайне (а так же в 2D в целом, и естественно 3D)? Правильно — использовать текстуру! Будучи «материалом» универсальным, текстуры широко используются в веб-дизайне и является объектом бесконечных экспериментов. Текстуры на сайтах можно встретить как простые, которые лишь подчеркивает те или иные элементы проекта, так и гораздо более сложные реализации. 

«Тонкое» использование текстуры

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

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

Другой пример — здесь текстура используется вместе с эффектом градиента для фона.

Причем в данном случае «легкая» и весьма простая текстура добавляет глубины и «богатства» этому самому градиентному фону.

Текстура как «грубая сила»

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

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

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

При прокрутке вниз текстура через плавное размытие переходит к белому цвету — хороший прием смены насыщенной шапки на совершенно «минималистичное продолжение» внизу веб-страницы.

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

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

 

Информируйте

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

Заинтересуйте

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

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

Заряжайте энергией

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

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

Лица или предметы?

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

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

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

 

Адаптируйте

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

Самое важное

  • 1)Не бойтесь вызывать эмоции и привлекать внимание! Не поддавайтесь желанию использовать стандартные, “опробованные” изображения. Чему бы ни был посвящен ваш сайт, он не должен быть лишен индивидуальности.
  • 2)На перенасыщенных текстом страницах используйте изображения, чтобы разбить его. Читатели оценят такие визуальные паузы.
  • 3)Периодическое добавление новых изображений добавит жизни вашему сайту.

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

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

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

  • 1)Он привлекает внимание к чему-то определенному.
  • 2)Играет на контрастах.
  • 3)Использует нешаблонный формат.

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

Лучшие варианты сплит-дизайна

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

Комбинируйте насыщенные цвета и эффектную типографику

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

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

 

Яркое красочное изображение и текст расположены бок о бок.

 

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

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

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

Думайте об экране как о карточке

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

Левая панель в оформлении Si Le Solei является одной карточкой, в то время как правая – парой.

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

 Вариант расположения картинок в виде мозаики.

 

 

 Создайте визуальных переход между экранами

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

 Здесь, например, продублировали цвет бренда для визуального перехода от картинки с продуктом к экрану с предзаказом этого товара.

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

Другой метод – это наложение одного элемента (например, текста) на два экрана. Подобное может обеспечить дополнительную связь:

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

И последнее, но не менее важное, вы можете применять цветовое наложение:

Заключение

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

  • 1)Подходит ли подобный метод моему проекту? Достаточно ли имеется негативного пространства для его внедрения?
  • 2)Оценит ли аудитория подобное решение или оно может вызывать замешательство?
  • 3)Разделив внимание посетителей пополам, не приведет ли это к отрицательному результату?

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

 

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

1. Призыв к действию.

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

 

2. Описания продукта.

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

 

3) Одностраничная верстка с мягкой прокруткой.

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

 

4) Удобная форма для заполнения.

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

 

 

5) Наглядный перечень преимуществ именно этого товара.

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

 

6) Мнения экспертов и благодарных покупателей.

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

 

7) Контрастные цветовые полосы прокрутки.

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

 

8) Активные крупные заголовки блоков.

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

 

9) Много свободного пространства.

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

 

10) Умная навигация.

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

 

 

11) Использование иконок и впечатляющих картинок.

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

 

12) Различные бонусы и акции.

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

 

 

13) Наглядные счетчики.

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

 

14) Активная кнопка в шапке.

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

 

15) Контактная информация и местоположение.

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