Сегодня шрифту Гельветика шестьдесят один год

По этому поводу напомню об отличной документалке о типографике и шрифте — «Гельветика». Интересный рассказ и интервью со многими известными дизайнерами, включая Майкла Бейрута, Эрика Шпикерманна и Массимо Виньелли.

https://vk.com/video-36209322_164941158

#awd_film #awd_movie #awd_video

Как в Google создавали обновлённое оформление приложений

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

Описание Material Theming: material.io/design/material-theming
Скетч-плагин Material Theme Editor: material.io/tools/theme-editor/

Рассказ о том, как команды Gmail, Google News, Google Play и Google Home использовали Material Theming для обновления дизайна своих продуктов (английский): material.io/articles/how-google-created-a-custom-material-theme.html

#awd_article #awd_tool

Google показал обновлённую дизайн-систему Material Design 2.0 на конференции I/O — https://material.io/. Это серьёзное изменение визуального стиля и расширение инструментария, первые звоночки которого появились ещё в марте (https://www.theverge.com/2018/3/7/17092800/android-p-new-design-changes-features).

Визуально Android P продолжил сближение с iOS (различия между платформами стираются с обеих сторон):

1. Много скруглений, что сильно перекликается с iOS 10-11 (https://www.theverge.com/2018/3/7/17092800/android-p-new-design-changes-features). Возможно, это сделано с прицелом на безрамочные телефоны, которых становится всё больше — это лучше сочетается с их скруглёнными краями экрана.

2. Цвет настроения — белый (https://uxdesign.cc/previewing-material-design-2-0-ec0215f0588f). Больше нет яркой шапки приложения и серых подложек, сплошное белое пространство с минимумом акцентов. В каких-то приложениях Google встречается цветная нижняя панель (https://cdn-images-1.medium.com/max/2000/1*Tu6q1DcA1aGpUDKoVG4Yzw.png) и сама идея акцентных цветов не уходит из гайдлайнов (https://material.io/design/color/the-color-system.html) но тенденция явная (включая веб — https://www.engadget.com/2018/04/25/google-gmail-redesign/ и https://www.engadget.com/2018/05/10/google-drive-redesign/).

3. Навигация по операционке в духе iPhone X (https://storage.googleapis.com/gweb-uniblog-publish-prod/original_images/New-System-Navigation_03.gif). Паттерн «рукоятки» (https://uxdesign.cc/handlebars-in-ui-design-4b36af67733b?gi=aa27f4f2efcd) вместо кнопки «домой» с почти аналогичной механикой, отказ от отдельной кнопки списка приложений (также вызывается свайпом снизу), ну и ставшая официальной в последние годы нижняя панель навигации. Всё это помогает управлять современными телефонами, которые стали не только больше, но ещё и выше за счёт безрамочности. Кстати, в некоторых новых приложениях Google инструменты навигации почти везде внизу (https://www.androidpolice.com/2018/04/25/hands-google-tasks-another-beautiful-disjointed-way-get-things-done-google/). Осталось упростить кнопку «назад» (она уже пропала с домашнего экрана).

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

С другой стороны, теперь Material Design поддерживает более продвинутую тематизацию, чем просто замена цвета — https://material.io/design/material-theming/. Можно менять шрифтовую сетку, скругления элементов интерфейса (точнее, даже их форму — например, можно сделать диагональные скосы), иконки. К этому прилагается плагин для Sketch — https://material.io/tools/theme-editor/ (можно быстро примерить стиль на свой макет) и библиотека иконок — http://material.io/icons (в пяти стилях). Недавно обновлённые продукты Google также используют этот подход — https://material.io/articles/how-google-created-a-custom-material-theme.html (хотя их стиль как раз выхолощенный).

И самое главное — теперь это полноценная дизайн-система с компонентами в коде (https://material.io/develop), а не просто масштабные гайдлайны и шаблоны к ним с какими-то разрозненными примерами. Эти компоненты также поддерживают тематизацию, так что система выглядит целостной (сами компоненты начали появляться год назад). Новый сайт Material Design (https://material.io/) сделал фокус на две составляющие — дизайн и разработка — более явным. Они также запустили давно обещанный инструмент Gallery (https://material.io/tools/gallery/), аналог Zeplin и Wake. Но это как-то вяло на фоне обещаний, данных после покупки Pixate (основатель ушёл в Figma) и Form (Гугл подтверждает репутацию сгнаивателя купленных компаний).

#android #material

Из других интересных деталей анонса:

1. Четыре цвета логотипа как основа визуального языка (https://www.fastcodesign.com/90171295/google-just-remade-its-brand-again). Это хорошо получилось в Gmail для веба — иконка «+» и цвета индикаторов чётко наследуют идею.

2. Новый стиль иллюстраций Google (https://www.androidpolice.com/2018/04/25/hands-google-tasks-another-beautiful-disjointed-way-get-things-done-google/).

3. Похоже, для своих продуктов компания перейдёт на шрифт Google Sans — https://9to5google.com/2018/05/09/google-sans-vs-product-sans/.

4. Самоограничения на использование телефона и отдельных приложений (https://s.aolcdn.com/hss/storage/midas/26f53c50aaa835c66e937ab98714abbc/206359888/DigitalWellbeing_Blog.gif из https://www.engadget.com/2018/05/09/android-p-features-that-matter/ и https://www.engadget.com/2018/05/08/google-android-p-actions-slices-predictive-apps/). Пользователь сам задаёт их, после этого приложение становится чёрно-белым, мотивируя прерваться. В ночное время телефон полностью переходит в такой режим.

5. Проще настраивать частоту уведомлений (https://www.engadget.com/2018/05/09/android-p-features-that-matter/). Если пользователь несколько раз скрывает уведомление от приложения без прочтения, Android предложит скрыть его вообще. Наушники Pixel Buds могут зачитывать некоторые уведомления голосом (https://www.engadget.com/2018/05/09/google-pixel-buds-let-you-customize-which-apps-send-spoken-notif/).

6. Интеграция сторонних приложений в результаты поиска и контекстные меню в качестве Slices (https://s.aolcdn.com/hss/storage/midas/9a19c2df03d0e18c4dac34b7630ccfce/206359885/Slices_Blog.gif) и поиск по выделенному слову (https://o.aolcdn.com/images/dims?resize=980%2C640&quality=100&image_uri=https%3A%2F%2Fs.aolcdn.com%2Fhss%2Fstorage%2Fmidas%2F6c9302a32a0c5a3baf09628da8c5fbca%2F206360669%2F_MG_1041.jpg&client=cbc79c14efcebee57402&signature=e0c3469b7613c176e864832f38b65ad71d15ac59).

7. Google Assistant может сам позвонить и забронировать ресторан (https://www.engadget.com/2018/05/08/pretty-sure-googles-new-talking-ai-just-beat-the-turing-test/).

8. Мобильный Сhrome поддержит дополненную реальность (https://www.engadget.com/2018/05/09/google-augmented-reality-chrome/).

9. Экспериментальная камера Google Lens научилась делать больше (https://www.engadget.com/2018/05/09/google-lens-hands-real-world-copy-and-paste/) и станет частью стандартного приложения (https://www.engadget.com/2018/05/08/google-integrates-lens-camera-app/).

Бета-версию уже можно поставить на некоторые телефоны — http://android.com/beta. Финальная версия появится осенью. Засучиваем рукава, работы будет много.

#android #material

Дэвид Карсон, «крёстный отец Гранжа», был основателем и арт-директором культовго журнала Ray Gun (с которого был скопирован Птюч). Однажды Дэвиду не понравилась статья Брайана Ферри и он напечатал её символьным шрифтом Zapf Dingbats.

#awd_note

Art Palette

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

https://artsexperiments.withgoogle.com/artpalette/

#awd_tool #awd_color