Телеграм-каналы

Плагины

Сегодня поделимся с вами, какими плагинами в Figma мы в Студии пользуемся на постоянной основе.

Better File Thumbnails — удобный плагин, чтобы быстро создать обложку для файла.

Easing Gradient — полезный плагин, чтобы создать плавный градиент, особенно хорошо работает для градиентов-затемнений над фотографией.

Font Master — отличный инструмент, с помощью которого можно быстро разобраться в стилях шрифтов и почистить ненужное.

Insert Big Image — обходим ограничение фигмы, когда нужно загрузить большую картинку без потери качества, например, если нужно загрузить скриншот целой страницы какого-нибудь сайта.

OnePlus Measure — крутой и функциональный плагин, чтобы создавать гайды для интерфейсов.

Style Organizer — поможет разобраться с большим количеством цветов и все упорядочить.

Text Prettier — используйте этот плагин на каждом вашем тексте: исправляет кавычки, висячие предлоги, длинное тире и многое другое, сильно помогает.

Typescales — позволяет быстро создать типографическую систему.

Text Styles Generator — работает вместе с Typescales: после того как сгенерировали систему, переводим ее в стили с помощью этого плагина.

Ну и конечно же, Unsplash — чтобы по-быстрому поставить какую-нибудь фотографию в интерфейс.

Расстояния в типографике

Просто и без воды про расстояния в интерфейсной типографике.

Вертикальные расстояния:

1. Размер шрифта. Убедитесь, что ваши размеры контрастны между собой и при этом соотносятся. Для этого создавайте градацию размеров. Минимальная разница в размерах — 25%.

2. Расстояние между строк (интерлиньяж). Идеальное расстояние между строк — 120−140% от размера шрифта, но это правило можно нарушать. Если, к примеру, шрифт довольно крупный, то 120% будут создавать дыру между строками. Совет простой: расстояние между строками обратно пропорционально размеру шрифта. То есть чем больше шрифт, тем меньше интерлиньяж.

Горизонтальные расстояния:

1. Длина строки. Оптимально 65 символов вместе с пробелами. Людям так удобно читать, не слишком длинно и не слишком коротко.

2. Расстояние между буквами (трекинг). Трекинг можно использовать в некоторых случаях. Например, у вас есть подпись к заголовку, написанная капсом. Разработчик шрифта, скорее всего, выверяет расстояния между строчными, нежели между прописными, поэтому буквы кажутся немного сжатыми. Чтобы решить это, просто увеличьте трекинг на 5% — и ваша надпись станет как надо.

Визуальное мышление

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

Вот несколько советов, которые помогут вам фиксировать решения и при этом раскладывать у себя и у других в голове все по полочкам:

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

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

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

Выводы
Развивайте визуальное мышление, фиксируйте идеи и знания, потому что они пригодятся вам в других проектах, и заведите блокнотик в точку.

Сделано в Лаборатории Студии Чулакова

Студия Олега Чулакова

Дизайн-студия № 1 в России по версии Tagline, лучший usability / UX в стране по версии Золотого Сайта.

Специализируется на создании сложных систем и сервисов для крупных компаний. Среди клиентов Студии Tele2, ИКЕА, МегаФон, БКС Банк, Yota и другие крупнейшие российские бренды.