Бесплатный онлайн-урок по веб-дизайну в геометрическом стиле для начинающих.
Смотреть.
#WebLesson #UILesson #UXLesson
Смотреть.
#WebLesson #UILesson #UXLesson
YouTube
Бесплатный онлайн-урок по веб-дизайну в геометрическом стиле для начинающих
Хочешь больше полезностей о дизайне?
Вступай в чат Гильдии дизайнеров: https://ttttt.me/designers_guild
Подписывайся на мой инстаграм: https://www.instagram.com/yan.ageenko/
Читай мою книгу: https://www.litres.ru/yan-ageenko/kak-stat-dizaynerom-s-nulya/?…
Вступай в чат Гильдии дизайнеров: https://ttttt.me/designers_guild
Подписывайся на мой инстаграм: https://www.instagram.com/yan.ageenko/
Читай мою книгу: https://www.litres.ru/yan-ageenko/kak-stat-dizaynerom-s-nulya/?…
Как создать концепцию: опыт и принципы
Концепция — это этап на ранней стадии развития продукта, на котором смыслы обретают форму, чтобы донести основную идею. Этот этап также важная точка отсчёта и синхронизации команды по принципам масштабирования продукта и его дизайна.
Когда перед командой стоит задача заложить дизайн-концепцию, которая должна не только отвечать требованиям IT-отрасли, но и отражать все смыслы, которые находятся под капотом продукта, а также иметь запас прочности для дальнейшего роста, легко потеряться во взаимоотношениях бизнеса и пользователя — и сложно нащупать то, от чего можно оттолкнуться, чтобы найти точки соприкосновения между разными слоями продукта.
Мы описали основные шаги в создании дизайн-концепции — они и послужат опорой для дизайнера и команды в условиях неопределенности ранней стадии.
Читать статью
#DesignLesson
#UILesson
#UXLesson
Концепция — это этап на ранней стадии развития продукта, на котором смыслы обретают форму, чтобы донести основную идею. Этот этап также важная точка отсчёта и синхронизации команды по принципам масштабирования продукта и его дизайна.
Когда перед командой стоит задача заложить дизайн-концепцию, которая должна не только отвечать требованиям IT-отрасли, но и отражать все смыслы, которые находятся под капотом продукта, а также иметь запас прочности для дальнейшего роста, легко потеряться во взаимоотношениях бизнеса и пользователя — и сложно нащупать то, от чего можно оттолкнуться, чтобы найти точки соприкосновения между разными слоями продукта.
Мы описали основные шаги в создании дизайн-концепции — они и послужат опорой для дизайнера и команды в условиях неопределенности ранней стадии.
Читать статью
#DesignLesson
#UILesson
#UXLesson
Telegraph
Как создать концепцию: опыт и принципы
Этап разработки концепции поможет команде Заложить принципы масштабирования продукта от версии к версии, чтобы избежать грубого редизайна и ошибок в архитектуре. Собрать все смыслы в единую картину и подчеркнуть с помощью UX/UI-дизайна ключевые ценности и…
LightBox с точки зрения UX/UI и как он меняет продукты
В Экосистеме РСХБ мы создаем инновационные продукты для сельского хозяйства.
Для их разработки мы решили использовать подход мировых компаний в области UX/UI.
Чтобы не повторять ошибки конкурентов и создать полноценную экосистему.
Основой всех продуктов экосистемы стал LightBox, который является сквозным функциональным дизайн-решением. Например, в проекте для фермеров, мы решаем насущные проблемы и вопросы фермера в одном окне и кроме маркетплейса товаров предоставляем большое число услуг
и сервисов.
Сложность проекта заключается в объединении в одном портале разных сценариев и ролей.
Что такое LightBox и почему именно «LightBox», а не «LightWindow», в чем его отличие от Pop-up, как он способен изменить продукт. Все это я постараюсь рассказать ниже.
Время чтения: 5 мин
Читать статью
#DesignLesson
#UiLesson
#UXLesson
В Экосистеме РСХБ мы создаем инновационные продукты для сельского хозяйства.
Для их разработки мы решили использовать подход мировых компаний в области UX/UI.
Чтобы не повторять ошибки конкурентов и создать полноценную экосистему.
Основой всех продуктов экосистемы стал LightBox, который является сквозным функциональным дизайн-решением. Например, в проекте для фермеров, мы решаем насущные проблемы и вопросы фермера в одном окне и кроме маркетплейса товаров предоставляем большое число услуг
и сервисов.
Сложность проекта заключается в объединении в одном портале разных сценариев и ролей.
Что такое LightBox и почему именно «LightBox», а не «LightWindow», в чем его отличие от Pop-up, как он способен изменить продукт. Все это я постараюсь рассказать ниже.
Время чтения: 5 мин
Читать статью
#DesignLesson
#UiLesson
#UXLesson
Teletype
LightBox с точки зрения UX/UI и как он меняет продукты
1 — С точки зрения разработки LightBox представляет собой всплывающее окно с изображением.
Интерфейс 6+: принципы разработки UX/UI для детей
Когда мы говорим о дизайне для детей, перед глазами обычно возникает красочная картинка с крупными кнопками и мультяшными персонажами. В реальности, разумеется, все далеко не так просто. Создавая «детский» интерфейс, вы должны учитывать десятки нюансов: от навигации до пользовательских путей — чтобы ваш результат отвечал особенностям восприятия ребенка.
Читать статью
#DesignLesson
#UXLesson
#UILesson
Когда мы говорим о дизайне для детей, перед глазами обычно возникает красочная картинка с крупными кнопками и мультяшными персонажами. В реальности, разумеется, все далеко не так просто. Создавая «детский» интерфейс, вы должны учитывать десятки нюансов: от навигации до пользовательских путей — чтобы ваш результат отвечал особенностям восприятия ребенка.
Читать статью
#DesignLesson
#UXLesson
#UILesson
Teletype
Интерфейс 6+: принципы разработки UX/UI для детей
Для создания качественного решения важно понимать, как работает детский ум и чем он отличается от «взрослой» логики. То, как ребенок...
Почему кнопки отмены должны быть бесцветными
Что именно делает кнопка «Отмена»? Она возвращает пользователя к предыдущему экрану. Для юзеров Cancel – средство защиты от нежелательных изменений в системе. Чтобы пользователи чувствовали себя в безопасности, кнопка «Отмена» должна означать отступление к надежности, а не призыв к действию.
Вот почему кнопки «Отмена» должны быть бесцветными.
Нейтральный цвет для нейтральной кнопки
Цвет на кнопках сигнализирует о призыве к действию. Cancel – не призыв к действию, поскольку после ее нажатия в системе не происходит никаких изменений. Именно поэтому вы не должны выделять её цветом. В обратном случае вы создаете у пользователей ложное впечатление.
Юзеры на подсознании должны чувствовать, что «Отмена» – это их тихая бухта в море системных изменений.
Нейтральный цвет обозначает нейтральную, не призывающую ни к каким действиям кнопку. Когда пользователи замечают, что кнопка «Отмена» не имеет цвета, они быстрее распознают ее как запасной вариант. Это важно для людей, которые по ошибке активируют экран подтверждения и хотят вернуть всё, как было.
Когда у каждой кнопки на экране есть цвет, они «соревнуются» за внимание пользователя. Это заставляет юзеров обдумывать каждое действие дольше. Кнопка отмены нейтрального цвета позволяет им быстрее принимать решение. Те же, кто хочет совершить действие, не будут отвлекаться на кнопку «Отмена».
У «Отмены» много имен
Не все кнопки отмены называются именно «Отмена» (Cancel), но принцип их действия идентичен. Возврат к предыдущему экрану может называться «Не сейчас», «Нет, спасибо», «Возможно, позже» или «Пропустить» в зависимости от контекста.
Если ваша кнопка – как бы она ни называлась – подразумевает отмену от любого действия, вы должны рассматривать ее как кнопку «Отмена». Она выполняет ту же функцию.
Чем больше кнопок на экране, тем важнее сделать понятный уход от выбора. Посмотрите на пример выше. На скрине слева вам приходится прочитать все опции, чтобы понять. Справа вам даже читать не нужно.
Достаточно тёмный серый
При использовании серого на кнопке важно сделать этот цвет достаточно тёмным. В противном случае кнопка может выглядеть как отключенная. Контраст можно легко проверить с помощью инструментов наподобие Contrast Checker.
Сделайте свою кнопку нейтральной
В большинстве случаев, когда пользователи активируют экран подтверждения, они готовы к действиям. Но если это вышло случайно, или юзер просто передумал, кнопка «Отмена» должна стать для него спасением.
Цветная кнопка «Отмена» посылает неверный сигнал. Она запутывает юзеров, вынуждая считать её ещё одним призывом к действию. Сделайте свою кнопку нейтральной, чтобы у пользователя было больше контроля и свободы при использовании вашего приложения.
#UXLesson
Что именно делает кнопка «Отмена»? Она возвращает пользователя к предыдущему экрану. Для юзеров Cancel – средство защиты от нежелательных изменений в системе. Чтобы пользователи чувствовали себя в безопасности, кнопка «Отмена» должна означать отступление к надежности, а не призыв к действию.
Вот почему кнопки «Отмена» должны быть бесцветными.
Нейтральный цвет для нейтральной кнопки
Цвет на кнопках сигнализирует о призыве к действию. Cancel – не призыв к действию, поскольку после ее нажатия в системе не происходит никаких изменений. Именно поэтому вы не должны выделять её цветом. В обратном случае вы создаете у пользователей ложное впечатление.
Юзеры на подсознании должны чувствовать, что «Отмена» – это их тихая бухта в море системных изменений.
Нейтральный цвет обозначает нейтральную, не призывающую ни к каким действиям кнопку. Когда пользователи замечают, что кнопка «Отмена» не имеет цвета, они быстрее распознают ее как запасной вариант. Это важно для людей, которые по ошибке активируют экран подтверждения и хотят вернуть всё, как было.
Когда у каждой кнопки на экране есть цвет, они «соревнуются» за внимание пользователя. Это заставляет юзеров обдумывать каждое действие дольше. Кнопка отмены нейтрального цвета позволяет им быстрее принимать решение. Те же, кто хочет совершить действие, не будут отвлекаться на кнопку «Отмена».
У «Отмены» много имен
Не все кнопки отмены называются именно «Отмена» (Cancel), но принцип их действия идентичен. Возврат к предыдущему экрану может называться «Не сейчас», «Нет, спасибо», «Возможно, позже» или «Пропустить» в зависимости от контекста.
Если ваша кнопка – как бы она ни называлась – подразумевает отмену от любого действия, вы должны рассматривать ее как кнопку «Отмена». Она выполняет ту же функцию.
Чем больше кнопок на экране, тем важнее сделать понятный уход от выбора. Посмотрите на пример выше. На скрине слева вам приходится прочитать все опции, чтобы понять. Справа вам даже читать не нужно.
Достаточно тёмный серый
При использовании серого на кнопке важно сделать этот цвет достаточно тёмным. В противном случае кнопка может выглядеть как отключенная. Контраст можно легко проверить с помощью инструментов наподобие Contrast Checker.
Сделайте свою кнопку нейтральной
В большинстве случаев, когда пользователи активируют экран подтверждения, они готовы к действиям. Но если это вышло случайно, или юзер просто передумал, кнопка «Отмена» должна стать для него спасением.
Цветная кнопка «Отмена» посылает неверный сигнал. Она запутывает юзеров, вынуждая считать её ещё одним призывом к действию. Сделайте свою кнопку нейтральной, чтобы у пользователя было больше контроля и свободы при использовании вашего приложения.
#UXLesson
This media is not supported in your browser
VIEW IN TELEGRAM
Один из способов сообщить пользователю о состоянии системы в UI, показать его местоположение
Видимость состояния системы — одна из десяти эвристик Якоба Нильсена для проектирования в мире UI. Сообщая о текущем состоянии системы, вы предоставляете пользователям ощущение контроля над системой, и, в свою очередь, это чувство помогает вам завоевать их доверие.
Местоположение
Информирование пользователей о том, где они находятся в приложении, важно для создания хорошего навигационного опыта. И приложения, и веб-сайты должны выделять выбранный в данный момент параметр навигации, чтобы помочь пользователям понять их текущее местоположение.
#UIlesson
#UXlesson
Видимость состояния системы — одна из десяти эвристик Якоба Нильсена для проектирования в мире UI. Сообщая о текущем состоянии системы, вы предоставляете пользователям ощущение контроля над системой, и, в свою очередь, это чувство помогает вам завоевать их доверие.
Местоположение
Информирование пользователей о том, где они находятся в приложении, важно для создания хорошего навигационного опыта. И приложения, и веб-сайты должны выделять выбранный в данный момент параметр навигации, чтобы помочь пользователям понять их текущее местоположение.
#UIlesson
#UXlesson
Иллюзия рациональности
Люди делают рациональный выбор, основываясь на своем восприятии.
Пример: учтите, что клиенты, как правило, выбирают маленькую упаковку (следовательно, она дешевле), а вы хотите продвигать большую упаковку. Для этого вы должны добавить еще один вариант, который немного меньше, чем большой.
Теперь клиенты, как правило, склонятся к выбору средняя упаковки (делать выбор безопаснее). Но они замечают, что большая упаковка всего на несколько долларов дороже, чем средняя. Таким образом, они решили купить большую упаковку.
#психология
#UXLesson
Люди делают рациональный выбор, основываясь на своем восприятии.
Пример: учтите, что клиенты, как правило, выбирают маленькую упаковку (следовательно, она дешевле), а вы хотите продвигать большую упаковку. Для этого вы должны добавить еще один вариант, который немного меньше, чем большой.
Теперь клиенты, как правило, склонятся к выбору средняя упаковки (делать выбор безопаснее). Но они замечают, что большая упаковка всего на несколько долларов дороже, чем средняя. Таким образом, они решили купить большую упаковку.
#психология
#UXLesson
Как создать концепцию: опыт и принципы
Концепция — это этап на ранней стадии развития продукта, на котором смыслы обретают форму, чтобы донести основную идею. Этот этап также важная точка отсчёта и синхронизации команды по принципам масштабирования продукта и его дизайна.
Когда перед командой стоит задача заложить дизайн-концепцию, которая должна не только отвечать требованиям IT-отрасли, но и отражать все смыслы, которые находятся под капотом продукта, а также иметь запас прочности для дальнейшего роста, легко потеряться во взаимоотношениях бизнеса и пользователя — и сложно нащупать то, от чего можно оттолкнуться, чтобы найти точки соприкосновения между разными слоями продукта.
Мы описали основные шаги в создании дизайн-концепции — они и послужат опорой для дизайнера и команды в условиях неопределенности ранней стадии.
Читать статью
#DesignLesson
#UILesson
#UXLesson
Концепция — это этап на ранней стадии развития продукта, на котором смыслы обретают форму, чтобы донести основную идею. Этот этап также важная точка отсчёта и синхронизации команды по принципам масштабирования продукта и его дизайна.
Когда перед командой стоит задача заложить дизайн-концепцию, которая должна не только отвечать требованиям IT-отрасли, но и отражать все смыслы, которые находятся под капотом продукта, а также иметь запас прочности для дальнейшего роста, легко потеряться во взаимоотношениях бизнеса и пользователя — и сложно нащупать то, от чего можно оттолкнуться, чтобы найти точки соприкосновения между разными слоями продукта.
Мы описали основные шаги в создании дизайн-концепции — они и послужат опорой для дизайнера и команды в условиях неопределенности ранней стадии.
Читать статью
#DesignLesson
#UILesson
#UXLesson
Telegraph
Как создать концепцию: опыт и принципы
Этап разработки концепции поможет команде Заложить принципы масштабирования продукта от версии к версии, чтобы избежать грубого редизайна и ошибок в архитектуре. Собрать все смыслы в единую картину и подчеркнуть с помощью UX/UI-дизайна ключевые ценности и…