Дизайн корпоративных сайтов нового поколения

22.01.2014 Аналитика и юзабилити
Дизайн корпоративных сайтов нового поколения

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

Авторская типографика

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

thenewyorker.png

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

2D останется в тренде

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

wistia.png

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

Наведите мышь, чтобы увидеть…

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

Так, ресурс AmeriFirst Home Mortgage использует hover-эффекты повсюду - без них ориентироваться было бы намного сложнее:

amerifirst_hover.png

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

Вся релевантная информация на одной странице

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

urbanbound.png

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

urbanbound.png

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

Крупные фотографии продуктов

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

Например, вот так продемонстрировали свою систему оптимизации контента дизайнеры HubSpot:

cos1-1.png

cos2-1.png

cos3-1.png

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

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

Видеообзоры - двигатель продаж

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

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

generalelectric_video1-1.png

generalelectric_video2-1.png

Исследования показали, что большинство покупателей в B2B-сегменте предпочитают грамотный видеообзор "простыням" текста, а 43% анализирует видео продуктов при подборе подходящего поставщика. Это сигнал для всех B2B-компаний, желающих нарастить продажи - создавайте эффективные видео!

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

Адаптивный дизайн

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

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

Таким видят сайт владельцы десктопов:

uber_desktop.png

А таким - владельцы мобильных устройств:

uber_mobile.png

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

По материалам Hubspot

 
Больше интересных статей

Оставьте номер телефона, чтобы наш менеджер связался с вами в удобное для вас время

Ваше имя*
Ваш номер телефона*
Тема для обсуждения
Выберите удобное время для звонка
9:00 9:15 9:30 9:45 10:00 10:15 10:30 10:45 11:00 11:15 11:30 11:45 12:00 12:15 12:30 12:45 13:00 13:15 13:30 13:45 14:00 14:15 14:30 14:45 15:00 15:15 15:30 15:45 16:00 16:15 16:30 16:45 17:00 17:15 17:30 17:45
Виды услуг
ОбзорМаксимальный размер файла - 10 мб