Визуальный язык строится на заметном контрасте между крупными, узкими акцидентными заголовками и компактным пояснительным текстом. Благодаря такой типографике короткие фразы вроде «Кто готов к пробежке?» и «БЕГИ… ПЕЙ… И РАДУЙСЯ ЖИЗНИ!» смотрятся как самостоятельные графические акценты, тогда как более мелкий текст передает информацию о тренировках, членстве и полезных советах, не соперничая с фотографиями. Страница выглядит динамичной, но остается четко организованной за счет удобных для чтения информационных блоков.
Цветовая гамма — еще один узнаваемый элемент фирменного стиля. Насыщенный циан и коралл расставляют акценты в промо-карточках и тематических разделах, а коричневый, белый и глубокий графитовый уравновешивают палитру. Темная панель контактов и футер служат спокойным завершением страницы после ярких спортивных снимков, а свободное пространство защищает оформление от визуальной перегруженности. Эти контрасты объединяют разделы с разной спецификой: от приглашения новичков до советов по утреннему бегу.
Фотографии усиливают целостность стиля, а не просто служат фоновым декором. Кадры с бегунами знакомят пользователей с клубом, иллюстрируют ключевые преимущества, создают контекст для блока мероприятий для начинающих и поддерживают полноширинный блок об образе жизни. Ссылки на социальные сети в шапке сайта и футере поддерживают ощущение сообщества во всех сквозных зонах. Дизайн этого шаблона определяет продуманная гармония обработки фото, акцидентных шрифтов, цветовых блоков, отступов и удобного перехода к соцсетям, а не отдельные изолированные элементы.
При использовании Конструктор веб-сайтов вы сможете настраивать цвета, шрифты, верхний и нижний колонтитулы, макет, столбцы и другие элементы дизайна, а также контент и изображения.
Используйте Настройки темы, чтобы установить визуальную основу веб-сайта на всех его страницах и в разделах. Задайте глобальные цвета, шрифты и типографику, чтобы сайт следовал одному и тому же направлению дизайна, а не оформлял каждую страницу независимо.
Выберите цветовую схему и сочетание шрифтов, соответствующие характеру веб-сайта, затем точно настройте заголовки H1-H6, обычный текст, ссылки, кнопки, цитаты, списки и другие стили типографики. Последовательное использование этих настроек помогает создать четкую визуальную иерархию и обеспечивает узнаваемость повторяющихся элементов дизайна на всем веб-сайте.
Используйте Анимационные эффекты, чтобы сделать дизайн веб-сайта более динамичным и интерактивным. Элементы и контейнеры могут использовать такие эффекты, как «Запуск при отображении», «Анимация при наведении курсора» и «Анимация, синхронизированная с прокруткой», чтобы добавлять контент по мере перемещения посетителей по сайту или в ответ на действия пользователя. Предварительно настроенные анимации предоставляют готовые эффекты, которые можно адаптировать к визуальному стилю веб-сайта.
Примените единое направление дизайна к общим элементам веб-сайта, таким как заголовок, меню и нижний колонтитул. Панель настроек темы объединяет общие элементы управления стилем для всего сайта, упрощая поддержание скоординированного внешнего вида по мере расширения веб-сайта на несколько страниц.
Этот рабочий процесс делает шаблон полезной отправной точкой для создания веб-сайта с единой визуальной идентичностью, согласованными цветами и типографикой, общими правилами дизайна и интерактивными эффектами на всех его страницах.