В этом вводном уроке на наглядных примерах будет показано, что такое дизайн вообще и какие ключевые понятия он в себя включает. Познакомитесь с основными терминами, которые все слышали, но никто не понимает.
Дизайн — это результат проектирования объекта с целью решения поставленных задач, в том числе художественных (эстетических).
В широком смысле дизайн подразумевает не только художественное конструирование, но и решение ряда других проблем: технических, социальных, потребительских и так далее.
Дизайн должен решать проблему минимальным количеством средств с максимальной эффективностью.
В зависимости от контекста и поставленной задачи дизайн решает проблемы по-разному. Посмотрим на рекламные материалы Coca–Cola 1949 года:
С точки зрения графического дизайна этот плакат должен привлекать к себе внимание, идентифицировать бренд, побуждать к действию — все это задачи дизайна в данном контексте. В этом нам помогает композиция, теория цвета и типографика — инструменты и принципы дизайна. Ключевую роль тут также играет копирайтинг или как написан текст, но это уже смежная дисциплина.
Теперь давайте сконцентрируемся на красном автомате с газировкой (который в качестве аллегории изображен парящим в небе).
Посмотрите на размер дверцы, расположение ручки и приемника монет. Обратите внимание на петли и решетку охлаждения. Каждая деталь проработана и имеет причину, по которой она выполнена именно так.
Это результат промышленного дизайна – отдельной сложной дисциплины, в которой учитываются совершенно другие аспекты: функциональные требования к изделию, технические ограничения, устройство и компоновка деталей. Для создания такого дизайна уже потребуется инженерное подспорье или консультации с соответствующими специалистами.
Из изложенного вы должны понять, что дизайн бывает разным, но каждый его подвид имеет границы и области применения. Мы собираемся изучать очень специфический вид дизайна — UX/UI дизайн для экранных графических интерфейсов.
Интерфейс — это набор инструментов для взаимодействия двух систем. С английского interface означает «место соприкосновения». В случае с дизайном, одной из систем всегда является человек.
Давайте разберем UI (User Interface) пользовательский интерфейс микроволновой печи.
Лицевая панель включает несколько элементов, которые мы можем настраивать в зависимости от наших потребностей:
- Дверца с окном и ручкой для открытия — открывает доступ к контейнеру для еды и является индикатором (когда идет разогрев мы видим свет);
- Ручка мощности — задает, с какой силой разогревать содержимое;
- Ручка таймера — задает, как долго проводить разогрев. Кроме того, как только мы выставляем время, так сразу начинается процесс приготовления. То есть эта ручка еще и служит включателем.
Все вышеперечисленное является элементами пользовательского интерфейса.
На примере нашей ретро микроволновой печи рассмотрим, чем является UI и UX дизайн.
UI–дизайн (User Interface Design) или дизайн пользовательского интерфейса – определяет, как выглядят пользовательский интерфейс, а именно:
- Материалы и цвета — металл и стекло, бежевый и бронзовый цвета;
- Стиль механических элементов — ретро;
- Стиль иконок и надписей — плоский, шрифт без засечек.
UX–дизайн (User Experience) или опыт взаимодействия – определяет, как пользователь будет пользоваться интерфейсом, а именно:
- Какие элементы интерфейса выбрать — вместо механических ручек UX–дизайнер мог поставить ЖК-дисплей с сенсорным управлением и индикаторами состояния. Также он мог установить дополнительный переключатель для включения/выключения печи или кнопку открытия двери;
- Размер и расположение элементов интерфейса — с какой стороны поставить ручку, какого размера окно установить в двери, насколько большими должны быть крутилки справа.
В круг обязанностей UX–дизайнера также входит поиск сценариев использования продукта на основе ролей пользователей. Например, в нашем случае можно выделить несколько сценариев:
- Студент разогревает замороженную пиццу перед завтраком — кажется разогревать будут часто, может стоит задуматься об единственной кнопке, которая автоматически выставит мощность в 240 ватт и таймер на 3 минуты?
- Мама запекает рыбу в фольге — это может занять целый час, стоит задуматься о громком сигнале окончания готовки, в этот момент мама может находиться в другой комнате.
Интерфейс в микроволновой печи является физическим и даже механическим. Но UX/UI дизайнеры работают с графическими экранными интерфейсами. То есть все элементы интерфейса находятся на экране монитора или мобильного устройства (смартфон, планшет).
Очень важно понимать, что экран монитора настольного компьютера и экран смартфона имеют важные различия. А именно то, как мы с ними взаимодействуем:
- В настольных компьютерах используется клавиатура и мышь;
- В смартфонах, планшетах и умных часах вместо мыши и клавиатуры используют только пальцы. Это накладывает свои требования. Например, нельзя сделать кнопку на мобильном устройстве слишком маленькой, так как по ней будет невозможно попасть пальцем.
Итак, UX/UI дизайнеры создают графические экранными интерфейсы, а именно дизайн для:
- Веб–сайтов — что мы будем усиленно изучать;
- Мобильных приложений — затронем лишь вскользь;
- Приложений для настольных компьютеров.
Дизайн для веб–сайтов и мобильных приложений – это то, над чем UX/UI дизайнеры работают 99% времени. В этом цикле статей мы делаем упор на дизайн для веб–сайтов, это называют веб–дизайном.
Для лучшего понимания привожу еще несколько видов необычных интерфейсов. Мы не будем с ними работать, но они существуют:
- Символьный интерфейс или командная строка — один из первых интерфейсов, который и сегодня используется профессионалами. Требует высокой технической подготовки, но позволяет быстро и гибко управлять компьютером. Для работы использует исключительно клавиатуру;
- Жестовый интерфейс — управление с помощью жестов рук и сенсорного экрана. Также возможно распознавание без прикосновений. Так, например, мультимедийная система последних моделей автомобилей BMW позволяет управлять громкостью музыки с помощью интуитивного жеста покручивания указательного пальца;
- Голосовой интерфейс — один из самых понятных способов взаимодействия с компьютерными системами с помощью человеческого языка. Особенно актуален, когда устройство лишено клавиатуры или когда ее использование отвлекает от основного занятия (например, водителя в дороге).
Новые интерфейсы продолжают разрабатываться и сегодня. Компания Илона Маска Neuralink работает над созданием нейроинтерфейса, который обеспечит взаимодействие мозга человека и компьютера напрямую. Только представьте себе насколько изменится качество пользовательского опыта, когда вы сможете управлять курсором мыслью и надиктовывать текст не произнося и слова.
Разберите интерфейсы трех вещей. Например, кондиционер, автомобиль, стиральная машина или свои предметы, которым вы постоянно пользуетесь (последний вариант предпочтительнее). А именно — распишите, что в выбраном устройстве есть UI (какие части и свойства), а чем является UX (почему выбрали именно эти элементы и расположили именно так). Постарайтесь докопаться до сути. Например, ручка имеет такую форму для того, чтобы ее было удобно держать в руке.
Если не получается выполнить это задание, то перечитайте раздел Что такое UX, UI дизайн и в чем разница? этого урока.
В качестве усложненного задания распишите предмет, в котором нет кнопок и электроники, например, ложку. Где там UX и UI части дизайна?
Приведите хотя бы один новый вид интерфейса, который не описан в уроке (они существуют, также можете придумать свой).
Ответы присылайте в директ в Instagram @frusia.pro (не забудьте указать, что это к первому уроку) или оставляйте здесь в комментариях под статьей (регистрация не требуется).
По каждому ответу дам фидбек, так вы убедитесь, что усвоили материал правильно.
Сегодня вы познакомились с основными понятиями в дизайне. Пожалуйста, убедитесь, что вы хорошо в них разбираетесь (сделайте все домашние задания), прежде чем переходить к следующему уроку. Перечитайте статью еще раз через некоторое время.
Подписывайтесь на меня в Instagram @frusia.pro, будьте в курсе анонсов новых уроков, смотрите проверки домашек в сторис, задавайте вопросы, а также вас ждет множество полезных постов про дизайн.
Stay tuned!
