Визуальное проектирование интернет-проектов

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Прототипирование интерфейса

Краткое ТЗ

Обсудим?

Контакты

• m@site-by-site.ru• @mkashafutdinov• facebook.com/mkashafutdinov• vk.com/mkashafutdinov

startup-sreda.ru www.site-by-site.ru