6 популярных UI-фреймворков, с помощью которых можно сделать удобный и отзывчивый сайт

Эксперты посоветовали, какие именно UI-фреймворки стоит использовать профессиjналам и новичкам в работе, назвали их плюсы и минусы. Изображение: скриншот с сайта: getuikit.com/pro
Эксперты посоветовали, какие именно UI-фреймворки стоит использовать профессиjналам и новичкам в работе, назвали их плюсы и минусы. Изображение: скриншот с сайта: getuikit.com/pro

В июле 2017 года жур­на­ли­сты Теп­ли­цы соци­аль­ных тех­но­ло­гий подрoб­но рас­ска­зы­ва­ли об UX (User eXperience) опы­те поль­зо­ва­те­ля и UI (User interface) и поль­зо­ва­тель­ских интер­фей­сах. В этой ста­тье мы реши­ли рас­ска­зать о том, какие суще­ству­ют попу­ляр­ные UI-фрейм­вор­ки с удоб­ным и отзыв­чи­вым интер­фей­сом. Соста­вить обзор замре­дак­то­ру Теп­ли­цы Ната­лье Бара­но­вой помо­га­ли веб-раз­ра­бот­чик Окса­на Кли­мо­ва и веду­щий раз­ра­бот­чик ком­па­нии «Ана­нас» Егор Талан­цев.

Экс­пер­ты посо­ве­то­ва­ли, какие имен­но фрейм­вор­ки сто­ит исполь­зо­вать про­фес­си­о­на­лам и нович­кам в рабо­те, назва­ли их плю­сы и мину­сы.

Фрейм­ворк — это набор инстру­мен­тов, биб­лио­тек и гото­вых моду­лей, кото­рые веб-раз­ра­бот­чик может исполь­зо­вать при созда­нии сай­тов. «Сай­ты, постро­ен­ные на фрейм­вор­ках обла­да­ют боль­шей доступ­но­стью, луч­шей адап­тив­но­стью и боль­шим соот­вет­стви­ям стан­дар­там. Они раз­ви­ва­ют веб», — отме­ти­ла Окса­на Кли­мо­ва.

Плюсы фреймворков

1. Упро­ща­ет и уско­ря­ет про­цесс. Фрейм­вор­ки эко­но­мят вре­мя и спа­са­ют от рутин­ных задач. «Раз­ра­бот­чи­ку не нуж­но изоб­ре­тать вело­си­пед и тра­тить вре­мя на напи­са­ние кода, кото­рый уже содер­жит­ся во фрейм­вор­ке. Он берет необ­хо­ди­мые в его кон­крет­ном слу­чае ком­по­нен­ты и как из кир­пи­чи­ков скла­ды­ва­ет стра­ни­цы сай­та», — объ­яс­ни­ла Окса­на Кли­мо­ва.

«Ком­по­нен­ты фрейм­вор­ка раз­ра­бо­та­ны так, что не нуж­но будет думать об их сов­ме­сти­мо­сти, то есть по умол­ча­нию все долж­но рабо­тать без каких-либо багов». Окса­на Кли­мо­ва.

2. Содер­жат прак­ти­че­ски все, что необ­хо­ди­мо при раз­ра­бот­ке. От про­стой css-сти­ли­за­ции тек­стов посред­ством добав­ле­ния клас­сов и даже javascript-ком­по­нен­ты модаль­ных окон, табов, слай­де­ров.

3. Поз­во­ля­ют созда­вать респон­сив­ные сай­ты. Сай­ты адап­ти­ру­ют­ся под раз­ные раз­ре­ше­ния экра­нов: ноут­бу­ки, план­ше­ты, теле­фо­ны. «Толь­ко пред­ставь­те, что­бы сайт стал респон­сив­ным, бло­кам в верст­ке необ­хо­ди­мо все­го лишь про­пи­сать соот­вет­ству­ю­щие клас­сы, опи­сан­ные в доку­мен­та­ции к фрейм­вор­ку», — уточ­ни­ла Окса­на Кли­мо­ва.

Еще по теме: Как изу­ча­ет­ся опыт поль­зо­ва­те­ля и что такое UX/UI

