Восприятие цвета в интерфейсе: почему мы видим его по-разному

Про инклюзивность в интерфейсах и то, как дизайнеру учесть особенности цветового зрения.

Привет! Меня зовут Николай Комиссаров, я руковожу командой дизайна Пульса и медиапроектов в VK, а также занимаюсь социальными проектами компании. 
Недавно, работая над одним из своих продуктов, я обнаружил, что вижу цвет не так, как другие люди. Если смотрю только правым глазом — цвета более насыщенные, левым — тусклые, а если обоими глазами — цвет получается средним по насыщенности. 

В этой статье я делюсь базовой информацией об особенностях цветового зрения, а также полезными инструментами и ресурсами, которыми сам пользуюсь. Буду рад, если в комментариях продолжите тему своими знаниями и кейсами! 

Читать: https://habr.com/ru/company/vk/blog/656933/

Гротески и неогротески. Подборка лучших бесплатных шрифтов

Как дизайнеры, мы все знаем, насколько сложным и затратным по времени может быть выбор хорошего шрифта из-за ограниченного бюджета нашего клиента. По этой причине я создал эту подборку красивых гротескных (grotesque) и неогротескных (neo grotesque) шрифтов, которые вы можете бесплатно использовать в своем следующем проекте. Я надеюсь, подборка будет вам полезна.

Посмотреть: https://ux.pub/artmour/grotieski-i-nieoghrotieski-podborka-luchshikh-biesplatnykh-shriftov-42c8

Главные принципы анимации в UX-дизайне

UX-анимации служат трем главным целям

Побуждение пользователя к действиям. Например, «вибрирующая» форма заказа или мигающий значок редактирования при наведении курсора на поле ввода. Иногда анимация может подсказывать пользователю, какие действия ему нужно предпринять для получения того или иного результата. Такая механика часто используется в мобильных приложениях – при помощи анимации свайпа пользователь понимает, что произойдет при «смахивании» вправо или влево.

«Вознаграждение» пользователя. Эту цель выполняют все анимации обратной связи – например, поп-ап «Спасибо за заявку» после отправки формы обратной связи или анимированное начисление бонусов за заказ. Доказано, что анимации с поощрением вызывают у пользователей выброс дофамина, отвечающего за удовольствие. Таким образом, у пользователей повышается настроение, и они лояльнее относятся к вашему ресурсу.

Имиджевая. Сайт застройщика или компании, продающей luxury-товары или услуги смотрится гораздо дороже и престижнее с анимацией, чем без неё.

Подробнее в статье: https://vc.ru/design/386050-glavnye-principy-animacii-v-ux-dizayne

В первую очередь важно юзабилити, а не согласованность или унификация

Существует вредоносный миф, который влияет на принятие дизайн-решений. На первый взгляд это предположение кажется настолько разумным, что мало кто в нем усомниться. И все же при неосторожном применении это заблуждение может нанести реальный вред.
Я говорю о согласованности или последовательности дизайнов.
Часто ее рассматривают, как аргумент в пользу инициативы. Но многие люди, стремящиеся к согласованности, не перестают задавать простой вопрос:
Согласованности с чем?
Согласованность может быть очень полезной, если делает дизайн удобнее. Но если вы не знаете, с чем хотите согласовать дизайн и почему, то согласованность может сбить пользователей с толку.

Читать статью: https://ux.pub/editorial/v-piervuiu-ochieried-vazhno-iuzabiliti-a-nie-soghlasovannost-ili-unifikatsiia-clp

Бизнес-цели и цели пользователя: 7 принципов достижение баланса в продукте

Основы успеха любого цифрового продукта. Чьим целям служит UX / UI дизайн?
Многие думают, что UX / UI – это способ помочь пользователям достичь своих целей и сделать их счастливыми. Ведь сами дизайнеры страстно в это верят и не упускают случая поговорить об этом.
Но подобное заблуждение дорого обходится бизнесу. Давайте посмотрим на вещи такими, какие они есть на самом деле.

UX / UI дизайн помогает вашему бизнесу расти, формируя запоминающийся и узнаваемый бренд, расширяя вашу аудиторию, повышая коэффициент конверсии, улучшая удержание и лояльность пользователей, а также помогая вам собирать и анализировать данные.

Прочный мост должен опираться на одинаковые, симметричные и хорошо сбалансированные опоры. Если одна опора будет прочной, а другая – слабой, мост рухнет. В реальной жизни никто так не строит мосты. Но в Интернете бизнесмены постоянно возводят кривые мосты. И они даже не понимают, что что-то не так.
Что делает мост кривым?

Читать: https://ux.pub/editorial/biznies-tsieli-i-tsieli-polzovatielia-7-printsipov-dostizhieniie-balansa-v-produktie-138p

