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

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

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

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

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

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

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

Основная ЦА:

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

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

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

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

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

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

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

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

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

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

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

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

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

12 Этап

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

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

13 Этап