+375 (29) 390-56-65
Время работы
Пн-Пт: 9:00 - 17:00
Сб-Вс: выходной
Отвечаем в мессенджерах:
Кейсы Кейсы по разработке сайтов Кейс по созданию интернет-магазина косметики

Кейс по созданию интернет-магазина косметики

Кейс по созданию интернет-магазина косметики
Обсудить проект
Medpharma.by — это специализированный онлайн-магазин, предлагающий широкий ассортимент косметических средств, с особым акцентом на продукцию для красоты и здоровья кожи. Здесь собраны тщательно отобранные товары, сочетающие в себе эффективность, безопасность и высокое качество. Магазин предлагает как повседневный уход, так и профессиональные средства, подходящие для решения специфических дерматологических задач.
Дизайн
Дизайн
Индивидуальный
Сайт
Сайт
Интернет-магазин
Объём
1 234
Страница
Скорость
94 / 98
Загрузки сайта
Язык
RU
Русский
Поиск
Поиск
По сайту
Цены
BYN
Конвертер
Мессенджеры
Мессенджеры
Коммуникация
Корзина
Корзина
Товаров
Маршрут
Маршрут
На картах
Карта

Внедрена интерактивная карта, которая позволяет
пользователям быстро и удобно находить ближайшие
точки продаж или представительства компании.

Карта
Акции

Создана отдельная страница с акциями, где
представлены все текущие специальные предложения
и скидки. Страница оформлена ярко и привлекательно

Акции
Товар

Реализована детальная страница товара,
включающая полное описание, технические
характеристики, фотографии и материалы.

Товар
Преимущества

Добавлен блок с преимуществами компании,
оформленный с использованием графических
элементов и иконок.

Преимущества
Задача

Создать сайт интернет-магазина, разработать индивидуальный дизайн, обеспечить максимальную адаптивность сайта под все виды устройств и подключить оплату интернет-эквайринга и возможность выбора типа доставки.

Решение

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

Ниша

Продажа косметической продукции

Продолжительность
  • 2 недели – дизайн
  • 1,5 месяца – разработка
  • 1 месяц – заполнение

Краткий бриф на разработку сайта

Наименование компании
ИП Цветкова Кристина Михайловна
Сфера деятельности
Продажа косметической продукции
Страна, на которую рассчитан сайт
Беларусь
Основные товары и услуги
Косметическая продукция
Домен сайта
medpharma.by
Целевая аудитория
Женщины всех возрастов
Задачи сайта
Продажа товаров, Информационная
Тариф
Индивидуальное
CMS
WordPress
Хостинг
Hoster.by
Пожелания заказчика
Создать сайт интернет-магазина с уникальным дизайном и техническим наполнением. Сайт должен быть адаптирован для всех видов устройств и иметь удобный каталог и корзину заказов.

Фирменная палитра цветов и шрифт

01
Цвет и типографика
Розовый цвет в интернет-магазине создаёт тёплую и привлекательную атмосферу, вызывая положительные эмоции у пользователей. Он хорошо подходит для товаров, связанных с красотой и подарками, привлекая внимание к важным элементам сайта. Синий цвет внушает доверие и ощущение стабильности, что помогает клиентам чувствовать себя уверенно при покупке.
Шрифт Montserrat хорошо подходит для сайтов благодаря своему современному и лаконичному дизайну, который обеспечивает отличную читаемость на разных устройствах и экранах. Его геометрические формы создают чистый и профессиональный визуальный стиль, что помогает подчеркнуть бренд и улучшить восприятие контента.
#ed1d4e
#ffffff
#0044a8
#0a0000
Розовый цвет в интернет-магазине создаёт тёплую и привлекательную атмосферу, вызывая положительные эмоции у пользователей. Он хорошо подходит для товаров, связанных с красотой и подарками, привлекая внимание к важным элементам сайта. Синий цвет внушает доверие и ощущение стабильности, что помогает клиентам чувствовать себя уверенно при покупке.
#ed1d4e
#0044a8
#ffffff
#0a0000
Шрифт Montserrat хорошо подходит для сайтов благодаря своему современному и лаконичному дизайну, который обеспечивает отличную читаемость на разных устройствах и экранах. Его геометрические формы создают чистый и профессиональный визуальный стиль, что помогает подчеркнуть бренд и улучшить восприятие контента.

Полезный и для пользователя, и для бизнеса функционал

02
Функционал

На сайте есть очень много незаметных решений, которые качественно дополняют его и выделяют среди конкурентов. Например, меню. Для данного сайта была применена наша специальная идея. По сути это всё то же меню, в котором есть товары и категории. Однако в то же время там есть функционал, позволяющий видеть бренды, товары которых представлены в каждой конкретной категории. К тому же, всегда можно нажать на иконку с логотипом бренда, и пользователь сразу перейдёт на страницу каталога, с фильтром относительно выбранного бренда и категории.

