Добавили новый интересный кейс 👉 https://whitebox1.io/cases/neos

Редизайн сайта Eneral

Интернет-магазин электротехнической продукции собственного производства ENERAL

Что не устраивало в старом сайте

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

Подготовка


Мы ознакомились со старым сайтом и брифом от заказчика, прикинули объем работы и сроки, задали и обсудили появившиеся вопросы и присутпили к разработке редизайна.

Дизайн


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

1

Затем мы обновили стили и шрифты, поправили отступы и проставили верные акценты. Фирменные цвета компании были сохранены.

2

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

Верстка и программирование


Вёрстка для сайта ENERAL отличалась от среднестатичтической тем, что значительная её часть - это вёрстка из предедущей версии, с которой пришлось повозиться, чтобы заставить её выглядеть макисмально близко к макету. Так же крупная часть вёрстки на страницах категории товаров - это HTML разметка, которая находится в БД сайта, поэтому стили для этих страниц приходилось максимально универсальными. Вёрстка должна была быть понятной и семантичной, чтобы интерграция не вызывала приступов боли у бэкенд разработчика. Для вёстки использовался шаблонизатор Pug, для стилей - SCSS. Выбраны они были исходя из того, что они ускоряют и упрощают процесс разработки и мы хорошо его знаем. В остальном это достаточно простой сайт, без сложных анимаций, элементов, с заранее подготовленным UI-китом, проблем на этапе вёрстки с ним не было.

Сравнение ДО/ПОСЛЕ


Финальный результат понравился клиенту и нам самим.

Есть подобная задача?

WhiteBox будет рад взяться за нее!

ОСТАВИТЬ ЗАЯВКУ