До и после: как мы редизайним интерфейсы

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

Чтобы они так же резко не кончились у нас, пришлось внимательнее смотреть по сторонам. И что мы увидели? Множество зрелых компаний с сильными с точки зрения разработки продуктами и слабым дизайном, иногда — от слова «совсем».

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

e-Legion: свежий взгляд на сайт одного из российских лидеров мобильной разработки

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

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

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

До и после: как мы редизайним интерфейсы
До и после: как мы редизайним интерфейсы

Ещё мы освежили логотип. Предлагали несколько смелых идей, но не попали в цель, в итоге остановились на актуальном гротескном написании в духе крупных интернет-корпораций.

170 часов — дизайн сайта.

164 часа — дизайн кейсов.

206 часов — вёрстка кейсов.

Хотите больше подробностей? Читайте в нашем полном обзоре.

ST Mobi — редизайн сайта продукта для контроля выездных сотрудников

«Системные технологии» занимаются разработкой решений по управлению выездными сотрудниками и дистрибьюцией с 2000 года. Корпоративный сайт выглядит довольно современно, а вот многостраничный лендинг об ST Mobi, одном из продуктов компании, нуждался в переработке.

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

До и после: как мы редизайним интерфейсы

Мы поменяли логику повествования, поместив обширные сведения об ST Mobi в новый раздел, который назвали «Тур по продукту». Реализовали идею заказчика и вынесли на главную ключевых героев продукта — мерчендайзеров, экспедиторов, супервайзеров, торговых представителей. Теперь каждый пользователь может быстро найти нужную ему информацию, исходя из сферы своей занятости.

До и после: как мы редизайним интерфейсы

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

10 часов — описание структуры и контента.

8 часов — прототипирование.

16 часов — создание стилистики сайта.

89 часов — разработка дизайн-макетов.

32 часа — адаптив и подготовка макетов к разработке.

Новый UI для Direct Take

В разговоре о редизайне нельзя не вспомнить о нашем любимом (пусть и не таком свежем) кейсе, который мы реализовали для дружественной нам команды. Компания-разработчик профессионального ПО для захвата, микширования и обработки любых форматов видео захотела обновить дизайн интерфейса одного из своих продуктов — Direct Take, программы для записи и онлайн-трансляции.

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

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

До и после: как мы редизайним интерфейсы

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

200 часов — дизайн.

38 часов — менеджмент.

Работающему бизнесу иногда трудно признать, что продажи не растут, потому что с продуктом что-то не так. Может, стоит попробовать взглянуть на проект со стороны? Если ваша функциональность — пушка, а дизайн при этом слаб, как трёхмесячный младенец, стоит всерьёз задуматься о вложениях в новый UI.

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

2020
22 комментария

Это ужасные редизайны. Вы сделали из хуевых старых сайтов хуевые «современные» сайты. Не вытащили смыслы, наполнили шаблонным, ничего не значащим текстом и очень слабо реализовали графически. В лучших канонах лендинговой слепоты.
Жаль, что рынок переполнен такими горе-дизайнерами.

7
Ответить

Не защиты, но справедливости ради, не помешали бы примеры хороших редизайнов. Для сравнения и понимания.

4
Ответить

Может и нам сайт освежите?
65apps.com

5
Ответить

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

Ответить

Давайте мы освежим

Ответить

Сколько час то стоит?

2
Ответить