Цей матеріал може бути корисним як професійним дизайнерам інтерфейсів, так і розробникам, чиї пізнання в графічних пакетах знаходяться нижче рівня «просунутого користувача».
Отже, перед нами стоїть завдання: спираючись на готові рішення у відкритому доступі, максимально оптимізувати витрачену працю на розробку програми в стилі Google Material Design.
До речі, якщо ви використовуєте Figma, я рекомендую звернути увагу на наші готові дизайн-системи. Вони допомагають фрілансерам завершувати більше замовлень на місяць, програмістам дозволяють створювати красиві додатки самостійно, а тимліди «пробігають» спринти швидше, використовуючи готові дизайн-системи для командної роботи.
А всі у вас серйозний проект, то наша команда готова розгорнути дизайн-систему всередині організації на базі наших напрацювань і підігнати під конкретні завдання, використовуючи Figma. Web/desktop, так і будь-який мобайл. З React/React Native ми теж знайомі. Пишіть у Т: @kamushken
Стадія раз: прототипування
Воно потрібно, як мінімум, для представлення обсягів програми і складу екранів. Дуже допомагає в продумуванні tap/click-шляхів (переходи між екранами). Я віддаю перевагу Axure, оскільки багато hot-keys зроблені 1 в 1 як в Adobe Photoshop (про інші схожі продукти читайте в інших статтях (у розділі «Дизайн» кожен третій пост на цю тему).
У нього потрібно встановити три бібліотеки:
Android_MaterialDesignV1.1 (Я.диск)
Досить наворочена бібліотека, яка дозволить скласти прототип по всіх гайдлайнах GMD. Особливість: багато елементів вже «приведені в дії». Наприклад, pull to refresh працює у скомпільованому html. Я думаю підійде більше тим, хто хоче в прототипі вже «покликати».
material-design-8 (Я.диск)
Легша і простіша бібліотека. Мінімум готових компонентів, але все основне є: чорна і світла теми, списки, картки, кнопки, таби, діалоги, слайдери тощо... Віддаю їй перевагу, оскільки чим менше вибору, тим швидше знаходиться потрібний елемент і перетягується в прототип.
google-material-design-icons (Я.диск)
... 750 векторних іконок від Google. Звичайно можна використовувати і дефолтний для Axure: Font awersome. Однак, реальні іконки додадуть реальності прототипу.
upd: камрад ShLShepherd ділиться своєю власною колекцією векторних material іконок (взято з каментів)
Стадія два: дизайн
Як я згадав вище, я віддаю перевагу графічним пакетам Adobe. Значить потрібно відізвати до дизайнерського ком'юніті. Варто пошукати ентузіазтів, які вже зібрали GMD UI kit, в якому елементи розставлені і виглядають відповідно до специфікації гугла. Відступи, шрифти, розміри і т. п. З безкоштовних мені сподобалося два:
sepia_ui_kit (Я.диск 142mb)
Є все необхідне, але мало кастомних ідей. Тим не менш, промальовано всі екрани 1 в 1, які сам Гугл використовував у своїй офіційній документації по GMD. Мінус тільки в тому, що довго шукати за підпапками потрібний елемент у власному окремому вихіднику.
Cooking (Я.диск 434mb)
Цей ui kit навпаки надмірно багатий кастомними ідеями. Але автори трохи перегнули планку. Очевидний педант у цьому вихіднику зауважує, що як мінімум інтенсивність шрифту подекуди не збігається з документацією. Є небагато графіків, фривольних кнопок. Допоможе «скреативити» власний елемент, але залишитися в стилі.
Суперська навігація: з першим є посилання в окремий вихідник по кожному екрану. Достатньо зробити подвійний клік. Просто чудово!
Стадія три: розробка
Ваш безвідповідальний дизайнер не хоче віддавати всі іконки окремими файлами строго за специфікаціями? Я Вас дуже розумію. Йдіть на materialdesignicons.com і спокійно скачуйте або SVG з потрібною іконкою, або повноцінний zip-архів з png під всі дозволи смартфонів. Можна знайти і не тільки сети гуглівських рідних іконок. У базі багато кастомних піктограм, виконаних членами дизайнерської спільноти. Як говориться «Це Безкоштовно, і це завжди буде Безкоштовно». Безпосередньо для девелоперів вдалося взагалі знайти свято готових рішень (github). Наприклад таких:
Або ось таких:
Повинно вистачити...
Радий, якщо Вам знадобився цей пост! Ну а якщо хочете, почитати як я проектував GMD на десктопний продукт і які висновки зробив, то почніть з першої частини (всього їх чотири).
