Визуальное проектирования интернет-проектов - Мих��ил Кашафутдинов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Wireframes - средства2 типа1. Быстро, интерактивноAxureRP

GoTiggr2. Детально, гибко, но долгоPhotoshop

3. Техническое заданиеТЗ YamiTime16.08.2011.docxРазмер: 25Кб.В ТЗ остаются только важные особенности реализации

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

Визуальное проектирования интернет-проектов - Мих��ил Кашафутдинов

Related slideshows

More Related Content

Визуальное проектирования интернет-проектов - Михаил Кашафутдинов