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

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

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

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

Для представителей церкви (которые занимают значительную долю ЦА) заказчик просил выделить свой раздел меню — чтобы церковнослужители сразу переходили туда и не смотрели "светские" работы, которые для них могут быть довольно провокационными:

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

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

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

На внутренних страницах поддержали мозаичную тему: иллюстрации разного размера визуально напоминают панно.

На 404-й тоже поселился мозаичный узор:

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

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

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

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

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

И конечно, как любой современный проект, новый сайт для «Мозаики Центра» адаптивен: