Макеты интернет-магазина «Снежная королева»

К нам обратились наши знакомые из «Снежной королевы» и попросили немного освежить существующий сайт.

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

snowqueen.ru

Сборка и поддержка сайта производится на стороне клиента.

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

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

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

Заодно убрали бесполезные и устаревшие функции вроде «поделиться в Google+» и все лишние упоминания номера телефона. Смысл нового сайта в том, чтобы покупатели сами оформляли заказ и только в крайнем случае обращались в службу поддержки. Поэтому телефон оставили только на закреплённом справа всплывающем меню.

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

Проработали все возможные статусы информации о товаре: разные акции и рассрочку, отсутствие товара или размера, даже по просьбе клиента предусмотрели вариант на китайском языке.

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

Сейчас так делают многие крупные продавцы одежды, но, когда мы перепридумывали сайт для «Снежной королевы», такой подход был в новинку.

Здесь же показаны разные виды цен: обычная, по акции, со скидкой, в рассрочку — каждую мы обозначили своим значком, чтобы избежать путаницы. В каталоге разные статусы товара (наличие, скидка, рассрочка) отображаются вертикальными значками слева от фотографии.

Кнопки «купить» и «добавить в избранное» появляются, только если на фотографию навести курсор.

Иллюстрации для каталога

Для SEO-текстов в каталогах, которые часто оставляют без внимания, нарисовали фешен-скетчи.

Закреплённое вертикальное меню позволяет быстро перейти к общим сведениям из любой точки сайта.

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

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

В процессе работы для удобства мы разделили её на несколько видов:

Информационные страницы

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

Привели в порядок раздел «Контакты» и сделали два варианта поиска магазинов: по регионам на карте и по алфавитному списку городов — от Архангельска до Ярославля.

Системные страницы

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

Маркетинговые страницы

Страницы, где рассказывается об акциях и дополнительных услугах магазина: накопительные карты «Королевского клуба», сотрудничество с торговыми центрами «МЕГА», собственное ателье, подарочные сертификаты. Здесь же можно найти информацию о покупке в кредит или в рассрочку, а также интересные статьи про одежду и стиль.

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

На отдельной странице теперь представлена собственная марка одежды, которая так и называется — «Снежная королева». Здесь мы разместили имиджевую фотосессию с удобным переходом в магазин — на страницу с задействованными в съёмке вещами.

В другом разделе перечислены все партнёры компании: наводишь курсор на логотип — и всплывает окно с описанием бренда.

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

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