Адаптивная верстка интернет-магазина украшений на WordPress

Украинскому бренду авторских ювелирных изделий нужен был нестандартный интернет-магазин для презентации коллекций, отдельных изделий, галереи и дальнейшей интеграции в WordPress.

=== МОЯ ЗАДАЧА ===

Подготовить адаптивную, кроссбраузерную и интерактивную верстку по дизайну в Figma для дальнейшей передачи WordPress-разработчику.

=== ЧТО БЫЛО СДЕЛАНО ===

• сверстаны основные страницы сайта: Home, Collection, Collection slug, Product, Single object, Gallery, Static page;
• реализована адаптивная верстка для desktop, tablet и mobile;
• подготовлена верстка с учетом будущей интеграции в WordPress;
• реализована фронтенд-логика для интерактивных элементов;
• реализованы слайдеры, анимации и интерактивные блоки;
• подготовлена нестандартная сетка товаров;
• реализованы анимированные баннеры для страниц коллекций;
• оптимизирована верстка, чтобы макет имел зеленые показатели в Google Speed Test.

=== ОСОБЕННОСТИ ПРОЕКТА ===

Главная особенность проекта — нестандартный дизайнерский подход к интернет-магазину. Это был не типичный e-commerce шаблон, а визуально выразительный сайт для авторских украшений с нестандартными сетками, анимациями и отдельной логикой отображения коллекций. Особенно сложной была страница коллекций. На desktop она была реализована в формате полноэкранного вертикального слайдера со скроллом и анимированным появлением элементов баннера. На mobile эта же логика была адаптирована в другой UX-формат: горизонтальный слайдер изображений с описанием под ним. Отдельно была проработана верстка кастомной корзины и checkout.

=== РЕЗУЛЬТАТ ===

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

=== ТЕХНОЛОГИИ ===

HTML5, SCSS, JavaScript, jQuery, BEM, Animate.css, Slick.js, WordPress-ready layout, Gulp

#верстка #адаптивнаяВерстка #HTML #SCSS #JavaScript #jQuery #WordPress #Figma #PixelPerfect #BEM #Gulp #интернетМагазин #eCommerce #ювелирныйБренд #handmadeJewelry #SlickJS