fbpx
1

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

Практические советы по улучшению навыков, необходимых каждому дизайнеру

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

Что ж, я постараюсь как можно проще объяснить такие темы, как создание юзабилити теста или идеальной цветовой палитры.

1. Как правильно располагать объекты

Профессия «UX-дизайнер»
7 дней дизайн-перезагрузки
Мощнейние спикеры, самое дружелюбное дизайн-комьнити и желание делать клевый дизайн.
Скидка 10% по промокоду UXPUB
Присоединиться

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

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

Жесткие сетки выравнивают контент по фиксированной вертикальной сетке, а мягкие – определяют пространство между элементами на странице.

Зачем использовать жесткую сетку? Аргументом в пользу жесткой сетки (8px или 4px) является использование прозрачных фоновых блоков с последующим группированием их с элементами переднего плана. С ней легче отслеживать поля и отступы для каждого элемента. Затем мы можем привязать эти контейнеры к сетке, как кусочки пазла.

Зачем использовать мягкую сетку? Аргумент в пользу мягкой сетки заключается в том, что при разработке интерфейса языки программирования не используют ​​структуру сетки, поэтому она не имеет значения. Мягкая сетка не так сильно ограничивает дизайнеров и требует меньше усилий.

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

Зачем проектировать с шагом 8? Вне зависимости от того, какую сетку выбирают дизайнеры, обычно они размещают элементы используя значения кратные 4 или 8 px.

Мы используем магическое число 8, потому что оно правильно отображает нечетные числа. В отличие от 5, например, на устройстве с разрешением 1,5x нечетные числа не будут отображаться правильно.

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

2. Как подобрать идеальную цветовую палитру

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

Цветовые темы должны быть гармоничными, доступными и помогать отличать элементы интерфейса и поверхности друг от друга.

Дизайнеры часто не хотят создавать цветовую палитру с нуля, но это проще, чем можно подумать. Вот мой четырехэтапный процесс создания чистых и эстетичных цветовых палитр:

  1. Выберите цвет бренда (фирменный цвет). Я начинаю с основного цвета, который определяю на основе бренда, личных предпочтений (если это побочный проект), исследований или психологии цвета.
  2. Выберите системные цвета. Определите цвет для различных элементов, таких как фон, текст, ошибка, успех и т. д.
  3. Создание палитры из базовых цветов. После того, как я выбрал базовые цвета для бренда и интерфейса, я поместил их в Google color tool, чтобы получить разные оттенки этого цвета.
  4. Обеспечьте доступность. Web Content Accessibility Guidelines рекомендуют коэффициент цветового контраста не менее 4,5: 1 между любым текстом и фоном. Загрузите плагин Stark, чтобы проверить доступность палитр (они должны быть созданы с помощью инструмента цвета Google).

3. Как создать руководство по системе пропорций шрифтов

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

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

Если вы не хотите создавать рекомендации по типографике с нуля, попробуйте Material type scale generator для создания размеров шрифтов для абзацев, заголовков, кнопок и т. д. Чтобы создать рекомендации по масштабированию шрифтов для проекта интерфейса, вот как я это делаю:

  1. Выберите шрифт. Я люблю выбирать высококачественные гарнитуры для интерфейса среди шрифтов Googleили Adobe.
  2. Избегайте использовать более двух шрифтов. Вместо того чтобы добавлять в интерфейс новые шрифты, используйте семейства шрифтов. Шрифты из одного семейства предназначены для совместной работы, поэтому они гибкие и согласованные.
  3. Установите базовый размер шрифта. Я начинаю с определения наиболее часто используемой шкалы шрифтов для основного текста и определяю подходящую высоту строки.
  4. Высота строки. Как показывает практика, высота строки должна быть в 1,5 раза больше размера шрифта. Это не всегда так, но начните с такого значения, а затем при необходимости корректируйте его.
  5. Определите шкалу. Шкала обеспечивает последовательность, ритм и иерархию, потому что она предсказуема. Чтобы установить шкалу шрифта для заголовков h1, h2, h3, основного текста, кнопок и т. д., нам нужно значение масштаба, умноженное на базовый размер шрифта. Обычные шкалы для шрифта: 1.250x, 1.414x, 1.5x, 1.618x.
  6. Тестируйте вес шрифта на устройствах. Протестируйте шрифт с разными масштабами на разных размерах устройств, чтобы выбрать подходящее значение.

