20 июля 2017 года в Новосибирске состоялся митап Теплицы социальных технологий на тему «Как сделать хороший дизайн сайта для НКО». Участники митапа узнали, как отличить хороший дизайн от плохого, научились определять задачи своего сайта и рассказывать про миссию организации пользователю.
На встрече выступил основатель и преподаватель онлайн-школы дизайна WDI Дмитрий Чернов.
Что такое дизайн?
Дизайн — это разработка решения задачи, а не создание красивой картинки. Сайт любой организации должен решать задачу пользователя, быть удобным, грамотно сверстанным и доносить нужные эмоции.
Далее рассмотрим четыре составляющие хорошо спроектированного сайта: функциональность, удобство, качество и визуальную коммуникацию.
Функциональность
В первую очередь нужно понять, какую задачу должен решать ваш сайт и что нужно пользователям.
Не планируйте сайт, исходя из функционала. Ошибкой будет составить техническое задание, указав, что на сайте нужен раздел с новостями, виджет с календарем или виджет для связи с сотрудником онлайн. Инструменты без понимания, зачем они используются, на сайте не нужны.
Какие могут быть задачи у сайта? Донести сообщение об организации, презентовать проект, привлечь участников на мероприятие, заинтересовать волонтеров. Исходя из задачи, подбираются инструменты.
Еще по теме: Александр Христолюбов: Дизайн-мышление – методология поиска новых решений
Например, у пользователя есть задача найти информацию о ваших ближайших мероприятиях. В этом случае нужно создать страницу с анонсами мероприятий и предложить пользователю записаться на них через сайт. Когда вы решаете задачу пользователя, вы решаете и свою задачу.
Как прояснить свои задачи, понять, что хочет пользователь и в чем для него ценность вашего предложения?
Для этого проведите интервью со своей командой или ответьте на вопросы самостоятельно. Подготовить грамотные вопросы можно, используя метод 6 вопросов.
На основе собранной информации вы сможете выстроить логику страницы или сайта, предложив пользователю то, что ему нужно в первую очередь.
Например, зайдя на сайт, пользователь в течение 5 секунд должен понять, куда он попал. Если он не поймет, то закроет страницу и выберет сайт конкурентов. Объясните сразу, куда попал пользователь с помощью заголовка на сайте. Уберите с главной страницы все лишнее, что отвлекает от этого заголовка. Всю необходимую информацию вы дадите в других блоках.
Юзабилити
Сделайте так, чтобы пользователь быстро достиг своей цели. Для этого пропишите, что хочет пользователь и в каком порядке. Это называется пользовательские истории (с англ. — «User Stories»). На основе историй пропишите сценарий работы сайта.
Еще по теме: Как устроен современный дизайн: желания, участие и мнение пользователей важнее всего
В одностраничном сайте важно продумать логику блоков. Это и есть сценарий того, в какой последовательности пользователь будет читать страницу. Выделите важные заголовки, отделите блоки друг от друга и уберите лишнюю информацию.
В мобильном приложении, многостраничном сайте или веб-сервисе стоит прописать логику экранов и переходов.
Продумать логику одной страницы поможет текстовый прототип, в котором в виде заголовков, подзаголовков и абзаца описывается то, что вы хотите рассказать. Если вы делаете мобильное приложение или веб-сервис, лучше сделать интерактивный прототип с помощью Invisionapp или Marvelapp. Интерактивный прототип уже можно протестировать на пользователях.
Юзабилити – это не только сценарии, но и скорость восприятия информации. На скорость восприятия влияет иерархия в заголовках и абзацах, точность формулировок, внешнее оформление текста (отступы, выравнивание).
Качество
Критерий «качества» определяется порядком в дизайн-макете и качеством графики. Под порядком в дизайн-макете имеется в виду:
- правильно выровненные и логично объединенные блоки сайта;
- использование принципов сетки и модульности;
- единство стилистики в тексте: одинаковые размеры всех равнозначных заголовков, одинаковые размеры наборного текста в абзацах, одинаковые размеры в технических надписях;
- читабельные шрифты.
Еще по теме: 50 бесплатных дизайнерских шрифтов
Используйте качественные фотографии. По возможности свои собственные, снятые профессиональным фотографом, или покупайте иллюстрации на фотостоках, например, 500px и Pixabay. Используйте фотографии в хорошем разрешении без визуальных недостатков.
Визуальная коммуникация
Донесение смысла сообщения визуально, без слов, с использованием изображения, типографики, цвета, композиции и геометрии элементов называется визуальной коммуникацией. Каждый из этих элементов способен вызвать определенные эмоции.
Посмотрите на примере цвета.
Каждый цвет имеет своей характер и вызывает определенные эмоции. Выбирая цвета для сайта, определитесь, какие эмоции вы будете доносить и какой цвет лучше всего соответствует им. Слайд из презентации Дмитрия Чернова.
Посмотрите на примере цвета.
Пример типографики для заголовков.
Чтобы продумать, в каком стиле будет ваш сайт и как этот стиль будет доносить нужные вам эмоции, создайте визуальную концепцию, собрав скриншоты сайтов и изображений в одном файле — мудборде (от англ. «mood board» — дословно, «доска настроения»).
Если вам сложно создать сайт, используя описанные принципы, найдите исполнителя. Отличить профессионала от новичка вы сможете по портфолио, задавая дизайнеру один простой вопрос по каждому элементу (фото, шрифты, цвет, композиция) «Зачем вы используете этот элемент и почему он выглядит именно так?».
Если дизайнер сможет аргументировать понятным для вас языком, почему используется тот или иной элемент, скорее всего, он профессионал.