24 июля 2018, 17:10

Джедайст от Red Collar: 15+ новых инструментов для веб-дизайна

Всё, о чём нужно знать джедаям от дизайна и веб-разработки. Собрали в Red Collar.

Анимации в Sketch

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

Timeline by Anima. Вышла вторая, ещё более мощная версия Timeline — надстройки известного плагина от Anima. Она интегрирует в интерфейс Sketch инструменты для анимирования любых элементов в проекте. Здесь используется концепция таймлайнов для перехода из одного состояния в другое. Также разработчики реализовали интерактивные компоненты, которые можно выгружать сразу в виде кода (html/css/js). В планах — React, VueJS, Angular, Lottie, iOS и Android.

Джедайст от Red Collar

Timeline by Anima

Мобильная Invision Studio

Главное июньское улучшение Invision Studio пришлось на мобильное приложение для iOS и Android (бета). Теперь в нём отображаются макеты из программы в реальном времени и поддерживается функция Freehand.

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

Invision Studio

Агрегатор дизайн-инструментов от Prototypr

Авторы Prototypr — одного из лучших агрегаторов новостей о дизайне — запустили Toolbox. С помощью гибких фильтров можно быстро найти тот или иной сервис и сравнить по параметрам с аналогами. А с помощью вкладки Monthly Picks удобно следить за обзором новейших инструментов.

Джедайст от Red Collar

Toolbox от Prototypr

PersP Alpha — конкурент Figma

У Figma появился прямой конкурент: в Persp Alpha тоже можно создавать дизайн с нуля. Пока лишь простые анимации, формирование логики и поведения, основанного на событиях. Зато можно обсуждать экраны, создавать адаптивные макеты, есть аналог символов (компонентов). Все элементы можно описывать с помощью кода.

И то, чего ещё никто не делал — поддержка нескольких языков в макете и экспорт макетов сразу в код. Последнее освобождает от дополнительных прослоек при передаче макетов разработчикам.

PersP Alpha

Userflow

Flowmapp. Онлайн-инструмент для построения карт сайтов Flowmapp научился строить пользовательские сценарии. Этот приятный в использовании сервис оценят не только дизайнеры, но и менеджеры проектов.

Flowmapp

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

Джедайст от Red Collar

Overflow

Плюс совсем недавно разработчики интегрировали Figma в свой продукт: синхронизировать макеты с Overflow стало в разы проще, а презентация клиенту — ещё эстетичнее.

Бонус: посмотрите на интерактивную диаграмму по результатам игр плей-офф ЧМ-2018, сделанную с помощью Overflow. Вышло забавно :—)

Джедайст от Red Collar

Overflow

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

Джедайст от Red Collar

Dashboard для Marvel

Userflows. Идея плавала на поверхности, и наконец-то Marvel её реализовал. Встречайте Userflows by Marvel — инструмент для автоматической генерации пользовательских путей на основе ваших прототипов. Экономит время, упрощает проверку UX, логики взаимосвязей страниц, а также позволяет презентовать проекта в простой и понятной форме.

А ещё на основе этой карты можно сгенерировать картинку для печати, чтобы проще было брейнштормить (Overflow, к слову, тоже так умеет).

Userflows

Типографика

Font Playground. На сайте Type Detail — посвящён анатомии популярных шрифтов — появился раздел Font Playground. Это своего рода полигон для проверки возможностей вариативных шрифтов (о которых сейчас пишут и говорят на всех дизайнерских сайтах и конференциях).

Джедайст от Red Collar

Font Playground

Font Memory Game. Betterwebtype.com — хороший курс по типографике — выпустил забавную игру, которая научит различать мельчайшие детали различных шрифтов. Есть два уровня сложности.

Джедайст от Red Collar

Font Memory Game

FontFace Ninja. Браузерное расширение FontFace Ninja обновилось до четвёртой версии. Теперь инструмент умеет инспектировать параметры шрифтов на веб-страницах, сохранять их в собственную коллекцию и осуществляет быстрый переход к покупке. Появилась возможность идентифицировать и находить похожие шрифты с картинок.

Джедайст от Red Collar

FontFace Ninja

Whiteboard, мокапы и синемаграфы

Shotsnapp. Тема мокапов нас не отпускает :—) Shotsnapp позволяет создавать мокапы для презентации или сайта в пару кликов: выберите шаблон, на базе которого будет создаваться будущий мокап → загрузите свой макет → настройте шаблон на свой вкус → вуаля, у вас готовая картинка.

Джедайст от Red Collar

Shotsnapp

Photomirage. Классный инструмент из разряда «сделай красиво». Photomirage позволяет из статичной картинки сделать синемаграфику. Располагаете стрелки-векторы движения и выделяете те области, где движения происходить не должно. Для вдохновения посетите галерею с результатами. Пока только для Windows.

Джедайст от Red Collar

Photomirage

Milanote templates. В предыдущем выпуске упоминали про Realtimeboard. Существует более красивая альтернатива — Milanote templates. Программа выглядит как бесконечная доска, на которой вы располагаете текст, картинки, файлы и так далее, и рисуете между ними связи.

С ним легко проводить брейнштормы или структурировано собирать всё по проекту в одном месте. Чтобы сбор материалов был удобнее, разработчики предложили шаблонное (но гибкое) решение: например, берём карточку Design Brief и вытаскиваем её на рабочую область — и вот все готово для заполнения карточек собранными материалами.

Джедайст от Red Collar