На протяжении многих лет дизайнеры толкнул себя, чтобы создать уникальный и вдохновляющий дизайн.Компании жаждали иметь сайты, которые являются инновационными и сделать их выделяются на фоне своих конкурентов.Тем не менее, благотворительные сайты не продвинулись вместе с тенденциях и ожиданиях — они, похоже, были предназначены для запуска, а затем обновляются только при незначительных настроек в соответствии с content.

Она стала недавняя тенденция для благотворительных посмотреть на их сайте идентичности и branding; тратить деньги на создание пользовательских переживаний, которые отвечают их пользовательская база, и со временем получают люди, связанные с их кампаниями и messages.

Ниже мы посмотрим на благотворительные сайты, которые успешно развивают свои онлайновые бренда с использованием современных и креативных идей.Мы также обсудим, как каждая благотворительная сайта могут быть улучшены, потому что, как мы все знаем, не каждый веб-сайт является совершенным.Есть всегда усовершенствования дизайна или юзабилити, которые, возможно, были пропущены по управлению, конструкторы, или developers.

1.Red Nose Day

Red Nose Day является сбор средств мероприятии, посвященном сбору средств для Comic Relief.

Как вы можете видеть выше, Red Nose Day веб-дизайна сочетает в себе множество различных методов, чтобы достичь высокой минимализма и игривым дизайном.На протяжении сайте вы можете найти не-веб-шрифтов заголовков реализована с использованием sIFR, функция панели встроенной вспышкой и поразительное навигацией, построенные с использованием CSS Sprites.

В конструкции используется упрощенная схема цвет белый, черный и красный.Использование красного наряду с черным и белым есть большое влияние на user, и, конечно, усиливает “ Red” в “ Red Nose Day”.Красный преимущественно используется на призыв к действию областях, поскольку он является эффективным в привлечении user’ S eye.

Donate кнопку показан в Red Nose Day’ S header

Потому что Красный Нос день кампания достигает такого Широкий audience, веб-дизайна достигается идеальный баланс между смешным элементов и фактической информации.Удовлетворение требований таких разных аудиторий — подрастающего поколения и более зрелых пользователей — трудная работа и Comic Relief удалось это эффективно и impressively.

Improvements

В настоящее время, делает контент доступным должны быть обязательной частью любого site’ развития с.К сожалению, Красный Нос деньдизайн делает интенсивное использование света серый текст на белом фоне.Это отсутствие контраст может оказаться трудным для пользователей с плохим зрением.Способ улучшить это было бы использовать гораздо темнее серый или черный для того, чтобы увеличить контраст между текстом и фоном.Кроме того, они могли бы предложить эту опцию через контролируемые пользователем доступности сайта tools.

Как уже отмечалось выше, цель Красной событием дня Нос, чтобы собрать деньги для Comic Relief.В качестве посетителя на сайт, мне было бы интересно знать ходе усилий по мобилизации средств.В то время как счетчик включен в содержание некоторых страниц, было бы более полезным для пользователя, если он был также отображаться на главной странице.Это демонстрирует пользователю, что благотворительность является в настоящее время активным.Конечно, они могут иметь свои причины для исключения его из главной страницы, что we’ повторно не знают of.

Фонд повышение общего размещенные на Красной содержание Нос день pages

2.Дайте нам Lift

Дайте нам lift сайт кампании, в ведении WRVS направлен на повышение осведомленности о том, как пожилые люди изо всех сил, чтобы добраться до места, они должны на ежедневной основе, без поддержки сообщества transport.

Дизайн делает использование большого фона image и вырезы картона, чтобы изобразить тему автостопом.Наряду с поразительной цветовой схеме на темном фоне с контрастными розовыми, зелеными и синими элементами, конструкция имеет большое первое впечатление на пользователя.Эти контрастные цвета осуществляется через на содержание страниц, а в боковой панели, два основных призыв к действию ссылки в фиолетовый и зеленый попросить пользователя или подарить или volunteer.

