Что такое UI UX дизайн интерфейсов

Авторский курс
По дизайну сайтов
Просто и понятно про UI UX design

UI + UX дизайн интерфейса сайта призван сделать его реально эффективным инструментом для владельца бизнеса: чем проще, удобнее, понятнее устроен сайт — тем проще пользователю совершить на нём целевое действие (например, купить что-то).

Дадим слово профессионалу. Йохан Ронс рассказывает, каково быть профессиональным UI/UX дизайнером и даёт советы, как преуспеть в этой области.

Веб- и мобильные приложения

ui-ux-mobile-app

Сайты против приложений: чья возьмёт?

Когда вы создаёте дизайн для родного приложения для платформы (например, iOS или Android), следует твёрдо придерживаться определённых правил. Напротив, когда вы создаёте веб-проект, от вас не требуется соблюдать определённые рекомендации. Обычно у вашего клиента имеются в наличии определённые графические рекомендации для его бренда, что определяет, как в итоге должен выглядеть проект.

Тем не менее, эти рекомендации направлены на продвижение веб-сайтов, что не всегда приводит к достойным решениям в области пользовательского интерфейса. Шрифты выбираются по маркетинговым причинам, а не для удобства. Цвета могут быть яркие и цепляющие, что хорошо сработает в рекламной компании, но не подойдёт для использования приложения день за днём. Поэтому эти рекомендации должны быть интерпретированы должным образом.


ui-ux-example

Пример проработки ui-ux дизайна интерфейса приложения

Есть несколько рекомендаций для веб-страниц. Вы можете утверждать, что веб-страница – это плавильный котёл различных стилей. Если вы делаете что-то, что скорее выглядит как приложение, чем веб-сайт, вам следует узнать о широко используемых фреймворках, таких как Bootstrap и ZURB Foundation. Среда разработки определит, как должен выглядеть ваш проект, потому что не следует заново изобретать колесо. И это, пожалуй, хорошо.

В нашей компании мы отдаём предпочтение Bootstrap, который обеспечивает подходящие размеры для таких типичных элементов пользовательского интерфейса как: кнопки, таблицы с информацией и модальные окна.

В веб-дизайне вы часто будете скованы техническими особенностями сети. Ранее было довольно сложно применить визуальные украшения вроде закругленных углов на веб-сайте. Сегодня же всё изменилось – вы вольны создавать пользовательский интерфейс с использованием множества теней, анимации, переходов, и даже 3D. Дизайнеру следует контролировать то, как выглядит результат в браузере. Я не видел дизайнеров UI, которые занимаются программированием приложений, но дизайнер, который создает HTML и CSS веб-приложения – это не такой уж и редкий зверь. Если вы можете закодировать свой дизайн, у вас будет преимущество перед теми вашими коллегами, которые этого сделать не могут. Кроме того, на мой взгляд, это единственный способ понять, как работает сеть.

Веб-стандарты и ограничения

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

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

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

Расширяя ваш набор навыков

Итак, как же остаться на одной волне с быстроразвивающейся веб-индустрией и расширить ваш набор навыков? Давайте взглянем на несколько разных способов…

1. Знание платформы

ui-ux-modern

Современный дизайн интерфейсов: web — это единая сеть устройств и систем

Большая часть работы дизайнера – это знание платформы. Следует иметь представление о разных операционных системах и о том, как люди их используют. Мы, как дизайнеры, часто используем продукцию Apple, и в этом случае легко забыть, что большинство людей использует компьютеры на базе Windows, когда собственно контактируют с результатами нашей работы.

Я уверен, что мы действительно можем понять что-то, только используя это сами. Я предпочитаю использовать мой макбук для создания дизайна, но провожу много времени на разных других платформах. У меня даже есть несколько установленных копий системы Windows на моём ноутбуке. Также я тестировал новую систему Windows 10, используя внутреннюю программу Microsoft, чтобы выявить изменения в пользовательском интерфейсе.

Также я регулярно покупаю новые комплектующие, чтобы проверить их в деле. Я купил Apple Watch просто чтобы протестировать платформу. И затем продал эти часы, потому что не чувствовал, что они многое привнесли в мою жизнь.

Помимо этого, сама сеть может вести себя как самостоятельная операционная система. Она развивается без остановки: каждую неделю несколько новшеств вносится в каждый браузер. Невероятно важно знать о технических аспектах браузеров, особенно, когда речь идёт о CSS или о графических особенностях. Необходимо знать, что такое SVG и WebGL , и как вы можете использовать Web Animations API.

2. Назад к основам

То, с чем мы сражаемся сегодня, не так уж радикально отличается от того, с чем мы сражались 20 лет назад. Есть множество стоящих советов в книгах. Попробуйте прочитать «Defensive Design for the Web» (Оборонительный дизайн для сети) от Джейсона Фрида и Мэттью Линдермана и «Don't Make Me Think» (Не заставляйте меня думать) от Стива Крага для начинающих.

Если вы не знаете о концепциях вроде модальности и операционного потенциала, необходимо сесть за чтение. Вы должны быть в состоянии объяснить, что такое закон Фитта.

3. UI UX в играх и фильмах

ui-ux-inspiration

UI для Обливиона (2006) содержит гораздо больше декоративных элементов, чем интерфейс Skyrim (2011)

Как дизайнер, я часто ищу новые идеи для своих работ в различных источниках. И нахожу множество вдохновения в играх. Некоторые из них довольно сложные, и дизайнерам интерфейса приходится решать запутанные задачи, работая над бизнес-проектами.

Игры также могут символизировать тренды. Минимализм, присутствующий в Colin McRae Rally напоминает мне о направлении развития IOS 7. Тот вид, который сейчас в моде в области дизайна пользовательского интерфейса, появился в играх много лет назад. Скачок от скевоморфизма к неприкрашенному функциональному инферфейсу и «пустому дизайну» также присутствовал в играх. Сравните Oblivion 2006 года с Skyrim 2011. Обе игры – RPG из одной серии, но разные в производимом впечатлении.

Футуристические интерфейсы в фильмах Marvel вроде Железного человека также являются вдохновением для меня. Это нелегко применимый пример, но эти фильмы заставляют меня думать о вычислительных системах. Мы хотим будущее экранов? Или хотим, чтобы они исчезли? Это, наверное, хороший вопрос для обсуждения в баре, полном дизайнеров.

Оттачивая мастерство

Ваш рост в качестве дизайнера будет проходить через усердную работу, настойчивость, разговоры с коллегами и чтение ужасных отзывов. Около года назад в New York Times я прочитал о людях, начинавших в 80-е, которые до сих пор оттачивают своё мастерство. У меня чувство, будто я только начинаю. А что насчёт вас?

Каждая платформа развивается с течением времени, и задача дизайнера интерфейса — это оставаться на волне. Кроме того, что бы vы ни создавали, yаш продукт не является чем-то изолированным, а представляет собой часть большой системы программного обеспечения.

Задай вопрос

по дизайну сайтов,
я отвечу за 24 часа

или
Приложи файл

Приложи файл с картинкой, если требуется

×