ТОП 11 инструментов для дизайнеров
Инструменты дизайнера, от Sketch до Affinity Designer, которые изменят ваш рабочий процесс.
Мировые инструменты веб дизайнера никогда не стоят на месте. Технологии продолжают улучшаться, стандарты эволюционируют, и каждый месяц появляются новые вещи, которые стоит опробовать, чтобы сделать свою дизайнерскую жизнь немного лучше.
Статичные макеты становятся менее полезными, и грань между дизайнером и разработчиком понемногу меркнет. Поскольку мы все больше работаем друг с другом, инструменты, которые мы используем, тоже должны меняться.
В этом ТОПе собраны 11 необходимых инструментов для веб дизайнера. Испытайте их, оцените, как они вам послужат, но не слишком к ним привязывайтесь: возможно, что-то новое появится уже через несколько месяцев, и сбросит их с пьедестала.
01. Pattern Lab
Pattern Lab – это прекрасный дизайнерский инструмент, разработанный Дейвом Олсеном (Dave Olsen) и Брэдом Фростом (Brad Frost). В его основе лежит концепт Атомного Дизайна, который предполагает, что вам следует разбивать свой дизайн на несколько маленьких частей (атомов), и составлять из них большие компоненты, которые можно использовать несколько раз (молекулы и организмы), и превращать их в полезные шаблоны.
В основе этого инструмента лежит статичный генератор, который собирает вместе UI компоненты. Но Pattern Lab может еще больше: это язык и анализирующий инструмент; он позволяет встраивать элементы пользовательского интерфейса друг в друга и создавать динамические данные; он включает функцию изменения размера окна, чтобы вы могли убедиться в адаптивности вашего дизайна; и он может быть расширен, чтобы удовлетворить все ваши нужды.
02. Vivaldi
Иногда лучший инструмент может быть чем-то настолько же простым, как и новый браузер. Vivaldi – это быстрый, кастомизируемый веб-браузер для продвинутых пользователей, созданный одними из основателей Opera. Они называют Vivaldi “Браузером для наших друзей”. Он разработан с использованием JavaScript и React в пользовательском интерфейсе, совместно с Node.js и кучей NPM модулей.
Vivaldi – самый кастомизируемый браузер из всех существующих, и он предлагает другие классные функции: контроль командной строкой, панель для заметок, расширенное управление закладками, веб панели, которые позволяют вам складировать все ваши любимые сайты в одном месте для быстрого доступа.
03. Affinity Designer
Некоторые называют Affinity Designer “убийцей Photoshop”, и легко разобраться почему. С первого же взгляда понятно, что дизайн этого приложения невероятно хорошо проработан, и чувствуется, что он специально заточен под веб и графический дизайн.
В нем есть несколько очень приятных функций, например, регулируемые зафиксированные слои: вы можете работать над изображениями или векторами, не боясь повредить их.
Возможность увеличить изображение на 1 000 000 процентов – просто счастье (иногда кажется, что 32 000 увеличения Photoshop недостаточно). Это особенно полезно при работе с векторной графикой, потому что приблизить можно действительно сильно. Функция возврата и история операций тоже очень полезны: Affinity позволяет вернуться назад более чем на 8 000 шагов!
Когда дело доходит до дизайна, пользовательский интерфейс кажется знакомым. Когда переходишь на какой-то графический редактор после Photoshop, то кажется, что учиться придется заново, что может стать настоящей проблемой. Affinity сделали все, чтобы программа казалась знакомой, при этом скрыв все дефекты. Я без проблем смог сразу начать с ним работать.
Affinity становится настоящим конкурентом Photoshop, Illustator и Sketch. За 3 790 рублей – это выгодная сделка!
04. Avocode
Avocode очень сильно упрощает жизнь фронтенд разработчикам, позволяя кодить веб-сайты и приложения из Photoshop или Sketch макетов. Он разработан той же командой, которые принесли нам CSS Hat и ONG Hat, так что ничего удивительного, что в процессе экспорта они ушли на шаг дальше. Что делает Avocode особенным, так это то, что вы можете использовать Photoshop плагин, чтобы синхронизировать ваши PSD файлы в Avocode с помощью одного клика.
Avocode автоматически анализирует ваш PSD или Sketch файл и переносит все в прекрасно разработанный UI. Затем у вас есть полный контроль над экспортом файлов, включая SVG экспорт в качестве стандартного.
Вы также можете кликать по элементам дизайна и копировать/вставлять код в текстовый редактор по вашему выбору. “Он дает пользователям все, что нужно для кодинга – превью дизайна и доступ ко всем слоям”, – говорит соучредитель Avocode Ву Хонг Ан (Vu Hoang Anh): “Разработчикам вообще не понадобится Photoshop или Sketch. Раньше рабочий процесс был так себе, поэтому мы разработали Avocode.”
В целом, я не на 100 процентов уверен, что какое-либо приложение может копировать разработчика. Однако, я бы с радостью превращал PDS и Sketch файлы в интерактивные проекты, которые можно использовать в основе разработки веб-сайтов.
05. Antetype
Antetype – это инструмент для создания адаптивного пользовательского интерфейса для приложений и сайтов. Кажется, что он разработан с одной целью: создавать прототипы с высокой точностью, но не рабочие файлы. Вообще-то это даже хорошо: команда фокусируется конкретно на создании, и не пытается сделать приложение, которое заменяет разработчиков.
“Устав от использования фото редакторов для UX дизайна, мы захотели разработать инструмент для лучшего понимания контента и разметки”, – говорит Тим Клаук (Tim Klauck), UX директор Antetype: “Автоматическая разметка и виджеты позволяют нам быстро дублировать дизайн, сохраняя последовательность.”
После загрузки вам позволяют использовать небольшую библиотеку стандартных виджетов, c помощью которых можно быстро создавать прототипы и начать разрабатывать. Antetype включает библиотеку девайсов и ОС-конструкции для iOS, Android и Windows. Также у Antetype есть активное сообщество пользователей, в котором можно скачивать готовые UI конструкции.
Момент, который отличает Antetype от других инструментов для прототипирования, — это то, что вы можете создавать адаптивные прототипы и добавлять к ним небольшие взаимодействия, чтобы в полной мере передать идею клиентам.
На мой взгляд, интерфейс программы слишком изобилует “перетаскиваниями”, и интерфейс не очень впечатляет, но это приложение очень полезное и легкое в изучении. Потратьте немного времени, и вы сможете создавать отличные прототипы с большой скоростью.
06. Sketch
Sketch набрал огромную аудиторию сразу после своего запуска в 2009 году. Скорость, с которой движется Bohemian Coding (создатели Sketch), очень впечатляет: команда уже выпустила улучшенное экспортирование, символы и упрощенные векторные моды.
“Когда мы начинали разработку Sketch, мы представляли приложение для современного дизайнера”, – говорит Питер Омвли (Pieter Omvlee), основатель Bohemian Coding: “Мы попытались сделать это с помощью ключевых улучшений стандартного функционала и радикально-новых функций. Нас удивляет энтузиазм, с которым люди используют Sketch, и отличные работы, которые они уже создают.”
Мне очень нравится, как Sketch включает CSS логику в приложение – это делает процесс конвертирования вашего дизайна в CSS намного проще, так как вам приходится использовать CSS при создании стилей.
Другая функция, которая очень полезна для кроссовера дизайна и разработки, – это Автоматический Срез (Automatic Slicing). Без необходимости вручную добавлять фрагменты, Sketch может создавать активы, используя экспорт одним нажатием, который будет экспортироваться в 0.5x, 1x, 2x и 3x и в других различных форматах, таких как PNG, JPG и TIFF. Я с нетерпением жду следующего нововведения Sketch.
07. Form
Form от RelativeWave – это инструмент для создания прототипов, который ни на что не похож. Это приложения больше напоминает смесь дизайна и программирования.
На самом деле, создавать графику непосредственно в этом приложении вы не можете, но сможете загружать внешние файлы, которые в Form называются “Лоскутами” (“patches”). Затем эти графические элементы можно связать между собой с помощью анимаций и взаимодействий. Mac версия также требует использования iOS приложения, чтобы просматривать ваши прототипы в реальном времени и взаимодействовать с ними.
“Form – это инструмент для создания прототипов и дизайна приложений, цель которого спроектировать дизайн, максимально похожий на то, что должно получиться в итоге разработки,” – объясняет креативный программист Макс Вейсел (Max Weisel): “Мы хотели, чтобы дизайнеры работали конкретно над продуктивной частью приложения, в то время как инженеры занимались решением более комплексных проблем.”
Существует множество отличных туториалов по использованию Form, но процесс достаточно сложен, если вы, как и я, привыкли к созданию графики в Photoshop. Перемещение изображения в центр вашего девайся, например, достигается путем использования Superview переменной и инструмента Match Patches. Иногда приходится прибегать к математическим вычислениям, чтобы определить ширину и высоту и сопоставить их с осью X и Y в Image View. Все это нужно сгруппировать, переименовать переменные и добавить точки анкоров X и Y. Этот процесс показался мне достаточно сложным.
Однако, как только вы разберетесь со всеми процессами, вы сможете создавать невероятные прототипы. Доступ к камере девайса и другим сенсорам позволяет создавать настолько же мощные прототипы, как если бы они были сделаны в приложении, использующем программирование.
08. UXPin
UXPin – это инструмент для создания прототипов, который был разработан для выполнения множества задач. Вы можете использовать его как для создания каркасов, так и для интерактивных прототипов высокого качества. Использовать UXPin – настоящее удовольствие, потому что он был разработан командой UX разработчиков.
Мне нравится, что разработчики заложили в приложение максимальную гибкость. Мы можете начать с создания пустого iPhone приложения или адаптивного макета веб-сайта, а затем создать весь дизайн. Или, если у вас уже есть готовый дизайн, который вы хотите протестировать и добавить интерактивность, в приложении есть инструменты для импорта проектов из Sketch или Photoshop.
Если вы начинаете работу с нуля, то можете использовать одну из многих библиотек элементов, которые включают UX шаблоны из таких фреймворков, как Bootstrap, Foundation, iOS и многих других. Это особенно полезно, если вы хотите создать каркас.
Создавать прототипы высокого качества также очень просто. Выберите элемент, например, кнопку, и вас шаг за шагом проведут по процессу добавления интеракций. Процесс очень прост и эффективен.
Наконец, делиться и комментировать разработки тоже возможно. Поинт-энд-клик интерфейс делает его легким в использовании для клиентов, чтобы добавлять комментарии для конкретных элементов. Я определенно рекомендую этот инструмент для создания вашего следующего каркаса или прототипа.
09. Macaw
Macaw был спроектирован дизайнерам, и без необходимости притрагиваться к коду, вы можете создавать адаптивный дизайн, который будет отлично выглядеть на всех девайсах. Простота этого приложения поражает, а интерфейс приятен и кажется знакомым.
После просмотра пары видео я решил разметить простую страницу. У меня ушло около 30 минут на создание адаптивного макета, который отлично работал. Мне очень понравилось, как приложение позволяет вам добавлять опции к шаблону и дает просмотреть его в реальном времени, чтобы лучше определиться с тем, какие изменения влияют на дизайн.
Еще более полезным мне показалась возможность добавлять точки отката. Когда шаблон сломался, я смог откатить его и создать адаптивный макет, не затрагивая никакого кода.
Код, который создает приложение, семантичен и очень хорошо сконструирован. Обычно, в этом вопросе подобные приложение сдают позиции, но Macaw умудрился преуспеть в этом деле. Очень интересно, в каком направлении будет дальше развиваться Macaw.
10. Marvel
“Мы хотели снизить барьер, который мешал вашим идеям воплотиться в жизнь, так что мы создали Marvel, “code-free” инструмент для создания прототипов, который трансформирует изображения и скетчи в интерактивные прототипы, которые выглядят как настоящие приложения или веб-сайты” – говорит Мурат Мутлу (Murat Mutlu), соучредитель компании.
Когда вы впервые запускаете Marvel, он спрашивает вас, не хотите ли вы привязать его к своему Dropbox хранилищу, чтобы приложение могло получать оттуда файлы, необходимые для ваших проектов. Если вы не используете Dropbox, то загрузить файлы в Marvel другим путем не получится.
Как только вы загрузите ваши PSD файлы, вы можете использовать отличный пользовательский интерфейс Marvel для соединения ваших станиц.
В нем также есть множество других полезных функций: например, создание связи между ссылками и страницами и быстрое превью того, как это будет выглядеть, в браузере.
Еще одна отличная функция – возможность выбора среды для своего проекта. Таким образом, если вы хотите создать iOS приложение, то вам нужно просто выбрать эту среду через настройки, после чего вы увидите автоматическое превью.
Мне очень нравится, насколько легко пользоваться этим приложением, а также то, что можно поделиться проектом с клиентом или сотрудниками.
11. Webflow
Webflow – это веб-приложение, которое позволяет разрабатывать сайты без программирования. В нем есть ненавязчивый UI, позволяющий фокусироваться на дизайне. Также есть возможностью предпросмотра прототипа на разных устройствах, что дает полный контроль над внешним видом приложения или сайта.
В Webflow есть некоторые знакомые инструменты, которые позволяют разрабатывать элементы, но их можно только перетаскивать (инструмент для рисования не предусмотрен), так что вы немного ограничены.
“Webflow появился в процессе моего сложного взаимодействия (программиста) с моим братом Сержи (Sergie) (дизайнером), когда мы разрабатывали сайты для клиентов,” – объясняет соучредитель Влад Магдалин (Vlad Magdalin): “Теперь оно помогает веб-дизайнерам создавать и опубликовывать адаптивные веб-сайты значительно быстрее.”
Это приложение переводит “code-free” дизайн на следующий уровень. Однако, вам все равно необходимо понимать, как работает код, чтобы создать что-то, что будет хорошо функционировать. У вас не получится перескочить этот момент и выстроить веб-сайт.
Это определенно хорошо, что Webflow заставляет вас думать о коде. Вы также можете воспользоваться хостингом Weblow за ежемесячную оплату.
Обязательно опробуйте эти инструменты веб дизайнера!