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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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