Введение
Добро пожаловать в гайдлайн фонда «Бешик». Здесь собраны правила использования логотипа, цветов, шрифтов и других элементов фирменного стиля, а также готовые шаблоны для работы.
«Бешик» помогает детям с тяжёлыми заболеваниями получить необходимое лечение. Название фонда отсылает к традиционной кыргызской колыбели — символу заботы, защиты и начала жизни. Фирменный стиль передаёт эти смыслы и помогает фонду говорить узнаваемо и последовательно: в документах, социальных сетях, на сайте и мероприятиях.
Для кого этот гайдлайн?
Для всех, кто создаёт материалы от имени фонда или использует его символику:
- сотрудников фонда, которые готовят документы, презентации и публикации;
- дизайнеров, фотографов и специалистов по коммуникациям;
- типографий и производителей фирменных материалов;
- партнёров и организаторов совместных мероприятий;
- волонтёров, которые помогают рассказывать о фонде.
Готовите материал для фонда? Найдите нужный раздел в меню. Правила, примеры и доступные шаблоны размещены на соответствующих страницах.
Есть вопрос по фирменному стилю? Свяжитесь с ответственным за коммуникации фонда.
Обновлено:
Визитки фонда «Бешик» доступны в двух вариантах: светлом и тёмном. Используйте готовые макеты, заменяя только имя, должность и контактные данные. Расположение элементов, шрифты и цвета сохраняйте без изменений.
Бумага и отделка. Рекомендуем плотность 300–350 г/м² и гладкую матовую поверхность без выраженной фактуры. Для светлого варианта подойдёт белая немелованная бумага; для тёмного — мелованная бумага с матовой ламинацией для защиты от потёртостей. Перед печатью тиража закажите пробный оттиск: проверьте цвет, равномерность тёмной заливки и читаемость мелкого текста.
Перед печатью проверьте контакты и согласуйте с типографией требования к файлу. Исходники и файлы для печати каждого варианта размещаются ниже.
Русский вариант
Персональная визитка · Тёмный вариант
Пунктир — безопасная зона с отступом 3 мм от края.
Пунктир — безопасная зона с отступом 3 мм от края.
QR-код для сохранения контакта. При сканировании QR-кода открывается карточка с именем, должностью, телефоном и электронной почтой. Получатель сможет добавить данные в контакты телефона без ручного ввода.
Чтобы создать код для сотрудника, откройте генератор QR-кодов, выберите формат vCard / Контакт, заполните данные и скачайте результат в SVG. Замените QR-код в макете, сохранив размер и свободное поле вокруг него. Перед печатью проверьте сканирование и правильность данных на телефоне.
Персональная визитка · Светлый вариант
Пунктир — безопасная зона с отступом 3 мм от края.
Английский вариант
Персональная визитка · Тёмный вариант
Пунктир — безопасная зона с отступом 3 мм от края.
Персональная визитка · Светлый вариант
Пунктир — безопасная зона с отступом 3 мм от края.
Кыргызский вариант
Персональная визитка · Тёмный вариант
Пунктир — безопасная зона с отступом 3 мм от края.
Персональная визитка · Светлый вариант
Пунктир — безопасная зона с отступом 3 мм от края.
Палитра фонда «Бешик» разделена на основные и второстепенные цвета. Основные формируют узнаваемый облик фонда; второстепенные дополняют его в графике и иллюстрациях.
При оформлении материалов придерживайтесь следующих правил:
- Белый — основной фон для документов, сайта и информационных материалов.
- Заголовки и наборный текст — тёмные на светлом фоне или белые на тёмном.
- Бирюзовый — главный фирменный акцент: логотип, ссылки, кнопки и графические элементы.
- Второстепенные цвета используйте дозированно. Не делайте все цвета равнозначными в одной композиции.
- Не окрашивайте длинные тексты во второстепенные цвета.
Основные цвета
Белый и тёмный наборный обеспечивают читаемость и спокойную основу. Бирюзовый связывает материалы с фирменным стилем фонда.
| Образец | HEX | RGB | CMYK¹ | PMS² |
|---|---|---|---|---|
| Белый | 255, 255, 255 | 0, 0, 0, 0 | Белая бумага | |
| Тёмный наборный | 48, 50, 54 | 0, 0, 0, 85 | 426 C | |
| Бирюзовый | 32, 111, 124 | 74, 10, 0, 51 | 7474 C |
Второстепенные цвета
Цвета из знака фонда используются в иллюстрациях, орнаментах и небольших акцентах. Они дополняют основную палитру, не заменяя её.
| Образец | HEX | RGB | CMYK¹ | PMS² |
|---|---|---|---|---|
| Голубой | 146, 184, 209 | 30, 12, 0, 18 | 644 C | |
| Оливковый | 125, 135, 54 | 7, 0, 60, 47 | 7491 C | |
| Коралловый | 227, 84, 49 | 0, 63, 78, 11 | 7579 C | |
| Золотистый | 229, 160, 36 | 0, 30, 84, 10 | 7550 C |
Градиенты
Для фонов используйте мягкие переходы осветлённых фирменных цветов. Насыщенный тёмный градиент оставляйте для отдельных акцентных блоков. Не сочетайте все цвета палитры в одном градиенте.
Для обложек, вводных блоков и спокойных информационных фонов.
Для историй фонда, благодарностей и материалов о мероприятиях.
Для обложек и акцентных блоков. Используйте белый текст.
Для обложек, баннеров и крупных графических элементов. Белый текст размещайте на тёмной бирюзовой части, тёмный — на светлой голубой.
Для небольших акцентных блоков и графики. Длинный текст размещайте вне градиента; контраст коротких надписей проверяйте на выбранном участке.
Направление — 110°. Для светлых фонов используйте тёмный наборный текст. Под текстом сохраняйте ровный участок фона без резких переходов.
Контраст и читаемость
Для обычного текста используйте сочетания с контрастом не ниже 4.5:1. Ниже — примеры сочетаний, которые подходят для наборного текста.
Не используйте бирюзовый текст на тёмном наборном фоне. Голубой и золотистый не подходят для мелкого текста на белом; оливковый и коралловый также не используйте для длинных абзацев.
¹ CMYK — расчётные стартовые значения без привязки к ICC-профилю. Тёмный наборный для мелкого текста: C0 M0 Y0 K85. ² PMS — ближайшие экранные аналоги Solid Coated, подобранные по цветовому расстоянию; перед тиражом подтвердите их по физическому вееру и пробному оттиску. Белый означает цвет бумаги, а не отдельную краску.
Типографика фонда «Бешик» строится на сочетании двух гарнитур. Literata придаёт характер заголовкам и слогану. Noto Sans обеспечивает читаемость текстов, контактов и элементов интерфейса. Сохраняйте это распределение ролей во всех материалах фонда.
Фирменный шрифт — Literata
Literata поддерживает кыргызский язык, включая буквы ң, ө и ү. Используйте её для слоганов и крупных заголовков; не набирайте длинные абзацы, контакты и мелкие подписи.
Бешик — место, где начинается жизнь.
Фонд помогает ей продолжаться.
Слоган, крупные заголовки и цитаты.
Заголовки, которым нужен более плотный акцент.
Примеры кыргызских букв Literata приведены выше.
Перейти к файлам Literata ↓Наборный шрифт — Noto Sans
Используйте для основного текста, подзаголовков, контактных данных, подписей, ссылок и кнопок. На сайте Noto Sans также применяется в навигации и служебных заголовках гайдлайна.
Фонд «Бешик» помогает детям с тяжёлыми заболеваниями получить необходимое лечение. Забота о ребёнке и поддержка его семьи — основа нашей работы.
Аа Бб Вв Гг Дд Ее Жж Зз · 0123456789
Типографическая иерархия
Базовая шкала для цифровых материалов. Размер и интерлиньяж указаны в пикселях. В печатных макетах сохраняйте соотношение уровней и проверяйте читаемость в натуральном размере.
Забота, с которой всё начинается
Literata Regular · главный заголовок · 48 / 56Помощь детям
Literata Medium · заголовок раздела · 32 / 40Как поддержать фонд
Noto Sans SemiBold · подзаголовок · 20 / 28Пишите просто и по существу. Делите длинный текст на абзацы, каждый из которых раскрывает одну мысль.
Noto Sans Regular · основной текст · 16 / 28Подпись к фотографии или пояснение к материалу.
Noto Sans Regular · подпись · 12 / 18На небольших экранах уменьшайте главный заголовок до 32 / 40 px, заголовок раздела — до 28 / 36 px. Основной текст сохраняйте не меньше 16 px.
Пример оформления
Один выразительный заголовок, спокойный наборный текст и понятное действие. Не используйте несколько конкурирующих акцентов в одном блоке.
Рядом, когда нужна помощь
Забота начинается с внимания. Вместе мы помогаем детям получить лечение, а их семьям — поддержку в сложный период.
Получить шрифты Literata в заголовке · Noto Sans в тексте и кнопкеРусский, английский и кыргызский
Русский и английский. Используйте Literata в заголовках и Noto Sans в основном тексте. При переводе подбирайте переносы заново: длина строк будет меняться.
Кыргызский. Для кыргызского текста проверяйте отображение букв ң, ө, ү в выбранном шрифте и начертании.
Не подменяйте отдельные буквы внутри слова другой гарнитурой и не заменяйте ө, ү, ң похожими русскими символами.
Правила набора
- Выравнивание. Основной текст — по левому краю. Центрирование допустимо для короткого слогана или заголовка на обложке.
- Длина строки. Ориентир для абзацев — 50–75 знаков. Не растягивайте текст на всю ширину большого макета.
- Интервалы. Отделяйте абзацы свободным пространством. Отступ перед новым заголовком делайте больше, чем после него.
- Выделения. Используйте Medium или SemiBold в Noto Sans. Не выделяйте целый абзац жирным и не набирайте длинные фразы прописными.
- Межбуквенное расстояние. Для крупных заголовков Literata допустимо небольшое отрицательное значение; в основном тексте оставляйте стандартный интервал. Не сжимайте буквы до слипания.
- Цвет. Тёмный текст на светлом фоне или белый на тёмном. Сочетания смотрите в разделе «Цветовая палитра».
- Начертания. Используйте реальные файлы шрифтов. Не создавайте искусственное жирное или наклонное начертание.
Файлы шрифтов
Для работы с макетами и для сайта нужны разные форматы. WOFF предназначен для веб-подключения; для установки на компьютер используйте OTF или TTF.
Логотип благотворительного фонда «Бешик» объединяет графический символ и название фонда.
В основе знака — стилизованный бешик, традиционная кыргызская колыбель. Его форма отсылает к заботе о ребёнке, семейным ценностям и культурным традициям Кыргызстана.
Внутри композиции расположен силуэт ребёнка, подчёркивающий главное направление деятельности фонда — помощь детям с тяжёлыми заболеваниями. Цветочный элемент символизирует жизнь, надежду и её продолжение.
Мягкие линии и природная цветовая палитра формируют доброжелательный, спокойный и человечный образ фонда.
Основная версия логотипа используется в качестве приоритетного средства визуальной идентификации фонда.
Охранное поле
Сохраняйте вокруг логотипа свободное пространство: не менее ⅛ его ширины с каждой стороны. На схеме этот отступ обозначен как x и увеличивается пропорционально логотипу.
Внутри охранного поля не размещайте текст, другие логотипы, изображения и декоративные элементы. Соблюдайте такой же минимальный отступ от края макета. Если место позволяет, оставляйте больше свободного пространства.
Логотип фонда «Бешик» представлен в трёх языковых версиях: кыргызской, русской и английской. Это позволяет сохранять единую визуальную идентичность фонда при работе с разными аудиториями.
Во всех версиях сохраняются фирменный знак, цветовая палитра и пропорции композиции. Меняется только текстовая часть логотипа.
Кыргызская версия
Русская версия
Английская версия
Горизонтальная версия используется в макетах, где пространство ограничено по высоте: на фирменных бланках, в презентациях и широких информационных блоках, где подпись остаётся читаемой.
Знак и название фонда расположены рядом. Во всех языковых версиях сохраняются фирменные цвета и установленная композиция. Используйте готовые файлы: не меняйте расстояния между элементами и не растягивайте логотип.
Кыргызская версия
Русская версия
Английская версия
Сохраняйте охранное поле — не менее ⅛ ширины логотипа с каждой стороны. В этой зоне не размещайте текст, другие знаки и графику. Подробнее — в разделе «Основная версия».
Дополнительные версии предназначены для размещений, где нужна компактная композиция: шапки сайта, небольших цифровых блоков и элементов навигации. Выбирайте готовый вариант под задачу, сохраняя его пропорции и фирменные цвета.
Логотип без подписи
Знак и название фонда без поясняющей строки. Подходит для шапки сайта и горизонтальных блоков с ограничением по высоте.
Русский и кыргызский
Для обоих языков используется один вариант.
Английский
Отдельный символ
Используйте знак без названия, когда принадлежность к фонду уже понятна из контекста: в аватаре, на фирменном носителе или рядом с названием фонда. Для первого знакомства с фондом выбирайте версию с названием.
Текстовый логотип
Название фонда без графического знака. Используйте готовое начертание из файла: не набирайте название заново обычным шрифтом.
Русский и кыргызский
Английский
Favicon
Специальная иконка для вкладки браузера и закладок. Используйте подготовленный файл вместо уменьшенной копии полного логотипа.
Бешик — благотворительный фондДля одноцветного воспроизведения используйте монохромную версию. На белом фоне логотип может быть тёмным или фирменным бирюзовым. На тёмном и бирюзовом фоне используйте белую версию.
Кыргызская версия
Белый на бирюзовомРусская версия
Белый на бирюзовомАнглийская версия
Белый на бирюзовомОтдельный символ
Белый на бирюзовомПравила размещения
- Один цвет на всю композицию. Знак, название и подпись воспроизводятся одинаковым цветом.
- Ровный контрастный фон. Не размещайте логотип поверх пёстрых деталей изображения или резких цветовых переходов.
- Свободное пространство. Соблюдайте охранное поле и сохраняйте пропорции логотипа.
- Готовый файл. Используйте соответствующую одноцветную или белую версию, без обводок, теней и прозрачности.
Фирменный пакет фонда «Бешик» представлен в трёх размерах: 300 × 400, 400 × 500 и 500 × 600 мм. Выбирайте готовый макет под размер пакета, сохраняя расположение элементов, пропорции логотипа и фирменные цвета.
Изготовление. Материал, плотность и способ печати согласуйте с производителем с учётом содержимого и нагрузки. До тиража проверьте цвет, читаемость текста и положение изображения относительно ручек, швов и сгибов. Не масштабируйте макет другого размера вместо использования соответствующего файла.
300 × 400 мм
Ширина × высота
400 × 500 мм
Ширина × высота
500 × 600 мм
Ширина × высота
Информационная доска фонда «Бешик» предназначена для размещения документов, объявлений и материалов о работе фонда. Размер готовой доски — 1720 × 1040 мм, предусмотрено 19 кармашков формата А4.
Изготовление. Используйте готовый макет, сохраняя расположение кармашков, логотипа и фирменных цветов. Материал основы и крепления подберите с производителем под место установки. До изготовления согласуйте размеры кармашков, удобство замены листов и пробу цвета.
Двусторонняя листовка фонда «Бешик» формата А5 предназначена для знакомства с фондом и его работой. Используйте обе стороны готового макета, сохраняя композицию, шрифты и фирменные цвета.
Подготовка к печати. Перед тиражом проверьте контакты, ссылки и QR-код. Согласуйте с типографией бумагу, вылеты и двустороннюю печать; проверьте ориентацию оборота на пробном экземпляре.
Лицевая сторона
Оборотная сторона
Выбирайте фон, на котором логотип считывается целиком: знак, название и мелкие детали не должны сливаться с окружением. На светлом фоне используйте полноцветную версию, на насыщенном бирюзовом — белую.
Фирменные градиенты
Используйте переходы из раздела «Цветовая палитра». Под всей композицией сохраняйте одинаково читаемый участок: логотип не должен пересекать резкий переход из светлого в тёмное.
Фотографии
Выбирайте свободный участок снимка, не перекрывая лицо ребёнка и важные детали. Если фон мешает чтению, осветлите или затемните область под логотипом плавной подложкой.
Полноцветный логотип на свободном светлом участке. Лицо ребёнка и цветок остаются открытыми.
Не размещайте логотип поверх лица, одежды с активной фактурой или контрастных предметов. Дополнительные примеры ошибок — в разделе «Недопустимое использование».
Используйте готовые файлы логотипа. Не изменяйте его форму, цвет и композицию и не добавляйте декоративные эффекты. Ниже показаны намеренно неправильные примеры.
Примеры ошибок
Как правильно
Масштабируйте готовый логотип пропорционально, сохраняйте охранное поле и выбирайте версию под носитель. Для небольшого блока используйте логотип без подписи, а для тёмного фона — белую монохромную версию.
Сочетания с цветом, градиентами и фотографией показаны в разделе «Размещение на фоне».
Двусторонний ролл-ап фонда «Бешик» размером 80 × 200 см предназначен для мероприятий, встреч и информационных зон. Лицевая сторона знакомит с фондом, оборотная содержит QR-код и направления помощи.
Изготовление. Подберите конструкцию для двустороннего ролл-апа и согласуйте с производителем материал полотна, вылеты и техническую зону крепления в кассете. Перед печатью проверьте контакты, адрес сайта и сканирование QR-кода. Сохраняйте фирменные цвета и пропорции готового макета.
Фирменный бланк используется для официальных писем и обращений фонда «Бешик». Ниже — три варианта оформления в формате А4 · 210 × 297 мм. Шаблоны доступны для редактирования в Word.
Перед отправкой замените текст письма, дату, исходящий номер, сведения об адресате и подписанте. Проверьте контакты и банковские реквизиты: в образцах есть данные для заполнения. Сохраняйте поля страницы, расположение логотипа и оформление текста.
Используйте шрифты фонда и не меняйте фирменные цвета. Для отправки готового письма сохраните документ в PDF, чтобы оформление не зависело от устройства получателя.
Вариант 1
Вариант 2
Вариант 3
«Бешик» — общественный благотворительный фонд в Бишкеке, Кыргызстан. Фонд помогает детям с тяжёлыми заболеваниями получить необходимое лечение, оплачивая его стоимость.
В центре нашей работы — ребёнок, его жизнь и будущее. Мы хотим, чтобы в сложный период ребёнок и его семья могли рассчитывать на помощь и заботу.
Бешик — место, где начинается жизнь.
Фонд помогает ей продолжаться.
Главное для фонда
Помощь в оплате дорогостоящего лечения — основное направление деятельности «Бешик». Рассказывая о фонде, мы говорим прежде всего о ребёнке и возможности помочь ему, сохраняем уважение к нему и его семье.
Название «Бешик» отсылает к традиционной кыргызской колыбели — образу защиты и заботы с самого начала жизни. Подробнее об этом — в разделе «Смысл названия».
Как представить фонд
Для краткого знакомства в публикациях, презентациях и партнёрских материалах используйте эту формулировку:
Благотворительный фонд «Бешик» помогает детям с тяжёлыми заболеваниями получить необходимое лечение. Фонд находится в Бишкеке, Кыргызстан.
Название фонда пишется «Бешик», латиницей — Beshik. В русскоязычном тексте используйте кавычки «ёлочки». Написание внутри готового логотипа сохраняйте без изменений.
Бешик — традиционная кыргызская колыбель. Это один из узнаваемых образов детства, материнской заботы и семьи. Для фонда, который помогает детям с тяжёлыми заболеваниями, название выражает главное: ребёнок должен быть окружён заботой и защищён с самого начала жизни.
Образ заботы
Колыбель — первое безопасное пространство ребёнка: место, где его берегут и заботятся о нём. Фонд переносит этот образ в свою работу, становясь опорой для ребёнка и его семьи в период, когда им особенно нужна помощь.
Название говорит о жизни, будущем и заботе. Оно сохраняет связь с культурой Кыргызстана и помогает выразить назначение фонда через близкий и понятный образ.
Связь с логотипом
Колыбель задаёт форму знака и объединяет композицию — как пространство, которое оберегает ребёнка.
Силуэт ребёнка напоминает, ради кого работает фонд. Цветок символизирует жизнь, надежду и её продолжение.
Вместе эти образы раскрывают смысл названия «Бешик».
Готовые файлы и правила применения собраны в разделе «Основная версия логотипа».
Дополнительная графика основана на элементах логотипа фонда. Цветок, сердце и орнамент помогают оформить обложки, публикации и печатные материалы в едином стиле.
Цветок
Самостоятельный акцент для обложек, открыток и информационных материалов. Сохраняйте форму, пропорции и исходное сочетание цветов. Цветок дополняет оформление, а название фонда указывайте текстом или полным логотипом.
Сердце
Сердце из цветка — самостоятельный символ заботы и участия. Используйте его как акцент в публикациях, открытках и материалах о помощи. Сохраняйте внутренний орнамент и пропорции элемента.
которая помогает.
Пример размещения в обложке
Скачать сердцеSVG · 1,9 КБОрнаментальная полоса
Верхний элемент цветка образует плотный ритм: каждый второй фрагмент отражён сверху вниз. Полоса подходит для края пакета, обложки или разделения блоков. Сохраняйте чередование и интервалы между элементами.
Скачивается выбранный цвет орнамента. Фон SVG прозрачный.
Как использовать
- Один приём на макет. Выберите цветок, сердце или орнаментальную полосу, чтобы оформление оставалось спокойным.
- Текст важнее декора. Не размещайте графику под наборным текстом, контактами и QR-кодами.
- Сохраняйте форму. Масштабируйте элементы пропорционально, без растяжения, теней и объёмных эффектов.
- Соблюдайте охранное поле. Декор не должен входить в свободное пространство вокруг логотипа.
Шапка канала и рамка для видео объединяют публикации фонда «Бешик» в едином стиле. Используйте готовые материалы, сохраняя логотип, фирменные цвета и пропорции элементов.
Шапка канала
Горизонтальная композиция с логотипом и слоганом фонда. Размер файла — 2560 × 423 px.
Рамка для видео
Композиция кадра с нижней фирменной полосой, логотипом, адресом сайта и SMS-призывом. Размер — 1600 × 900 px · 16:9.
В макете Figma замените фотографию и текст под задачу, сохраняя фирменную полосу и пропорции элементов. Перед публикацией проверьте короткий номер и адрес сайта.
Обложка страницы фонда «Бешик» в Facebook представлена в двух размерах: 1983 × 793 px и 1640 × 720 px. Оба макета содержат логотип, слоган и блок с информацией о помощи.
Выберите подходящую компоновку и откройте исходник в Figma. Перед размещением проверьте контакты, короткий номер и отображение обложки на компьютере и телефоне: важные элементы должны оставаться видимыми при обрезке и не перекрываться аватаром.
Обложка 1983 × 793 px
Обложка 1640 × 720 px
Аватарки и обложки актуального для Instagram фонда «Бешик». Ниже показано, как материалы выглядят в светлой и тёмной теме устройства. Цвета изображений сохраняются; фон интерфейса и цвет подписей меняются.
Аватарки
Квадратный исходник и круглая версия с логотипом фонда. Сохраняйте белую подложку и свободное пространство вокруг знака, чтобы он оставался читаемым в небольшом размере.
Светлая тема
Тёмная тема
Обложки актуального
Семь обложек для разделов актуальных историй в профиле фонда: помощь, правила, подопечные, новости и информация о фонде. Используйте готовые изображения и сохраняйте их пропорции. Названия разделов указывайте отдельно — они должны читаться в обеих темах интерфейса.
Светлая тема
Тёмная тема
Предпросмотр показывает сочетание изображений с темой интерфейса. Расположение элементов в приложении может отличаться.
Шаблон email-рассылки фонда «Бешик» для сбора помощи ребёнку. Макет включает историю подопечного, фотографии, цель и сумму сбора, блоки помощи через SMS и QR-код, а также кнопки перехода к пожертвованию.
Откройте макет в Figma и замените данные ребёнка, фотографии, сумму и валюту сбора, контакты и ссылки. Короткий номер и QR-код должны соответствовать действующим способам помощи фонда. PNG используется для предпросмотра; для отправки письма потребуется HTML-вёрстка с рабочими ссылками и возможностью отписаться от рассылки.
Открыть макет письмаFigma ↗
Ширина макета — 600 px.
Макеты сториз фонда «Бешик» для сбора помощи, сообщения о завершении сбора и новостей фонда. Формат — 1080 × 1920 px, соотношение сторон — 9:16.
В Figma замените фотографии, тексты и данные сбора. При размещении в Instagram добавьте ссылку на нужную страницу через стикер: кнопка на изображении сама по себе не работает как ссылка. Сохраняйте отступы сверху и снизу, чтобы интерфейс приложения не перекрывал важную информацию.
Сайт фонда «Бешик» помогает посетителю найти историю ребёнка, понять цель сбора и выбрать способ помощи. Оформление должно поддерживать этот путь: понятная навигация, заметные действия, достоверные данные и спокойная подача.
Структура главной
В шапке размещаются логотип, основные разделы и телефон фонда. Пункт «Кому помочь» выделяется обводкой. Дополнительные ссылки остаются визуально спокойнее основных.
- Первый экран. Короткий заголовок, пояснение, фотография или фотокомпозиция и одно основное действие «Помочь». Переключатели слайдов не перекрывают текст и лица.
- Дети ждут помощи. Карточки с именем, фотографией, целью сбора, необходимой и собранной суммой. После карточек — переход ко всем сборам.
- Новости. Публикации о подопечных и работе фонда, дата и ссылка на полную историю. Блок подписки размещается отдельно от карточек.
- О фонде. Краткое описание деятельности и видеорассказ. Рядом — переход к подробной информации.
- Документы и отчётность. Документы с понятными названиями и доступом к файлам; отдельный переход к отчётам.
- Партнёры и подвал. Логотипы партнёров, контакты, навигация и юридическая информация.
Сетка и отступы
На широком экране используйте центральный контейнер около 1110 px. Фон секции может занимать всю ширину окна, а текст, карточки и навигация должны выравниваться по общей сетке.
- Боковые поля на телефоне — 20 px, между карточками — 16–24 px.
- Отступ между крупными секциями — 64–80 px на компьютере и 40–48 px на телефоне.
- Текстовые блоки ограничивайте по ширине: примерно 55–75 знаков в строке. Не растягивайте абзац на всю ширину страницы.
- На телефоне карточки располагаются в одну колонку, меню раскрывается отдельной кнопкой. Содержимое не должно требовать горизонтальной прокрутки.
Фотографии и графика
Фотографии детей — основной эмоциональный элемент. Сохраняйте естественные цвета и кадрируйте снимки так, чтобы лица и важные детали оставались видимыми. Для публикаций о подопечных используйте согласованные фотографии и тексты.
Сердце, цветок и орнамент из раздела «Орнаменты и графика» дополняют композицию. Размещайте их в свободной части фона; уменьшайте насыщенность и контраст рядом с текстом. Графика не должна мешать кнопке помощи или конкурировать с фотографией.
Фоны и акценты
Основной фон — белый. Светлые голубые и тёплые оттенки разделяют крупные блоки. Бирюзовый объединяет навигацию и информационные элементы; коралловый выделяет помощь; золотистый используется для небольших акцентов. Точные значения — на странице «Цветовая палитра».
Содержание
В карточке сбора указывайте, кому нужна помощь, на что собираются средства и сколько осталось собрать. Суммы показывайте в сомах: 300 000 сом. Дату обновления добавляйте к меняющимся сведениям. После закрытия сбора обновляйте статус и основное действие.
Контакты, реквизиты, документы и способы пожертвования должны быть актуальны. Не размещайте декоративный QR-код вместо рабочего и не показывайте примерные цифры как реальные данные фонда.
Типографика сайта строится на Noto Sans: он используется в навигации, заголовках, карточках, формах и основном тексте. Literata добавляет выразительность слогану, цитатам и отдельным редакционным акцентам. Файлы и общие правила — в разделе «Типографика».
Иерархия текста
с вашего участия
Помогаем детям с тяжёлыми заболеваниями получить необходимое лечение.
| Элемент | Компьютер | Телефон | Начертание |
|---|---|---|---|
| Главный заголовок | 38–40 / 42–44 px | 30–34 / 34–38 px | 600 |
| Заголовок раздела | 30–32 / 38–40 px | 26–28 / 34–36 px | 600 |
| Заголовок карточки | 20–24 / 28–32 px | 20–22 / 28–30 px | 600 |
| Основной текст | 16 / 24 px | 16 / 24 px | 400 |
| Кнопки и навигация | 14–16 / 20–24 px | 14–16 / 20–24 px | 600–700 |
| Подписи и даты | 12–14 / 18–20 px | 12–14 / 18–20 px | 400 |
В таблице: размер шрифта / высота строки. Это ориентиры для вёрстки; длину заголовка и переносы проверяют на реальном содержимом.
Выделяйте ключевые слова полужирным. Длинные абзацы оставляйте обычного начертания. Не используйте прописные буквы для основного текста и не уменьшайте шрифт ради размещения большого объёма информации.
Роли цветов
Оливковый и остальные фирменные оттенки из палитры используйте дозированно — в иллюстрациях, фотографиях и отдельных акцентах. Не назначайте отдельный яркий цвет каждому разделу сайта.
Читаемость
На белом фоне используйте тёмный или бирюзовый текст. На бирюзовом — белый. Для светлого голубого и золотистого фона выбирайте тёмный текст. Белый мелкий текст на голубом, золотистом или коралловом фоне не используйте.
Контраст обычного текста должен быть не ниже 4,5:1, крупного — 3:1. Коралловые кнопки с белой надписью требуют более тёмной заливки, например #B93F22; исходный #E35431 оставляйте для декоративных акцентов. Текст поверх фотографии размещайте на однородной подложке либо после проверки контраста.
Цвет сопровождайте подписью: «Сбор закрыт», «Ошибка», «Сумма пожертвования». Ссылки в абзацах подчёркивайте, чтобы они оставались узнаваемыми без различения цвета.
Элементы сайта должны помогать человеку выбрать сбор, получить информацию и сделать пожертвование. Используйте одинаковые формы, размеры и подписи для одинаковых действий. Ниже — примеры оформления, без подключения платежей и отправки данных.
Кнопки
Основная кнопка обозначает помощь: «Помочь», «Поддержать сбор», «Пожертвовать». На одном небольшом блоке оставляйте одно главное действие. Для переходов к истории и списку материалов используйте обводку или текстовую ссылку.
- Высота — 52–56 px, горизонтальные отступы — 24–32 px, скругление — 14–18 px.
- Надпись — Noto Sans 600–700, 16 px. Цвет и контраст сохраняются при наведении.
- При переходе с клавиатуры показывайте заметный контур фокуса. Не убирайте его без замены.
- Во время отправки показывайте «Обрабатываем…» и блокируйте повторное нажатие. Рядом с недоступным действием поясняйте причину.
Ссылки и навигация
В шапке выделяйте «Кому помочь» тонкой золотистой обводкой. Остальные основные пункты используйте без заливки. Дополнительные ссылки делайте спокойнее, сохраняя читаемость.
В тексте ссылка должна описывать переход: посмотреть фирменные цвета, а не «нажмите здесь». Текущий раздел обозначайте не только цветом, но и начертанием, обводкой или подложкой.
Поля и выбор суммы
Подпись поля всегда видна над ним. Подсказка внутри поля показывает пример и не заменяет название. Для суммы используйте обозначение «сом»; для телефона — пример с кодом страны +996.
Выбранную сумму отмечайте обводкой и подложкой. Рядом оставляйте возможность ввести свою сумму. Ошибку показывайте под соответствующим полем и объясняйте, как её исправить. После успешной операции выводите отдельное подтверждение; не считайте само нажатие кнопки успешным платежом.
Карточка сбора
Карточка содержит фотографию, имя и возраст ребёнка, краткую цель помощи, собранную и необходимую сумму, индикатор прогресса и кнопку. Числа должны соответствовать данным сбора; индикатор — их соотношению.
Собрано180 000 сом
Нужно собрать300 000 сом
Метка «Срочный сбор» используется только по подтверждённым данным фонда. Для завершённого сбора меняйте статус на «Сбор закрыт» и убирайте кнопку пожертвования в этот сбор.
Слайдер, SMS и QR-код
Баннер переключается стрелками и точками. Активный слайд заметно отличается; у стрелок есть подписи для вспомогательных технологий. Предпочтительно ручное переключение. Если включена автопрокрутка, предусмотрите паузу.
В блоке SMS указывайте короткий номер и точную инструкцию оператора. QR-код ведёт на конкретную страницу помощи. Рядом размещайте обычную ссылку или кнопку для посетителя, который смотрит сайт с того же телефона.
Все кликабельные элементы должны иметь область нажатия не меньше 44 × 44 px. Иконка дополняет подпись, а не заменяет её смысл.
Шаблоны постов фонда «Бешик» для срочного сбора помощи и сообщения о закрытии сбора. Каждый сюжет подготовлен в трёх форматах: квадратном 1080 × 1080 px, вертикальном 1080 × 1440 px и горизонтальном 1080 × 566 px.
Откройте макет в Figma, замените фотографию, имя ребёнка, цель и сумму сбора. Перед публикацией проверьте короткий номер, инструкцию SMS и ссылку в QR-коде. В подписи к посту укажите, где найти страницу помощи; изображение кнопки само по себе не является активной ссылкой.
Срочный сбор
Квадратный
1080 × 1080 px
Открыть макетFigma ↗Вертикальный
1080 × 1440 px
Открыть макетFigma ↗Горизонтальный
1080 × 566 px
Открыть макетFigma ↗Сбор закрыт
Используйте после подтверждения завершения сбора. Обновите итоговую сумму и поблагодарите участников.
Квадратный
1080 × 1080 px
Открыть макетFigma ↗Вертикальный
1080 × 1440 px
Открыть макетFigma ↗Горизонтальный
1080 × 566 px
Открыть макетFigma ↗Набор из тринадцати иконок для сайта, социальных сетей и информационных материалов фонда. Каждая иконка подготовлена в двух вариантах: цветной символ на светлой плашке и белый символ на насыщенной фирменной плашке.
Выбирайте вариант с учётом фона и сохраняйте одинаковый размер иконок в одной композиции. Не меняйте пропорции и не добавляйте обводки или тени. SVG можно масштабировать без потери качества; исходный размер — 101 × 101 px.
Помощь детям
Сотрудничество
Благотворительная помощь
Сердце
Объявления
Мероприятия
Новости
Подарки
Правила
Подписка на новости
Сообщения
О фонде
Пример главной страницы сайта фонда «Бешик». Макет показывает первый экран и карточки детей, которым нужна помощь.
