Адаптивна верстка інтернет-магазину прикрас на 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