Анастасия Огудина: как сделать красивый и удобный сайт

Анастасия Огудина рассказала, как сделать красивый и удобный сайт. Фото Татьяны Паутовой.
Анастасия Огудина рассказала, как сделать красивый и удобный сайт. Фото Татьяны Паутовой.

31 авгу­ста 2017 года в Ниж­нем Нов­го­ро­де состо­ял­ся митап Теп­ли­цы соци­аль­ных тех­но­ло­гий на тему «Как сде­лать кра­си­вый и удоб­ный сайт». На мита­пе обсуж­да­лись объ­ек­тив­ные и субъ­ек­тив­ные кри­те­рии оцен­ки каче­ства веб-дизай­на.

На мита­пе высту­пи­ла Ана­ста­сия Огу­ди­на, пре­по­да­ва­тель интер­нет-тех­но­ло­гий Ниже­го­род­ско­го радио­тех­ни­че­ско­го кол­ле­джа, руко­во­ди­тель соб­ствен­ной сту­дии по раз­ра­бот­ке и про­дви­же­нию сай­тов на CMS WordPress, спи­кер WordCamp Moscow 2017.

UX/UI дизайн

UX (User Experience, дослов­но «опыт поль­зо­ва­те­ля») – это о том, как устро­ен интер­фейс сай­та, какие есть кноп­ки и бло­ки и насколь­ко поль­зо­ва­те­лю удоб­но вза­и­мо­дей­ство­вать с этим интер­фей­сом.

UI (User Interface, дослов­но «поль­зо­ва­тель­ский интер­фейс») – это дизайн, внеш­ний вид сай­та: како­го цве­та кноп­ка, ее фор­ма, фон.

UX/UI дизайн – это дизайн, в кото­ром удоб­ство исполь­зо­ва­ния так же важ­но, как и внеш­ний вид.

«Совре­мен­ная тен­ден­ция тако­ва, что оформ­ле­ние сай­та пере­ста­ет изоби­ло­вать «фин­ти­флюш­ка­ми» и «кра­си­во­стя­ми». Если рань­ше кру­тым сай­том счи­тал­ся сайт с инте­рес­ным оформ­ле­ни­ем, то сей­час самое глав­ное – это содер­жа­ние. Чита­е­мый текст, логич­ные кноп­ки, кото­рые ожи­да­е­мо рабо­та­ют. Сей­час UX глав­нее, чем UI». Ана­ста­сия Огу­ди­на

UX

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

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

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

Слайд из презентации Анастасии Огудиной
Слайд из пре­зен­та­ции Ана­ста­сии Огу­ди­ной.

Советы по UX от Анастасии Огудиной

Не изоб­ре­тай­те вело­си­пед.

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

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

Исполь­зуй­те шаб­ло­ны. Не рисуй­те дизайн с нуля.

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

Посмот­ри­те интер­фейс дей­стви­тель­но успеш­ных ком­па­ний.

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

Слу­шай­те раз­ра­бот­чи­ка.

У чело­ве­ка, кото­рый дав­но рабо­та­ет в веб-дизайне, уже есть опыт, и мно­гие вещи он инту­и­тив­но дела­ет пра­виль­но.

Смот­ри­те ана­ли­ти­ку.

Объ­ек­тив­ный фак­тор оцен­ки дизай­на суще­ству­ет, и он выра­жа­ет­ся в циф­рах ста­ти­сти­ки ваше­го сай­та. Что­бы понять, как поль­зо­ва­те­ли реа­ги­ру­ют на тот или иной вари­ант дизай­на, мож­но про­ве­сти экс­пе­ри­мент и посмот­реть ана­ли­ти­ку в Google Analitics или Яндекс.Метрика.

UI

Вопрос UI – это во мно­гом дело ваше­го вку­са, ваш сайт дол­жен нра­вить­ся вам самим. Цве­то­вая гам­ма, фор­ма кно­пок и про­чие дета­ли оформ­ле­ния могут быть любы­ми.

При выбо­ре шриф­та, наобо­рот, есть стро­гие реко­мен­да­ции. Шриф­ты делят­ся на два типа: шриф­ты с засеч­ка­ми (напри­мер, клас­си­че­ский Times) и шриф­ты без засе­чек (напри­мер, Arial). Шриф­ты с засеч­ка­ми луч­ше исполь­зо­вать для печат­ных книг, посколь­ку они созда­ют линии, кото­рые помо­га­ют гла­зу сколь­зить по тек­сту. Но когда на экране мно­го мел­ко­го тек­ста, засеч­ки созда­ют визу­аль­ный мусор, бук­вы теря­ют чет­кость и узна­ва­е­мость. Поэто­му здесь боль­ше подой­дут шриф­ты без засе­чек.

Используя направляющие, проявите творчество. Слайд из презентации Анастасии Огудиной.
Исполь­зуя направ­ля­ю­щие, про­яви­те твор­че­ство. Слайд из пре­зен­та­ции Ана­ста­сии Огу­ди­ной.

Советы Анастасии Огудиной по UI

  • Соблю­дай­те сим­мет­рию. Чело­ве­че­ский глаз очень чув­стви­те­лен к сим­мет­рии, поэто­му не надо делать «на гла­зок», делай­те точ­но.
  • Не иска­жай­те про­пор­ции фото­гра­фий.
  • Оди­на­ко­во оформ­ляй­те одно­тип­ные эле­мен­ты.
  • Фон не дол­жен затме­вать кар­тин­ку.
  • Если вы исполь­зу­е­те тени, они долж­ны под­чи­нять­ся зако­нам физи­ки.
  • Шриф­тов не долж­но быть слиш­ком мно­го.
  • Исполь­зуй­те направ­ля­ю­щие. Вырав­ни­ва­ние по направ­ля­ю­щим всех зна­чи­мых эле­мен­тов – при­знак обду­ман­но­го дизай­на. Направ­ля­ю­щих не долж­но быть слиш­ком мно­го, жела­тель­но не более четы­рех.
  • Не можешь нари­со­вать пря­мо – нари­суй наро­чи­то кри­во.
  • Мож­но не соблю­дать ника­ких пра­вил, если идея того сто­ит.

Ска­чать пре­зен­та­цию Ана­ста­сии Огу­ди­ной в фор­ма­те PDF.