Наш телефон: +7 (812) 363 - 30 - 23

Закрыть

Портфолио

Портфолио

Постановка задачи

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

Новый сайт должен был поднять планку качества на новый уровень. Привлечь внимание посетителей. Быстро продемонстрировать ассортимент товарной линейки. Ознакомить с преимуществами компании. Получить контакт или заявку.

Решения

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

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

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

Главная страница
Работа

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

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

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

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

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

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

Мобильная версия

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

Чтобы облегчить заказчику жизнь, мы включили в работы заполнение сайта, а так же базовую SEO-оптимизацию. Пока новые материалы для пустых разделов готовятся – посетители уже могут ознакомиться с товарами и стать первыми клиентами.

Итоги:
20 рабочих дней 10 страниц дизайна наполнение под ключ SEO-ready система управления Django Python

Всё портфолио

Наши услуги: