Кейс: редизайн сайта Урало-Сибирского Института Бизнеса

Урало–Сибирский Институт Бизнеса (USIB) – надежный, профессиональный и престижный институт повышения бизнес-квалификации, лидер на рынке Урало-Сибирского региона. Перед нами стояла задача – разработать для него новый дизайн сайта. Рассказываем о нашей дизайн-концепции: зачем нужна видимая сетка, в чем польза силовой линии и контраста контента, а также для чего сайту «воздух».

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

Основная целевая аудитория – топ-менеджеры и владельцы бизнеса. Решение о приобретении курсов может приниматься собственником бизнеса, наемным руководителем или самим сотрудником (по инициативе руководителя или самостоятельно за свой счет).

Основной целью было разработать презентабельный сайт, современный и удобный в части UI и технологий, без потери наработанных ранее привилегий в сети.

Исходя из этого, мы выделили для себя следующие задачи:

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

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

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

На следующем этапе мы проанализировали конкурентов:

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

Используемый в концепции контраст размеров, цветов и форм решает основные задачи:

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

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

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

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

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

Главная страница

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

Календарь событий и запись

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

Внутренние страницы сайта

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

Мобильная версия

Анализ текущего сайта показал, что бoльшая часть трафика – визиты со смартфонов (65,5% от общего числа посетителей). Поэтому при разработке адаптивных макетов особое внимание уделили мобильной версии сайта.

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

Хотелось бы отметить, что отклоняясь от стандартных решений, нам уже на уровне дизайна удается транслировать пользователям уникальность USIB:

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