ProductionКак делаются сайты

четверг, 15 декабря 2011 г.

Contents

• 11 шагов

• 7 ошибок

• 5 итогов

четверг, 15 декабря 2011 г.

Этапы создания сайта

1.Выявление потребностей заказчика2.Организация проектной группы проекта 3.Разработка и согласование технического задания4.Проектирование5.Разработка и согласование дизайна 6.Верстка (анимация)7.Программирование 8.Наполнение контентом 9.Размещение на технической площадке или сервере10.Тестирование 11.Сдача в эксплуатацию

Выявление

Организация

Составление ТЗ

Проектирование

Дизайн

Верстка

Программирование

Наполнение

Размещение

Сдача

Тестирование

и риски

четверг, 15 декабря 2011 г.

Выявление потребностей заказчика

Обязательно перед началом любого проекта выяснить: - Целевая аудитория- Сроки проекта (дата запуска, дата завершения)- Цель создания проекта- Возможные перспективы развития или этапы

По результатам первого этапа выясняются и утверждаются следующие факторы:- Требования к серверу - Выяснить планируемый объем аудитории- Технологическое решение по реализации проекта- Примерный срок разработки- Разработка предположительной структуры- Формирование необходимого списка функций- Предварительная оценка сроков и стоимости проекта

Выявление

Организация

Составление ТЗ

Проектирование

Дизайн

Верстка

Программирование

Наполнение

Размещение

Сдача

Тестирование

и риски

четверг, 15 декабря 2011 г.

Организация проектной группы проекта

Дизайнер

Арт-директорАккаунт менеджер

Проджект менеджер

Верстальщик

Серверный программист

Иллюстратор

Художник

3D-шник

PHP программист Скриптер

Тестер

Переводчик

Копирайтер

Системный администратор

Модератор

Технический директор

Аниматор

Flash программист

итд

Важно не только определить список и количество необходимых специалистов, но и верно организовать процесс и коммуникацию внутри команды.Например: Если на масштабном проекте необходим более, чем один программист, то присутствие технического директора на всем этапе производства - необходимо.

Выявление

Организация

Составление ТЗ

Проектирование

Дизайн

Верстка

Программирование

Наполнение

Размещение

Сдача

Тестирование

и риски

четверг, 15 декабря 2011 г.

Разработка и согласование технического задания

Чем подробнее и полнее написано задание, тем лучше. Условия или функционал, который по ошибке или неусмотрению не попал в данный документ, может повлечь негативные последствия, критичные для запуска проекта.

Ответственный за проект должен помнить: Что не написано в ТЗ, не будет нарисовано, спрограммированно, выложено на сайт.

К составлению и утверждению ТЗ нужно подходить ответственно, в идеале, документ дорабатывается до тех пор, пока клиент и агентство не имеют 100% понимания всего документа.

Для более понятной и структурной работы над ТЗ его можно разделить на три части:Функционал, Прототип и Копирайт, и утверждать данные части по отдельности.

Выявление

Организация

Составление ТЗ

Проектирование

Дизайн

Верстка

Программирование

Наполнение

Размещение

Сдача

Тестирование

и риски

четверг, 15 декабря 2011 г.

Пример:Промоблок №1Принцип Аккордиона Состоит из 3 секторов. при наведении на сектор выезжает черная плашка с информацией. при нажатии на сектор или плашку Лучшая сотня Блок позволяющий листать фотографии. Кнопки Девушки и Парни - фильтры, переключают фото на странице. Кнопка Рейтинг - ссылка в другой раздел.

Кто онлайн?в блоке показывается, кто из пользователей в настоящее время находится на сайте (ник)При наличии более N-человек появляется возможность пролистывать стрелками список. Ссылка ведет на профиль на сайте соответствующего пользователя. Фильтры позволяют осуществлять фильтрацию: Девушки Парни Друзья Все

Людей на сайте: Блок отображает количество зарегистрированных на данный момент пользователей. Показывает общее количество, а так же отдельно количество девушек и парней. В самом барабане. При первой заходе человек видит количество людей которое на сайте. В последующий заход как только он домотал до счетчика счетчик начинает прокрутку и набор суммы с той что человек видел последний раз - до текущей. Т.е. нужно запоминать количество с последнего посещения, фиксировать появление счетчика при прокрутке и сделать анимацию движения цифр.

