http://bi.itpark-kazan.ru/1839

1. Визуальное проектирование интернет-проектов Средства, методы, кейсы 1 © Михаил Кашафутдинов 16 августа 2011 г.

2. Лирическое отступление

3. Эпиграф Х*Й You always get back to the basics(Мы всегда возвращаемся к основе) «Поколение Пи», В. Пелевин.

4. Развитие человека с точки зрения использования средств визуализации

5. Вернитесь с основам – научитесь рисовать

6. Лирическое отступлениезакончено

7. О чем поговорим? Кому нужна проектировка (ТЗ)? Особенности ТЗ для веб-проектов 3уровня проектирования Mind maps Wireframes Краткое ТЗ Инструменты Кейсы

8. Кому нужно проектирование? Заказчик (или вы сам) Дизайнеры интерфейсов Разработчики Тестировщики Project Manager Нужная понятная всем участникам процесса спецификация

9. Особенность веб-проектов Скоротечность Изменчивость Много экранов, Rich UI Нужная понятная всем участникам процесса спецификация

10. Как делали раньше? Очень много букв

11. Что получали?

12. Серебряная пуля? Есть.

13. 3 уровня проектирования 1. Структурный уровень Mind maps(диаграммы связей) 2. Уровень экранов Wireframes Прототипирование интерфейса 3. Уровень технических деталей Краткое ТЗ

14. 1 уровень - mind maps Диаграмма связей — изображения процесса системного мышления с помощью схем. Используем для описания структуры проекта. TheMindMapBook Тони и Барри Бьюзен На Озоне есть

15. Mind map – пример структуры сайта

16. Mind Maps – для чего? Простотаиспользования Интуитивность, наглядность Mind Maps are Sexy Баланс между структурностью и стихийностью

17. Пример нотации* Желтые —сущности, физические разделы сайта Серые — условные разделы для группировки в нем элементов Черные — функциональные элементы страницы, которые несут за собой некоторую логики или действия Восстановление пароля в разделе пользователи является всплывающим окном. * взято с хабра

18. Отслеживание прогресса * *Помни об Архангельском

19. Mind Maps – средства XMind $240 – 1 user $1400 – 5 users $2500 – 10 users Бесплатноили $49в месяц

20. MindManager

21. XMind

22. 2. Wireframes Структурные схемы страниц В деталях показывают, какая информация и элементы управления должны выводиться на каждой странице системы Расстановка акцентов

23. Wireframe - пример

25. Balsamiq Mockups

28. Bolsamiq Mockups

29. Photoshop

30. Wireframes -> дизайн

31. Примеры

32. Wireframe

33. Дизайн

34. Wireframe

35. Дизайн

38. Обсудим?

39. Контакты m@site-by-site.ru @mkashafutdinov facebook.com/mkashafutdinov vk.com/mkashafutdinov startup-sreda.ru www.site-by-site.ru