Джедайст от Red Collar: 15+ новых инструментов для веб-дизайна
Всё, о чём нужно знать джедаям от дизайна и веб-разработки. Собрали в Red Collar.
Анимации в 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
О диджитале в удобном формате ➜ подписывайтесь на нашу рассылку
![](/upload/medialibrary/217/z32fdb5wwa490fy5p2bx02nycmcmun42/100x100_logo_mf_target.png)
Эффективная реклама с кешбэком 100%
Таргетированная реклама, которая работает на тебя!
Размещай ее в различных каналах, находи свою аудиторию и получай кешбэк 100% за запуск рекламы.
Подключи сервис от МегаФона, чтобы привлекать еще больше клиентов.