Современное освещение - интернет-магазин светотехники
«Современное освещение» — интернет-магазин светотехники и электро-технической продукции для дома, бизнеса и промышленности.
Задача
Разработать интернет-магазин с нуля с уникальным дизайном.
Инструменты
Сайт был разработан на CMS 1С-Битрикс.
Дизайн
Разработка сайта с нуля всегда начинается с прототипирования нетипичных страниц. Изучив предварительно заполненный заказчиком бриф, дизайнер разработал прототипы следующих страниц:
На этапе согласования прототипов заказчик внимательно проанализировал предложенные решения, внёс корректировки по структуре страниц и отдельным элементам. Также он предоставил недостающую текстовую информацию и необходимые пояснения. После утверждения всех изменений было принято решение о переходе к следующему этапу — разработке дизайна. Дизайн выполнен в цветах фирменного стиля на светлом фоне для удобного просмотра и выбора товаров. В качестве основного акцентного цвета используется жёлтый цвет из фирменного стиля.
На главной странице расположен слайдер с баннерами, каталог категорий, слайдеры товаров со скидками и новинками и краткая информация о магазине.
На страницах категорий каталога пользователь может воспользоваться блоком фильтров для быстрого поиска нужных товаров. Список товаров также можно сортировать различными способами и выбрать нужное число товаров для отображения на одной странице. Для быстрой навигации по каталогу над блоком фильтров расположен список категорий. Прямо из списка товары можно добавлять в корзину, выбрав нужное количество, или перейти на страницу товара для просмотра детальной информации.
На детальной странице товара можно ознакомиться с подробным описанием товара и всеми характеристиками, просмотреть фотографии с других ракурсов и добавить нужное количество товара в корзину. Также внизу страницы расположен список похожих товаров.
На странице корзины можно изменить количество товара или удалить ненужные, а затем перейти к оформлению заказа.
Оформление заказа для физлиц и юрлиц отличается набором полей для заполнения и способами оплаты. При выборе пункта самовывоза можно посмотреть на карте адреса.
Разработка и адаптация
После утверждения дизайна сайта наш программист выполнил верстку и разработку: превратил макеты в работающий адаптивный сайт, настроили корректное отображение на всех устройствах, оптимизировал скорость загрузки и протестировал кроссбраузерность. Также была выполнена базовая SEO-оптимизация, чтобы после индексации поисковики выдавали корерктные сниппеты, и сайт попадал как можно выше в поисковой выдаче.
Сайт адаптирован под любые устройства — от больших компьютеров до маленьких смартфонов. Все элементы сайта — фотографии товаров, фильтры, меню и кнопки — автоматически подстраиваются под размер экрана. Это значит, что на телефоне карточки товаров не слипаются, а удобно располагаются друг под другом, а меню и фильтры остаются простыми в использовании. Такой адаптивный дизайн делает процесс выбора максимально комфортным, не вызывая проблем с навигацией или чтением информации.
Итог
Заказчик получил готовый сайт, который мы разместили на его хостинге. Сайт готов к наполнению товарами, для чего мы подготовили видеоурок, и уже может принимать заказы и оплату через подключенные системы оплаты. Базовая SEO-оптимизация позволит быстро приступить к продвижению. Мы продолжаем работу с клиентом, оказывая техническую поддержку сайта.
