7360 1160x620 - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

Руководство по цифровому дизайну в Guardian

Вступление

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

Сайт Guardian состоит из множества обложек и статей.

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

Обложки состоят из боксов – они позволяют логически группировать истории по темам.

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

Боксы состоят из модульных карт истории. Они очень гибкие и могут расширяться и сжиматься в зависимости от количества добавленных в них историй.

Мыслить, выходя за новостные рамки. Дизайн-система Guardian
Кикер — Guardian Headline Bold
Заголовок — Guardian Headline Medium
Подзаголовок — Guardian Text Egyptian
Метаинформация — Guardian Text Sans

Карточки могут отображать изображение, кикер, заголовок, подзаголовок и метаинформацию.

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

Это выбор типов карт. Каждый тип карты разработан, чтобы передать тон истории.

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

Трэшеры – это специально разработанные контейнеры, обычно рекламирующие одну статью или серию.

Сетки и интервалы

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

Сетка обеспечивает основу и объединяет то, как мы размещаем информацию на всех наших цифровых платформах.

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

Сетка десктоп версии основана на столбцах 60px с промежутками 20px.

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

Мы используем четыре фиксированных размера сетки для больших экранов:
Wide – 1300px
LeftCol – 1140px
Для настольных ПК – 980px
Планшет – 740px

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

Мы используем адаптивную сетку на мобильных устройствах с настройками:
Phablet – 740px
MobileLandscape – 480px
MobileMedium – 375px

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

Использование бренда

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

The Guardian имеет две визуализации своего бренда.

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

Логотип и раундель всегда выровнены вверху справа или внизу справа.

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

Раунд (раундель) служит упрощенным выражением бренда – часто используется для обозначения контента Guardian как на платформе, так и за ее пределами. Для получения дополнительной информации посетите центр бренда Guardian.

Типографика

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

У Guardian есть две основные гарнитуры и три дополнительные.

  • Guardian Headline (core)
  • Guardian Titlepiece (core)
  • Guardian Text Egyptian
  • Guardian Display Sans
  • Guardian Text Sans
Мыслить, выходя за новостные рамки. Дизайн-система Guardian

Guardian Headline предназначен для обеспечения оптимального чтения на всех платформах. Он используется на сайте и в приложении для заголовков, предоставляя уникальный характер.

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

Заголовок Guardian было взято из логотипа Guardian и используется для обозначения разделов и указателей. Его необходимо использовать осторожно и правильно, он передает жирный и яркий стиль гарнитур!

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

Легко читаемый тип текста дополняет наше семейство дисплеев.

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

Мы используем sans serif для текста небольшого размера или мета-информации.

Цветовая палитра

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

Наша цветовая палитра позволяет нам быть смелыми и игривыми. Все со вкусом и чувствами.

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

Графические элементы

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

У нас есть два стиля кнопки. При выборе стиля учитывайте ширину: ромб более смелый, круглая кнопка более тонкая. Иконки помогают читателю ориентироваться.

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

Мы используем выделение для создания иерархии и выделения в дизайне.

Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

Оригинал: theguardian.com

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

История о том, как Dropbox перешел на Figma и структурировал свою дизайн-систему

Опыт перехода дизайн команды Dropbox на Figma