> For the complete documentation index, see [llms.txt](https://docs.wfolio.pro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wfolio.pro/site/design/chek-list-po-dizainu-saita.md).

# Чек-лист по дизайну сайта

## Удобство использования

### Главная страница

<i class="fa-square-check">:square-check:</i> Информативный заголовок

<i class="fa-square-check">:square-check:</i> Ваш уникальный логотип

<i class="fa-square-check">:square-check:</i> Доступна информация о жанре, в котором вы снимаете

<i class="fa-square-check">:square-check:</i> Доступна информация о городе, в котором вы работаете

**Примеры:**

{% columns %}
{% column %}

<figure><img src="/files/CpaY6XKY07Q5jSiPfGK5" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i> В заголовке содержится информация о жанре съемки, о городе и об авторе.

<i class="fa-check">:check:</i> Есть уникальный логотип с именем автора.

<i class="fa-check">:check:</i> По фотографии сразу понятно, в каком жанре снимает фотограф.
{% endcolumn %}

{% column %}

<figure><img src="/files/PRIsCUEtVYhFQZcRPsWr" alt=""><figcaption></figcaption></figure>

<i class="fa-xmark-large">:xmark-large:</i> Нет заголовка и логотипа.

<i class="fa-xmark-large">:xmark-large:</i> По фото не понятно, в каком жанре работает фотограф.
{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
Подробнее о том, как создать и загрузить свой логотип, мы рассказываем на странице [**«Логотип»**](/site/design/logo.md)
{% endhint %}

### Действия на странице

<i class="fa-square-check">:square-check:</i> Визуально  заметное целевое действие (кнопка или ссылка)

<i class="fa-square-check">:square-check:</i> Все кнопки работают правильно

**Примеры:**

{% columns %}
{% column width="50%" %}

<figure><img src="/files/GLnfgrb5fJoc8pAtpDsr" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i> Целевое действие выделяется за счет акцентного блока с изображением и заметной кнопки

<i class="fa-check">:check:</i> Второстепенные действия оформлены через ссылки
{% endcolumn %}

{% column width="50%" %}

<figure><img src="/files/CW82AkSTVnMeOghBlaOi" alt=""><figcaption></figcaption></figure>

<i class="fa-xmark-large">:xmark-large:</i> Слишком много акцентных кнопок

<i class="fa-xmark-large">:xmark-large:</i> Целевое действие (запись на съемку) теряется
{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
Ознакомиться подробнее с возможностями кнопок на сайте можно в статье [**«Настройки кнопки»**](/site/blocks/links/button-settings.md)
{% endhint %}

### Обратная связь и соцсети

<i class="fa-square-check">:square-check:</i> Добавлены контакты и соцсети в разделе [**«Визитка»**](https://wfolio.ru/my/card)

**Примеры:**

{% columns %}
{% column %}

<figure><img src="/files/5WEjcoZNwaGyErN8Ue9H" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i> Ссылки на соцсети добавлены - контакты отображаются на всех страницах сайта

<i class="fa-check">:check:</i> Клиент может связаться с фотографом удобным для себя способом в любой момент взаимодействия с сайтом
{% endcolumn %}

{% column %}

<figure><img src="/files/JW4CCEmdZZPK2ppfp6Me" alt=""><figcaption></figcaption></figure>

<i class="fa-xmark-large">:xmark-large:</i>  Ссылки на соцсети не добавлены - доступ к контактам есть не на всех страницах сайта

<i class="fa-xmark-large">:xmark-large:</i> Увеличен путь к целевому действию (связаться с фотографом)
{% endcolumn %}
{% endcolumns %}

### Меню

<i class="fa-square-check">:square-check:</i> Умещается в одну строку (5-7 пунктов)

<i class="fa-square-check">:square-check:</i> Все пункты имеют понятное название

**Примеры:**

{% columns %}
{% column %}

<figure><img src="/files/zdaQoNFypVWfeCbIvfuI" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i>  Меню хорошо структурировано

<i class="fa-check">:check:</i>  Очевидные и понятные названия

<i class="fa-check">:check:</i>  Пункты объединены в выпадающие списки
{% endcolumn %}

{% column %}

<figure><img src="/files/8CQ8KPRscCIqdg6gTTi6" alt=""><figcaption></figcaption></figure>

<i class="fa-xmark-large">:xmark-large:</i>  Пункты меню расположены хаотично

<i class="fa-xmark-large">:xmark-large:</i>  Длинные и сложные названия

{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
Оформить меню в виде выпадающего списка вы можете по инструкции [**«Выпадающее меню»**](/site/menu/add-drop-down-menu.md)
{% endhint %}

***

## Фото и портфолио

### Требования к фото

<i class="fa-square-check">:square-check:</i>  Фотографии загружены в хорошем качестве

**Примеры:**

{% columns %}
{% column %}

<figure><img src="/files/JfmxT9ATtK8S0Ikx2oA1" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i>  Фото в оригинальном размере автоматически оптимизируется под экран и выглядит четко на любом устройстве
{% endcolumn %}

{% column %}

<figure><img src="/files/C5KIejDjqn3gTBC1AOFH" alt=""><figcaption></figcaption></figure>

<i class="fa-xmark-large">:xmark-large:</i>  Сжатое фото в полноэкранных блоках становится нечетким, сайт выглядит непрофессионально
{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
Подробнее о требованиях к фото на сайте мы рассказываем в статье [**«Требования к файлам на сайте»**](/site/blocks/files.md)
{% endhint %}

<i class="fa-square-check">:square-check:</i> Выбран правильный кроп фото

**Примеры:**

{% columns %}
{% column %}

<figure><img src="/files/fcYPGhBHr4m19ICkJvmE" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i>  Выбран прямоугольный кроп, все важные элементы фотографии сохранены, композиция не нарушена

{% endcolumn %}

{% column %}

<figure><img src="/files/eeXdvpfMHbxUttXBY1Cu" alt=""><figcaption></figcaption></figure>

<i class="fa-xmark-large">:xmark-large:</i>  Выбран квадратный кроп, силуэт обрезается по суставам, из-за чего фото выглядит неестественно&#x20;

{% endcolumn %}
{% endcolumns %}

<i class="fa-square-check">:square-check:</i> Для оформления выбраны фото в едином стиле

*<mark style="color:$info;">В портфолио вы сможете показать больше разнообразия</mark>*

**Примеры:**

{% columns %}
{% column %}

<figure><img src="/files/Wym61tuMn1MtmSl2vVjs" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i>  Одна цветовая гамма

<i class="fa-check">:check:</i>  Единый стиль снимков

<i class="fa-check">:check:</i>  Блок выглядит аккуратно и сбалансированно
{% endcolumn %}

{% column %}

<figure><img src="/files/rKcbubMyO9hwjX8SQaki" alt=""><figcaption></figcaption></figure>

<i class="fa-xmark-large">:xmark-large:</i>  Разная цветовая гамма

<i class="fa-xmark-large">:xmark-large:</i>  Разный стиль фотографий

<i class="fa-xmark-large">:xmark-large:</i>  Блок выглядит хаотично

{% endcolumn %}
{% endcolumns %}

### Оформление портфолио

<i class="fa-square-check">:square-check:</i> Портфолио разделено по типам съемок

<i class="fa-square-check">:square-check:</i> В каждой категории 10-25 лучших кадров

**Примеры:**

{% columns %}
{% column %}

<figure><img src="/files/DGe8dE5qy97RUaKL1ebD" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i>  Портфолио разделено по жанрам

<i class="fa-check">:check:</i>  В качестве обложек для категорий выбраны фотографии в одной цветовой гамме

<i class="fa-check">:check:</i>  Удобно ориентироваться по сайту

<i class="fa-check">:check:</i>  Блок выглядит аккуратно и стильно
{% endcolumn %}

{% column %}

<figure><img src="/files/hW8iPU951KFvo0E9W7KR" alt=""><figcaption></figcaption></figure>

<i class="fa-xmark-large">:xmark-large:</i>  Все фото загружены в один альбом

<i class="fa-xmark-large">:xmark-large:</i>   Смешены разные жанры и стили съемок

<i class="fa-xmark-large">:xmark-large:</i>  Слишком много фотографий на одной странице

<i class="fa-xmark-large">:xmark-large:</i>  Страницы не выглядит цельной, ее недосматривают до конца
{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
Чтобы разделить портфолио на категории, воспользуйтесь нашей инструкцией [**«Галерея с альбомами»**](/site/portfolio/gallery.md)
{% endhint %}

***

## Тексты

<i class="fa-square-check">:square-check:</i> На сайте нет опечаток, лишних пробелов и случайных фраз

<i class="fa-square-check">:square-check:</i> Блоки не перегружены текстом

*<mark style="color:$info;">Важно разделить объемные тексты на смысловые блоки.</mark>* \
*<mark style="color:$info;">Оптимально использовать правило</mark> <mark style="color:$info;"></mark><mark style="color:$info;">**«1 блок = 1 абзац»**</mark>*

**Примеры:**

{% columns %}
{% column %}

<figure><img src="/files/RvBZ7DomJ7PjC9EcESyF" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i>  Текст разделен на абзацы

<i class="fa-check">:check:</i>  Важные части текста выделены в отдельные блоки

{% endcolumn %}

{% column %}

<figure><img src="/files/ZUS5vVVVdmP3KKA3oROq" alt=""><figcaption></figcaption></figure>

<i class="fa-xmark-large">:xmark-large:</i>  Большие объемы текста тяжело воспринимаются

{% endcolumn %}
{% endcolumns %}

<i class="fa-square-check">:square-check:</i> Заголовки и подзаголовки используются правильно

*<mark style="color:$info;">Заголовки и подзаголовки нужно использовать для удобной ориентации по сайту. Важно, чтобы они соответствовали содержанию блока.</mark>*

**Примеры:**

{% columns %}
{% column %}

<figure><img src="/files/e7vbNXkKPW2P8S80v58v" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i>  Подзаголовки помогают быстро понять, о чем идет речь в тексте

{% endcolumn %}

{% column %}

<figure><img src="/files/YoyphbIEVRS6dtBlKpq4" alt=""><figcaption></figcaption></figure>

<i class="fa-xmark-large">:xmark-large:</i>  Сплошной текст, прописанный подзаголовком

{% endcolumn %}
{% endcolumns %}

<i class="fa-square-check">:square-check:</i> Выбран оптимальный размер шрифта

*<mark style="color:$info;">Заголовок должен помещаться в 2-3 строки текста.</mark>*&#x20;

*<mark style="color:$info;">Все зависит от выбранного вами шрифта, однако мы рекомендуем:</mark>*

* *<mark style="color:$info;">Для основного текста размер 15-17 px;</mark>*
* *<mark style="color:$info;">Для подзаголовоков – 22-28 px;</mark>*
* *<mark style="color:$info;">Для заголоков – 34-44 px.</mark>*

**Примеры:**

{% columns %}
{% column %}

<figure><img src="/files/waZPcg3vWaeVNHUuZICd" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i>  Выбран оптимальный размер заголовка

<i class="fa-check">:check:</i>  Используется хороший контраст между заголовком и основным текстом

<i class="fa-check">:check:</i>  Текст читается легко

{% endcolumn %}

{% column %}

<figure><img src="/files/C2wduSfAaonvYnjypgnN" alt=""><figcaption></figcaption></figure>

Слева:

<i class="fa-xmark-large">:xmark-large:</i>  Выбран слишком большой размер заголовка

<i class="fa-xmark-large">:xmark-large:</i>  Слишком длинный текст в заголовке

<i class="fa-xmark-large">:xmark-large:</i>  Текст написан капсом

Справа:&#x20;

<i class="fa-xmark-large">:xmark-large:</i>  Выбран слишком маленький размер заголовка

<i class="fa-xmark-large">:xmark-large:</i>  Используется низкий контраст между заголовком и основным текстом
{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
Настроить размеры шрифта на сайте можно во вкладке **«Шрифты сайта»** в разделе [**«Дизайн»**](https://wfolio.ru/my/design) вашей панели управления
{% endhint %}

<i class="fa-square-check">:square-check:</i> Если текст размещен на фото: используется однородный фон без мелких деталей

*<mark style="color:$info;">Если фото светлое - используйте затемнение в настройках блока</mark>*

**Примеры:**

{% columns %}
{% column %}

<figure><img src="/files/CMc1v61kmDsTSf7c28FO" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i>  Фотография и текст легко считываются и не мешают друг другу
{% endcolumn %}

{% column %}

<figure><img src="/files/IL5ER3PZqPyTZijbCLl4" alt=""><figcaption></figcaption></figure>

<i class="fa-xmark-large">:xmark-large:</i>  Тяжело рассмотреть фотографию и прочитать текст
{% endcolumn %}
{% endcolumns %}

***

## Целостность

### Стиль текстов

<i class="fa-square-check">:square-check:</i> Все тексты оформлены в едином стиле

**Примеры:**

{% columns %}
{% column %}

<figure><img src="/files/cDTFdDWHnLzzQK06oNr7" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i>  Используется единый стиль заголовков и подзаголовков

<i class="fa-check">:check:</i>  Блок выглядит цельным и профессиональным

<i class="fa-check">:check:</i>  Текст читается быстрее

{% endcolumn %}

{% column %}

<figure><img src="/files/H1f8KiH4M5iQ9UWkGRaF" alt=""><figcaption></figcaption></figure>

<i class="fa-xmark-large">:xmark-large:</i>  Отличаются: регистр, выравнивание и визуальный ритм

<i class="fa-xmark-large">:xmark-large:</i>  Блок выглядит неаккуратно и сложнее воспринимается

{% endcolumn %}
{% endcolumns %}

### Отступы

<i class="fa-square-check">:square-check:</i> Между блоками используются одинаковые отступы

**Примеры:**

{% columns %}
{% column %}

<figure><img src="/files/lLPQwawsJci3A6BtELwy" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i>  Отступы выстроены по одной логике

<i class="fa-check">:check:</i>  Блоки читаются последовательно

<i class="fa-check">:check:</i>  Страница выглядит аккуратной и целостной

{% endcolumn %}

{% column %}

<figure><img src="/files/4TD3cDnl1bCIGFMKzqmA" alt=""><figcaption></figcaption></figure>

<i class="fa-xmark-large">:xmark-large:</i>  Нет единой логики отступов

<i class="fa-xmark-large">:xmark-large:</i>  Много лишнего пустого пространства

<i class="fa-xmark-large">:xmark-large:</i>  Страница выглядит несбалансированно

{% endcolumn %}
{% endcolumns %}

### Фотографии

<i class="fa-square-check">:square-check:</i> Все фотографии либо с прямыми углами, либо со скруглением

**Примеры:**

{% columns %}
{% column %}

<figure><img src="/files/qppPOl7kTzIncUeXWku1" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i>  Все фотографии имеют скругление или все фотографии прямые

<i class="fa-check">:check:</i>  Сайт выглядит цельно, видно внимание к деталям

{% endcolumn %}

{% column %}

<figure><img src="/files/2QvwwtIApdY5JHTd68Ej" alt=""><figcaption></figcaption></figure>

<i class="fa-xmark-large">:xmark-large:</i>  Часть фото с прямыми углами, часть со скругленными

<i class="fa-xmark-large">:xmark-large:</i>  Нарушена целостность сайта, он выглядит менее профессиональным

{% endcolumn %}
{% endcolumns %}

***

## Мобильная версия

### Оформление текста

<i class="fa-square-check">:square-check:</i> Все тексты легко читаются и не перекрывают важные части фото

**Примеры:**

{% columns %}
{% column %}

<figure><img src="/files/I0UBLTbefFPwapUJKxLz" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i>  Оптимальный размер заголовка

<i class="fa-check">:check:</i>  Однородный фон

<i class="fa-check">:check:</i>  Информация воспринимается легко
{% endcolumn %}

{% column %}

<figure><img src="/files/WIwIygaTi12jyK1rne1T" alt=""><figcaption></figcaption></figure>

<i class="fa-xmark-large">:xmark-large:</i>  Детализированный фон мешают восприятию текста

<i class="fa-xmark-large">:xmark-large:</i>  Крупный размер заголовка мешают восприятию фотографии
{% endcolumn %}
{% endcolumns %}

### Логотип

<i class="fa-square-check">:square-check:</i> Загружены обе версии логотипа

*<mark style="color:$info;">Даже если вы отключили поддержку темной темы, для некоторых вариантов обложки может потребоваться вторая версия логотипа.</mark>*

**Примеры:**

{% columns %}
{% column %}

<figure><img src="/files/tskktH4eE4SHxW7veE3p" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i>  Загружены обе версии логотипа
{% endcolumn %}

{% column %}

<figure><img src="/files/UDa6IOkVGVKzftLX2LTL" alt=""><figcaption></figcaption></figure>

<i class="fa-xmark-large">:xmark-large:</i>  Нет логотипа для темного фона, используется стандартный логотип
{% endcolumn %}
{% endcolumns %}

### Формат обложки

<i class="fa-square-check">:square-check:</i> Выбран подходящий формат обложки

**Примеры:**

{% columns %}
{% column %}

<figure><img src="/files/f2Vx58Xs4lnLOLoRExvr" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i>  Загружено предварительно кадрированное фото

<figure><img src="/files/kppB1aexPVl3yrTVPRCD" alt=""><figcaption></figcaption></figure>

<i class="fa-check">:check:</i>  Выбран горизонтальный формат обложки, фото отображается целиком

{% endcolumn %}

{% column %}

<figure><img src="/files/z9XKPCJ3PRF1Lq6L9hsW" alt=""><figcaption></figcaption></figure>

<i class="fa-xmark-large">:xmark-large:</i>  Загружено горизонтальное фото для вертикального формата обложки

<i class="fa-xmark-large">:xmark-large:</i>  Фото неудачно обрезается под вертикальный формат

{% endcolumn %}
{% endcolumns %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.wfolio.pro/site/design/chek-list-po-dizainu-saita.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.