4. Как создать идеальное кейс-стади

Ознакомьтесь с созданным мной шаблоном кейс-стади – View Figma.

Ритуал составления комплексного тематического исследования по завершении дизайн-проекта – это сам по себе дизайн-проект.

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

Вот формат, который я использую для тематических исследований:

Вступление

  1. Обзор. Дайте подробное описание проекта.
  2. Клиент. Кто был заказчиком? Для кого было создано решение?
  3. Роль. Какова была ваша роль в проекте? (например, ведущий UX дизайнер)
  4. Продолжительность. Как долго длился проект?
  5. Инструменты. Перечислите инструменты, которые вы использовали в проекте. (т.е. XD, Whimsical и т.д).

Определение проблемы

  1. Гипотеза. Укажите, какая проблема была выдвинута гипотезой, что привело к запуску проекта.
  2. Составьте формулировку проблемы. Всего в одном предложении опишите проблему, которую вы хотите решить с помощью своего дизайна.
  3. Открытие. Это первоначальное подтверждение нашей гипотезы. На этапе открытия мы исследуем проблему и находим существующие решения и возможности для улучшения.

Тестирование

  1. Интервью. Если предположить, что на этапе открытия были обнаружены потенциальные возможности, то теперь пора опросить потенциальных клиентов. Обозначьте количество респондентов или участников опроса, возрастной диапазон (если применимо), пол (если применимо) и продолжительность интервью.
  2. Цели. Укажите различные открытия, которые пытались сделать во время интервью.

Идеи и возможности

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

Решение

  1. Сформулируйте решение. Заявление о решении, в котором описывается, как дизайн решит основные проблемы, с которыми сталкиваются люди.

Проектирование

  1. Принципы дизайна. Какими принципами вы руководствовались при принятии дизайн-решений?
  2. MVP. Покажите минимально жизнеспособное решение, которое вы создали для решения вышеупомянутых проблем и возможностей.
  3. Сбор фидбека. Как вы собирали отзывы о MVP? (например, пользовательское тестирование, hotjar, аналитика Google, опросы и т. д.)
  4. Тестирование идей. Опишите выводы, полученные в результате тестирования дизайна. Процитируйте пользователей.
  5. Новая итерация в ответ на полученный фидбек. Процесс проектирования по своей сути является итеративным и непрерывным, поэтому мне нравится заканчивать тематические исследования обновленными дизайнами, основанными на первоначальных отзывах

Вывод

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

5. Как написать эффективный UX текст

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

  • Пишите весь текст сразу. Может возникнуть соблазн писать текст по ходу, в процессе проектирования продукта, но это часто может привести к смешанным тонам и отсутствию согласованности в сообщениях. Создайте один документ для всех предупреждений, сообщений, модальных окон, поясняющего текста и т. д.
  • Будьте кратким и любезным. Скорее всего, в UX-тексте есть какие-то мелочи, от которых можно легко избавиться. Вместо того, чтобы сказать: «Только члены Premium подписки имеют доступ к этой функции», скажите: «Присоединяйтесь к Premium, чтобы получить доступ».
  • Будьте последовательны. Обращаясь к пользователю, обязательно придерживайтесь первого или второго лица, в зависимости от того, что вы выбрали ранее. Поэтому вместо «изменить свое местоположение в моей учетной записи» скажите «измените свое местоположение в учетной записи».
  • Избегайте жаргона. Если только мы не проектируем приложение для экспертов. Избегайте отраслевых терминов, таких как «буферизация» или «конфигурирование».
  • Пишите в настоящем времени. Вместо того чтобы написать: «сообщение было отправлено» (message has been sent), напишите «сообщение отправлено» (message sent).
  • Начните с цели. Когда фраза описывает цель и действия, необходимые для ее достижения, начните предложение с цели. Вместо того, чтобы написать: «Перетащите фотографию в корзину, чтобы удалить ее из этого альбома», скажите: «Чтобы удалить фотографию из этого альбома, перетащите ее в корзину».

