| title | slug | metatags | authors | ||||
|---|---|---|---|---|---|---|---|
Olivero |
wiki/olivero |
|
|
Olivero — экспериментальная тема оформления Drupal поставляемая с ядром начиная с версии 9.1.0. Тема названа в честь Рейчел Оливеро (Rachel Olivero).
Данная тема находится в разработке и готовиться как замена Bartik. Это фронтенд тема для сайта, которая будет включаться по умолчанию при установке стандартного профиля.
Текущая тема оформления по умолчанию - Bartik, не обновлялась с релиза Drupal 7 (январь 2011). Дизайн Bartik устарел и отстаёт от возможностей Drupal.
Основные приоритеты и цели создания Olivero:
- Современный дизайн. Задача создать новую стандартную тему оформления для Drupal, которая будет ощущаться современно. Элементы дизайна, такие как тени и градиенты, используются более обдуманно, анимации и цветовая палитра были тщательно продуманы.
- Поддержка современных возможностей Drupal. Тема должна поддерживать все современные возможности Drupal, такие, как: многоуровневые меню, встраиваемые медиа, Layout Builder и многое другое.
- Полное соответствие WCAG AA. Тема разрабатывается с целью полностью удовлетворить стандарт WCAG AA. Разработчики тесно сотрудничают с экспертами по «доступности» (a11y) и командой Drupal Accessibility, для того чтобы тема удовлетворяла всем требованиям Drupal по доступности.
Первым делом было обсуждение среди участников Drupal сообщества. Оно показало что новая тема для Drupal востребована и вызывает интерес.
Когда мы поняли что предложенная идея тепло принята сообществом, мы собрали группу заинтересованных лиц, известных в сообществе, которые помогали бы нам на пути создания новой темы. Следующие участники были выбраны:
- Dries Buytaert (@dries) — создатель и лидер проекта Drupal.
- Angie Byron (@webchick) — коммитер в Drupal ядро и продуктовый менеджер.
- Lauri Eskola (@lauriii) — коммитер в Drupal ядро и ответственный за фронтенд.
- ckrina (@ckrina) — специалист по юзабилити Drupal.
- Gábor Hojtsy (@gaborhojtsy) — коммитер в Drupal ядро, продуктовый менеджер и координатор инициатив.
В процессе исследования мы, совместно с выбранными заинтересованными сторонами, пытались идентифицировать каким должен быть визуальный дизайн. Мы провели опрос, в котором нужно было разместить баллы за один из двух вариантов в различных направлениях развития дизайна.
Некоторые из них имели перевесы в одну сторону, тогда как некоторые показали что необходимо соблюдать баланс.
На основе результатов проведённого опроса мы создали следующее представление «голоса и тональности» новой темы:
- Формальное оформление.
- В светлых и ярких тонах.
- Современное оформление, вместо более традиционных.
- Сохранение баланса между доступностью и официальным видом.
- Добавить оригинальности, но с некоторыми ограничениями.
- Цветовая палитра должна быть холодных оттенков.
- Необходимая высокая контрастность, но с некоторыми ограничениями.
- Лёгкая (для восприятия).
Были установлены следующие принципы, благодаря собранной информации и обсуждениям, которые должны быть использованы как при разработке, так и в дальнейшем, при внесении изменений.
- Доступность. Соответствие стандарту WCAG AA — приоритетная задача для дизайна. Макет, цвета и возможности должны быть доступными и приятными для всех.
- Простота. Следует избегать ненужные визуальные элементы, цвета, эффекты и сложности.
- Современность. Использовать все преимущества и возможности современных браузеров и паттернов взаимодействий.
- Концентрированность. Должна обладать высоким контрастом, насыщенными цветами, иметь негативные пространства, для того чтобы привлекать внимание к самому главному на странице.
- Гибкость. Должна быть возможность настраивать тему под себя при помощи различных настроек.
После того как мы установили принципы и «голос и тональность» будущей темы, мы предоставили 3 мокапа на основе собранных данных. Данные варианты были представлены заинтересованным лицам, для того чтобы получить обратную связь.
Целью было создать систему дизайна, которая позволит быть эффективной и гибкой, позволит мейнтенерам расширять и менять дизайн темы в будущем.
Система дизайна всё ещё находится в разработке. Она будет корректироваться и адаптироваться под нужды сообщества и Drupal в процессе разработки.
Была разработка сетка для системы дизайна.
Вертикальный ритм описывает визуальный ритм элементов при прокрутке страницы пользователем, основываясь на таких моментах как размер шрифта, высота строк и отступы между параграфамИ, заголовками и прочими элементами.
Была выведена высота вертикального ритма для значения VRU (vertical rhythm unit), после чего были выработаны размеры и отступы для различных элементов.
- 1 VRU = 9px
Отступы типа padding и margin тесно связаны со значением VRU и сеткой, для того чтобы создать сбалансированный дизайн, который предсказуем и легко масштабируется.
Типографика основана на сканировании размера шрифта, высоты линии и отступов, чтобы всё было стабильно во всём дизайне. Таким образом, основной размер шрифта равняется 18px. Отталкиваясь от этого значения, были выведены размеры заголовков, мета-элементов, цитат и прочих элементов интерфейса.
Дизайн использует два шрифта — Metropolis для заголовков и Lora, в качестве основного шрифта. Оба шрифта имеют лицензию SIL Open font License 1.1, что позволяет удовлетворить требования Drupal по совместимости лицензий.
Цветовая палитра создана с использованием яркого голубого в качестве основного цвета, а также нейтральных серых тонов, для того чтобы сохранить баланс. Тёмная тона были выбраны для того чтобы помощь в решении вопроса доступности.
Шапка была спроектирована таким образом, чтобы можно было иметь как можно больше вариаций для заголовков, текста и логотипов. Различные версии шапки отображаются в зависимости от того что выбрал пользователь в настройках.
При прокрутке вниз, шапка сворачивается в кнопку-гамбургер, позволяя пользователю иметь доступ к навигации на длинных страницах.
У темы имеется есть возможность принудительно использовать кнопку-гамбургер для навигации. Это поможет тем, у кого много пунктов меню первого уровня.
Olivero также имеет поддержку вложенных пунктов навигации!
Настройки темы позволяют менять цвет фона и ширину (если это требуется) для того чтобы соответствовать любому варианту брендирования.
Цель кнопок — помочь пользователю быстро определить различные действия. Для темы был разработан стиль основной кнопки с залитым фоном, а также второстепенный стиль с прозрачным фоном и рамкой.
Элементы формы простые и современные. Цель была чтобы элементы форм ощущались как часть дизайна, при этом они должны быть отличимы, удобный в использовании и доступными. У элементов форм введена отличительная черта — левая рамка. Метки элементов размещаются над элементами для избежания недопонимания.
Все поля форм имеют схожее оформление, они имеют все необходимые оформления состояний, такие как: фокусировка, отключенный элемент, отображение ошибки и т.д.
Строки-разделители таблиц сведены к минимуму для облегчения чтения. Тема поддерживает адаптивные таблицы.
Тема предоставляет сайдбар регион, в котором можно выводить похожие материалы или другие утилитарные блоки. Данные регион будет «плавать» рядом с основным содержимым. Это позволит содержимому быть насыщенным и более значимым в отличие от прошлого варианта, где была возможность использования двух сайдбаров, и происходила конкуренция за пространство.
Тема полностью поддерживает языки «справа-налево».
Системные сообщения оформлены чисто и легко заметны. Оформление сообщений было разработано таким образом, что яркие цвета привлекают к ним внимание, но при этом не мешают их прочтению. Для различных типов сообщений, используются различные иконки.
Хлебные крошки располагаются вверху страницы над основным заголовком, так, чтобы пользователи с легкостью могли понять что это хлебные крошки.
На мобильных устройствах данный элемент отображается слева-направо, и пользователи могут свайпать его, чтобы увидеть всю цепочку.
- Olivero — инициатива, drupal.org
- Демонстрационный сайт, Tugboat
- Исходники дизайна, Figma