В статье расскажу, как мы нашим креативным агентством взялись за некоммерческий проект и создали сайт для благотворительного фонда помощи бездомным собакам. Внимание: после прочтения этой статьи вам захочется забрать всех собачек себе домой!О насПривет! На связи Ека из креативного агентства Shanty. Мы помогаем бизнесу выделяться в мире цифрового хаоса — дизайним лендинги, разрабатываем крутые тг-аппки, а иногда создаём что-то доброе просто потому, что не можем пройти мимо. Сегодня расскажу о том, как мы решили помочь нашим четвероногим братьям обрести дом. Статья написана с особыми трепетными чувствами, всем приготовить носовые платочки!О проекте«Вместе с другом» — благотворительный проект, идея которого проста — помочь собакам из московского муниципального приюта «Дубовая роща» обрести дом. Волонтёры проекта занимаются социализацией, лечением, выгулом и пристройством хвостиков, а главное — активно работают с медиа, чтобы о каждом пёсике узнало как можно больше людей.Их ближайшая цель — подарить 100 собачкам любящие и надёжные семьи. И мы решили этому немного, но посодействовать.С чего всё началосьУ нас вся команда обожает собачек. Да чего уж далеко ходить, наше агентство названо в честь пёселя нашей СЕО, Еки.Знакомьтесь, ШантиТак вот, когда мы сидели в дизайнерских чатах и случайно наткнулись на сообщение о том, что проекту по помощи бездомным собакам нужен сайт, у нас не было и доли сомнений — надо откликаться!К сожалению, мы пока не можем дарить приютам килограммы корма или помогать с ветеринарией, но умеем дизайнить и разрабатывать. Поэтому решили помочь своими навыками — создать классный сайт, чтобы о проекте узнало как можно больше людей и у каждого хвостика появилась семья!Подготовительный этап (созвон, заполнение брифа и подбор рефов)После небольшой переписки, мы созвонились с Катей, руководительницей НКО, договорились о сотрудничестве и формате работы. Создали беседу и отправили бриф. Тут самое интересное — несмотря на то, что запрос по дизайну и концепции был достаточно простой, мы получили самый подробно и качественно проработанный бриф в истории нашей работы. Ребята действительно горят своей идеей помочь бездомным хвостикам, поэтому так максимально чётко дали всю инфу, что у нас практически не осталось вопросов. Катя нам не только подробно расписала, чем занимается компания, но и прислала описания портретов их ЦА и даже как они обрабатывают возражения. Это вау!Из брифа мы узнали многое, но вот основное:Кто аудитория — взрослые осознанные платёжеспособные люди от 25 до 55 лет, которые хотят завести собаку и присматриваются к разным хвостикам;С какой целью люди должны заходить/заходят на сайт — узнать о собаках, о спецпроектах, посмотреть документацию и отчёты фонда.Наша задача была создать сайт, который будет:рассказывать о собаках и их судьбах;привлекать внимание к спецпроектам фонда;вдохновлять людей помогать или брать собаку домой.Фокус на простоте, продуктовости и душевности — вот что стало главным в этом проекте.До этого у ребят был только таплинк с ссылками на другие соцсети, а хотелось — собрать всю инфу в одном месте, заявить о себе как о фонде, да и к волонтёрским командам с сайтом у людей всегда больше доверия:В брифе Катя также оставила ссылки на сайты их коллег, которые им приглянулись и на которые стоит опираться при дизайне:Здесь нравится структура сайта (блоки, поп-апы с анкетами собак, поп-апы программ проекта) и цвета гармонирующие друг с другомА здесь — лаконичный по цветам и шрифтам сайт, удобный по юзабилитиТут — классные фирменные узнаваемые цвета, удобный шрифт, удобное визуальное разделение блоков (программы, о фонде и тд)В ответ мы подготовили свои варианты с made on tilda:Катя изучила наши рефы и дала подробную обратную связь, расписала, что нравится и не нравится в каждом из предложенных нами сайтов:Мы всеми руками за такую подробную и чёткую коммуникацию! Это суперполезно в работе. Поэтому с дизайном было очень легко работать.После обсуждений с Катей было решено использовать светлую палитру, понятный интерфейс и акцент на современных блоках, чтобы сайт выглядел профессионально и легко воспринимался аудиторией.Как мы передавали ценности фонда через дизайнРабота над палитрой началась с вопросов:Что должен почувствовать пользователь, когда заходит на сайт? — Воодушевление, желание присоединиться и помочьЧто не должен почувствовать пользователь, когда заходит на сайт?— Раздражение, непонимание, негодование, безразличиеКакие должны быть ассоциации с сайтом/продуктом?— Дружба, сплочённость, счастьеУже на основе этих ответов мы начали работу над палитрой. В это время команда фонда работала над брендбуком и была в поисках основных цветов, поэтому спросила нашего совета:Совместными усилиями выбирали нужные ассоциации цветов с идеей фонда)На основе всех обсуждений составили варианты палитр:Цвета должны были вызывать ассоциации с доверием, заботой и теплом. А это 100% светлая палитра с акцентами на небесно-голубой, салатовый и светлые пастельные оттенки. Остановились на этом варианте:Мы старались не уходить во что-то детское или юношеское, всё-таки аудитория фонда — взрослые люди, которые ценят современную эстетикуПриступили к работеОт Кати мы получили все материалы одним архивом: фотографии собак, анкеты, ТЗ по текстам, логотип и брендбук.Помогали ребятам выбрать логотип для их брендбукаВ целом, структура страниц была очень проста и понятна, в качестве рефов мы взяли сайты других фондов для собак, где плюс-минус одинаковое наполнение.Сайт задумывался простым и функциональным:одностраничник на Tilda;блоки, которые можно легко редактировать;понятная структура: первый экран, о фонде, анкеты собак, спецпроекты, как помочь и кто помогает.Сначала мы сделали макет с черновыми текстами, а затем, когда утвердили концепт, приступили к наполнению.Вот такие были первые варики главного экранаВсё собирали на готовых блоках на Тильде, поэтому сайт сделали достаточно быстро. И потом уже приступили к вёрстке. Плюс мы делали достаточно простую анимацию, чтобы сайт не был перегружен. Его задача всё-таки не произвести какой-то вау-эффект, а донести основной посыл — помочь.Когда дело дошло до заполнения анкет — слёз было не сдержатьОсновная цель сайта — найти дом 100 хвостикам. Поэтому на них главный акцент — много анкет, подробных и ярких. Нужно было донести до аудитории — это реальный фонд, тут именно адресный и индивидуальный подход к каждому пёсику:Анкеты со слезами на глазах переносились в готовые поп-апы TildaПоэтому и анкеты реальные, с настоящими фотографиями, характером и сложностями каждого хвостика:Ну как всех этих лапочек домой не забрать 😓😓Во всех анкетах есть кнопка «Познакомиться»:Шаблоны сделали максимально удобными для Кати, чтобы она могла самостоятельно добавлять новые карточки в будущем. Но мы надеемся, что анкет будет всё меньше и меньше, и хвостиков будут только забирать в самые лучшие семьи.Держим кулачки, чтобы у всех собачек скоро была такая же анкета как у ПиччиТакже мы добавили форму для тех, кто готов поддержать фонд финансово, волонтёрски или через информационную поддержку:Теперь, чтобы узнать о собаках, досточно заглянуть на сайт. Удобная навигация и структура, прозрачность, реальные лица команды и все документы — всё это вызывает доверие и желание помочь. Получилось достаточно красиво и минималистично — как мы любим:Сайта фонда «Вместе с другом» доступен по ссылке. Если вы вдруг в поисках четвероного друга или просто можете предложить любую помощь хвостикам, заглядывайте к ребятам.Кстати, сайт мы делали долго, наверное, пару месяцев, потому что Катя была в разъездах, у них там очень долго решались вопросы по НКО, поэтому не все материалы могли получить сразу. Сейчас вот дорабатываем некоторые моменты и подключаем Яндекс.Метрику.Для нашего портфолио + первый благотворительный проект, а для ребят — классный сайт для благих целей. P.S. Мы можем не только сайты дизайнить и верстать, но и логотип вам создать и контент-стратегию продумать. Заглядывайте в нашу тележку — там больше лайва, много пользы для бизнесменов и дизайнеров. #дизайн #дизайнсайтов #дизайнлендинга #лендинг_пейдж #лендинги #лендингподключ #лендингинатильде #лендингнатильда #маркетинг #благотворительность #бездомныеживотные #собакадругчеловека #благотворительныйфонд