6. Критика дизайна

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

Незнание основных навыков фидбека приводит к тому, что клиенты дают расплывчатую и бесполезную обратную связь, например: «Вы можете сделать это модным?»

Чтобы обеспечить эффективный фидбек, мы можем сделать следующее:

  • Мы должны четко и конкретно излагать мысль. «Изображения, которые вы использовали на странице вакансий, не соответствуют нашей культуре. Давайте покажем веселую и непринужденную графику, для улучшения взаимодействия с кандидатами, которых мы надеемся привлечь». Такой фидбек намного полезнее, чем «добавьте на страницу картинки поприкольнее».
  • Представьте дизайнеру проблему, а не только ее решение. На первый взгляд может показаться, что мы знаем решение, и просим дизайнера «лучше используйте эту картинку для страницы вакансий». Однако, когда мы начинаем с представления проблемы, дизайнер может понять, почему мы хотим изменить графику, и может предложить идеи, которые мы, возможно, даже не рассматривали.
  • Приводите качественные примеры. Всегда полезно делиться образцами от других компаний или дизайнами, которые мы нашли. Не потому, что дизайнер должен их скопировать, а потому что это поможет понять, как можно улучшить дизайн.
  • Не забывайте о комплиментах. Поскольку дизайнеры получают список комментариев, исправлений, проблем и т. д. им может быть весьма непросто. Обязательно сбалансируйте фидбек, выделив те части опыта, которые, по нашему мнению, действительно хорошо работают. Например, «Мне очень нравится, как вы разместили экран приветствия – он отлично перетекает с предыдущего экрана. Однако мне потребовалась секунда, чтобы заметить кнопку входа в систему. Мы можем сделать ее более заметной? “
  • Тон имеет значение. То, как мы представляем фидбек и формулируем мысль, может сильно повлиять на то, как дизайнеры (или люди в целом) отреагируют на него. Вместо того, чтобы сказать: «Эта иконка не годится для пункта «Доставка», скажите: «Иконка доставки сбивает меня с толку. Я привык к иконке в виде посылки. Разве это не лучший вариант?»

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

Для сбора результатов можно использовать множество различных методов пользовательского тестирования. К наиболее распространенным вариантам относятся: тестирование юзабилити, сортировка карточек, древовидный тест, A / B-тестирование и опросы фидбека. Чтобы разобраться в различных вариантах тестирования, я рекомендую прочитать «Методологии количественного исследования пользователей».

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

Определите цель

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

Напишите простое утверждение, например: «Узнать, является ли процесс онбординга лучшим опытом для привлечения новых пользователей».

1. Гипотеза

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

2. Отсеивающие вопросы

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

Например, если мы тестируем приложение для тренировок, мы можем задать такие вопросы, как «используете ли вы в настоящее время какие-либо приложения для тренировок?» или «вы регулярно занимаетесь спортом?» Если пользователи ответят на эти вопросы «нет», то они не подходят и не могут продолжить наш тест.

3. Сценарии

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

4. Задачи и вопросы для каждого сценария

  • Начальный – соберите ожидания тестировщика и объясните сценарий.
  • Вопросы и задания – объясните задачи, которые необходимо выполнить, и определите вопросы, которые будут задаваться на протяжении всего теста.
  • Заключительные вопросы – спросите, насколько полученный опыт отличается от их ожиданий. Это может помочь увидеть, что им понравилось, что не понравилось, что их смутило, и что они думали в конце теста.

5. Финальная анкета

Соберитесь с мыслями и задайте последние вопросы, чтобы связать все сценарии вместе. Какой вариант они предпочли? Как бы вы оценили каждый опыт по шкале от 1 до 5? Не забудьте снова показать визуальные эффекты, чтобы напомнить тестировщикам о каждом сценарии.

6. Результаты

