- Заказчик
- Артамонов Антон Анатольевич - руководитель Института Воды
- Задача
- Разработать объемный информационный ресурс, позволяющий ознакомиться с Институтом, лабораториями и музеями воды, с ГОСТами и СанПиНами по воде, а также книгами о воде, поддерживаемыми
С чем работаем?
В этот раз перед нами встала нетривиальная и интересная в реализации задача – необходимо было в условиях некрупного бюджета сконструировать целый портал, который должен был стать оплотом знаний о воде. Портал должен быть представлен пользователям как на русском, так и на английском языке, с возможностью в будущем переводить сайт и на другие языки. Вместе с информационно-просветляющей составляющей ресурс должен был вобрать в себя функции «народного» рейтинга воды, реализуемой по всему миру, а также обеспечивать помощь экспертам, которые изучают воду и проводят научные работы по изучению и выявлению различных свойств воды.
Идея о разработке портала на фреймворке была отброшена по причине высокой стоимости таковой разработки. Поэтому в качестве платформы для разработки сайта Института Воды выбрана CMS-система WordPress – всемирно известная бесплатная платформа для разработки сайтов разной сложности (в том числе и крупных порталов). Наша команда на профессиональном уровне работает с платформой WordPress и уже имеющиеся наработки позволили разработать ресурс, удовлетворяющий всем требованиям заказчика.
Как проходила работа?
Формирование информационного фундамента
Работа над столь амбициозным проектом требовала особого внимания к деталям и тщательно проработанного технического задания, которое должно было вобрать в себя подробное описание каждого раздела и все функциональные особенности будущего интернет ресурса.
Так как предполагаемый портал имел весомый уклон в научную сторону и вбирал в себя обширный функционал, даже детальный бриф заметно мало раскрыл бы общую картину разрабатываемой информационной платформы. Именно поэтому все нюансы выявлялись по ходу встреч с Антоном Анатольевичем, а техническое задание составлялось и скрупулезно дорабатывалось от встречи к встрече, так как по замыслам заказчика, планируемый ресурс имел еще более грандиозный масштаб, чем предполагалось. Дабы обеспечить легкий старт, проект решили развивать поэтапно, постепенно расширяя функционал до изначально планируемых масштабов.
В процессе формирования технического задания стало ясно с чего стоит начать прототипы, а после разрабатывать дизайн – ими оказались раздел с лабораториями, лекториум, издательство и раздел с музеями. Именно в этих разделах содержится основной массив информации, который требовал упорядочивания и приведения к легкодоступному виду.
Техническое задание на создание портала «Институт Воды»
Как только сформировалась конечная версия технического задания, со структурой, референсами для дизайна будущего сайта и четко прописанным функционалом, работа перешла в не менее важный этап прототипирования всех разделов и страниц будущего сайта.
Прототипирование. Собираем схемы сайта
Прототипов по итогу проделанных работ оказалось достаточно много – итого было составлено порядка 31 прототипа, некоторые из них имели схожий внешний вид, но тем не менее создавали общую картину сайта. Прототипирование сайта Института Воды во многом позволило сразу же понять, где потребуется детальная проработка механизмов функционала.
Главная страница 
Прототип главной страницы Института Воды
Главная страница, как и положено домашней странице сайта, раскрывает идеологию Института Воды и предоставляет возможность перейти к основным разделам сайта: разделы лабораторий, музеи воды, лекториум, издательство, партнёры и другие.
Раздел органолептической лаборатории
Раздел органолептической лаборатории со списком различной воды реализуемой разными производителями
В разделе органолептической лаборатории будет производиться «народное» голосование, для того чтобы определить предпочтения посетителей портала к той или иной воде. Для пользователей доступен поиск по названию и фильтрация по категориям и минералам, содержащимся и в воде.
Карточка выбранной воды в разделе органолептической лаборатории
Попадая в карточку товара, посетитель может выставить оценку и оставить отзыв о воде.
Остальные лаборатории и другие разделы сайта
На портале каждая лаборатория представляет собой раздел, описывающий деятельность лаборатории, а также отображающий статьи лаборатории, фотогалерею и видеогалерею лаборатории.
В разделе «Лекториум» представлены видеозаписи лекций, презентации, записи научных семинаров, фильмы о воде. Раздел «Издательство» содержит каталог книг, опубликованных в издательстве-партнёре.
На сайте представлен раздел музеев воды мира. У каждого музея есть описание, галерея фотографий с описаниями. В будущем планируются интерактивные 3D-туры по музеям.
Верхний ряд (слева направо): страница о лаборатории, список статей в лаборатории, страница видеозаписи в разделе лаборатории. Нижний ряд: страница книги, страница музея в разделе интерактивных музея воды, страница вопрос-ответ.
Как только сформировался весь массив прототипов будущие макеты сайтов были переданы дизайнеру для формирования дизайн концепции.
Преобразуем прототипы в дизайн
Работа над дизайном началась с главной страницы сайта. Необходимо было в первую очередь понять, в какую сторону двигаться. Важно было не превратить интернет-ресурс в типичный научный сайт, переполненный информацией, и сохранить дружелюбие интерфейса к пользователям, и при этом не потерять серьезность в изложении какой либо информации.
Первая версия дизайн-макета главной страницы и последующие итерации
Первые варианты макетов имели ряд доработок. Схематичные изображения из основного слайдера убрали, из интерфейса убрали серый цвет. Изображения в некоторых блоках сменили на более близкие к тематике воды. Как только финальные правки были внесены главная страница сайта приобрела конечный вид:
Главная страница
После того как стилистика сайта была определена, все силы стали направлены на проработку оставшихся страниц.
Страница статей и страница фотогалереи раздела лабораторий
Страница видео в подразделе видеогалереи раздела лаборатории
Страница раздела органолептической лаборатории и страница раздела издательства
Страница книги в разделе библиотека
Как только работа с подготовкой макетов была завершена, был подготовлен стайлгайд для унификации стилей на всем сайте, а также отображения состояний интерактивных элементов.
Стайлгайд для сайта Института Воды
Как только все необходимые элементы и состояния элементов были скомпонованы в едином макете, все PSD макеты отправились к разработчикам для вёрстки и интегрирования в систему управления контентом.
Настройка системы управления контентом и завершение проекта
По итогу ознакомления с дизайном сайта, разработчики начали кропотливую работу по настраиванию миниатюр, стилизации элементов и массивов информации, настройке фильтрации, поиска и вывода карточек статей, воды и новостей, а также многих других нюансов front- и back-end разработки.
Портал Института Воды должен быть мультиязычным. Реализация мультиязычности на сайте заняла чуть ли не половину от общего времени разработки портала.
Русская и английская версии портала Институт Воды
Как только реализация всех заложенных в техническом задании нюансов была закончена, сайт был перенесен на основной домен h2o-institute.com, где успешно функционирует и сейчас.
Новые функции
Позже, на сайте необходимо было реализовать новый функционал — модуль влияния условий внешний среды на человека, модуль расчета космической радиации при перелете, модуль расчета радиации за 12 месяцев.
Новые функциональные модули
Добавился новый раздел — родники России.