Фото дня:Блок выводящий лучшее фото. Есть: - фильтры (AXE Guy & AXE Girl)- стрелки перемотки (закладываем, но пока реализуем без них)

Выявление

Организация

Составление ТЗ

Проектирование

Дизайн

Верстка

Программирование

Наполнение

Размещение

Сдача

Тестирование

и риски

четверг, 15 декабря 2011 г.

ПроектированиеЦель проектной работы - спрогнозировать или задать поведение пользователя на сайте. Понятная структура страниц, доступность основного и вспомогательного меню позволяют удерживать пользователей на сайте. Поэтому важно учесть все детали до разработки дизайна и программирования.

User eXperience (UX, дословно «пользовательский опыт» или Юзабилити) — понятие, обобщающее все ощущения и реакции, возникающие при, до и после использования пользователем определенного продукта.

О плюсах прототипов:

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

Выявление

Организация

Составление ТЗ

Проектирование

Дизайн

Верстка

Программирование

Наполнение

Размещение

Сдача

Тестирование

и риски

четверг, 15 декабря 2011 г.

Пример

Выявление

Организация

Составление ТЗ

Проектирование

Дизайн

Верстка

Программирование

Наполнение

Размещение

Тестирование

Сдача

Тестирование

и риски

четверг, 15 декабря 2011 г.

Пример

Выявление

Организация

Составление ТЗ

Проектирование

Дизайн

Верстка

Программирование

Наполнение

Размещение

Сдача

Тестирование

и риски

четверг, 15 декабря 2011 г.

Разработка и согласование дизайна

На этапе разработки дизайна оформляются графические элементы, которые будут украшать сайт - это следует учитывать при при оценке и утверждении данного этапа.

На основании Технического Задания и прототипа отдел дизайна создаст внешний вид проекта

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

Необходимо помнить, что помимо дизайн-концепции будущего проекта (1-2 страницы сайта), команде необходимо разработать ВСЕ функциональные и технические страницы, для этого для удобства работы, в тайминге проекта можно разделить данный этап на 3 части:- Разработка дизайн-концепции- Разработка функциональных страниц (приложить список)- Технический дизайн

Выявление

Организация

Составление ТЗ

Проектирование

Дизайн

Верстка

Программирование

Наполнение

Размещение

Тестирование

и риски

Сдача

четверг, 15 декабря 2011 г.

Верстка (анимация)После того, как дизайнер создал концепцию внешнего вида сайта, необходимо перевести “рисунок” в разметку, которую способны понять программы для просмотра страниц в интернете - веб-браузеры. Эту задачу выполняет верстальщик.

В случае, если проект планируется реализовать при помощи технологии Flash, верстка отходит на второй план, а на первый выходит этап Анимации.

VSFlash сайты HTML сайты

- 100% кросс браузерны

- «Продвинутая» анимация

- Flash игры

- Работоспособность

- Меньшая загрузка ПК

- Поддержка Apple

- Динамика

- Не поддается блокировки

- Новая технология

- Быстрая загрузка

Выявление

Организация

Составление ТЗ

Проектирование

Дизайн

Верстка

Программирование

Наполнение

Размещение

Сдача

Тестирование

и риски

четверг, 15 декабря 2011 г.

Программирование

Практически любой сайт имеет программную часть. Для общего понимания - простые примеры, с которыми сталкивался каждый пользователь, программист создает:

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

Важно понимать, что данный этап один из важнейших, поэтому откладывать, сокращать его срок или вести его параллельно с еще не утвержденными этапами - опасно, и приводит к непредвиденным рискам на проекте

Выявление

Организация

Составление ТЗ

Проектирование

Дизайн

Верстка

Програм

мирование

Наполнение

Размещение

Сдача

Тестирование

и риски

четверг, 15 декабря 2011 г.

Наполнение КонтентомКогда технические вопросы решены и программная часть сайта отлажена, самое время наполнить сайт осмысленным содержанием. Человек, отвечающий за это, называется контент-редактором или контент-менеджером.

ВАЖНО: на данном этапе обязательны подключение в команду корректора и вычитка всех текстов на сайте

Размещение на технической площадке или сервере

Перед отправкой материалов на сервер клиента или заранее подготовленный сервер, нужно обезопасить себя от проблем несовместимости различных платформ, операционных систем и версий установленного на сервере ПО. Требования для сервера заранее описываются в техническом задании

