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

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

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

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

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%. Не бойтесь вкладывать в эстетику и удобство интерфейса: такие инвестиции всегда оправдывают себя.

2323 показа
4K4K открытий
22 комментария

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

Ответить

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

Ответить

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

Ответить

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

Ответить

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

Ответить

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

Ответить