Редизайн сайта Eneral
Интернет-магазин электротехнической продукции собственного производства ENERAL
Что не устраивало в старом сайте
- Нагруженный визуал — сложно ориентироваться на сайте
- Проблемы с версткой — случайные отступы, нет единообразия
- Сайт был слишком устаревшим
Подготовка
Мы ознакомились со старым сайтом и брифом от заказчика, прикинули объем работы и сроки, задали и обсудили появившиеся вопросы и присутпили к разработке редизайна.
Дизайн
Цель редизайна - освежить сайт, но сохранить структуру, сделать его понятней и удобней для ползователей. Сначала мы убрали все лишнее и нерабочее. даже после этих манипуляций сайт стал значительно свежей.
Затем мы обновили стили и шрифты, поправили отступы и проставили верные акценты. Фирменные цвета компании были сохранены.
Главной проблемой при разработке дизайна было то, что на сайте присутствовало множество сложных таблиц и изображений в разных последовательностях на страницах. Чтобы их все отыскать и проработать понадобилось приличное количество времени. Некоторые моменты приходилось отрисовывать даже во время верстки. Но это не было большой проблемой, при интенсивном взаимодействии специалистов нашей команды.
Верстка и программирование
Вёрстка для сайта ENERAL отличалась от среднестатичтической тем, что значительная её часть - это вёрстка из предедущей версии, с которой пришлось повозиться, чтобы заставить её выглядеть макисмально близко к макету. Так же крупная часть вёрстки на страницах категории товаров - это HTML разметка, которая находится в БД сайта, поэтому стили для этих страниц приходилось максимально универсальными. Вёрстка должна была быть понятной и семантичной, чтобы интерграция не вызывала приступов боли у бэкенд разработчика. Для вёстки использовался шаблонизатор Pug, для стилей - SCSS. Выбраны они были исходя из того, что они ускоряют и упрощают процесс разработки и мы хорошо его знаем. В остальном это достаточно простой сайт, без сложных анимаций, элементов, с заранее подготовленным UI-китом, проблем на этапе вёрстки с ним не было.
Сравнение ДО/ПОСЛЕ
Финальный результат понравился клиенту и нам самим.