F- и Z-паттерны: HTML и CSS

F- и Z-паттерны — простые и проверенные способы выстроить визуальную иерархию на страницах. F-паттерн лучше для контентных страниц с большим объёмом текста, Z-паттерн — для лендингов и страниц с минимальным текстом. В статье — готовые HTML/CSS-примеры, советы, чек-листы и сценарии, когда эти паттерны не подходят.

Иллюстрация F- и Z-паттернов в макете веб‑страницы

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

Что такое F- и Z-паттерны (в двух строках)

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

Z-паттерн: глаз делает диагональный зигзаг — сверху слева направо, затем вниз влево и снова вправо внизу, наподобие буквы “Z”. Подходит для минимальных макетов и лендингов.

F-Pattern: цель и подход

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

HTML

        `  

  

   

     

     

     

     

     

     

     

     

     

     

     

   

   F and Z-Patterns Using HTML and CSS  

   

   

   F-Pattern Using HTML and CSS  

     

     Design Patterns  

       

       Most users follow the F-pattern for content heavy websites.  

       

       

       Lorem ipsum dolor sit amet consectetur adipisicing elit vitae incidunt  

       similique!  

       


       

         

           

           Nobis assumenda, in recusandae quam laborum quibusdam sint iusto  

           excepturi omnis earum aspernatur magnam maiores cum facilis alias  

           quo id. Dolorem, expedita!  

           

           

           Facilis obcaecati fugiat libero quas quod animi rerum  

           exercitationem, accusantium autem dicta incidunt, qui voluptatem,  

           recusandae nobis inventore sunt accusamus neque nam?  

           

           

           Officia deserunt assumenda aut temporibus eligendi obcaecati  

           similique totam iste aliquid molestias rem modi, inventore ex  

           voluptatem repellendus voluptas animi? Suscipit, reprehenderit?  

           

         

         

       


       

         

         

       

     

   

  

`

Общий CSS (используется в обоих примерах)

        `* {  

 padding: 0px;  

 margin: 0px;  

 box-sizing: border-box;  

}  



html {  

 font-size: 62.5%;  

}  



body {  

 font-family: 'Rubik', sans-serif;  

 line-height: 1;  

 font-weight: 400;  

 color: #555;  

 font-size: 1.8rem;  

}  



header {  

 font-size: 4.4rem;  

 text-align: center;  

 padding: 0.8rem;  

 background: #e78229;  

 color: #fff3e8;  

}  



.container {  

 max-width: 130rem;  

 background-color: #fff3e8;  

 margin: 0 auto;  

}  

.padding {  

 padding: 3.6rem;  

}  



.css-image {  

 height: 24rem;  

 width: 24rem;  

 background-color: #e78229;  

 justify-self: center;  

 position: relative;  

}  

  

`

CSS для F-паттерна

        `.logo {  

 font-family: 'Pacifico', cursive;  

 font-style: bold;  

 font-size: 4.4rem;  

 margin-bottom: 5.6rem;  

}  



.text-heading-primary {  

 font-size: 3.6rem;  

 margin-bottom: 2.4rem;  

 color: #e78229;  

 font-weight: 600;  

}  



.text-heading {  

 font-size: 2.2rem;  

 margin-bottom: 5.6rem;  

 font-style: italic;  

}  



.grid-2-cols {  

 display: grid;  

 grid-template-columns: 1fr 1fr;  

 padding: 2.4rem;  

}  



.text {  

 display: grid;  

 gap: 3.6rem;  

 margin-bottom: 4.8rem;  

  

  

}  

.img-01 {  

 border-radius:  5% 40% 40% 40%;  

}  



button {  

 font-family: 'Rubik', sans-serif;  

 font-size: 1.8rem;  

 color: #555;  

 font-weight: 600;  

 padding: 2.4rem;  

 display: inline-block;  

 margin-right: 5rem;  

 border: none;  

 border-radius: 15px 15px 15px 15px;  

 background-color: #ffc18b;  

  

  

}  

`

Вывод и разбор F-паттерна

Результат F-паттерна, визуальная схема и макет

В примере видно: сначала пользователь видит заголовок и подзаголовок, затем сканирует списки, и в конце — CTA. Изображение выступает поддерживающим элементом. F-паттерн упорядочивает поток внимания так, чтобы важная информация попадала в первые зоны зрения.