10 основных навыков современного UI и UX дизайнера

Практические советы по улучшению навыков, необходимых каждому дизайнеру
Дизайнеры часто стремятся сразу перейти к созданию модного интерфейса и добавлению анимации, прежде чем отточить базовые навыки.
Что ж, я постараюсь как можно проще объяснить такие темы, как создание юзабилити теста или идеальной цветовой палитры.

Читать статью: https://ux.pub/editorial/10-osnovnykh-navykov-sovriemiennogho-ui-i-ux-dizainiera-35fg

Как создать масштабируемую дизайн-систему: рассматриваем на примере SaaS-продуктов

Главный вызов для SaaS-продуктов — создание масштабируемого дизайна, который бы отражал рост бизнеса и эволюцию продукта и в то же время адаптировался к изменениям. О том, как справиться с задачей, пойдет речь в статье.

Чтобы создать масштабируемый дизайн продукта, необходимо уметь организовывать время, команду и дизайнерские ресурсы. Для этого и нужна система.
Преимущества дизайн-систем
Эволюция разработки интерфейсов в сторону компонентного подхода (ReactJS, AngularJS) создала потребность в централизованных системах.
Дизайн-система — это набор повторно используемых компонентов с четкими стандартами, которые можно собрать для создания и обновления продуктов, чтобы обеспечить единообразие интерфейсов.
Работы по созданию дизайн-системы можно разделить на две части:

Стандартизация дизайна — определение и создание шаблонов проектирования.
Рекомендации по оформлению — документация, которая объясняет, как использовать компоненты.
Стандартизация дизайна
Любой дизайн начинается с руководства по стилю, которое содержит элементы, формирующие идентичность бренда.
Дизайн-система, как и руководство по стилю, начинается со следующих шагов:
подбора основных цветов и стилей текста,
выбора библиотеки иконок,
определения стандартных стилей для изображений, графиков, иллюстраций и других базовых элементов.
Наиболее популярный подход к созданию дизайн-систем — методология атомарного дизайна, введенная Брэдом Фростом. Она заключается в применении иерархии к элементам пользовательского интерфейса и создании блоков, структурированных как «атомы», «молекулы», «организмы», «шаблоны» и «страницы».

Читать статью: https://vc.ru/design/165569-kak-sozdat-masshtabiruemuyu-dizayn-sistemu-rassmatrivaem-na-primere-saas-produktov

4 способа создать отличный продукт без навыков визуального дизайна

Меня, как дизайнера с более, чем 7-летним стажем, привлекают визуальные эффекты. Я слепо голосую за проекты ProductHunt с красивыми лендингами. Я трачу часы на сохранение шотов Dribbble, которые не имеют практической ценности.
Но, если вы спросите меня, возможно ли создать привлекательные продукты, не обладая навыками визуального дизайна, я неохотно уступлю. Как бы я ни хотел сказать, что хороший визуальный дизайн важен, это не так.

Читать статью: https://ux.pub/editorial/4-sposoba-sozdat-otlichnyi-produkt-biez-navykov-vizualnogho-dizaina-13ki

Как дизайн может изменить сознание потребителя

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

Читать статью: https://vc.ru/design/224348-kak-dizayn-mozhet-izmenit-soznanie-potrebitelya

Инструменты прототипирования

Прототип сайта — это визуальное представление твоего будущего проекта. Создание прототипа может помочь протестировать разные интерфейсы, разные UX решения и гипотезы еще на этапе дизайна, тем самым сэкономив время разработчика и как следствие денег.
В этой подборке я собрал несколько инструментов для создания прототипов, чтобы у тебя всегда была возможность сделать свой дизайн интерактивным и кликабельным.

ProtoPie
https://www.protopie.io/ - пожалуй самая лучшая программа для прототипирования. Несколько видео уроков я сделал для нее и выложил в этой статье: Основы прототипирования в ProtoPie
Wireframe.cc
https://wireframe.cc/ — самый простой сервис, который мне удалось найти. Отлично подходит для создания кратких набросков. Для несложных прототипов этого хватает.
Invision
https://www.invisionapp.com/ — мощный онлайн-сервис, с широким набором функций . Загружаешь артборды и настраиваешь связи в браузере.
Marvel
https://marvelapp.com — по сути в какой-то степени аналог invision. Загружаешь свой дизайн и настраиваешь взаимодействие артбордов.
Moqups
https://moqups.com — в этом сервисе можно создавать не только прототипы, но и карты сайта, диаграммы и т.п.
Balsamiq
https://balsamiq.com/ — интуитивно понятный ресурс для прототипирования. Есть пробная версия с ограниченным функционалом.
Axure
https://www.axure.com/ — хороший инструмент для проектировщиков. Опять же, имеется как пробная версия, так и платная. Так же добавили возможность работать с состояниями.
Ninja Mock
https://ninjamock.com/ - простой сервис для создания быстрых набросков и скетчей.

