Мы в Embacy считаем, что сайт должен выделяться и запоминаться, а интерфейс – быть функциональным. В теории все логично, но они должны еще жить вместе. Когда мы сделали яркий сайт для фриланс крипто-плафтормы LaborX, ребята предложили пересобрать в новой стилистике интерфейс. Перенести стиль получилось только с третьей попытки. О наших поисках и находках – эта статья.
Про продукт и задачу
LaborX – биржа фрилансеров с оплатой в криптовалюте с фокусом на креативных профессиях.
Как выглядела их главная страница:
Задача — сделать яркий стиль и сайт, чтобы выделиться среди всех фриланс-бирж и криптовалютных сайтов. Но без дизайнерской вседозволенности, чтобы потенциальные заказчики не подумали, что они попали в портфолио дизайнера.
Как мы искали стиль
С концепцией определились быстро – гифки с людьми и графика.
Почему? Гифки, потому что сервис про людей и странно обойтись без них. Но стоковые фотографии — скучнее и менее яркие по сравнению с ситуативными гифками.
Графика, потому что через нее мы создаем уникальных стиль.
Над вопросом «какую графику использовать» думали дольше.
1. Был вариант с 3D-элементами на темном фоне:
Нам понравилось, клиенту тоже, но побоялись, что для заказчиков будет перебор.
2. Наша классическая линейность. Показалось слишком просто, не цепляет:
3. А потом придумали Стилистику маркеров. Они подчеркивают самую важную информацию и направляют внимание в нужное место:
Важная часть стиля – анимации. Обязательно забегите посмотреть финальный сайт: laborx.com.
Но статья не про него, поэтому то, что он конвертит на 40% лучше и другие детали в последнем отзыве у нас на Clutch.
Переходим к интерфейсу
Команда клиента сгрузила нам старый UI:
Мы пересобрали прототипы и начали перекладывать на них стилистику.
Это не первый наш подход к подобному упражнению – космический стиль skyeng.team переносили во внутренний интерфейс команды Skyeng. Прошло успешно, поэтому мы находились где-то в начале кривой Даннинга-Крюгера.
Попытка номер раз
Первая мысль, которая приходит в голову – просто взять и перенести, раскрасить прототип. Задача вроде так и стояла, поэтому мы не долго думали и получилось так:
На этот вариант потратили один день, и это было действительно «Потрачено». Но мы поняли, что у сайта и интерфейса не может быть один гайд. Что хорошо сайту, интерфейсу — смерть от дисфункции.
Попытка номер два
Мы подумали, что переборщили с яркостью, поэтому выкрутили ползунок в противоположную сторону:
В этом варианте интерфейс потерял свою связь со стилем сайта. Так мы поняли, что слишком далеко отходить от стиля сайта нельзя.
Попытка номер три
Когда нам удалось-таки их подружить:
Дальше мы быстро развили успех и отрисовали остальные экраны:
На дизайн сайта и интерфейса у нас ушло 10 дней — два недельных спринта. Если честно, это быстро даже для нас, поэтому не рекомендуем повторять в инхаус-условиях.
А рекомендуем зарегистрироваться на платформе и посмотреть что у нас получилось. Если вы дизайнер, копирайтер или маркетолог — то и для того, чтобы найти фриланс.
Мы очень довольны новым интерфейсом. Релиз обновления платформы был 2 недели назад, мы получаем позитивный фидбек от наших пользователей. В новом интерфейсе нет ничего лишнего, он стал удобнее, понятнее в использовании и современнее. Сайт хорошо конвертит новых пользователей, а классный интерфейс помогает им оставаться на платформе.
Как мы изменили стиль сайта, чтобы он подружился с функциональным интерфейсом:
1. Оставили один яркий цвет
Убрали розовый и желтый. Синий цвет, который есть в логотипе и CTA стал стилистической основной.
2. Убрали модный шрифт
Модным шрифтам не место в интерфейсе, они его загрязняют:
3. Сократили количество стилей
Сначала у нас была каша из шрифтов: куча размеров и начертаний. В рабочей версии уменьшили количество стилей и стало гораздо чище
4. Упростили визуал
Убрали грубые обводки, разделители, пунктирные линейки — все то, что отвлекало от главной информации.
5. Перенесли маркерные профили
Профили без фотографий сделали в таком же стиле, как и на сайте.
6. Использовали UI-элементы с сайта
Кнопки и сервисные элементы сохраняет «родство» между сайтом и интерфейсом:
Недавно у нас начался еще один подобный проект, поэтому если видите пробелы в нашей логике — пишите, нам будет полезно :)