Выявление

Организация

Составление ТЗ

Проектирование

Дизайн

Верстка

Программирование

Наполнение

Размещ

ение

Сдача

Тестирование

и риски

четверг, 15 декабря 2011 г.

ТестированиеПеред тем, как «запустить» готовый сайт в работу, необходимо провести его тщательное тестирование. Этим занимаются специалисты-тестировщики.

Во-первых, тестировщики проводят своего рода «визуальный» контроль – проверяют, как сайт будет выглядеть в разных браузерах и при разных разрешениях мониторов.

Во-вторых, они проверяют полное соответствие сайта техническому заданию, полноту и правильность реализации всех функций, а также проводят «функциональный» контроль, чтобы убедиться в работоспособности всех функций сайта.

В-третьих, происходит «нагрузочное» тестирование, в ходе которого проверяется «поведение» сайта при различном количестве посещений. Цель такого тестирования – исключить сбои в работе сайта (например, «зависания» при больших количествах одновременных обращений к сайту).

Важной частью разработки сайта является обеспечение информационной безопасности, то есть защита информации, размещенной на сайте. Поэтому обязательной составляющей тестирования является проверка на известные и типовые «уязвимости».

Выявление

Организация

Составление ТЗ

Проектирование

Дизайн

Верстка

Программирование

Наполнение

Размещение

Тестирование и риски

Сдача

четверг, 15 декабря 2011 г.

Сдача в эксплуатацию

Если 10 шагов были выполнены правильно, в срок и без нарушений, все что остается - это радоваться

Важные моменты, на которые стоит обратить внимание:

- Удобство использования, Обратная связь с пользователями

- Система управления содержимым

- Оптимизация под поисковые машины

- Кроссбраузерность

- Аналитика

- Интеграция с другими системами и платформами CRM, ERP, 1C и другие

Выявление

Организация

Составление ТЗ

Проектирование

Дизайн

Верстка

Программирование

Наполнение

Размещение

Сдача

Тестирование

и риски

четверг, 15 декабря 2011 г.

•7 ошибок

четверг, 15 декабря 2011 г.

Основные проблемы и ошибки на проекте

1. Авральный старт проекта: Старт проекта в сжатые сроки без введения команды в проект.

Если команда или ответственное лицо не в курсе проекта или знает лишь его часть, чаще всего это приводит к дезориентации и дезинформации других членов команды.

Необходимо срочно устранить недостаток информации, до тех пор, пока этого не будет сделано, результат проекта может быть под большой угрозой.

Как правило, проблема решается сама собой по истечении длительного времени, однако, сопряжена с огромным количеством переделок и доделок.

Как избежать:

Перед началом работы, убедиться в обоюдном понимании проекта на основании 2ух основных документов: ТЗ и БРИФ.

четверг, 15 декабря 2011 г.

Основные проблемы и ошибки на проекте

2. Занижение или завышение значимости проекта: Не объективная оценка проекта влечет за собой массу негативных последствий:

- Неверный тайминг

- Ошибка в оценке стоимости

- Длительное согласование и утверждение документации

Как результат - потерянное время

Как избежать:

После составления технического задания внимательно относиться к ценообразованию и таймингу проекта, сокращение сроков или стоимости не всегда благоприятно для клиента.

четверг, 15 декабря 2011 г.

Основные проблемы и ошибки на проекте

3. Вовлеченность в «Бумажки»

Одним из основных документов на проекте является ТЗ, зачастую клиент скипует этот этап, слепо доверяя Агентству или, наоборот, затягивая процесс согласования.

Как результат - завышенные ожидания или потеря времени на согласование.

Как избежать:

В данном случае существует правило золотой середины, если документ устраивает обе стороны на 99,9%, его можно утвердить и отдавать в работу, так как до согласования работы по сайту вестись не могут, если существует недопонимание или торможение в утверждении определенного этапа работ, можно утвердить документ по функциональным частям или этапам.

четверг, 15 декабря 2011 г.

Основные проблемы и ошибки на проекте

4. Концентрация на частном

Приступая к интересному этапу работ, основной ошибкой команды или заказчика является концентрация на одном конкретном этапе, тем самым упуская из вида остальные задачи, план и тайминг проекта, также к данной проблеме относится микроменеджмент, когда проект разбирается на микрочасти и некоторым из них уделяется чрезмерное внимание.