Источник

Как создать топовую анимацию для любого интерфейса

Почему вообще стоит использовать анимацию в своём интерфейсе? Используя анимацию, вы можете сделать ваш дизайн более интерактивным. Существуют десятки примеров того, когда анимация выводит приложение/сайт на новый уровень.

Читать статью: https://design-glory.com/?p=6834

Искусство продуктового менеджмента. Важность софт скилов

Навыки, составляющие «искусство», в основном делятся на шесть целевых областей:
Коммуникация: возможность общаться и делиться информацией с другими людьми.
Взаимодействие: способность работать с другими людьми и поддерживать их способность работать друг с другом.
Креативность: способность выходить за рамки традиционного и придумывать что-то новое
Критическое мышление: способность анализировать, оценивать и формировать объективное суждение
Любопытство: способность формировать сильное желание узнать неизвестное.
Сознание: способность развивать внутреннюю силу, чтобы ориентироваться, справляться и расти

Подробнее в статье: https://ux.pub/maxman/iskusstvo-produktovogho-mieniedzhmienta-vazhnost-soft-skilov-10e6

Выбор дизайнеров: лучшие шрифты Google на 2022 год

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

К типографике следует подходить с таким же вниманием, как и к любому другому элементу дизайна. Дело не только в том, что шрифты «несут» текст, они также наполняют дизайн определенными психологическими ценностями и передают определенные сообщения, подобно изображениям и цветам. Одни шрифты выражают энергию и оптимизм, другие придают дизайну элегантность или изысканность, третьи романтичны, и, конечно же, существует множество профессиональных и довольно строгих гарнитур. Правильный выбор шрифта обеспечивает согласованность дизайна, а также чрезвычайно важен с точки зрения брендинга и создания эстетической индивидуальности.
Несмотря на то, что существует так много удивительных инди-словолитней создающих всевозможные инновационные и классические шрифты, дизайнеры часто выбирают бесплатные шрифты, которые можно скачать в Интернете. В наши дни существует масса мест, где дизайнер может скачать шрифт, но сегодня мы хотим поговорить о нашем (и всеми) любимом – Google Fonts.
Есть много причин, по которым Google Fonts доминирует над другими бесплатными источниками шрифтов. Во-первых, это Google, и вы знаете, что они очень серьезно относятся ко всему. С Google Fonts дизайнер может быть уверен, что будут учтены все технические детали, например, лицензирование, и их легко добавить на любой сайт благодаря API Google Fonts. Кроме того, Google Fonts представляет собой тщательно подобранную коллекцию шрифтов, которые были проверены, опробованы и протестированы перед размещением их в репозитории. Речь идет о высококачественных шрифтах, которые отлично работают на экранах любого типа и размера. Беда только в том, что их так много, что сложно выбрать. Фактически, вам доступно более 1200 бесплатных семейств шрифтов (и их число продолжает расти, поскольку Google регулярно добавляет новые), поэтому поиск подходящего вашему проекту шрифта может оказаться сложной задачей.
Из-за этого, а также из-за того, что мы действительно увлечены типографикой, мы решили поделиться подборкой, по нашему мнению, самых интересных шрифтов Google на данный момент.

Подробнее в статье: https://ux.pub/editorial/vybor-dizainierov-luchshiie-shrifty-google-na-2022-ghod-mc8

Как использовать и спроектировать полезную всплывающую подсказку

Любая дизайн-система должна включать всплывающую подсказку. Это небольшой текст, который появляется, когда пользователь наводит курсор на элемент интерфейса. Давайте рассмотрим этот компонент подробнее.

Проектирование компонентов для дизайн-системы — одна из обязанностей продуктовых дизайнеров. В некоторых компаниях за эту задачу отвечает отдельная команда. Однако это не всегда так, поэтому нам необходимо спроектировать некоторые компоненты. Чтобы создать новый компонент, нужно подробно изучить его, чтобы он соответствовал потребностям пользователей и системы. Только тогда мы можем быть уверены, что наша дизайн-система содержит полные компоненты. В этой статье я делюсь базовыми знаниями по проектированию всплывающих подсказок. Всплывающие подсказки — это относительно небольшие компоненты, и их довольно легко спроектировать. Однако, прежде необходимо уточнить ряд деталей.

Читать: https://ux.pub/editorial/kak-ispolzovat-i-sproiektirovat-polieznuiu-vsplyvaiushchuiu-podskazku-tooltip-3gm5

