Советы по использованию вариантов (variants) в Figma

Если вы любите часто использовать компоненты в своих дизайнах, то вы полюбите новую функцию Figma под названием варианты (Variants). Она переводит процесс проектирования на совершенно иной уровень!

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

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

Содержание статьи 
Как создать варианты
Как сделать переключатель вместо раскрывающегося списка
Практическое использование вариантов
1. Используйте его для управления состояниями
2. Используйте его, чтобы изменить стиль
3. Различия в размерах компонентов
4. Объедините несколько свойств
Каковы ограничения вариантов?

Читать статью: https://ux.pub/sovety-po-ispolzovaniyu-variantov-variants-v-figma/

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/