Как избежать:

Строго следовать таймингу, понимать, что один лишний день на согласование или внесение комментариев сдвигает весь оставшийся тайминг на один день и негативно сказывается на проекте в целом, как правило, в большинстве случаев подобной проблемы полностью исключается этап тестирования и остальные этапы с конца списка.

Большее доверие команде, даже если заказчику кажется, что он лучше знает, попытаться услышать и принять доводы программистов, арт-директоров и других участников процесса.

четверг, 15 декабря 2011 г.

Основные проблемы и ошибки на проекте

5. Отсутствие понимания работы агентства

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

Даже если находится возможность сдвинуть проект на некоторое время, нужно учитывать, что весомый комментарий запускает механизм 11 шагов с самого начала.

Если этого не происходит, а комментарий поступает в работу в обход предыдущим шагам, значит его нет в ТЗ, значит неизвестно, кто его будет делать, когда и как. При большом количестве подобных комментариев проект получается далек от идеала (задуманного).

Как избежать:

Строго следовать таймингу, в случаях, когда возникает необходимость в глобальных комментариях, учитывать специфику работы над проектом и работу агентства.

Если клиент получает новый результат через час - не радоваться и думать, что же еще можно изменить, уточнить, не повлечет ли это к негативным последствиям, внесено ли это в ТЗ, видел ли «это» технический директор и Арт-директор.

NB: Агентство заинтересовано в качественном проекте не меньше, а иногда даже больше клиента, так как премии и фестивали выигрывают только лучшие!

четверг, 15 декабря 2011 г.

Основные проблемыи ошибки на проекте

6. Отсутствие консолидированного решения либо изменения решения в ходе работы

Часто случается, что агентство, получая фидбек от заказчика, отдает его в работу, на данную задачу выделяется ресурс и его время, дополнение или изменение задания требует дополнительного времени ресурса или подключения дополнительных ресурсов, что приводит к перепланированию и затягиванию сроков.

Как избежать:

Фидбек от заказчика должен поступать в оговоренный срок и после принятия в работу не изменяться, в данном случае гарантируются наименьшие трудозатраты и предоставление результатов в максимально сжатый срок.

четверг, 15 декабря 2011 г.

Основные проблемыи ошибки на проекте

7. Предоставление неполной или неточной информации в установленные сроки

Случается, что срыв сроков происходит даже тогда, когда все готово вовремя или даже заранее.К Предоставлению информации относятся:- предоставление медиа плана- предоставление текстов о продукции или об акции- предоставление условий проведения конкурса или акции

и так далее

Как избежать:

Информация от заказчика должна поступать в оговоренный срок и после принятия в работу не изменяться, это гарантирует появление информации и минимальные сроки в реализации.

четверг, 15 декабря 2011 г.

•5 итогов

четверг, 15 декабря 2011 г.

Подведение итоговКритерии оценки для сайта бренда:

1) ИМИДЖ

Оценка графического исполнения брендинговых задач: четкость донесения УТП, красота и гармоничность дизайн решения, удобство в использовании.

четверг, 15 декабря 2011 г.

Подведение итогов

1)ИМИДЖ: ХОРОШО

Четко прослеживаетсябрендинг

Общее ощущениемягкости и нежности:цвет, плавные линии,анимация, градиенты

В центреактуальноепредложениеи продукт

Баннерыспециальныхактивацийприследуютцель вовлечь пользователявовнутрь

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

четверг, 15 декабря 2011 г.

1)ИМИДЖ: ПЛОХО

Хотя и присутствует общая цветоваямодель бренда,но в рамках сайта реализованакрайне не правильно:обилие сочетанийкрасного и синего (противоположных по цветовому кругу)затрудняет восприятиеинформации своейконтрастностью.

Продукция “зарезана”.У пользователяподсознательно создается ощущение, что бренд не гордиться своей продукцией, а наоборотстыдиться.

Современному потребителю, кажетсястранным пребываниев “мире продуктов дляухода за телом”: имиджне сочетается со слоганом.

Слово “Уход за телом” повторяется на странице три раза, что говорит о свойствах продукции, на страницу которой УЖЕ попал пользователь. Он уже заинтересован именно в этой продуктовой линейке. Бренд в этот момент обязан зацепить эмоционально потребителя, но этого не происзодит. Одной картинки не достаточно.

