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

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

Вступление

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

Типографика

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мыслить, выходя за новостные рамки. Дизайн-система Guardian

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

Свежие вакансии
                        MYTONA MYTONA Motion-designer Полная Санкт-Петербург
                        Beta Beta Senior / Middle Web Designer Офис Москва
                        Traffic Time Traffic Time Дизайнер-сборщик страниц на платформе GetCourse Удаленно Москва
                        Digital agency aim Digital agency aim Middle UX/UI дизайнер Удаленно Брянск от 80 000 ₽
                        RJ Games RJ Games UI Motion Designer / Animator Удаленно Москва
Все вакансии

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

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

1
Добавить комментарий
Похожие записи

Организация пространства в дизайне. Отступы, сетки и лейауты

В этом руководстве мы рассмотрим основы определения пространственных базовых единиц и создание правил отношений с помощью сеток

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

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

Хардкорное применение Figma Auto layout — большой гайд

В этой статье я покажу хардкорное применение последнего нововведения в Figma –Auto layout