Подборка интересных материалов для веб-дизайнера за май 2020. Статьи и видео для развития: про шрифты, UI и UX; полезные плагины Figma, новый Framer for web; полезные веб-сервисы, бесплатные кириллические шрифты, проекты для вдохновения и другое. Изучайте, вдохновляйтесь и становитесь лучше!
Для развития
Знаменитые дизайнеры vs научные исследования про читаемость шрифтов
Какие шрифты, с засечками или без, легче, быстрее, приятнее читать? Для обычного человека отличий почти нет, а для тех, у кого есть проблемы с чтением — стариков, детей, людей с плохим зрением или дислексией , — предпочтительнее шрифт без засечек.
Исследование. Как люди читают онлайн
Cоздатели контента должны принять этот факт: люди вряд ли прочитают ваш контент полностью или линейно. Они просто хотят выбрать информацию, которая наиболее соответствует их текущим потребностям. Мы можем спроектировать контент, который поддерживает сканирование:
— Использование четких заметных заголовков и подзаголовков для разбивки контента на разделы, чтобы люди могли найти только то, что их больше всего интересует
— Размещение информации на переднем крае (другими словами, «фронтальная загрузка») в структуре нашего контента, а также в подзаголовках и ссылках, чтобы позволить людям быстро понять сообщение во время сканирования
— Использование методов форматирования, таких как маркированные списки и жирный текст, чтобы глаз мог сосредоточиться на наиболее важной информации
— Использование простого языка, чтобы содержание было кратким и ясным
Дизайн интернет-магазина: что учесть, чтобы не облажаться?
Цикл из 4х статей: Часть 1, Часть 2, Часть 3, Часть 4
Все что нужно знать о раскрывающихся списках (dropdown)
1. Анатомия
2. Типы и варианты раскрывающихся списков
3. Стили раскрывающихся списков
4. Состояния раскрывающихся списков
5. Что должен сказать плейсхолдер
6. Когда не использовать выпадающий список (а когда нужно)
7. Нативные раскрывающиеся списки
8. Проверка доступности?
Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)
1. Добавьте рекомендуемый слой
2. Достаточный отступ и угловой радиус на выбранном сегменте
3. Визуальная иерархия между двумя сегментами
4. Добавьте четкую визуальную индикацию (по желанию)
5. Изучите возвышение (по желанию)
14 популярных программ для создания анимации, прототипирования и дизайна интерфейсов
Статья подскажет для чего хорош каждый инструмент и сориентирует по плюсам и минусам. Среди инструментов: Principle, InVision Studio, Figma и другие.
Что делает интерфейс простым
У человека в голове есть представление о том, как устроена ваша программа — ментальная модель.
«Стихийная» модель не получится хорошей, поэтому лучше спроектируйте её.
Хорошая модель — простая. В создании простых моделей помогают приёмы «сложность под капот» и «слон кусочками».
Переобучайте пользователя, только если он будет в восторге, когда освоит новый способ.
Человек воспринимает интерфейс как простой и понятный, если он соответствует ожиданиям. Чтобы не нарушить ожидания, как минимум соблюдайте правила платформы, на которой работает программа.
Пропишите цели и сценарии работы пользователя с программой — это поможет выявить остальные ожидания.
Figma
Как создать Starter Kit в Figma
Starter Kit — библиотеки компонентов и руководства по стилю, объединенных в одно целое. Что-то, что позволяет вам предварительно подготовить основные элементы интерфейса, разгружает ваше творческое пространство и позволяет быстрее сосредоточиться на нюансах проекта.
Arc
Плагин для Figma, который помогает создавать трендовый изогнутый текст
Get Waves
Плагин для Figma, который помогает создавать векторные волнистые (и не только) формы за пару кликов.
Brainstorming
Дизайн система для создиния таблиц разной сложности.
Короткие уроки с фишками в Figma
Framer
Framer Web
Вышел новый формат Framer — веб-прложение. В бесплатном тарифе есть возможность создавать 3 проекта, работать в команде из 2х участников.
Посмотреть
Простой абстрактный 3d арт в Photoshop
Сервисы и ресурсы
SVG Artista
Сервис для создания простейшей svg-анимации. Есть 2 типа анимации: обводка и заполнение. Можно настраивать плавность, длительность, задержку, направление. На выходе получаем CSS.
Stories
Новый сервис от Freepik с бесплатными иллюстрациями и с возможностью их кастомизации и анимации прямо в сервисе. Результат анимации можно получить в форматах: GIF, mp4, svg+html
Easings
Сервис для проверки плавности анимации в интерфейсах. Есть наборы готовых решений самых популярных изингов, и так же имеется возможность создавать кастомные варианты, тестить их и копировать в свои проекты.
Columns
Простой сервис для заметок и управления задачами, проектами.
Шрифты
Илья Рудерман о корпоративных шрифтах
Code Pro
2 бесплатных начертания, поддержка кириллицы
