Редизайн и разработка онлайн-сервиса для ведущей шрифтовой студии Paratype

Главное о кейсе

Paratype — это ведущая отечественная шрифтовая студия с самым большим магазином шрифтов в России. Больше тысячи шрифтов, созданных в десятках разных словолитен, включая крупнейшие мировые бренды. К Paratype за шрифтами обращаются студии, агентства и дизайнеры, которые занимаются разработкой сайтов и работают с типографикой.

Прежний сайт компании устарел с точки зрения дизайна и не соответствовал ожиданиям целевой аудитории — дизайнеров, ценящих красоту, современность и стиль. Поэтому коллеги из Paratype обратились к нам за обновлением дизайна.

Задача

Провести редизайн сайта и разработать интерфейсную часть проекта. Улучшить существующий функционал и передать ассоциацию с брендом с помощью новых визуальных решений.

Решение

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

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

— Реализовали гибкую систему фильтров для удобного поиска и подбора шрифтов.

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

— Создали наглядные и интерактивные страницы шрифтов, где пользователи могут протестировать все возможности каждого шрифта.

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

Результат

Новый сайт Paratype стал более современным и удобным для пользователей. Обновлённый сайт превратился в полноценный сервис по подбору и покупке шрифтов — за счёт стильного дизайна, улучшенного функционала и навигации.

Грамотный UX/UI подчёркивает статус ключевой компании на дизайн-рынке и помогает пользователям подбирать шрифты под свои задачи.

Как проект изменил жизнь пользователей

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

Если пользователь плохо ориентируется в шрифтах, сайт помогает подобрать оптимальный вариант под конкретную задачу. Например, в каталоге есть теги «сценарии использования», которые отражают назначение шрифтов. Каждый такой тег ведёт к курированной подборке шрифтов, которые рекомендуются для конкретной цели, например для интерфейса, навигации, логотипов, книжного набора и так далее. А для тех, кто ориентируется в шрифтах самостоятельно — полностью сохранена классификация и фильтры со старого сайта.

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

Бизнес-задача и ее решение

1. Разработать UX/UI-дизайн

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

— Перешли от текстового представления шрифтов к визуальному.

Вместо простого списка названий шрифтов — внедрили крупные красивые баннеры для каждого шрифта. Такие превьюшки демонстрируют не только название, но и его начертание, форму и настроение шрифтов. Это особенно важно, если дизайнер не знает, что конкретно ему подойдёт, и подбирает шрифт по общему визуальному впечатлению.

— Добавили систему бесконечного скролла с постоянно обновляемым контентом.

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

— С помощью цветовой гаммы помогаем подбирать шрифты, ориентироваться на сайте и передавать ассоциацию с брендом.

Использовали нейтральные тона для фона и основных элементов. Это позволило сделать акцент на самих шрифтах. При этом сохранили фирменный красно-оранжевый цвет Paratype — выделили им важные элементы интерфейса. Именно эти акцентные выделения и создают ассоциацию с брендом, а также помогают пользователям быстрее ориентироваться на сайте.

— В каталоге реализовали удобную систему фильтров и тегов.

Все основные инструменты поиска вынесли в верхнюю часть каталога. Пользователи могут фильтровать шрифты по языкам, типографическим возможностям и по назначению, например для заголовков или для основного текста.

Добавили специальные теги назначения, которые помогают подбирать шрифты для конкретных задач. Например, если выбрать тег «для интерфейсов», пользователь получит подборку шрифтов, оптимальных для использования в веб-интерфейсах.

— Страницы шрифтов сделали наглядными и интерактивными

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

— Обновили ключевую функцию сервиса — тайптестер и сделали этот инструмент нативно понятным.

Теперь с помощью гибких настроек пользователи могут поэкспериментировать со шрифтом или гарнитурой перед покупкой.

2. Сделать адаптивную мобильную версию

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

На главной странице мобильной версии сохранили визуальное представление шрифтов. Баннеры адаптировали под меньший экран, но оставили на них всю ключевую информацию.

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

Страницы шрифтов содержат те же элементы, что и полная версия сайта. Некоторые блоки, например список начертаний, можно раскрывать по тапу.

Крафт (мастерство), реализация, технические детали

Тайптестер — ключевой инструмент для оценки шрифтов

Это один из самых важных функционалов сервиса. Он помогает протестировать шрифт до покупки и оценить, как он будет выглядеть в конкретном проекте. Мы обновили инструмент и сделали его интуитивно понятным.

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

Какие есть возможности у тайптестера:

— ввод текста для тестирования шрифта в реальных условиях;
— изменение размера шрифта, межстрочного интервала и выключки текста;
— настройка ширины, жирности и других параметров для вариативных шрифтов. Эти параметры можно анимировать, что позволяет создавать динамические эффекты;
— включение и выключение OpenType-функций: лигатуры, альтернативные знаки, минускульные цифры;
— изменение цвета текста;
— применение разных настроек для разных блоков текста, чтобы можно было их сравнить;
— вёрстка текста в несколько колонок.

Адаптировали тайптестер для мобильных устройств

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Перед началом работы над проектом много общались с заказчиком и провели аудит старого сайта Paratype. В результате этих работ выявили несколько существенных недостатков прежнего сайта, несмотря на богатый функционал.

— Было сложно оценивать шрифты.

Вся информация на сайте подавалась в текстовом виде. На главной странице шрифты представлялись только названием и двумя буквами — «Аа». Это не давало полного представления об их внешнем виде.

— Навигация по сайту была сложной и неинтуитивной.

Меню располагалось слева, и не все пользователи обращали на него внимание. Шрифты раскладывались по множеству категорий и подкатегорий, что значительно усложняло поиск.

— Не было мобильной версии сайта.

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

«Было очень обидно за старый сайт: такая подробная классификация шрифтов и такая многогранная система фильтров есть только в нашем магазине, но большинство пользователей о них даже не подозревали. Магазин был идеально оптимизирован для тех, кто хорошо знал, за каким именно шрифтом пришёл. А если человек не был уверен, то интерфейс не помогал ему сделать выбор», — слова Александры Корольковой, арт-директора Paratype.

Скриншоты