SlideShare a Scribd company logo
1 of 171
Download to read offline
Дизайн. Мобильный.
Костя Зубанов и Слава Яшков
Для начала вопрос.
Зачем?
1.
Отличия от веба.
Использование. Кейсы.
2.
Жесты
Прицип УВЛ
Мобильный интернет
Не забывать.
Немного истории.
И отличия нового от старого.
3.
9 декабря 2007
23 сентября 2008
11 октября 2010
Три даты.
Путь.
Сложное простое.
iOS.
От шестёрки до семерки.
Android.
Привет Material.
Тренды.
И куда всё движется.
4.
Плоский дизайн.
Почти.
Цвет.
Давай ярче.
Контент.
Во главе.
Анимация.
Это ми-ми-ми.
Иллюстрации.
Это фыр-фыр-фыр.
iOS.
Гайды.
5.
Взаимодействия.
3D Touch.
Доступность.
Звук.
Авторизация.
Ввод данных.
Пояснения.
Хранение файлов.
Первый запуск.
Взаимодействия.
3D Touch.
Доступность.
Звук.
Авторизация.
Ввод данных.
Пояснения.
Хранение файлов.
Первый запуск.
Взаимодействия.
3D Touch.
Доступность.
Звук.
Авторизация.
Ввод данных.
Пояснения.
Хранение файлов.
Первый запуск.
Взаимодействия.
3D Touch.
Доступность.
Звук.
Авторизация.
Ввод данных.
Пояснения.
Хранение файлов.
Первый запуск.
Взаимодействия.
3D Touch.
Доступность.
Звук.
Авторизация.
Ввод данных.
Пояснения.
Хранение файлов.
Первый запуск.
Взаимодействия.
3D Touch.
Доступность.
Звук.
Авторизация.
Ввод данных.
Пояснения.
Хранение файлов.
Первый запуск.
Взаимодействия.
3D Touch.
Доступность.
Звук.
Авторизация.
Ввод данных.
Пояснения.
Хранение файлов.
Первый запуск.
Взаимодействия.
3D Touch.
Доступность.
Звук.
Авторизация.
Ввод данных.
Пояснения.
Хранение файлов.
Первый запуск.
Взаимодействия.
Жесты.
Загрузка.
Модальность.
Навигация.
Разрешения.
Настройки.
Копирайтинг.
Отменить/повторить.
Взаимодействия.
Жесты.
Загрузка.
Модальность.
Навигация.
Разрешения.
Настройки.
Копирайтинг.
Отменить/повторить.
Взаимодействия.
Жесты.
Загрузка.
Модальность.
Навигация.
Разрешения.
Настройки.
Копирайтинг.
Отменить/повторить.
Взаимодействия.
Жесты.
Загрузка.
Модальность.
Навигация.
Разрешения.
Настройки.
Копирайтинг.
Отменить/повторить.
Взаимодействия.
Жесты.
Загрузка.
Модальность.
Навигация.
Разрешения.
Настройки.
Копирайтинг.
Отменить/повторить.
Взаимодействия.
Жесты.
Загрузка.
Модальность.
Навигация.
Разрешения.
Настройки.
Копирайтинг.
Отменить/повторить.
Взаимодействия.
Жесты.
Загрузка.
Модальность.
Навигация.
Разрешения.
Настройки.
Копирайтинг.
Отменить/повторить.
Взаимодействия.
Жесты.
Загрузка.
Модальность.
Навигация.
Разрешения.
Настройки.
Копирайтинг.
Отменить/повторить.
Возможности (фичи).
Многозадачность.
Уведомления.
Печать.
Быстрый просмотр.
Сири.
Возможности (фичи).
Многозадачность.
Уведомления.
Печать.
Быстрый просмотр.
Сири.
Возможности (фичи).
Многозадачность.
Уведомления.
Печать.
Быстрый просмотр.
Сири.
Возможности (фичи).
Многозадачность.
Уведомления.
Печать.
Быстрый просмотр.
Сири.
Возможности (фичи).
Многозадачность.
Уведомления.
Печать.
Быстрый просмотр.
Сири.
Визуальный дизайн.
Анимация.
Брендинг.
Цвет.
Layout.
Типографика.
Визуальный дизайн.
Анимация.
Брендинг.
Цвет.
Layout.
Типографика.
Визуальный дизайн.
Анимация.
Брендинг.
Цвет.
Layout.
Типографика.
Визуальный дизайн.
Анимация.
Брендинг.
Цвет.
Layout.
Типографика.
Визуальный дизайн.
Анимация.
Брендинг.
Цвет.
Layout.
Типографика.
Android.
Гайды.
6.
Цифровая бумага.
Поверхность.
Глубина.
Трансформации.
Цифровая бумага.
Поверхность.
Глубина.
Трансформации.
Цифровая бумага.
Поверхность.
Глубина.
Трансформации.
Полиграфический дизайн.
Цвет.
Типографика.
Сетка.
Фото.
Полиграфический дизайн.
Цвет.
Типографика.
Сетка.
Фото.
Полиграфический дизайн.
Цвет.
Типографика.
Сетка.
Фото.
Полиграфический дизайн.
Цвет.
Типографика.
Сетка.
Фото.
Лэйаут.
Информационные слои.
Тулбары.
Адаптивность.
Лэйаут.
Информационные слои.
Тулбары.
Адаптивность.
Лэйаут.
Информационные слои.
Тулбары.
Адаптивность.
Основные паттерны и элементы.
Cards.
Navigation drawer.
Bottom navigation.
Bottom sheets.
Fab.
Tabs.
Snackbars.
Overflow.
Dialog.
Основные паттерны и элементы.
Cards.
Navigation drawer.
Bottom navigation.
Bottom sheets.
Fab.
Tabs.
Snackbars.
Overflow.
Dialog.
Основные паттерны и элементы.
Cards.
Navigation drawer.
Bottom navigation.
Bottom sheets.
Fab.
Tabs.
Snackbars.
Overflow.
Dialog.
Основные паттерны и элементы.
Cards.
Navigation drawer.
Bottom navigation.
Bottom sheets.
Fab.
Tabs.
Snackbars.
Overflow.
Dialog.
Основные паттерны и элементы.
Cards.
Navigation drawer.
Bottom navigation.
Bottom sheets.
Fab.
Tabs.
Snackbars.
Overflow.
Dialog.
Основные паттерны и элементы.
Cards.
Navigation drawer.
Bottom navigation.
Bottom sheets.
Fab.
Tabs.
Snackbars.
Overflow.
Dialog.
Основные паттерны и элементы.
Cards.
Navigation drawer.
Bottom navigation.
Bottom sheets.
Fab.
Tabs.
Snackbars.
Overflow.
Dialog.
Основные паттерны и элементы.
Cards.
Navigation drawer.
Bottom navigation.
Bottom sheets.
Fab.
Tabs.
Snackbars.
Overflow.
Dialog.
Основные паттерны и элементы.
Cards.
Navigation drawer.
Bottom navigation.
Bottom sheets.
Fab.
Tabs.
Snackbars.
Overflow.
Dialog.
Жесты.
Longtap.
Swipe.
Pinch to zoom.
Анимации.
Адаптивность.
Естественность.
Анимации от точки взаимодействия.
Радиальные взаимодействия.
Переходы.
Анимации.
Адаптивность.
Естественность.
Анимации от точки взаимодействия.
Радиальные взаимодействия.
Переходы.
Анимации.
Адаптивность.
Естественность.
Анимации от точки взаимодействия.
Радиальные взаимодействия.
Переходы.
Анимации.
Адаптивность.
Естественность.
Анимации от точки взаимодействия.
Радиальные взаимодействия.
Переходы.
Анимации.
Адаптивность.
Естественность.
Анимации от точки взаимодействия.
Радиальные взаимодействия.
Переходы.
Заключение.
Полезные ссылки.
6.

