Редизайн сайта Dysnix: как UX/UI дизайн помог выделиться среди конкурентов

Как сделать сложное простым? Как структурировать огромные объемы информации? Как не упустить внимание пользователей на длинных страницах?

В этой статье мы рассмотрим, как редизайн сайта компании Dysnix улучшил доступность продукта, сделав его более понятным благодаря нестандартным UX/UI дизайн решениям.

О Dysnix: инновационное решение сложных задач

Dysnix – украинская IT компания, предоставляющая услуги DevOps и DevSecOps, имеет за плечами более 8-ми лет на международном рынке. Инженеры Dysnix выполнили более 60 проектов в областях Fintech, Web3, Medtech, advertising и другие. Dysnix участвовал в разработке продуктов Google, работали с клиентами уровня Visa.

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

Dysnix: вызовы и задачи проекта

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

• Презентовать все имеющиеся в наличии свои продукты и услуги в сфере Web 3;
• Подчеркнуть экспертизу в отрасли;
• Выделиться на фоне конкурентов.

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

Этапы работ редизайна сайта Dysnix

Процесс работ над проектом состоял из следующих этапов:

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

Элементы UX/UI дизайна ключевых страниц для отображения главной концепции компании

Работу над проектом начали с главной страницы и других ключевых страниц, а также блога (Products, Solutions, Menu, и Blog), потому что они:

• Покрывают основные потребности клиента;
• Служат шаблонами для остальных страниц сайта, поскольку содержат большинство UX/UI элементов, которые используются и на других страницах;
• Закладывают основную стилистику сайта в целом.

Далее подробнее о UX/UI решениях, которые были внедрены для охвата всех требований и особенностей проекта и достижения поставленных целей.

Стилистика сайта: специально разработанные иллюстрации, UX/UI элементы и цветовая гамма

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

• Гамма и палитра цветов.

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

• Иллюстрации.

Отказались от стоковых изображений и разработали иллюстрации, которые максимально отображают сам продукт и его функции. В основу легли лаконичные геометрические фигуры, чтобы подчеркнуть основную идею: просто о сложном, но при этом уйти от банальной метафоры.

Наш мозг обрабатывает изображения в 60 000 раз быстрее, чем текст, поэтому мы добавили блок со специально разработанными элементами UX/UI дизайна для облегчения восприятия информации и добавления точек входа на главной странице.

• Шрифты.

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

• Визуально разделенные и структурированные блоки с информацией.

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

UX/UI дизайн блога: структура для огромного массива информации, чтобы сделать ее более доступной

Разработка блога компании Dysnix была важной задачей, поскольку эта страница вебсайта имеет значительный потенциал для привлечения пользователей и выполнения SEO задач. Однако, сложность задачи заключалась в структурировании и подаче контента, поскольку материала на блоге было очень много и он очень разнообразен.

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

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

• На первом экране добавили плитку с последними постами и наиболее популярными статьями по мнению редактора;

• Добавили быстрый поиск по статьям и тегам. Выделили основные категории и коллекции статей в отдельный блок для оптимизации навигации и ускорения поиска необходимой информации;

• Добавили превью постов, но с таким расчетом, чтобы сотрудник - не дизайнер тоже мог добавить нужные элементы при заливке нового контента без потери стилистики;

• Разместили отдельный блок с самыми популярными коллекциями статей с кастомными иллюстрациями, чтобы добавить ярких акцентов и удержать внимание пользователя;

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

Результаты редизайна сайта Dysnix

Мы проработали основные страницы сайта и продумали акцентные элементы UX/UI дизайна. Ключевыми особенностями дизайна сайта стали:

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

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

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