Разработка многостраничного сайта для ювелирного салона

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

Сайт должен быть понятным и стильным, при этом динамичным и захватывающим

Техническое задание:

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

Цель разработки:

женщины от 20 лет

Основная ЦА:

Этапы разработки:

1 Этап

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

Расстановка акцента на качественных и крупных фотографиях

2 Этап

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

Выбор цветовой гаммы и шрифтов

В навигационное меню мы вынесли 4 основные страницы: Главная, О галерее, Коллекции и Мероприятия. Также добавили иконками ссылки на соц. сети и связь через WhatsApp. Разместили кнопку для звонка и кнопку корзины, чтобы пользователь мог сразу перейти к выбранным украшениям. Таким образом меню получилось очень функциональным и удобным

Создание общей структуры сайта

3 Этап

4 Этап

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

Оформление главной страницы

5 Этап

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

Оформление событий частной галереи

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

Оформление подробной информации

6 Этап

7 Этап

Расположили большой блок заявки для заказа звонка от менеджера, чтобы покупатель мог узнать ответы на все свои вопросы. Самым последним блоком стали “Контакты”. Для каждого адреса мы добавили фотографию и номер телефона.

Настройка возможности обратной связи

8 Этап

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

Оформление страницы "О галереи"

9 Этап

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

Оформление каталога

10 Этап

Далее была реализована логика оформления заказа: клиент выбирает понравившееся украшение и нажимает кнопку «Купить». Товар сразу же попадает в его корзину, которая видна на любой странице сайта вместе с отображением количества добавленных украшений. Переходя в корзину клиент оставляет свои данные и нажимает кнопку «Заказать» — эта кнопка служит для заказа обратного звонка от менеджера ювелирной галереи. Менеджер связывается с покупателем, уточняет критерии заказа и сообщает итоговую стоимость, после чего производится оплата заказа.

Логика оформления заказа

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

Оформление страницы "Мероприятия"

11 Этап

Для сайта мы настроили большое количество стильных анимаций и плавных переходов для динамичности и привлекательности

12 Этап

Провели необходимые SEO-настройки: для каждой страницы выставили заголовок h1; сделали описание и заголовок страниц; добавили favicon. Подключили Яндекс Метрику, Яндекс Вебмастер, Google Search Console, Google Analytics для отображения сайта
в поисковой выдаче и дальнейшего анализа посещаемости

SEO-Настройка сайта

13 Этап