Дизайн-система маркетплейса ссылок Serpzilla
- ux/ui
- frontend
- design
![serzilla](https://cdn.sanity.io/images/2gswram9/production/030c07a2fa53b461a9223bfbc178f7f8839773e6-4576x2288.jpg?q=85&w=1536&fm=jpg&fit=crop)
О проекте
Serpzilla — платформа, которая объединяет рекламодателей и площадки для размещения рекламы. Каждый день более 100 тыс. пользователей ежедневно покупают и продают рекламные баннеры и ссылки на рекламном маркетплейсе.
Задача
В Serpzilla решили объединить несколько продуктов в один. Новая стратегия потребовала проектирования новых сценариев использования и полной переработки сервиса. Кроме того в Serpzilla решили продолжать запускать отдельные небольшие сервисы.
Всё это потребовало создания дизайн-системы, которая объединит все продукты и позволит:
- Сделать все интерфейсы проще и понятнее;
- Запускать новые фичи и сервисы быстрее;
- Тратить меньше ресурсов на поддержку в будущем.
Результат
Дизайн-система: компоненты в Figma и на vue.js, общие сценарии и принципы
Мы собрали дизайн-систему, которая помогла увеличить скорость разработки новых сервисов и объединения старых.
4 команды разработчиков и продакт-менеджеры переиспользуют общие решения, которые мы придумали. Пользователи быстрее разбираются в разных сервисах, а проектирование и запуск новых фич занимает меньше времени.
Разработали, типографику, сетку и принципы адаптации для разных экранов
![Typography](https://cdn.sanity.io/images/2gswram9/production/49f519eb36a25dbf562d5d203274591f1d6665f8-4576x3168.png?q=85&w=1536&fm=jpg&fit=crop)
![Typography-2](https://cdn.sanity.io/images/2gswram9/production/db42b8352386ac9b5c4e9e84c019f1921563c33c-4576x3168.png?q=85&w=1536&fm=jpg&fit=crop)
![Typography-5](https://cdn.sanity.io/images/2gswram9/production/45bd502f74d774798dc558d51ad3d1d3e8650ae9-2272x2272.png?q=85&w=1536&fm=jpg&fit=crop)
![Typography-3](https://cdn.sanity.io/images/2gswram9/production/49b564cde6080375506434f39c45bd47a11d7665-2272x2272.png?q=85&w=1536&fm=jpg&fit=crop)
![Typography-4](https://cdn.sanity.io/images/2gswram9/production/7c00473dc562223dbe5978e91121472defb218f0-4576x3168.png?q=85&w=1536&fm=jpg&fit=crop)
Представили систему цветов
![Color-1](https://cdn.sanity.io/images/2gswram9/production/e843f6d1fb9a7bbee8d8ca3b70fae1424313b48b-2272x1864.png?q=85&w=1536&fm=jpg&fit=crop)
![color-2](https://cdn.sanity.io/images/2gswram9/production/95498c205985afef76b67e16cbd5dc963d87f765-1984x1748.png?q=85&w=1536&fm=jpg&fit=crop)
Собрали систему иконок и нарисовали основой сет
![Icon-1](https://cdn.sanity.io/images/2gswram9/production/ab466dbe05fc23d3a2cd724226c3d99b174aa54a-1504x992.png?q=85&w=1536&fm=jpg&fit=crop)
![Icon-2](https://cdn.sanity.io/images/2gswram9/production/808616444ee457ecc0217971494c0baa7513ada1-3040x992.png?q=85&w=1536&fm=jpg&fit=crop)
![Icon-3](https://cdn.sanity.io/images/2gswram9/production/c9f785a23ef58368670a4081878b1d283f323d31-1504x1272.png?q=85&w=1536&fm=jpg&fit=crop)
![Icon-4](https://cdn.sanity.io/images/2gswram9/production/4beca9c71154b9b7b591c4c593d315ff6ea37565-1504x1272.png?q=85&w=1536&fm=jpg&fit=crop)
![Icon-5](https://cdn.sanity.io/images/2gswram9/production/9f72639155178f965a5b2e92052b27c567465c97-1504x1272.png?q=85&w=1536&fm=jpg&fit=crop)
Проработали интерактивные элементы
![Details-1](https://cdn.sanity.io/images/2gswram9/production/016e6e85c978938a0d804d23df398f4ecebc26f9-4592x1312.png?q=85&w=1536&fm=jpg&fit=crop)
![Details-2](https://cdn.sanity.io/images/2gswram9/production/8a0c165156762921598df6ff15fcd079f9ed5075-2272x1440.png?q=85&w=1536&fm=jpg&fit=crop)
![Details-3](https://cdn.sanity.io/images/2gswram9/production/2c17c18e501f6b02fc8cfe0438df2cc6681d3952-2272x1440.png?q=85&w=1536&fm=jpg&fit=crop)
Собрали общие компоненты на все случаи
![Components-1](https://cdn.sanity.io/images/2gswram9/production/110907bbd428e32120fe3aa5ca36d401abffdbf4-1504x2752.png?q=85&w=1536&fm=jpg&fit=crop)
![Components-2](https://cdn.sanity.io/images/2gswram9/production/f4dd7d7c7ec4d11032224f7a538d1e78be8c1052-1504x2752.png?q=85&w=1536&fm=jpg&fit=crop)
![Фильтры](https://cdn.sanity.io/images/2gswram9/production/e3a791fc1d665352165ac0a8d8e2248d4390e206-1504x2752.png?q=85&w=1536&fm=jpg&fit=crop)
![Компоненты](https://cdn.sanity.io/images/2gswram9/production/60e0eed7c0382c88ae3d7241415d220f7525eae6-4576x960.png?q=85&w=1536&fm=jpg&fit=crop)
![Info-1](https://cdn.sanity.io/images/2gswram9/production/6a7f4714ae342ef110e9d7b699ebad63e3a403f9-2148x1472.png?q=85&w=1536&fm=jpg&fit=crop)
![Info-2](https://cdn.sanity.io/images/2gswram9/production/e8cb6091f55e552f6bc3537f40a6e234231ae058-2148x1472.png?q=85&w=1536&fm=jpg&fit=crop)
Примеры
Маркерплейс
![Маркетплейс-1](https://cdn.sanity.io/images/2gswram9/production/0957c316e43ed6100bfabf815398b9ec5e4010a6-1524x2196.png?q=85&w=1536&fm=jpg&fit=crop)
![Маркетплейс-2](https://cdn.sanity.io/images/2gswram9/production/e5b4fc6bee0744a277bbd2e25cb58af38797db03-3040x2196.png?q=85&w=1536&fm=jpg&fit=crop)
Кабинет владельца сайта
![Промо-сайт](https://cdn.sanity.io/images/2gswram9/production/146ce3184565cf0537a6cce2027f730c1713df0a-1524x2196.png?q=85&w=1536&fm=jpg&fit=crop)
![Интерфейс](https://cdn.sanity.io/images/2gswram9/production/5c9fdb592ce2c8b4914346144db26a04c1d7852e-3020x2200.png?q=85&w=1536&fm=jpg&fit=crop)
Сервис рекомендаций от искусственного интеллекта и экспертов по продвижению
![В разработке](https://cdn.sanity.io/images/2gswram9/production/6e93729b51097fab0e63423ef7a5bdbd257f1674-1888x1600.jpg?q=85&w=1536&fm=jpg)
Сервис покупки медиа-траффика
![В разработке](https://cdn.sanity.io/images/2gswram9/production/6e93729b51097fab0e63423ef7a5bdbd257f1674-1888x1600.jpg?q=85&w=1536&fm=jpg)
Результат
Давайте обсудим ваш проект
на дизайн и разработку
Исследуем, проектируем, создаём дизайн и текст, анализируем метрики, вместе в разработчиками запускаем фичи и продукты
Нажимая на кнопку, я соглашаюсь с обработкой моих персональных данных
Всё получили!
Свяжемся с вами в ближайшее время