Не редизайн, а разработка с нуля
О компании
Задача
У заказчика имелся старый сайт сделанный на старой урезанной версии Bitrix, который необходимо было обновить. На старом сайте контент был преимущественно статичным, каталог как таковой отсутствовал, все товары были сделаны в виде галереи, заказ товаров только через телефонный звонок или форму, что для серьезного интернет-магазина было недостаточно. Кроме этого отсутствовала возможность внедрить необходимые инструменты для продвижения.
Вместо того что-бы дорабатывать старый сайт, было решено создать новый, с адаптивным макетом, полноценным каталогом товаров и набором дополнительных функций.
Проведенные работы
- Дизайн
- Наполнение
- Вёрстка
- Наполнение
- СЕО-оптимизация
Шрифт Roboto
Цвета
Кнопки
Разработка дизайна
Макет мы решили сделать контрастный. В автомобильной тематике есть много хорошего исходного фотоматериала, поэтому можно создать интересные фоны и вставки для многих блоков в макете.
Поэтому мы использовали в равной степени три основных цвета - красный, белый, и черный в качестве фона блоков на страницах. При этом внутренние страницы имеют преимущественно белый верх, а дополнительные цвета находятся в нижних блоках.
На главной странице разместили большой слайдер, на котором должны отображаться самые актуальный предложения.
В качестве пожелания заказчика мы рассматривали наиболее легкий и материалистичный вариант дизайна. При этом хотелось разместить побольше различных функциональных элементов. Мы подбирали компромиссное решение, разделили страницу на четко читающиеся блоки со светлым фоном и большими отступами от краев
В качестве основной композиционной линии был использован центр. На центральной линии мы разместили довольно крупный логотип (написанный необычным шрифтом, который хотелось оставить читаемым), а также использовали ее для размещения наиболее важных элементов. Именно поэтому все блоки на максимальном разрешении преимущественно состоят из нечетного количества элементов (3 или 5) и один из элементов всегда будет попадать на одну линию с логотипом.
Как мы изначально решили, на всех страницах мы сделали много свободного пространства, что-бы показать масштабы, с которыми работает наш заказчик. В качестве текстур используем осветленную, едва заметную текстуру мелко отштукатуренной стены. При это некоторые блоки нам хотелось сделать дополнительно чуть более интересными, контрастными. Для этого мы оставили много пространства с одного края блока и использовали графику в виде изображений фасадов старинных архитектурных проектов, которые мы предварительно откадрировали и обработали.
Верстка
Верстка сайта полностью адаптивная, от широкоформатных экранных разрешений, до мобильных. Мы не используем никаких стандартных CSS-фреймворков, лишь небольшую библиотеку со стандартными элементами и конструкциями. Ее было достаточно для создания макета, при сохранении гибкости при модификации макета на этапе технической поддержки. Основным инструментом для компоновки блоков макета стали grid-сетки.
В каталоге мы использовали немного не стандартный дизайн карточек товара. Вместо ряда по несколько карточек мы использовали широкую карточку, занимающую целый ряд. Это решение позволил нам поместить в карточку набор важных характеристик для покупателя, а также освободило место для более крупной цены и более заметной кнопки покупки.
Разработка
Шрифт на сайте максимально легкий, который позволяет сделать блоки достаточно плотными, и при этом не "слипается". Заголовки довольно крупные, но не при этом не тяжелые. Использовался максимально тонкий вариант шрифта. Для акцента заголовка была добавлена декоративная полоска, за которую цепляется взгляд при прокрутке.
Цветовую схему было решено использовать преимущественно черно-белую, так-как элементы декора хорошо выглядят белыми и лишние цвета в этом случае будут отвекать. Однако в качестве небольшого акцента в важных элементах был использован темный-желтый цвет.
