Базовый Курс UX: Паттерны проектирования
Урок 8 из 31:
(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals. Если вы здесь впервые, то лучше начните сначала)
Когда многие дизайнеры сталкиваются с одной и той же сложной задачей (к примеру, меню в мобильном приложении), и кто-то решает ее с особым изяществом (например, скрытое меню на Facebook), и многие дизайнеры перенимают это решение, — это помогает пользователям быстрее “врубиться” в устройство приложения или сайта, ведь они видят подобное решение снова и снова.
Эти общепринятые решения так и называются:
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
Паттерны проектирования
Если какой-либо дизайн часто встречается в интернете, это еще не значит, что он хороший. Хороший паттерн проектирования (другими словами, образец дизайна) должен быть и распространенным, и удобным.
Некоторые виды дизайна становятся популярными только потому, что позволяют ленивым UI-дизайнерам избегать сложностей. Это все равно, что надевать пакет на голову кому-то страшненькому.
Пример: Кнопка меню на Facebook (так называемая hamburger button — кнопка-гамбургер) — которая служит для вызова скрытого меню в мобильных приложениях — стала появляться и на полноразмерных сайтах, где достаточно места для нормального, не скрытого меню. Конечно, ведь спрятать дурацкое меню гораздо проще, чем спроектировать хорошее.
На деле, многие пользователи даже не заметят скрытое меню и покинут сайт или запутаются.
Это плохо.
Это для ленивых.
“Don’t do it, bitch.” — Jesse Pinkman.
Так вот, паттернов проектирования — сотни, и они эволюционируют изо дня в день, следом за девайсами и технологиями. Поэтому я не смогу составить список. Но вот вам хотя бы пара ссылок, на которые стоит обратить внимание:
1) GoodUI — отличный список простых идей с картинками. В большинстве своем, их стоит использовать в дизайне (ну, или хотя бы попробовать).
2) PatternTap — целая библиотека примеров тех частей сайта, которые могут вам понадобиться. Примеры присылаются пользователями. На заметку: Какие-то примеры плохие, какие-то — хорошие, но даже сам процесс просмотра любых примеров даст вам представление о том, что делают и чего не делают другие.
3) The Anatomy of a Perfect Landing Page — эта статья, конечно, не супер-новая, но она все еще актуальна. Следуя перечисленным указаниям, вы сможете быстро создать достаточно общую, но зато эффективную страницу для пользователей, приходящих к вам с поиска — то есть первую страницу, которую они видят. Если вам понравится, рекомендую перейти к Unbounce blog.
4) Mobile Patterns — по аналогии с PatternTap, в этом списке встречаются далеко не идеальные дизайны. Тем не менее, всегда полезно посмотреть на разные дизайны мобильных приложений и понять, что “принято” в этой сфере.
5) Timoa on Pinterest — очень хорошо организованная коллекция UI-элементов; все отсортировано по функциям.
6) Мы пропустили хорошие сайты с паттернами? Дайте мне знать в Twitter.
Завтра я расскажу вам о той части UX-дизайна, которая отличает нас от животных:
Если вам понравилась статья и перевод, дайте нам знать — нажмите зеленую кнопку Recommend
И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Nancy Pong и Ринат Шайхутдинов. | UxLab, LLC | Курсы дизайна в Йошкар-Оле
Мобильное приложение «Заметки о психике» | Mental Notes
Полезный инструмент для встряхивания мозгов. Подкидывает идей как привлечь, удержать и направить внимание пользователя
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