Если говорить об комфорте, то пальцем не всегда удобно нажимать на маленькую надпись в углу экрана, а большие кнопки с понятными границами заметно улучшает опыт взаимодействия с сайтом. Продолжая тему адаптации десктопного дизайна под мобильные устройства, основная часть меню, используемая для покупок, была вынесена на отдельную навигационную панель. Такой способ расположения важных элементов часто используется в мобильных приложениях, например, в маркетплейсе от OZON. Данный дизайн делает сайт солиднее в глазах покупателей, а значит доверять ему будет больше, что положительно скажется на продажах.

Последнее о чём стоит упомянуть – это корзина покупок. По значимости она явно стоит выше, но покупатель доходит до неё только перед покупкой, а это уже самый последний этап взаимодействия с сайтом. Нажимая на иконку корзины, покупатель не переходит на новую страницу, вместо этого на сайте открывается небольшое окно, в котором демонстрируется список товаров, лежащих в корзине. И это является отличным решением, ведь теперь пользователю не придётся переходить со страницы на страницу, чтобы вспомнить, что он уже положил, а что ещё нет, сколько стоит каждый товар и какое количество он указал.

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

На главной странице, если пролистать почти в самый низ, можно найти блок с популярными категориями. В нём примечательно расположение блоков, такой дизайн встречается крайне редко, но выглядит очень интересно. К тому же, он позволяет показать большое количество товаров, не занимая много места.

Страница корзины выглядит компактно и информативно. Блоки с товарами сгруппированы и изображения не занимают половину экрана. Справа от товаров есть блок с общей скидкой и суммой заказа, а под ними поле для применения купонов. Информация о скидке – полезная фишка данного блока, пользователю очень приятно видеть сколько он экономит. Также в самом низу есть рекомендуемые товары, но это чуть ли не обязательный блок для любой корзины в интернет-магазине, поэтому сказать о нём особо нечего.

Какие инструменты и технологии мы использовали

03
Инструменты
Figma
Figma
Photoshop
Photoshop
WordPress
WordPress
JQuery
JQuery
PHP
PHP
JavaScript
JavaScript
WPBakery
WPBakery
Swiper
Swiper
FancyBox
FancyBox
Bootstrap
Bootstrap

Скорость загрузки сайта

04
Скорость
medpharma.by
Анализировать
Мобильные устройства
Компьютер
94
medpharma.by
0-49
50-89
90-100
Мобильные устройства
Компьютер
98
medpharma.by
0-49
50-89
90-100
Показания сервиса
Google PageSpeed Insights

Одной из целей разработки сайта, которая была поставлена нами, – это добиться высокой скорости загрузки сайта. Более подробно о том, почему так важна высокая скорость загрузки сайта, можно почитать в нашей статье. Для текущего проекта были достигнуты следующие значения: максимальные 98 баллов на декстопных устройствах и 94 баллов на мобильных (возможны более низкие результаты из-за медленного интернета или сильной нагрузки на устройства).

Результаты по проекту

05
Результат

Итоговый результат понравился как заказчику, так и всей команде SILVERWEB. В процессе работы мы реализовали все высказанные пожелания, учли необходимость адаптивности, настроили работу сайта как торговой площадки. Сайт получился современным, удобным и визуально привлекательным. Он успешно сочетает в себе индивидуальный дизайн, высокую функциональность и простоту взаимодействия для пользователя. Благодаря адаптивной верстке, корректной работе на всех устройствах, подключённой системе оплаты и возможности выбора доставки, интернет-магазин стал полноценной и надёжной платформой для онлайн-продаж.

1. Индивидуальный дизайн и функциональность
Разработанный дизайн подчеркнул уникальность бренда, а внедрённые функции обеспечили удобство и эффективность работы сайта.
2. Адаптивность и кроссбраузерность
Сайт корректно отображается и стабильно работает на всех устройствах и браузерах, что обеспечивает комфортный пользовательский опыт.
3. Интеграция платёжных систем и доставки
Подключение безопасных способов оплаты и гибкий выбор вариантов доставки сделали процесс покупки простым и удобным для клиентов.
4. Удобство администрирования и поддержка
Реализованная система управления контентом позволяет заказчику легко обновлять информацию, что обеспечивает своевременное наполнение сайта и поддержание его актуальности.
Хотите так же?
Давайте обсудим проект!
+

Обсудить проект

+

Заявка на обратный звонок

Согласие на обработку персональных данных в соответствии с целями, указанными в Политике обработки персональных данных