Современные тренды в дизайне сайтов

Константин Соколов , арт-директор компании «ITECH.group». Фото: Надежда Дерябина.
Константин Соколов , арт-директор компании «ITECH.group». Фото: Надежда Дерябина.

21 авгу­ста 2016 года в Улья­нов­ске про­шел митап Теп­ли­цы соци­аль­ных тех­но­ло­гий на тему «Дизайн интер­фей­сов сай­тов». Кон­стан­тин Соко­лов , арт-дирек­тор ком­па­нии «ITECH.group», рас­ска­зал участ­ни­кам о трен­дах в дизайне, разо­брал ошиб­ки на при­ме­рах сай­тов НКО Улья­нов­ска.

В 2016 году глав­ны­ми трен­да­ми веб-дизай­на явля­ют­ся лег­кость вос­при­я­тия, про­сто­та, нагляд­ность и удоб­ство. Если в 90-е годы был вычур­ный, люби­тель­ский дизайн, в 2000-е – пре­тен­ци­оз­ный с непро­ду­ман­ной струк­ту­рой сай­та, то уже к 2010 он стал удоб­ным, тех­но­ло­гич­ным и лако­нич­ный.

Фрагмент презентации Константина Соколова
Фраг­мент пре­зен­та­ции Кон­стан­ти­на Соко­ло­ва.

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

Осо­бое вни­ма­ние было уде­ле­но исполь­зо­ва­нию совре­мен­ных про­грамм­ных тех­но­ло­гий – загруз­ка стра­ниц без пере­за­груз­ки, нави­га­ция через сен­сор­ные экра­ны, инте­гра­ция с соци­аль­ны­ми сетя­ми, исполь­зо­ва­ние HTML5 вза­мен Flash.

Кон­стан­тин рас­ска­зал о двух бес­плат­ных кур­сах для дизай­не­ров: Aic. Шко­ла дизай­на и Design Scouts.

Константин Соколов , арт-директор компании «ITECH.group». Фото: Надежда Дерябина.
Кон­стан­тин Соко­лов , арт-дирек­тор ком­па­нии «ITECH.group». Фото: Надеж­да Деря­би­на.

Современные тренды в дизайне сайтов

  • Мини­ма­лизм. Дизайн интер­фей­сов стре­мит­ся к упро­ще­нию для облег­че­ния вос­при­я­тия инфор­ма­ции. В трен­де мини­ма­ли­стич­ный функ­ци­о­наль­ный дизайн без лиш­них укра­ше­ний и реа­ли­стич­но­го ске­во­мор­физ­ма.
  • Глав­ные плю­сы: лег­кость вос­при­я­тия кон­тен­та, про­сто­та адап­та­ции интер­фей­сов под деск­топ­ные, мобиль­ные и план­шет­ные устрой­ства.
  • Основ­ные прин­ци­пы: блоч­ное постро­е­ние сет­ки, фото- и видео­кон­тент, сокра­ще­ние коли­че­ства тек­стов, боль­ше «воз­ду­ха» в интер­фей­се. Этот же тренд вклю­ча­ет в себя допол­ни­тель­ные тен­ден­ции: отказ от слай­де­ров (кару­се­лей) на глав­ной стра­ни­це, так как посе­ти­те­лю лег­че про­ли­стать стра­ни­цу вниз, чем управ­лять содер­жи­мым слай­де­ра, отказ от кон­цеп­ции «Above the Fold» (прин­цип раз­ме­ще­ния всех важ­ных эле­мен­тов интер­фей­са на пер­вом экране).
  • Основ­ные прин­ци­пы типо­гра­фи­ки: нестан­дарт­ные (фир­мен­ные) шриф­ты, круп­ные заго­лов­ки, круп­ные тек­сты на кон­стант­ных стра­ни­цах, воз­мож­ность исполь­зо­ва­ния любых шриф­тов.
  • Пол­но­экран­ные сай­ты – дав­но усто­яв­ший­ся тренд, не сда­ю­щий сво­их пози­ций. На весь экран раз­ме­ща­ют фото, видео, иллю­стра­ции – все, что может пере­дать эмо­ции посе­ти­те­лю. Рас­ту­щий тренд – сай­ты, под­стра­и­ва­ю­щие весь кон­тент под экран. Таким обра­зом, на сай­те нет пусту­ю­щих полей по бокам от кон­тен­та стра­ни­цы ни на боль­ших, ни на малень­ких дис­пле­ях.
  • В нави­га­ции наби­ра­ет попу­ляр­ность ани­ма­ция пере­хо­дов меж­ду стра­ни­ца­ми. Это не толь­ко поз­во­ля­ет визу­аль­но улуч­шить вос­при­я­тие сай­та, но и когни­тив­но умень­ша­ет вре­мя ожи­да­ния загруз­ки стра­ниц. Деле­ние экра­на на две части с неза­ви­си­мым скрол­лом внут­ри каж­дой. Осо­бо функ­ци­о­наль­ных реше­ний не несет, но явля­ет­ся све­жим визу­аль­ным ходом.
  • Мик­ро­ани­ма­ции в интер­фей­сах игра­ют важ­ную роль в повы­ше­нии юза­би­ли­ти сай­та. Эта ани­ма­ция про­зрач­на и явля­ет­ся есте­ствен­ным про­дол­же­ни­ем гра­фи­че­ско­го интер­фей­са.

Ска­чай­те пре­зен­та­цию Кон­стан­ти­на Соко­ло­ва.