![](https://www.justbenice.ru/wp-content/uploads/2022/04/justbenice-binary-feature-1050x1400.jpg)
Макеты интернет-магазина «Снежная королева»
К нам обратились наши знакомые из «Снежной королевы» и попросили немного освежить существующий сайт.
Однако в процессе стало ясно: нужно не просто навести лоск, нужен серьёзный редизайн, чтобы обновлённый сайт стал удобной и привлекательной торговой площадкой.
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-19.png)
snowqueen.ru
Сборка и поддержка сайта производится на стороне клиента.
Обычно работа над сайтом начинается с главной страницы, но в этом проекте главную страницу мы оставили на десерт, потому что она собрана из элементов остальных разделов.
Сайт большой, и основная задача стартовой страницы — направить посетителя в нужный раздел. Самые важные разделы — это каталог и страница товара.
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-14.jpg)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-35.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-36.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-37.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-34.png)
Первое, что мы сделали на странице товара, — это отказались от маленьких окошек и прокрутки фотографий. Оставили только крупные снимки: так товар сразу виден со всех сторон, и не нужно лишний раз никуда нажимать.
Заодно убрали бесполезные и устаревшие функции вроде «поделиться в Google+» и все лишние упоминания номера телефона. Смысл нового сайта в том, чтобы покупатели сами оформляли заказ и только в крайнем случае обращались в службу поддержки. Поэтому телефон оставили только на закреплённом справа всплывающем меню.
Причесали все тексты, которые в старой версии сайта были набраны в неудобочитаемом верхнем регистре. Ненужную информацию предложили удалить, а нужную подробно и аккуратно расписать. В итоге карточка товара стала больше, но разобраться в ней и выбрать цвет, размер и модель теперь намного проще.
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-06.jpg)
Проработали все возможные статусы информации о товаре: разные акции и рассрочку, отсутствие товара или размера, даже по просьбе клиента предусмотрели вариант на китайском языке.
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-21.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-22.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-23.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-24.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-08-scaled.jpg)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-09-scaled.jpg)
В каталоге, прежде чем попасть в ленту с товарами, покупатель сначала видит имиджевую страницу с рубриками и красивыми фотографиями. Она больше похожа на сайт модного журнала, чем на онлайн-магазин, но тем и хороша.
Сейчас так делают многие крупные продавцы одежды, но, когда мы перепридумывали сайт для «Снежной королевы», такой подход был в новинку.
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-43.jpg)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-42.jpg)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-41.jpg)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-40.jpg)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-39.jpg)
Здесь же показаны разные виды цен: обычная, по акции, со скидкой, в рассрочку — каждую мы обозначили своим значком, чтобы избежать путаницы. В каталоге разные статусы товара (наличие, скидка, рассрочка) отображаются вертикальными значками слева от фотографии.
Кнопки «купить» и «добавить в избранное» появляются, только если на фотографию навести курсор.
Иллюстрации для каталога
Для SEO-текстов в каталогах, которые часто оставляют без внимания, нарисовали фешен-скетчи.
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-45.jpg)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-44.jpg)
Закреплённое вертикальное меню позволяет быстро перейти к общим сведениям из любой точки сайта.
И разгружает информативные страницы, чтобы ничто не отвлекало покупателей от продающих картинок и пояснительных текстов к ним.
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-32.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-30.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-31.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-33.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-16.gif)
Страницы товара и каталога — ключевые элементы любого онлайн-магазина, именно с ними человек больше всего взаимодействует при совершении покупки. Однако, помимо них, на сайте много сопроводительной информации.
В процессе работы для удобства мы разделили её на несколько видов:
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-11-667x1400.jpg)
Информационные страницы
Описание компании. Эту страницу нужно было сделать дорого и со вкусом — мы подчистили фотографии, перерисовали значки и постарались представить компанию как бренд, который продаёт красивые вещи.
Привели в порядок раздел «Контакты» и сделали два варианта поиска магазинов: по регионам на карте и по алфавитному списку городов — от Архангельска до Ярославля.
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-18.jpg)
Системные страницы
Всё, что связано с процессом покупки, — корзина, личный кабинет, доставка, оплата картой и так далее — то есть чисто технические вещи, на которые редко обращают внимание, но без которых магазин не сможет работать.
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-04.jpg)
Маркетинговые страницы
Страницы, где рассказывается об акциях и дополнительных услугах магазина: накопительные карты «Королевского клуба», сотрудничество с торговыми центрами «МЕГА», собственное ателье, подарочные сертификаты. Здесь же можно найти информацию о покупке в кредит или в рассрочку, а также интересные статьи про одежду и стиль.
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-15.jpg)
Все эти разделы мы снабдили иллюстрациями, выполненными в разных техниках, но в едином стиле. Где-то это просто фотография предмета, где-то — фотоколлаж, а где-то — рисунок, но всегда на фоне двух линий, задающих общий тон.
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-38.jpg)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-05.jpg)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-07.jpg)
На отдельной странице теперь представлена собственная марка одежды, которая так и называется — «Снежная королева». Здесь мы разместили имиджевую фотосессию с удобным переходом в магазин — на страницу с задействованными в съёмке вещами.
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-01.jpg)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-02.jpg)
В другом разделе перечислены все партнёры компании: наводишь курсор на логотип — и всплывает окно с описанием бренда.
Разработали единый стиль для технических иллюстраций, которые поясняют, как одежда пошита, как её лучше выбирать и носить. Здесь никаких острых углов, только плавные линии.
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-13.jpg)
С всплывающими окнами пришлось повозиться: для такого большого сайта их нужно немало. Начиная с чисто технических — с предупреждением о правилах обработки файлов cookie и выбором города и заканчивая карточкой подсчёта рассрочки и мини-корзиной, в которую некоторые вещи можно добавить прямо из каталога, не переходя на страницу товара.
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-10.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-17.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-20.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-12.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-25.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-26.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-28.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-29.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-27.png)
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-46.jpg)
Наша гордость — это система умного поиска, с помощью которой товары можно найти по артикулу, категории, цвету или любому другому параметру.
![](https://www.justbenice.ru/wp-content/uploads/2016/09/justbenice-snowqueen-03.jpg)
Исправили и все email-рассылки (от восстановления пароля до рекламы новых поступлений).
Все страницы верстали так, чтобы они одинаково хорошо смотрелись при любой ширине браузера — и на большом мониторе, и на мобильных устройствах.
Над проектом работали:
- Игорь Киселев арт-директор и дизайнер
- Алина Венгерская иллюстратор
- Екатерина Фатеева иллюстратор
- Татьяна Торговичева корректор