Дизайн Sasha Rempel
3 082

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

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

В закладки
Аудио

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

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

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

#rsdesign

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Sasha Rempel", "author_type": "self", "tags": ["rsdesign"], "comments": 21, "likes": 23, "favorites": 77, "is_advertisement": false, "subsite_label": "design", "id": 57720, "is_wide": false, "is_ugc": true, "date": "Thu, 07 Feb 2019 18:48:54 +0300" }
{ "id": 57720, "author_id": 218280, "diff_limit": 1000, "urls": {"diff":"\/comments\/57720\/get","add":"\/comments\/57720\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/57720"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

21 комментарий 21 комм.

Популярные

По порядку

Написать комментарий...
7

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

Ответить
3

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

Ответить
4

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

Ответить
0

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

Ответить
0

1995 год. Classmates.com - первая социальная сеть.
2000 год. Окончательно медным тазом накрылась вся индустрия сайто-строения, потеряв 50 % инвестиций и стоимости соответственно.
2004 год. Начинается торжество "социальных" сетей.

Это - ВСЕ функции веб-сайтов + колосальные возможности для привлечения и общения между собой и с владельцами аккаунтов и страниц многочисленных участников бизнес-проектов и простых читателей публикаций.

Кто-то может мне объяснить на кой нам в 2019 году какие-то сайты, если у нас обычная производственная или сервисная (не торговая) компания и мы не производители учебного, развлекательного или новостного контента?

Заранее спасибо.
Я и мои коллеги в предвкушении захватывающих ретро-историй и винтажных мифов.

Ответить
2

1) У вас нет сайта = вас не существует. (актуально для любого более-менее серьезного бизнеса, таскать мелочевку с Китая или продавать DIY можно и в соц сетях)
2) С точки зрения пользователя если у компании нет сайта, то уровень доверия к такой компании снижается. Значит при прочих равных уйдут к конкуренту.
3) Красивый сайт помогает создать хорошее впечатление о компании (современный, аккуратный), положительно влияет на репутацию компании/бренда и улучшает отношение потребителей к продукту - в конечном итоге это помогает привлекать клиентов и продавать.
4) Правильно расставленные акценты помогают увеличить кол-во обращений в компанию

Все вышесказанное это слова, выводы из слов и факты от наших клиентов

5) Омниканальность повышает средний чек

Все вышеописанное актуально как для b2b, так и для b2c. Из нашего опыта сайты позволяли находить клиентов компаниям из таких областей как фарм логистика (сервисная) и производство rfid-меток (производственная)

Ответить
0

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

Ответить
0

Прогресс подразумевает оскорбления тех, у кого иная точка зрения? Без какого-либо адекватного обоснования своей позиции кроме как безапеляционных высказываний.

Хотя про "бесплатно учить" - это сильно! Напоминает приверженца очередной "Бизнес Молодости".

Ответить
1

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

Ответить
–1

Старайтесь переносить личные разговоры в приват.

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

Кроме того, увидели минус своему неадекватному комментарию и среагировали как взрослый человек - это вообще замечательно было.

Ответить
1

Повторяю - ищи, учи, дрессируй других собеседников.

Ответить
–1

^ Отлично отстояли точку зрения. Успехов.

Ответить
1

в третий раз говорю - ***** ** ** ***!

Ответить
–1

И сразу бяка от какого-то анонима.
На кой мне твой спам?
Оскорбительно, тупо, непрофессионально.
Блокирован навечно!

Ответить
1

Это шо Montserrat везде?

Ответить
0

о, как раз совсем недавно запустил rede-sign.com на эту тему)
какой прекрасный пост

Ответить
1

Спасибо, не надо.

Ответить
0

надо;) сайт на страшной тильде для проверки гипотезы, ах да ему 3 дня всего

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления
{ "page_type": "default" }