В этом вводном уроке на наглядных примерах будет показано, что такое дизайн вообще и какие ключевые понятия в него входят. Овладеете основными терминами, о которых все слышали, но которые никто не понимает до конца.
Дизайн — это результат проектирования объекта с целью решения поставленных задач, в частности художественных (эстетических).
В широком смысле дизайн концентрируется не только на художественном конструировании, а и на решении ряда других проблем: технических, социальных, потребительских и т.д.
Дизайн должен решать проблему максимально эффективно.
В зависимости от контекста и поставленной задачи дизайн решает проблемы по-разному. Давайте посмотрим на рекламные материалы 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:
Матеріали: пластик\резина, метал;
Колір: цияновий колір (освіжаючий та яскравий акцент);
Стиль: модерн, мінімалізм (відсутність гострих кутів (заокруглені форми) додають “м’якості” та облегшують дизайн);
UX:
Заокруглені та зглаждені форми приладу вберігають користувача від травмування приексплуатації, та полегшують догляд за девайсом(легко витирати пил через відсутність дрібних отворів де він може збиратися).
Легкі матеріали виконання корпусу, невеликий розмір, вбудований акумулятор та можливість відєднання кабелю підзарядки, дозволяють користуватися девайсом в атономному режимі до декількох годин та легко переміщуювати девайс куди-завгодно.
Рухома в будь-якому напрямку голівка лампи дозволяє легко змінювати дірекшин світла.
Єдина сенсорна кнопка по центру стійки інтуїтивна, являє собою як кнопку вимкнення\увімкнення, так і кнопку перемикання режимів яскравості освітлення. Декілька дотиків повністю покривають всі можливі режими експлуатації.
Електронна сигарета
UI:
Матеріали: метал, прозорий та непрозорий пластик;
Форма: ергономічна;
Колір: чорний, жовтий;
Стиль: сучасний;
UX:
Яскравий колір дозволяє швидко візуалізувати девайс на будь-якій паверхні.
Ергономічна форма та невелика вага дозволяє легку есплуатацію девайсу, легко поміщається в руці, не вислизає завдяки якості матеріалів.
Швидка заміна катриджів на магнітах облегшує есплуатацію.
Можливість підзарядки від type-c та одночасного використання.
На фронтальній частині корпусу розімщенний невелийкий дисплей, котрий індикує про рівень вольтажу та заряду акумулятора. Також також розміщенні основні кнопки експлуатації девайсу: велика кнопка увімкнення\вимкнення та дві кнопки зміни вольтажу. Додатковий боковий слайдер, який дозволяє змінювати тугість тяги. Всі кнопки зручно розтащовані в зоні великого пальця, тому інтеракшин здійснюється одним пальцем.
Наручний годинник
UI:
Матеріали: полімер, акрил, метал;
Колір: сірий, світло рожевий;
Стиль: класичний, спортивний.
UX:
Зручний полімерний браслет та вологостійкий корпус, дозволяють використовувати годинник майже в будь-яких умовах, підходить для занять спортом.
Електронний дисплей з індикацією (дати, дня тижня, будильника) має невеликий розмір, тому оверал розмір годинника досить маленький, що робить його вагу майже непомітною на руці.
Налаштування та експлуатація здійснюється за допомогою дотаткових 3-х кнопок, які розташовані по бокам годинника: для перемикання в режим секундоміра\таймера, будильника, увімкнення додаткової підствітки дисплею, вхід в меню налаштування часу та дати. Здійснення перемикання між деякими режимами здійснюється почерговим натиском на одну і ту саму кнопку, що зменшило необхідну їх кількість на корпусі.
2. Гаманець із синтетичного паперу
UI:
Матеріали: синтетичний папір, магніти;
Колір: пастельний з іллюстраціями;
Стиль: функціонально-мінімалістичний.
UX:
Завдяки матеріалам виконання гаманець є водостійким та легким, та не займає багато місця, при цьому зберігаючи повністю весь фунціонал повноцінного гаманця.
3. Інший вид інтерфейсу - тактичний(хаптичний) інтерфейс