EN RU
Напишіть нам
Попередній Наступний

Київстар — найбільший телекомунікаційний оператор України, який надає послуги зв’язку і передачі даних. Компанія також розширила напрям бізнесу і відкрила інтернет-магазин на корпоративному сайті shop.kyivstar.ua, який спеціалізується на смартфонах, планшетах, телефонах, телевізорах і т.д.

Компанія Київстар має високі вимоги до якості, тому був проведений тендер на вибір виконавця, у якому брали участь більше 10 компаній-розробників. За підсумками виконання тестового завдання наша компанія була визнана кращим виконавцем, і ми розпочали співпрацю.

Завдання полягало в тому, щоб створити кілька лендінгів для даної продукції для підвищення ефективності продажів.

Дотримання інструкцій

Kyivstar — вже сформований бренд із власним стилем. Тому, перед початком робіт ми ретельно вивчили сайт kyivstar.ua і ознайомилися з брендбуком компанії.

Для лендінгів був використаний шрифт Museo Sans. Колір і розмір заголовків з текстом відповідає інструкціям.

Структура сторінок

З метою прискорення процесу роботи дизайнера і верстальника, для лендінгів спочатку була розроблена універсальна структура. Оскільки в магазині широкий вибір смартфонів, аксесуарів і техніки, згодом було прийнято рішення використати індивідуальну структуру для кожного виробника. Таким чином, ми урізноманітнили і розділили зовнішній вигляд продуктів різних компаній. Для більш зручного перегляду лендінгів з телефону були розроблені їх адаптивні версії.

Зображення для продуктів

Перед нами було поставлене завдання використовувати не тільки зображення з офіційних сайтів виробника, але і додати трохи кольорів: намалювати частину зображень, що відповідають контексту товарів з магазину shop.kyivstar.ua.

Іконки

Пакет іконок був наданий компанією. Але різноманітний контент не завжди давав можливість вибору відповідної іконки з пака, тому частину ікон ми малювали самі, відповідно до інструкцій Київстар.

Особливості верстання

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

Анімація

При верстанні лендінгів ми застосовували два види CSS-анімації: Transitions і Animations. Щоб створити прості візуальні ефекти і плавні переходи, використали Transitions. Для більш складних сцен були застосовані Animations; кожна з таких анімацій була описана за допомогою @keyframes. Javascript — тільки для запуску анімації при прокручуванні сторінки, що дало можливість суттєво знизити навантаження на браузер при завантаженні сторінки.

Мобільний сайт

Для кожного власника інтернет-магазину головною метою є підвищити ефективність продажів з сайту, тому багато зусиль спрямовано на збільшення кількості користувачів і оптимізацію конверсії відвідувань. З цією метою ми створили новий блок опису товару: зробили перехід від його стандартного текстового вигляду до інтегрованих лендінгів із візуальною презентацією всіх товарних характеристик.

Впровадження лендінгів для товарів значно підвищило ефективність продажів і забезпечило зростання кількості відвідувань сайту, часу перебування користувачів на сайті і обсягу продажів.

Таким чином, наша команда створила рішення, що істотно оптимізує роботу сайту shop.kyivstar.ua і допомагає компанії отримати нових клієнтів і підвищити лояльність вже існуючих.

Над проєктом працювали:

  • Дима Ремигайло
    Дима Ремигайло

    Руководитель проектов

  • Максим Нестерук
    Максим Нестерук

    Руководитель отдела дизайна

  • Юлия Колянова
    Юлия Колянова

    Дизайнер

  • Саша Пахолюк
    Саша Пахолюк

    Дизайнер

  • Руслан Хомяк
    Руслан Хомяк

    Руководитель отдела Frontend

  • Андрей Ляшок
    Андрей Ляшок

    Frontend разработчик

Приклади розробки веб-сайтів

  • KeepSnap

    KeepSnap

    Сервис продажи фотографий для профессиональных фотографов

  • HuntsPoynt

    HuntsPoynt

    HuntsPoynt - сервис для поиска работы

  • NIC.UA

    NIC.UA

    Сайт регистратора доменных имен