Динамические бенто-сетки

Редактируемые карточки в стиле бенто можно сделать вручную, используя неразрушающие эффекты Иллюстратора. Вы сможете менять ширину отступов, количество ячеек и радиус скруглений в любой момент. 1. Рисуем поверх формы разделительные линии с обводкой. 2. Группируем линии и применяем Effect → Path → Outline Stroke и Pathfinder → Merge. 3. Группируем их с нижней формой и применяем Pathfinder → Subtract и Stylize → Round Corners. Если нужны отдельные объекты, то разбираем группу с эффектами через Object → Expand Appearance. И после ещё можно сделать плавные скругления бесплатным скриптом Round Corners Customization. — А автоматически генерировать разные сетки с настройкой количества ячеек, отступов и скруглений можно моим платным скриптом BentoGrid. #learn #illustrator #draw #paid

7 простых и понятных текстовых эффектов В этом кратком руководстве вы узнаете о 7 простых текстовых эффектах, которые можно создать в Illustrator. Никаких сложных техник, только краткие советы по улучшению вашего дизайна. 00:00 Вступление 00:10 Непрозрачность при смешивании 03:03 Текст со смещением обрезки 03:58 Абстрактная нарезка 06:18 Выбивка Pathfinder 07:58 CMYK и RGB глитч 10:30 Текст в стиле гранж Автор Nobu Design

corner-shape: squircle; Больше не нужно накидывать clip-path или использовать SVG, чтобы добиться такого эффекта. Safari догонит, Firefox — не факт.

Меня читают не только дизайнеры, но и другие роли из команд продукта, поэтому хочу сделать в этом посте небольшой ликбез Юзабилити-тесты помогают понять, насколько интерфейс продукта удобен для конечных пользователей. Главная цель тестов — выявить проблемные места, где люди сталкиваются с трудностями, и улучшить опыт взаимодействия с продуктом Тесты бывают модерируемыми — это когда есть господин-ведущий, и само исследование скорее качественного формата. А бывают немодерируемыми — это когда весь сценарий собирается на платформе (например, фабрика юзабилити / pathway / maze), и юзеры сами там все проходят по ссылке Кто проводит: Обычно дизайнеры и исследователи, но я сторонник подхода, когда любой человек из команды продукта подключается к тестам. Это дает совсем другое понимание того, как юзеры себя ведут Даже самый восхитительный (и награждаемый) дизайн не гарантирует, что юзеры смогут легко выполнять нужные действия в интерфейсе. И своевременные тесты очень помогают сэкономить ресурсы на исправление проблем после запуска или внедрения дизайна Процесс исследования обычно выглядит так: 1. Определяем цели (что хотим проверить) 2. Формулируем интерфейсные гипотезы 3. Подбираем юзеров (очевидно, подойдет не любой человек) 4. Готовим прототип 5. Проводим тест (даем задания и наблюдаем) 6. Анализируем результаты 7. Делаем выводы и внедряем улучшения Количество пользователей: Стандартно 5 человек для модерируемых тестов. Обычно тут начинается срач: «а как вы решили, что нам надо 5 человек?!». Тут все ссылаются на Nielsen Norman Group, где говорится, что при тестировании с 5 пользователями обычно выявляется около 80% проблем. На практике все берут от 5 до 10 человек на сегмент. Это значит, что если мы хотим провести тест на новой аудитории и на текущих пользователях, то нам надо хотя бы 5 человек там и там Для немодерируемых чуть сложнее. Надо учитывать общее количество пользователей и погрешность, с этим помогают специальные калькуляторы. Но можно сказать 70-100, и это в целом норм (с оговорками) Как устроен сам тест: На встречу приходит модератор (тот, кто проводит) и юзер. Модератор говорит вводное, дает задания юзеру, наблюдает и фиксирует. Юзер пытается выполнить задания и комментирует свои действия. Я тут предпочитаю донасыщать тест до и после вопросами, чтобы вытащить что-то полезное. Встречу лучше не делать дольше 1 часа, т.к. юзер устает + вовлеченность снижается Гайд и задания Каждая встреча строится на гайде, который готовится заранее. Гайд содержит в себе цели, критерии выборки юзеров и гипотезы Практический пример Пусть это какой-то сервис с видео Гипотеза: пользователь понимает, где находится история просмотра и может в нее зайти Вопрос (задает модератор): представь, что ты смотрел пару недель назад то-то...как бы ты вернулся к этой записи? По сути вопрос и есть задание, просто он сформулирован так, чтобы не давать юзеру подсказку Отчет: Провели все интервью? Ура, теперь надо свести все воедино Ищем паттерны (повторы) в проблемах и анализируем все совокупно. Для каждой проблемы полезно фиксировать встречаемость и критичность для пользователя Метрики Даже тут есть метрики, да! Часто используют: - Task Success Rate - Time on Task - Error Rate - Satisfaction (субъективная оценка от юзера) Есть еще Eye-tracking/heatmap, которые показывают, как распределяется внимание, но это скорее карты, чем метрики В зрелых командах юзабилити — это стандарт дизайн-процесса, как утром зубы почистить. Ну и напоследок — дизайн не должен рисоваться в вакууме. Проверяйте свои решения! - - - - - Я хочу сделать закрытый воркшоп узким кругом для тех, кто хочет научиться проводить юз.тесты или систематизировать знания. Всего 6 мест (5к за место) Формат такой: встреча в онлайне на пару часов, на которой пройдемся подробно по всем этапам, там же дам домашку + отдельная встреча с разбором всей домашки тоже на пару часов Это очередной эксперимент (они у меня удачные в последнее время, кстати!) Если хочешь разобраться с юзтестами, напиши мне в личку @odokienkoan

