Портфолио

Редизайн интернет-магазина Odevaite

Редизайн интернет-магазина Odevaite

«Одевайте» — интернет магазин российского производителя трикотажной одежды.

Над проектом работали несколько специалистов, дизайнер и backend-разработчик уже были со стороны заказчика. Моя задача стояла в том, чтобы реализовать адаптивную верстку для оптового интернет-магазина по новым макетам.

Далее, сопровождал процесс интеграции верстки и вместе с backend-разработчиком корректировали код до получения желаемого результата.

Задача

Выполнить верстку сайта и согласно предоставленным макетам. Сайт должен корректно отображаться на экранах 320-1920px и более.

Особенности: На странице корзины и вкладке «Заказы» в личном кабинете присутствует поиск, реализация его работы должны быть выполнена на стороне пользователя (front).

Требования

  • Адаптивность;
  • Кроссбраузерность;
  • Соответствие стандартам W3C;
  • Использование иконок только в SVG;
  • Реализовать всплывающие подсказки;
  • Реализовать слайдер на карточке товара в двух режимах.

Особенность данного дизайна в том, что он очень компактный, но его реализация заняла не один десяток часов
Превью

Страницы проекта

Фильтра

Фильтра

Блок фильтров имеет очень компактный размер, но это никак не ограничивает тот функционал который на него возложен

Окно быстрого просмотра товара

Окно быстрого просмотра товара

При своих размерах лишь 1170х600px имеет тот же функционал, что и полноценная страница товара. 3 варианта цен, выбор размера, цвета, галерея с возможностью добавить видео, описание, кнопки «добавить в корзину» и «избранное».

Карточка товара

Карточка товара

Карточка товара имеет гибридный слайдер, который работает в двух режимах в зависимости от устройства.
Если это десктоп, то всю площадь изображения делит по горизонтали на ровные по ширине площади. Где кол-во площадей = кол-ву изображений в слайдере. Когда пользователь ведет курсором по горизонтали от одного края изображения к другом, слайдер перелистывает фото.

Если это телефон или планшет, слайдер работает в привычном режиме и листает изображения при свайпе влево или право.
Сайт полностью адаптивный

Сайт полностью адаптивный

Дизайн был адаптирован под все виды мобильных устройств от 320px. Верстка выполнена на фреймворке bootstrap 4.
В 2019-м году доля мобильных пользователей составляет около 63%, адаптивность стала не преимуществом, а стандартом для новых сайтов.

Результат

Результат аудита Lighthouse по 6-ти критериям, который в данный момент использует Google PageSpeed Insights.
До 49 плохо, 50-89 нормально, 90-100 отлично!

  • Адаптивность Mobile Friendly - 100%;
  • Производительность на деcктопе (Performance) - 85%;
  • Производительность на телефонах (Performance) - 89%;

Данные технические показатели не совсем моя заслуга, кроме адаптивности. В роли CMS используется Bitrix и довольно много технических моментов зависели непосредственно от бекенд разработчика.

Дата: 09/2019

Сайт: odevaite.ru

CMS: Bitrix

3
Недели потребовалось
на front-end
4
Недели потребовалось
на back-end
Bitrix
CMS на которой
реализован магазин

Еще проекты

Лендинг Rubicon group

Rubicon Group - строительно - инвестиционная компания

Интернет-каталог
TRP

Компания «ТРП» аренда и услуги спецтехники в Виннице и области

Есть проект?

Пишите, обсудим! 95% заказчиков приходят по рекомендации,
я это очень ценю и всегда общаюсь лично:)

Можем созвониться в skype или telegram,
в будние дни с 11:00 до 20:00 по Киеву.

Логотип

Будет полезно

Как разрабатывают сайты - от идеи до результата

Если вы ранее не заказывали работку сайта, это даст представление о том, что предстоит «пережить».…

Читать далее

5 популярных ошибок заказчика при разработке сайта

Статья попала на главную страницу spark.ru и получила статус “Выбор редакции”, поэтому решил поделиться…

Читать далее

Как происходит процесс разработки внешнего интерфейса

За что вы платите или как происходит процесс разработки внешнего интерфейса? Занимаясь разработкой…

Перейти
Социальные сети facebook
vk.com
Мессенджеры Telegram
Skype
Локация

Центральная Украина,
Днепропетровск