4. Лег­ко понять, как рабо­тать с незна­ко­мым сай­том. «Если на сай­те рабо­та­ют несколь­ко чело­век или к вам в руки попа­да­ет сайт от дру­го­го раз­ра­бот­чи­ка, и про­ект постро­ен на фрейм­вор­ке, то вам будет намно­го про­ще понять, как что-то изме­нять или добав­лять на нем, — объ­яс­ни­ла Окса­на Кли­мо­ва. — Все пото­му, что перед гла­за­ми все­гда есть подроб­ная доку­мен­та­ция к фрейм­вор­ку».

Bootstrap

Пример сайта, сделанного на Bootstrap. Изображение: скриншот с сайта expo.getbootstrap.com
При­мер сай­та, сде­лан­но­го на Bootstrap. Изоб­ра­же­ние: скрин­шот с сай­та expo.getbootstrap.com

Самый попу­ляр­ный в мире ui-фрейм­ворк. На дан­ный момент суще­ству­ет две вер­сии: 3.3.7  и v4.0.0-alpha.6. Окса­на Кли­мо­ва пре­ду­пре­ди­ла, если нуж­но под­дер­жи­вать Internet Explorer ниже 9 вер­сии, то луч­ше исполь­зо­вать Bootstrap 3.3.7. Так­же Егор Талан­цев заме­тил, что под­держ­ка Bootstrap вер­сии 3 при­оста­нов­ле­на.

Bootstrap поз­во­ля­ет стро­ить адап­тив­ные grid-сет­ки, вклю­ча­ет в себя HTML и CSS-шаб­ло­ны оформ­ле­ния типо­гра­фи­ки, кно­пок, форм, таб­лиц, нави­га­ци­он­но­го меню и дру­гих эле­мен­тов. Так­же есть такие javascript-ком­по­нен­ты, как модаль­ные окна, выпа­да­ю­щие меню, тул­ти­пы, аккор­део­ны, кару­се­ли.

«В интер­не­те мож­но най­ти мно­же­ство пла­ги­нов и верст­ки под Bootstrap, то есть, если необ­хо­ди­мо решить какую-то зада­чу, кото­рую нель­зя сде­лать «из короб­ки», в боль­шин­стве слу­ча­ев реше­ние най­дет­ся в сети», — поде­ли­лась Окса­на Кли­мо­ва.

«В порт­фо­лио нашей веб-сту­дии Ана­нас пре­об­ла­да­ют рабо­ты на UI-фрейм­вор­ке Bootstrap. В июле 2017 года мы запу­сти­ли вме­сте с Теп­ли­цей про­ект «Ананас.ТСН». И бла­го­да­ря Bootstrap нашей коман­де уда­лось собрать удоб­ный, отзыв­чи­вый интер­фейс за корот­кий срок и выиг­рать Хака­тон ЖКХак от Теп­ли­цы». Егор Талан­цев.

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

Так­же у фрейм­вор­ка хоро­шая под­держ­ка стан­дар­тов доступ­но­сти для людей с огра­ни­чен­ны­ми воз­мож­но­стя­ми здо­ро­вья.

Сайт Bootstrap.

Bulma

Примеры элементов на фреймворка Bulma. Изображение: скриншот с сайта bulma.io
При­ме­ры эле­мен­тов на фрейм­вор­ка Bulma. Изоб­ра­же­ние: скрин­шот с сай­та bulma.io

Во всех новых про­ек­тах веб-сту­дия «Ана­нас» исполь­зу­ет Bulma. Во мно­гом, по мне­нию Его­ра Талан­це­ва, этот фрейм­ворк не усту­па­ет Bootstrap. Но един­ствен­ный минус в том, что в нем нет JS. «Из-за это­го функ­ци­о­наль­ность неко­то­рых ком­по­нен­тов такие как откры­тие модаль­ных окон при­хо­дить­ся реа­ли­зо­вы­вать само­сто­я­тель­но», — поде­лил­ся наблю­де­ни­я­ми Талан­цев.

Сайт Bulma.

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

Foundation

Пример сайта, сделанного на Foundation. Изображение: скриншот с сайта: bidenfoundation.org
При­мер сай­та, сде­лан­но­го на Foundation. Изоб­ра­же­ние: скрин­шот с сай­та: bidenfoundation.org

