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

Анимации в Sketch

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

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

Timeline by Anima

Мобильная Invision Studio

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

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

Invision Studio

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

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

Toolbox от Prototypr

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

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

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

PersP Alpha

Userflow

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

Flowmapp

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

Overflow

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

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

Overflow

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

Dashboard для Marvel

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

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

Userflows

Типографика

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

Font Playground

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

Font Memory Game

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

FontFace Ninja

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

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

Shotsnapp

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

Photomirage

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

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

Milanote

Читайте далее: Ломаная сетка, вариативные шрифты и ещё 8 трендов веб-дизайна по версии проекта ReadWrite

О диджитале в удобном формате ➜ подписывайтесь на нашу рассылку

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

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

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

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