More Related Content

What's hot

CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуре
CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуреCodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуре
CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуреYury Vetrov
 
Выступление: инструменты и методы эффективной удалённой работы
Выступление: инструменты и методы эффективной удалённой работыВыступление: инструменты и методы эффективной удалённой работы
Выступление: инструменты и методы эффективной удалённой работыryba4
 
У семи нянек дитя без глаза? Пара лет проблем и решений в UX зарубежного веб-...
У семи нянек дитя без глаза? Пара лет проблем и решений в UX зарубежного веб-...У семи нянек дитя без глаза? Пара лет проблем и решений в UX зарубежного веб-...
У семи нянек дитя без глаза? Пара лет проблем и решений в UX зарубежного веб-...ПрофсоUX
 
Что сделать, чтобы сто раз все не переделывать
Что сделать, чтобы сто раз все не переделыватьЧто сделать, чтобы сто раз все не переделывать
Что сделать, чтобы сто раз все не переделыватьТранслируем.бел
 
Design Management
Design ManagementDesign Management
Design ManagementStan Ru
 
Paul Miller "Как подняться на open source"
Paul Miller "Как подняться на open source"Paul Miller "Как подняться на open source"
Paul Miller "Как подняться на open source"Fwdays
 
2013-03-02 02 Дмитрий Пашкевич. Код на стероидах
2013-03-02 02 Дмитрий Пашкевич. Код на стероидах2013-03-02 02 Дмитрий Пашкевич. Код на стероидах
2013-03-02 02 Дмитрий Пашкевич. Код на стероидахОмские ИТ-субботники
 
