1. для мобильных устройств
Фил Смирнов, Motka Design Studio
http://motka.ru

2. О чем я расскажу:
• Коротко о моем собственном опыте
проектирования интерфейсов
• Платформы для мобильных приложений.
Единый кроссплатформенный интерфейс.
• Принципиальные различия мобильных и
web- интерфейсов.
• “Язык” интерфейса. Стандартизация UI
элементов и парадигм. В чем креатив?
• Методика процесса проектирования

3. Мой опыт проектирования
• Что такое проектирование? Зачем
оно нужно с точки зрения дизайнера?
• Скорость, Гибкость,
Целесообразность
• Газета.Ру - Motka - inVenture
• News360 - Pronto - Vidimax / Vichatter
• UXi Copenhagen, Web 2.0 EXPO

4. Мобильные платформы
• iPhone
2012 приложениями?
• Что называют мобильными
iPad
• Android Phone 2.x
• Android Honeycomb
(Tablet)
• Windows Phone 7/8
• Blackberry + Playbook
• Symbian native
• HTML5+CSS3 (webkit)
• Opera Mini
• Kindle, Bada, etc..

5. Единый
кроссплатформенный
интерфейс
• Различия в парадигмах UI:
iPhone vs Android
• Различный форм-фактор экрана:
Smartphone vs Tablet
• Ограничения: HTML5 vs Native
Технически - самый компромиссный вариант:
HTML5 приложение + Sencha/PhoneGap bundle

9. Различия мобильных и
web-
интерфейсов
• интерфейсов
Контекст использования
• Размеры экрана
• Кол-во информации
• Модальности/параллельные потоки
• Цена клика, интерактивность
• Geo-location

11. Стандартизация UI
• Что в ней хорошего? Зачем она
нужна?
“Язык” интерфейса.
• Стандартные контролы
• Стандартные пиктограммы (quiz?
awesome font)
• Работа с референсами

14. Куда девать
“, креатив”? )
• Метафора (от красоты отдельных
экранов к цельному впечатлению
• Easy-to-use - универсальная
мотивация
• “Рыба” - Interface design is copywriting
(диалог с пользователем)
• Анимация, переходы - возможность
объяснить что к чему, без слов.

16. Методика проектирования
• Сбор бизнес-требований
• Портрет ЦА
• Юзкейсы
• Навигационная карта
(Objects + Actions + Paradigms)
• Wireframes (схемы страниц)

19. Что на выходе?
• Как показывать результат клиенту?
• Задача? - Решение!
• Картинки или прототип?
• Связка с дизайном и разработкой
(feedback loops, agile development)

20. Спасибо за
внимание!
Что вам запомнилось?
1. ____________________
2. __________________
3. ____________________