Элемент спидометра вспышка расположена на базе страницу подсчета числа добровольцев.Благодаря этой уникальной идеи и дизайн, user’ ы в глаза сразу бросается вниз к нижней части страницы, где еще два призыва к действию ссылки могут быть found.

Эта кампания сайт широко использует элементы флэш для отображения пожертвование суммы, волонтер всего (на спидометре), а победители в campaign’ конкуренции с Twitter.Это необычно видеть такие творческие элементы в дизайне благотворительности и it’ S приятно видеть сайт, который понимает содержание, которое должно быть сообщено — но doesn’ T жертву привлечения creativity.

Twitter победителей от подвезти нас кампанию website

Несмотря на высокий дизайн влияние будет иметь более сильный ответ от молодой аудитории, на сайте также обслуживает старшее поколение с особым вниманием к accessibility.На все содержание страницы, кнопка может быть обнаружено увеличение content’ размера шрифта использованием jQuery.Кроме того, темный цвет шрифта используется для добавления высокой контрастности между текстом и background.

Improvements

Как упоминалось выше, дают нам сайт Lift кампании активно использует JavaScript и флэш, чтобы увидеть ее содержимое.Эти элементы могут стать непригодными для старшего базу пользователей, поскольку они, возможно, не установлен флэш, либо отключен JavaScript — сделать раздел видео невозможно использовать.Интенсивное использование элементов флэш также увеличивает загрузки страницы раза.При реализации этих элементов, важно оптимизировать вспышки и обслуживают тех случаях, когда вспышка не может быть установлен или является наличие disabled.

В то время как дизайнер веб-сайта, очевидно, пытались обращать внимание на все детали, со многими элементами выкатились для пользователей, основная навигация, кажется, потерял, и это может стать проблемой для пользователей, если они не могут мгновеннопризнать основным источником навигации.Это может быть потому, что навигация не показан в рамках основного контейнера макета, а также, отсутствие цвета фона делает его смешать в темное фоновое изображение и пользователь мог найти его трудно читать серый текст на черном.Осветление этих элементов и делает их выделяться больше сделает эту конструкцию более изысканной и создают гораздо счастливее пользователей experience.

Twitter страницу на сайте кампании есть урезанная версия Twitter’ Виджет подачи с.Хотя это приятно видеть такой интеграции социальных медиа на веб-сайт, отсутствие творчества и разделение между заметки в социальных сетях создает элемент, который напоминает Google Ads.Это, очевидно, вызывает проблем, поскольку большинство, скорее всего, игнорировать эту часть page.

Сравнение Twitter поток с Google Ads

3.ChildLine

ChildLine является благотворительной создан, чтобы помочь детям с различными проблемами, начиная от помощи в области сексуального и физического насилия для ответов на вопросы о проблемах родителей и других членов семьи members.

Целевой аудитории Childline сайт имеет более молодом возрасте, поэтому дизайн отражает очень анимированные theme с героями мультфильмов повторяется в фоновом режиме, большой размер шрифта и яркой цветовой гамме.Герои мультфильмов также представление о том, что ребенок может быть ощущение при посещении веб-сайта — подсознательные message Childline, что понимает, что они чувствуют, и могут предложить help.

По всему сайту, желтая вкладка крепится к левой стороне страницы и выступает в качестве тревожной кнопки для пользователя нажать, если они хотят, чтобы быстро скрыть сайта, отправив пользователя на домашнюю страницу Google.Эта реализация похожа на “ Feedback” Кнопка популярных сайтов использовать как часть Получить Satisfaction service.

Скрыть вкладку из Childline website

Дети всегда ищут, чтобы настроить все, что можно: рабочего стола, иконки, Myspace макеты и т.д. Так Childline воспользовались MooTools JavaScript framework для того, чтобы позволить пользователю изменить цвет фона и изображениявеб-сайт.После нажатия на ‘ Изменения Wallpaper’ вкладку в верхней части страницы, белые панели скользит вниз для пользователя, чтобы настроить обои на сайте.Эти слайд-вниз панели используются на многих сайтах, чтобы отобразить скрытые формы и content.