Подведение итогов

четверг, 15 декабря 2011 г.

Подведение итоговКритерии оценки для сайта бренда:

2) СТРУКТУРА И НАВИГАЦИЯ

Оценка доступности и простоты поиска информации о бренде и продукте.

четверг, 15 декабря 2011 г.

2)СТРУКТУРА И НАВИГАЦИЯ: ХОРОШО

Четкая и понятнаяструктура сайта:рассказ о брендеи продукции

Удобная навигация:1) однозначное, считываемое меню2) отдельно вынесено функциональное меню 3) интригующиепризывающие перейти внутьсайта баннерырубрик4) баннеры актуальных активаций

Подведение итогов

четверг, 15 декабря 2011 г.

2) СТРУКТУРА И НАВИГАЦИЯ: ПЛОХО

Неочевидная навигация:нужно нажать на картинку,которая визуально не соответствует рубрикам

Для альтернативы, пришлось сделать кнопку MENU, которую трудно заметить в течение первых секунд (т.е. во время принятия решения пользователем о листинге сайта)

Чтобы пользователю было все сразу ясно необходимо показать сразу всю структуру сайта. Здесь же нужно заметить нестандартный, дополнительный скролер, чтобы увидеть все содержание сайта.

Подведение итогов

четверг, 15 декабря 2011 г.

Подведение итоговКритерии оценки для сайта бренда:

3) ИНТЕРАКТИВНОСТЬ

Оценка степени реализации механизмов вовлечения потребителей с помощью интерактивных технологий. Степень использования и сложность реализации.

четверг, 15 декабря 2011 г.

3) ИНТЕРАКТИВНОСТЬ: ХОРОШО

Сайт полностьюсоздан с помощьюflash технологий

Механики вовлечения: пользователи получают возможность создать свои видео клипы,чатиться, пользуясь web 2.0 инструментами создавать новые объекты

Система промо активации: стимулирование на каждодневное возвращение пользователей на сайт

Онлайн городвоплощает в себеобщую идею коммуникациибренда: ШОК дает возможность тебевыделиться средиокружающих

Подведение итогов

четверг, 15 декабря 2011 г.

3) ИНТЕРАКТИВНОСТЬ: ПЛОХО

Никакой интерактивности:описание продукта,схема применения и все...

Подведение итогов

четверг, 15 декабря 2011 г.

Подведение итоговКритерии оценки для сайта бренда:

4) РАБОТА С ПОЛЬЗОВАТЕЛЯМИ

Оценка реализованных инструментов коммуникации с пользователями в рамках сайта. Оценка работы команды по онлайн коммуникации: количество посещений / регистраций / полезных действий пользователей.

четверг, 15 декабря 2011 г.

4) РАБОТА С ПОЛЬЗОВАТЕЛЯМИ: ХОРОШО

БрендированноесообществоAXEEFFECT:300 000 пользователей.

Общение, знакомства,конкурсы, блоги, чат и тд. и тп.

Подведение итогов

четверг, 15 декабря 2011 г.

4) РАБОТА С ПОЛЬЗОВАТЕЛЯМИ: ПЛОХО

Работа с пользователямиограничиласьподведениемитогов промоакции и обоями для рабочего стола

Подведение итогов

четверг, 15 декабря 2011 г.

Подведение итоговКритерии оценки для сайта бренда:

5) КОНТЕНТ

Оценка качества и релевантности содержимого сайта потециальной ЦА: тексты / фото и видео материал / элементы социализации (кросспостинг в блогосферу / виджеты).

четверг, 15 декабря 2011 г.

5) КОНТЕНТ: ХОРОШО

Уникальный, актуальный,релевантный ЦА контент (статьи,видео, фото) даетвозможность брендупривязать к себе интерес потребителя.

100 000 зарегистрированныхпользователей

Подведение итогов

четверг, 15 декабря 2011 г.

5) КОНТЕНТ: ПЛОХО

Нерелевантный для ЦА контент от бренда приводит к тому, что пользователям просто не интересно приходить на сайт. Vechegreenka - 100 посетителей в день, без медийных активаций (лето 2008).

Самые ужасные звуки мира?

Кровосток?

Подведение итогов

четверг, 15 декабря 2011 г.

Спасибо за внимание Вопросы?

четверг, 15 декабря 2011 г.