http://2015.profsoux.ru/papers/82/

1. Ускорение процесса
прототипирования
Екатерина Юлина
yulina@pavlova.cc

2. 2
Старший проектировщик
интерфейсов КБ «Собака Павлова»
Дизайнер-практик
Знаю ответ на вопрос
«Как это должно работать?»
Екатерина Юлина

3. Время — деньги

4. Лучше сделать больше и лучше 4

5. Дизайн-процесс 5

6. Создание прототипа 6

7. Системный подход 7

8. Дедукция: от общего к частному 8

9. Модульная сетка
9
24
колонки
1200 px
экран
30 px
ячейка
3 col = 130 px
4 col = 180 px
6 col + 3 col + 20px = 430 px
12 col + 4 col + 20 px = 780 px
6 col = 280 px
12 col = 580 px
20 px
канавка

10. 10
Прототипы на салфетках

11. 11

12. 12
Упаковка контента

13. 13
Инструменты
Программа: Axure, Balsamiq, Sketch и т.д.
Стабильный отзывчивый компьютер
Вопросы-триггеры
Цветовая шпаргалка
Метод слепой и быстрой печати

14. 14
Подготовка основного инструмента
Разметка структуры
Титульник, иерархия проекта, место для мусора
Стилизация элементов
Flat UI kit, Material UI kit, Metro UI kit
Настройка модульных сеток
1200 grid и шрифтовая сетка

15. Каркас интерфейс 15

16. Добавление деталей 16

17. И вот он, первый результат. 4 часа 17

18. Подведем итоги
18
На старте принцип «от общего к частному».
Сразу нарисовать то, что известно.
Визуальная эстетика — еще один инструмент.
Умеренно цветной прототип — это хорошо.
Придумал? Покажи!

19. Вопросы-триггеры
19
Что дальше?
Что тут может быть? Какие данные тут?
Чем это должно быть?
Какой это контрол?
Как это можно использовать?
Как ЕЩЕ это можно использовать?
Как это должно работать?
Что я собираюсь сделать?
Какое следующее действие?
Что мне известно?
Что еще можно сделать?

20. Цветовая шпаргалка
20
Цветовая шпаргалка

21. PavlovaPage
@sobakapav
sobaka@pavlova.cc
www.pavlova.cc
Презентация — в обмен на
визитку
Спасибо!!