16

Click here to load reader

Development process @2012

Embed Size (px)

DESCRIPTION

The way we were thinking in early 2012.

Citation preview

Page 1: Development process @2012

Digital Production

Page 2: Development process @2012

Что значитуспешный проектдля продакшена?

Page 3: Development process @2012

1. Запущен в срок

2. Работает без ошибок

3. Полностью функционален

Успешный проект

Page 4: Development process @2012

Коммуникация в проекте

1. Планируй задачи на 2 недели вперед

2. Говори о своих планах

3. Всегда помни о дедлайне

Page 5: Development process @2012

UX/Layouts

Design

HTML/JS

Programming

Quality Assurance

Content

Site structure

Этапы разработки проекта

Page 6: Development process @2012

objectives:

defined by: - список всех разделов сайта- описание динамических элементов для каждого раздела

- описание бизнес логики и жизненного цикла

- дать понимание объема проекта и сложности его реализации

- понять структуру и взаимодействие разделов

comments: - список всех этапов проекта- состояния и переходы между ними

involved: PM, Dev Lead, UX & Art Director

mmap/pdfSite structure

Page 7: Development process @2012

- этапы проекта и переключение между ними

- логика работы (победители и т.д.)

- возможности участников проекта

- KPIs, цели проекта

Site structure - Key Things

Page 8: Development process @2012

images/pdfUX/Wireframes

objectives:

defined by: - схематическое изображение всех объектов, которые будут присутствовать на страницах

- при необходимости – комментарии и пояснения о деталях взаимодействия интерфейса с пользователем

- показать расположение элементов на станицах- подготовить архитектуру интерфейса для дизайна

comments: - отдельно выполненные лэйауты(в том числе одних и тех же страниц)для различных этапов проекта

involved: PM, Dev Lead, UX & Art Director

Page 9: Development process @2012

UX/Layouts - Checklist

сообщения пользователю о том что он успешно/не успешно что-либо сделал

сообщения об ошибках при заполнении форм

повествовательные сообщения пользователю, если ему нужно выполнить какие-то действия для активации контролов

описание логики работы сложных элементов управления

пропорции изображений одних и тех же объектов должны максимально совпадать

сообщения об отсутствии контента или о невозможности выолнения действия (например: “у вас еще нет призов”, “нет работ”, “вы больше не можете добавить фото”, и т.д.)

ширина стандартного сайта не должна превышать 980px

отдельный лейаут для страницы 404

страница “Технические работы”

Page 10: Development process @2012

images/psdDesign

objectives:

defined by: - изображения – отрисованые страницы сайта по лэйаутам

- показать внешний вид всех страниц сайта

comments: - отдельно выполненный дизайн (в том числе одних и тех же страниц)для различных этапов проекта

involved: PM, Dev Lead, UX & Art Director

Page 11: Development process @2012

Design - Checklist

соответствие дизайн – лэйауты, наличие всех элемнтов, которые были отрисованы на стадии UX

для всех элементов управления отрисованы все состояния:hover – для всего, на что можно навестиwait/inactive/disabled – для кнопок/элементов, при нажатии на которые пользователь будет ждатьpressed/active/current – для всего что может быть выделено, или отображает текущий выбор пользователя)

показать как выглядят длинные названия/имена в отведенное им место в дизайне

нарисовать заглушки для изображений

прелоадеры для всех мест, где пользователь ждет

сдлеать favicon и выдать ее в формате .ico

изображения для шеринга в социальных сетях

давать названия стандартных шрифтов для замены всех нестандартных

поведение фона/ресайзы/режимы наложения слоев/папки

Page 12: Development process @2012

html/js/images/cssHTML/JS

objectives:

defined by: - html файлы, которые можно открыть в браузере, дающие максимально точную копию дизайна страниц сайта

- интерактивное поведение элементов на страницах

- трансформировать дизайн в формат, который можно использовать в браузере

comments: - отдельно выполненная верстка (в том числе одних и тех же страниц)для различных этапов проекта

involved: PM, Dev Lead, UX & Art Director

Page 13: Development process @2012

HTML/JS - Checklist

реалзовать JS методы для работы с интерактивными элементами на страницах (popups, pre-loaders, etc.)

сделать css классы для всех состояний элементов, отрисованых в дизайне

верстка должна минимально зависить от тегов в местах общих элементов и максимально быть на них завязана в тех местах, которые редактируются администратором или пользователями сайта

поведение элементов при взаимодействии с пользователем

верстка сайта при ресайзах окна от 640x480 до 1920x1080

соответствие шрифтов, их размеров и стилей

Page 14: Development process @2012

20 days

UX/Layouts

Design

HTML/JS

Quality Assurance

Content

Site structure

Время разработки проекта

5 days

10 days

2 days

5 days

Programming 10 days

2 days

3 days

Design

Development

17 days

Page 15: Development process @2012

Structure UX/Wireframes

5 days 10-15 days 2 days3 days2 days

HTML/JS

Concept

Design Design

Programming Content QA

Время разработки проекта

25 days