Каждый год мы видим новые элементы веб-дизайна. Конечно, не обязательно использовать все, но чем больше вы сможете привнести в ваш следующий редизайн, тем лучше будет ваш сайт. Тогда вы спросите: Что включают в себя эти новейшие элементы и какие из них действительно нужны нашему сайту?
Вот вам гид по важным элементам современного веб-дизайна.
Элемент № 1: Уникальная типографика
Большинство компаний имеют свой фирменный стиль, который включает: вид, размер шрифта и оформление текста, которое помогает клиентам мгновенно отличать компанию от конкурентов.
В последние годы количество шрифтов, которые можно использовать на веб-сайтах, значительно возросло. Дизайнеры теперь имеют более широкий выбор. Типографика The New Yorker признана потребителями во всем мире благодаря своему уникальному стилю и внешнему виду.
Почему это полезно?
Дизайнеры используют один стиль, который сопровождает посетителей сайта на разных разделах. Например, на сайте The New Yorker посетители ориентируются по разделам исходя из типографики и размера шрифта.
При создании бренда важно учитывать типографику. Это позволяет потребителям сразу распознавать ваш веб-сайт и ваш бренд.
Элемент № 2: Плоский дизайн
Плоская конструкция известна своим упрощенным внешним видом. Вместо того чтобы использовать трехмерные эффекты и другие дизайнерские приемы, в плоской конструкции используются простые и, ка к правило, яркие иллюстрации.
Давайте рассмотрим сайт Wistia в качестве примера. Как вы видите, в основе лежит минимализм, который акцентирует внимание на контенте сайта, а не на дизайне. Тем не менее, плоская конструкция позволяет сайту выглядеть чистым и гладким.
Почему это полезно?
Плоская конструкция сфокусирована на контенте компании. Это позволяет пользователям чётко распознавать основные акценты, которые несёт в себе контент, а не «модный» дизайн.
Кроме того, в основе плоской конструкции лежит минималистичный стиль с большими пробелами, который делает сайт чище и оставляет много свободного пространства. Многие дизайнеры сейчас стараются не перегружать сайты декоративными элементами и оставлять больше свободного пространства, чтобы пользователь обращал внимание именно на «мясо» сайта, то есть на его контент.
Элемент № 3: Hover-эффекты
Hover-эффекты в разделах сайта помогают пользователю понять , в каком месте страницы он находится.
Когда наводишь курсор на часть сайта с hover-эффектом, она обычно меняет цвет или конфигурацию и демонстрирует раздел, который вы в данный момент смотрите.
Давайте взглянем на сайт агентства ипотечного жилищного кредитования AmeriFirst. Когда вы передвигаете курсор по различным разделам сайта, они меняют цвет кнопок, давая вам понять, на каком разделе вы находитесь.
Например, если навести стрелку на кнопку «Купить дом», она поменяет свой цвет на более светлый.
Почему это полезно?
Hover -эффекты являются отличным инструментом юзабилити. Дизайн не навязчивый, но это помогает посетителям сайта отслеживать, где они находятся, когда изучают страницу.
Элемент № 4: Прокрутка разделов страницы
Некоторые веб-сайты имеют функцию, которая при щелчке на ссылку, переносит вас в другую часть страницы. Например, UrbanBound использует эту технику.
Давайте посмотрим. Навигация сайта UrbandBound содержит ссылки на самые важные разделы для посетителей сайта. Допустим, вы заинтересованы в истории успеха UrbanBound.
При нажатии на эту ссылку, сайт медленно прокручивается вниз до раздела страницы, которая показывает историю успеха.
Когда вы находитесь в «Истории успеха», этот раздел так же выделен другим цветом, чтобы вы понимали, где находитесь.
Навигация сайта остаётся сверху, чтобы у вас была возможность перейти к другому разделу сайта аналогичным образом.
Почему это полезно?
Прокрутка является отличным вариантом для юзабилити сайта.
Во-первых, вместо того, чтобы переходить с одной страницы на другую, вы можете увидеть всю необходимую информацию на одной. Это означает, что нет необходимости в загрузке нескольких страниц.
Весь контент находится в том порядке, в котором он несёт наибольший смысл для пользователя. Всё, что требуется от пользователя, чтобы узнать необходимую информацию, это прокрутить на нужный вам раздел при помощи ссылки. Это так же удобно для посетителей, которые уже были на сайте.
Они могут искать определённую информацию, которую они уже видели, а с прокруткой это сделать легче и быстрее.
Элемент № 5: Гигантские изображения продуктов
Возможно, вы заметили, что сейчас многие B2B веб-сайты начинают отображать большие картинки продуктов на своих сайтах, чтобы выделить различные функции или части своей продукции.
Этот элемент является еще одной важной тактикой дизайна, которая встречается всё чаще и чаще.
Давайте взглянем на страницу сервиса по оптимизации контента HubSpot. Как вы можете видеть в трех примерах ниже, здесь есть большие изображения различных частей продукта. Эти изображения так же отзывчивы к устройствам, с которых пользователь заходит на сайт. Но об этом мы поговорим в другом «элементе».
Почему это полезно?
Большие изображения продуктов помогают дизайнерам выделить различные функции продукта более эффективным и действенным образом.
Во-первых, это усиливает преимущества функций, имея возможность указать на основные моменты.
Например, на третьем изображении есть цифры, соответствующие преимуществам определенных функций. Это так же позволяет потребителю воспринимать продукт визуально. Предпочтительно использовать небольшое количество текста, но с большими изображениями продукции.
Так пользователь получает чёткое представление о различных характеристиках продукта с помощью образов, а не слов.
Элемент № 6: Видео презентации товара
В дополнение к множеству фотографий, компании также начинают использовать видео презентации, где они говорят о преимуществах своих товаров, а также новых возможностей и т.п. Яркий пример: General Electric используют многочисленные видео на своём сайте, чтобы дать информацию о своих продуктах.
Почему это полезно?
В соответствии с данными Inc. Magazine, 92% B2B клиентов смотрят видео в интернете и 43% B2B клиентов смотрят видео презентации, когда исследуют продукт или услугу для их бизнеса.
B2B компании таким образом поясняют детали и функции своего продукта, которые влияют на процесс принятия маркетингового решения. Видео презентации так же позволяют B2B компаниям определить наиболее важные для них перспективы работы с данным продуктом.
Шаг за шагом видео презентация поясняет процесс использования. Это является большим преимуществом в обслуживании клиентов, а так же играет роль в юзабилити сайта.
Элемент № 7: Большие, отзывчивые изображения
Ранее мы уже обсуждали наличие больших изображений. Но мы не рассматривали возможность сделать эти изображения «отзывчивыми».
Большие отзывчивые изображения, заточенные под просмотр на любом экране мобильного устройства или компьютера. Это значит, что не нужно прокручивать вниз или вбок для того, чтобы полностью посмотреть картинку.
Сайт Uber использует тренд больших фото, а также элемент отзывчивых изображений. Давайте проверим этот сайт на компьютере и мобильном устройстве.
Компьютер:
Мобильный телефон:
Почему это полезно?
Ваши клиенты могут прийти, откуда угодно. Они могут найти ваш сайт на мобильном телефоне, на планшете или на компьютере.
Uber используют отличную картинку, но если её можно посмотреть только на компьютере, то многие люди её просто не пропустят.
Сделав отзывчивые изображения, вы обеспечите хороший опыт пользования. Посетители веб-сайта смогут смотреть разные изображения, фоновые или картинки продуктов, и будут иметь возможность сделать то же самое на любом устройстве. Это чрезвычайно важно, так как всё меньше людей сейчас используют стационарные компьютеры для поиска информации о компаниях.
Какие еще элементы дизайна необходимо включить в веб-сайт?