Важно: F-паттерн наиболее эффективен при большом объёме контента и упорядоченной типографике.

Z-Pattern: цель и подход

Z-паттерн задаёт графический маршрут взгляда через страницу: верхняя горизонталь — диагональ — нижняя горизонталь. Его задача — привести взгляд к решающему CTA на конце пути.

HTML

        `  

  

   

     

     

     

     

     

     

     

     

   F and Z-Patterns Using HTML and CSS  

   

   

   Z-Pattern Using HTML and CSS  

     


   

       

       01  

       Minimal copy? Use the Z-Pattern right away!  

         

         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum  

         voluptatum ad, impedit ab consequatur porro harum a distinctio  

         accusantium reiciendis rerum, vel ut blanditiis excepturi nostrum,  

         earum labore esse culpa?  

         

       

       



   

       

       

       02  

       Minimal copy? Use the Z-Pattern right away!  

         

         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum  

         voluptatum ad, impedit ab consequatur porro harum a distinctio  

         accusantium reiciendis rerum, vel ut blanditiis excepturi nostrum,  

         earum labore esse culpa?  

         

       

     

   

  

`

CSS для Z-паттерна

        `.container {  

 max-width: 130rem;  

 background-color: #fff3e8;  

 margin: 0 auto;  

}  



.grid-2-cols {  

 display: grid;  

 grid-template-columns: 1fr 1fr;  

 padding: 5rem;  

 gap: 5.2rem;  

 justify-items: center;  

 align-items: center;  

}  



.text {  

 max-width: 45rem;  

}  



.text-number {  

 color: #ccc;  

 font-size: 8.6rem;  

 font-weight: 600;  

 margin-bottom: 1.2rem;  

}  



.text-heading {  

 font-size: 2.4rem;  

 font-weight: 600;  

 margin-bottom: 3.4rem;  

}  



.css-image {  

 height: 24rem;  

 width: 24rem;  

 background-color: #e78229;  

 justify-self: center;  

 position: relative;  

}  

.img-01 {  

 border-radius: 5% 40% 40% 40%;  

}  

.img-02 {  

 border-radius: 40% 5% 40% 40%;  

}  

`

Результат Z-паттерна, визуальная схема и макет

Z-паттерн хорош для страниц с минимальным текстом: заголовок, яркий визуал, короткое описание и заметный CTA — всё это укладывается в естественный маршрут взгляда.

Когда эти паттерны не работают

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

Альтернативные подходы

Карточный интерфейс для однотипного контента.
Модульная сетка (Masonry) для портфолио и галерей.
Центрированная композиция для бренд‑лендингов с сильной визуальной историей.

Быстрый чек‑лист внедрения (для команды)

Для дизайнера:

Разместить главный заголовок и подсказку рядом с началом пути взгляда.
Обеспечить достаточный контраст и отступы между зонами.

Для фронтендера:

Реализовать сетку через CSS Grid или Flexbox.
Проверить табоиндексацию и доступность клавиатурной навигации.

Для продукт‑менеджера:

Определить ключевую цель страницы (подписка, покупка, лид).
А/B‑тестировать положение CTA.

Простая методология проверки качества

Определите цель страницы и KPI (конверсия в клик, время на странице).
Прототип на бумаге: нанесите предполагаемый маршрут взгляда.
Соберите 5–10 записей поведения пользователей или используйте тепловые карты.
Итерации: скорректируйте расположение и проведите новый тест.

Ментальные модели и эвристики

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

Decision flow — как выбрать паттерн

flowchart TD
  A[Есть ли много текста?] -->|Да| B[F-паттерн]
  A -->|Нет| C[Z-паттерн]
  B --> D[Разместить заголовок и первые абзацы слева сверху]
  C --> E[Разместить визуал и CTA на диагонали Z]

Критерии приёмки

Заголовок и ключевой текст видны без прокрутки на широкой версии.
CTA находится в пределах естественного пути взгляда для выбранного паттерна.
На мобильной версии порядок блоков логичен и протестирован на 3 реальных устройствах.

Резюме

F- и Z-паттерны — простые инструменты визуального проектирования, которые помогают направлять взгляд пользователя и улучшать видимость CTA. Они не универсальны: учитывайте формат контента, устройство и цель страницы, тестируйте и итеративно улучшайте расположение элементов.

Краткие рекомендации: