Alfarace — дизайн сайта запчастей для автотюнинга на Аспро: Премьер — советы в блоге

У клиента уже был сайт. Для перезапуска проекта был выбран Аспро: Премьер.

Главное требование команды Alfarace как производителя — получить дизайн с изображениями собственных запчастей. Для этого нам предоставили фотографии реальных спортивных автомобилей, которые используют тюнинг компании.

Для людей, которые не знакомы с брендом, главное — красивая картинка. Но для клиента и его целевой аудитории главное — видеть именно детали Alfarace в действии.

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

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

Мы разработали дизайн следующих изображений:

• главный баннер;
  
• мобильный баннер на основе главного баннера;
  
• фавикон на основе действующего логотипа;
  
• 3 баннера с текстом;
  
• дизайн блока «О компании»;
  
• 7 картинок блока «Популярные категории» и разделов каталога.
  

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

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

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

Мы изменили положение детали, сделали цветокоррекцию, добавили дым, чтобы запчасть находилась в одном пространстве с машиной.

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

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

Для мобильной версии сайта адаптировали основной баннер под размеры экрана.

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

Изначально мы сгенерировали изображения через Midjourney, скорректировали цвета и поправили детали. Alfarace понравились картинки, но все же захотелось видеть собственные автомобили.

Мы отобрали для 1-го и 3-го баннера фотографии с похожим ракурсом из представленной командой подборки и обработали, чтобы смотрелось интересно. Для среднего баннера не удалось найти подходящего аналога, поэтому изменили цвет и подставили дымный фон с гоночной трассы.

Наши дизайнеры подготовили вариант с гаражом, машиной и специалистом. Но этот вариант не отражал полностью специфику проекта.

В блоке «О компании» клиенту было важно показать себя как проектировщика и изготовителя, а не продавца или установщика. Поэтому второй вариант с инженером, который держит спроектированную им деталь, полностью устроил Alfarace.

Отрисовать категории каталога оказалось самой трудоемкой частью процесса. Все детали специфичные, не всегда фотогеничные. В каждой категории очень разные товары, поэтому изображение какой-то одной запчасти на картинке не передавало бы суть категории. Поэтому нужно делать сборные композиции из товаров, которые максимально раскрывают категорию.

Все товары Alfarace были сняты в разном ракурсе, иногда не очень чистые. Все это нужно было исправлять в фотошопе, дополнять бликами и тенями, менять перспективу, прорисовывать нечеткие детали и добавлять резкость.

Также пробовали темный вариант, но он спорил с соседними блоками. Поэтому выбор пал на светлый фон.

Эти же картинки категорий используются в меню.

Логотип компании адаптировали под требования Аспро: Премьер. Сделали 2 варианта: для светлой и темной тем, которые посетитель может переключать в шапке сайта.

Для команды Alfarace новый сайт стал большим шагом вперед с точки зрения дизайна. Изображения передают атмосферу бренда и отлично вписываются в тематику интернет-магазина.

Картинки способны донести смыслы до посетителя на подсознательном уровне. И как бы нам не хотелось сделать все идеально с первого раза: так получается далеко не всегда.

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