Презентация Александра Устинова и Антона Русецкого

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

2. Примеры

4. Мы наелись!

5. Проектирование
Дизайн
Вёрстка
Программирование
Тестирование
Заполнение контентом

7. Проектирование
Дизайн
Вёрстка
Программирование
Заполнение контентом

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

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

10. 1. Контент-первичен
Что и как мы хотим сказать
пользователю?
Какие ограничения
к контенту?

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

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

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

14. Подготовка
1. Формулирование целей и задач
2. Карта-сайта, сценарии
поведения пользователей
3. Прототипы с контентом +
раскадровка
и один имиджевый макет

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

30. Допиливаем
1. Анимация с чистовым таймингом
и анимация контента
2. Тестируем

31. Допиливаем
1. Анимация с чистовым таймингом
и анимация контента
2. Тестируем
3. Всё переделываем. Му-ха-ха!

32. Смотрим что получилось!
Imagine Cup 2013

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

34. Коммуникации
внутри команды
1. Все участники команды понимают
цели проекта. Опираемся на цели!
2. Смотрим больше примеров,
но помним про консистентность
3. Визуализация всего.
Эскизы, раскадровки, аниматики
4. Сокращаем количество последовательных
этапов
5. Фиксируем правила и логику

35. Дизайн =
вёрстка + оформление
1. Понимание принципов анимации (12
принципов Диснея) у дизайнера
2. Понимание принципов
и возможностей вёрстки у дизайнера
3. Наличие вкуса у верстальщика
4. Понимание принципов анимации у
верстальщика
5. Рисуй и верстай сам

36. Коммуникации
с клиентом
1. Убеди клиента, что ты очень
крутой. Развяжи себе руки
2. Согласовывай принципы на
красивых примерах, а не
отдельные шаблоны
3. Согласованная
структура, функционал и
согласованный контент-план

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

38. Рецепты

39. 1. Целеполагание, проектирование
2. Раскадровки
3. Html-прототипы
4. Промо-макет
5. Gif, Flash, PPT
6. Контент-политика
7. Логика анимации + к логике
расположения
8. Вёрстка независимая от структуры
и контента
9. Много тестирования на разных
устройствах