22 августа 2018, 16:05

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

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

Red Collar, redcollar.ru

Визуальная работа с кодом и анимацией

21 июля анонсировали новый браузерный инструмент — Relate. Авторы стремятся создать единый источник правды для дизайнера и для разработчика, поэтому здесь вы сможете работать с кодом «визуально», делать его красивым и семантическим. Сейчас доступна регистрация в лист ожидания и статья с подробностями от автора.

Relate

Supernova V4 тоже строит мост между дизайнерами и разработчиками. Инструмент импортирует Sketch-файлы и умеет преобразовывать их в приложения под iOS, Android или React Native. Целая куча приятных возможностей:

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

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

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

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

Autonomous Native Layouts — автоматический сбор макетов на базе Autolayout, Constraint Layout или Flexbox;
умный импорт файлов удаляет лишние слои и превращает внешние бордеры во внутренние со смещением;
поддержка большого количества нативных компонентов;
система комментирования
версионность;
и ещё более ста улучшений, направленных на реализацию более валидного кода.

Supernova

Flow 1.0 наконец-то вышел из беты. Программа стоит наравне с Principle, Atomic.io, Timeline by Anima, Diya и другими инструментами, которые строят анимации на основе макетов в Sketch. Своим лозунгом Everything you create can go straight into production авторы намекают, что после создания анимации вы сразу получите production-ready код.

Принцип стандартный: соединённые артборды — это состояния начала и конца анимации. Всё можно редактировать на общем таймлайне: отмечать ключевые кадры, формировать задержки и задавать изинги (easings).

Flow

Тестирование сайтов

Polypane помогает проверять адаптив. По сути, это браузер, в котором вы открываете сайт в разных размерах в одном окне — и получаете результат работы с кодом разом во всех разрешениях. Автор инструмента гордится тем, что Стивен Хей, один из ключевых авторов на тему тестирования адаптива, считает его одним из лучших. Открыта регистрация на ранний доступ.

Polypane

Solis — неплохая альтернатива Polypane для macOS, причём уже доступна для использования. Также в реальном времени показывает результаты ваших разработок в разных размерах одновременно. Что умеет:

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

Solis

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

Toybox

Клиппинг, UX-психология и типографика

Дизайн — сложный процесс, который в одном проекте может включать в себя опыт из абсолютно разных областей наук. Digital Psychology — библиотека принципов, построенных на восприятии и психологии человека. Изучайте эту тему и применяйте её в своей работе, так вы здорово улучшите UX проекта.

Digital Psychology

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

Autoclipping

Типографическая линейка Type Scale может стать хорошей альтернативой популярной Modular Scale. Создавайте шрифтовую иерархию, основываясь на любой выбранной пропорции. Можно тестировать на шрифтах из библиотеки Google и локальных шрифтах, вписав название в соответствующее поле. Однозначно в закладки!

Type Scale

Прорасти, как овощ

А напоследок предлагаем вам опробовать первый сит-трекер — Couch Potato. Это приложение вознаграждает за то, что вы просто сидите на диване и ничего не делаете. Крутая подача проблемы — от противного.