Квантсервер

Клиент

Многим известные с детства кукурузные палочки «Никитка», сушки и баранки к чаю, полезные слайсы и хлебцы — все это производит компания «Квантсервер». Ребрендинг сразу нескольких линеек продукции, желание выделить каждый бренд и подчеркнуть современный подход компании привели компанию за новым сайтом.

Задачи

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

Решение

Аналитика

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

Дизайн

Мы не всегда считаем необходимым делать мудборд, но на этом проекте решили начать именно с него. Собрали воедино то, что нравится клиентам и что нравится нам: 

• подобрали несколько разных шрифтовых пар
• выбрали примеры общей стилистики среди сайтов-победителей различных престижных конкурсов
• добавили возможные детали оформления (у нас на выбор была стилистика бумажных аппликаций и контурные изображения)

Цвета

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

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

Разработка

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

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

Для «Квантсервера» мы реализовали автоматическую оптимизацию и использовали концепцию адаптивных изображений. Контент-менеджеру достаточно загрузить в административной части сайта картинку, а дальше Битрикс сам:

• уменьшит ее вес без существенных потерь качества
• создаст копии изображения в нужном разрешении и нужном формате. 

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

Таким образом мы и оптимизируем сайт, скорость его загрузки, и разгружаем контент-менеджера клиента от лишней работы.