Дизайн-джем #14: изучение Tesla UI Kit и дизайн-систем от Apple, Uber и Microsoft, а также полезные ресурсы по теме

В систематическом дайджесте от Redmadrobot Design Lab.

Мало что впечатляет роботов так, как мощь дизайна. Наши датчики находятся в постоянном поиске следов творческой мысли, которая выражается в самых разных областях. Все самые интересные дизайн-находки мы отправляем на наш Telegram-канал Design Jam, а спустя две недели они попадают в наш тематический дайджест.

В прошлом выпуске мы вдохновились работами талантливых иллюстраторов и художников и изучили полезные ресурсы по теме дизайна сайтов. Сегодня окунёмся в безграничный мир упаковки товаров, но сначала поговорим про дизайн-системы: изучим наработки крупных компаний, пощупаем шаблоны и дизайн-элементы в Figma, потестим сервисы и почитаем полезные книги по теме. Скучно не будет 🤖

Чтобы понять, как устроен дизайн продукта, нужно разложить всё по полочкам. В этом помогает дизайн-система — библиотека из сеток, шрифтов и разных UI-элементов.

К сожалению, такой «брендбук» по проектированию интерфейса есть не у всех компаний — чтобы его создать, нужно систематизировать большое количество информации. К счастью, многие компании и сервисы, у которых он уже есть, щедро выкладывают его в открытый доступ.

Например, на сайте Design Systems For Figma опубликованы дизайн-системы мировых компаний и сервисов: Uber, Atlassian, Apple, Slack, Figma и других. А ещё, их можно загрузить сразу в Figma, чтобы изучить все компоненты. Тот случай, когда можно подробно узнать, откуда растут ноги у любимого продукта.

Дизайн-системы есть не только у частных сервисов, но и у государственных систем США. На сайте U.S. Web Design System подробно описаны все визуальные компоненты, которые используются при их проектировании, а для практического изучения есть скетч-файл с библиотекой элементов.

Если хочется больше экспериментов, то сравните её с дизайн-системой Microsoft. Скорее всего, вы найдёте больше десяти отличий.

Изучение дизайн-систем в самом разгаре, и чтобы у вас не закончилось топливо для экспериментов, мы подкинем парочку ресурсов в костёр творчества 🤖

Первым делом загляните на сайт проекта Set Product на котором более 1000 компонентов и около 120-ти шаблонов для создания дизайн-систем, а после изучите Tesla Ui Kit. Все элементы можно пощупать в Figma.

Фоном почитайте блог про новые шаблоны UI-китов, дизайн-систем и UX-инструментов. И зацените статью про лучшие плагины, на которые точно стоит обратить внимание в конце 2020 года.

Мы уже изучили дизайн-системы Apple, Uber, Microsoft и даже правительственных сервисов США, а ещё успели пощупать шаблоны и элементы в Figma, и поговорили про лучшие плагины для этого сервиса. Но это ещё не всё.

Если вы хотите уже сейчас начать создание дизайн-системы, то это можно сделать с помощью Eva Design System. Сервис предоставляет гибкие инструменты, например, автоматический подбор цветовых оттенков для интерфейса. А на сайте сursorOS можно создать курсор своей мечты.

Если же свою дизайн-систему создавать вы ещё не готовы, но нейросеть требует пищи для размышлений, то можно проверить свои знания по теме с помощью чек-листа или подписаться на рассылку, которая посвящена отечественным дизайн-системам.

Завершаем тему дизайн-систем полезными книгами. За подборку спасибо старшему рободизайнеру Кате Соседовой.

Начнём с книги “Atomic Design” от веб-дизайнера Брэда Фроста о проектировании надёжных дизайн-систем. Он изучает эффективность дизайн-библиотек и показывает, как можно оптимизировать разработку дизайн-систем внутри команды. Например, автор описывает методологию, которая представляет дизайн-элементы в виде продуманных иерархий, что упрощает проектирование.

У книги “Design Systems” целых пять авторов и все они делятся личным опытом из области планирования, проектирования, создания и внедрения дизайн-систем.

А книга от компании Adobe “Hack the Design System” рассказывает, как спроектировать и масштабировать дизайн-систему внутри крупной организации. Авторы делятся опытом Airbnb, IBM, Microsoft и других компаний. И чтобы закрепить всё то, что мы узнали из подборки, почитайте подробную статью про дизайн-системы от основателя Tilda Publishing Никиты Обухова.

Ну что ж, пришло время поговорить об упаковке! Начнём мы с Amazon. Ежегодно компания отправляет по всему миру более 3 млрд коробок с товарами, и на каждой из них красуется улыбающийся логотип.

Чтобы картон не оказывался на улице, а работал на бренд даже после доставки, Amazon выпустила руководства по превращению коробки: в форт, автомобиль, ракету, костюм робота, мельницу для мини-гольфа и домик для кота.

Всё, что требуется для сборки конструкции: ножницы и немного клейкой ленты. Тот случай, когда изолента не только держит картон, но и связывает клиента с брендом.

Анбоксинг — это не только жанр на YouTube, но и способ взаимодействия покупателя с брендом. Например, распаковка подарочного набора видеоигры передаёт её атмосферу ещё до запуска. Это настолько увлекательный опыт, что мы готовы смотреть об этом видео.

Если хотите узнать, в чём магия, то посмотрите на распаковку подарочного набора игры The Last of Us 2. Первым делом нас встречает ржавый ящик весом в 4,5 кг, а когда мы его открываем, то видим приставку, диск с игрой, виниловую пластинку с саундтреком, джойстик, наушники, куклу главной героини, рюкзак, футболку, турецкий оберег и живой мох.

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

7th Gen Laundry Care — экологичный порошок для стирки белья в форме капсул и таблеток. Он упакован не в привычную нам картонную коробку, а в пузырёк из биоразлагаемых материалов. Схожим образом поступила и компания Earth Suds. Она выпускает продукцию для душа в упаковке из органики. Благодаря своей экологичности, она особенно популярна у туристов.

Исключительный случай, когда можно не только постирать вещи и помыть голову, но и очистить свою карму заботой о природе. А больше подобных примеров с впечатляющей упаковкой можно изучить на портале The Dieline.

Качественная упаковка привлекает к себе внимание не только на прилавке магазина, но и в вебе. Сайт крафтовой газировки The Carbonation доказывает это на деле: производитель оживил фирменную айдентику бренда при помощи плавных анимаций, гармонии простых форм, выверенной сетки и ярких контрастов 🖤

Чтобы общаться с покупателем на одной волне, бренды действуют подобно человеку: развивают уникальный характер, внешний вид и стиль общения — идентичность. Чтобы понять, как это делать и причём тут упаковка, мы приберегли ссылку на крутую статью по теме. В ней рассматриваются 5 причин, почему важен бренд и описываются 8 шагов к его созданию.

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

Вдохновляйтесь, творите и подписывайтесь на наш Design Jam в Telegram. Да пребудет с вами сила роботов!

#rmr #rmrdesignlab #design_system #branding #packing