На своем профессиональном пути я сталкиваюсь с задачами разного уровня сложности. Вчера я решала задачу, рисуя на салфетках, сегодня мой рабочий день начался со скетчей по пути на работу, а неделю назад я создавала детализированный интерактивный прототип в Axure. Вероятно, завтра мне выдастся возможность прототипировать веткой на песке или с помощью современных фреймворков. Я люблю свою работу за то, что она изобретательна по части подручных инструментов. Сейчас я учусь в уме проектировать интерфейсы так быстро и подробно, чтобы можно было взять ручку и зарисовать скетч с дизайн-решением. В докладе я расскажу историю о том, как мне удалось спроектировать сложную систему для совместного планирования поездок, рассекая в общественном транспорте по городу в часы пик, какую роль проектировщик занимает в создании сайта от контента и как прототипирование экономно вписалось в процесс производства КБ «Собака Павлова».

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
Презентация — в обмен на
визитку
Спасибо!!