37
Визуальное проектирование интернет-проектов 1 Средства, методы, кейсы © Михаил Кашафутдинов 16 августа 2011 г.
Визуальное проектирование интернет-проектов
1
Средства, методы, кейсы
© Михаил Кашафутдинов 16 августа 2011 г.
Лирическое отступление
Х*ЙYou always get back to the basics
(Мы всегда возвращаемся к основе)
«Поколение Пи», В. Пелевин.
Эпиграф
Развитие человека с точки зрения использования средств визуализации
Вернитесь с основам – научитесь рисовать
Лирическое отступлениезакончено
О чем поговорим?
• Кому нужна проектировка (ТЗ)?• Особенности ТЗ для веб-проектов• 3 уровня проектирования– Mind maps– Wireframes– Краткое ТЗ
• Инструменты• Кейсы
Кому нужно проектирование?
• Заказчик (или вы сам)• Дизайнеры интерфейсов• Разработчики• Тестировщики• Project Manager
Нужная понятная всем участникам процесса спецификация
Особенность веб-проектов• Скоротечность• Изменчивость• Много экранов, Rich UI
Нужная понятная всем участникам процесса спецификация
Как делали раньше?
Очень много букв
Что получали?
Серебряная пуля?
Есть.
3 уровня проектирования
Mind maps(диаграммы связей)
1. Структурный уровень
2. Уровень экранов
3. Уровень технических деталей
WireframesПрототипирование интерфейса
Краткое ТЗ
1 уровень - mind maps
The Mind Map Book Тони и Барри Бьюзен
На Озоне есть
Диаграмма связей — изображения процесса системного мышления с помощью схем.
Используем для описания структуры проекта.
Mind map – пример структуры сайта
Mind Maps – для чего?
• Простота использования• Интуитивность, наглядность• Mind Maps are Sexy• Баланс между структурностью и
стихийностью
Пример нотации*
* взято с хабра
Желтые —сущности, физические разделы сайтаСерые — условные разделы для группировки в нем элементовЧерные — функциональные элементы страницы, которые несут за собой некоторую логики или действия
Восстановление пароля в разделе пользователи является всплывающим окном.
Отслеживание прогресса
*Помни об Архангельском
*
Mind Maps – средства
XMind
Бесплатно или$49 в месяц
$240 – 1 user$1400 – 5 users$2500 – 10 users
MindManager
XMind
2. Wireframes
• Структурные схемы страниц
• В деталях показывают, какая информация и элементы управления должны выводиться на каждой странице системы
• Расстановка акцентов
Wireframe - пример
Wireframes - средства
1. Быстро, интерактивно• Axure RP• Balsamiq Mockups• GoTiggr
2. Детально, гибко, но долго• Photoshop• Fireworks
2 типа
Axure RP
Bolsamiq Mockups
Photoshop
Wireframes → дизайн
Примеры
Wireframe
Дизайн
Wireframe
Дизайн
3. Техническое задание
ТЗ YamiTime 16.08.2011.docxРазмер: 25Кб.
• В ТЗ остаются только важные особенности реализации• Справка по технологиям
3 уровня проектирования
Mind maps(диаграммы связей)
1. Структурный уровень
2. Уровень экранов
3. Уровень технических деталей
WireframesПрототипирование интерфейса
Краткое ТЗ
Обсудим?
Контакты
• [email protected]• @mkashafutdinov• facebook.com/mkashafutdinov• vk.com/mkashafutdinov
startup-sreda.ru www.site-by-site.ru
