Разработка сайта,как создание мультфильмаИнтерактивный дизайни тру-ля-ля!

Примеры

Мы наелись!

ПроектированиеДизайнВёрстка

ПрограммированиеТестирование

Заполнение контентом

ПроектированиеДизайнВёрстка

ПрограммированиеЗаполнение контентом

Мы поняли,что нужно брать пример с создателей мультиков!

При чём здесь мультфильм?

1. Контент-первиченЧто и как мы хотим сказать

пользователю? Какие ограничения

к контенту?

2. Работа с анимациейУправляем вниманием пользователя (зрителя)

с помощью расположения элементов и их взаимной

анимации

3. Внимание к мелочам

Высокая цена ошибкиПриходится всё переделывать

Мы поменялипорядок работ

1. Формулирование целей и задач2. Карта-сайта, сценарии

поведения пользователей3. Прототипы с контентом +

раскадровкаи один имиджевый макет

Подготовка

Колбасим!

1. HTML, Gif, Flash, PPT – прототипы2. Тестирование3. Стилистика (правила стилистики)4. Контент-план, контент-политика5. Шаблоны с проработкой контента6. Анимация крупных блоков

с оформлением7. Тестируем

Допиливаем

1. Анимация с чистовым таймингоми анимация контента

2. Тестируем

Допиливаем

1. Анимация с чистовым таймингоми анимация контента

2. Тестируем3. Всё переделываем. Му-ха-ха!

Смотрим что получилось!

Imagine Cup 2013

Пять важных составляющих успеха

Коммуникациивнутри команды

1. Все участники команды понимаютцели проекта. Опираемся на цели!

2. Смотрим больше примеров,но помним про консистентность

3. Визуализация всего.Эскизы, раскадровки, аниматики

4. Сокращаем количество последовательных этапов

5. Фиксируем правила и логику

Дизайн =вёрстка + оформление

1. Понимание принципов анимации (12 принципов Диснея) у дизайнера

2. Понимание принципови возможностей вёрстки у дизайнера

3. Наличие вкуса у верстальщика4. Понимание принципов анимации у

верстальщика5. Рисуй и верстай сам

Коммуникации с клиентом

1. Убеди клиента, что ты очень крутой. Развяжи себе руки

2. Согласовывай принципы на красивых примерах, а не отдельные шаблоны

3. Согласованная структура, функционал и согласованный контент-план

Тестирование1. На команде2. На сотрудниках3. На знакомых4. На клиенте5. На всех устройствах

Рецепты

1. Целеполагание, проектирование2. Раскадровки3. Html-прототипы4. Промо-макет5. Gif, Flash, PPT6. Контент-политика7. Логика анимации + к логике

расположения8. Вёрстка независимая от структуры

и контента9. Много тестирования на разных

устройствах