Embacy
1024

Как мы подружили безудержный дизайн сайта с интерфейсом

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

В закладки

Про продукт и задачу

LaborX – биржа фрилансеров с оплатой в криптовалюте с фокусом на креативных профессиях.

Как выглядела их главная страница:

Первая версия продукта была про контракт-менеджмент

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

Как мы искали стиль

С концепцией определились быстро – гифки с людьми и графика.

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

Графика, потому что через нее мы создаем уникальных стиль.

Над вопросом «какую графику использовать» думали дольше.

1. Был вариант с 3D-элементами на темном фоне:

Мы давно хотели сделать проект с 3D-графикой, но здесь не сложилось

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

2. Наша классическая линейность. Показалось слишком просто, не цепляет:

Линии теряются на фоне ярких гифок

3. А потом придумали Стилистику маркеров. Они подчеркивают самую важную информацию и направляют внимание в нужное место:

Яркий маркер дает сильный акцент

Важная часть стиля – анимации. Обязательно забегите посмотреть финальный сайт: laborx.com.

Но статья не про него, поэтому то, что он конвертит на 40% лучше и другие детали в последнем отзыве у нас на Clutch.

Переходим к интерфейсу

Команда клиента сгрузила нам старый UI:

Мы пересобрали прототипы и начали перекладывать на них стилистику.

Это не первый наш подход к подобному упражнению – космический стиль skyeng.team переносили во внутренний интерфейс команды Skyeng. Прошло успешно, поэтому мы находились где-то в начале кривой Даннинга-Крюгера.

Попытка номер раз

Первая мысль, которая приходит в голову – просто взять и перенести, раскрасить прототип. Задача вроде так и стояла, поэтому мы не долго думали и получилось так:

Что-то среднее между винегретом и новогодней елкой

На этот вариант потратили один день, и это было действительно «Потрачено». Но мы поняли, что у сайта и интерфейса не может быть один гайд. Что хорошо сайту, интерфейсу — смерть от дисфункции.

Попытка номер два

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

Слишком похоже на Санкт-Петербург

В этом варианте интерфейс потерял свою связь со стилем сайта. Так мы поняли, что слишком далеко отходить от стиля сайта нельзя.

Попытка номер три

Когда нам удалось-таки их подружить:

Наконец-то это перестало быть похоже на шорты с Dribble, с приматом функции над стилем

Дальше мы быстро развили успех и отрисовали остальные экраны:

На дизайн сайта и интерфейса у нас ушло 10 дней — два недельных спринта. Если честно, это быстро даже для нас, поэтому не рекомендуем повторять в инхаус-условиях.

А рекомендуем зарегистрироваться на платформе и посмотреть что у нас получилось. Если вы дизайнер, копирайтер или маркетолог — то и для того, чтобы найти фриланс.

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

Александра Кугушева
Brand Manager Chrono.Tech (в состав которого входит LaborX)

Как мы изменили стиль сайта, чтобы он подружился с функциональным интерфейсом:

1. Оставили один яркий цвет

Убрали розовый и желтый. Синий цвет, который есть в логотипе и CTA стал стилистической основной.

2. Убрали модный шрифт

Модным шрифтам не место в интерфейсе, они его загрязняют:

Смотреть на кнопку

3. Сократили количество стилей

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

4. Упростили визуал

Убрали грубые обводки, разделители, пунктирные линейки — все то, что отвлекало от главной информации.

5. Перенесли маркерные профили

Профили без фотографий сделали в таком же стиле, как и на сайте.

Ну какие же они милые!

6. Использовали UI-элементы с сайта

Кнопки и сервисные элементы сохраняет «родство» между сайтом и интерфейсом:

Не все из них вошли в финал, но большую часть мы использовали

Недавно у нас начался еще один подобный проект, поэтому если видите пробелы в нашей логике — пишите, нам будет полезно :)

Делаем фирменные стили и сайты для айти-продуктов. Работаем со Skyeng, «Яндексом», МТС, ВТБ. Портфолио: http://be.net/embacy
{ "author_name": "Embacy", "author_type": "editor", "tags": [], "comments": 0, "likes": 13, "favorites": 13, "is_advertisement": false, "subsite_label": "embacy", "id": 131962, "is_wide": false, "is_ugc": false, "date": "Thu, 04 Jun 2020 16:10:04 +0300", "is_special": false }
Право
Семь настоящих причин зарегистрировать товарный знак в России
Хорошее название помогает компании защититься от подделок, покорить рынок и выйти за рубеж. Плохое может её обанкротить.
Объявление на vc.ru
0
Комментариев нет
Популярные
По порядку

Комментарии