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

Прототип сайта — это визуальное представление твоего будущего проекта. Создание прототипа может помочь протестировать разные интерфейсы, разные 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