Дмитрий Чернов: о принципах веб-дизайна

На митапе в Новосибирске Дмитрий Чернов рассказал о принципах веб-дизайна. Фото: Катерина Эккард.
На митапе в Новосибирске Дмитрий Чернов рассказал о принципах веб-дизайна. Фото: Катерина Эккард.

20 июля 2017 года в Ново­си­бир­ске состо­ял­ся митап Теп­ли­цы соци­аль­ных тех­но­ло­гий на тему «Как сде­лать хоро­ший дизайн сай­та для НКО». Участ­ни­ки мита­па узна­ли, как отли­чить хоро­ший дизайн от пло­хо­го, научи­лись опре­де­лять зада­чи сво­е­го сай­та и рас­ска­зы­вать про мис­сию орга­ни­за­ции поль­зо­ва­те­лю.

На встре­че высту­пил осно­ва­тель и пре­по­да­ва­тель онлайн-шко­лы дизай­на WDI Дмит­рий Чер­нов.

Что такое дизайн?

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

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

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

Функциональность

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

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

Какие могут быть зада­чи у сай­та? Доне­сти сооб­ще­ние об орга­ни­за­ции, пре­зен­то­вать про­ект, при­влечь участ­ни­ков на меро­при­я­тие, заин­те­ре­со­вать волон­те­ров. Исхо­дя из зада­чи, под­би­ра­ют­ся инстру­мен­ты.

Еще по теме: Алек­сандр Хри­сто­лю­бов: Дизайн-мыш­ле­ние – мето­до­ло­гия поис­ка новых реше­ний

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

Как про­яс­нить свои зада­чи, понять, что хочет поль­зо­ва­тель и в чем для него цен­ность ваше­го пред­ло­же­ния?
Для это­го про­ве­ди­те интер­вью со сво­ей коман­дой или ответь­те на вопро­сы само­сто­я­тель­но. Под­го­то­вить гра­мот­ные вопро­сы мож­но, исполь­зуя метод 6 вопро­сов.

Метод 6 вопросов поможет вам глубже изучить задачи для вашего сайта. Слайд с презентации Дмитрия Чернова.
Метод 6 вопро­сов помо­жет вам глуб­же изу­чить зада­чи для ваше­го сай­та. Слайд с пре­зен­та­ции Дмит­рия Чер­но­ва.

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

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

Участники митапа. Фото: Катерина Эккард.
Участ­ни­ки мита­па. Фото: Кате­ри­на Эккард.

Юза­би­ли­ти

Сде­лай­те так, что­бы поль­зо­ва­тель быст­ро достиг сво­ей цели. Для это­го про­пи­ши­те, что хочет поль­зо­ва­тель и в каком поряд­ке. Это назы­ва­ет­ся поль­зо­ва­тель­ские исто­рии (с англ. — «User Stories»). На осно­ве исто­рий про­пи­ши­те сце­на­рий рабо­ты сай­та.

Еще по теме: Как устро­ен совре­мен­ный дизайн: жела­ния, уча­стие и мне­ние поль­зо­ва­те­лей важ­нее все­го

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

В мобиль­ном при­ло­же­нии, мно­го­стра­нич­ном сай­те или веб-сер­ви­се сто­ит про­пи­сать логи­ку экра­нов и пере­хо­дов.

Пользовательские истории (англ. User Story) — способ описания требований к разрабатываемой системе, сформулированных как одно или более предложений на повседневном или деловом языке пользователя. Скриншот с презентации Дмитрия Чернова.
Поль­зо­ва­тель­ские исто­рии (англ. User Story) — спо­соб опи­са­ния тре­бо­ва­ний к раз­ра­ба­ты­ва­е­мой систе­ме, сфор­му­ли­ро­ван­ных как одно или более пред­ло­же­ний на повсе­днев­ном или дело­вом язы­ке поль­зо­ва­те­ля. Скрин­шот с пре­зен­та­ции Дмит­рия Чер­но­ва.

Про­ду­мать логи­ку одной стра­ни­цы помо­жет тек­сто­вый про­то­тип, в кото­ром в виде заго­лов­ков, под­за­го­лов­ков и абза­ца опи­сы­ва­ет­ся то, что вы хоти­те рас­ска­зать. Если вы дела­е­те мобиль­ное при­ло­же­ние или веб-сер­вис, луч­ше сде­лать интер­ак­тив­ный про­то­тип с помо­щью Invisionapp или Marvelapp. Интер­ак­тив­ный про­то­тип уже мож­но про­те­сти­ро­вать на поль­зо­ва­те­лях.