Поднимается вопрос о том, будет ли целесообразно, чтобы этот уровень настройки на такого рода сайт.С child’ перспективу с, однако, это может создать прикольные пользователь experience и безопасные environment, что они с удовольствием посещают.Это создает доверие между ребенком и любовь, которая есть неоценимую пользу.Это чувство радости и доверия также будет означать ребенка, скорее всего, возвращение к site.

Изменение обоев панель Childline website

Improvements

Важная часть Childline сайт, чтобы предложить свою помощь и защиту нуждающимся детям.“ Hide Page” вкладку говорилось выше является бесценным часть этого веб-сайта, помогая детям уйдете быстро, если возникнет такая необходимость.Аналогичное предложение является колонтитул ссылку помечены “ Cover Вашему Tracks”.Это дает ребенку информацию по очистке следов своего посещения сайта из их computer.

Несмотря на то, выпадающее панели отлично подходит для небольшого количества контента (например, обои настройки), большие объемы данных может нарушить поток страниц.В верхней части ChildlineДизайн, “ Accessibility” и “ Help” Вкладки используются для отображения больших объемов текста на соответствующую тему.Это тяжелая количество содержания толкает основное содержание страницы внизу раз и может привести к путанице.Способ повысить удобство работы этих секций будет принимать пользователей на новую страницу, содержание которой заголовки, пробелы и образов может помочь разрушить длительные content.

Ранее мы говорили о смелой фоне повторяющихся that’ S тяжело признакам в дизайне.При прокрутке вниз по длинному содержимое страницы, это повторяющийся фон может нарушить user’ с потоком и довольно резко на глазах.Оформление фоновое изображение фиксировано (путем простого добавления background-attachment: fixed; в CSS), пользователь найдет чтение страницы вниз намного проще и не отвлекаться на движущемся фоне, когда scrolling.

Желтые “ Hide Page” вкладка для некоторых пользователей легко потеряться в яркой цветовой гамме и смелый фон.В связи с идеей чрезвычайных ситуаций и паники за этой кнопкой, возможно, замена желтого на красный может спровоцировать автоматический ответ пользователю.Использование красного также будет означать, что эта вкладка будет труднее потерять в colors.

4.WWF

WWF является мировым лидером в благотворительности в сохранении wildlife.

Дизайн для веб-сайта Всемирного фонда дикой природы сильно отличается от трех других веб-сайтов благотворительный we’ нас считается.Схема очень чистый, основанный на сетке, и чрезмерно сосредоточен на высококачественных изображений, чтобы добавить полированной отделкой.С помощью чистый, организованный layout и опираясь на привлекательные фотографии, пользователь обращается внимание на то, что важно для любви: ее содержание и назначение.WWF’ S пользовательская база будет более сложным и старшего поколения, чем, скажем, Childline, так что пользователь может быть меньше пугает или боится читать content.

Функции панели на главной странице используется JQuery, чтобы повернуть с помощью различных историй, последние новости, а призыв к действию кнопок.Хотя JQuery пользовательского был написан, можно репликации с использованием JQuery плагинов или после учебники, такие как Создание Slick Auto-Playing Избранные материалы Slider на CSS-Tricks.

нейтральные цвета scheme белого, черного и серого используется, чтобы сделать любую важную призыв к действию кнопки более заметными.Эти кнопки имеют поразительный зеленый или оранжевый фон.Когда пользователь переходит в раздел пожертвований благотворительных сайта, дизайн сократить до минимума, снова позволяя пользователю сосредоточиться на ключевых сообщений.Все навигационные и ненужные кнопки removed.

WWF пожертвовать section

Improvements

