> For the complete documentation index, see [llms.txt](https://vitrina-blogerov.gitbook.io/bloggers-showcase/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vitrina-blogerov.gitbook.io/bloggers-showcase/prilozheniya/primer-oformleniya-vitriny.md). # Пример оформления витрины Можете ознакомиться с оформлением демоверсии:

Перейти к ДЕМО

{% hint style="info" %} Подробные рекоммендации описаны в разделе ["Рекоммендации по оформлению. Витрина".](broken://pages/ZpP64ZYlsg7B5IZsVyhQ) {% endhint %} Демоверсию можно использовать как эталон при оформлении собственной витрины. Конкретные цвета, фотографии и тексты будут зависеть от бренда агентства.
{% hint style="success" %} Демоверсия показывает не обязательный шаблон, а рекомендуемый уровень оформления. В собственной витрине используются логотип, фирменные цвета и материалы агентства. {% endhint %} ### Фирменное оформление В верхней части демоверсии размещён логотип. Его положение и размер подобраны так, чтобы бренд был заметен сразу после открытия витрины, но не отвлекал внимание от каталога. В рабочей версии на его месте устанавливается логотип агентства. Для интерфейса выбрана единая тёмно-синяя цветовая схема. Фон фотографий карточек подобран исходя из основной цветовой схемы. Благодаря этому интерфейс воспринимается как цельный продукт, а не как набор отдельных элементов. Логотип, цветовая схема и содержимое карточек визуально относятся к одному бренду. ### Изображения карточек Для демонстрационных карточек подобраны качественные фотографии с похожей композицией, освещением и цветовой обработкой. На каждом изображении блогер остаётся главным объектом кадра, а фон помогает передать тематику его контента. Особое внимание уделено сочетанию фотографий с цветовой схемой интерфейса. В изображениях используются синие и нейтральные оттенки, совпадающие с основными цветами витрины. За счёт этого фотографии не выглядят вставленными поверх готового интерфейса, а продолжают его визуальный стиль. Такой эффект можно получить не только подбором исходных фотографий, но и их предварительной обработкой. Например, фон изображения можно заменить или окрасить в основной цвет витрины. Этот приём особенно хорошо работает, когда исходные фотографии блогеров заметно отличаются по стилю. ### Компактная карточка На главной странице отображается краткая версия карточки. В ней собрана информация, необходимая для первого знакомства с блогером:
* фотография; * имя или название канала; * используемые социальные сети; * короткое описание; * кнопка добавления блогера в подборку. Краткое описание выполняет роль продающего анонса. Оно не пересказывает биографию автора, а сразу показывает его позиционирование, тематику и основные преимущества. Самая важная информация размещается в начале текста, поскольку часть описания в компактной карточке может быть скрыта. Пользователь должен понять ценность блогера ещё до открытия полной карточки. ### Расширенная карточка После открытия карточки пользователь получает более подробную информацию о блогере. В демоверсии расширенная карточка сохраняет тот же визуальный стиль, но предоставляет больше пространства для фотографии, описания и элементов управления.
Карточки в демоверсии заполнены не только визуально, но и содержательно. Для каждого блогера добавлены: * имя или псевдоним; * краткое позиционирование; * подробное описание; * ссылки на действующие социальные сети; * тематические теги; * информация, необходимая для поиска и фильтрации. Ссылки на социальные сети позволяют сразу перейти к профилям блогера и самостоятельно оценить его контент. Для всех платформ используются иконки из одного набора, поэтому они не нарушают общий стиль карточки. Теги описывают тематику, формат контента и другие характеристики блогера. Они используются не как декоративные подписи, а как часть системы поиска и фильтрации. Благодаря этому рекламодатель может быстрее найти авторов под конкретную задачу. {% hint style="warning" %} Главная задача карточки - продать рекламное размещение у блогера. Она должна не просто сообщать, кто перед пользователем, а объяснять, чем этот автор интересен рекламодателю и почему его стоит добавить в подборку. {% endhint %} ### Продающие тексты Описания в демоверсии построены вокруг ценности блогера для рекламодателя. В текстах раскрываются тематика контента, характер подачи, особенности аудитории и сильные стороны автора. Короткий текст отвечает на вопрос: **почему стоит открыть эту карточку?** Подробное описание отвечает на следующие вопросы: * какой контент создаёт блогер; * для какой аудитории он работает; * чем отличается от других авторов; * какие рекламные интеграции будут смотреться органично; * почему сотрудничество с ним может быть полезно бренду. Продажа здесь важнее формального заполнения полей. Даже красивая карточка не выполняет свою задачу, если её описание состоит из общих фраз и не даёт рекламодателю оснований выбрать блогера. ### А теперь коротко | Элемент | Реализация | | ------------------ | ------------------------------------------------------------------------- | | Логотип | Размещён в верхней части интерфейса и встроен в общую композицию | | Цветовая схема | Единая тёмно-синяя палитра для фона, карточек и элементов управления | | Фотографии | Подобраны и обработаны в одном стиле, их фон сочетается с цветами витрины | | Краткие тексты | Передают позиционирование блогера непосредственно в каталоге | | Подробные описания | Раскрывают ценность автора для рекламодателя | | Социальные сети | Добавлены действующие ссылки и иконки из одного набора | | Теги | Используются для классификации, поиска и фильтрации | | Карточки | Полностью заполнены и готовы к добавлению в подборку | --- # 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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://vitrina-blogerov.gitbook.io/bloggers-showcase/prilozheniya/primer-oformleniya-vitriny.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.