WUD2014: Ю.Ветров — Фоновые исследования. Как много читать, знать и не офигевать
WUD2014: Ю.Ветров — Фоновые исследования. Как много читать, знать и не офигеватьWUD2014: Ю.Ветров — Фоновые исследования. Как много читать, знать и не офигевать
WUD2014: Ю.Ветров — Фоновые исследования. Как много читать, знать и не офигеватьYury Vetrov
 

What's hot (8)

CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуре
CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуреCodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуре
CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуре
 
Выступление: инструменты и методы эффективной удалённой работы
Выступление: инструменты и методы эффективной удалённой работыВыступление: инструменты и методы эффективной удалённой работы
Выступление: инструменты и методы эффективной удалённой работы
 
У семи нянек дитя без глаза? Пара лет проблем и решений в UX зарубежного веб-...
У семи нянек дитя без глаза? Пара лет проблем и решений в UX зарубежного веб-...У семи нянек дитя без глаза? Пара лет проблем и решений в UX зарубежного веб-...
У семи нянек дитя без глаза? Пара лет проблем и решений в UX зарубежного веб-...
 
Что сделать, чтобы сто раз все не переделывать
Что сделать, чтобы сто раз все не переделыватьЧто сделать, чтобы сто раз все не переделывать
Что сделать, чтобы сто раз все не переделывать
 
Design Management
Design ManagementDesign Management
Design Management
 
Paul Miller "Как подняться на open source"
Paul Miller "Как подняться на open source"Paul Miller "Как подняться на open source"
Paul Miller "Как подняться на open source"
 
2013-03-02 02 Дмитрий Пашкевич. Код на стероидах
2013-03-02 02 Дмитрий Пашкевич. Код на стероидах2013-03-02 02 Дмитрий Пашкевич. Код на стероидах
2013-03-02 02 Дмитрий Пашкевич. Код на стероидах
 
WUD2014: Ю.Ветров — Фоновые исследования. Как много читать, знать и не офигевать
WUD2014: Ю.Ветров — Фоновые исследования. Как много читать, знать и не офигеватьWUD2014: Ю.Ветров — Фоновые исследования. Как много читать, знать и не офигевать
WUD2014: Ю.Ветров — Фоновые исследования. Как много читать, знать и не офигевать
 

Viewers also liked

BHSD - Systematic design process
BHSD - Systematic design processBHSD - Systematic design process
BHSD - Systematic design processAndrew Sundiev
 
Анимация БВШД 2016
Анимация БВШД 2016Анимация БВШД 2016
Анимация БВШД 2016Igor Silkin
 
Lean UX, Уровни UX, UXD процесс
Lean UX, Уровни UX, UXD процессLean UX, Уровни UX, UXD процесс
Lean UX, Уровни UX, UXD процессMitya Osadchuk
 
Выбор метрики
Выбор метрикиВыбор метрики
Выбор метрикиIvan Mikhailov
 
Ponomarenko_BHSAD_Intensive_calligraphy
Ponomarenko_BHSAD_Intensive_calligraphyPonomarenko_BHSAD_Intensive_calligraphy
Ponomarenko_BHSAD_Intensive_calligraphyMike Ponomarenko
 
Ожидания от продукта
Ожидания от продуктаОжидания от продукта
Ожидания от продуктаIvan Mikhailov
 
BHSD - Design systems: from UI kit's to living guidelines
BHSD - Design systems: from UI kit's to living guidelinesBHSD - Design systems: from UI kit's to living guidelines
BHSD - Design systems: from UI kit's to living guidelinesAndrew Sundiev
 
UX Research для интенсива UX&UI Британская Школа Дизайна
UX Research для интенсива UX&UI Британская Школа ДизайнаUX Research для интенсива UX&UI Британская Школа Дизайна
UX Research для интенсива UX&UI Британская Школа ДизайнаKsenia Sternina
 
Базовые креативные методики. Интенсив UX&UI
Базовые креативные методики. Интенсив UX&UIБазовые креативные методики. Интенсив UX&UI
Базовые креативные методики. Интенсив UX&UIMitya Osadchuk
 
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...Yury Vetrov
 
