Создание веб-ресурса Задачи, Процесс, Коммуникации, Результат (мини-кейс)

Дмитрий Подлужный

Веб-студия Spacebox dp@spacebox.ru

UX-Среда №1430 января 2013

Речь пойдет об одном веб-ресурсе, который мы делали по заказу ГИВЦ Министерства Культуры.

К нам обратился ГИВЦ для того, чтобы мы помогли создать мобильную версию внутреннего веб-ресурса для мультимедийной выставки Россия.Сама выставка задумывалась как передвижной мультимедийный комплекс, который должен был демонстрировать разные аспекты культурной жизни России. И в рамках этой выставки пользователям хотели дополнительно предоставить мобильный доступ к ее ресурсам.С самого начала технологически было решено создавать все на базе веб технологий в силу высокой скорости разработки. Фактически нашей задачей было сделать сайт.

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

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

Решение: адаптивный дизайн. Учитывая аудиторию и то, что мы не знаем каким устройством воспользуется посетитель, мы решили делать адаптивную версию сайта.

Адаптивный подход подразумевает, что в зависимости от размера экрана пользователя сайт меняет форму подачи информации, чтобы пользователю было удобно с ней взаимодействовать.Т.е. не изменяя контент мы, средствами каскадной таблицы стилей (CSS) и Java Script изменяем внешний вид страниц.

Начало работы. Мы начинаем работу над всеми проектами с проектирования архитектуры и создания условных макетов страниц.

Карта сайта. Если с картой сайта все понятно, то скетчи или вайрвеймы, не так давно стали распространенным практикой при разработке.

Вайрфреймы. За счет них мы решаем несколько важных задач, в том числе: 1) Формализуем техническое задание для дизайнера; 2) Обеспечиваем ТЗ на контент; 3) Уточняем объем работ; 4) Получаем ранний прототип, чтобы иметь возможность оценить технические аспекты реализации и юзабилити будущего проекта.

Делает вайрфеймы. Размещаем информацию, пробуем разные варианты подачи материала.

Дальше делаем вайрфреймы. После нескольких итераций останавливаемся на отдельном решении.

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

Решение проблем коммуникации. Ко всем возможным дистанционным формам: почта, чат, скайп, аська, телефон – мы добавляем Басекамп в качестве системы ведения проекта и КонцептШаре для обсуждения визуальных решений. Обе системы помогают нам документировать общение, централизуют хранение информации, облегчают доступ к ней.

Окончательные макеты страниц передаем в дизайн и получаем первые результат. Потом еще вариант.

Пробуем варианты дизайна.

Пробуем варианты дизайна, обсуждаем их через Концептшаре.

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

Техническая реализация. Выбираем довольно стандартное технологическое решение: HTML 5 и jQuery. Чтобы облегчить себе техническую работу и иметь меньше проблем с кросбраузерностью в качестве отправной точки в верстке мы берем CSS фреймворк Foundation. После верстки сразу начинаем тестировать HTML прототип на доступных устройствах. Устройств много, браузеров еще больше, ни один не работает идеально, т.е. если мы возьмем спецификацию W3, то окажется, что у браузеров есть ошибки или они не полностью поддерживают спецификации. Выявляем и устраняем несколько неочевидных проблем, с которыми мы не ожидали встретиться, и начинаем сборку сайта на базе UMI CMS.Дальше наполняем сайт информацией и еще раз тестируем, снова натыкаемся на ряд проблем, но уже не столько с технической реализацией, сколько с контентом. Устраняем их. Всегда остаются моменты, которые невозможно предсказать, до появления реального кода, но большую часть проблем можно оттестировать и исправить, при наличии времени и нужных устройств еще до стадии серьезного программирования.

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

Итого. Всего на разработку ушло 22 дня. Сайт в итоге состоит из 429 страниц, имеет русскую и английскую версии. Общий объем информации более 12 Гигабайт.

В качестве выводов или то на что хочется обратить внимание. 1) Ставя задачи перед разработчиками, обязательно подумайте о целевой аудитории и выбирайте решения под нее. 2) Делайте прототипы: будь то бумажные, прототипы на основе скетчей, HTML прототипы – для каждого этапа всегда найдется свой способ. Это лучшее решение, чем исправлять уже готовый продукт. 3) Стоит обратить внимание на то, как будет строиться коммуникация в проекте, это, как минимум, сэкономит время.

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