Плиточка к плиточке
Сайт для мастерской мозаики: разноцветный, уютный, душевный
Мозаичные панно известны с древности, но многие из нас больше помнят их по фасадам советских зданий: красочные мозаики с сюжетами о спортсменах, комсомольцах и героях труда украшают некоторые здания и по сей день. История русской мозаики как искусства уходит гораздо глубже, но поскольку СССР было светским государством, церковные мозаики оказались под запретом, а вместе с этим стали забываться и древние техники. После распада Советского Союза русской мозаике повезло ещё меньше — комсомольцев не стало, и панно с ними слагать уже не было нужды.
«Мозаика-Центр» — крупнейшая в России художественная мастерская мозаики, объединившая лучших художников, которые создают мозаичные шедевры из камня, стекла и смальты. Мечта заказчика — возродить этот вид искусства, сделав его вновь популярным и востребованным: как в церковном мире, так и среди обычных людей.
И под столь амбициозную задачу заказчику требовался новый впечатляющий сайт-презентация с большими яркими фотографиями работ, понятными описаниями услуг и простой формой обратной связи. Что мы и сделали в этом камерном ламповом проекте, вызывающем тихий восторг.
«Мозаика-Центр» — крупнейшая в России художественная мастерская мозаики, объединившая лучших художников, которые создают мозаичные шедевры из камня, стекла и смальты. Мечта заказчика — возродить этот вид искусства, сделав его вновь популярным и востребованным: как в церковном мире, так и среди обычных людей.
И под столь амбициозную задачу заказчику требовался новый впечатляющий сайт-презентация с большими яркими фотографиями работ, понятными описаниями услуг и простой формой обратной связи. Что мы и сделали в этом камерном ламповом проекте, вызывающем тихий восторг.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707299802/tild3236-6136-4362-b434-663938376636__-__empty___.png)
Задачи
- 1Создать современную дизайн-концепцию.
- 2Продумать оптимальную структуру и красочно подать контент.
- 3Адаптировать сайт под разные типы устройств.
Аналитика
Где вы в последний раз видели мозаику? На фасаде старого здания? В бассейне или хаммаме? На самом деле для мозаики есть гораздо больше применений, чем вы знаете:
- мозаичные панно и иконы для церкви,
- светская мозаика для оформления общественных помещений (гостиницы, торговые центры, рестораны),
- домашняя мозаика для оформления фасадов частных домов и внутреннего декора.
Работы мастеров «Мозаика Центр»
И для каждого из направлений своя целевая аудитория с определенными нуждами: представителям церкви важна возможность отреставрировать старые работы, представителям бизнеса — цены, домовладельцам — возможность заказать в другой регион. И конечно, всем целевым группам важны отличия от конкурентов и преимущества.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707299802/tild3963-6362-4537-a631-613666316332__-__empty__1.png)
Занятный факт
Наш московский офис расположен на ул. Бауманской, а в холле станции метро «Бауманская» сложную мозаику советских времен восстанавливали именно мастера «Мозаика-Центра».
Наш московский офис расположен на ул. Бауманской, а в холле станции метро «Бауманская» сложную мозаику советских времен восстанавливали именно мастера «Мозаика-Центра».
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707299802/tild3364-3737-4461-b563-393733636338__-__empty__018_pc288982.jpg)
Для представителей церкви (которые занимают значительную долю ЦА) заказчик просил выделить свой раздел меню — чтобы церковнослужители сразу переходили туда и не смотрели "светские" работы, которые для них могут быть довольно провокационными:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707299802/tild3532-3034-4130-b336-383831313164__-__empty__photo.png)
Дизайн
Если взглянуть на сайты конкурентов, практически на каждом фото работ — главный акцент главной страницы. И это неудивительно: мозаика сама по себе сложный продукт, и очень выгодно смотрится на контрасте с минималистичным интерфейсом.
Заказчик с самого знакомства просил сделать сайт таким, чтобы интерфейс не подавлял фото портфолио, и даже нарисовал, как бы ему хотелось воплотить это в проекте. Поэтому в промо-блоке обеих версий появляется галерея из работ, похожая на альбом искусств. Следом за промо снимаются основные вопросы пользователей: немного о студии, самой мозаике, команде и свежие новости.
Версии отличаются компоновкой меню и гаммой — основная с фиксированным меню сверху выполнена в светлых тонах, альтернативная играет на контрасте: меню расположено сбоку, и у всей страницы тёмная подложка, выделяющая контент ещё ярче. Заказчику больше понравился второй вариант.
Версии отличаются компоновкой меню и гаммой — основная с фиксированным меню сверху выполнена в светлых тонах, альтернативная играет на контрасте: меню расположено сбоку, и у всей страницы тёмная подложка, выделяющая контент ещё ярче. Заказчику больше понравился второй вариант.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707299802/tild3139-6637-4138-b466-333830303834__-__empty__photo.jpg)
На внутренних страницах поддержали мозаичную тему: иллюстрации разного размера визуально напоминают панно.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707299802/tild3263-3535-4433-b962-336336356161__-__empty__mosaic-works-list.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707299802/tild3838-3437-4539-b435-336233383063__-__empty__mosaic-services.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707299802/tild6465-3964-4338-b861-396537333462__-__empty__mosaic-news.png)
Идея с такой компоновкой контента возникла потому, что у исходных фото от заказчика не было единого формата: они были и горизонтальными, и вертикальными — и все с разным соотношением сторон. Получившиеся страницы хорошо вписываются в общую концепцию сайта с нарочитой вёрсткой не по сетке.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707299802/tild3534-3438-4230-a130-353166616536__-__empty__photo.png)
Евгений
Арт-директор
На 404-й тоже поселился мозаичный узор:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707299802/tild6230-3362-4138-a233-376265613766__-__empty__mosaic_404-1.png)
И даже слон в футере собирается из кусочков:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707299802/tild3661-3838-4035-a338-663133613532__-__empty__slon-3.gif)
Разработка
Фишка сайта — слайдер на всю ширину экрана. В плашке переключения слайдов есть что-то театральное: подписана текущая работа, указан номер слайда из общего количества и под стрелочкой справа мини-анонс следующей работы.
При знакомстве заказчик высказал пожелание, чтобы эффекты не были слишком навязчивыми и сложными, поэтому всю работу с версткой мы выстроили на микроанимациях и простых эффектах, которые не отвлекают на себя внимание, а просто делают страницу отзывчивой.
В блоке с работами мы предложили деление по тегам, чтобы можно было фильтровать мозаики по интересующей потенциального заказчика технике и материалу: из камня или стекла, например.
Сайт технологически несложный, и чтобы упростить реализацию ряда инфоразделов, мы предложили сделать более сложный базовый шаблон с набором симпатичных вариантов верстки контента: списками, слайдерами, кнопками и цитатами. А внутри страницы конкретной работы можно размещать большие красочные фото процесса создания мозаики.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707299802/tild6538-3136-4138-a565-633134616230__-__empty____.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707299802/tild3566-3664-4839-a264-653636303234__-__empty____1.png)
Одной из целей нового сайта было увеличение конверсии — поэтому мы добавили простую форму обратной связи, куда потенциальный заказчик может прикрепить иллюстрацию или фото работы, которую он хотел бы воплотить у себя. Она появляется при клике на кнопку в боковом меню, а также её можно заполнить со страницы контактов:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707299802/tild3539-3934-4931-b666-353865633635__-__empty__photo.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707299802/tild6639-3662-4232-b031-666432393163__-__empty__photo.png)
И конечно, как любой современный проект, новый сайт для «Мозаики Центра» адаптивен:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707299802/tild3938-3334-4132-b566-373732613338__-__empty__photo.png)
Заказчик с самого знакомства просил сделать сайт таким, чтобы интерфейс не подавлял фото в портфолио — стильным, современным, но максимально простым и ненавязчивым. Даже на верстке попросил упростить пару предложенных нами эффектов, чтобы «не отвлекали» и «не утяжеляли» работу с сайтом. Порадовал подход клиента при подготовке к проекту — с самого начала было понимание, что хотелось видеть на сайте по визуалу и функционалу.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707299802/tild3431-6234-4831-b763-323132633562__-__empty__dina.jpg)
Дина
Руководитель проекта
Работа c командой Сибирикс принесла нам огромное удовольствие. В итоге мы получили яркий рабочий сайт, без которого уже не мыслим свою дальнейшую работу.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707299802/tild6638-6237-4238-b731-396562396562__-__empty__1.png)
Андрей Точилкин
Руководитель мастерской «Мозаика Центр»
Готовый проект