Тёплая дизайнерская осень: новостной Джедайст #37. Читайте на Cossa.ru

07 октября 2019, 14:50

Тёплая дизайнерская осень: новостной Джедайст #37

Заворачиваемся в одеялко, завариваем кофий и привносим в свою жизнь красок!

Тёплая дизайнерская осень: новостной Джедайст #37

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

Смотрим на основной инструментарий

Сервис от Prototypr.io поможет разобраться в тулзах для прототипирования и найти по параметрам подходящее решение.

Сервис от Prototypr.io поможет разобраться в тулзах для прототипирования и найти по параметрам подходящее решение

Во Framer X добавили Developer handoff, поддерживается экспорт в виде CSS и JSX, курсор меняется в соответствии с выбранным инструментом, прямо как в фотошопе. А ещё появилась официальная статья про то, как изучить функциональность инструмента.

Во Framer X добавили Developer handoff

У Figma пока ничего интересного: вернули в контекстное меню Flip Horizontal и Flip Vertical, да обновили в плане для организаций дашборд участников. Зато наметили следующие направления:

МегаФон ПроБизнес

Получите Кешбэк 100% за запуск рекламы с МегаФон Таргетом!

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

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

  • анонсировали Smart Layout как на Sketch (это то, что можно было раньше делать с помощью Anima);

  • рабочего приложения для планшетов пока не предвидится — сейчас работают над улучшением прототипирования на мобильных устройствах;

  • кажется, будут внедрять аналог Auto Animate из Adobe XD, судя по твиту;

  • обещали подумать про введение брейкпоинтов и последующую перестройку макетов;

  • а ещё шла речь про вектор на сближение с Framer X.

Кайфовый плагин от Airtable, который вставляет тексты и картинки из «БД» в компоненты.

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

Мы писали про AI-приложение Eyelato, моделирующее тепловые карты макетов. Появился аналог — бета Visual Eyes, доступный как в вебе, так и в виде плагинов к Sketch, Figma и Adobe XD. Обещают более широкий набор аналитики: areas of interest, scroll maps и демографические «изыскания».

Design System Manager от InVision — вообще лютая штука. Хранит все компоненты из Sketch (потом обещают InVision Studio подключить) с описаниями и гайдлайнами, сам генерит дизайн-токены и работает с версиями.

Интегрируется со средой разработки Storybook, которая позволяет просматривать состояния UI-компонентов, разрабатывать и тестировать их. Обещают два плана: бесплатный и Enterprise.

Сам подраздел интересно читать — внутри best practices и размышления по теме развития дизайн-систем от крутых ребят, в числе которых Брэд Фрост.

Represent — расширенный аналог Sketch Mirror. Просто делитесь id сессии, и в любом конце света (где есть интернет естественно) кто-то может примерить ваши макеты на своём iOS- или Android-устройстве. Круто для презентаций, в том числе и групповых. Стоит всё дело 4 $ в месяц или 35 $ в год.

Represent — расширенный аналог Sketch Mirror

Плагин для Sketch — Sketch Styler выполняет грязную работу: ищет и назначает похожие стили на нестилизованные элементы. Предлагается выбрать параметры, по которым будет выполняться поиск, например: шрифт, кегль, вес, выравнивание, разрядка, библиотеки компонентов, а также тип поиска — точный или похожий с процентом расхождения. Кайф же! Есть неделя на пробу, а потом придётся отдать 10 евро.

UI Bakery — WYSIWYG-инструмент, имплементирующий дизайн-систему, для создания Angular-приложений. Создавался, чтобы удешевить frontend-разработку, и должен, по заверению разработчиков, сократить ваши усилия аж на 73%. Плюс удобно для тестирования гипотез. Есть четыре тарифа:

  • бесплатный с 6 страницами, 3 виджетами и 2 темами;
  • начальный от 20 $ в месяц с 12 страницами и расширенными возможностями для брендинга;
  • обычный за 40 $ в месяц, где можно делать аж 3 приложения;
  • убер-вариант по договорной цене.

Работа с контентом

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

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

Naker.Back — конструктор интерактивных фонов

Очень много бесплатных иллюстраций на Glaze и humaaans-like конструкторе Fresh Folk (тут они уже в psd).

Много бесплатных иллюстраций на Glazehumaaans-like конструктор Fresh Folk

Хелперы

Простой веб-тул Subcolor, строящий нужное количество цветов между двумя заданными, — будет полезен как в подборе «того самого» цвета, так и для работы над визуализациями и всяческими графиками.

Подбор цвета в дизайне: Subcolor, строящий нужное количество цветов между двумя заданными

Ещё один сервис про создание цветовых вариаций — Copy Palette. Выбираете базовый цвет, регулируете количество оттенков и контраст, а потом копируете svg.

Сервис создания цветовых вариаций — Copy Palette

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

UIprint — набор макетов в точечку для быстрого скетчинга

Шаблон для планирования сценариев и исследования поведения пользователей. Можно заполнить прямо в браузере и скачать в виде html.

Шаблон для планирования сценариев и исследования поведения пользователей

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

Телеграм Коссы — здесь самый быстрый диджитал и самые честные обсуждения: @cossaru

📬 Письма Коссы — рассылка о маркетинге и бизнесе в интернете. Раз в неделю, без инфошума: cossa.pulse.is

✉️✨
Письма Коссы — лаконичная рассылка для тех, кто ценит своё время: cossa.pulse.is


Вход на cossa.ru

Уже есть аккаунт?
Авторизуйся через VK:
Vkontakte
Не забудьте написать email на странице своего профиля для управления рассылкой