Ancestry®

Клиент

Ancestry®

Год

2019

Услуги

Веб дизайн

Дизайн система

Ancestry® – крупнейшая американская генеалогическая компания с долгой и богатой историей. Это огромная экосистема со множеством подразделений и самым большим в США архивом данных. Перед нами стояла масштабная задача по созданию концепта универсальной дизайн-системы, которая объединила бы все продукты и услуги Ancestry®. Необходимо было разработать библиотеку компонентов, продумать правила взаимодействия элементов и собрать все это в удобный и подробный стайл-гайд.

Концепт и компоненты

Так как продукты Ancestry® рассчитаны на самых разных пользователей, ключевым для нас стал принцип доступности. Мы обновили логотип, сделав его проще и геометричнее. За основу же дизайн-системы взяли визуальный стиль и упорядоченную структуру библиотечного архива, где легко найти нужную информацию.
Мы освежили цветовую палитру, присвоив каждому направлению продукта собственный набор цветов. У шрифтов использовали минимум шагов для кеглей, чтобы упростить работу с ними дизайнерам и разработчикам. В пару к строгому современному гротеску добавили характерную и утонченную антикву. В дизайн-системе Ancestry используется один набор сеток, он тщательно продуман и предусматривает легкую работу с контентом как для промо-лендингов, так и для интерфейсов.

Микробрендинг

Помимо создания дизайн-системы, была задача повысить узнаваемость внутри интерфейсов. Для этого мы доработали ключевой символ Ancestry — лист. Мы упростили его форму и добавили варианты использования этого элемента как в визуальную коммуникацию, так и в интерфейсы, например, в качестве формы для фотографии аватара. Лист работает на разных фонах, в разных размерах и с дополнительным элементом — ножкой-палочкой.

Иконки

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

Иллюстрации

Для Ancestry® мы разработали три стиля иллюстраций. В каждом соблюден баланс между уникальностью и универсальностью, чтобы упростить дизайнерам отрисовку новых изображений. Основной стиль работает по принципу конструктора – изображения можно адаптировать и дорисовывать, собирая новые из готовых элементов. Второй предназначен для подробных одноцветных иллюстраций. Третий предполагает низкую детализацию пиктографических изображений.

Карточки

Мы добавили оригинальные решения и для редакционного контента Ancestry®. Была разработана система карточек, которая работает как набор модулей с бесконечным количеством комбинаций. Каждый компонент может быть совмещен с другим, создавая новый элемент.

Лейауты

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