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

В студию WEB-AiM поступил довольно нестандартный заказ от русскоговорящего заказчика из дальнего зарубежья. Нестандартной была тематика сайта, которая обычно считается табуированной в среде разработчиков – религия.

Но после переговоров проект показался нам нетиповым, технически сложным и интересным.

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

• Интернет-магазин с нюансами типа автоматического пересчета валют.
• Перечень религиозных объектов с выводом на очень нетипичную анимированную карту-глобус.
• Организация всех функциональных особенностей новостного портала с лайками/дизлайками, добавлением в избранное, комментариями, рубрикацией и так далее.
• Дополнительно – создание мобильного приложения для iOS и Android, в котором исполнители заказов могли бы видеть статусы заказов и выполнять нужные действия по их обработке.

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

Схема также помогает декомпозировать все, что непонятно в данный момент, и «продвинуться» в понимании.

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

На этом же этапе продумываем все детали сложных элементов сайта:

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

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

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

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

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

По сути, она представляет из себя несколько «срезов» проекта, которыми пользуются разные специалисты в процессе разработки.

Дизайнер

• Видит рекомендуемые сетки верстки, под которые ему нужно будет создавать дизайн.
• Видит заранее, какие наборы иконок ему нужно будет создавать.
  
• Видит, какие цветовые решения были выбраны.
  

Разработчик

• Знает, какие свойства и у каких объектов должны быть, какие должны вывестись в фильтры, а какие должны использоваться в работе другого функционала.

Менеджер

• Занимается расчетом и контролем работ по проекту.
• Имеет все данные для того, чтобы корректно разбить проект на этапы, посчитать объем работ по каждому из этапов, чтобы согласовать с заказчиком и бюджет и сроки.
  

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

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

Дизайн, это как шутка – если его нужно объяснять, значит он плохой!

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

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

• Прототип главной страницы
• Прототипы нескольких видов контентных страниц сайта с различным объемом текста и блочностью
• Прототипы специальных контентных страниц с дополнительными блоками
• Прототип страницы «Святые места»
• Прототип общей новостной страницы
• Прототип страницы конкретной новости
• Прототип страницы с перечнем доступных 3D-туров
• Прототип общей страницы каталога
• Прототип страницы товарной категории
• Прототипы страниц заказа услуги
• Дополнительный прототип «малой корзины»
• Прототип полной страницы корзины
• Прототип чекаута (страницы оформления заказа)
• 6 прототипов для страниц личного кабинета пользователя

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

• новости
• объекты
• магазин
• личный кабинет

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

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

Процесс создания дизайн-макетов стартовал с создания визуальных стандартов для текстового контента.

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

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

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

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

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

• Элементы деловой документации
• Печатная рекламная и имиджевая полиграфическая продукция
• Web, а также электронные носители фирменного стиля
• Сувенирная и презентационная рекламная продукция
• Элементы упаковки
• Униформа сотрудников
• Элементы интерьера и экстерьера

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

При выборе шрифтов мы руководствовались следующими правилами:

• Читаемость в любом размере и цвете. Только при соблюдении этого условия потребитель сможет понять суть вашего рекламного посыла и дизайн фирменного стиля сыграет вам на руку.
• Хорошее отображение на различных устройствах.
• Уместность. И шрифт не должен мешать восприятию контента.
• Сочетаемость. Если используется несколько шрифтов, они должны сочетаться между собой, иначе восприятие информации потребителем может быть нарушено.
• Акцентирование возможно при использовании нескольких стилей одного шрифта.

В качестве фирменных шрифтов определены следующие гарнитуры: Montserrat, Muli

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

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

Это был большой и сложный этап – много согласований, много дополнений, огромное желание «впихнуть как можно больше в как можно меньшее пространство» со стороны заказчика и работа менеджера и дизайнера над тем, чтобы «оставить чистый интерфейс, однозначно понятный пользователю».

Бились до победного и в итоге все победили! Получилось и понятно и привлекательно. И самое главное – дизайн, казалось бы архаичного и «немодного» проекта, стал выглядеть современно.

• Нет никаких «буквиц, старорусских ятей» и всего такого. Сдержанная, но четко выраженная цветовая гамма, которая не мешает восприятию контента.
• Продуманные интерфейсы, которые одинаково хорошо «считываются» как на мобильном телефоне, так и на десктопе.
• Цветовое зональное кодирование и еще куча всяких нюансов, которые остаются незаметными, но работают как автомат Калашникова – просто и всегда.

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

Задача – превратить все «картинки» в html-код. Картинки берем в кавычки, поскольку мы уже достаточно давно ушли от «рисования» макетов в фотошопе к современным, гибким и более подходящим приложениям специально для прототипирования.

С 2018 года часть нашей команды использует скетч, другая — не так давно подсела на фигму. У обеих программ есть ряд преимуществ, во многом они схожи. Но одно можно сказать точно — они обе предназначены для прототипирования. А использование специальных инструментов дает существенный прирост и в скорости и в качестве работы команды разработки.

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

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

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

1. Системный администратор разворачивает тестовый сервер.

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

3. Контент-менеджеры, которые помогают заказчику подготовить имеющиеся у него текстовые, видео, фото материалы и сделать первоначальное наполнение.

Кстати, заказчики зачастую недооценивают необходимость и ёмкость этапа первоначального наполнения, поэтому просто для статистики и понимания – мы создали и наполнили на первом этапе:

• 278 новостей (перенесли со старого проекта заказчика, очистили форматирование, привели картинки к необходимому формату и разместили в нужных рубриках).
• Создали ~100 товаров, заполнили все параметры и свойства, описания и изображения, аккуратно разложили по категориям.
• Разместили тексты для простых контентных страниц.

Одни только работы по приведению контента в нормальное состояние и его размещение заняли две недели.

В следующей части этого кейса рассмотрим подробней функционал сайта.