Как улучшить сайт общественной организации и сделать его привлекательнее для читателей без бюджета и без разработчика? Скрыть лишнее, поработать с типографикой и модульной сеткой – самый простой и дешевый способ редизайна. Дизайнер и руководитель проекта «Бременские консультанты» Андрей Мисюрев на примере одного сайта подробно рассказал и показал, как сделать страницы удобнее и понятнее.
Если у НКО налажен контент, значит, имеет смысл работать с дизайном. Он нужен и для того, чтобы произвести хорошее впечатление на доноров, грантодателей и жертвователей.
Для редизайна возьмем главную страницу сайта Владимирской общественной организации «Ассоциация родителей детей-инвалидов «Свет».
Что стоит изменить на сайте
1. Убираем лишнее. На сайтах НКО можно встретить элементы, которые не несут смысловой загрузки, а лишь мешают читателю воспринимать информацию. Назовем это визуальным шумом. Если его убрать, информация будет быстрее считываться, и пользователь затратит меньше ментальной работы.
Скрываем визуальный шум: рамочки, плюсы, пунктирные линии, иконка, тени. Пользователь быстрее считывает информацию.
Дизайн заключается не в том, чтобы красиво смотрелось, он нужен, чтобы убрать неряшливость. Не обязательно делать модный сайт, его можно сделать опрятным.
Скрываем подписи «Новости» и «События». Пользователь понимает, что картинка, заголовок и текстовое описание – это новость, статья или событие. Чаще всего заголовок новостей «Новости» и событий «События» не нужен.
Меню. На первом уровне оставляем только 7±2 пунктов. Чем больше выбор, тем сложнее выбрать.
2. Расставляем акценты. Определяем, какие элементы главные, а какие второстепенные. Главное сделать крупнее и контрастнее.
Выравниваем колонки по вертикалям, а тексты по левому краю. Добавляем отступы. Не стесняемся пространства и белых полей. Пользователь понимает, где главное и второстепенное, легко ориентируется на странице сайта.
3. Улучшаем типографику. Типографика – способ оформления текста с помощью правил его набора и верстки. Как быстро испортить сайт? Забыть про типографику.
Сначала структурируем информацию на сайте. Выделяем визуально основной текст и дополнительный. Для заголовков используем синий цвет.
Стоит заменить прописные буквы на строчные. Например, «ДЕНЬ ЗНАНИЙ» заменяем на «День знаний». Такой текст читать проще. Заголовки выделяем жирным и увеличиваем размер.
Теперь посмотрим, как можно улучшить страницу новости. Основную картинку делаем шире, уменьшаем акцент на дате, убираем лишнюю строку с повторяющимся заголовком.
Еще по теме: Юзабилити сайта НКО: как интуитивно понятный интерфейс помогает увеличить пожертвования и не потерять читателей
Приводим в порядок размер шрифта, длину строки, междустрочное расстояние. Примем за правило 16-22px для основного текста и 55-75 символов в строке, междустрочное расстояние = 16-22px умножить на 1.4-1.7. Тут подгоняем на глаз, в зависимости от начертания, длины колонки, размера шрифта, цвета и ощущений, которые хотим передать.
В итоге пользователю легче читать длинные тексты. Это увеличит глубину просмотра страницы и время нахождения на сайте. Повысит доверие.
Маленькая хитрость
Все изменения я сделал за 60 минут без фотошопа. С помощью браузера и каскадных таблиц стиля CSS. Плюс CSS в том, что вы меняете значение в одном месте, а стиль применяется на весь сайт разом. И в процессе редизайна ни один серверный разработчик не пострадал.
«Бременские консультанты» предлагают любой некоммерческой организации или общественному проекту отправить заявку на редизайн сайта.