Web Design for Jewelry Online Store Charm

You are here: Home / Web Design for Jewelry Online Store Charm

Web Design for Jewelry Online Store Charm

Web Design of the Home page for the Jewelry Online Store Charm

By order of our colleagues from Dolphin studio we developed a design for the Charm Jewelry Online Store. According to the terms of reference the website design should be light and elegant, airy, with subtle openwork elements. At the same time the graphic solution should not distract attention from the products themselves but should emphasize and highlight them. Therefore we made the main working field of the online store white, framing it with a purple-violet background. This is not just taste preferences but the compliance of corporate colors using for business cards and other printing goods of the jewelry store which all are printed on purple cardboard.

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

1-й уровень — мужские изделия слева, женские по центру и справа детские изделия,
2-й уровень — заголовок (Изделия из золота, Изделия из серебра, Коллекции, Авторские изделия),
3-й уровень — типы изделий (браслеты, кольца, броши, и т.д.).

Типовой раздел каталога
Клик по типу изделия открывает матричный список с изделиями. Каждая ячейка матрицы содержит в себе: миниатюру изделия, название, металл, тип вставки, массу изделия, массу вставки, цену, кнопку добавления в корзину, кнопку перехода на страницу товара («подробнее»). Клик по миниатюре вызывает pop-up окно, аналогичное окну, вызываемому кликом на окно товара, рекламируемого на главной странице в карусели.

 

Карточка товара
В левой части расположено увеличенное фото товара с миниатюрой лупы в правом нижнем углу; клик мыши вызывает pop-up окно с полно размерной фотографией. Справа от увеличенного фото расположен разрез бирки изделия, содержащий следующие поля: название, артикул, металл, проба, вес, вставка, тип вставки (маркировка для бриллиантов, поле не отображается, если не заполнено), цвет вставки, вес вставки, коллекция (ссылка, открывающая всю коллекцию), стиль, высота, ширина, кнопка добавления товара в корзину. Под блоком изображения и характеристик располагается текстовое поле с художественным описанием товара. Если изделие является частью комплекта, то под текстовым описанием выводятся остальные позиции комплекта.

 

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

 

Страница вывода подбора товара
Аналогично выводу подбора подарка, только без верхнего текст-графического блока.

 

Страница «Услуги»
Здесь на странице присутствуют верхние горизонтальные вкладки: Обмен и скупка, Ремонт, Ломбард. Каждая вкладка ведет на HTML-страницу, наполненную необходимой и полезной для пользователя информацией.

 

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

 

Страница «О нас»
Веб-дизайн сделан аналогично предыдущей странице. Вместо фотографий витрин идут дипломы и сертификаты.

 

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