С чем работаем?

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

Идея о разработке портала на фреймворке была отброшена по причине высокой стоимости таковой разработки. Поэтому в качестве платформы для разработки сайта Института Воды выбрана CMS-система WordPress - всемирно известная бесплатная платформа для разработки сайтов разной сложности (в том числе и крупных порталов). Наша команда на профессиональном уровне работает с платформой WordPress и уже имеющиеся наработки позволили разработать ресурс, удовлетворяющий всем требованиям заказчика.

Как проходила работа?

Формирование информационного фундамента

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

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

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

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

Прототипирование. Собираем схемы сайта

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

Главная страница

Главная страница, как и положено домашней странице сайта, раскрывает идеологию Института Воды и предоставляет возможность перейти к основным разделам сайта: разделы лабораторий, музеи воды, лекториум, издательство, партнёры и другие.

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

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

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

Остальные лаборатории и другие разделы сайта

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

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

На сайте представлен раздел музеев воды мира. У каждого музея есть описание, галерея фотографий с описаниями. В будущем планируются интерактивные 3D-туры по музеям.

Здесь представлены (слева-направо):

1. Страница «О лаборатории»;
2. Список статей лаборатории;
3. Страница видеозаписи в разделе лаборатории;
4. Страница книги;
5. Страница музея в разделе интерактивных музея воды;
6. Страница «Вопрос-ответ».

Как только сформировался весь массив прототипов, будущие "макеты" сайтов были переданы дизайнеру для формирования дизайн концепции.

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

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

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

Стартовый экран конечного дизайн-макета сайта Института Воды даёт пользователям понять, куда они попали и чем занимется Институт.

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

Каждая лаборатория может содержать публикуемые ими статьи и фотогалерею лаборатории.

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

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

На странице книги отображается автор, год издания и описание книги.

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

Настройка системы управления контентом и завершение проекта

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

Портал Института Воды должен быть мультиязычным. Реализация мультиязычности на сайте заняла чуть ли не половину от общего времени разработки портала.

После реализации всех заложенных в техническом задании нюансов, сайт был перенесен на основной домен h2o-institute.com, где успешно функционирует и сейчас.

Посмотреть кейс на сайте студии

Перейти на сайт