Где найти интересные дизайн-решения для разработки пользовательского интерфейса

Рассказываем про шесть интернет-ресурсов, которые каталогизируют уже известные приемы в дизайне пользовательского интерфейса (UX/UI). Изображение с сайта: uimovement.com
Рассказываем про шесть интернет-ресурсов, которые каталогизируют уже известные приемы в дизайне пользовательского интерфейса (UX/UI). Изображение с сайта: uimovement.com

Какие попу­ляр­ные при­е­мы исполь­зо­вать при созда­нии it-про­дук­та, и где искать вдох­но­ве­ние? Вари­ант, кото­рый исполь­зу­ют про­фес­си­о­на­лы – сле­дить за рабо­та­ми дру­гих дизай­не­ров со все­го мира. Замре­дак­то­ра Теп­ли­цы Ната­лья Бара­но­ва сде­ла­ла обзор шести интер­нет-ресур­сов, кото­рые ката­ло­ги­зи­ру­ют уже извест­ные при­е­мы в дизайне поль­зо­ва­тель­ско­го интер­фей­са (UX/UI).

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

Inspired UI

Изображение: скриншот с сайта: inspired-ui.com
Изоб­ра­же­ние: скрин­шот с сай­та: inspired-ui.com

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

Выбрать при­ме­ры так­же мож­но по типу устрой­ства. Есть iPhone, iPad и Android. Одна­ко, на сер­ви­се нет ком­мен­та­ри­ев к пред­став­лен­ным шаб­ло­нам, ресурс при­зван вдох­но­вить вас любо­пыт­ны­ми при­ме­ра­ми.

Сайт Inspired UI.

UI Movement

Изображение: скриншот с сайта uimovement.com
Изоб­ра­же­ние: скрин­шот с сай­та uimovement.com

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

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

Сайт UI Movement.

UX Movement

Изображение: скриншот с сайта uxmovement.com
Изоб­ра­же­ние: скрин­шот с сай­та uxmovement.com

Ресурс пред­став­ля­ет из себя блог поль­зо­ва­те­лей. Здесь пуб­ли­ку­ют­ся ста­тьи, в кото­рых раз­ра­бот­чи­ки и дизай­не­ры делят­ся опы­том, пока­зы­ва­ют, как мето­ды про­ек­ти­ро­ва­ния it-про­дук­та вли­я­ют на пове­де­ние поль­зо­ва­те­лей. На сай­те вы най­де­те мно­же­ство при­ме­ров дизай­на кно­пок и нави­га­ции, сет­ки к мобиль­ным при­ло­же­ни­ем. Плюс в том, что к каж­до­му при­ме­ру есть ком­мен­та­рии.

Еще по теме: Тести­ру­ем юза­би­ли­ти сай­та: мето­ды и инстру­мен­ты

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

Сайт UX Movement.

Nancy Pong

Изображение: скриншот с сайта medium.com/@nancypong
Изоб­ра­же­ние: скрин­шот с сай­та medium.com/@nancypong

Блог пере­вод­чи­ка Оль­ги Скул­ки­ной. На сай­те мож­но най­ти ста­тьи по UX-дизай­ну на рус­ском язы­ке. Напри­мер, в бло­ге недав­но были опуб­ли­ко­ва­ны такие тема­ти­че­ские ста­тьи: «шаб­ло­ны про­ек­ти­ро­ва­ния», «поэтап­ное пред­став­ле­ние инфор­ма­ции в мобиль­ных при­ло­же­ни­ях», «3 трен­да в дизайне лен­дин­гов», «стра­те­гия 5: добав­ля­ем весе­лые игро­вые эле­мен­ты», «стра­те­гия 2: добав­ля­ем интер­ак­тив­ные эле­мен­ты, с кото­ры­ми хочет­ся вза­и­мо­дей­ство­вать».

Еще по теме: UX и UI: основ­ные поня­тия дизай­на циф­ро­во­го про­дук­та

В пере­вод­ных мате­ри­а­лах вы уви­ди­те при­ме­ры UX-дизай­на, про­дук­то­во­го дизай­на и узна­е­те о том, как устро­е­на пси­хо­ло­гия поль­зо­ва­те­лей.

Сайт Nancy Pong.

Uxeria

Изображение: скриншот с сайта blog.uxeria.com
Изоб­ра­же­ние: скрин­шот с сай­та blog.uxeria.com

Обра­зо­ва­тель­ный ресурс с полез­ны­ми ста­тья­ми на тему UX/UI дизай­на. Но в бло­ге Uxeria пуб­ли­ку­ют­ся мате­ри­а­лы по юза­би­ли­ти с при­ме­ча­тель­ны­ми при­ме­ра­ми раз­ра­бот­ки мобиль­ных при­ло­же­ний и веб-сай­тов. Каж­дый месяц пуб­ли­ку­ют­ся под­бор­ки, кото­рые понра­ви­лись авто­рам ресур­са. В них мож­но най­ти спис­ки луч­ших при­ме­ров it-про­дук­тов, отли­ча­ю­щих­ся необыч­ным реше­ни­ем и удоб­ством исполь­зо­ва­ния.

Сайт Uxeria.

Usabilla

Изображение: скриншот с сайта blog.usabilla.com
Изоб­ра­же­ние: скрин­шот с сай­та blog.usabilla.com

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

Сайт бло­га Usabilla.

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