Май 2020

Веб-дизайн дайджест #47

Подборка интересных материалов для веб-дизайнера за апрель 2020. Статьи и видео для развития: про шрифты, фриланс, UI и UX; полезности и новинки Figma, полезные веб-сервисы, бесплатные кириллические шрифты, проекты для вдохновения и другое. Изучайте, вдохновляйтесь и становитесь лучше!

Для развития

Какие кириллические шрифты популярны в 2020? [исследование]

Список составлен на основе исследования 200 русскоязычных сайтов которые создали топовые дизайн студии

Где найти фриланс, который будет приносить удовольствие? (Спойлер: не Upwork)

Сообщества фрилансеров
Компании, которые работают с фрилансерами и объединяют их
Рассылки
Группы выпускников фриланс-курсов

Самый полный список принципов ui анимации для ux дизайнеров: физические законы в пользовательских интерфейсах

Основы физики в анимации интерфейсов: Тайминг и темп, Размер и вес, Гравитация (Сила тяжести), Cопротивление, Действие и реакция (противодействие). А также 12 принципов анимации в интерфейсах
от аниматоров студии Disney.

Как сделать каталог, чтобы покупали наверняка. Примеры UX-фильтров для e-commerce

Предложите пользователю сначала сделать выбор из нескольких категорий и только затем применить фильтр.
Горизонтальная панель фильтров значительно превосходит боковую с точки зрения удобства и эффективности, хотя подходит не для каждого сайта.
Грамотный интерфейс должен учитывать, что в категории фильтра надо показывать пользователю актуальные и/или популярные параметры. Остальные — лучше удалить или скрыть. Тогда не будет необходимости в длинных списках.
Мгновенная фильтрация — это когда система реагирует на каждый выбор параметра пользователем и обновляет страницу, учитывая уже выбранный параметр. Такой фильтр полезен для пользователей, которые не имеют четкого представления, что именно хотят: сначала покажите им структуру каталога, а затем варианты параметров.
Фильтрация по запросу означает, что страница обновляется и дает результаты только после того, как вы сделали выбор и нажали кнопку «Применить». Если интернет медленный, такой тип фильтрации экономит время пользователя между запросами.
Повторите выбранные параметры фильтрации в верхней части страницы, чтобы можно было их легко удалить при необходимости
Названия параметров должны быть: Предсказуемыми; Без жаргона и сленга; Простыми и понятными.

Figma

Дизайн-система в Figma

Часть 1: Типографика, цвета и стили

Часть 2: Кнопки

Часть 3: Поля ввода и выпадающие списки

Часть 4: Поиск и умный поиск

Часть 5: Списки и Auto Layout

Эмуляция метаболла — слияние объектов

Часть 1: Эмуляция метаболла в Figma

Часть 2: Эмуляция метаболла в WEB с чистым CSS

Хардкорные карточки на Auto Layout – Figma компоненты, часть 2

Подробное описание создания компонентов карточек с примерами на каждом этапе в виде gif-ок

Фирма теперь поддерживает ссылки

Появилась возможность вставлять ссылки в макеты, которые будут кликабельны. Нажмите Cmd/Ctrl + K или кнопку Create Link в верхней панели, и введите ссылку в появившемся поле ввода. Ссылка будет работать в файле, в прототипе, в PDF.