Когда структура сайта продумана и техническая основа готова, важно понять, каким человек увидит этот сайт. Первое впечатление влияет на вполне практичные вещи: житель должен узнать площадку своего города, увидеть ее связь с движением «Щедрый вторник» и среди десятков событий заметить то, к которому хочет присоединиться.
Привлекательного вида для регионального сайта недостаточно. Ему нужен визуальный язык, который помогает людям ориентироваться, вызывает доверие и связывает общую идею движения с конкретным местом. Опыт «Щедрого Екатеринбурга» показывает, что такой язык можно найти без сложной и дорогой работы над каждым экраном с нуля.
6.1. Баланс между федеральной айдентикой и локальной идентичностью
У региональной команды есть две задачи, которые на первый взгляд могут спорить друг с другом. С одной стороны, сайт должен быть узнаваемой частью «Щедрого вторника». С другой — говорить о событиях, людях и местах своего региона, а не выглядеть копией федеральной площадки.
Для «Щедрого Екатеринбурга» опорой стали цвета федерального движения: синий, серый, красный и белый. Они сохранили визуальную связь с общей кампанией. К ним добавили собственный зеленый, связанный с малахитом. Он вписался в существующую палитру и помог обозначить местный характер проекта.
Региональный логотип тоже не создавали с чистого листа. В нем сохранили узнаваемые элементы знака федеральной акции «Щедрый вторник»: хэштег, красное сердце, синий и красный цвета, характер надписи «Щедрый». При этом слово «Вторник» уступило место названию города. «Екатеринбург» набрали фирменным шрифтом городского логотипа. Для слова «Щедрый» взяли шрифт, который используют в логотипе федеральной акции. Он называется NauryzRedKeds. Команда пробовала разные варианты написания и регистра: у этого шрифта заглавные буквы меняют рисунок надписи. Так получился знак, в котором видно и общее движение, и конкретный город.
Иллюстрация для верстки: федеральный логотип «Щедрого вторника» и региональный логотип «Щедрого Екатеринбурга» рядом. Отметить сохраненные элементы и локальные изменения. Использовать официальные файлы и указать источник каждого знака.
Отдельным региональным образом стало малахитовое сердце. Сердце говорит о благотворительности, а малахит отсылает к Уралу. Во время разработки у команды возникло сомнение: не прозвучит ли «каменное сердце» холодно, не будет ли противоречить идее добра? После запуска команда не столкнулась с таким прочтением: символ оказался понятным, и вопрос о его «каменности» не возникал. Это полезное напоминание: образ стоит оценивать в контексте всего проекта, а не только по одной возможной ассоциации.
Не каждому региону нужен собственный символ, и тем более не нужно искать для него обязательный аналог малахита. Важно другое: найти образ, который действительно связан с местом и помогает жителям почувствовать, что сайт рассказывает об их городе или области. При этом логотип и базовые элементы федеральной кампании должны оставаться узнаваемыми.
6.2. Дизайн как инструмент
Человек может услышать о благотворительной акции и сразу открыть сайт с телефона. Он не будет долго изучать цветовую концепцию: ему нужно быстро понять, что происходит, когда и где, а затем решить, как участвовать. Если оформление помогает пройти этот путь, оно работает. Если ради эффекта приходится искать дату среди декоративных элементов или разбираться, куда ведет кнопка, дизайн начинает мешать.
На сайте «Щедрого Екатеринбурга» календарь и карточки событий занимают заметное место. Это соответствует задаче проекта: показать множество доступных добрых дел и помочь выбрать конкретное. В календаре видны даты и количество событий на каждый день, а ниже — сами карточки. Разные части страницы связаны общим визуальным языком, поэтому большой объем информации не выглядит набором случайных объявлений.
Полезно проверять каждое решение простым вопросом: что оно помогает человеку увидеть, понять или сделать? Региональный знак помогает узнать место. Цвет и размер заголовка помогают найти нужный раздел. Одинаковое оформление карточек помогает сравнить события. У дизайна может быть характер, но у каждого важного элемента должна быть понятная роль.
6.3. Изучение визуального контекста региона
Местный характер не сводится к гербу, флагу или обязательной фотографии центральной площади. Его можно передать через материал, цвет, городские детали, фотографии людей и событий. Но выбирать их стоит осмысленно. Знакомый жителям образ будет работать лучше случайного «регионального» украшения, даже если второе выглядит эффектнее на макете.
Перед обсуждением дизайна соберите небольшую подборку: фотографии города и области, примеры местных инициатив, визуальные материалы партнеров, элементы федеральной айдентики. Обсудите с командой, какие ассоциации соответствуют проекту, а какие выглядят слишком официально, туристически или не связаны с благотворительностью. Так у дизайнера появится содержательная задача, а не просьба «сделать что-нибудь про наш регион».
В Екатеринбурге такой точкой стал малахит. Команда не пыталась буквально изобразить весь Урал на каждой странице. Один сильный образ и связанный с ним цвет дали сайту местный акцент, который можно повторять без визуального шума. Для другого региона решение может быть совершенно иным: важно, чтобы за ним стояло объяснение, понятное самой команде и ее аудитории.
6.4. Цветовая палитра
Цвет помогает связать страницы между собой и расставить акценты. На сайте «Щедрого Екатеринбурга» федеральные синий, серый, красный и белый соседствуют с локальным мятно-зеленым оттенком, взятым из образа малахита. На главной странице малахитовое сердце объясняет происхождение этого цвета; в разделах событий зеленый становится заметной частью оформления. При этом красный и синий продолжают поддерживать связь с общей айдентикой.
Иллюстрация для верстки: компактная палитра сайта с федеральными синим, серым, красным и белым цветами и региональным мятно-зеленым акцентом. Для каждого цвета указать его назначение в интерфейсе, а не только код или декоративное название.
Другим регионам не требуется повторять именно такую палитру. Можно сохранить федеральную основу и добавить один местный акцент, если он действительно нужен. Важно заранее договориться, где используется каждый цвет: для фона, заголовков, отметок, ссылок и действий. Тогда новый раздел будет выглядеть частью сайта, даже если его добавят спустя год.
О цвете стоит судить не только по впечатлению на большом экране. Прочитайте текст на цветном фоне, посмотрите календарь на телефоне, проверьте, различимы ли кнопки и подписи. Если цвет помогает заметить важное, но мешает читать, решение нужно упростить. Нельзя передавать смысл только цветом: дата, статус или тип события должны быть понятны и по тексту либо другому обозначению.
6.5. Типографика
Шрифт тоже создает характер сайта. В «Щедром Екатеринбурге» не стали собирать новую шрифтовую палитру: основой послужили шрифты федеральной акции «Щедрый вторник». Для заголовков выбрали NauryzRedKeds, для обычного текста и абзацев — Arial. Первый помогает узнать характер кампании с первого взгляда, второй дает спокойно читать описания событий, новости и сведения в карточках.
Иллюстрация для верстки: образцы заголовка шрифтом NauryzRedKeds и основного текста Arial, а также несколько вариантов регистра слова «Щедрый». Подпись должна пояснять, что фирменный шрифт используется точечно, а не для длинных абзацев.
Разница особенно заметна там, где информации много. Выразительный заголовок помогает найти раздел, а дата, адрес, условия участия и длинное описание должны оставаться легко читаемыми. Если набрать весь текст акцентным шрифтом, он перестанет быть акцентом и усложнит чтение. Поэтому для длинных материалов, форм и мелких подписей полезно сохранять спокойное начертание.
Работа над региональным логотипом показала, что даже знакомый шрифт может звучать по-разному. У NauryzRedKeds смена регистра меняет вид букв, поэтому команда перебрала варианты написания «Щедрый», прежде чем выбрать подходящий. Название города набрали фирменным шрифтом логотипа Екатеринбурга. Это точечный местный акцент в знаке, а не повод менять шрифт всех текстов на сайте.
Другой региональной команде стоит сначала посмотреть, какие шрифты уже есть у федерального движения. Если они решают задачу, не нужно придумывать новую систему. Важно договориться, где используется выразительный шрифт, а где — основной, и проверить их на длинных названиях, кириллице и экранах телефона. Читателю должно быть легко и узнать проект, и прочитать условия участия.
6.6. Фотографии
Региональный сайт рассказывает о реальных людях и делах. Поэтому собственные фотографии местных событий делают для доверия больше, чем универсальные изображения из фотобанка. Они показывают знакомые пространства, участников и масштаб происходящего. На главной странице «Щедрого Екатеринбурга» рядом с графикой и карточками есть фотографии событий: это помогает увидеть за календарем живое сообщество.
Для первого запуска не нужна огромная библиотека изображений. Лучше собрать небольшую подборку качественных фотографий с разными сюжетами: участники, организаторы, места проведения, процесс совместной работы. Убедитесь, что изображения можно публиковать, а подписи и указание авторства подготовлены там, где это требуется. Вопросы согласия и уважительного показа людей подробнее рассмотрены в главе 4.
Старайтесь не выбирать кадр только потому, что он «эмоциональный». Фотография должна рассказывать о событии честно и уважительно. Избыток постановочных улыбок или изображений, давящих на жалость, может ослабить доверие. Перед публикацией проверьте и практические вещи: хорошо ли виден главный сюжет в маленьком размере, не обрезаются ли лица, быстро ли открывается страница с фотографиями.
6.7. Иллюстрации и графические элементы
Графика может стать коротким и выразительным способом рассказать о проекте. Малахитовое сердце на главной странице «Щедрого Екатеринбурга» делает это быстрее длинного объяснения: оно соединяет тему добрых дел с уральским контекстом. Повторяющиеся формы, значки и цветовые акценты помогают сохранять узнаваемость на разных страницах.
Но сильный символ не нужно ставить повсюду. Если иллюстрация перекрывает текст, усложняет карточку или отвлекает от действия, она теряет смысл. Достаточно определить несколько мест, где графический образ действительно нужен: например, первый экран, раздел о проекте или материалы кампании. В остальных случаях лучше дать место содержанию.
Значки тоже должны помогать читать страницу. Иконка календаря рядом с датой или отметка на карте полезны, когда их смысл очевиден. Если человеку приходится угадывать значение рисунка, добавьте подпись. Особенно это важно в карточках событий, где за короткое время нужно понять много разной информации.
6.8. Единая дизайн-система
Сайт развивается: появляются новые события, организации, новости, партнеры. Если каждый блок оформлять заново, страницы быстро начинают выглядеть так, словно их собрали из разных проектов. Единая система нужна не ради формального документа, а чтобы команда могла добавлять материалы без постоянных решений «какую кнопку и какой цвет поставить на этот раз».
Начните с малого: зафиксируйте палитру, основные шрифты и размеры заголовков, вид кнопок, карточек и форм, правила для фотографий и логотипов. На скриншотах «Щедрого Екатеринбурга» видно, как повторение формы карточек, обозначений дат и кнопок связывает календарь с общей страницей событий. Это полезный принцип для любого регионального сайта, даже если его ведет небольшая команда.
Иллюстрация для верстки: несколько согласованных элементов интерфейса «Щедрого Екатеринбурга» — карточка события, дата, кнопка и поле формы. Показать повторяющиеся решения, которые образуют простую дизайн-систему. Указать адреса страниц и дату съемки экранов.
Проверить систему можно на реальном материале. Возьмите короткое и длинное название события, карточку с фотографией и без нее, разные даты и адреса. Если все это остается аккуратным и читаемым, правила достаточно гибкие. Если приходится каждый раз вручную «спасать» макет, стоит упростить оформление или изменить шаблон карточки.
6.9. Доверие через дизайн
Доверие не появляется от одного правильного оттенка. Оно складывается из мелочей: страница выглядит аккуратно, текст можно прочитать, разные разделы оформлены последовательно, за красивым анонсом легко найти конкретного организатора и его контакты. Человек должен понимать, что сайт живой и за ним стоит команда, которая следит за информацией.
Для благотворительного проекта это особенно важно. Посетитель может впервые слышать о событии или организации и решать, готов ли прийти, оставить контакт или перейти на страницу сбора. Оформление не заменяет проверку организаторов и прозрачную информацию, о которых говорилось в главе 4. Но оно помогает этой информации быть заметной. Если дата спрятана, контакт трудно найти, а кнопки на соседних карточках выглядят по-разному, даже хороший проект может вызвать сомнение.
Посмотрите на сайт глазами нового посетителя: понятно ли, чья это площадка, что происходит сейчас, как открыть подробности события и кому задать вопрос? Проверяйте не только главную страницу, но и календарь, карточку события, контакты и мобильную версию. Именно там доверие чаще всего проверяется делом.
6.10. Что не следует делать
Первая ошибка — пытаться уместить в дизайн все узнаваемые образы региона сразу. Несколько конкурирующих символов не усилят местный характер, а размоют его. История малахитового сердца показывает обратное: один осмысленный образ может связать регион и тему благотворительности яснее целого набора украшений.
Вторая — делать каждую страницу «особенной» за счет нового цвета, шрифта или формы карточки. На сайте, который регулярно пополняют разные люди, такая свобода быстро превращается в хаос. Лучше дать команде небольшое число повторяемых решений и применять их последовательно.
Третья — ставить впечатление выше понятности. Мелкий текст, слабый контраст, длинная анимация, текст поверх сложной фотографии или декоративная кнопка без ясной подписи затрудняют участие. Особенно заметно это на телефоне и на страницах с плотной программой событий.
И наконец, не стоит копировать федеральный сайт без учета местной задачи. Общая айдентика помогает узнать движение, а региональному сайту нужно еще показать своих людей, события и пространства. Этот баланс и делает площадку одновременно частью большого движения и своим местом для жителей региона.
Что важно сделать к запуску
Команде не требуется сразу готовить большой брендбук. Для первого года достаточно сохранить узнаваемую связь с федеральным движением, выбрать один осмысленный местный акцент, договориться о базовых правилах цвета и текста, подготовить реальные фотографии и проверить несколько ключевых страниц на телефоне. Обязательно посмотрите, как вместе выглядят главная страница, календарь и карточка события: человек будет переходить между ними, а не оценивать каждый экран отдельно.
После первого сезона можно расширить набор шаблонов, дополнить фотобанк и уточнить правила по результатам работы редакторов и отзывов пользователей. «Щедрый Екатеринбург» не потребовал большой смены оформления после презентации и проработки сайта: выбранная основа сохранилась. Это не означает, что дизайн нужно однажды утвердить и больше не пересматривать. Но если он строится вокруг понятной задачи и реального местного образа, у команды появляется устойчивая основа для развития.
На стыке дизайна и конкретного действия начинается путь пользователя. Дальше важен уже не взгляд команды, которая оформляет сайт, а опыт человека: как он находит событие, выбирает дату, пользуется фильтрами и картой, заполняет форму и понимает, что произошло после отправки.