Туториал по эффекту path blur в фотошопе. #Урок

Lottie не поддерживает эффекты и экспрешены, но их можно превратить в ключи – это называется “запекать” анимацию (bake) Простой пример: Если у вас есть экспрешен loopOut("cycle"), нажмите ПКМ → Keyframe Assistance → Convert Expressions to Keyframes – в каждом кадре появится ключи, повторяющий анимацию экспрешена. Теперь такую анимацию можно использовать в Lottie. Существуют плагины, которые действуют как экспрешенны на параметре path, позволяя его изгибать, пускать волны или другие вторичные действия. Например, плагин Crazy Shapes позволяет создавать волны, изгибы, расстягивания на path, которую потом можно запечь. В гифке поста, тело медведя “растекается” благодаря эффекту waves on path. Вручную добиться такой плавности было бы сложно. ❗️ Минус запекания – увеличивается вес файла, так как ключи ставятся в каждом кадре. Решения этой проблемы: 1. Перед запеканием снизить FPS (например, до 12-30), а потом вернуть 60 – это уменьшит количество ключей, но снизит плавность. 2. Удалить лишние ключи вручную, оставив только нужные. 3. Стандартный инструмент smoother. Уменьшает количество ключей, сохраняя анимацию, но не работает на path. Это продвинутая техника, но не заменяет умение анимировать вручную. Инструменты важны, но главное – насмотренность и понимание, какого эффекта вы хотите достичь💪 Есть и другие плагины под разные задачи, Хороший пост про плагин Tilda для анимации волн. #анимация

I’m back from a dreamy 2-week vacation in Morocco 🌊 And decided to start with a quick Q&A — thanks for all your questions in comments and DMs! 💛 Let’s go Where are you from? I was born and raised in Kazan, Russia. What’s your education? I have a degree in programming. Later on, while already working as a designer, I got a master’s degree in textile design. Why did you become a designer? While learning to code, I realized I was way more into how things looked than how they worked. Why this channel? I started it just for myself — years ago on a different platform (VK), when I worked in a web studio. I were always searching for good mockups and fonts. Even though I left the studio long ago, I kept collecting and sharing — just for fun. And here we are. How did you become a UX/UI designer? 13 years ago, there were no courses, no mentors. But there were books — books that taught the value of clarity, balance, contrast, grouping, and space. In the first year, I read a lot and practiced by copying great work to build up my skills. Then I joined a startup, where I learned everything through real projects — and much of that experience still helps me today. Was I scared? Yes, 100%. I already had a stable, well-paid job, and switching paths felt like a big risk. I kept thinking: “Can I really be a designer without an art degree?” Then my neighbor — a backend developer — told me that “You don’t need to be an artist to be a UX UI designer.” He also said that some of the designers he works with don’t have any education. That helped me stop overthinking and just start. If you’ve ever had the same doubts — forget them. You don’t need a perfect background. You need curiosity, consistency, and the courage to begin. Love you all. Happy Friday — and never settle. 💛

🔗 Figma Community ▫️ #tools

Плагин для создания паттернов из выбранных фреймов 🟢 Скачать плагин 🟢 #plugin

doodad.dev/pattern-generator/#beautiful-dingbats

Это станет возможным благодаря привлекательному и яркому шаблону! Благодаря 3D-вставкам, мягкому градиенту и идеально подобранным деталям, пользователь заострит внимание на проекте и запомнит его надолго. Ссылочка на шаблон — #page=8&query=site&position=16&from_view=search&track=sph">Pattern Figma

📌 Теги: #figma / #shapes / #plugins / #design ➡️ Информация: Плагин позволяет расположить текст или фигуру по указанной кривой, например по кругу. ➡️ Скачать Нажми ❤ | Dsgn Lib

patttterns.com

Плагин для создания паттернов Install 🖼️ Figma Дизайн

Набор шейпов , орнаментов и различных паттернов Install 🖼️ Figma Дизайн

А ща вон как круто поставил плагин на мобилу и телефон и сидишь себе как Ефремов трясешь камеру с автофокусом в 0 кликов.

Привет! На связи Сережа, со-основатель Pathway👋 Сегодня я с новостями про редактор исследований: мы обновили UX и визуальную часть. Что поменялось? 01 Мы переместили кнопку "добавление нового блока" в левую колонку, чтобы она всегда была видна и не нужно было скроллить в самый низ. И, кстати, теперь она открывается по шорткату: просто нажмите N чтобы открыть выпадающее меню, а потом ↑ или ↓ + Enter чтобы быстро добавить блок. 02 Мы наконец-то дали возможность быстро добавить блок между другими блоками в любом месте исследования 03 Весь контроль над блоками теперь происходит в левой колонке 04 Мы добавили специальную иконку, чтобы было понятно, как именно перемещать блоки местами. И обновили иконки блоков для общей консистентности. ——— Попробовать новый UX уже можно тут→ Теперь работа с конструктором станет чуть проще и быстрее. И как всегда — будем рады фидбеку: тут в комментариях или в чате поддержки 💌

#кириллица #латиница Автор — Josep Patau Bellart

Коллекция абстрактных топографических текстур. #Pattern ОТКРЫТЬ

⬅️Скачать плагин➡️ #plugin