Цвет HTML шаблоны

Цветные HTML-шаблоны, построенные на четком порядке контента

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

Когда колонки становятся вертикальными стопками

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

Перед тем как остановиться на файле, стоит провести три проверки:

1. Представьте, что фон исчез, и посмотрите, по-прежнему ли разделяются секции. Если они существуют только как цвет, значит, их вообще не существует.

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

3. Обратите внимание на все, что выделяется только цветом: категории, доступность, рекомендуемые товары. Посетитель должен легко отличить их от текста.

Разметка, сохраняющаяся при изменении порядка элементов

Заголовки сохраняют группировку при изменении макета. Когда каждая услуга или пример открывается со своим собственным заголовком, а аналогичные элементы повторяют ту же структуру, группировка сохраняется. Читатель знает, где заканчивается один элемент и начинается следующий, даже на однотонном фоне. Элемент сетки Nicepage размещает текст, изображения и кнопки в ячейках, которые перестраиваются на экранах меньшего размера, а Режимы адаптивности позволяют проверять версию для телефона отдельно от версии для настольных компьютеров.

В этом более узком представлении стоит обратить внимание на три вещи:

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

2. Сравнимые карточки сохраняют ту же внутреннюю структуру, вместо того чтобы превращаться в три пользовательских варианта.

3. Текст остается читаемым независимо от того, на какой акцент он попадает после формирования стопки.

Мысленный эксперимент в оттенках серого

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