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

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

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

— Для страницы «О компании» мы предложили прикольную механику блока, рассказывающего о команде, и подобрали референсы — заказчик шустро провел профессиональную фотосессию для сотрудников, вдохновляясь нашими примерами :) Подход — супер!

— Страница 404, на мой взгляд, получилась самой модной. Тут и особенная типографика с контрастными размерами шрифтов, и рисованая сетка на фоне страницы, и темный фон — и даже возможность посмотреть на мир из канализационного люка. Смотрите под ноги!

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

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

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

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

— Суровую версию мы сделали на наш страх и риск, но заказчик оценил идею — поэтому идея ушла в работу. На ней мы видим все тот же дизайн промоблока, но усиленный резкими красными линиями, будто нарисованными от руки поверх чертежей. Но главное здесь — тексты. «Строим надежно — ХЕР где протечет»: ну какой прораб не клюнет на эту честность? Или вот кнопка «Херачь заявку!». Никаких нежностей — всё как на стройке!

— Для каждого блока при желании можно задать в админке суровую версию — на ней визуал будет чуть отличаться. При желании можно применить ее и ко всему сайту, а не только к главной странице.