Дизайн строится на согласованном взаимодействии архитектурной фотографии и выверенного контраста. Крупные изображения задают атмосферу страницы, а черные и темно-серые плашки компактно вмещают заголовки и пояснительный текст. На первом экране это взаимодействие проявляется особенно наглядно: широкий архитектурный фон перекрывается черной плашкой по центру, благодаря чему заголовок и призыв к действию отлично считываются, не конкурируя с изображением.
Этот визуальный язык находит продолжение в разделенном блоке об экологичном строительстве и следующем далее блоке концептуальных проектов. В первом изображение расположено рядом с текстом, а во втором между вертикальным снимком и пояснительным описанием добавлена темная плашка с заголовком. Повторение этих мотивов объединяет разные смысловые группы контента. Большое количество свободного пространства вокруг строк с перечнем возможностей и блока вкладок «Описание», «Характеристики» и «Отзывы» не позволяет монохромной палитре выглядеть визуально тяжелой.
Галерея из пяти изображений дополняет визуальный стиль серией архитектурных фотографий и текстовыми блоками, появляющимися при наведении курсора. Компактный блок контактов и темный футер поддерживают тот же сдержанный тон в конце страницы. С точки зрения веб-дизайна этот шаблон предлагает нечто большее, чем просто сочетание цветов: он задает узнаваемую систему визуальных материалов, типографики, контраста, свободного пространства и чередующихся поверхностей контента, которая способна объединить сопутствующие страницы архитектурного сайта без необходимости дублировать одну и ту же структуру разделов на каждой из них.
При использовании Конструктор веб-сайтов вы сможете настраивать цвета, шрифты, верхний и нижний колонтитулы, макет, столбцы и другие элементы дизайна, а также контент и изображения.
Используйте Настройки темы, чтобы установить визуальную основу веб-сайта на всех его страницах и в разделах. Задайте глобальные цвета, шрифты и типографику, чтобы сайт следовал одному и тому же направлению дизайна, а не оформлял каждую страницу независимо.
Выберите цветовую схему и сочетание шрифтов, соответствующие характеру веб-сайта, затем точно настройте заголовки H1-H6, обычный текст, ссылки, кнопки, цитаты, списки и другие стили типографики. Последовательное использование этих настроек помогает создать четкую визуальную иерархию и обеспечивает узнаваемость повторяющихся элементов дизайна на всем веб-сайте.
Используйте Анимационные эффекты, чтобы сделать дизайн веб-сайта более динамичным и интерактивным. Элементы и контейнеры могут использовать такие эффекты, как «Запуск при отображении», «Анимация при наведении курсора» и «Анимация, синхронизированная с прокруткой», чтобы добавлять контент по мере перемещения посетителей по сайту или в ответ на действия пользователя. Предварительно настроенные анимации предоставляют готовые эффекты, которые можно адаптировать к визуальному стилю веб-сайта.
Примените единое направление дизайна к общим элементам веб-сайта, таким как заголовок, меню и нижний колонтитул. Панель настроек темы объединяет общие элементы управления стилем для всего сайта, упрощая поддержание скоординированного внешнего вида по мере расширения веб-сайта на несколько страниц.
Этот рабочий процесс делает шаблон полезной отправной точкой для создания веб-сайта с единой визуальной идентичностью, согласованными цветами и типографикой, общими правилами дизайна и интерактивными эффектами на всех его страницах.