5 UI/UX трендов 2021 года ставящих пользовательский опыт на первое место

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

Это касается онлайн совещаний, банкинга, записи к врачу и других сфер жизнедеятельности. Появилась новая волна пользователей. Люди, привыкшие получать физические услуги, сейчас переходят к цифровым сервисам. Только от UI/UX дизайнеров зависит, получится ли пользовательский опыт позитивным. Поэтому мы обязаны определить и удовлетворить все запросы пользователей. Прочтите статью, чтобы узнать, какой UI/UX дизайн будет в трендах 2021 года.

1. Более тщательное поведенческое исследование
2. Доступные ознакомительные инструкции
3. Скевоморфный дизайн
4. Анимации в пользовательском интерфейсе
5. Виртуальные события с эффектом присутствия

Читать статью: https://say-hi.me/design/5-ui-ux-trendov-2021.html

Как создать продуманный дизайн push-уведомлений

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

Содержание статьи 

— Как обстоят дела с уведомлениями?
— Они привлекают наше внимание
— Как прокачать визуалку (UI) и научиться красть как художник
— Как создать иллюстрации, когда не умеешь рисовать
— Профессиональный дизайн формы и элементов формы
— Они мешают нам
— Проблема с красным цветом
— Когнитивная перегрузка
— Бессмысленность и анти-уведомления
— Чем полезны продуманные уведомления?
— Проектирование продуманных уведомлений
— Управление уровнем внимания
— Предоставление контроля пользователям

Читать статью

Топ-10 лучших кириллических шрифтов для твоего проекта

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

01. Neue Machina
02. Ruberoid
03. Igra
04. Resist
05. Kharkiv Tone
06. Geometria
07. Inter
08. Le Murmure
09. Buyan
10. SK Primo

Читать статью

UI-элементы и жесты в мобильных приложениях

Вы часто задумывались, обнаружив баг в мобильном приложении и заводя его в баг-трекер, как правильно назвать ту или иную часть интерфейса или действие, которые привели к ошибке? Или читаешь описание задачи и задумываешься, как должен выглядеть какой-то экран и что должно появиться при тапе на кнопку. А может, вы описываете продуктовые задачи и не всегда чувствуете себя на одной волне с дизайнерами и разработчиками, которые иногда начинают говорить на эльфийском? Чтобы исключить недопонимание, неясности и вопросы, мы решили создать перечень наиболее распространенных элементов и жестов и показать их на примере Юлы.

А вы знали, как называется «та самая выезжающая снизу экрана шторка» или несколько (три и более) тапов подряд? Ответы на эти вопросы и названия многих других элементов читайте в нашей статье.

Читать: https://habr.com/ru/company/youla/blog/540768/

36 принципов реализации сервисных страниц для интернет-магазина

Общие принципы реализации сервисных страниц

1. Не прячьте страницы с важной для пользователя сервисной информацией
2. Упростите пользователю считывание информации на странице
3. Предоставьте факты, покажите выгоды
4. Сформируйте эмоциональную связь через сторителлинг
5. Подтолкните посетителя к действию
6. Расскажите о вариантах оплаты
7. Предупредите о комиссиях или скидках
8. Прячьте описания подробностей оплаты в раскрывающийся при клике список
9. Направьте посетителя к товарам
10. Покажите географию обслуживания
11. Укажите способы и условия доставки
12. Проверяйте актуальность информации, указанной на сервисных страницах
13. Внедрите калькулятор доставки
14. Указывайте срок хранения заказа и ограничения по доставке
15. Расскажите о возможности самовывоза и сделайте его комфортным
16. Расскажите о дополнительных услугах
17. Ответьте на все вопросы о возврате простым языком
18. Позаботьтесь о возможности вернуть товар с помощью сайта
19. Не дайте перепутать страницу возврата с политикой возврата
20. Избегайте неочевидных названий ссылок и не прячьте их
21. Дайте возможность вернуть товар в офлайн-магазине или точке выдачи
22. Помогите найти раздел «Вопрос-ответ»
23. Узнайте, что волнует покупателей
24. Отвечайте на вопросы покупателей на их языке
25. Правильно форматируйте вопросы и ответы
26. Направляйте посетителя к нужным страницам
27. Используйте визуальную информацию
28. Реализуйте функционал поиска по вопросам
29. Создайте отдельные страницы для объемных вопросов
30. Не прячьте ссылку на страницу «Контакты»
31. Предоставьте максимум способов связи
32. Попросите заполнить форму или направьте пользователей на раздел «Вопрос-ответ»
33. Добавьте СТА (призыв к действию)
34. Заинтересуйте партнеров
35. Развейте опасения пользователей
36. Сделайте страницу 404 информативной

Читать статью: https://vc.ru/design/203754-37-principov-realizacii-servisnyh-stranic-dlya-internet-magazina

Обзор 7 лучших программ для создания прототипа сайта

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

Статья подскажет, для чего поможет каждый инструмент, и сориентирует по плюсам и минусам. Среди инструментов: Figma, InVision Studio, Tilda и другие.

1. Figma — бесплатно (веб-приложение и desktop-приложение)
Figma построена на технологиях electronjs, а значит, вы сможете дизайнить на любой платформе: Windows, Mac, ChromeOS и даже Linux. А еще — приятный бонус: ваши дизайны сохраняются моментально в облаке, а значит, вся работа всегда в сохранности и готова к демонстрации клиентам. 

