> >
Разработка и дизайн адаптивного сайта онлайн каталога Luxwatch.ua
Разработка и дизайн адаптивного сайта онлайн каталога Luxwatch.ua
назад в портфолио.png)
К нам обратился клиент для проведения внутреннего аудита и оптимизации онлайн-каталога элитных часов LuxWatch.ua. На тот момент функционал не отвечал требованиям заказчика и клиентов ресурса, поиск по каталогу был затруднен.
Мы посчитали важным сделать акцент на адаптивности страниц сайта, так как для увеличивающегося сегмента пользователей, которые используют мобильные телефоны, фаблеты и планшеты необходима возможность удобного просмотра каталога, адаптированного для устройств с разным размером экранов. Задачей было сделать из ресурса действительно удобный сайт.
Для этого мы предложили заказчику следующий перечень работ:
- переработка структуры каталога и разработка новой, более удобной и подробной системы фильтрации товара;
- создание новых страниц для карточки бренда и карточки товара с измененной структурой внутренней перелинковки;
- оптимизация фотогалереи сайта для поисковых систем;
- разработка системы шаблонов для мета-заголовков и заголовков страниц;
- переработка гугл-сайтмеп.
Согласовав данный план работ, мы приступили к разработке схем и интерфейсов страниц. Данный вайрфрейм позволил нам продемонстрировать заказчику расположение всех элементов сайта для ознакомления с предлагаемым функционалом, взаимодействия пользователей с интерфейсом и внесением корректировок перед созданием окончательных версий страниц. После утверждения вайрфреймов, были разработаны дизайны главной страницы сайта, каталога, страницы каталога брендов, карточки товара и карточки бренда.
Важным этапом в переделке сайта стала разработка схем адаптивности. Нам было важно, чтобы сайт выглядел привлекательно и был удобен в использовании на устройствах с различными размерами экранов. Мы разработали и протестировали схемы поведения ресурса на разных устройствах.
Когда схемы поведения сайта были проработаны, мы приступили с верстке дизайнов сайта в адаптивный HTML5 / CSS3 шаблон. Верстка тестировалась в различных браузерах и на различных устройствах. Это помогло нам убедиться в том, что все страницы отображается на любых экранах и во всех современных браузерах без ошибок.
На следующем этапе нами была осуществлена интеграция сайта с существующей системой управления, разработаны новые модули. Нам понадобилась некоторая доработка системы управления для обеспечения обновленной логики.
И, наконец, завершающей стадией разработки сайта стало тестирование обновленного ресурса luxwatch.ua и его перенос на новый VPS сервер с последующей финальной проверкой всего функционала.
Схема (wireframe) главной страницы:
Дизайн главной страницы:
Дизайн страницы каталога товаров:
Страница каталога брендов:
Дизайн страницы карточки товара:
Страница карточка бренда:
Сайт: www.luxwatch.ua
Если есть вопросы по услуге, свяжитесь с нами:
