Визуальное проектирования интернет-проектов - Михаил...
DESCRIPTION
http://bi.itpark-kazan.ru/1839TRANSCRIPT
![Page 1: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/1.jpg)
Визуальное проектирование интернет-проектов
1
Средства, методы, кейсы
© Михаил Кашафутдинов 16 августа 2011 г.
![Page 2: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/2.jpg)
Лирическое отступление
![Page 3: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/3.jpg)
Х*ЙYou always get back to the basics
(Мы всегда возвращаемся к основе)
«Поколение Пи», В. Пелевин.
Эпиграф
![Page 4: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/4.jpg)
Развитие человека с точки зрения использования средств визуализации
![Page 5: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/5.jpg)
Вернитесь с основам – научитесь рисовать
![Page 6: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/6.jpg)
Лирическое отступлениезакончено
![Page 7: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/7.jpg)
О чем поговорим?
• Кому нужна проектировка (ТЗ)?• Особенности ТЗ для веб-проектов• 3 уровня проектирования– Mind maps– Wireframes– Краткое ТЗ
• Инструменты• Кейсы
![Page 8: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/8.jpg)
Кому нужно проектирование?
• Заказчик (или вы сам)• Дизайнеры интерфейсов• Разработчики• Тестировщики• Project Manager
Нужная понятная всем участникам процесса спецификация
![Page 9: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/9.jpg)
Особенность веб-проектов• Скоротечность• Изменчивость• Много экранов, Rich UI
Нужная понятная всем участникам процесса спецификация
![Page 10: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/10.jpg)
Как делали раньше?
Очень много букв
![Page 11: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/11.jpg)
Что получали?
![Page 12: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/12.jpg)
Серебряная пуля?
Есть.
![Page 13: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/13.jpg)
3 уровня проектирования
Mind maps(диаграммы связей)
1. Структурный уровень
2. Уровень экранов
3. Уровень технических деталей
WireframesПрототипирование интерфейса
Краткое ТЗ
![Page 14: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/14.jpg)
1 уровень - mind maps
The Mind Map Book Тони и Барри Бьюзен
На Озоне есть
Диаграмма связей — изображения процесса системного мышления с помощью схем.
Используем для описания структуры проекта.
![Page 15: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/15.jpg)
Mind map – пример структуры сайта
![Page 16: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/16.jpg)
Mind Maps – для чего?
• Простота использования• Интуитивность, наглядность• Mind Maps are Sexy• Баланс между структурностью и
стихийностью
![Page 17: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/17.jpg)
Пример нотации*
* взято с хабра
Желтые —сущности, физические разделы сайтаСерые — условные разделы для группировки в нем элементовЧерные — функциональные элементы страницы, которые несут за собой некоторую логики или действия
Восстановление пароля в разделе пользователи является всплывающим окном.
![Page 18: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/18.jpg)
Отслеживание прогресса
*Помни об Архангельском
*
![Page 19: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/19.jpg)
Mind Maps – средства
XMind
Бесплатно или$49 в месяц
$240 – 1 user$1400 – 5 users$2500 – 10 users
![Page 20: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/20.jpg)
MindManager
![Page 21: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/21.jpg)
XMind
![Page 22: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/22.jpg)
2. Wireframes
• Структурные схемы страниц
• В деталях показывают, какая информация и элементы управления должны выводиться на каждой странице системы
• Расстановка акцентов
![Page 23: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/23.jpg)
Wireframe - пример
![Page 24: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/24.jpg)
Wireframes - средства
1. Быстро, интерактивно• Axure RP• Balsamiq Mockups• GoTiggr
2. Детально, гибко, но долго• Photoshop• Fireworks
2 типа
![Page 25: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/25.jpg)
Axure RP
![Page 26: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/26.jpg)
Bolsamiq Mockups
![Page 27: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/27.jpg)
Photoshop
![Page 28: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/28.jpg)
Wireframes → дизайн
![Page 29: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/29.jpg)
Примеры
![Page 30: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/30.jpg)
Wireframe
![Page 31: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/31.jpg)
Дизайн
![Page 32: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/32.jpg)
Wireframe
![Page 33: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/33.jpg)
Дизайн
![Page 34: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/34.jpg)
3. Техническое задание
ТЗ YamiTime 16.08.2011.docxРазмер: 25Кб.
• В ТЗ остаются только важные особенности реализации• Справка по технологиям
![Page 35: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/35.jpg)
3 уровня проектирования
Mind maps(диаграммы связей)
1. Структурный уровень
2. Уровень экранов
3. Уровень технических деталей
WireframesПрототипирование интерфейса
Краткое ТЗ
![Page 36: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/36.jpg)
Обсудим?
![Page 37: Визуальное проектирования интернет-проектов - Михаил Кашафутдинов](https://reader031.vdocuments.us/reader031/viewer/2022020123/557f75e7d8b42aab198b46cf/html5/thumbnails/37.jpg)
Контакты
• [email protected]• @mkashafutdinov• facebook.com/mkashafutdinov• vk.com/mkashafutdinov
startup-sreda.ru www.site-by-site.ru