Научный подход для эффективного UX-прототипирования

Почему «быстрого прототипирования» недостаточно для критического влияния на дизайн продукта. Перевод статьи Майкла Доджа, Principal Design Technologist в Alexa Voice Shopping в Amazon

https://awdee.ru/nauchnyj-podhod-dlya-effektivnogo-ux-prototipirovaniya/

#awd_article #awd_ux

Стёпа Гирич написал у нас заметку о гармонии в дизайне транспортных схем

awdee.ru/harmony-in-music-and-transport-scheme-design

#awd_article

Шпаргалка по законам и принципам дизайна интерфейсов

Коротко и простыми словами опишем известные эвристики / законы / принципы, которые нужно знать и применять при разработке дизайна интерфейсов

1. Эффект эстетики в юзабилити: Эстетически приятный дизайн воспринимается как более удобный, маскируя мелкие проблемы юзабилити.

2. Порог Доэрти: Система должна давать обратную связь в течение 400 миллисекунд для повышения продуктивности и удержания внимания пользователей.

3. Закон Фиттса: Время достижения цели прямо пропорционально расстоянию до неё и обратно пропорционально её размеру. Важные элементы должны быть крупными и легкодоступными.

4. Закон Хика: Время принятия решения растет с увеличением количества и сложности вариантов. Упрощайте выбор, разбивая сложные задачи на этапы.

5. Закон Якоба: Пользователи предпочитают, чтобы сайт работал так же, как другие знакомые им сайты. Используйте общепринятые дизайн-паттерны.

6. Закон общего пространства: Элементы в общей области с четкой границей воспринимаются как группа. Используйте границы для визуального группирования.

7. Закон прегнантности: Люди интерпретируют сложные образы как простейшие формы. Стремитесь к простоте и порядку в дизайне.

8. Закон близости: Объекты, расположенные рядом, воспринимаются как группа. Группируйте связанные элементы.

9. Закон подобия: Схожие элементы воспринимаются как целостная группа. Обеспечьте единообразие стиля для связанных элементов.

10. Закон визуальной связности: Визуально связанные элементы воспринимаются как единое целое. Используйте цвета, линии, рамки для группировки.

11. Закон Миллера: Человек может одновременно держать в памяти 7±2 элемента. Группируйте информацию в блоки по 5-9 элементов.

12. Бритва Оккама: Выбирайте простейшее решение из возможных. Удаляйте лишние элементы без ущерба функциональности.

13. Принцип Парето: 80% последствий обусловлены 20% причин. Сосредоточьтесь на функциях, приносящих наибольшую пользу большинству пользователей.

14. Закон Паркинсона: Работа занимает всё отведенное на неё время. Устанавливайте реалистичные сроки для задач.

15. Закон Постеля: Будьте либеральны в том, что принимаете, и консервативны в том, что отправляете. Проявляйте гибкость к действиям пользователей.

16. Эффект серийной позиции: Лучше запоминаются первый и последний элементы в серии. Располагайте ключевые элементы в начале и конце списков.

17. Закон Теслера: В любой системе есть сложность, которую нельзя уменьшить. Стремитесь упростить систему для пользователей, даже если это усложнит разработку.

18. Эффект фон Ресторфф: Отличающийся объект запоминается лучше остальных. Выделяйте важную информацию или ключевые действия.

19. Эффект Зейгарник: Незавершенные задачи запоминаются лучше завершенных. Используйте индикаторы прогресса для сложных задач.

Полную версию с объяснениями и примерами читайте тут: awdee.ru/laws-of-ux

#awd_article #awd_ux

Как выглядит хороший макет

Михаил Озорнин в ответ на заметки Романа Шамина про дизайнеров и фронтов опубликовал часть гайдов своей команды про «хорошо переданный макет». Эти гайды более детально и с примерами описывают, как передавать макеты, как их делать удобными для разработчиков, чтобы они не ошибались и тратили на реализацию меньше времени

mikeozornin.ru/blog/all/what-is-a-good-handoff

#awd_article

Как рисовать эмоции

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

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

Коротко перечислим ключевые рекомендации из статьи:
— Выражение лица можно изменить с помощью размера зрачков и формы бровей
— Губы помогут придать новый оттенок выражению лица. Важно помнить, что рот может двигаться ассиметрично
— В анимации нос двигается синхронно с губами. Главные элементы, которые можно изменить, — кончик и ноздри
— Если лицо персонажа появляется в кадре не крупным планом, то передавайте эмоции персонажа через тело. В этом будут полезны позы и движения — танцы, сжатые кулаки, прыжки, испарина на лбу, гусиная кожа и многое другое
— Мультипликаторы используют в работе FACS — систему, которая связывает каждую эмоцию с тем, какие мышцы в теле за неё отвечают. Это огромная цифровая библиотека с описаниями, фото- и видеообразцами проявления чувств разных людей
— Программы, в которых можно смоделировать конкретную эмоцию или звук, издаваемый персонажем: Adobe Character Animator, Cartoon animation 4, CrazyTalk 8

Статья полностью: skvot.io/ru/blog/kak-risovat-emocii

#awd_article #awd_summary #awd_illustration #awd_edu

Продукт или студия: куда пойти работать дизайнеру, и почему в банках так много платят

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

Читайте: https://awdee.ru/produkt-ili-studiya-kuda-pojti-rabotat-dizajneru-i-pochemu-v-bankah-tak-mnogo-platyat/

(если у вас есть подобный материал, и вы хотите опубликовать его на Оди, пишите @kirillgreen в личку)

#awd_article #awd_ux

Влад Духнов опубликовал у нас колонку, в которой суммировал свой опыт работы в стартапах. Будет полезно всем, кто задумывался об этом

https://awdee.ru/how-to-survive-in-a-sturtup/

#awd_article #awd_career

Армин Хофманн — лидер швейцарского дизайнерского движения середины 20-го века

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

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

Читайте краткую биографию и наслаждайтесь просмотром его лучших работ у нас на сайте: awdee.ru/graficheskij-dizajner-armin-hofmann-kratkaya-biografiya-i-luchshie-raboty

#awd_article #awd_person #awd_retro #awd_poster

Градиенты и работа с ними

Подробная практическая статья Алекса Карозы о том, какие бывают градиенты, как их создавать и готовить к печати.

«Градиенты используются в графическом, интерфейсном и информационном дизайне. Однако они не так просты, как хотелось бы: сложности могут возникнуть уже на этапе создания самого простого градиента и не закончиться даже при выводе на печать. Отдельная боль — столь модные сегодня mesh-градиенты. В этой статье мы расскажем всё, что вы должны знать о градиентах и работе с ними».

skillbox.ru/media/design/gradients

#awd_article #awd_gradient

Эволюция шрифтов

Саша Павленко перевёл для нас статью Кэмерона Чапмена, которая рассказывает об эволюции шрифтов с эпохи Ренессанса до наших дней

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

awdee.ru/typeface-history

#awd_article #awd_history #awd_typo

Дизайн-токены: что это такое, зачем они нужны и какие токены бывают?

Вот наглядный и понятно иллюстрированный материал, который отвечает на эти вопросы: thedesignsystem.guide/what-are-design-tokens

#awd_article #awd_ui