В отличие от других сайтов благотворительности, казалось бы, что основной целью веб-сайта Всемирного фонда дикой природы, чтобы научить пользователей их цели и задачи.Много содержание и призыв к действию ссылки направлены на то, чтобы пользователь прочитал о благотворительности и что они могут достичь.“ Что мы Do” “ Как вы можете Help” и “ Donate Now” кнопки в заголовке различаются по размеру, первые два, больше, чем последний.Эта разница в размерах подтверждает, что благотворительность считает, что понимание своих целей важно до пожертвования.Пользователи оценить важность элементов по их различие в размерах.Если благотворительность хотел бы выдвинуть больше пожертвований в будущем, было бы эффективным, чтобы поменять размеры между этими призыв к действию кнопки в заголовке, давая ‘ Donate Now’ позвонить к действию большее значение для пользователей.

Изменение призыв к действию размеров в WWF дизайн header

Как часть проекта WWF, описание того, что 10 фунтов стерлингов пожертвований могли бы купить, или как это могло бы помочь благотворительности, отличается в пределах панели.Однако, когда в дар разделе веб-сайта, £ 10 переключатель не предлагается для пользователя, что может привести к путанице.Затем пользователю остается вариантов £ 5.00, £ 25,00 или вводя их собственной стоимости.Существует довольно большой скачок между двумя суммами по умолчанию, и пользователь может быть склонен выбрать для £ 5.00 вариант.Противоречивые с предыдущим акцент на важности £ 10,00 в качестве пожертвования значение, было бы интересно узнать, как много пользователей выбрали £ 5,00, но, возможно, был бы готов пожертвовать 10 фунтов стерлингов.Может быть, в том числе это как средней земле сумму пожертвований по умолчанию будет хороший addition.

5.Macmillan

Macmillan рака Support благотворительность предлагает помощь людям, живущим с раком и их families.

При поддержке Macmillan рака сайте первоначальной загрузке, пользователь может чувствовать себя разбитым количеством информации и ссылки на страницу.Однако, это изображает пользователю, что веб-сайт и благотворительности есть много советов и поддержки, чтобы предложить.Способ, в котором дизайн пытается сломать информации, является compartmentalising все в панели, которая может быть закрыта и вновь открыта с помощью JQuery, как пользователь видит fit.

Улучшение на этой, так и всделав ее первоначальной загрузки страницы менее сложной для пользователя, будет иметь некоторые панели уже рухнул.Таким образом, пользователь может расширить только тех, кого они хотят, чтобы прочитать больше about.

складной панели на Macmillan рака поддержки доме page

Эти панели на главной странице использовать блок заголовков с сильный фон colours сделать определении разделам и подразделам проще для пользователей.Темно-зеленые заголовки используются для определения нового раздела, в то время как светло-зеленый заголовок используется для определения нового подраздела.Делая эти заголовки так окончательное пользователь может сломать содержание вниз, в более читаемый chunks.

Яркие цветовые схемы, используемые в этой конструкции может создать эмоциональный отклик от пользователей.Пользователь может быть сделано, чтобы чувствовать себя более беззаботным и надежду с помощью теплой земле colours.

Improvements

Дизайн Macmillan использует много призыв к действию кнопки с различными цветами фона.К сожалению, эти связи остаются, как встроенные элементы, а это означает, что только текст является интерактивным.Было бы более удобным для пользователя, если это были элементы уровня блока, где мыши область ссылка будет включать в себя эти яркие цвета фона.При увеличении активная область, шансы на успешное мыши от пользователя сильно increased.

Charity’ имя и тег-лайн отображается в верхнем левом углу, как это принято.Эти элементы, однако, не являются интерактивными, так что это может привести краткое замешательство, когда пользователь ищет ссылки на дому page.

некликабельный название Macmillan и тег-лайн в header

Большие ошибки юзабилити на вход в Macmillan формы является отсутствие этикетки внутри или рядом с соответствующими полями.Пользователь оставил толку и должен угадать, какую информацию ввести в котором поле.Хотя пользователи используют для ввода двух частей информации (имя пользователя и пароль), то не ясно, будет ли сайт требует, чтобы имя пользоват …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров