Визуальное проектирования интернет-проектов - Михаил Кашафутдинов
•Download as PPTX, PDF•
3 likes•1,395 views
http://bi.itpark-kazan.ru/1839
Визуальное проектирования интернет-проектов - Михаил Кашафутдинов
- 1. Визуальное проектирование интернет-проектовСредства, методы, кейсы1© Михаил Кашафутдинов 16 августа 2011 г.
- 3. ЭпиграфХ*ЙYou always get back to the basics(Мы всегда возвращаемся к основе)«Поколение Пи», В. Пелевин.
- 4. Развитие человека с точки зрения использования средств визуализации
- 5. Вернитесь с основам – научитесь рисовать
- 7. О чем поговорим?Кому нужна проектировка (ТЗ)?Особенности ТЗ для веб-проектов3уровня проектированияMind mapsWireframesКраткое ТЗИнструментыКейсы
- 8. Кому нужно проектирование?Заказчик (или вы сам)Дизайнеры интерфейсовРазработчикиТестировщикиProject ManagerНужная понятная всем участникам процесса спецификация
- 9. Особенность веб-проектовСкоротечностьИзменчивостьМного экранов, Rich UIНужная понятная всем участникам процесса спецификация
- 10. Как делали раньше?Очень много букв
- 11. Что получали?
- 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Структурные схемы страницВ деталях показывают, какая информация и элементы управления должны выводиться на каждой странице системыРасстановка акцентов
- 24. Wireframes - средства2 типа1. Быстро, интерактивноAxureRP
- 25. Ѵdzܱ
- 26. GoTiggr2. Детально, гибко, но долгоPhotoshop
- 28. Bolsamiq Mockups
- 29. Photoshop
- 31. Примеры
- 32. Wireframe
- 33. Дизайн
- 34. Wireframe
- 35. Дизайн
- 36. 3. Техническое заданиеТЗ YamiTime16.08.2011.docxРазмер: 25Кб.В ТЗ остаются только важные особенности реализации
- 37. Справка по технологиям3 уровня проектирования1. Структурный уровеньMind maps(диаграммы связей)2. Уровень экрановWireframesПрототипирование интерфейса 3. Уровень технических деталейКраткое ТЗ
- 38. Обсудим?