2. InVision Studio (Windows и Maс)
InVision Studio так же универсальна как Figma, но поддерживает еще и эффектные анимации и интерактив. Этот инструмент отлично работает как самостоятельное решение, а также клево дополняет Figma для создания топового UX. С помощью плагина можно перенести дизайн из Figma в InVision Studio и добавить анимаций, чтобы оживить дизайн и собрать эффектный концепт.

3. Adobe XD — бесплатно или 772,80 руб./мес. (Mac и Windows)
Альтернатива Figma для тех, кто пользуется всей экосистемой Adobe Creative Cloud. Вы сможете обмениваться ресурсами с другими инструментами, например Photoshop или Illustrator.

4. Principle (Только под Mac)
Альтернатива InVision Studio (только в нем нельзя рисовать детальные макеты, дополняет Figma/Sketch, но работает только на Mac). Особенно Principle хорош для создания эффектных шоуриллов и анимированных промостраниц. Для прототипирования взаимодействия такой же крутой, как и InVision Studio. 

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

6. Webflow
Для фанатов резиновых сайтов и ценителей свободы верстки и анимации на сайте. Требует определенных знаний верстки (основы веб-разработки) на старте. В Webflow вы можете собрать горизонтальный скролл, скрыть графику в зависимости от устройства или прокинуть анимацию из After Effects.

7. Тильда и Tilda Zero Block
Почти такой же мощный, как Webflow, но проще для старта, не требует знания верстки. Идеален, если вы готовы мириться с определенными ограничениями в анимации и местами подстроиться под стандартное поведение.

Подробнее о каждой в источнике

Где лучше работать? Дизайн-агентство vs. продуктовая компания

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

На протяжении своей карьеры автор имел удовольствие работать в нескольких совершенно разных командах дизайнеров. Они были разного размера, придерживались разного стиля работы и командной динамики. Некоторые из этих команд были командами дизайнеров в крупных компаниях, другие – в стартапах, а совсем недавно я начал работать в небольшом дизайн-агентстве. Исходя из опыта работы в этих командах, он начал замечать и выявлять самые большие различия между работой в агентстве и в штатной команде дизайнеров.

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

— Как прокачать визуалку (UI) и научиться красть как художник
— Как создать иллюстрации, когда не умеешь рисовать
— Ширина vs. глубина
— Продукт vs. процесс
— Командная динамика
— Встречи
— Графики, дедлайны и приоритеты

Читать статью: https://ux.pub/gde-luchshe-rabotat-dizayn-agentstvo-vs-produktovaya-kompaniya/

Как создать продуманный дизайн push-уведомлений

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

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

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

Содержание статьи  

1. Как обстоят дела с уведомлениями?
—Они привлекают наше внимание
—Они мешают нам
—Проблема с красным цветом
—Когнитивная перегрузка
—Бессмысленность и анти-уведомления

2. Чем полезны продуманные уведомления?

3.Проектирование продуманных уведомлений
— Управление уровнем внимания
—Предоставление контроля пользователям


Читать статью: https://ux.pub/kak-sozdat-produmannyy-dizayn-push-uvedomleniya/#Kak_prokacat_vizualku_UI_i_naucitsa_krast_kak_hudoznik

Уже завтра начинается Design Line Workshop⚡️

6 выходных вас будут качать сильнейшие кураторы страны по разным направлениям. С4D, UI/UX, креативность, брендинг, работа с клиентом и карьера дизайнера. 6 новых работ за один месяц. 

Уже более 500 участников ждут старта, а обсуждения дизайна в чате не прекращаются не на минуту. 
🔥Успей купить билет и попасть в последний вагон: https://workshop.dsgnline.ru 

P.S Юзай промокод DSGNLINE, чтобы получить скидку!

7 простых советов, которые помогут улучшить рабочий процесс в Figma

В этой статье несколько простых советов, которые помогут вам ускорить рабочий процесс при работе в Figma.

Большинство из этих советов идеально подойдут, если вы работаете с дизайн-системами или большими файлами дизайна, но, кроме того, они пригодятся при повседневной работе в Figma.

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

1. Используйте функцию «Math» в Инспекторе. Поберегите свои мозги для более важных дел

Не тратьте время, пытаясь вручную подобрать правильные размеры элементов.
Просто используйте функцию «Math» в Инспекторе и сэкономьте время.

2. Используйте панель «Selection Colors», если хотите моментально изменить цвета

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

Используйте панель «Selection Colors» и настраивайте эти цвета оптом и намного быстрее.

3. Поддерживайте порядок в слоях с помощью удобного сочетания клавиш

Раньше у меня был настоящий хаос на панели «Слои». Были открыты все группы и элементы, что затрудняло поиск нужных элементов.
Используйте сочетание клавиш ALT + L, чтобы время от времени сворачивать все слои, тогда панель будет выглядеть аккуратно, а ваше внимание было сосредоточено на текущем проекте.

4. Используйте поиск, чтобы быстрее находить текстовые стили

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

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

5. Используйте вид «Список» для быстрой навигации по цветовым стилям

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

Мне кажется, что переключение Инспектора с «Сетки» на «Список» всегда помогает быстрее ориентироваться в цветовых стилях, потому что тогда видна метка, а не только образец цвета.

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

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

Используйте сочетания клавиш Enter и Tab, чтобы быстро просматривать элементы на панели «Слои» и быстро находить нужные.

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

7. Быстрая замена компонентов с помощью этого удобного сочетания клавиш

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

Например, просто выберите иконку на панели «Assets», а затем, удерживая нажатыми клавишы ALT + CMD, перетащите ее на свой дизайн. Вы увидите фиолетовую рамку вокруг существующей иконки, а затем просто поменяйте их местами!

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

Источник