15+ полезных ресурсов для веб-дизайнера. Дайджест Red Collar
Лучшие сайты, апдейты и плагины последнего времени.
Начало работы над сайтом: юзерфлоу, вайрфремы и сбор обратной связи
Большинство проектов начинается с проработки userflow-карт. Некоторые используют для этого бумагу, mindmap-приложения, draw.io или все тот же Sketch. Если вы все еще находитесь в поисках инструмента, обратите внимание на Whimsical Flowcharts. Рисуете прямоугольник, пишите в нем текст, соединяете с другим - готово! А еще нескольким пользователям можно комментировать сценарии в реальном времени.
Также компания Whimsical предлагает попробовать их Wireframes. С ним можно с легкостью создавать прототипы и наброски экранов. Для кого-то набор инструментов может показаться сильно ограниченным, но в этом и преимущество программы: так проще сконцентрироваться на функционально-навигационных задачах экрана, а не на внешнем виде.
Все результаты работы над варфреймами можно обсудить с коллегами прямо в редакторе через систему комментирования.
Pastel помогает собирать обратную связь прямо на рабочем сайте. Клиенту не придется регистрироваться, а вам - лишний раз уточнять, каким браузером или разрешением он пользуется. В момент написания комментария сохраняется информация и о контексте.
Инструменты для интерфейсных паттернов
Subform умеет создавать адаптивные макеты, применять последовательные стили, сохранять состояние компонентов и работать с реальным контентом, но, к сожалению, до сих пор остается в бете, да еще в платной.
Но вот хорошая новость: авторы Subform представили новый инструмент - Sketch.systems. Он помогает продумать поведение элементов на странице в тот или иной момент отклика интерфейса и визуализировать состояния и карту путей между ними. С его помощью можно отрабатывать различные сценарии: "Что произойдет, если мы начнем перетаскивать этот блок?", "Когда появляется сообщение об ошибке в форме?" и так далее.
Page Flows - внушительный набор интерфейсных паттернов с различными сценариями. Все классно структурировано и разложено по полочкам. Полезно для поиска решений того или иного сценария.
Ресурсы для вдохновения
Haiku, о котором мы говорили в одном из прошлых выпусков, запустил галерею с пользовательскими проектами. Авторы верят, что такая площадка будет хорошим гайдом для того, чтобы освоиться в программе и быстро запустить проект на базе чужих работ. Из каждого опубликованного проекта можно сделать копию для дальнейшего использования на свое усмотрение.
А на Illustration Tools собран внушительный список инструментов и сервисов для иллюстраторов. На сайте можно следить за свежими курсами и инструментами, а также обсудить с комьюнити актуальные рабочие вопросы.
Инструменты для красивого цвета и анимации
Инструмент для создания анимации в вебе Spirit недавно обзавелся приложением для macOS (в скором времени обещают выпустить для Windows и Linux). Инструмент полезен, когда перед вами есть сверстанная статичная картинка и ее необходимо "оживить" анимацией. Выбираете объекты, отмечаете CSS-свойства, которые надо изменять в течение времени, и все готово. На выходе - рабочий код для внедрения анимации в реальный проект.
Tilda научилась делать пошаговую анимацию. Все работает на базе Zero Block, где можно настроить каждую деталь сайта. Элементу можно назначить различные трансформации и выбрать событие, по которому эта трансформация должна произойти.
Анимация может состоять из нескольких шагов, для каждого из которых вы описываете свое поведение. Приятный по дизайну редактор и мелкие детали - зацикливание анимации объекта и фиксирование любого элемента на странице по достижении позиции скролла. Кажется, Readymag напрягся?
Плагины для Sketch
Easing Gradient делает красивые градиенты: сосоздаетелинейные переходы от одного цвета к другому в различных диапазонах. Мягкость достигает с помощью разного количества точек в конечном градиенте.
Наконец, вышел плагин Overrideit (его мы анонсировали в предыдущем выпуске дайджеста). Помогает в работе с символами, в которых много оверрайдов. Очень смышленый и удобный поиск. Однозначно нужно включать в работу, если у вас жестко настроенные символы со множеством вложенностей друг в друга.
@MengTo - автор нашумевшего курса Design+code, в рамках которого он обучает созданию приложения для iOS с помощью Sketch и Xcode для дизайнеров - запустил новый курс. В Sketch Plugin вас научат создавать плагины для Sketch и объяснят базовые принципы возможностей расширений.
Phase - инструмент с претензией
С Phase мы уже вас знакомили. А на прошедшей Mail.Ru Design Conference 2018 (вот видеозапись дневной части конференции) выступил один из основателей компании и рассказал, чего ожидать в первом релизе программы.
Кратко: версия 1.0 сконцентрируется на создании интерактивных эффектов и переходов. Затем авторы займутся реализацией правильной адаптивности: блоки научатся перестраиваться по горизонтали и вертикали с учетом соседних элементов (что пока не умеет ни один редактор из коробки).
Если вы побывали на тематическом митапе в Санкт-Петербурге 16 июня, будет здорово, если поделитесь своими впечатлениями в комментариях!
DIЧ.LIVЕ: обсуждаем сильный дизайн в прямом эфире.
