5 умирающих трендов в графическом дизайне
1. Неоморфизм как вариант скевоморфизма
Почему это умирающий тренд:
- низкая функциональность;
- неудобно использовать мобильное устройство вне помещения;
- недоступность для людей с нарушениями зрения.
Неоморфизм, – пожалуй, самый молодой тренд в этом списке. Эксперты предсказывали ему большое будущее в 2020 году, отмечая визуальную изысканность, благородную сдержанность (в частности наличие небольшого количества цветов) и возможность имитировать визуальный опыт из реального мира.
Что же пошло не так? Оказалось, минималистичный неоморфизм сложно использовать в продуктовом дизайне или создании айдентики из-за его мягких теней, низкой контрастности и очень ограниченной цветовой палитры. У людей с нарушениями зрения возникают сложности с таким дизайном. Кроме того, нужно больше времени, чтобы привыкнуть к навигации, поскольку в этом случае интерактивные элементы не сильно отличаются от остального дизайна.
2. Классические плоские или трехмерные иллюстрации
Почему это умирающий тренд: безличность.
Сначала в тренде были милые 2D-иллюстрации. Обычно их создавали в формате векторов, что позволяло перекрашивать картинки в зависимости от ваших фирменных цветов или дизайна сайта. Эти изображения стали альтернативой фотографиям: они оказались хорошим решением для адаптивного дизайна за счет меньшей детализации и легкости масштабирования. Кроме того, двухмерные иллюстрации позволяли экономить ресурсы пользовательских устройств и ускорить загрузку сайта.
Если вы хотите выгодно отличаться, выбирайте оригинальные иллюстрации и откажитесь от визуальных метафор, которые превратились в клише.
3. Закругленные углы и органические формы
Почему это умирающий тренд:
- затрудняет понимание иерархии элементов страницы;
- чрезмерное использование запутывает пользователей и приводит к более высокому проценту отказов.
С психологической точки зрения большинство людей положительно реагируют на округлые органические формы как в реальном мире, так и в цифровых интерфейсах. Причина в том, что закругленные углы кажутся нам безопасными по сравнению с острыми углами и линиями.
К сожалению, в наши дни этой особенностью человеческого восприятия часто злоупотребляют, убирая из дизайна сайтов и приложений все возможные четкие линии и углы. Такой подход создает визуальный беспорядок и не дает пользователям понять, как перемещаться по странице.
4. Неестественно яркие цвета и фильтры, которые усиливают контраст
Почему это умирающий тренд:
создает визуальный беспорядок при чрезмерном использовании;
снижает лояльность клиентов, поскольку все выглядит нереалистично;
глаза пользователей быстро устают, что приводит к более высокому показателю отказов.
Яркие объекты на экране легко обращают на себе внимание, а фотографии или иллюстрации с теплыми и контрастными цветами выглядят более привлекательно, чем изображения с холодными и приглушенными оттенками.
Альтернативой могут стать более естественные цвета, вдохновленные природой, которые дарят ощущение спокойствия во время интернет-серфинга. Также нужно обратить внимание на пару оттенков, которые Pantone объявили цветами 2021 года, и главный оттенок от Dulux – Brave Ground.
5. Темная тема и пользовательские фоны
Почему это умирающий тренд:
- для чтения светлых букв на темном фоне требуется больше времени;
- не нужен вне мобильного дизайна;
- интерфейсы с темной темой сложно использовать в солнечную погоду.
Существует два подхода к использованию темных тем в дизайне сайтов и приложений. Некоторые дизайнеры создают темный режим, чтобы сделать продукт более гибким и удобным. Пользователи могут перейти на него или настроить автоматическое переключение, чтобы не беспокоить других людей ночью светом своих экранов. Темный режим также используется, чтобы повысить энергоэффективность мобильных устройств.
Многие веб-сайты возвращаются сейчас к белому фону. Темный режим остается там, где он действительно пригодился.
Источник
1. Неоморфизм как вариант скевоморфизма
Почему это умирающий тренд:
- низкая функциональность;
- неудобно использовать мобильное устройство вне помещения;
- недоступность для людей с нарушениями зрения.
Неоморфизм, – пожалуй, самый молодой тренд в этом списке. Эксперты предсказывали ему большое будущее в 2020 году, отмечая визуальную изысканность, благородную сдержанность (в частности наличие небольшого количества цветов) и возможность имитировать визуальный опыт из реального мира.
Что же пошло не так? Оказалось, минималистичный неоморфизм сложно использовать в продуктовом дизайне или создании айдентики из-за его мягких теней, низкой контрастности и очень ограниченной цветовой палитры. У людей с нарушениями зрения возникают сложности с таким дизайном. Кроме того, нужно больше времени, чтобы привыкнуть к навигации, поскольку в этом случае интерактивные элементы не сильно отличаются от остального дизайна.
2. Классические плоские или трехмерные иллюстрации
Почему это умирающий тренд: безличность.
Сначала в тренде были милые 2D-иллюстрации. Обычно их создавали в формате векторов, что позволяло перекрашивать картинки в зависимости от ваших фирменных цветов или дизайна сайта. Эти изображения стали альтернативой фотографиям: они оказались хорошим решением для адаптивного дизайна за счет меньшей детализации и легкости масштабирования. Кроме того, двухмерные иллюстрации позволяли экономить ресурсы пользовательских устройств и ускорить загрузку сайта.
Если вы хотите выгодно отличаться, выбирайте оригинальные иллюстрации и откажитесь от визуальных метафор, которые превратились в клише.
3. Закругленные углы и органические формы
Почему это умирающий тренд:
- затрудняет понимание иерархии элементов страницы;
- чрезмерное использование запутывает пользователей и приводит к более высокому проценту отказов.
С психологической точки зрения большинство людей положительно реагируют на округлые органические формы как в реальном мире, так и в цифровых интерфейсах. Причина в том, что закругленные углы кажутся нам безопасными по сравнению с острыми углами и линиями.
К сожалению, в наши дни этой особенностью человеческого восприятия часто злоупотребляют, убирая из дизайна сайтов и приложений все возможные четкие линии и углы. Такой подход создает визуальный беспорядок и не дает пользователям понять, как перемещаться по странице.
4. Неестественно яркие цвета и фильтры, которые усиливают контраст
Почему это умирающий тренд:
создает визуальный беспорядок при чрезмерном использовании;
снижает лояльность клиентов, поскольку все выглядит нереалистично;
глаза пользователей быстро устают, что приводит к более высокому показателю отказов.
Яркие объекты на экране легко обращают на себе внимание, а фотографии или иллюстрации с теплыми и контрастными цветами выглядят более привлекательно, чем изображения с холодными и приглушенными оттенками.
Альтернативой могут стать более естественные цвета, вдохновленные природой, которые дарят ощущение спокойствия во время интернет-серфинга. Также нужно обратить внимание на пару оттенков, которые Pantone объявили цветами 2021 года, и главный оттенок от Dulux – Brave Ground.
5. Темная тема и пользовательские фоны
Почему это умирающий тренд:
- для чтения светлых букв на темном фоне требуется больше времени;
- не нужен вне мобильного дизайна;
- интерфейсы с темной темой сложно использовать в солнечную погоду.
Существует два подхода к использованию темных тем в дизайне сайтов и приложений. Некоторые дизайнеры создают темный режим, чтобы сделать продукт более гибким и удобным. Пользователи могут перейти на него или настроить автоматическое переключение, чтобы не беспокоить других людей ночью светом своих экранов. Темный режим также используется, чтобы повысить энергоэффективность мобильных устройств.
Многие веб-сайты возвращаются сейчас к белому фону. Темный режим остается там, где он действительно пригодился.
Источник
vc.ru
5 умирающих трендов в графическом дизайне по версии Depositphotos — Дизайн на vc.ru
Команда фотобанка выпустила материал об антитрендах в графическом дизайне. В статье Depositphotos делятся мыслями о том, что теряет актуальность и объясняют почему так происходит.
15 психологических принципов, которые должен знать каждый дизайнер
1. Эффект эстетики-юзабилити
Эффект эстетики-юзабилити предполагает, что люди приравнивают более привлекательные интерфейсы к более удобным для использования. Другими словами, хороший, современный, адаптивный дизайн всегда должен быть вашей отправной точкой.
2. Психология цвета
Психология цвета говорит нам о влиянии цвета на восприятие чего-либо. Любой цвет связан с эмоциями, и выбором правильной палитры вы можете управлять тем, как посетители воспринимают ваш дизайн.
3. Психология форм
Как цвет может влиять на восприятие бренда или контента, так и отдельные формы, используемые в интерфейсе. Каждая форма – круги, квадраты, треугольники, шестиугольники и многоугольники – несут уникальную психологическую ассоциацию.
4. Принцип гештальта
Принципы гештальта (образов и шаблонов) позволяют людям разобраться в хаотических данных: вместо того, чтобы видеть кучу текста, изображений и пространства, человеческий мозг распознает шаблоны, упрощающие сложность.
5. Закон Якоба
Принцип знакомства, предполагает, что люди с большей вероятностью будут отдавать предпочтение вещам, которые кажутся знакомыми. Закон Якоба применяет эту психологию конкретно к пользовательскому опыту в интернете.
6. Эффект фон Ресторф
Если человеку показывать одинаковые элементы, а потом предложить уникальный – он выберет именно уникальный элемент.
7. Избирательное пренебрежение
Избирательное пренебрежение – это своего рода «слепота», которая развивается у пользователя ко всему, что не имеет отношения к основной цели. Это часто происходит, когда тенденция дизайна или маркетинга устаревает – например, сайты, использующие один и тот же баннер согласия на использование файлов cookie. Люди на автомате кликают ок, не вчитываясь.
8. Закон Хика
Он гласит: чем больше у человека вариантов, из которых он может выбирать, тем больше времени уйдет на принятие решения. Это фундаментальный принцип, на который следует обращать внимание в проектах, связанных с коммерцией: вам нужно ускорить процесс принятия решений, а не замедлить его.
9. Неприятие потерь
Выбор человека обусловлен не потенциальной выгодой, а избеганием потерь. Например, как это работает в жизни. Есть два магазина: подороже, но приятный, и дешевый и ужасный. Люди часто покупают в магазине, который им нравится – даже если там дороже, чем у конкурентов. Такой же принцип работает и во всем дизайне.
10. Парадокс выбора
Парадокс выбора – это ответ на проблему, поставленную законом Хика. Парадокс говорит о том, что сокращение выбора заставляет потребителей чувствовать меньше беспокойства, что, в свою очередь, увеличивает уверенность и удовлетворенность покупками.
11. Закон Миллера
Закон Миллера, также называемый теорией когнитивной нагрузки, связан с объемом памяти. В среднем в любой момент времени в рабочей памяти человека может храниться не более семи элементов. То есть чтобы улучшить концентрацию внимания и возможность принятия решений, нужно сокращать варианты.
12. Обратная связь
Обратная связь – один из принципов обучения, который играет большую роль в дизайне. Здесь имеется в виду обратная связь от авторов или продукта. Дизайнеры используют фидбэк, чтобы сообщить людям, когда они достигли или продвинулись к цели.
13. Внешняя мотивация
Человеком движут две мотивации – внешняя и внутренняя. Именно мотивация «со стороны» побуждает пользователей выполнять больше задач в интернете. Как дизайнер, вы должны убедиться, что такие «награды» очевидны.
14. Социальное доказательство
Не столько психологический принцип, сколько психологический феномен – социальное доказательство (или влияние) предполагает, что люди будут копировать действия масс. Люди выбирают те продукты, которые рекомендует социум – ваша задача показать эти рекомендации.
15. Правило пика и конца
Правило гласит, что люди судят об опыте взаимодействия по первым и последним впечатлениям от него. Точно так же люди запоминают первый и последний элементы в группе.
Источник
1. Эффект эстетики-юзабилити
Эффект эстетики-юзабилити предполагает, что люди приравнивают более привлекательные интерфейсы к более удобным для использования. Другими словами, хороший, современный, адаптивный дизайн всегда должен быть вашей отправной точкой.
2. Психология цвета
Психология цвета говорит нам о влиянии цвета на восприятие чего-либо. Любой цвет связан с эмоциями, и выбором правильной палитры вы можете управлять тем, как посетители воспринимают ваш дизайн.
3. Психология форм
Как цвет может влиять на восприятие бренда или контента, так и отдельные формы, используемые в интерфейсе. Каждая форма – круги, квадраты, треугольники, шестиугольники и многоугольники – несут уникальную психологическую ассоциацию.
4. Принцип гештальта
Принципы гештальта (образов и шаблонов) позволяют людям разобраться в хаотических данных: вместо того, чтобы видеть кучу текста, изображений и пространства, человеческий мозг распознает шаблоны, упрощающие сложность.
5. Закон Якоба
Принцип знакомства, предполагает, что люди с большей вероятностью будут отдавать предпочтение вещам, которые кажутся знакомыми. Закон Якоба применяет эту психологию конкретно к пользовательскому опыту в интернете.
6. Эффект фон Ресторф
Если человеку показывать одинаковые элементы, а потом предложить уникальный – он выберет именно уникальный элемент.
7. Избирательное пренебрежение
Избирательное пренебрежение – это своего рода «слепота», которая развивается у пользователя ко всему, что не имеет отношения к основной цели. Это часто происходит, когда тенденция дизайна или маркетинга устаревает – например, сайты, использующие один и тот же баннер согласия на использование файлов cookie. Люди на автомате кликают ок, не вчитываясь.
8. Закон Хика
Он гласит: чем больше у человека вариантов, из которых он может выбирать, тем больше времени уйдет на принятие решения. Это фундаментальный принцип, на который следует обращать внимание в проектах, связанных с коммерцией: вам нужно ускорить процесс принятия решений, а не замедлить его.
9. Неприятие потерь
Выбор человека обусловлен не потенциальной выгодой, а избеганием потерь. Например, как это работает в жизни. Есть два магазина: подороже, но приятный, и дешевый и ужасный. Люди часто покупают в магазине, который им нравится – даже если там дороже, чем у конкурентов. Такой же принцип работает и во всем дизайне.
10. Парадокс выбора
Парадокс выбора – это ответ на проблему, поставленную законом Хика. Парадокс говорит о том, что сокращение выбора заставляет потребителей чувствовать меньше беспокойства, что, в свою очередь, увеличивает уверенность и удовлетворенность покупками.
11. Закон Миллера
Закон Миллера, также называемый теорией когнитивной нагрузки, связан с объемом памяти. В среднем в любой момент времени в рабочей памяти человека может храниться не более семи элементов. То есть чтобы улучшить концентрацию внимания и возможность принятия решений, нужно сокращать варианты.
12. Обратная связь
Обратная связь – один из принципов обучения, который играет большую роль в дизайне. Здесь имеется в виду обратная связь от авторов или продукта. Дизайнеры используют фидбэк, чтобы сообщить людям, когда они достигли или продвинулись к цели.
13. Внешняя мотивация
Человеком движут две мотивации – внешняя и внутренняя. Именно мотивация «со стороны» побуждает пользователей выполнять больше задач в интернете. Как дизайнер, вы должны убедиться, что такие «награды» очевидны.
14. Социальное доказательство
Не столько психологический принцип, сколько психологический феномен – социальное доказательство (или влияние) предполагает, что люди будут копировать действия масс. Люди выбирают те продукты, которые рекомендует социум – ваша задача показать эти рекомендации.
15. Правило пика и конца
Правило гласит, что люди судят об опыте взаимодействия по первым и последним впечатлениям от него. Точно так же люди запоминают первый и последний элементы в группе.
Источник
Сей-Хай
15 психологических принципов, которые должен знать каждый дизайнер – Сей-Хай
Работая с клиентом, можно часто повестись на простой ход: принять все, что он говорит, за чистую монету. Правда, клиент не всегда точно понимает, кто его
Многоязычное проектирование UI
Многоязычное проектирование для нескольких языков оказало влияние на то, какие проектные решения я принимаю, независимо от того, на каком языке находится продукт. Вопросы, затронутые в этой статье, основаны на некоторых проблемах, с которыми я столкнулся при разработке существующего и функционирующего продукта, переведенного на несколько языков.
Этап создания продукта может играть важную роль в дизайне. Проектирование уже существующего продукта имеет свой собственный набор уникальных проблем и ограничений (не всегда оказывающих негативное влияние), которые действительно помогают думать о том, что важно.
Независимо от разработки продукта дизайн – это решение проблем. Псевдо-локализация в Netflix – это отличное чтиво о том, как Netflix подошел к разработке своего UI для нескольких языков.
Существует много факторов играющих роль в выборе дизайна, среди которых некоторые могут быть лучше, а некоторые – наоборот. Моменты, затронутые в этой статье, могут показаться очень распространенными, однако они могут легко остаться незамеченными или проигнорированными, пока что-то не пойдет не так.
Сломанный UI – отправная точка
Все шло гладко до тех пор, пока новый язык, хорошо известный длинными словами, не был добавлен в продукт, в котором до него был только английский. Немецкий напрочь ломал весь пользовательский интерфейс. Невероятное открытие, которое заставило мыслить иначе при выборе дизайна.
Из-за сломанного UI нам пришлось переосмыслить подход к макету, элементам и тексту в дизайне, чтобы оставить его согласованным для всех языков. Изменение размера шрифта только для того, чтобы приспособиться к новому языку, на самом деле не очень хороший подход. У нас не хватало времени и ресурсов, которые не допускали больших изменений в дизайне – эффект домино: когда вы изменяете одно, это влияет на другое. Этот инцидент привел в действие более масштабный план переоценки информационной архитектуры для будущих итераций.
Иерархия – определение приоритетов
Использование системы проектирования при создании UIS может помочь сохранить согласованность и ускорить рабочий процесс, но эти системы не всегда доступны. В таких случаях в качестве ориентира может выступать построение иерархии и определение приоритетов элементов. В идеале этот выбор должен учитывать, как все они вписываются в общую картину.
Какова цель этого экрана и что вы хотите, чтобы пользователь сделал? Почему? Это вовсе не означает убирать определенные элементы или скрывать их намеренно для достижения желаемой цели, а речь идет больше о создании визуальной иерархии между всеми элементами внутри экрана для направления пользователя к желаемой цели.
Думая о содержании, первичных, вторичных и третичных действиях, можно сузить выбор дизайна. В то время нам не хватало третичных действий – мы были слишком сосредоточены на попытках поддерживать единообразный внешний вид – слишком сосредоточены на эстетическом поддержании «баланса», когда два действенных элемента фактически не принадлежали одной и той же иерархии.
Простым примером могут быть кнопки «отменить» и «отправить» в форме заявки. Если они сообщаются почти одинаково, это, скорее всего, введет пользователя в заблуждение. Если цель — отправить форму – зачем продвигать отмену формы? Это не поможет направить пользователя к желаемому действию. Если в этой форме будет указано «Сохранить на потом» – это может изменить правила игры. Будет ли тогда «отправить» первичным действием, «отложить на потом» вторичным действием и «отменить» третичным? Все зависит от целей и приоритетов.
Сломанный пользовательский интерфейс заставил нас понять, что дизайн на самом деле не учитывает приоритеты или иерархию общения. Пришло время переосмыслить дизайн и расположение элементов в макете с целью установления иерархии. Мы превратили два основных действия в первичное и третичное. Пользовательский интерфейс для экрана не сломался с новым дизайном и был намного более гибким, чем раньше.
Читать далее
Многоязычное проектирование для нескольких языков оказало влияние на то, какие проектные решения я принимаю, независимо от того, на каком языке находится продукт. Вопросы, затронутые в этой статье, основаны на некоторых проблемах, с которыми я столкнулся при разработке существующего и функционирующего продукта, переведенного на несколько языков.
Этап создания продукта может играть важную роль в дизайне. Проектирование уже существующего продукта имеет свой собственный набор уникальных проблем и ограничений (не всегда оказывающих негативное влияние), которые действительно помогают думать о том, что важно.
Независимо от разработки продукта дизайн – это решение проблем. Псевдо-локализация в Netflix – это отличное чтиво о том, как Netflix подошел к разработке своего UI для нескольких языков.
Существует много факторов играющих роль в выборе дизайна, среди которых некоторые могут быть лучше, а некоторые – наоборот. Моменты, затронутые в этой статье, могут показаться очень распространенными, однако они могут легко остаться незамеченными или проигнорированными, пока что-то не пойдет не так.
Сломанный UI – отправная точка
Все шло гладко до тех пор, пока новый язык, хорошо известный длинными словами, не был добавлен в продукт, в котором до него был только английский. Немецкий напрочь ломал весь пользовательский интерфейс. Невероятное открытие, которое заставило мыслить иначе при выборе дизайна.
Из-за сломанного UI нам пришлось переосмыслить подход к макету, элементам и тексту в дизайне, чтобы оставить его согласованным для всех языков. Изменение размера шрифта только для того, чтобы приспособиться к новому языку, на самом деле не очень хороший подход. У нас не хватало времени и ресурсов, которые не допускали больших изменений в дизайне – эффект домино: когда вы изменяете одно, это влияет на другое. Этот инцидент привел в действие более масштабный план переоценки информационной архитектуры для будущих итераций.
Иерархия – определение приоритетов
Использование системы проектирования при создании UIS может помочь сохранить согласованность и ускорить рабочий процесс, но эти системы не всегда доступны. В таких случаях в качестве ориентира может выступать построение иерархии и определение приоритетов элементов. В идеале этот выбор должен учитывать, как все они вписываются в общую картину.
Какова цель этого экрана и что вы хотите, чтобы пользователь сделал? Почему? Это вовсе не означает убирать определенные элементы или скрывать их намеренно для достижения желаемой цели, а речь идет больше о создании визуальной иерархии между всеми элементами внутри экрана для направления пользователя к желаемой цели.
Думая о содержании, первичных, вторичных и третичных действиях, можно сузить выбор дизайна. В то время нам не хватало третичных действий – мы были слишком сосредоточены на попытках поддерживать единообразный внешний вид – слишком сосредоточены на эстетическом поддержании «баланса», когда два действенных элемента фактически не принадлежали одной и той же иерархии.
Простым примером могут быть кнопки «отменить» и «отправить» в форме заявки. Если они сообщаются почти одинаково, это, скорее всего, введет пользователя в заблуждение. Если цель — отправить форму – зачем продвигать отмену формы? Это не поможет направить пользователя к желаемому действию. Если в этой форме будет указано «Сохранить на потом» – это может изменить правила игры. Будет ли тогда «отправить» первичным действием, «отложить на потом» вторичным действием и «отменить» третичным? Все зависит от целей и приоритетов.
Сломанный пользовательский интерфейс заставил нас понять, что дизайн на самом деле не учитывает приоритеты или иерархию общения. Пришло время переосмыслить дизайн и расположение элементов в макете с целью установления иерархии. Мы превратили два основных действия в первичное и третичное. Пользовательский интерфейс для экрана не сломался с новым дизайном и был намного более гибким, чем раньше.
Читать далее
Почему дизайнеры сами себя ограничивают?
«Самоограничение — это, когда организм или человек своими действиями ограничивает свой рост».
Вы хотите строить планы или принимать решения? Возможно, вы хотите делать и то, и другое, но этот вопрос вам редко задают. Профессия дизайнера уходит корнями в ремесло, когда один человек работает и формирует идеи, чтобы что-то сделать. Именно так учат в большинстве школ дизайна: что вы будете контролировать свои проекты. Однако в реальности быть дизайнером часто означает следовать плану, когда кто-то другой определяет цели и решает, как план изменится. Это может быть проджект-менеджер, разработчик, вице-президент или клиент, но главное у них есть власть изменять планы и решать судьбу текущего проекта.
Для многих дизайнеров существует четкая грань между работой, которую они считают дизайном, и остальной работой. К дизайну часто относится визуальное творчество, исследование идей, использование инструментов дизайна и доведение проекта до высокого качества. А остальную работу не считают дизайном. Поскольку лица, принимающие общие решения, например, руководители проектов, не считаются людьми творческими, многие дизайнеры избегают их. А спорить и научиться убеждать дизайнерам попросту неинтересно. Таким образом, дизайнеры попадают в ловушку, потому что лица, принимающие решения, будут мало знать о хорошем дизайне или о его ценности. И именно эти люди решают, на каком этапе проекта привлекать дизайнеров, а когда нет.
Я не собираюсь советовать вам сменить работу или предпочтения в работе. Возможно, ваша организация изначально дисфункциональна, и у вас есть все основания бросить текущие планы и прекратить работу. Или вы не против следовать глупым прихотям, если вам достаточно хорошо платят. Однако я прошу вас ответьте себе на ряд вопросов. Что вы считаете дизайнерской работой? Что в первую очередь побудило вас стать дизайнером? Вы мечтали строить планы, которые по большей части игнорируются, или вы хотели принимать решения, которые определяют события в мире?
Если для вас важен результат, значит, вы обязаны переоценить значение дизайнерского таланта. Многие дизайнеры разочарованы посредственным продуктом, который выпускают в их компании. Они чувствуют, что их талант потрачен зря. И все же, когда приходит время развивать карьеру, чем они занимаются? Они продолжают улучшать навыки, которые уже игнорируются их компаниями. Это еще одна ловушка самоограничения. Это неспособность понять, что их росту мешают навыки, которыми они не обладают, которые им не нравятся и, которые они не считают неотъемлемой частью дизайна. Но именно эти навыки им нужно развивать, чтобы достичь желаемого результата. Лидерство и влияние – это навыки, которые следует улучшить любому дизайнеру.
Единственный способ улучшить компании, выпускающие посредственный продукт – это когда человек со знанием дизайна либо становится лицом, принимающим решения, либо улучшает свои навыки влияния. Это означает, что для хорошего дизайна содействие, убеждение и построение отношений могут быть такими же важными, как и создание дизайна.
Когда эти навыки осуждаются или отбрасываются, как ненужные, то дизайнер не только самоограничивает себя, но и мешает работе целой команды. Или возможна ситуация, когда начальник отдела дизайна не владеет этими навыками (поэтому не может подать пример) и не решается сделать их частью дизайн-стратегией своей организации. Менеджеры по дизайну тоже могут самоограничивать себя подобным образом.
Это означает, что могут быть четкие причины, по которым вы чувствуете себя ограниченным или по которым ваша организация ограничивает вас. Плохая новость заключается в том, что только вы можете определить истинную причину этой проблемы, и можете что-то с этим сделать. А чтобы заставить других увидеть проблему, требуется способность влиять на них.
Если мы хотим сделать мир лучше, есть только два пути:
1.Стать дизайнером, обладающим влиянием
2.Поощрять других дизайнеров переходить на должности, принимающие решения
Источник
«Самоограничение — это, когда организм или человек своими действиями ограничивает свой рост».
Вы хотите строить планы или принимать решения? Возможно, вы хотите делать и то, и другое, но этот вопрос вам редко задают. Профессия дизайнера уходит корнями в ремесло, когда один человек работает и формирует идеи, чтобы что-то сделать. Именно так учат в большинстве школ дизайна: что вы будете контролировать свои проекты. Однако в реальности быть дизайнером часто означает следовать плану, когда кто-то другой определяет цели и решает, как план изменится. Это может быть проджект-менеджер, разработчик, вице-президент или клиент, но главное у них есть власть изменять планы и решать судьбу текущего проекта.
Для многих дизайнеров существует четкая грань между работой, которую они считают дизайном, и остальной работой. К дизайну часто относится визуальное творчество, исследование идей, использование инструментов дизайна и доведение проекта до высокого качества. А остальную работу не считают дизайном. Поскольку лица, принимающие общие решения, например, руководители проектов, не считаются людьми творческими, многие дизайнеры избегают их. А спорить и научиться убеждать дизайнерам попросту неинтересно. Таким образом, дизайнеры попадают в ловушку, потому что лица, принимающие решения, будут мало знать о хорошем дизайне или о его ценности. И именно эти люди решают, на каком этапе проекта привлекать дизайнеров, а когда нет.
Я не собираюсь советовать вам сменить работу или предпочтения в работе. Возможно, ваша организация изначально дисфункциональна, и у вас есть все основания бросить текущие планы и прекратить работу. Или вы не против следовать глупым прихотям, если вам достаточно хорошо платят. Однако я прошу вас ответьте себе на ряд вопросов. Что вы считаете дизайнерской работой? Что в первую очередь побудило вас стать дизайнером? Вы мечтали строить планы, которые по большей части игнорируются, или вы хотели принимать решения, которые определяют события в мире?
Если для вас важен результат, значит, вы обязаны переоценить значение дизайнерского таланта. Многие дизайнеры разочарованы посредственным продуктом, который выпускают в их компании. Они чувствуют, что их талант потрачен зря. И все же, когда приходит время развивать карьеру, чем они занимаются? Они продолжают улучшать навыки, которые уже игнорируются их компаниями. Это еще одна ловушка самоограничения. Это неспособность понять, что их росту мешают навыки, которыми они не обладают, которые им не нравятся и, которые они не считают неотъемлемой частью дизайна. Но именно эти навыки им нужно развивать, чтобы достичь желаемого результата. Лидерство и влияние – это навыки, которые следует улучшить любому дизайнеру.
Единственный способ улучшить компании, выпускающие посредственный продукт – это когда человек со знанием дизайна либо становится лицом, принимающим решения, либо улучшает свои навыки влияния. Это означает, что для хорошего дизайна содействие, убеждение и построение отношений могут быть такими же важными, как и создание дизайна.
Когда эти навыки осуждаются или отбрасываются, как ненужные, то дизайнер не только самоограничивает себя, но и мешает работе целой команды. Или возможна ситуация, когда начальник отдела дизайна не владеет этими навыками (поэтому не может подать пример) и не решается сделать их частью дизайн-стратегией своей организации. Менеджеры по дизайну тоже могут самоограничивать себя подобным образом.
Это означает, что могут быть четкие причины, по которым вы чувствуете себя ограниченным или по которым ваша организация ограничивает вас. Плохая новость заключается в том, что только вы можете определить истинную причину этой проблемы, и можете что-то с этим сделать. А чтобы заставить других увидеть проблему, требуется способность влиять на них.
Если мы хотим сделать мир лучше, есть только два пути:
1.Стать дизайнером, обладающим влиянием
2.Поощрять других дизайнеров переходить на должности, принимающие решения
Источник
UXPUB 🇺🇦 Дизайн-спільнота
Почему дизайнеры сами себя ограничивают?
Для хорошего дизайна содействие, убеждение и построение отношений могут быть такими же важными, как и создание дизайна
wannabelike обратились к Максу Авдееву, основателю дизайн-студии MAX, чтобы он поделился своими впечатлениями от "погружения в мир продактов". Дальше прямая речь:
Я дизайнер уже как лет 13: работал и с Гладких, и с Барбанелем, и с Десятых, и с дизайном продуктов Яндекса: Почты, Календаря, Музыки и Поиска. А потом в один, как сейчас кажется — прекрасный, день меня уволили оттуда. Погоревав немного, я решил основать свою студию МАХ. Сейчас нас плюс-минус 30 человек, мы работаем со ВкусВиллом, Пятерочкой, KFC, ТехноНИКОЛЬ, Яндекс.Go и другими крутыми ребятами.
Как-то я увидел, что выходит интенсив для продактов от Валерии Розовой. Почитал, прифигел от опыта и умных слов и в итоге второй раз в жизни записал себя на какой-то курс.
Зачем мне это? Продакты это наши клиенты и я хотел побывать в роли «тайного покупателя»: прямо на себе прочувствовать их боли, примерить роль, вжиться — и в итоге дать пользу.
Что в итоге? Я стал больше "в теме" процессов и задач клиентов, от того получил от них дополнительные очки доверия, научился сам и объяснил своим ребятам в студии, почему нельзя предлагать красивые "тридэшки" бизнесу с оптимизационной стратегией. А еще сделал 5 таких продаж после интенсива, что он окупился в 1000 раз (и это не просто красивая цифра).
Подробно про свои инсайты я написал вот в этой статье: http://i.wannabelike.ru/max
Я дизайнер уже как лет 13: работал и с Гладких, и с Барбанелем, и с Десятых, и с дизайном продуктов Яндекса: Почты, Календаря, Музыки и Поиска. А потом в один, как сейчас кажется — прекрасный, день меня уволили оттуда. Погоревав немного, я решил основать свою студию МАХ. Сейчас нас плюс-минус 30 человек, мы работаем со ВкусВиллом, Пятерочкой, KFC, ТехноНИКОЛЬ, Яндекс.Go и другими крутыми ребятами.
Как-то я увидел, что выходит интенсив для продактов от Валерии Розовой. Почитал, прифигел от опыта и умных слов и в итоге второй раз в жизни записал себя на какой-то курс.
Зачем мне это? Продакты это наши клиенты и я хотел побывать в роли «тайного покупателя»: прямо на себе прочувствовать их боли, примерить роль, вжиться — и в итоге дать пользу.
Что в итоге? Я стал больше "в теме" процессов и задач клиентов, от того получил от них дополнительные очки доверия, научился сам и объяснил своим ребятам в студии, почему нельзя предлагать красивые "тридэшки" бизнесу с оптимизационной стратегией. А еще сделал 5 таких продаж после интенсива, что он окупился в 1000 раз (и это не просто красивая цифра).
Подробно про свои инсайты я написал вот в этой статье: http://i.wannabelike.ru/max
UX-дизайн: эффект Зейгарник, или как открытия профессоров психологии помогают доводить пользователей до цели на сайте
Статья для начинающих UX/UI-дизайнеров, исследователей и аналитиков. В статье рассказывается о том, как открытия профессоров психологии Московского государственного и Гарвардского университетов могут помочь большему числу пользователей достичь необходимых целей на сайте.
Советский психолог, доктор психологических наук, профессор и одна из создателей факультета психологии МГУ Блюма Вульфовна Зейгарник, в 1927 году под руководством Курта Левина (чьи идеи оказали большое влияние на социальную психологию) провела ряд экспериментов в ходе которых обнаружила интересную закономерность: память о незавершенных действиях сохранялась у человека почти в два раза (1,9) дольше чем память о завершенных действиях.
В ходе экспериментов, Зейгарник просила испытуемых решить несколько задач за определенное время. При этом, в процессе решения задач, половине испытуемых не давали завершить часть задач, ссылаясь на нехватку времени.
После чего Зейгарник просила всех испытуемых перечислить задачи, которые они запомнили. Оказалось, что среди сохранившихся в памяти задач, отношение завершенных к незавершенным в среднем равнялось 1,9. То есть почти в два раза больше задач вспомнили те испытуемые, которых прервали во время решения задачи.
По итогу экспериментов Зейгарник резюмировала, что в случае прерывания решения задачи у испытуемого возникал определённый уровень эмоционального напряжения, который не получает своей разрядки в решении задачи.
Эффект Овсянкиной
Позже, другой профессор психологии Гарвардского университета, но также с русскими корнями, Мария Овсянкина, дополнила эффект Зейгарник своими исследованиями. В частности, она выяснила, что прерванная или незавершенная задача, даже без дополнительных стимулов и напоминаний, воспринимается испытуемыми как «квазипотребность».
То есть, незавершенная задача создает навязчивые мысли, направленные на то, чтобы вернуться к задаче и закончить прерванное действие. Другими словами, при незавершенной задаче, человек сам стремится к завершению (разрядке). Данный феномен был назван эффектом Овсянкиной.
Применение эффекта Зейгарник и эффекта Овсянкиной в дизайне сайтов
Наверняка вы наблюдали подобные эффекты в своей жизни, например, когда хотели посмотреть 1-2 серии сериала, а в результате просмотрели целый сезон. Сценаристы сериалов хорошо знакомы с описанными выше эффектами и потому каждая серия заканчивается на интересном и интригующем моменте сюжета. Подобное прерывание похоже на прерванную задачу в экспериментах Зейгарник и Овсянкиной. Зритель очень хочет добраться до конца истории (завершить начатую задачу) и потому проводит за просмотром больше времени, чем планировал.
Аналогичным образом эффекты Зейгарник и Овсянкиной применяют и на сайтах, например, многие новостные СМИ указывают броский заголовок, который прерывается многоточием. Пользователь заинтригован и появляется желание прочитать статью целиком, чтобы завершить начатую задачу.
Другой пример применения эффектов Зейгарник и Овсянкиной в дизайне – это корзина интернет-магазинов. В большинстве сайтов, корзина является самостоятельной страницей. Но некоторые интернет-магазины делают корзину первым шагом в оформлении товара. Таким образом пользователь зашедший в корзину просмотреть товары становится вовлеченным в процесс оформления покупки.
Выйти из такой корзины означает прервать задачу. А это, исходя из экспериментов выше, остается в памяти надолго и подталкивает пользователей вернуться к задаче и закончить прерванное действие.
Вывод:
По возможности, используйте шаги или другие индикаторы выполнения задач пользователем в дизайне сайтов, чтобы визуально указать предстоящий путь и акцентировать внимание на том, что задача не завершена. Тем самым, вы сможете повысить вероятность выполнения задачи, а вместе с этим и конверсию сайта.
Источник
Статья для начинающих UX/UI-дизайнеров, исследователей и аналитиков. В статье рассказывается о том, как открытия профессоров психологии Московского государственного и Гарвардского университетов могут помочь большему числу пользователей достичь необходимых целей на сайте.
Советский психолог, доктор психологических наук, профессор и одна из создателей факультета психологии МГУ Блюма Вульфовна Зейгарник, в 1927 году под руководством Курта Левина (чьи идеи оказали большое влияние на социальную психологию) провела ряд экспериментов в ходе которых обнаружила интересную закономерность: память о незавершенных действиях сохранялась у человека почти в два раза (1,9) дольше чем память о завершенных действиях.
В ходе экспериментов, Зейгарник просила испытуемых решить несколько задач за определенное время. При этом, в процессе решения задач, половине испытуемых не давали завершить часть задач, ссылаясь на нехватку времени.
После чего Зейгарник просила всех испытуемых перечислить задачи, которые они запомнили. Оказалось, что среди сохранившихся в памяти задач, отношение завершенных к незавершенным в среднем равнялось 1,9. То есть почти в два раза больше задач вспомнили те испытуемые, которых прервали во время решения задачи.
По итогу экспериментов Зейгарник резюмировала, что в случае прерывания решения задачи у испытуемого возникал определённый уровень эмоционального напряжения, который не получает своей разрядки в решении задачи.
Эффект Овсянкиной
Позже, другой профессор психологии Гарвардского университета, но также с русскими корнями, Мария Овсянкина, дополнила эффект Зейгарник своими исследованиями. В частности, она выяснила, что прерванная или незавершенная задача, даже без дополнительных стимулов и напоминаний, воспринимается испытуемыми как «квазипотребность».
То есть, незавершенная задача создает навязчивые мысли, направленные на то, чтобы вернуться к задаче и закончить прерванное действие. Другими словами, при незавершенной задаче, человек сам стремится к завершению (разрядке). Данный феномен был назван эффектом Овсянкиной.
Применение эффекта Зейгарник и эффекта Овсянкиной в дизайне сайтов
Наверняка вы наблюдали подобные эффекты в своей жизни, например, когда хотели посмотреть 1-2 серии сериала, а в результате просмотрели целый сезон. Сценаристы сериалов хорошо знакомы с описанными выше эффектами и потому каждая серия заканчивается на интересном и интригующем моменте сюжета. Подобное прерывание похоже на прерванную задачу в экспериментах Зейгарник и Овсянкиной. Зритель очень хочет добраться до конца истории (завершить начатую задачу) и потому проводит за просмотром больше времени, чем планировал.
Аналогичным образом эффекты Зейгарник и Овсянкиной применяют и на сайтах, например, многие новостные СМИ указывают броский заголовок, который прерывается многоточием. Пользователь заинтригован и появляется желание прочитать статью целиком, чтобы завершить начатую задачу.
Другой пример применения эффектов Зейгарник и Овсянкиной в дизайне – это корзина интернет-магазинов. В большинстве сайтов, корзина является самостоятельной страницей. Но некоторые интернет-магазины делают корзину первым шагом в оформлении товара. Таким образом пользователь зашедший в корзину просмотреть товары становится вовлеченным в процесс оформления покупки.
Выйти из такой корзины означает прервать задачу. А это, исходя из экспериментов выше, остается в памяти надолго и подталкивает пользователей вернуться к задаче и закончить прерванное действие.
Вывод:
По возможности, используйте шаги или другие индикаторы выполнения задач пользователем в дизайне сайтов, чтобы визуально указать предстоящий путь и акцентировать внимание на том, что задача не завершена. Тем самым, вы сможете повысить вероятность выполнения задачи, а вместе с этим и конверсию сайта.
Источник
vc.ru
UX-дизайн: эффект Зейгарник, или как открытия профессоров психологии помогают доводить пользователей до цели на сайте — Дизайн…
Статья для начинающих UX/UI-дизайнеров, исследователей и аналитиков. В статье рассказывается о том, как открытия профессоров психологии Московского государственного и Гарвардского университетов могут помочь большему числу пользователей достичь необходимых…
Верхняя или боковая панель навигации: что лучше подходит для вашего продукта?
Что говорят исследования?
При выборе макета навигации для вашего приложения обычно необходимо определить положение первичной, вторичной и третичной иерархии навигации. Исследование Дженнифер Роуз Кингсбург «Сравнение трехуровневых навигационных структур меню для веб-дизайна» показало, что расположение основной навигации с левой стороны дает множество преимуществ. В 2 исследованиях (по 16 пользователей в каждом) измерялось время, предпочтения и ошибки выбора навигации. Здесь вы можете найти краткое изложение этого исследования. Имейте в виду, что оно было проведено 17 лет назад, и за это время парадигмы дизайна значительно изменились.
Панель навигации слева легче сканировать
Исследования движения глаз показывают, что люди просматривают веб-страницы по F-образному паттерну. Поэтому верхняя, и левая панели навигации соответствуют этому паттерну. Панель навигации слева облегчает вертикальное направление сканирования (списки), что значительно увеличивает скорость, а также требует меньшего количества визуальных фиксаций, поэтому мы можем видеть несколько навигационных ссылок одновременно. (Боковая панель навигации может быть расположена справа для систем письма справа-налево)
Верхняя панель навигации экономит место
Если мы посмотрим на обычные экраны ноутбуков и ту часть, которую занимают компоненты навигации, левая навигация часто будет занимать в 3 раза больше места, чем верхняя. Добавьте к этому немного пространства, зарезервированного для заголовка, поиска или других элементов, таких как уведомления или профиль. Левая панель навигации может легко занять 25% места на странице. Сворачивание боковой панели для экономии места не всегда будет работать, так как вы не можете постоянно размещать длинные метки, а навигация только с помощью иконок будет слишком сильно нагружать память пользователя.
Случаи неудачного перехода на боковую панель навигации
Редизайн навигации – это всегда сложная задача. Пользователи привыкают к навигации, особенно когда используют ваш продукт ежедневно. Даже небольшие изменения в навигации могут запутать их. Независимо от новой кривой обучения, некоторые случаи, такие как переход навигации Jira Cloud на боковое меню, вызвали волну негативной реакции со стороны пользователей.
Когда Jira опросила часть пользователей, более 95% первых (из 350) отдали предпочтение «старой» верхней панели навигации.
И у верхней, и у боковой панелей навигации есть проблемы с адаптивным дизайном
Для верхней панели навигации
с небольшим количеством навигационных ссылок вы можете сохранить все эти ссылки видимыми на планшетах в портретной ориентации. Боковое меню, скорее всего, будет скрыто в гамбургер-меню при портретной ориентации планшета, но его преимущество заключается в сохранении единообразия внешнего вида навигации для всех размеров экрана.
Выбор навигации будет зависеть от вашего контекста
Верхняя панель навигации
Занимает мало места и самое видное место на странице. Хорошо работает, когда элементов навигации не слишком много. Рассмотрите возможность использования верхней панели навигации для малых, средних и крупных веб-сайтов, электронной коммерции и веб-приложений, не имеющих иерархической структуры.
Боковая панель навигации
Поддерживает продукты с большим количеством навигационных ссылок, легко масштабируемых и настраиваемых. Рассмотрите возможность использования боковой панели навигации для сложных приложений и веб-сайтов, приложений администратора, настольных приложений и продуктов для управления файлами / контентом, где пользователи могут настраивать меню и нуждаются в структуре дерева / папки.
Источник
Что говорят исследования?
При выборе макета навигации для вашего приложения обычно необходимо определить положение первичной, вторичной и третичной иерархии навигации. Исследование Дженнифер Роуз Кингсбург «Сравнение трехуровневых навигационных структур меню для веб-дизайна» показало, что расположение основной навигации с левой стороны дает множество преимуществ. В 2 исследованиях (по 16 пользователей в каждом) измерялось время, предпочтения и ошибки выбора навигации. Здесь вы можете найти краткое изложение этого исследования. Имейте в виду, что оно было проведено 17 лет назад, и за это время парадигмы дизайна значительно изменились.
Панель навигации слева легче сканировать
Исследования движения глаз показывают, что люди просматривают веб-страницы по F-образному паттерну. Поэтому верхняя, и левая панели навигации соответствуют этому паттерну. Панель навигации слева облегчает вертикальное направление сканирования (списки), что значительно увеличивает скорость, а также требует меньшего количества визуальных фиксаций, поэтому мы можем видеть несколько навигационных ссылок одновременно. (Боковая панель навигации может быть расположена справа для систем письма справа-налево)
Верхняя панель навигации экономит место
Если мы посмотрим на обычные экраны ноутбуков и ту часть, которую занимают компоненты навигации, левая навигация часто будет занимать в 3 раза больше места, чем верхняя. Добавьте к этому немного пространства, зарезервированного для заголовка, поиска или других элементов, таких как уведомления или профиль. Левая панель навигации может легко занять 25% места на странице. Сворачивание боковой панели для экономии места не всегда будет работать, так как вы не можете постоянно размещать длинные метки, а навигация только с помощью иконок будет слишком сильно нагружать память пользователя.
Случаи неудачного перехода на боковую панель навигации
Редизайн навигации – это всегда сложная задача. Пользователи привыкают к навигации, особенно когда используют ваш продукт ежедневно. Даже небольшие изменения в навигации могут запутать их. Независимо от новой кривой обучения, некоторые случаи, такие как переход навигации Jira Cloud на боковое меню, вызвали волну негативной реакции со стороны пользователей.
Когда Jira опросила часть пользователей, более 95% первых (из 350) отдали предпочтение «старой» верхней панели навигации.
И у верхней, и у боковой панелей навигации есть проблемы с адаптивным дизайном
Для верхней панели навигации
с небольшим количеством навигационных ссылок вы можете сохранить все эти ссылки видимыми на планшетах в портретной ориентации. Боковое меню, скорее всего, будет скрыто в гамбургер-меню при портретной ориентации планшета, но его преимущество заключается в сохранении единообразия внешнего вида навигации для всех размеров экрана.
Выбор навигации будет зависеть от вашего контекста
Верхняя панель навигации
Занимает мало места и самое видное место на странице. Хорошо работает, когда элементов навигации не слишком много. Рассмотрите возможность использования верхней панели навигации для малых, средних и крупных веб-сайтов, электронной коммерции и веб-приложений, не имеющих иерархической структуры.
Боковая панель навигации
Поддерживает продукты с большим количеством навигационных ссылок, легко масштабируемых и настраиваемых. Рассмотрите возможность использования боковой панели навигации для сложных приложений и веб-сайтов, приложений администратора, настольных приложений и продуктов для управления файлами / контентом, где пользователи могут настраивать меню и нуждаются в структуре дерева / папки.
Источник
UXPUB 🇺🇦 Дизайн-спільнота
Верхняя или боковая панель навигации: что лучше подходит для вашего продукта?
Сегодня мы посмотрим на исследования в этой теми и сравним два вариант навигации, чтобы увидеть, кто победит в поединке
Советы по дизайну лучших интерфейсных иконок
Иконография – одна из самых важных частей пользовательского интерфейса. Это визуальный язык, который представляет призывы к действию, контент и раскрывает смысл функциональности.
Ваши иконки всегда должны представлять простые визуальные метафоры, которые пользователи смогут сразу понять и распознать.
Исходя из того, как вы проектируете и используете иконки в своем продукте, вы можете добавить бренду ощущение уникальности. Ниже представлены ряд советов, которые помогут вам создавать более качественные иконки.
Совет 1. Настройте сетку
Вы никогда не будете создавать только одну иконку. Вы всегда создаете набор. Чтобы сделать набор единообразным, вам понадобится сетка.
Определите безопасную зону и установите ключевые линии. Используйте полученную сетку в качестве шаблона, чтобы закрепить пропорции и размеры вашей иконки.
Совет 2. Сделайте их последовательными
При проектировании набора используйте одинаковую ширину линии, радиус скругления углов и стиль заливки. Это гарантирует, что все иконки будут выглядеть унифицированными и узнаваемыми.
Совет 3 – Сделайте их понятными
В дизайне иконок меньше значит больше. Используйте четкие метафоры с одинаковым количеством деталей, чтобы каждую иконку можно было легко распознать и понять.
Совет 4 – Используйте равные интервалы
Используйте одинаковое пространство между элементами иконок, чтобы весь набор выглядел гармонично.
Вы можете подсчитать расстояние между векторными линиями, удерживая клавишу ALT в Figma, Sketch или XD.
Совет 5 – Оптическая коррекция
Выровняйте элементы иконки по оптическому центру и сбалансируйте визуальный вес.
Совет 6 – Заполните пространство
Поворачивайте узкие иконки и используйте все пространство контейнера, чтобы улучшить читабельность.
Совет 7 – Комбинируйте стили
Используйте стили заливки и абрис, чтобы описать состояния интерфейса и помочь пользователю найти нужную иконку или кнопку.
Совет 8 – Удобные инструменты
Инструменты
Icons8.com
iconfinder.com
flaticon.com
thenouproject.com
Ресурсы
Apple SF Symbols
Material Icons
Macosicons.com
Источник
Иконография – одна из самых важных частей пользовательского интерфейса. Это визуальный язык, который представляет призывы к действию, контент и раскрывает смысл функциональности.
Ваши иконки всегда должны представлять простые визуальные метафоры, которые пользователи смогут сразу понять и распознать.
Исходя из того, как вы проектируете и используете иконки в своем продукте, вы можете добавить бренду ощущение уникальности. Ниже представлены ряд советов, которые помогут вам создавать более качественные иконки.
Совет 1. Настройте сетку
Вы никогда не будете создавать только одну иконку. Вы всегда создаете набор. Чтобы сделать набор единообразным, вам понадобится сетка.
Определите безопасную зону и установите ключевые линии. Используйте полученную сетку в качестве шаблона, чтобы закрепить пропорции и размеры вашей иконки.
Совет 2. Сделайте их последовательными
При проектировании набора используйте одинаковую ширину линии, радиус скругления углов и стиль заливки. Это гарантирует, что все иконки будут выглядеть унифицированными и узнаваемыми.
Совет 3 – Сделайте их понятными
В дизайне иконок меньше значит больше. Используйте четкие метафоры с одинаковым количеством деталей, чтобы каждую иконку можно было легко распознать и понять.
Совет 4 – Используйте равные интервалы
Используйте одинаковое пространство между элементами иконок, чтобы весь набор выглядел гармонично.
Вы можете подсчитать расстояние между векторными линиями, удерживая клавишу ALT в Figma, Sketch или XD.
Совет 5 – Оптическая коррекция
Выровняйте элементы иконки по оптическому центру и сбалансируйте визуальный вес.
Совет 6 – Заполните пространство
Поворачивайте узкие иконки и используйте все пространство контейнера, чтобы улучшить читабельность.
Совет 7 – Комбинируйте стили
Используйте стили заливки и абрис, чтобы описать состояния интерфейса и помочь пользователю найти нужную иконку или кнопку.
Совет 8 – Удобные инструменты
Инструменты
Icons8.com
iconfinder.com
flaticon.com
thenouproject.com
Ресурсы
Apple SF Symbols
Material Icons
Macosicons.com
Источник
UXPUB 🇺🇦 Дизайн-спільнота
Советы по дизайну лучших интерфейсных иконок
Иконография – одна из самых важных частей пользовательского интерфейса. Это визуальный язык, который представляет призывы к действию, контент и раскрывает смысл функциональности
10 хитростей Figma, которые я хотел бы знать раньше
Хаки Figma, о которых вы, возможно, не слышали.
Меня всегда поражало количество полезных функций, которые Figma встроила в свое приложение. То, что раньше было обходным решением в Sketch, теперь является продуманной функцией в Figma.
Я часто натыкаюсь на функции, позволяющие сэкономить время, я хотел бы узнать о них раньше. Надеюсь, часть из них будет вам интересна и пригодится в работе.
1. Самое легкое создание кругового прогресса, которое вы когда-либо делали в своей жизни
Я понятия не имел об инструменте «Arc», пока однажды случайно не перетащил его на артборд, это просто взорвало мой мозг. Он позволяет создавать простые и красивые индикаторы прогресса.
2. Используйте инструмент масштабирования, чтобы избежать искажения
Сохраняйте идеальные пропорции вашего дизайна с помощью инструмента масштабирования – просто выберите элемент, который вы хотите масштабировать, затем нажмите клавишу K на клавиатуре и потяните курсор, вуаля.
Раньше я всегда отказывался от масштабирования дизайна, потому что всегда что-то ломалось, и мне приходилось вносить коррективы. С помощью инструмента масштабирования этих проблем больше нет – все идеально масштабируется и сохраняет пропорции без необходимости доработки.
3. Перетаскивайте объекты за пределы фрейма, удерживая их внутри контейнера
Удерживайте клавишу пробела при перетаскивании объекта за пределы фрейма, чтобы он оставался внутри контейнера. Вы также можете отключить функцию «Clip contents» для фрейма, содержащего объект, чтобы вы все еще могли видеть его, когда он находится за пределами контейнера – вы также можете нажать CMD (CTRL) + Y, чтобы отобразить контуры.
4. Приведите сетку в порядок
Приведите в порядок свои проекты, щелкнув по иконке сетки в углу после выбора нескольких объектов в массиве. Это сделает все интервалы между объектами одинаковыми, а затем вы сможете перетаскивать объекты, чтобы изменить их расположение и отрегулировать интервалы.
5. Продублируйте последнее действие
Нажмите CMD + D, чтобы продублировать предыдущее действие. CMD + D также будет дублировать объекты, фреймы и все остальное.
6. Предварительно просмотрите цвет с помощью пипетки
При использовании инструмента «Пипетка» (i) удерживайте левую кнопку мыши, чтобы просмотреть как меняется цвет элемента.
7. CMD + / разблокировать все объекты
Сочетание клавиш СMD + / имеет массу полезных быстрых действий, которые помогут в рабочем процессе и позволят сэкономить массу времени. Если вы еще не используете его, я настоятельно рекомендую посмотреть, какие действия доступны в меню. Действие, которое я часто использую – это быстрая разблокировка всех объектов и изменение шрифтов.
8. Легко вставляйте изображения внутрь фигур-плейсхолдеров
Нажмите CMD + Shift + K, чтобы заменить заливку фигур или фреймов с кучей изображений.
9. Другие приемы с пробелом
Перетащите область выделения, а затем удерживайте пробел, чтобы увеличить размер выделения указателя.
Если вы рисуете фигуру, вы также можете удерживать пробел, чтобы переместить объект во время его создания.
А если этого недостаточно, вы можете удерживать клавишу пробела, чтобы запретить Figma автоматическое вложение объектов внутри фреймов или отключить auto-layout. Клавиша пробела очень удобна!
10. Content Reel + Unsplash
Content Reel и Unsplash были двумя незаменимыми плагинами, экономящими время и позволяющими избежать использования «John Doe» в качестве имени для всех пользователей. С Content Reel вы можете одним кликом мыши вставлять в свой дизайн аватары, lorem ipsum, имена, адреса и многое другое. Unsplash – это бесплатная библиотека высококачественной графики.
11. БОНУС! Исправить высоту строки за секунду
Если у вас нет определенного значения высоты строки просто введите «auto» в поле line-height, и оно автоматически отрегулируется!
Источник
Хаки Figma, о которых вы, возможно, не слышали.
Меня всегда поражало количество полезных функций, которые Figma встроила в свое приложение. То, что раньше было обходным решением в Sketch, теперь является продуманной функцией в Figma.
Я часто натыкаюсь на функции, позволяющие сэкономить время, я хотел бы узнать о них раньше. Надеюсь, часть из них будет вам интересна и пригодится в работе.
1. Самое легкое создание кругового прогресса, которое вы когда-либо делали в своей жизни
Я понятия не имел об инструменте «Arc», пока однажды случайно не перетащил его на артборд, это просто взорвало мой мозг. Он позволяет создавать простые и красивые индикаторы прогресса.
2. Используйте инструмент масштабирования, чтобы избежать искажения
Сохраняйте идеальные пропорции вашего дизайна с помощью инструмента масштабирования – просто выберите элемент, который вы хотите масштабировать, затем нажмите клавишу K на клавиатуре и потяните курсор, вуаля.
Раньше я всегда отказывался от масштабирования дизайна, потому что всегда что-то ломалось, и мне приходилось вносить коррективы. С помощью инструмента масштабирования этих проблем больше нет – все идеально масштабируется и сохраняет пропорции без необходимости доработки.
3. Перетаскивайте объекты за пределы фрейма, удерживая их внутри контейнера
Удерживайте клавишу пробела при перетаскивании объекта за пределы фрейма, чтобы он оставался внутри контейнера. Вы также можете отключить функцию «Clip contents» для фрейма, содержащего объект, чтобы вы все еще могли видеть его, когда он находится за пределами контейнера – вы также можете нажать CMD (CTRL) + Y, чтобы отобразить контуры.
4. Приведите сетку в порядок
Приведите в порядок свои проекты, щелкнув по иконке сетки в углу после выбора нескольких объектов в массиве. Это сделает все интервалы между объектами одинаковыми, а затем вы сможете перетаскивать объекты, чтобы изменить их расположение и отрегулировать интервалы.
5. Продублируйте последнее действие
Нажмите CMD + D, чтобы продублировать предыдущее действие. CMD + D также будет дублировать объекты, фреймы и все остальное.
6. Предварительно просмотрите цвет с помощью пипетки
При использовании инструмента «Пипетка» (i) удерживайте левую кнопку мыши, чтобы просмотреть как меняется цвет элемента.
7. CMD + / разблокировать все объекты
Сочетание клавиш СMD + / имеет массу полезных быстрых действий, которые помогут в рабочем процессе и позволят сэкономить массу времени. Если вы еще не используете его, я настоятельно рекомендую посмотреть, какие действия доступны в меню. Действие, которое я часто использую – это быстрая разблокировка всех объектов и изменение шрифтов.
8. Легко вставляйте изображения внутрь фигур-плейсхолдеров
Нажмите CMD + Shift + K, чтобы заменить заливку фигур или фреймов с кучей изображений.
9. Другие приемы с пробелом
Перетащите область выделения, а затем удерживайте пробел, чтобы увеличить размер выделения указателя.
Если вы рисуете фигуру, вы также можете удерживать пробел, чтобы переместить объект во время его создания.
А если этого недостаточно, вы можете удерживать клавишу пробела, чтобы запретить Figma автоматическое вложение объектов внутри фреймов или отключить auto-layout. Клавиша пробела очень удобна!
10. Content Reel + Unsplash
Content Reel и Unsplash были двумя незаменимыми плагинами, экономящими время и позволяющими избежать использования «John Doe» в качестве имени для всех пользователей. С Content Reel вы можете одним кликом мыши вставлять в свой дизайн аватары, lorem ipsum, имена, адреса и многое другое. Unsplash – это бесплатная библиотека высококачественной графики.
11. БОНУС! Исправить высоту строки за секунду
Если у вас нет определенного значения высоты строки просто введите «auto» в поле line-height, и оно автоматически отрегулируется!
Источник
UXPUB 🇺🇦 Дизайн-спільнота
10 хитростей Figma, которые я хотел бы знать раньше
Я часто натыкаюсь на функции Figma, позволяющие сэкономить время, я хотел бы узнать о них раньше. Надеюсь, часть из них будет вам интересна и пригодится в работе
Собеседование на дизайнера в IT: вопросы, тестовое, подводные камни
Вопросы по владению инструментами
Расскажите, что такое смарт-объект?
В чем его преимущества?
Что такое модульная сетка?
Чем будет отличаться процесс создания обтравочной маски в Photoshop и Illustrator?
Чтобы сделать цветовую коррекцию сразу большого количества фотографий, что вы будете использовать?
Если вам нужно перенести в иллюстратор большое количество текста с сохранением его форматирования, как вы будете его импортировать?
Допечатная подготовка
При создании макета для печати какие параметры вы выставляете в графическом редакторе (цветовой режим, разрешение в dpi, цветовой профиль)?
Что такое "выпуск за обрез"?
Какие форматы файла вы будете использовать для печати?
Для чего при передаче файла переводят текст в кривые? Есть ли еще какие-либо моменты, связанные с текстом, при допечатной подготовке?
Типографика
Еще не стало скучно? Дальше пойдёт поинтереснее – более наглядные вопросы, где можно применить свое чувство вкуса и подискутировать. Вопросы по типографике мы позаимствовали из онлайн-теста, опубликованного ребятами из digital-агенства NIMAX. Для нашего собеседования мы отобрали всего 4 вопроса-примера, связанных с особенно важными и распространёнными, на наш взгляд, ошибками: с висячими предлогами, некомфортными отступами и интерлиньяжем.
Дизайн и композиция
Блок, где нет неправильных ответов. Мы подготовили и распечатали для наших соискателей несколько дизайн-макетов и попросили их рассказать, что им нравится в этих макетах, а что бы они изменили и почему. Можно с уверенностью сказать, что видение дизайна у разных людей разное: для одних на первом месте тренды и "продаваемость", для других – адаптивность и ясность мысли, для третьих лиц – уникальность и свои особенные фишки. Для нас было очень важно найти человека с близкими нам представлениями о прекрасном.
Несмотря на продолжительность, поиски себя оправдали. Человек, попавший в итоге в нашу команду, оказался реальным супергероем, влился в процесс в рекордные сроки, и в конце первого месяца работы мы уже наблюдали результаты его трудов над действительно большими и сложными задачами.
И после этого кейса по поиску сотрудника я составила свой список рекомендаций "как пройти собеседование", некоторые из которых могут показаться уже измученными и заезженными, но, на самом деле, практика показывает, что для многих эти советы не так уж и очевидны
И вот эти рекомендации:
Прежде чем подавать резюме, проанализируйте вакансию.
Оцените, что в ней указано, какие навыки важны, какие обязанности там будут у вас. Возможно, уже на этом этапе вы поймёте, что зря теряете время, потому что ваши сильные стороны не будут раскрыты на этой должности.
Подготовьте своё резюме так, чтобы работодателю было понятно, какая вы птица.
Если у вас в резюме есть куча информации про то, что вы знаете SMMPlanner, Word, PowerPoint, Tilda и только в самом конце будет написано про Photoshop, то человек при прочтении решит, что, скорее всего, вы SMM-специалист, а не дизайнер.
Не забудьте о портфолио.
Дизайнер без портфолио по определению вызывает сомнения. Даже если вы совсем новичок в этом деле – попросите своих друзей дать вам задачу и сделайте её ответственно в сотрудничестве с ними, как если бы это были заказчики. Вы также можете выложить ученические работы.
Не стесняйтесь своих работ.
Подавляющее большинство дизайнеров ориентируются на ресурсы, такие как Dribbble, Behance и thedesigninspiration, но при этом забывают, что очень часто там публикуются "неживые" проекты, без четкой задачи и дальнейшей реализации, что делает их намного более прекрасными и простыми.
Не ругайте своих бывших.
Мы живём в России и знаем, какими работодатели бывают очень часто. Но когда соискатель на собеседовании начинает поливать грязью свою прошлую компанию, все свои неудачи перекладывая на них, это показывает его не в лучшем свете, даже если интервьюер ну очень понимающий.
Подробнее в источнике
Вопросы по владению инструментами
Расскажите, что такое смарт-объект?
В чем его преимущества?
Что такое модульная сетка?
Чем будет отличаться процесс создания обтравочной маски в Photoshop и Illustrator?
Чтобы сделать цветовую коррекцию сразу большого количества фотографий, что вы будете использовать?
Если вам нужно перенести в иллюстратор большое количество текста с сохранением его форматирования, как вы будете его импортировать?
Допечатная подготовка
При создании макета для печати какие параметры вы выставляете в графическом редакторе (цветовой режим, разрешение в dpi, цветовой профиль)?
Что такое "выпуск за обрез"?
Какие форматы файла вы будете использовать для печати?
Для чего при передаче файла переводят текст в кривые? Есть ли еще какие-либо моменты, связанные с текстом, при допечатной подготовке?
Типографика
Еще не стало скучно? Дальше пойдёт поинтереснее – более наглядные вопросы, где можно применить свое чувство вкуса и подискутировать. Вопросы по типографике мы позаимствовали из онлайн-теста, опубликованного ребятами из digital-агенства NIMAX. Для нашего собеседования мы отобрали всего 4 вопроса-примера, связанных с особенно важными и распространёнными, на наш взгляд, ошибками: с висячими предлогами, некомфортными отступами и интерлиньяжем.
Дизайн и композиция
Блок, где нет неправильных ответов. Мы подготовили и распечатали для наших соискателей несколько дизайн-макетов и попросили их рассказать, что им нравится в этих макетах, а что бы они изменили и почему. Можно с уверенностью сказать, что видение дизайна у разных людей разное: для одних на первом месте тренды и "продаваемость", для других – адаптивность и ясность мысли, для третьих лиц – уникальность и свои особенные фишки. Для нас было очень важно найти человека с близкими нам представлениями о прекрасном.
Несмотря на продолжительность, поиски себя оправдали. Человек, попавший в итоге в нашу команду, оказался реальным супергероем, влился в процесс в рекордные сроки, и в конце первого месяца работы мы уже наблюдали результаты его трудов над действительно большими и сложными задачами.
И после этого кейса по поиску сотрудника я составила свой список рекомендаций "как пройти собеседование", некоторые из которых могут показаться уже измученными и заезженными, но, на самом деле, практика показывает, что для многих эти советы не так уж и очевидны
И вот эти рекомендации:
Прежде чем подавать резюме, проанализируйте вакансию.
Оцените, что в ней указано, какие навыки важны, какие обязанности там будут у вас. Возможно, уже на этом этапе вы поймёте, что зря теряете время, потому что ваши сильные стороны не будут раскрыты на этой должности.
Подготовьте своё резюме так, чтобы работодателю было понятно, какая вы птица.
Если у вас в резюме есть куча информации про то, что вы знаете SMMPlanner, Word, PowerPoint, Tilda и только в самом конце будет написано про Photoshop, то человек при прочтении решит, что, скорее всего, вы SMM-специалист, а не дизайнер.
Не забудьте о портфолио.
Дизайнер без портфолио по определению вызывает сомнения. Даже если вы совсем новичок в этом деле – попросите своих друзей дать вам задачу и сделайте её ответственно в сотрудничестве с ними, как если бы это были заказчики. Вы также можете выложить ученические работы.
Не стесняйтесь своих работ.
Подавляющее большинство дизайнеров ориентируются на ресурсы, такие как Dribbble, Behance и thedesigninspiration, но при этом забывают, что очень часто там публикуются "неживые" проекты, без четкой задачи и дальнейшей реализации, что делает их намного более прекрасными и простыми.
Не ругайте своих бывших.
Мы живём в России и знаем, какими работодатели бывают очень часто. Но когда соискатель на собеседовании начинает поливать грязью свою прошлую компанию, все свои неудачи перекладывая на них, это показывает его не в лучшем свете, даже если интервьюер ну очень понимающий.
Подробнее в источнике
Хабр
Собеседование на дизайнера в IT: вопросы, тестовое, подводные камни
В последнее время наша компания очень бурно развивалась: за год маркетинговый отдел вырос в 2 раза, появился отдел интернет-проектов, расширилась активность HR- и event-направлений, увеличился охват...
Проблема вложенных модальных окон в цифровых продуктах
Изучение основных проблем вложенных модальных окон и предложение альтернативных UX-паттернов.
Кому следует прочитать эту статью?
Эта статья предназначена для продуктовых дизайнеров, которые улучшают юзерфлоу продукта; для продакт-менеджеров, которые хотят получить лучший пользовательский опыт, и для всех, кто хочет избавить Интернет от вложенных модальных окон.
Содержание статьи
Что такое вложенные модальные окна?
Почему я считаю, что следует избегать вложенных модальных окон
Сложнее быстро выйти из юзерфлоу
Они добавляют неопределенность
Используется мало пространства
Повышенная когнитивная нагрузка
Какие паттерны я могу использовать вместо этого?
Бесконечное модальное окно
Боковая панель
Встроенное редактирование
Встроенное раскрытие
Всплывающие окна
Модальное окно с вкладками
Настройка контента
Как модальные окна должны интегрироваться в идеальный юзерфлоу?
Читать статью:https://ux.pub/problema-vlozhennyh-modalnyh-okon-v-tsifrovyh-produktah/
Изучение основных проблем вложенных модальных окон и предложение альтернативных UX-паттернов.
Кому следует прочитать эту статью?
Эта статья предназначена для продуктовых дизайнеров, которые улучшают юзерфлоу продукта; для продакт-менеджеров, которые хотят получить лучший пользовательский опыт, и для всех, кто хочет избавить Интернет от вложенных модальных окон.
Содержание статьи
Что такое вложенные модальные окна?
Почему я считаю, что следует избегать вложенных модальных окон
Сложнее быстро выйти из юзерфлоу
Они добавляют неопределенность
Используется мало пространства
Повышенная когнитивная нагрузка
Какие паттерны я могу использовать вместо этого?
Бесконечное модальное окно
Боковая панель
Встроенное редактирование
Встроенное раскрытие
Всплывающие окна
Модальное окно с вкладками
Настройка контента
Как модальные окна должны интегрироваться в идеальный юзерфлоу?
Читать статью:https://ux.pub/problema-vlozhennyh-modalnyh-okon-v-tsifrovyh-produktah/
UXPUB 🇺🇦 Дизайн-спільнота
Проблема вложенных модальных окон в цифровых продуктах
Эта статья предназначена для продуктовых дизайнеров, которые улучшают юзерфлоу продукта; для продакт-менеджеров, которые хотят получить лучший пользовательский опыт, и для всех, кто хочет избавить Интернет от вложенных модальных окон
Где найти первые заказы для веб-дизайнера?
Telegram каналы
Когда я приступила у поиску клиентов в телеграм каналах, в первую очередь я задала себе вопрос: Что я могу предоставить? Кому это нужно?
За небольшой опыт в сфере веб-дизайна я не могу предложить сложные лендинги, но я могу сделать качественный, простой лендинг, с вниманием к деталям и дешевле, чем у конкурентов.
Кому это нужно? Очевидно, это малый бизнес, стартаперские проекты, у которых не всегда есть возможность оплачивать дорогого дизайнера.
Окей, забивам в поиск "предприниматели", "стартап комьюнити" и т.д. и вуаля, вы сами увидите, как предприниматели ищут исполнителя.
*Не забываем спрашивать у админов канала, можно ли разместить предложение, потому что в некоторых каналах это запрещено и вы попадете в бан
Социальные сети
Возможно, не каждый активно ведет свой профиль в инстаграмме или в фейсбуке, но все же этот пункт имеет высокую конверсию. Выкладывайте свои работы, регулярно показываете процесс работы в stories. Поверьте, люди будут запоминать, что вы занимается дизайном и при первом же случае вспомнят вас!
Фриланс
Да, как я уже и говорила (читайте 1 статью) на фрилансе для начинающих набирать портфолио и получать за это небольшие деньги -можно. Главное, это максимально заполнить свой аккаунт информацией о вас(очень много мошенников) и оставлять много откликов, 5 штук в день не годится)
Студии
Если вам удасться найти крупную студию, которая будет вас параллельно еще и обучать, вы счастливчик. Но больше вероятности, что вас возьмут в небольшую студию, которая находится на стадии своего развития и это тоже неплохо! Но даже такие студии бывает непросто найти. Я решила попробовать, а возьмут ли меня в какую-нибудь студию? Отклики на hh.ru меня ни к чему не приводили, но есть же другие способы. Я нашла список студий по дизайну в моем городе и просто писала им в социальных сетях , что вот я-Арина, начинающий дизайнер, специализируюсь на ..., могу быть вам полезна в ... .
Написала около 30 студий, многие не прочитали, 5 студий попросили скинуть на почту портфолио и 1 студия согласилась! Да, всего лишь одна, да некрупная, но результат есть.
Это всего лишь несколько вариантов, я уже не говорю о вариантах со знакомыми, прокачка Behance - профилей и т.д. Еще раз повторюсь, что начинающим дизайнерам нужно лезть всюду, ищите своего клиента, свою площадку. Создавать дизайн-одно дело, а вот уметь его продать это совсем другое.
А где вы нашли своего первого клиента и какими вариантами можете дополнить?
Источник
Telegram каналы
Когда я приступила у поиску клиентов в телеграм каналах, в первую очередь я задала себе вопрос: Что я могу предоставить? Кому это нужно?
За небольшой опыт в сфере веб-дизайна я не могу предложить сложные лендинги, но я могу сделать качественный, простой лендинг, с вниманием к деталям и дешевле, чем у конкурентов.
Кому это нужно? Очевидно, это малый бизнес, стартаперские проекты, у которых не всегда есть возможность оплачивать дорогого дизайнера.
Окей, забивам в поиск "предприниматели", "стартап комьюнити" и т.д. и вуаля, вы сами увидите, как предприниматели ищут исполнителя.
*Не забываем спрашивать у админов канала, можно ли разместить предложение, потому что в некоторых каналах это запрещено и вы попадете в бан
Социальные сети
Возможно, не каждый активно ведет свой профиль в инстаграмме или в фейсбуке, но все же этот пункт имеет высокую конверсию. Выкладывайте свои работы, регулярно показываете процесс работы в stories. Поверьте, люди будут запоминать, что вы занимается дизайном и при первом же случае вспомнят вас!
Фриланс
Да, как я уже и говорила (читайте 1 статью) на фрилансе для начинающих набирать портфолио и получать за это небольшие деньги -можно. Главное, это максимально заполнить свой аккаунт информацией о вас(очень много мошенников) и оставлять много откликов, 5 штук в день не годится)
Студии
Если вам удасться найти крупную студию, которая будет вас параллельно еще и обучать, вы счастливчик. Но больше вероятности, что вас возьмут в небольшую студию, которая находится на стадии своего развития и это тоже неплохо! Но даже такие студии бывает непросто найти. Я решила попробовать, а возьмут ли меня в какую-нибудь студию? Отклики на hh.ru меня ни к чему не приводили, но есть же другие способы. Я нашла список студий по дизайну в моем городе и просто писала им в социальных сетях , что вот я-Арина, начинающий дизайнер, специализируюсь на ..., могу быть вам полезна в ... .
Написала около 30 студий, многие не прочитали, 5 студий попросили скинуть на почту портфолио и 1 студия согласилась! Да, всего лишь одна, да некрупная, но результат есть.
Это всего лишь несколько вариантов, я уже не говорю о вариантах со знакомыми, прокачка Behance - профилей и т.д. Еще раз повторюсь, что начинающим дизайнерам нужно лезть всюду, ищите своего клиента, свою площадку. Создавать дизайн-одно дело, а вот уметь его продать это совсем другое.
А где вы нашли своего первого клиента и какими вариантами можете дополнить?
Источник
vc.ru
Где найти первые заказы для веб-дизайнера? — Дизайн на vc.ru
Предыдущая статья вызвала немало споров, что лучше фриланс или студия? Аудитория разделилась на два лагеря: те, кто не видят развитие профессиональных навыков на фрилансе и те, кто утверждают, что фриланс отличная возможность заработка.
Проектирование микро-взаимодействий в Figma с помощью интерактивных компонентов (interactive components)
Эта функция не совсем новинка в среде инструментов дизайна. Несколько месяцев назад я уже использовал похожую функцию в других приложениях, например, XD. На данный момент Figma – это инструмент с большой буквы. Добавление интерактивных компонентов сделает его еще круче. Судя по опыту использования этой функции в других приложениях, могу сказать, что бета-версия Figma отлично реализована. Интерактивные компоненты вместе с вариантами, auto-layout и мультиплеером выводят Figma на новый уровень.
Сохранение взаимодействий в библиотеке дизайна упрощает создание более реалистичных прототипов. Это отличный инструмент для первоначального исследования дизайна и тестирования перед созданием MVP. По мере того, как эта область становится все более продвинутой, некоторые люди считают, что скоро мы будем создавать MVP прямо в Figma. Думаю, что когда-нибудь так и будет, но в настоящий момент достижение чистоты и масштабируемости кода кажется очень далекой перспективой.
В области дизайн-систем эта функция упростит разработку микровзаимодействий и анимации различных компонентов и экранов. Что касается документации, это также поможет передать нужную информацию командам разработчиков. Масштабируемость и параметризация наборов интерфейса также станут большим преимуществом.
Читать статью: https://ux.pub/proektirovanie-mikro-vzaimodeystviy-v-figma-s-pomoschyu-interaktivnyh-komponentov-interactive-components/
Эта функция не совсем новинка в среде инструментов дизайна. Несколько месяцев назад я уже использовал похожую функцию в других приложениях, например, XD. На данный момент Figma – это инструмент с большой буквы. Добавление интерактивных компонентов сделает его еще круче. Судя по опыту использования этой функции в других приложениях, могу сказать, что бета-версия Figma отлично реализована. Интерактивные компоненты вместе с вариантами, auto-layout и мультиплеером выводят Figma на новый уровень.
Сохранение взаимодействий в библиотеке дизайна упрощает создание более реалистичных прототипов. Это отличный инструмент для первоначального исследования дизайна и тестирования перед созданием MVP. По мере того, как эта область становится все более продвинутой, некоторые люди считают, что скоро мы будем создавать MVP прямо в Figma. Думаю, что когда-нибудь так и будет, но в настоящий момент достижение чистоты и масштабируемости кода кажется очень далекой перспективой.
В области дизайн-систем эта функция упростит разработку микровзаимодействий и анимации различных компонентов и экранов. Что касается документации, это также поможет передать нужную информацию командам разработчиков. Масштабируемость и параметризация наборов интерфейса также станут большим преимуществом.
Читать статью: https://ux.pub/proektirovanie-mikro-vzaimodeystviy-v-figma-s-pomoschyu-interaktivnyh-komponentov-interactive-components/
UXPUB 🇺🇦 Дизайн-спільнота
Проектирование микро-взаимодействий в Figma с помощью интерактивных компонентов (interactive components)
В последние дни я изучал новую бета-функцию Figma «Интерактивные компоненты». В этой статье я продемонстрирую ряд исследований в области микровзаимодействий
Как улучшить UX страницы оформления заказа,
Двадцать советов от Брайана и Джеффри Айзенберг помогут уменьшить количество отказов от корзины для тех посетителей, которые действительно собираются оформить заказ, но что-то мешает им это сделать.
1. Сократите количество шагов, которые включает в себя процесс оформления заказа. Совет настолько же очевидный, насколько и неоднозначный. Казалось бы, логично – чем больше действий нужно совершить, чтобы оформить заказ, тем больше риск отказа. В действительности всё несколько сложнее, уверены авторы книги: если покупатель нашёл действительно необходимую ему вещь, он оформит заказ, сколько бы времени не пришлось на это потратить. И наоборот – известны случаи, когда владелец сайта сокращал количество шагов до одного-двух, но отказов при этом меньше не становилось. Так что прежде чем уменьшать количество шагов, стоит попробовать один из способов, описанных далее.
2. На каждую страницу оформления заказа добавьте «индикатор прогресса» (например, шаг 2 из 5). На самом деле, не принципиально, сколько шагов должен выполнить покупатель; гораздо важнее, чтобы он каждый раз понимал, на каком этапе оформления заказа находится.
+ Чётко обозначьте задачу, которую выполняет пользователь на каждом этапе; обеспечьте ему возможность при необходимости сделать пару шагов назад, а затем легко вернуться к достигнутой ступени.
3. Ссылка на страницу с описанием товара всегда должна быть на виду. Это нужно, чтобы покупатель в любой момент мог быстро проверить, то ли он купил, что хотел. Лучше всего поместить эту ссылку в корзину вместе с наименованием товара.
4. Показывайте на странице корзины изображения товаров. Небольшое изображение выбранного товара, добавленное в корзину, способно увеличить коэффициент конверсии на 10%.
5. Как можно раньше сообщите покупателю стоимость доставки. Общая стоимость покупки – один из самых важных вопросов для покупателя, и чем раньше вы на него ответите, тем лучше. Лучше всего поместить предположительную стоимость доставки рядом с наименованием товара в каталоге.
+ Не заставляйте пользователя несколько раз вводить один и тот же адрес. Лучше спросите, совпадают ли адреса плательщика и получателя, и если ответ положительный – заполните соответствующие поля за него.
6. Указывайте наличие товара на странице с его описанием. Если товара нет на складе – покупателю лучше узнать об этом до того, как он приступит к оформлению заказа.
+ Полезно также указывать предположительное время доставки, например, «Обычно на доставку уходит Х дней».
7. Подскажите посетителю, какую кнопку или ссылку нужно нажать. Пусть кнопка «Следующий шаг» или «Продолжить» будет самым заметным элементом на странице.
8. У покупателя должна быть возможность отредактировать корзину. Предоставьте покупателям удобные средства редактирования корзины. Пусть они без труда смогут изменить расцветку или размер товара, добавить или убрать его из корзины.
9. Помогите исправить ошибку и возьмите вину на себя. Если при оформлении заказа пользователь ввёл не все данные или заполнил какие-то поля неправильно, в сообщении об ошибке чётко и понятно объясните, что и где именно нужно исправить. Преподнесите это так, будто ваша система виновата, что не смогла понять полученные данные, а не пользователь допустил нелепую ошибку.
10. Укрепите уверенность покупателей, что они имеют дело с реально существующей компанией. На этапе оформления заказа клиентам особенно важно убедиться в вашей надёжности. Предоставьте им информацию, подтверждающую реальность вашей фирмы, добавьте на страницу заказа свои телефоны и все необходимые контакты.
Источник
Двадцать советов от Брайана и Джеффри Айзенберг помогут уменьшить количество отказов от корзины для тех посетителей, которые действительно собираются оформить заказ, но что-то мешает им это сделать.
1. Сократите количество шагов, которые включает в себя процесс оформления заказа. Совет настолько же очевидный, насколько и неоднозначный. Казалось бы, логично – чем больше действий нужно совершить, чтобы оформить заказ, тем больше риск отказа. В действительности всё несколько сложнее, уверены авторы книги: если покупатель нашёл действительно необходимую ему вещь, он оформит заказ, сколько бы времени не пришлось на это потратить. И наоборот – известны случаи, когда владелец сайта сокращал количество шагов до одного-двух, но отказов при этом меньше не становилось. Так что прежде чем уменьшать количество шагов, стоит попробовать один из способов, описанных далее.
2. На каждую страницу оформления заказа добавьте «индикатор прогресса» (например, шаг 2 из 5). На самом деле, не принципиально, сколько шагов должен выполнить покупатель; гораздо важнее, чтобы он каждый раз понимал, на каком этапе оформления заказа находится.
+ Чётко обозначьте задачу, которую выполняет пользователь на каждом этапе; обеспечьте ему возможность при необходимости сделать пару шагов назад, а затем легко вернуться к достигнутой ступени.
3. Ссылка на страницу с описанием товара всегда должна быть на виду. Это нужно, чтобы покупатель в любой момент мог быстро проверить, то ли он купил, что хотел. Лучше всего поместить эту ссылку в корзину вместе с наименованием товара.
4. Показывайте на странице корзины изображения товаров. Небольшое изображение выбранного товара, добавленное в корзину, способно увеличить коэффициент конверсии на 10%.
5. Как можно раньше сообщите покупателю стоимость доставки. Общая стоимость покупки – один из самых важных вопросов для покупателя, и чем раньше вы на него ответите, тем лучше. Лучше всего поместить предположительную стоимость доставки рядом с наименованием товара в каталоге.
+ Не заставляйте пользователя несколько раз вводить один и тот же адрес. Лучше спросите, совпадают ли адреса плательщика и получателя, и если ответ положительный – заполните соответствующие поля за него.
6. Указывайте наличие товара на странице с его описанием. Если товара нет на складе – покупателю лучше узнать об этом до того, как он приступит к оформлению заказа.
+ Полезно также указывать предположительное время доставки, например, «Обычно на доставку уходит Х дней».
7. Подскажите посетителю, какую кнопку или ссылку нужно нажать. Пусть кнопка «Следующий шаг» или «Продолжить» будет самым заметным элементом на странице.
8. У покупателя должна быть возможность отредактировать корзину. Предоставьте покупателям удобные средства редактирования корзины. Пусть они без труда смогут изменить расцветку или размер товара, добавить или убрать его из корзины.
9. Помогите исправить ошибку и возьмите вину на себя. Если при оформлении заказа пользователь ввёл не все данные или заполнил какие-то поля неправильно, в сообщении об ошибке чётко и понятно объясните, что и где именно нужно исправить. Преподнесите это так, будто ваша система виновата, что не смогла понять полученные данные, а не пользователь допустил нелепую ошибку.
10. Укрепите уверенность покупателей, что они имеют дело с реально существующей компанией. На этапе оформления заказа клиентам особенно важно убедиться в вашей надёжности. Предоставьте им информацию, подтверждающую реальность вашей фирмы, добавьте на страницу заказа свои телефоны и все необходимые контакты.
Источник
vc.ru
20 советов из книги «Добавьте в корзину. Ключевые принципы повышения конверсии веб-сайтов» — Дизайн на vc.ru
В ходе организации UX-Марафона 24, посвящённого теме электронной торговли, изучаем литературу, делаем заметки на память.
Решение проблем неактивных кнопок в дизайне интерфейсов
Неактивная кнопка используется для визуального сообщения, что действие недоступно из-за несоблюдения определенных условий. Однако, когда ему не хватает обратной связи, контекста и руководства, подобный опыт может расстраивать, сбивать с толку и не соответствовать принципам доступности.
«Почему я не могу нажать на этот элемент?», «Что мне делать?», «Почему он больше не доступен?». Давайте рассмотрим три альтернативных решения, которые сделают отключенные кнопки менее неприятными.
1. Показывайте только элементы, с которыми можно взаимодействовать
Насколько важно для пользователя сейчас получить доступ к отключенному элементу? Нужно ли ему знать, что что-то недоступно? Имеет ли ценность отображение отключенного действия? Сможет ли он без него выполнить задачу?
👍 Рассмотрите возможность удаления недоступных параметров. Покажите только действия, которые актуальны и полезны для пользователя в данный момент.
Примеры:
Ссылки на страницы, недоступные для пользователей с ограниченным доступом.
Действия, доступные в зависимости от настроек конфиденциальности пользователя.
Фильтры, неприменимые к выбранным элементам.
2. Предоставьте контекст
Очевидно ли пользователям почему заблокировано выполнение действия? Догадаются ли они, что нужно для продолжения?
👍 Рассмотрите возможность добавления дополнительной информации к отключенному действию.
Примеры:
Для использования функции необходимо включить параметр.
Для продолжения требуется выбор.
Требуется ввод данных для расчета стоимости и отображения вариантов оплаты.
👍 Рассмотрите возможность использования всплывающей подсказки, чтобы описать, почему действие недоступно.
Примеры:
Действие недоступно из-за ограничения.
Требуется ввод данных для доступа к другим параметрам.
3. Включите по умолчанию, затем при необходимости покажите ошибку
Насколько вероятно, что пользователи введут неправильное значение или отправят неполную форму? Это единственный способ проверить форму?
👍 Иногда проверка проводится только после отправки формы. Это нормально, если ожидается, что ошибка будет происходить очень редко. Обязательно укажите, какие поля являются обязательными, а какие – необязательными, чтобы у пользователей было больше шансов заполнить форму с первой попытки.
Пример:
Формы с минимальным количеством полей ввода, такие как страница входа в систему и восстановления пароля.
Источник
Неактивная кнопка используется для визуального сообщения, что действие недоступно из-за несоблюдения определенных условий. Однако, когда ему не хватает обратной связи, контекста и руководства, подобный опыт может расстраивать, сбивать с толку и не соответствовать принципам доступности.
«Почему я не могу нажать на этот элемент?», «Что мне делать?», «Почему он больше не доступен?». Давайте рассмотрим три альтернативных решения, которые сделают отключенные кнопки менее неприятными.
1. Показывайте только элементы, с которыми можно взаимодействовать
Насколько важно для пользователя сейчас получить доступ к отключенному элементу? Нужно ли ему знать, что что-то недоступно? Имеет ли ценность отображение отключенного действия? Сможет ли он без него выполнить задачу?
👍 Рассмотрите возможность удаления недоступных параметров. Покажите только действия, которые актуальны и полезны для пользователя в данный момент.
Примеры:
Ссылки на страницы, недоступные для пользователей с ограниченным доступом.
Действия, доступные в зависимости от настроек конфиденциальности пользователя.
Фильтры, неприменимые к выбранным элементам.
2. Предоставьте контекст
Очевидно ли пользователям почему заблокировано выполнение действия? Догадаются ли они, что нужно для продолжения?
👍 Рассмотрите возможность добавления дополнительной информации к отключенному действию.
Примеры:
Для использования функции необходимо включить параметр.
Для продолжения требуется выбор.
Требуется ввод данных для расчета стоимости и отображения вариантов оплаты.
👍 Рассмотрите возможность использования всплывающей подсказки, чтобы описать, почему действие недоступно.
Примеры:
Действие недоступно из-за ограничения.
Требуется ввод данных для доступа к другим параметрам.
3. Включите по умолчанию, затем при необходимости покажите ошибку
Насколько вероятно, что пользователи введут неправильное значение или отправят неполную форму? Это единственный способ проверить форму?
👍 Иногда проверка проводится только после отправки формы. Это нормально, если ожидается, что ошибка будет происходить очень редко. Обязательно укажите, какие поля являются обязательными, а какие – необязательными, чтобы у пользователей было больше шансов заполнить форму с первой попытки.
Пример:
Формы с минимальным количеством полей ввода, такие как страница входа в систему и восстановления пароля.
Источник
UXPUB 🇺🇦 Дизайн-спільнота
Решение проблем неактивных кнопок в дизайне интерфейсов
Неактивная кнопка используется для визуального сообщения, что действие недоступно из-за несоблюдения определенных условий. Давайте рассмотрим три альтернативных решения, которые сделают отключенные кнопки менее неприятными
FigJam – интерактивные доски для дизайнеров от Figma
На конференции Config 2021, генеральный директор Figma Дилан Филд объявил о запуске FigJam, нового вайтборда Figma. Сейчас доступна бета-версия FigJam, но до конца 2021 года приложение будет бесплатным для всех пользователей. Ниже вице-президент Figma по продукту Юки Ямасита немного расскажет, почему мы решили создать FigJam.
Многое изменилось приблизительно за пять лет с тех пор, как Figma была запущена в закрытой бета-версии, или, как сказал тогда Дилан: во времена, когда дизайн встретился с Интернетом.
FigJam – место, где зарождаются лучшие идеи продуктов
Вот почему мы создали FigJam, интерактивную доску для дизайнеров, чтобы они могли придумывать идеи и проводить мозговой штурм с расширенными командами. Думайте о ней, как об облегченной версии Figma, которую проще освоить и еще интереснее использовать. Она предназначена для определения проблем пользователей, поиска вдохновения и изучения идей.
В FigJam встроено множество функций, которые делают его отличным местом для дизайн-мышления на ранней стадии проектирования. Команды могут использовать для мозгового штурма стикеры, смайлики и инструменты для рисования. В одиночной игре системные мыслители могут использовать фигуры, предварительно нарисованные линии и соединители для формирования юзерфлоу и построения новых процессов.
FigJam также разработан, чтобы стать единым центром для удобного взаимодействия. Встроенные аудио-функции позволяют командам легко общаться, не поднимая телефонную трубку или не начиная видеозвонок. И в отличие от альтернативных приложений, FigJam без проблем работает с Figma, поэтому команды могут хранить весь проект– от первоначальной концепции до окончательного прототипа – в одном месте.
Мы также хотели привнести в FigJam ту же теплоту и интуитивное управление, которые нравятся людям в Figma, независимо от того обдумываете ли вы идею или просто «тусуетесь». Смайлики, штампы и другие тщательно проработанные функции позволят вам полностью выразить себя.
Другими словами, в FigJam веселье встречается с функциональностью.
Это одна из причин, по которой команды Stripe, Netflix, Salesforce, Twitch и других компаний использовали FigJam в течение последних нескольких месяцев для мозгового штурма и формирования идей. Их отзывы, как хорошие, так и плохие, важны не только для нашей команды; они также подтвердили, что FigJam удовлетворяет глубокие потребности пользователей.
В 2022 году у FigJam будут как бесплатные, так и платные тарифные планы ($8 и $15 за редактора в месяц), но до конца 2021 года – любой пользователь сможет использовать FigJam совершенно бесплатно.
Мы надеемся, что вы попробуете FigJam, и если вы это сделаете, оставьте свой фидбек. Потому что наша цель – не только сделать FigJam местом, где зарождаются лучшие идеи по созданию продукта, но и сделать Figma лучшим домом для дизайнеров и их команд, чтобы они собирались и работали над проектом вместе от начала и до конца.
Источник https://ux.pub/figma-figjam/
Перевод статьи Introducing FigJam
На конференции Config 2021, генеральный директор Figma Дилан Филд объявил о запуске FigJam, нового вайтборда Figma. Сейчас доступна бета-версия FigJam, но до конца 2021 года приложение будет бесплатным для всех пользователей. Ниже вице-президент Figma по продукту Юки Ямасита немного расскажет, почему мы решили создать FigJam.
Многое изменилось приблизительно за пять лет с тех пор, как Figma была запущена в закрытой бета-версии, или, как сказал тогда Дилан: во времена, когда дизайн встретился с Интернетом.
FigJam – место, где зарождаются лучшие идеи продуктов
Вот почему мы создали FigJam, интерактивную доску для дизайнеров, чтобы они могли придумывать идеи и проводить мозговой штурм с расширенными командами. Думайте о ней, как об облегченной версии Figma, которую проще освоить и еще интереснее использовать. Она предназначена для определения проблем пользователей, поиска вдохновения и изучения идей.
В FigJam встроено множество функций, которые делают его отличным местом для дизайн-мышления на ранней стадии проектирования. Команды могут использовать для мозгового штурма стикеры, смайлики и инструменты для рисования. В одиночной игре системные мыслители могут использовать фигуры, предварительно нарисованные линии и соединители для формирования юзерфлоу и построения новых процессов.
FigJam также разработан, чтобы стать единым центром для удобного взаимодействия. Встроенные аудио-функции позволяют командам легко общаться, не поднимая телефонную трубку или не начиная видеозвонок. И в отличие от альтернативных приложений, FigJam без проблем работает с Figma, поэтому команды могут хранить весь проект– от первоначальной концепции до окончательного прототипа – в одном месте.
Мы также хотели привнести в FigJam ту же теплоту и интуитивное управление, которые нравятся людям в Figma, независимо от того обдумываете ли вы идею или просто «тусуетесь». Смайлики, штампы и другие тщательно проработанные функции позволят вам полностью выразить себя.
Другими словами, в FigJam веселье встречается с функциональностью.
Это одна из причин, по которой команды Stripe, Netflix, Salesforce, Twitch и других компаний использовали FigJam в течение последних нескольких месяцев для мозгового штурма и формирования идей. Их отзывы, как хорошие, так и плохие, важны не только для нашей команды; они также подтвердили, что FigJam удовлетворяет глубокие потребности пользователей.
В 2022 году у FigJam будут как бесплатные, так и платные тарифные планы ($8 и $15 за редактора в месяц), но до конца 2021 года – любой пользователь сможет использовать FigJam совершенно бесплатно.
Мы надеемся, что вы попробуете FigJam, и если вы это сделаете, оставьте свой фидбек. Потому что наша цель – не только сделать FigJam местом, где зарождаются лучшие идеи по созданию продукта, но и сделать Figma лучшим домом для дизайнеров и их команд, чтобы они собирались и работали над проектом вместе от начала и до конца.
Источник https://ux.pub/figma-figjam/
Перевод статьи Introducing FigJam
UXPUB 🇺🇦 Дизайн-спільнота
FigJam - интерактивные доски для дизайнеров от Figma
Интерактивная доска для дизайнеров FigJam, создана чтобы придумывать идеи и проводить мозговой штурм с расширенными командами и коммуницировать голосом
UI и UX микро-советы
1. Сохраняйте последовательность элементов дизайна
Мы люди привычки, и ожидаем, что продукты будут представлены в знакомой форме.
Мы ожидаем единообразия при навигации по сайту или приложению, и это важный принцип, которому необходимо следовать.
Это касается макета, иконок, цветов, кнопок, и других элементов интерфейса.
Будьте последовательны. Не допускайте путаницы и улучшите пользовательский опыт.
2. Щедро используйте пустое пространство
Воздух. Негативное пространство.
Это тоже самое. Просто разные названия.
Мой совет. Неважно будете ли вы использовать его щедро или умеренно, но всегда используйте его с умом.
Добавление воздуха в дизайн – один из самых простых способов мгновенно улучшить его, позволяя вашей работе «дышать»” и выглядеть более изысканно.
3. Стиль первого абзаца текста
Если вы работаете с развернутым контентом, например, с постами / статьями в блогах, важно привлечь читателя контентом.
Для достижения этой цели внешний вид первого абзаца может быть так же важен, как и его содержание.
Простые настройки, например, другой размер шрифта, высота строки, толщина и цвет – все, что нужно, чтобы произвести лучшее первое впечатление.
4. Проектируйте для удобства сканирования. Используйте короткие абзацы
При работе с длинным контентом постарайтесь, чтобы абзацы были короткими и яркими.
Мы все сканируем страницы и хотим обрабатывать информацию как можно быстрее.
Представление текста по возможности короткими, четкими абзацами – это верный способ сделать информацию удобной для чтения и усвоения.
5. Определите цветовую палитру и создайте единообразие в своем дизайне
Хотите создать более профессиональный интерфейс?
Заранее определите цветовую палитру.
Ни в коем случае не перегружайте дизайн обилием случайных цветов.
С самого начала создайте сильную цветовую палитру и придерживайтесь ее. Это позволит избежать головной боли и добавит единообразия в ваш дизайн.
6. Используя системы сетки 8pt сохраняйте последовательность при размещении иконок
Работая с иконками и сеткой 8pt, вы обнаружите, что в большинстве хорошо продуманных наборов иконок они находятся внутри рамок, кратных 8 (например, 16×16, 24×24, 32×32 и т. д.)
Лишь иногда это правило нарушается.
Если нет, убедитесь, что любая иконка, добавленная в ваш дизайн, помещена в контейнер, который использует значение кратное сетке 8pt (например, 24×24). Это позволит последовательно разместить иконки в вашем дизайне.
Источник
1. Сохраняйте последовательность элементов дизайна
Мы люди привычки, и ожидаем, что продукты будут представлены в знакомой форме.
Мы ожидаем единообразия при навигации по сайту или приложению, и это важный принцип, которому необходимо следовать.
Это касается макета, иконок, цветов, кнопок, и других элементов интерфейса.
Будьте последовательны. Не допускайте путаницы и улучшите пользовательский опыт.
2. Щедро используйте пустое пространство
Воздух. Негативное пространство.
Это тоже самое. Просто разные названия.
Мой совет. Неважно будете ли вы использовать его щедро или умеренно, но всегда используйте его с умом.
Добавление воздуха в дизайн – один из самых простых способов мгновенно улучшить его, позволяя вашей работе «дышать»” и выглядеть более изысканно.
3. Стиль первого абзаца текста
Если вы работаете с развернутым контентом, например, с постами / статьями в блогах, важно привлечь читателя контентом.
Для достижения этой цели внешний вид первого абзаца может быть так же важен, как и его содержание.
Простые настройки, например, другой размер шрифта, высота строки, толщина и цвет – все, что нужно, чтобы произвести лучшее первое впечатление.
4. Проектируйте для удобства сканирования. Используйте короткие абзацы
При работе с длинным контентом постарайтесь, чтобы абзацы были короткими и яркими.
Мы все сканируем страницы и хотим обрабатывать информацию как можно быстрее.
Представление текста по возможности короткими, четкими абзацами – это верный способ сделать информацию удобной для чтения и усвоения.
5. Определите цветовую палитру и создайте единообразие в своем дизайне
Хотите создать более профессиональный интерфейс?
Заранее определите цветовую палитру.
Ни в коем случае не перегружайте дизайн обилием случайных цветов.
С самого начала создайте сильную цветовую палитру и придерживайтесь ее. Это позволит избежать головной боли и добавит единообразия в ваш дизайн.
6. Используя системы сетки 8pt сохраняйте последовательность при размещении иконок
Работая с иконками и сеткой 8pt, вы обнаружите, что в большинстве хорошо продуманных наборов иконок они находятся внутри рамок, кратных 8 (например, 16×16, 24×24, 32×32 и т. д.)
Лишь иногда это правило нарушается.
Если нет, убедитесь, что любая иконка, добавленная в ваш дизайн, помещена в контейнер, который использует значение кратное сетке 8pt (например, 24×24). Это позволит последовательно разместить иконки в вашем дизайне.
Источник
UXPUB 🇺🇦 Дизайн-спільнота
UI и UX микро-советы: часть 4
В этой статье я представлю еще одну подборку простых в применении микро-советов по UI и UX дизайну
Роль рефлексии в процессе проектирования
В продуктовом дизайне, когда мы выпускаем фичу на рынок, мы можем рассчитывать на определенную степень объективности получаемого нами фидбека. Исходя из отзывов и показателей после релиза, мы можем сказать помогают ли пользователям наши проекты или вредят.
Получить эти показатели иногда бывает непросто. Мой опыт в основном связан с продуктами на ранней стадии разработки: когда я присоединяюсь к команде, наш продукт достиг определенного уровня соответствия требованиям рынка, а команда достигла той точки, когда имеет смысл сосредоточиться на добавлении новых фич вместо того, чтобы оптимизировать существующие. Зачастую скорость имеет приоритет над качеством.
Иногда показатели не определены полностью или не систематизируются. Были случаи, когда я призывал команду снизить темп и определить метрики продукта, чтобы мы могли лучше понять, как работает наш проект.
Без подобной обратной связи не может быть рефлексии, а без рефлексии редко можно добиться улучшения продукта. Меня беспокоит, что, переходя от одной фичи к другой и не делая пауз, чтобы подумать, мы можем упустить важные возможности для обучения.
Содержание статьи:
— Электросчетчики и петли обратной связи
— Волшебный дашборд
— Предвидьте необходимость корректив
— Фидбек с задержкой
— Конец начинается с начала
Читать: https://ux.pub/rol-refleksii-v-protsesse-proektirovaniya/
В продуктовом дизайне, когда мы выпускаем фичу на рынок, мы можем рассчитывать на определенную степень объективности получаемого нами фидбека. Исходя из отзывов и показателей после релиза, мы можем сказать помогают ли пользователям наши проекты или вредят.
Получить эти показатели иногда бывает непросто. Мой опыт в основном связан с продуктами на ранней стадии разработки: когда я присоединяюсь к команде, наш продукт достиг определенного уровня соответствия требованиям рынка, а команда достигла той точки, когда имеет смысл сосредоточиться на добавлении новых фич вместо того, чтобы оптимизировать существующие. Зачастую скорость имеет приоритет над качеством.
Иногда показатели не определены полностью или не систематизируются. Были случаи, когда я призывал команду снизить темп и определить метрики продукта, чтобы мы могли лучше понять, как работает наш проект.
Без подобной обратной связи не может быть рефлексии, а без рефлексии редко можно добиться улучшения продукта. Меня беспокоит, что, переходя от одной фичи к другой и не делая пауз, чтобы подумать, мы можем упустить важные возможности для обучения.
Содержание статьи:
— Электросчетчики и петли обратной связи
— Волшебный дашборд
— Предвидьте необходимость корректив
— Фидбек с задержкой
— Конец начинается с начала
Читать: https://ux.pub/rol-refleksii-v-protsesse-proektirovaniya/
UXPUB 🇺🇦 Дизайн-спільнота
Роль рефлексии в процессе проектирования
Без обратной связи не может быть рефлексии, а без рефлексии редко можно добиться улучшения продукта
UI-дизайн для мужчин и женщин – полное руководство
Много лет назад, когда я только начинал маленькими шажками карьеру дизайнера, у меня была возможность сотрудничать с агентством недвижимости. Моя основная роль заключалась в том, чтобы помогать команде в дизайне и разработке информационных бюллетеней, чего-то на их сайтах и ПО для менеджмента. В процессе всего этого я заметил одну особенно странную вещь: коллеги из ряда женщин и коллеги из ряда мужчин часто спорили о цветах.
Один, очень хорошо запомнившийся мне случай, – это Рождественский информационный бюллетень, где нам нужно было разработать и отправить убедительное специальное предложение с красивым красным фоном: мы меняли тон красного цвета как минимум пять раз. Изначально мною был выбран ярко-красный цвет, который понравился большинству коллег-мужчин, но не понравился ни одной женщине в компании. Их главный аргумент заключался в том, что этот оттенок ослепляет и в принципе непригоден. Поскольку это прозвучало для меня странно, я сначала подумал, что на моем мониторе что-то случилось с цветами, и что их маленькие мониторы в офисе слишком сильно выделяют красные тона… поэтому я пошел к ним, чтобы проверить это. Оказалось – нет, у них все отображалось, как и должно.
Читать статью: https://design-glory.com/6984/polnoe-rukovodstvo-po-ui-dizajnu-dlya-muzhchin-i-zhenshhin
Много лет назад, когда я только начинал маленькими шажками карьеру дизайнера, у меня была возможность сотрудничать с агентством недвижимости. Моя основная роль заключалась в том, чтобы помогать команде в дизайне и разработке информационных бюллетеней, чего-то на их сайтах и ПО для менеджмента. В процессе всего этого я заметил одну особенно странную вещь: коллеги из ряда женщин и коллеги из ряда мужчин часто спорили о цветах.
Один, очень хорошо запомнившийся мне случай, – это Рождественский информационный бюллетень, где нам нужно было разработать и отправить убедительное специальное предложение с красивым красным фоном: мы меняли тон красного цвета как минимум пять раз. Изначально мною был выбран ярко-красный цвет, который понравился большинству коллег-мужчин, но не понравился ни одной женщине в компании. Их главный аргумент заключался в том, что этот оттенок ослепляет и в принципе непригоден. Поскольку это прозвучало для меня странно, я сначала подумал, что на моем мониторе что-то случилось с цветами, и что их маленькие мониторы в офисе слишком сильно выделяют красные тона… поэтому я пошел к ним, чтобы проверить это. Оказалось – нет, у них все отображалось, как и должно.
Читать статью: https://design-glory.com/6984/polnoe-rukovodstvo-po-ui-dizajnu-dlya-muzhchin-i-zhenshhin
Аудит интерфейса — как его проводить и почему это проектирование наоборот?
Принципы разработки интерфейсов помогают отделять важное от второстепенного во время аудита.
Если дизайнер не использует принципы проектирования, у него нет системы координат: что важно, а что второстепенно, какие цели и задачи у пользователя и бизнеса, кто эти пользователи. Поэтому он руководствуется опытом, глазами, чек-листом и эвристиками Нильсена.
Богатство инструментов диктует: важно вообще все, прокомментируй каждую ошибку. Но что с ними потом делать заказчику? Исправлять отступы или упрощать структуру сайта? Как это все сразу? Слишком дорого, лучше вообще ничего не буду делать.
Дизайнер с принципами может найти столько же ошибок. Но у него нет такой задачи.
Дизайнер с принципами проводит аудит иначе: ищет ошибки и предлагает решения, аргументирует претензии к интерфейсу и оценивает степень критичности ошибок. Его задача — помочь заказчику достичь целей.
Именно принципы проектирования диктуют, что в интерфейсе нужно исправлять в первую очередь, и помогают дизайнеру не распыляться на некритичные ошибки.
Читать статью: https://vc.ru/design/237333-audit-interfeysa-kak-ego-provodit-i-pochemu-eto-proektirovanie-naoborot
Принципы разработки интерфейсов помогают отделять важное от второстепенного во время аудита.
Если дизайнер не использует принципы проектирования, у него нет системы координат: что важно, а что второстепенно, какие цели и задачи у пользователя и бизнеса, кто эти пользователи. Поэтому он руководствуется опытом, глазами, чек-листом и эвристиками Нильсена.
Богатство инструментов диктует: важно вообще все, прокомментируй каждую ошибку. Но что с ними потом делать заказчику? Исправлять отступы или упрощать структуру сайта? Как это все сразу? Слишком дорого, лучше вообще ничего не буду делать.
Дизайнер с принципами может найти столько же ошибок. Но у него нет такой задачи.
Дизайнер с принципами проводит аудит иначе: ищет ошибки и предлагает решения, аргументирует претензии к интерфейсу и оценивает степень критичности ошибок. Его задача — помочь заказчику достичь целей.
Именно принципы проектирования диктуют, что в интерфейсе нужно исправлять в первую очередь, и помогают дизайнеру не распыляться на некритичные ошибки.
Читать статью: https://vc.ru/design/237333-audit-interfeysa-kak-ego-provodit-i-pochemu-eto-proektirovanie-naoborot
vc.ru
Аудит интерфейса — как его проводить и почему это проектирование наоборот? — Дизайн на vc.ru
Каждое новое поколение сотрудников «Собаки» заново переосмысливает одну из базовых UX-услуг — аудит интерфейса. Вот очередная попытка.