В этом вводном уроке на наглядных примерах будет показано, что такое дизайн вообще и какие ключевые понятия в него входят. Овладеете основными терминами, о которых все слышали, но которые никто не понимает до конца.
Дизайн — это результат проектирования объекта с целью решения поставленных задач, в частности художественных (эстетических).
В широком смысле дизайн концентрируется не только на художественном конструировании, а и на решении ряда других проблем: технических, социальных, потребительских и т.д.
Дизайн должен решать проблему максимально эффективно.
В зависимости от контекста и поставленной задачи дизайн решает проблемы по-разному. Давайте посмотрим на рекламные материалы 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. Будьте в курсе анонсов новых уроков, смотрите проверки домашних заданий в сторис, задавайте мне вопросы, а также на вас ждет множество полезных постов о дизайне.
Пройти тест
Чтобы урок был засчитан как пройденный, вам нужно правильно ответить на 80% вопросов из теста. Чтобы пройти тест и проверить свои знания, вам нужно войти в систему и записаться на курс или зарегистрироваться, если вы еще этого не сделали.
Продолжить обучение
UI:
Кольори - два основних, чорний і білий, в майже однаковій пропорції, доповнюють один одного, а з урахуванням форми самої консолі виглядають гармонійно, поверхня білих елементів матова, а чорних - відблискуюча, що додає більшого контрасту, непорушуючи гармонію.
Матеріал - пластик.
Діодна підсвітка - розташована симетрично з двох боків від "центру" консолі, окрім естетичного, має ще і інформативний характер: підсвітка вимкнена - консоль теж вимкнена, підсвітка горить білим кольором - консоль працює, підсвітка повільно блимає помаранчевим - консоль знаходиться в сплячому режимі. Тож тут UI перетинається з UX, оскільки впрешу чергу естетичний елемент дає інформацію про стан консолі.
Стиль та форма - футуризм з легкою "космічною" тематикою. При бігломі огляді консоль нагадує якийсь звездоліт з майбутнього, завдяки своїм розмірам та використанню плавних кривих ліній у зовнішних бокових панелях, сама консоль виглядає як моноліт, монумент історії та прогресу всєї лінійки цих пристроїв, а оскільки попередні консолі були чорного кольору і тільки сама перша - білого, то кольорова палітра дає шану іісторії і викликикає ностальгічні почуття у дорослої аудиторії.
Незмінне лого на протязі 30ти років - не тільки інформує про те, що за пристрій, але і викликає почуття довіри до бренду.
Кнопка включення.
UX:
Зовні є кнопка включення, на випадок неможливості включення за допомогою геймпаду.
Є підтримка Bluetooth, що дозволяє переміщатись з контроллером по всій кімнаті і мати змогу взаємодіяти з консоллю, а також під'єднати навушники.
Є декілька входів для USB, що дає можливість заряджати одразу декілька геймпадів.
Є підставка, котра дозволяє встановлювати консоль не тільки в горизонтальному, а і в вертикальному положенні.
Відносно легка вага дозволяє без проблем переміщувати консоль.
Підтримуються сервіси по типу Youtube, Netflix, Spotify та Apple Music, що дає змогу використовувати консоль не лише за її прямим призначенням.
1.2 Бездротові навушники Sennheiser
UI:
Колір - чорний, всі елементи в одному кольорі.
Матеріал - пластик. Поверхня матова.
На поверхні кейсу знаходиться лого, на нижній частині намальовано додатокву інформацію і є QR-код з посиланням.
Також на поверхні кейсу є діод.
На самих навушниках є сенсорні панелі.
UX:
Діод також є інформативним елементом, оскільки показує стан заряду кейсу.
Сам кейс і навушники приємні на дотик.
Для навушників є окремий додаток, котрий дозволяє налаштувати звук.
Сенсорні панелі на навушниках доволяють приймати дзвінки, ставити на паузу або перемикати пісні без допомоги телефона.
1.3 Електронна сигарета Vaporesso
UI:
Колір - чорний, лише ємність для рідини прозора.
Матеріал - пластик, з блиском.
Напис на корпусі інформує про виробника.
UX:
Прозірсть ємності для рідини дає можливість контролювати залишок та наповненість під час заливання.
Діод на копусі інформує про стан зарядки сигарети під час використання та зарядки.
Мундштук має анатомічну форму для полегшення процессу паління.
Мунштук та ємність для рідини с'ємні та замінні, що дає можливість часткової заміни елементів у випадку несправностей.
Не реклама, куріння шкодить вашому здоров'ю.)
2. Неелектронний пристрій - Портсигар
UI:
Колір - металевий.
Матеріал - метал з блиском.
Стиль - мінімалізм з морською тематикою. На передній стороні розташоване гравірування з компасом і написом "Sailing to the world" по колу компаса, на задній - гравірування зі старою морською мапою.
Є кнопка відкриття портсигару.
UX:
Використано легки метали, тож вага невелика і носити не важко.
Розміри портсигару відповідають розмірам більшості сигарет на ринку, а об'єм дозволяє розташувати всередені 20 сигарет, що дорівнює кількості сигарет у пачці.
Всередині розташовані зажими котрі притискають сигарети і не дозволяють їм вільно переміщуватись під час транспортування, самі зажими можна легко відгибати для поповнення сигарет.
Теж не реклама, куріння шкодить вашому здоров'ю.)
3. Датчик телефона, котрий реагує на освітлення і регулює яскравість зображення на телефоні.
Коментар frusia.pro:
Привіт, Максим! У вас по кожному завданню все правильно. Тому кидайте палити й переходьте до наступних уроків!