Как презентовать проект
Как презентовать проектКак презентовать проект
Как презентовать проектIvan Mikhailov
 
Стачка! 2016: Юрий Ветров — Дизайн с выхлопом
Стачка! 2016: Юрий Ветров — Дизайн с выхлопомСтачка! 2016: Юрий Ветров — Дизайн с выхлопом
Стачка! 2016: Юрий Ветров — Дизайн с выхлопомYury Vetrov
 
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практикаUXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практикаYury Vetrov
 
UXPeople 2015: Юрий Ветров — Платформенное мышление
UXPeople 2015: Юрий Ветров — Платформенное мышлениеUXPeople 2015: Юрий Ветров — Платформенное мышление
UXPeople 2015: Юрий Ветров — Платформенное мышлениеYury Vetrov
 
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...Yury Vetrov
 
UX STRAT USA: Dr Jeffrey Onken, "Experience Mapping UX Change Management In L...
UX STRAT USA: Dr Jeffrey Onken, "Experience Mapping UX Change Management In L...UX STRAT USA: Dr Jeffrey Onken, "Experience Mapping UX Change Management In L...
UX STRAT USA: Dr Jeffrey Onken, "Experience Mapping UX Change Management In L...UX STRAT
 
Speaking up for Experiences
Speaking up for ExperiencesSpeaking up for Experiences
Speaking up for ExperiencesStephen Anderson
 

Viewers also liked (20)

BHSD - Systematic design process
BHSD - Systematic design processBHSD - Systematic design process
BHSD - Systematic design process
 
Анимация БВШД 2016
Анимация БВШД 2016Анимация БВШД 2016
Анимация БВШД 2016
 
Lean UX, Уровни UX, UXD процесс
Lean UX, Уровни UX, UXD процессLean UX, Уровни UX, UXD процесс
Lean UX, Уровни UX, UXD процесс
 
Sketch
SketchSketch
Sketch
 
Выбор метрики
Выбор метрикиВыбор метрики
Выбор метрики
 
Ponomarenko_BHSAD_Intensive_calligraphy
Ponomarenko_BHSAD_Intensive_calligraphyPonomarenko_BHSAD_Intensive_calligraphy
Ponomarenko_BHSAD_Intensive_calligraphy
 
Ожидания от продукта
Ожидания от продуктаОжидания от продукта
Ожидания от продукта
 
BHSD - Design systems: from UI kit's to living guidelines
BHSD - Design systems: from UI kit's to living guidelinesBHSD - Design systems: from UI kit's to living guidelines
BHSD - Design systems: from UI kit's to living guidelines
 
UX Research для интенсива UX&UI Британская Школа Дизайна
UX Research для интенсива UX&UI Британская Школа ДизайнаUX Research для интенсива UX&UI Британская Школа Дизайна
UX Research для интенсива UX&UI Британская Школа Дизайна
 
Базовые креативные методики. Интенсив UX&UI
Базовые креативные методики. Интенсив UX&UIБазовые креативные методики. Интенсив UX&UI
Базовые креативные методики. Интенсив UX&UI
 
Юзабилити-тестирование
Юзабилити-тестирование Юзабилити-тестирование
Юзабилити-тестирование
 
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...
 
Styleguides for mobile
Styleguides for mobileStyleguides for mobile
Styleguides for mobile
 
Как презентовать проект
Как презентовать проектКак презентовать проект
Как презентовать проект
 
Стачка! 2016: Юрий Ветров — Дизайн с выхлопом
Стачка! 2016: Юрий Ветров — Дизайн с выхлопомСтачка! 2016: Юрий Ветров — Дизайн с выхлопом
Стачка! 2016: Юрий Ветров — Дизайн с выхлопом
 
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практикаUXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
 
UXPeople 2015: Юрий Ветров — Платформенное мышление
UXPeople 2015: Юрий Ветров — Платформенное мышлениеUXPeople 2015: Юрий Ветров — Платформенное мышление
UXPeople 2015: Юрий Ветров — Платформенное мышление
 
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
 
UX STRAT USA: Dr Jeffrey Onken, "Experience Mapping UX Change Management In L...
UX STRAT USA: Dr Jeffrey Onken, "Experience Mapping UX Change Management In L...UX STRAT USA: Dr Jeffrey Onken, "Experience Mapping UX Change Management In L...
UX STRAT USA: Dr Jeffrey Onken, "Experience Mapping UX Change Management In L...
 
Speaking up for Experiences
Speaking up for ExperiencesSpeaking up for Experiences
Speaking up for Experiences
 

Design. Mobile.