Как (не)зафакапить фирстиль и сделать топовый сайт металлопрокату
Делюсь, как делал сайт Маркет Групп с брендбуком от Кирилла Кириленко (Jugger) и рисовал интерфейсы, которые отлично вписываются в рамки фирстиля, не нарушая визуальный язык бренда.
Пишет Александр — дизайнер интерфейсов с 31 коммерческим проектом за плечами.
Сразу к результатам
— Сайт попал в подборку тильды, набрав более 100 лайков.
— А на Дипрофайле получил печеньку в категории интерфейсов, набрав более 300 лайков.
— Клиент кайфанул, а Кирилл отметил в тг)
С чего начали?
Клиент нашел меня через мадеонтильду, в которой было несколько моих работ с наградами. Мы созвонились, обсудили задачу и начали подготовку к работе. Я собрал референсы, разобрал конкурентов и т.д. Всё по классике, но…
Когда я увидел брендбук, я а*уел
Супер стилёвый проект меня ожидал, я был заряжен сделать офигенно! Кирилл постарался на славу. Отдельный респект клиенту, что тот рискнул сделать настолько нетипичный и дерзкий дизайн для металлопроката!
Ладно, рисуем сайт
Я накидал дорожную карту по внутренним процессам. Чтобы заказчику было понятно, когда какие материалы по сайту мне будут нужны. Это вносит хорошую прозрачность, ясность, убирает некую тревожность и стопоры в работе.
Задача была нетипичной, поскольку на других проектах требовалось создавать стилистику самому. В этот раз мне было важно разобрать ДНК бренда и на его основе отрисовать сайт.
Как стабильный дизайнер заявляю, с любым проектом можно справиться, если следовать процессам, поэтому прототипирование:
Ну и дальше текст, контент. А потом за неделю сделал небольшую концепцию по дизайну, в которой продемонстрировал пару экранов с формой.
Дизайн главной попал в сердечко
Я держал фокус на типографике и формах, а рисовал в стиле брутализма. Сердце бренда в формах — они диктуют ощущения бренда. Когда удается уловить изгибы фирменных фигур и шрифта, получается очень хорошо передавать настроение.
Тем не менее... чтобы на достойном уровне отрисовать первую страницу, мне потребовалось две с половиной недели.
Аккуратно вышли за рамки
Нам требовалось сделать не просто стильный металлопрокат, но и конкурентноспособный. Монохром и тяжелый серый выглядели хорошо, но недостаточно контрастно для веба. Нужно было внедрять акцентный цвет.
Джон Траволта предложил поискать в железной руде.
Оранжевый цвет ржавчины на руде прекрасно нам подходит. Также это цвет раскаленного металла при переплавке. Он смотрится потрясающе, сама природа его создала. Джон, спасибо за помощь!
Внимание к деталям и мелочам + уважение к заложенным идеям помогают приходить к сложным решениям, которые вписываются в концепцию на глубоком уровне.
Сделал несколько вариантов главной и мы выбрали тот, где цвет использован по минимуму и иногда направляет внимание пользователя.
Дизайн был положительно принят, дерзость и мощь ощущались также, как и в брендбуке. База была заложена, осталось рисовать остальные страницы)
Пара слов о разработке
Сайт сделан на Тильде. Но это не бросается в глаза, а наоборот. Создается ощущение серьезных вложений в разработку за счет огромного внимания к взаимодействию с сайтом.
Большое количество красивых сайтов на тильде запарывают небрежной версткой и закрытием глаз на мелочи. (Оставляют дерганные анимации, не заботятся об оптимизации. Сайт долго грузится, в него запихивают прелоадер, всё начинает лагать и т.д.)
Поэтому анимации отточены до совершенства. А сам сайт наполнен кучей деталей, на которые приятно смотреть, а ещё приятнее трогать.
Итоги можете оценить сами)
Ссылка на сайт https://market-groups.ru/
А потом поставить лайк и подписаться на ТГ
Ссылка на телеграм канала, где я пишу про дизайн, процессы и эмпатию,
Ссылка на портфолио Дипрофайл
До скорой встречи!