На старте своей карьеры мне казалось, что дизайнеры говорят на другом языке, используя умные непонятные термины. После того, как я начала обучать дизайнеров без опыта, я заметила, что это не только моя проблема. Читая статьи акул дизайна, половину из описанного можно совсем не понять.
Спустя 4 года работы я уже ориентируюсь в дизайн-пространстве. Но, по правде говоря, всегда есть чему учиться и даже сейчас я часто иду в гугл за помощью. А что уж говорить о тех, кто только решил начать карьеру дизайнера.
В данной статье я объясню самые основные термины, которые используют дизайнеры на созвонах во Flowwow, чтобы вы могли ими оперировать и понимать суть разговора.
Термины, о которых пойдет речь, были выбраны не случайно- о них было больше всего вопросов и предположений. Когда я упоминала эти слова в разговоре, меня просили пояснить сказанное.
UX/UI Дизайнер
Начнем с самого распространенного и любимого UX/UI определения. Что за буквы и почему мы их везде видим.
UX (User Experience)
Oбласть дизайна, которая фокусируется на ощущениях и впечатлениях, которые пользователь получает при взаимодействии с продуктом или сервисом.
UX-дизайнеры стремятся создать оптимальный пользовательский опыт, учитывая удобство использования, понятность структуры, легкость навигации и прочие факторы, которые влияют на удовлетворенность пользователей от продукта. Цель UX – обеспечить удобство и удовлетворение пользователей при использовании продукта.
Примеры работы дизайнера во Flowwow по части UX:
- Проведение интервью с пользователями (cast dev) для анализа поведенческих данных пользователей, чтобы понять их потребности, предпочтения и проблемы;
- Создание пользовательских путей (сценариев) использования продукта, чтобы обеспечить логическую и интуитивно понятную навигацию;
- Разработка прототипов интерфейса, которые помогают протестировать и улучшать пользовательский опыт до запуска окончательной версии продукта;
- Проведение тестирования с пользователями, чтобы собрать обратную связь, выявить проблемы и внести улучшения в интерфейс продукта.
Как мы видим, это не про рисование прямоугольников в Figma и уж точно не про красивые кнопочки. Важно понимать, что UX дизайн- неотъемлемая часть работы дизайнера, без которой невозможно узнать, удобно ли людям пользоваться продуктом и приносят ли твои решения пользу и выгоду.
UI (User Interface)
Область дизайна, которая фокусируется на ощущениях и впечатлениях, которые пользователь получает при взаимодействии с продуктом или сервисом.
UI-дизайнеры работают над созданием привлекательного и функционального дизайна, учитывая визуальные аспекты, цветовую палитру, шрифты, макеты и т.д. Цель UI – сделать интерфейс удобным, красивым и понятным для пользователя.
Примеры работы дизайнера во Flowwow по части UI:
- Создание визуально привлекательных и функциональных элементов для веб-сайтов, включая размещение элементов интерфейса, выбор цветовой гаммы, шрифтов и графики;
- Разработка интерфейса мобильного приложения для удобного заказа цветов и подарков с мобильных устройств. Дизайн приложения должен быть адаптирован для небольших экранов и удобного использования на сенсорных устройствах;
- Создание дизайна для электронных писем с уведомлениями о заказе, статусе доставки, специальных предложениях и маркетинговых рассылках, чтобы сделать их привлекательными и информативными;
- Разработка чистого интерфейса для администраторов, курьеров и продавцов для оперативной работы.
В данном случае упор больше идет на визуальную часть интерфейса. Но это не значит, что вклад в развитие системы в UI дизайне меньше, чем в UX части. Важно понимать основы типографики и колористики (шрифты и цвета), а также психологию человека, ведь основной упор здесь также идет на пользователей.
UX и UI чаще всего идут в связке, так как дизайнер должен уметь создавать функциональный и визуально привлекательный интерфейс, ведь одно без другого не принесет эффективного результата.
Типографика
Этот термин включает в себя выбор шрифтов, их размеров, расстояний между символами и строками, а также оформление заголовков, списков и других элементов текста. Цель типографики - сделать текст удобным для чтения, выразительным и эстетичным.
Как можно понять из определения, с графиком тут ничего не связано. Типографика- это искусство и наука о создании и оформлении текста.
Хорошо продуманная типографика играет важную роль в создании визуального образа документа или дизайна, повышая его привлекательность и читаемость.
Примеры работы дизайнера во Flowwow по части Типографики:
- Использование одних и тех же шрифтов на протяжении всех продуктов компании для поддержания общего стиля бренда;
- Проверка читаемости шрифтов на разных фонах и при разных начертаниях требованиям WSAG (Web Content Accessibility Guidelines).
WSAG устанавливают стандарты доступности веб-контента для всех пользователей, включая людей с инвалидностью. Проверка шрифтов включает в себя оценку их читаемости, контрастности и удобства восприятия.
Для проверки шрифтов на соответствие WSAG можно использовать следующие сервисы:
Contrast Checker by WebAIM: Этот онлайн-инструмент позволяет проверить контрастность между шрифтом и фоном с учетом рекомендаций WSAG.
Accessible Colors: Этот сервис помогает выбирать сочетания цветов для текста и фона с учетом требований доступности и контрастности.
Color Safe: Этот инструмент позволяет создавать гармоничные и доступные цветовые схемы для веб-сайтов, включая выбор шрифтов и цветов текста.
Если вы работаете в Figma, то можете воспользоваться плагином A11y- Color Contrast Checker, который покажет уровень читаемости текста (AA- хорошо, AAA-отлично, все, что ниже- сложно читать и воспринимать). Этот плагин удобен тем, что его можно использовать сразу в рабочей области, не переходя на сторонние сервисы.
Как мы можем заметить, работа со шрифтами- достаточно важная часть в работе дизайнера, ведь именно с помощью текста строится иерархия на страницах, показываются пояснения и описания объектов.
Айдентика
Это слово я услышала впервые два года назад на своих первых Дизайн Выходных. Этим термином я не оперирую как продуктовый дизайнер, однако в настоящее время важно развиваться не только в своей области, поэтому объясняю.
"Айдентика" (identity) - это понятие в дизайне, относящееся к созданию уникального и легко узнаваемого визуального образа, который представляет собой целостную идентификацию компании, бренда или продукта.
Айдентика включает в себя логотип, цветовую палитру, типографику, графические элементы и другие визуальные атрибуты, которые помогают определить и отличить бренд от других.
Айдентика используется в различных областях и сферах деятельности:
1. Брендинг: В маркетинге и брендинге айдентика помогает создать узнаваемый образ компании или продукта, дифференцироваться от конкурентов и усилить связь с аудиторией.
2. Дизайн веб-сайтов: Веб-дизайнеры используют элементы айдентики компании для создания уникального и привлекательного дизайна веб-сайта, который соответствует корпоративному стилю.
3. Упаковка продукции: В дизайне упаковки продукции айдентика помогает сделать продукт узнаваемым на полке магазина и привлечь потребителей.
4. Рекламные материалы: В создании рекламных баннеров, брошюр, рекламных роликов айдентика компании обеспечивает единый стиль и узнаваемость бренда.
Эррор кейс, корнер кейс
Часто на созвонах слышала данные термины, они образованы от английских слов Error case- error (ошибка), Corener case- corner (угол).
Корнер-кейс (corner case) в дизайне
Это особая, нестандартная или редкая ситуация или использование продукта, которое может представлять уникальные вызовы или проблемы. В процессе разработки дизайна учитывание корнер-кейсов помогает предотвратить неожиданные ситуации и обеспечить удобство использования продукта для всех пользователей.
Пример ситуации корнер-кейса в дизайне: при проектировании интерфейса мобильного приложения для доставки подарков и цветов необходимо учесть случай, когда пользователь находится в метро без доступа к сети интернет и в данный момент он не может заказать своей любимой милый подарочек. Должно быть предусмотрено надлежащее уведомление пользователю о потере доступа к сети и возможность выполнить операцию позже, когда подключение будет восстановлено.
Эррор-кейс (error case) в дизайне
Это ситуация, когда происходит ошибка или непредвиденное поведение при использовании продукта пользователем. Проектирование для эррор-кейсов включает в себя создание понятных и информативных сообщений об ошибках, предоставление пользовательских путей для исправления проблемы и минимизацию негативного влияния ошибок на пользовательский опыт.
Пример ситуации эррор-кейса в дизайне: пользователь вводит неверные данные при оформлении заказа на сайте интернет-магазина цветов и подарков. Система должна предоставить четкие сообщения об ошибке и указание на необходимость исправления введенных данных, чтобы помочь пользователю успешно завершить процесс оформления заказа подарка маме на день рождения.
Корнер и эррор кейсы важно оформлять должным образом, продумывать все ситуации, в которых может оказаться пользователь и помочь ему из них выпутаться в самое короткое время.
Эмпти стейт
Эпти стейт (empty state) в дизайне относится к визуальным представлениям содержания или информации, которые могут отображаться на экране в тех случаях, когда нет данных или контента для отображения. Эпти стейт создается для того, чтобы информировать пользователей о текущем состоянии приложения или интерфейса и указывать на действия, которые они могут предпринять.
Эпти стейты важны для улучшения пользовательского опыта, так как они помогают информировать и направлять пользователей в случаях, когда содержание или данные отсутствуют. Они также могут использоваться для создания приятного и целостного пользовательского интерфейса.
В следующей статье расскажу про дизайн-термины, относящиеся к дизайн -системам и UI-kit-ам.
P.S.
Не стесняйтесь оставлять комментарии про интересующие вас темы и пожелания о последующем формате статей.
Вихарева Анастасия, Старший Продуктовый Дизайнер веб-сайта и веб-приложения компании FLOWWOW.
Если хотите участвовать в cast dev интервью и опросниках и помогать развитию компании, пишите в телеграм @stasyabis !
Чтобы сказать привет, используй
Email: stasyabis7@gmail.com
Telegram, Medium, LinkedIn: @stasyabis
Viber: +79877503993
Портфолио: Behance
Фотографии: Unsplash
Вебсайт: Website
