Редизайн
сайта Admass
Клиент обратился к нам с просьбой: “Немного освежить дизайн”, сделать его современным, лёгким для восприятия.
О компании
Admass.io — платформа для рекламы в социальных сетях, ориентированная на конверсию и использующая сарафанный маркетинг.
Это полноценная платформа для развития и рекламы бизнеса и авторов в интернете.
Сайт “До”: Устаревший дизайн, который нуждался в обновлении;
Структура и функциональные возможности устарели.
https://admass.io — Канада
Задачи проекта
- Провести аудит сайта
- Сделать анализ юзабилити
- Разработать и внедрить обновленный дизайн сайта
- Сверстать и наполнить контентом новые страницы
Анализ целевой аудитории
Анализ целевой аудитории
На данном этапе был проведено полное исследование целевой аудитории. Выявлены проблемы и потребности пользователей.
ЦА: Все инфлюенсеры
Анализ конкурентов
Составлен ТОП-3 главных конкурентов.Выявлены сильные и слабые стороны; изучены идеи, которые уже реализованы и подходят для нашей ЦА.
Анализ услуги
Совместили то, что хочет наша целевая аудитория, но еще не предлагают конкуренты.Введение новых услуг для клиента дает возможность развиваться рынку в данной сфере.
Разработка прототипа
Одним из важных этапов в работе над редизайном сайта является работа с прототипом. Так как клиент попросил оставить блочную структуру, на базе старого сайта был разработан новый прототип с видоизмененными блоками. Некоторые блоки были убраны, так как не соответствовали основным правилам юзабилити и затрудняли взаимодействие с сайтом.
В результате было разработано несколько прототипов, на основе которых составили наиболее удобный и функциональный.
Прототип был согласован с клиентом и мы перешли к следующему этапу: дизайн страниц сайта.
Цвет
Цвета играют немаловажную роль в дизайне сайта. За основу взяли темно-синий. Это цвет бренда, поэтому сайт останется так же привычным и узнаваемым.
В качестве второго — акцентного цвета был выбран так же синий, но уже другого оттенка. Синий цвет вызывает доверие, надежность, честность, спокойствие — именно этими качествами обладает компания Admass.
Фон — белый. Для подчеркивания контрастности основного и акцентного цветов.
Типографика
Так как по задумке, дизайн был достаточно спокойным и классическим — было принято решение сделать акцент на типографике. Для главных заголовков страниц выбрали — Raleway, для основного текста — Montserrat.
На основе выбранных цветов и шрифта, был сделан дизайн главных страниц, который был презентован клиенту. После внесения нескольких правок — дизайн утвердили, и мы приступили к дизайну остальных страниц.
Модульная сетка
Для десктопной версии мы выбрали классическую модульную сетку, состоящую из 12-ти колонок. Она идеально подходит для блочной структуры сайта и нашего расположения элементов на странице.
Для мобильной — модульная сетка из 4-х колонок. Также, данное количество колонок значительно облегчает верстку сайта.
Разработка мобильной версии
Во время исследований ЦА было выявлено, что большая часть пользователей использует мобильную версию сайта. Поэтому перед нами стояла задача адаптировать дизайн таким образом, чтобы сделать сайт максимально удобным и понятным для нашей аудитории
Разработка страниц личного кабинета
Desktop
Mobile
Результаты работы
- Проведен анализ ЦА, конкурентов и услуг.
- Разработан прототип и дизайн сайта. В общей сложности выполнен дизайн 77-ти страниц сайта, что в среднем в 4 раза больше типового количества страниц на подобных сайтах.
- Разработан вариант верстки для всех наиболее популярных смартфонов. Спрограммирован веб-сайт.
- Проведена проверка эффективности. Проверена работа сайта в разных браузерах и на разных устройствах. Проведено юзабилити-тестирование.
Сайт после редизайна:
- 1Обновленный дизайн, полностью соответствующий как современным тенденциям в дизайне, так и пожеланиям заказчика.
- 2Привлекательный дизайн, разработанный для целевой аудитории.
- 3Удобный в использовании сайт с различных устройств - повышение охвата пользователей.
Отзыв от клиента
Перевод:
Работа со Студией ХОД была именно тем, что было нужно нашему сайту. Специалисты компании создали современный веб-сайт, которым реально приятно пользоваться. Мы особенно благодарны за проделанную работу по адаптации нашего сайта к смартфонам. Сейчас мы видим, что сайт прост в навигации и в целом удобен для пользователей. Большое спасибо всей команде!