Редизайн и создание дизайн-системы для хостинг-провайдера FirstVDS
Провели анализ сайта и конкурентов, разработали новый визуальный язык бренда и собрали массивную дизайн-систему для быстрого создания новых направлений компании
О клиенте
К нам обратилась команда FirstVDS — это хостинг-провайдер, начавший свою работу в 2003 году. Занимаются предоставлением в аренду виртуальных выделенных серверов для проектов любого масштаба. VDS/VPS используются для размещения различных сайтов, порталов и сервисов, а также для разработки и тестирования. В 2021 и 2022 году клиент получал премию ЦОДы.рф «Хостер года»
Задача
Целью редизайна является обновление сайта, который существовал в своём дизайне почти 7 лет, создание единой системы компонентов и улучшение пользовательского опыта.
Старая версия главной страницы и конфигуратора «FirstVDS»
Анализ
У клиента хороший маркетинговый отдел, на старте у нас была качественная аналитика, плюс мы проанализировали метрику и тепловые карты. Также изучили дизайн всех страниц сайта и сайты конкурентов. Это позволило нам сформировать основные проблемы сайта, которые предстояло решить новым дизайном.
Помимо этого было важно разобраться с тем, как человек подходит к выбору сервера. Как оказалось, это довольно сложный процесс. Для выбора сервера человеку нужно определиться:
Сколько должно быть ядер процессора?
Какой будет объём оперативной памяти?
Сколько места нужно на жестком диске?
Какая ОС должна быть предустановлена на сервер?
Какое ПО потребуется для сервера?
Какая нужна пропускная способность канала?
Нужны ли дополнительные IP-адреса?
А также есть ещё и различные ответвления вроде резервного копирования или приобретения SSL-сертификата, с которыми тоже нужно разобраться заранее. Если клиент неправильно соберёт свой сервер, он может столкнуться с неприятностями в виде падения своего сервиса в самый важный момент из-за нехватки мощностей.
Для рассчёта этих мощностей клиент должен понимать, для каких именно задач он приобретает сервер – будь то интернет-магазин или сервер для какого-нибудь приложения. Иногда клиенты и вовсе не знают, какой сервер им нужен. Тогда им на помощь приходят готовые конфигурации или сотрудники поддержки, которые на основе задачи клиента подбирают нужные мощности.
Проблемы
Несогласованность дизайна
Сайт FirstVDS развивался на протяжении нескольких лет разными командами специалистов. Это привело к разрозненности разделов сайта, некоторые элементы отличались от общей визуальной системы. Они решали задачи конкретного направления, но не транслировали визуальный контекст бренда.
На сайте можно было встретить обилие разных вариантов блоков или функциональных элементов, имеющих одну структуру и задачу.
Такое количество одинаковых по структуре, но разных по дизайну элементов нарушает консистентность дизайна. Дизайн сайта — это главная точка контакта с аудиторией: чем более последователен интерфейс продукта, тем больше доверия он вызывает у аудитории, и тем проще аудитории им пользоваться.
Ошибки юзабилити
К этой проблеме относится всё, что ухудшает пользовательское восприятие сайта. Например: При наведении на стрелку в баннере всплывал элемент, который внешне больше похож на рекламу, чем на превью следующего слайда.
Сюда же можно отнести всплывающий новостной виджет, который пользователи сразу же закрывали при открытии сайта из-за «баннерной слепоты». Все эти моменты можно было отследить в метрике сайта.
Коммуникация
Ключевым моментом для переработки дизайна стал язык коммуникации с пользователем в интерфейсе: от простых форм до сложных конфигураторов. FirstVDS — это продукт для широкой аудитории, поэтому язык интерфейса должен быть универсальным и понятным для всех, несмотря на технологическую сложность и уникальность продукта.
Структура страниц
Тепловые карты скроллинга показывали, что многие внутренние страницы просматривают не сверху вниз, а отрывками, пропуская различные блоки. Это означало, что информация на страницах была размещена не в том порядке, в каком она интересна клиенту. Важные блоки конфигураторов услуг стояли слишком низко, их вытесняли массивы информации, которую клиенты читать не желали.
Дизайн-Система
Визуальный язык
Главным посылом нового дизайна стала идея «дружелюбного соседа» — помощника в выборе ключевых услуг, который разговаривает с пользователем на одном языке и вызывает доверие. Бренд уже имел узнаваемый зелёный цвет, мы решили сохранить его, придав эмоциональности, сделав более сочным. Главным языком эмоций стали иллюстрации проекта. В этом нам помог сервис storyset, на котором мы смогли подобрать свыше 35 иллюстраций и адаптировать под нашу концепцию. В дальнейшем клиент улучшил идею: коллеги отрисовали набор иллюстраций со своим персонажем. Акценты, эмоциональность, работа с типографикой и немного воздуха образуют собою новую визуальную концепцию FirstVDS.
Сравнение старого и нового дизайна продуктовой страницы
Систематизация
Определившись с концепцией, мы начали работу над самым сложным. Нужно было провести редизайн более чем 45 различных внутренних разделов сайта.
Сайт FirstVDS — это динамически развивающийся продукт. Чтобы решить задачи такого крупного проекта, недостаточно отрисовать только отдельные макеты, в таком случае со временем снова могут появится разделы, которые отличаются по дизайну от общей стилистики. Поэтому для этого проекта мы разработали дизайн-систему.
Из чего состоит дизайн-система?
Основные стили (токены)
Дизайн-система строится атомарным путём, начиная с простейших элементов (токенов), заканчивая сложнейшими (полноценными страницами). К самым простейшим элементам, токенам, относятся:
Сетка и кратность четырём
Сетка, кратная 4px, является основой для расположения элементов. Именно такой размер сетки позволяет задать минимальные ограничения, которые облегчат выбор размеров и отступов, но в то же время не создадут сложностей в выборе шага, например, типографики.
Такая сетка сильно ускоряет процесс выбора нужного отступа, т.к. дизайнеру вместо выбора из условных восьми разных значений нужно будет выбрать всего между двумя.
Также подобное ограничение помогает и разработчикам, ведь если он вдруг заметит, что где-то в макете что-то не кратно 4, он будет знать, что это скорее всего ошибка, и сделает значение кратным, не внося лишних значений в итоговый продукт.
Показать 4px сетку
Типографика
Кратность позволяет проработать типографику таким образом, что она будет отлично вставать в сетку и при этом иметь достаточные межстрочное расстояние и шаг для выбора размеров. Набор текстовых стилей на проекте состоит из заголовков, наборного текста и вспомогательных элементов, вроде тегов, лейблов или мелких шрифтов для незначительной информации.
Также учтены стили, необходимые для форматирования текстов, и созданы компоненты типографических блоков – это позволило в дальнейшем гибко работать с блогом и базой знаний, сделав из них удобный инструмент для быстрого создания статей.
Основные цвета
Палитра состоит из пяти групп: основные цвета, дополнительные цвета (простые и градиентные), цвета для полупрозрачного текста или обводок, а также полупрозрачные фоны.
Палитра строилась вокруг трёх цветов: зелёного, который закрепился за брендом, белого фонового и чёрного для текста. Вокруг зелёного цвета мы подобрали дополнительные с помощью цветового круга, собрав таким образом палитры дополнительных цветов. Из белого и чёрного мы создали оттенки для полупрозрачного текста и обводок.
Иконки
При создании айкон-сета мы обратились к открытой библиотеке remixicon. В ней более 2000 качественных иконок, поэтому даже если в дизайн-системе не найдётся нужной иконки, её всегда можно будет дополнить из исходной библиотеки, что повышает гибкость дизайн-системы.
Эффекты
К эффектам относятся параметры теней для разных элементов, а также параметры фонового размытия.
Создавая какой-либо элемент, дизайнер руководствуется именно этими токенами. Подобные ограничения поддерживают согласованность элементов и визуальный язык бренда.
Атомарный дизайн
Мы строили дизайн-систему по принципу атомарного дизайна Бреда Фроста, продвигаясь от более простых компонентов к более сложным.
Масштабируемость
Атомарный подход нужен для масштабируемости проекта. Работая с новыми страницами и разделами, специалист может собирать их из уже созданных атомов и молекул. Это позволяет довольно быстро запускать новые продукты, используя компоненты дизайн-системы, без нарушения визуального языка бренда.
Гибкость
Атомарный подход в связке с функционалом компонентов в Figma экономит кучу времени на внесении правок и обновлении дизайна. Так, например, изменив в кнопке цвет, шрифт или отступы, мы автоматически применим это изменение ко всем макетам, где используется компонент этой кнопки. Использование стилей и компонентов позволяет со временем обновлять внешний вид дизайн-системы (например: взять другой шрифт) и при этом не тратить время на изменение типографики во всех макетах, всё изменится автоматически.
Создаваемая в процессе разработки дизайн-система начала помогать ещё на этапе дизайна. Например, имея готовый набор компонентов для сборки конфигуратора, мы быстро смогли реализовать карточки продуктов для корзины, которой до редизайна не было на сайте.
Превратить конфигуратор в карточку корзины
Дальнейшее использование
Ещё один пример: Акция «Пятница 13», которая стала фирменной для клиента за время существования проекта FirstVDS. Акция всегда оформлялась в хоррор-стилистике, и дизайн-система отлично себя показала, мимикрировав под заданную тематику.
Клиент взял готовые компоненты дизайн-системы, и, изменив акцентный зелёный на красный, более подходящий под акцию, быстро собрал промо-страницу со специальной карточкой сервера и запустил акцию.
Адаптация под различные разрешения
С помощью функции Autolayout в Figma, позволяющей создавать автоматически масштабируемые компоненты, мы быстро настроили компоненты под разные разрешения.
Нам удалось провести редизайн крупного и сложного проекта, создать для него дизайн-систему и решить проблему нарушения согласованности дизайна со временем. Мы получили бесценный опыт проектирования крупных дизайн-систем и можем уверенно заявить, что стали специалистами в этой сфере, способными спроектировать дизайн-систему любой сложности.
Клиент же получил удобный инструмент для масштабирования проекта и теперь сможет в разы быстрее релизить новые продукты, акции и направления.
Когда вы выносите серьезные проекты на аутсорс, всегда остро встаёт вопрос с выбором подрядчика, потому что специфика вашей работы неизвестна никому, кроме вас. Это в свою очередь тянет за собой проблемы с вовлеченностью подрядчика (Насколько он сможет погрузиться в продукт и понять его? Будет ли он вообще это делать?) и применимостью его предыдущего опыта к вашему проекту (насколько будут эффективны решения, взятые, например, из другой отрасли к вашей специфике бизнеса?).
В первую очередь, надо понимать, что подобная работа по редизайну проекта федерального уровня не может быть простой и безболезненной. Это достаточно долгий проект с огромных количеством взаимодействий, созвонов, споров.
Как это было с Адикт? Профессионализм команды и экспертиза в сфере дизайна не вызывает сомнений, поэтому не буду на этом останавливаться. Важно то, как сложилась итоговая работа и наше взаимодействие. Проект занял полгода — это было больно, долго, но результат закрыл все наши потребности, договоренности и перекрыл все наши эстетические ожидания. Главный фактор успеха, на мой взгляд — в процессе ребята доносят до вас свою точку зрения и аргументированно отстаивают её. Вы в свою очередь должны отстаивать свою (вы же нацелены на результат для вашего бизнеса?). В этих спорах и обсуждениях, от которых часто начинает болеть голова, рождается истина.
Выражаю уважение и благодарность нашим партнёрам из компании Адикт за завершенный проект. Тем временем, мы уже некоторое время работаем вместе над редизайном другого нашего проекта — 1dedic. Думаю, данный факт уже говорит сам за себя.
Никита Попов, глава маркетингового отдела FirstVDS
Стратегия:
UX стратегия Аналитика Технологическая стратегия
UI/UX:
Проектирование и прототипирование сайтов и интерфейсов Дизайн сайтов и интерфейсов