Being Material
Акбашев Джалиль
gBei
Material
n
WWW.REDMADROBOT.RU 2015
Долгое время информацию
получали с листа бумаги
WWW.REDMADROBOT.RU 2015
Типографика
Искусство расположения/создания
композиции из наборного материала
на плоскости листа.
WWW.REDMADROBOT.RU 2015
Типографика
Искусство расположения/создания
композиции из наборного материала
на плоскости листа.
WWW.REDMADROBOT.RU 2015
WWW.REDMADROBOT.RU 2015
Скевоморфизм
Направление в дизайне интерфейсов,
целью которого является графическая
имитация объектов реального мира
WWW.REDMADROBOT.RU 2015
Скевоморфизм
Направление в дизайне интерфейсов,
целью которого является графическая
имитация объектов реального мира
Сложность в разработке
Идет вразрез с принципом — как
можно меньше интерфейса
WWW.REDMADROBOT.RU 2015
Плоский дизайн
Минималистичный подход к дизайну
объектов, который подчеркивает
удобство использования
Много шума вокруг и
хочется быть
более сфокусированным
Люди привыкли к
определенным символам
и их можно упростить
M AT E R I A L D E S I G N
Давным-давно в Гугле…
majorgeeks.com zdnet.comcomputer.howstuffworks.com
Gmail.com Android Mobile Web
2011
Проект Кеннеди
theverge.com
loliboat.wordpress.com
Holo
smartphoneblogging.com
Gmail for Android
(Holo)
Gmail.com
(Kennedy)
2014
M AT E R I A L D E S I G N
WWW.REDMADROBOT.RU 2015
Основная цель
Создать визуальный язык, который комбинирует
классические принципы хорошего дизайна
с инновациями и возможностями последних
технологий и науки.
Согласованный опыт

на всех платформах
Согласованный опыт

на всех платформах
Более гибкая система

дизайна для Android
Согласованный опыт

на всех платформах
Более гибкая система

дизайна для Android
Рациональный подход

к дизайну интерфейса
Тактильные
поверхности
Полиграфический
дизайн
Осмысленная

анимация
Адаптивный

дизайн
Тактильные
поверхности
Поверхность?
Поверхность?
Поверхность?
Да. Нет.
Поверхность?
Being material
WWW.REDMADROBOT.RU 2015
Инструменты
WWW.REDMADROBOT.RU 2015
CardView
RecyclerView
NavigationView
TextInputLayout
FloatingActionButton
Snackbar
AppBarLayout, TabLayout
CoordinatorLayout
CollapsingToolbar
WWW.REDMADROBOT.RU 2015
До Material:
WWW.REDMADROBOT.RU 2015
Material:
WWW.REDMADROBOT.RU 2015
Пользуйтесь палитрой
WWW.REDMADROBOT.RU 2015
values/
colors.xml
dimens.xml
text_style.xml
style.xml
атрибуты
WWW.REDMADROBOT.RU 2015
colorPrimaryDark
colorPrimary
colorAccent
Расскажите дизайнерам
про инструменты
Light Vibrant Vibrant Dark Vibrant
Light Muted Muted Dark Muted
WWW.REDMADROBOT.RU 2015
Почему не стоит копировать гайдлайны один в один?
WWW.REDMADROBOT.RU 2015
Section Title
12:30
Title 1 Title 1
Title 1 Title 1
WWW.REDMADROBOT.RU 2015
Explore
12:30
VIEW ALL
Type of Restaurant - $$$$$
Address Line 1.,
Address Line 2
Name of Restaurant
Collections Section
Type of Restaurant - $$$$$
Address Line 1.,
Address Line 2
Name of Restaurant
WWW.REDMADROBOT.RU 2015
Брэнд размывается
и приложение может оказаться на «свалке»
Google Play Store
WWW.REDMADROBOT.RU 2015
WWW.REDMADROBOT.RU 2015
WWW.REDMADROBOT.RU 2015
WWW.REDMADROBOT.RU 2015
Экспериментируйте и не бойтесь
включать узнаваемые элементы
вашего имиджа в приложение
WWW.REDMADROBOT.RU 2015
Pesto
WWW.REDMADROBOT.RU 2015
Crane Air
WWW.REDMADROBOT.RU 2015
Abisko
WWW.REDMADROBOT.RU 2015
Shrine
WWW.REDMADROBOT.RU 2015
The Fortnightly
WWW.REDMADROBOT.RU 2015
https://design.google.com/articles/expressing-brand-in-material/
WWW.REDMADROBOT.RU 2015
А зачем вообще
обновлять дизайн?
WWW.REDMADROBOT.RU 2015
Empathy
перевод с англ. — сочувствие
хороший дизайнер сопереживает
пользователю
1. Позаботьтесь о «логистике»
2. Не стоит насиловать кнопку
3. Не всё должно быть на карточке
4. Стоит уделять внимание деталям
5. Анимация — дорогая штучка
6. Почитайте про принципы Гештальт
психологии
Крутые

советы!
Вопросы?
Спасибо за внимание!
Акбашев Джалиль
ja@redmadrobot.com

More Related Content

PPTX
Компьютерная графика
PDF
Долаючи прірву між дизайнерами та розробниками - UA Mobile 2019
PDF
Будущее креативных профессий: как технологии влияют на наши возможности
PPTX
Course User interface — Lesson 9
PPTX
Тренды в мобильных UX / UI
PPTX
Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)
PDF
VladimirKolesnikov (Microsoft) @ CodeCamp2011
PDF
Точка сборки Material design
Компьютерная графика
Долаючи прірву між дизайнерами та розробниками - UA Mobile 2019
Будущее креативных профессий: как технологии влияют на наши возможности
Course User interface — Lesson 9
Тренды в мобильных UX / UI
Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)
VladimirKolesnikov (Microsoft) @ CodeCamp2011
Точка сборки Material design

Similar to Being material (15)

PDF
Android UI Optimisation
PDF
Material Design (Lecture 15 – material design)
PPTX
Презентация Юрия Ветрова (Mail.ru Group)
PPTX
Mobile UI @Levelapp.me
PDF
Design in iOS7 (WebCamp 2013)
PDF
Елена Гальцина
PPT
Владимир Макеевв «Проектирование интерфейса Android приложений»
PDF
2013 Web Trends in Digital Design
PDF
Дизайн для недизайнеров.
PDF
Me12 usabiliti-mobile
PDF
Олег Макаров – Как адаптировать интерфейс iOS приложения под Android за полчаса
PPTX
METRO. Дизайн для Windows Phone
PPTX
User Experience 2011: Мастер-класс: Кросс-платформенное проектирование для мо...
PPTX
Основы тестирования графических интерфейсов
ODP
Android ux для разработчика
Android UI Optimisation
Material Design (Lecture 15 – material design)
Презентация Юрия Ветрова (Mail.ru Group)
Mobile UI @Levelapp.me
Design in iOS7 (WebCamp 2013)
Елена Гальцина
Владимир Макеевв «Проектирование интерфейса Android приложений»
2013 Web Trends in Digital Design
Дизайн для недизайнеров.
Me12 usabiliti-mobile
Олег Макаров – Как адаптировать интерфейс iOS приложения под Android за полчаса
METRO. Дизайн для Windows Phone
User Experience 2011: Мастер-класс: Кросс-платформенное проектирование для мо...
Основы тестирования графических интерфейсов
Android ux для разработчика
Ad

Being material