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