Тренировочный Джедайст #57

Делаем сайты как не в себя

Editor X — что-то среднее между бизнес-ориентированной Tilda и креативным Webflow, только от Wix (не ожидали?). Предлагает целую уйму фич: стеки и повторяющиеся сетки, CSS-гриды и ресайз на флексбоксах, эффекты скролла и подгрузку дизайн-систем из Wix, кастомные брейкпойнты — каждый со своим стилем.

Теперь актёрское портфолио из бесячей рекламы Wix можно сделать намного круче :–)

В самом Readymag теперь можно сделать аналог лендоса AirPods Pro. Доступный только в про-тарифе виджет Shots нарежет видео на кадры и проиграет их по скроллу или триггеру.

Эффективная и выгодная реклама с сервисом от МегаФона

Широкий выбор рекламных каналов, более 100 параметров по интересам, подробная аналитика и другие возможности уже ждут в Личном кабинете. А еще кешбэк 100% за запуск рекламы в первый месяц и еще 10% — каждый месяц.

Узнать больше >>

Реклама. ПАО «МегаФон». ИНН 7812014560. ОГРН 1027809169585. ERID LjN8K1P7y.

Если искали конструктор сайтов с встроенными A/B-тестами, то вам к Unstack. Сервис поможет запустить полноценные сайты, лендосы, блоги с формами и подписками и изучать потом метрики воронки и пути конверсии. Бесплатно можно только подключить домен; за SSl и аналитику придется отдать от 22$ в месяц; а за A/B-тесты, премиальные интеграции и анализ конверсии — от 39$ в месяц.

Designmodo собрали в кучу все свои инструменты. Крутейший сервис онлайн-конструкторов сайтов, веб-презентаций и почтовых рассылок знатно обновился:

• Появилась работа с несколькими сайтами и письмами из разных проектов.

• Добавили онлайн-редактор HTML/CSS/JS.

• Есть подгрузка контента в облако, гибкий экспорт и плагин для WordPress.

А ещё на сайте можно купить иллюстрации и почитать статейки.

Быстро про обновления редакторов

В Figma появились шорткаты для изменения трекинга, высоты строки и веса шрифта. Обновили панель стилей: для цветовых добавили переключение вида список-сетка, для текстовых теперь рядом отображается пара кегль/высота строки, а ещё прикрутили внутренний поиск.

Тут упомянем плагин Style Organizer, сочетающий управление стилями библиотеки и конкретного файла с линтингом. Зацените, если мечтали о чём-то подобном. И Design Tokens обеспечивает чтение из JSON, создание единых цветов, размеров, расстояний, закруглений и прозрачностей в фигмовских стилях и экспорт. Обещают синхронизацию с внешними JSON-файлами, поддержку типографики и экспорт в большее количество форматов.

Sketch тестирует новый тип пользователей — ассистентов. Они могут проверять макеты, искать проблемы, готовить файлы к совместной работе и проверять соответствие дизайн-китам.

А Framer облегчает передачу кодовых компонентов — разработчики теперь могут увидеть их конфигурации, чётко видеть переопределяемые свойства и используемые токены. Добавили ещё подсветку интерактивных элементов в режиме прототипа.

Рисуем с удовольствием

Мощный видеоредактор под Mac и Windows Create Studio позволяет работать с готовыми персонажами, кинетической типографикой и масками, применять и добавлять пресеты анимаций, вырезать фон из роликов. Позиционируется как решение для создания тизеров, туториалов и промороликов. Всё это дело обойдётся минимум в 197 $.

Простой вебтул для создания wrap-эффекта на SVG-картинках. Есть несколько вариантов сложности сетки — от 4 до 28 опорных точек. Поможет в ряде случаев: от создания контента для проектов и соцсетей до брендинга.

Онлайн-рисовалка пиксельных иллюстраций с экспортом в SVG, PNG и CSS.

Сгенерировать целую кучу паттернов, плоских и псевдо-3D фигур, а потом выгрузить их в SVG можно в Quickly. Есть ещё Sketch-плагин.

Генератор скруглённых квадратов (squircle), чтобы ваши макеты стали более мимимишными.

ColorSpace поможет сгенерировать к одному цвету сразу несколько палитр, двух- и трёхцветных градиентов.

Работаем с шрифтом и не только

Милейший инструмент для подбора шрифтовых пар. Здорово, что позволяет примерить выбранное сочетание на целый ряд визуалов: и на постеры с баннерами, и на презентации с лендосами.

А в Shaper можно примерить к готовому интерфейсу и шрифт с тайпсеттингом, и цветовые акценты, и параметры границ блоков.

Любопытный инструмент Wunl Colors генерирует цветовые схемы на основе картин и мультиков, а потом применяет их к мокапам приложений. Выглядит странновато, но для нишевых проектов может и подойти.

Больше ресурсов богу ресурсов!

7 красивишных шаблонов для презенташек в Figma — для тех, кто хочет и быстро, и красиво, и не погружаться в Powerpoint и иже с ним.

28 UI-китов для Figma со всего мира — тут и Doker, и Atlassian, и даже Audi затесалась. Поможет не потерять компоненты при разработке своего кита.

Симпатичный набор 700 геометрических узоров Blocco в виде библиотеки Sketch и набора svg-файлов. А вот цена так себе — 119 $.

Тренируемся и узнаём больше

Большущий генератор дизайн-задач. Можно выбрать челлендж в брендинге, маркетинге или UX. Самое оно, чтобы собрать портфолио с нуля или пораскинуть мозгами.

Set Product — уберсайтец с UI-китами для Figma, набором паттернов для iOS приложений, разделенных по категориям, обзавёлся коллекцией паттернов для инфографики. Всего пока 17 видов диаграмм с описаниями, примерами в светлой и тёмной темах.

Наткнулись на ещё один сервис о диаграммах. Чувак со степенью кандидата наук по статистике рассказывает, какой тип графиков и когда применять. Внутри туторчики и примеры.

Хороший набор связанных статей про фреймворк по принятию дизайн-решений от Chris Lee. Предлагается свести проблему к базовым принципам и выбрать направление на основе ожидаемой ценности. Будет полезно ребятам, которые вкатываются в продуктовую разработку.

Ну очень красочный лонгрид про вход в профессию дизайнера от UX Collective. Гайд покрывает и методы работы, и основы информационной архитектуры, и базы пользовательских интервью. Если кто-то у вас спрашивает, как стать дизайнером, можно скинуть эту ссыль.

А в DEADSIGN перевели для вас гайд, который поможет избежать самых распространённых ошибок на пути пользователя в ecommerce.

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на 42@cossa.ru. А наши требования к ним — вот тут.