Как сделать редизайн сайта НКО за 60 минут: примеры и советы

Дизайнер Андрей Мисюрев на примере одного сайта подробно рассказал и показал, как c помощью CSS сделать страницы удобнее и понятнее.
Дизайнер Андрей Мисюрев на примере одного сайта подробно рассказал и показал, как c помощью CSS сделать страницы удобнее и понятнее.

Как улучшить сайт общественной организации и сделать его привлекательнее для читателей без бюджета и без разработчика? Скрыть лишнее, поработать с типографикой и модульной сеткой – самый простой и дешевый способ редизайна. Дизайнер и руководитель проекта «Бременские консультанты» Андрей Мисюрев на примере одного сайта подробно рассказал и показал, как сделать страницы удобнее и понятнее.

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

Для редизайна возьмем главную страницу сайта Владимирской общественной организации «Ассоциация родителей детей-инвалидов «Свет».

Что стоит изменить на сайте

1. Убираем лишнее. На сайтах НКО можно встретить элементы, которые не несут смысловой загрузки, а лишь мешают читателю воспринимать информацию. Назовем это визуальным шумом. Если его убрать, информация будет быстрее считываться, и пользователь затратит меньше ментальной работы.

Пример элементов, которые можно считать визуальным шумом
Пример элементов, которые можно считать визуальным шумом

Скрываем визуальный шум: рамочки, плюсы, пунктирные линии, иконка, тени. Пользователь быстрее считывает информацию.

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

Скрываем подписи «Новости» и «События». Пользователь понимает, что картинка, заголовок и текстовое описание – это новость, статья или событие. Чаще всего заголовок новостей «Новости» и событий «События» не нужен.

Главная страница сайта "Свет" до и после того, как на ней убрали визуальный шум.
Главная страница сайта «Свет» до и после того, как на ней убрали визуальный шум.

Меню. На первом уровне оставляем только 7±2 пунктов. Чем больше выбор, тем сложнее выбрать.

2. Расставляем акценты. Определяем, какие элементы главные, а какие второстепенные. Главное сделать крупнее и контрастнее.

Выравниваем колонки по вертикалям, а тексты по левому краю. Добавляем отступы. Не стесняемся пространства и белых полей. Пользователь понимает, где главное и второстепенное, легко ориентируется на странице сайта.

Главная страница сайта "Свет" после работы с модульной сеткой и расставлением акцентов. Убираем слово “Подробнее” после анонсов и “Читать дальше” после новостей. Вместо этого подчеркиваем ключевую фразу и прикрепляем гиперссылку.
Главная страница сайта «Свет» после работы с модульной сеткой и расстановкой акцентов. Убираем слово «Подробнее» после анонсов и «Читать дальше» после новостей. Вместо этого подчеркиваем ключевую фразу и прикрепляем гиперссылку.

3. Улучшаем типографику. Типографика – способ оформления текста с помощью правил его набора и верстки. Как быстро испортить сайт? Забыть про типографику.

Сначала структурируем информацию на сайте. Выделяем визуально основной текст и дополнительный. Для заголовков используем синий цвет.

Стоит заменить прописные буквы на строчные. Например, «ДЕНЬ ЗНАНИЙ» заменяем на «День знаний». Такой текст читать проще. Заголовки выделяем жирным и увеличиваем размер.

Главная страница сайта "Свет" после работы с типографикой
Главная страница сайта «Свет» после работы с типографикой.

Теперь посмотрим, как можно улучшить страницу новости. Основную картинку делаем шире, уменьшаем акцент на дате, убираем лишнюю строку с повторяющимся заголовком.

Еще по теме: Юзабилити сайта НКО: как интуитивно понятный интерфейс помогает увеличить пожертвования и не потерять читателей

Приводим в порядок размер шрифта, длину строки, междустрочное расстояние. Примем за правило 16-22px для основного текста и 55-75 символов в строке, междустрочное расстояние = 16-22px умножить на 1.4-1.7. Тут подгоняем на глаз, в зависимости от начертания, длины колонки, размера шрифта, цвета и ощущений, которые хотим передать.

Страница новости на сайте "Свет" до и после работы с типографикой
Страница новости на сайте «Свет» до и после работы с типографикой.

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

Маленькая хитрость

Все изменения я сделал за 60 минут без фотошопа. С помощью браузера и каскадных таблиц стиля CSS. Плюс CSS в том, что вы меняете значение в одном месте, а стиль применяется на весь сайт разом. И в процессе редизайна ни один серверный разработчик не пострадал.

«Бременские консультанты» предлагают любой некоммерческой организации или общественному проекту отправить заявку на редизайн сайта.