Начинаем дизайн и определяем стилистику главного экрана. Блок 1

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

Работа над дизайном не всегда начинается с полностью готовой картины в голове. Можно понимать, что именно нужно показать на главном экране, но ещё не знать, будет сайт светлым или тёмным, использовать ли Full Screen-фотографию или изолированный визуал, чередовать ли светлые и тёмные секции.

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

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

Главный экран переводим из Group во Frame. Сам дизайн рекомендуется собирать именно во Frame, а не в группах. Сразу можно продублировать экран и использовать копию для второй концепции.

При экране Full HD 1920×1080 часть высоты занимает интерфейс браузера и системы. Поэтому рабочую область главного экрана удобно ориентировочно держать в пределах около 980 px.

Оффер, дескриптор и CTA должны считываться сразу, без первого скролла. Макет при этом стоит постоянно запускать в Preview и проверять после изменений: в реальном масштабе гораздо проще заметить неправильные расстояния, баланс и положение элементов.

Если гарнитуры, выбранные ещё на этапе прототипа, подходят будущему дизайну, создавать новые текстовые стили нет необходимости. В этом проекте сохраняются Montserrat для основного текста и акцентная гарнитура для заголовков.

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

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

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

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

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

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

Можно зеркалить изображение, менять Crop и Fill, смещать дом выше или ниже. При этом ключевые элементы композиции желательно связывать с модульной сеткой. В проекте используется 12-колоночная сетка и контейнер около 1100 px, хотя сама фоновая фотография может выходить за его пределы.

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

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

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

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

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

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

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

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

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

В результате лучше работает более простая белая иконка. Её размер и положение корректируются визуально с учётом уже знакомой оптической компенсации.

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

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

Для основного текста вместо чистого чёрного используется немного приглушённый тёмный оттенок из выбранной палитры. Он выглядит мягче и лучше сочетается с общей атмосферой.

Этот цвет также сохраняется в Color Style и применяется к остальным текстовым элементам, чтобы дальше не собирать множество похожих оттенков вручную.

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

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

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

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

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

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

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

В данном случае светлый вариант с крупным Full Screen-визуалом выигрывает за счёт лёгкости, масштаба и большого количества свободного пространства. Тёмная концепция выглядит более привычной для строительной тематики и поэтому проигрывает по характеру.

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

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

Перейти к следующему уроку