Как помочь пользователям принять решение: альтернативный и безальтернативный методы

Перевод и адаптация статьи Kathryn Whitenton для NN Group.

В оригинале методы называются «Compensatory» и «Noncompensatory». Я использую термин «альтернатива», потому что это лучше описывает процесс действий пользователя в этих стратегиях.
Вокруг нас переизбыток выбора. Постоянно надо принимать кучу решений: что надеть, что приготовить на обед, куда пойти отдохнуть. Когда заходишь в большой интернет-магазин, например, в IKEA, иногда хочется закрыть сайт, сесть в уголочек и повторять: «Горшочек, не вари!». Переизбыток выбора действительно может утомить, а иногда и напугать пользователя.

Читать: https://vc.ru/design/174350-kak-pomoch-polzovatelyam-prinyat-reshenie-alternativnyy-i-bezalternativnyy-metody

Как сделать карьеру в UX-дизайне без опыта работы

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

Что нужно знать?
Чтобы знать, с чего начать, поставьте перед собой цель, которую необходимо достичь в течение определенного периода времени. Например, если ваша цель – стать UX-дизайнером в ближайшие шесть месяцев, вы можете посмотреть описания вакансий на таких сайтах, как Linkedin, Indeed и Seek, чтобы понять, что от вас требуется. Однако вы быстро обнаружите, что очень легко упустить из виду то, что важно, поэтому полезно объединить эти ключевые навыки и задачи.

Читать статью:
https://ux.pub/editorial/kak-sdielat-karieru-v-ux-dizainie-biez-opyta-raboty-op2

Искусственный интеллект в дизайне интерфейсов и генеративный дизайн

GPT-3 – это искусственный интеллект, генерирующий текст с помощью Open AI. Это самая крупная языковая модель из когда-либо созданных, и первые эксперименты продемонстрировали ее способность создавать убедительные тексты в различных стилях с учетом нескольких параметров. Что расстраивает еще больше, так это его способность выводить код, который затем можно использовать в инструментах проектирования. Возьмем, к примеру, созданное Джорданом Сингером демо плагина Figma под названием «Designer». Этот плагин может генерировать функциональный прототип из необработанного текста. Сингер описал макет, как «приложение, которое имеет панель навигации с иконкой камеры, заголовок «Фото», иконку сообщения, фид фотографий у каждой из которых есть иконка пользователя, иконка сердца и иконка пузыря чата», и плагин, без каких-либо дополнительных действий, создал макет, похожий на Instagram.

Читать статью: https://ux.pub/editorial/iskusstviennyi-intielliekt-v-dizainie-intierfieisov-i-ghienierativnyi-dizain-c9k

Как сделать сайт продукта, о котором ничего не знаешь на старте — история создания Mission:Luna

Из статьи вы узнаете, как устроена итеративная работа над сайтом стартапа, как мы развивали айдентику в вебе, ломали паттерны HR-сайтов и создавали новые принципы работы с подвижным продуктом.

Максимальная интеграция в команду заказчика позволила быстро реагировать и создать сильный дизайн, не смотря на недостаток контента и условия турбулентности. 

Читать статью: https://vc.ru/design/384064-kak-sdelat-sayt-produkta-o-kotorom-nichego-ne-znaesh-na-starte-istoriya-sozdaniya-mission-luna

Как рассчитать идеальную область клика (touch target) для любого устройства

Мы, люди, взаимодействуем с миром посредством пяти органов чувств. И, возможно, осязание является самым важным из них. Прежде чем мы впервые откроем глаза, услышим первый звук или сделаем первый вдох, мы можем воспринимать мир через прикосновение. Человеческое прикосновение позволяет нам испытывать и боль, и удовольствие.
Мы взаимодействуем с цифровым миром с помощью сенсорных экранов и кликов мышью. С 2011 года глобальное использование мобильных устройств резко возросло с 8% до 56%. Поскольку большинство пользователей взаимодействуют с мобильными экранами посредством касаний, командам UX-дизайнеров необходимо проектировать элементы соответствующего размера.
Когда я впервые начал заниматься UX-дизайном, кто-то сказал мне: «Просто сделай все кнопки высотой 40px». Многие статьи соглашались с этим эмпирическим правилом. Но что, если это кнопка на смарт-часах, а не на ноутбуке? Что, если бы я рисовал на холсте вдвое большего размера? Сделать кнопку высотой 80px?
Давайте проведем эксперимент. Сможете ли вы легко и точно коснуться цели размером 200x200px? Как насчет цели 40x40px? Может 8x8px?

Читать статью: https://ux.pub/dinozavrix/kak-rasschitat-idiealnuiu-oblast-klika-touch-target-dlia-liubogho-ustroistva-54g0