Юза­би­ли­ти – это не толь­ко сце­на­рии, но и ско­рость вос­при­я­тия инфор­ма­ции. На ско­рость вос­при­я­тия вли­я­ет иерар­хия в заго­лов­ках и абза­цах, точ­ность фор­му­ли­ро­вок, внеш­нее оформ­ле­ние тек­ста (отсту­пы, вырав­ни­ва­ние).

Качество

Кри­те­рий «каче­ства» опре­де­ля­ет­ся поряд­ком в дизайн-маке­те и каче­ством гра­фи­ки. Под поряд­ком в дизайн-маке­те име­ет­ся в виду:

  • пра­виль­но выров­нен­ные и логич­но объ­еди­нен­ные бло­ки сай­та;
  • исполь­зо­ва­ние прин­ци­пов сет­ки и модуль­но­сти;
  • един­ство сти­ли­сти­ки в тек­сте: оди­на­ко­вые раз­ме­ры всех рав­но­знач­ных заго­лов­ков, оди­на­ко­вые раз­ме­ры набор­но­го тек­ста в абза­цах, оди­на­ко­вые раз­ме­ры в тех­ни­че­ских над­пи­сях;
  • чита­бель­ные шриф­ты.

Еще по теме: 50 бес­плат­ных дизай­нер­ских шриф­тов

Исполь­зуй­те каче­ствен­ные фото­гра­фии. По воз­мож­но­сти свои соб­ствен­ные, сня­тые про­фес­си­о­наль­ным фото­гра­фом, или поку­пай­те иллю­стра­ции на фото­сто­ках, напри­мер, 500px и Pixabay. Исполь­зуй­те фото­гра­фии в хоро­шем раз­ре­ше­нии без визу­аль­ных недо­стат­ков.

Визуальная коммуникация

Доне­се­ние смыс­ла сооб­ще­ния визу­аль­но, без слов, с исполь­зо­ва­ни­ем изоб­ра­же­ния, типо­гра­фи­ки, цве­та, ком­по­зи­ции и гео­мет­рии эле­мен­тов назы­ва­ет­ся визу­аль­ной ком­му­ни­ка­ци­ей. Каж­дый из этих эле­мен­тов спо­со­бен вызвать опре­де­лен­ные эмо­ции.

Посмот­ри­те на при­ме­ре цве­та.

Каж­дый цвет име­ет сво­ей харак­тер и вызы­ва­ет опре­де­лен­ные эмо­ции. Выби­рая цве­та для сай­та, опре­де­ли­тесь, какие эмо­ции вы буде­те доно­сить и какой цвет луч­ше все­го соот­вет­ству­ет им. Слайд из пре­зен­та­ции Дмит­рия Чер­но­ва.

Посмот­ри­те на при­ме­ре цве­та.

Каждый цвет носит своей характер и несет определенные эмоции. Выбирая цвета для сайта определитесь какие эмоции вы будете доносить, и какой цвет лучше всего соответствует им. Слайд из презентации Дмитрия Чернова.
Каж­дый цвет носит сво­ей харак­тер и несет опре­де­лен­ные эмо­ции. Выби­рая цве­та для сай­та опре­де­ли­тесь какие эмо­ции вы буде­те доно­сить, и какой цвет луч­ше все­го соот­вет­ству­ет им. Слайд из пре­зен­та­ции Дмит­рия Чер­но­ва.

При­мер типо­гра­фи­ки для заго­лов­ков.

Слайд с презентации Дмитрия Чернова.
Слайд с пре­зен­та­ции Дмит­рия Чер­но­ва.

Что­бы про­ду­мать, в каком сти­ле будет ваш сайт и как этот стиль будет доно­сить нуж­ные вам эмо­ции, создай­те визу­аль­ную кон­цеп­цию, собрав скрин­шо­ты сай­тов и изоб­ра­же­ний в одном фай­ле — муд­бор­де (от англ. «mood board» — дослов­но, «дос­ка настро­е­ния»).

Если вам слож­но создать сайт, исполь­зуя опи­сан­ные прин­ци­пы, най­ди­те испол­ни­те­ля. Отли­чить про­фес­си­о­на­ла от нович­ка вы смо­же­те по порт­фо­лио, зада­вая дизай­не­ру один про­стой вопрос по каж­до­му эле­мен­ту (фото, шриф­ты, цвет, ком­по­зи­ция) «Зачем вы исполь­зу­е­те этот эле­мент и поче­му он выгля­дит имен­но так?».

Если дизай­нер смо­жет аргу­мен­ти­ро­вать понят­ным для вас язы­ком, поче­му исполь­зу­ет­ся тот или иной эле­мент, ско­рее все­го, он про­фес­си­о­нал.