Foundation так­же, как и Bootstrap вклю­ча­ет в себя HTML, CSS и JavaScript-шаб­ло­ны и под­дер­жи­ва­ет гра­фи­че­ское уско­ре­ние для более плав­ных ани­ма­ций.

По сло­вам Окса­ны Кли­мо­вой, Foundation в срав­не­нии с Bootstrap предо­став­ля­ет боль­ше опций при выбо­ре grid-сет­ки.

«Кро­ме того, коман­да Foundation рабо­та­ла с веду­щи­ми экс­пер­та­ми, что­бы пере­пи­сать все ком­по­нен­ты фрейм­вор­ка в соот­вет­ствии со стро­ги­ми стан­дар­та­ми доступ­но­сти». Окса­на Кли­мо­ва.

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

Сайт Foundation.

Semantic UI

Примеры страниц на Semantic. Изображение: скриншот с сайта semantic-ui.com
При­ме­ры стра­ниц на Semantic. Изоб­ра­же­ние: скрин­шот с сай­та semantic-ui.com

Это отно­си­тель­но моло­дой фрейм­ворк с под­держ­кой всех совре­мен­ных бра­у­зе­ров. Содер­жит боль­шое коли­че­ство ком­по­нен­тов. По мне­нию Его­ра Талан­це­ва он может вполне соста­вить кон­ку­рен­цию Bootstrap.

Сайт Semantic UI.

UIKit

Анимация с сайта getuikit.com/pro
Ани­ма­ция с сай­та getuikit.com/pro

UIKit – это модуль­ный фрейм­ворк в сти­ле мате­ри­аль­но­го дизай­на (Material Design – дизайн про­грамм­но­го обес­пе­че­ния и при­ло­же­ний опе­ра­ци­он­ной систе­мы Android от ком­па­нии Google). По сло­вам Окса­ны Кли­мо­вой, он силь­но отли­ча­ет­ся от Bootstrap и Foundation. Содер­жит более 30 очень гиб­ких и адап­тив­ных ком­по­нен­тов, вклю­чая модаль­ные окна, выез­жа­ю­щие вклад­ки, парал­лакс и мно­гое дру­гое.

«Ком­по­нен­ты хоро­шо касто­ми­зи­ру­ют­ся и поз­во­ля­ют лег­ко созда­вать слож­ные интер­фей­сы». Окса­на Кли­мо­ва.

Одна­ко, экс­перт отме­ти­ла, что для него в сети мож­но най­ти уже не так мно­го допол­ни­тель­ных мате­ри­а­лов, как для Bootstrap и Foundation

Сайт UIKit.

Materialize

Пример сайта, сделанного на платформе Materialize. Изображение: скриншот с сайта: materializecss.com
При­мер сай­та, сде­лан­но­го на плат­фор­ме Materialize. Изоб­ра­же­ние: скрин­шот с сай­та: materializecss.com

Этот фрейм­ворк был раз­ра­бо­тан Google и явля­ет­ся наи­бо­лее попу­ляр­ным в сти­ле Material Design. Так­же, как и преды­ду­щие он поз­во­ля­ет созда­вать адап­тив­ные сай­ты.

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

«Доку­мен­та­ция к Materialize доволь­но понят­ная, исполь­зо­ва­ние не тре­бу­ет очень глу­бо­ких зна­ний в раз­ра­бот­ке», – уточ­ни­ла Окса­на Кли­мо­ва.

Сайт Materialize.

Как изучать фреймворки?

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

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

2. Необ­хо­ди­мо выучить базу HTMLи CSS. По мне­нию Его­ра Талан­це­ва, выучив осно­вы мож­но без про­блем исполь­зо­вать любой UI-фрейм­ворк. Раз­ра­бот­чик посо­ве­то­вал такие сай­ты для обу­че­ния:

  • HTML Book — осно­вы HTML и CSS, а так­же спра­воч­ник всех HTML тэгов;
  • Learn Javascript — базо­вые осно­вы Javascript.

Окса­на Кли­мо­ва и Егор Талан­цев — участ­ни­ки про­грам­мы «Пасе­ка».