Вот несколько советов по получению наилучших результатов удаленного тестирования пользователей:

  • Не все пользователи технически подкованы, поэтому крайне важно создавать тесты, не требующие выполнения слишком сложных задач.
  • Задавайте подробные контрольные вопросы, чтобы убедиться, что мы получим подходящих тестировщиков. Или еще лучше, выбирайте собственных пользователей или целевых клиентов.
  • Всегда используйте упрощенные формулировки, а не технические термины.
  • Согласно данным Neilson Norman Group, нам нужно протестировать всего 5 пользователей, чтобы выявить 85% проблем юзабилити.
10 основных навыков современного UI и UX дизайнера

8. Как проектировать для разработки

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

Ряд шагов для обеспечения беспрепятственной передачи проекта разработчикам:

  • Рассмотрите возможность повторного использования паттернов, если только уникальный дизайн не добавляет реальной ценности. В процессе проектирования мы должны проверять дизайн при введении новых соглашений, элементов, анимации и т. д. Если они не приносят дополнительной пользы для пользователя, их следует пересмотреть. Кнопки, макеты экрана, юзерфлоу и т. д. следует использовать как можно чаще для единообразия и экономии времени.
  • Воспользуйтесь преимуществами таких инструментов совместной работы, как Zeplin, для создания фрагментов кода, проверки, простой загрузки активов и многого другого. Figma, InVision, Adobe или Marvel также неплохо справляются с этой задачей.
  • Избегайте введения новых, ненужных функций. Не добавляйте функции, которые усложнят процесс разработки и не принесут дополнительной пользы приложению. Сосредоточение внимания на бизнес-целях, потребностях пользователей, масштабах проекта, сроках и способах разработки продуктов поможет определить приоритетность функций.
  • Организуйте все экраны в разделы в Zeplin и файле дизайна.
  • Назовите все артборды последовательно для облегчения поиска и понимания.
  • Отметьте активы для экспорта.
  • Храните архив старых экранов и убедитесь, что все новые экраны обновлены.

9. Как делать вайрфреймы с низкой детализацией

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

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

Простота помогает сосредоточиться на общем опыте и не отвлекаться на мелкие детали, такие как интервалы и цвета.

10. Как каждый день становиться лучше.

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

Вот несколько вещей, которые я сделал, чтобы улучшить свои дизайнерские навыки:

  • Побочные проекты. Побочные проекты – вот что в первую очередь развило мой интерес к продуктовому дизайну. Если мы полагаемся исключительно на работу, предоставляемую работодателем, то мы ограничиваем свой потенциал роста. Если у вас есть свободное время по вечерам и в выходные, попробуйте проработать идею, которая вам нравится. Сайд-проекты отлично подходят для портфолио и демонстрируют аутентичные дизайнерские работы без вмешательства клиента.
  • Обращайте внимание на детали. Легко бездумно использовать приложения или проходить цифровой опыт, не задумываясь о них. Часто лучший дизайн остается незамеченным. Как дизайнеры, мы должны отметить дизайн-решения, принимаемые известными брендами и продуктами.
  • Проходите собеседование, даже если вы довольны текущей работой. Собеседования в других компаниях могут многое рассказать о пробелах в наших знаниях или о том, какие навыки востребованы в настоящее время. Тестовые задания также могут быть отличным упражнением, чтобы напрячь наши творческие мускулы и решить интересные задачи.
  • Прочтите документацию по дизайн-системам. Чтение проектной документации популярных дизайн-систем – надежный способ получить больше тактических UI / UX знаний. К моим любимым дизайн-системам относятся IBM Carbon,Zendesk GardenWorkday CanvasAtlassian, и Material.
0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Использование Sketch для адаптивного веб-дизайна (детальный анализ)
Подробнее

Адаптивный дизайн в Sketch, детальный анализ

Если вы принадлежите к сообществу дизайнеров веб-интерфейсов, в последний год вы вряд ли избежали обсуждений Sketch, так как этот продукт у всех был на слуху. Запуск этого дизайнерского приложение встряхнул индустрию, в которой более 20 лет господствовал Adobe. Возникли длительные дебаты насчет того, что лучше – Sketch или Photoshop и Illustrator (и Fireworks), а также в чем лучше создавать адптивный дизайн.
Total
15
Share