Figma или axure что лучше
Какой инструмент выбрать для обучения? Если вы задаётесь этим вопросом, тогда эта статья станет настоящей находкой. Мы разберёмся в ключевых аспектах Sketch, Figma, Adobe XD, проведём сравнение и выясним, какой инструмент стоит выбрать именно вам.
Сегодня рынок перенасыщен инструментами создания UI-дизайна. Многие компании последовали примеру Sketch с его гибким, простым и эффективным инструментом для создания дизайна пользовательского интерфейса чтобы занять часть рынка инструментов проектирования. Основываясь на исследовании инструментов дизайна 2019 года, проведённом UXtools.co, Sketch лидировал в прошлом году, в то время как сегодня немало инструментов (Figma, Adobe XD) навёрстывают упущенное.
Самые популярные инструменты по результатам опроса за 2019 год:
Самые популярные инструменты по результатам опроса за 2018 год:
Основываясь на наблюдениях за ростом этих инструментов, собственном опыте их использования, а также на опыте других дизайнеров, я полагаю, что в ближайшие год или два Sketch, Figma и Adobe XD, скорее всего, выстрелят с новой силой.
В этом году один из самых частозадаваемых мне вопросов звучал так: «Мне нужно изучать Sketch или какие-то другие инструменты?». Чтобы ответить на этот вопрос необходимо разобраться в нескольких ключевых аспектах инструментов и провести сравнение. Для краткости этой статьи мы сосредоточимся только на трёх лучших инструментах согласно опросу: Sketch, Figma и Adobe XD.
Начнём с ключевого требования каждого инструмента – операционной системы. Многие не знают, что Sketch – это программа для систем Macintosh. Поэтому, если вы работаете на машине с Windows или Linux, вы ограничены Figma или Adobe XD.
Ещё один ключевой (и часто решающий) фактор для большинства пользователей. Ниже находится сводка о ценообразовании персонального пакета каждой программы:
- Sketch: $99, разовый платёж. Одно бесплатное обновление в год. При желании пользования новыми функциями придётся заплатить $79 за каждый год;
- Figma: Лимит в 3 бесплатных проекта, неограниченным количеством файлов и 2 редакторами;
- Adobe XD: бесплатно с неограниченным количеством проектов/файлов и без ограничения шеринга до октября 2020 года. С октября появляется ограничение на 1 общий проект и 2 редактора.
Значительное количество времени проектирования тратится на управление макетом. Выбор инструмента с хорошо продуманным редактором имеет решающее значение для производительности.
В Sketch есть функция Smart layout, которая позволяет делать такие вещи как автоматическое изменение размера слоя при изменении длины/размера контента. Например, размер окна автоматически подстраивается под размер текста.
Figma предлагает аналогичный Sketch набор функций в этой области и помимо этого ещё и такие автоматические функции как переупорядочение содержимого перетаскиванием, как на гифке ниже.
У Adobe XD есть функция Content-Aware layout, которая помогает заполнить группы слоёв при изменении размера содержимого. В сравнении с функциями, применяемыми к слоям, в других инструментах, эта функция в Adobe XD является совершенно уникальной.
Возможность автоматической регулировки вертикального положения слоёв при изменении высоты содержимого позволяет значительно сэкономить время. Figma имеет небольшое преимущество в этой области.
Если вы работаете вместе с другими дизайнерами, все три инструмента предоставляют способы обмена файлами. В контексте этой статьи мы сосредоточимся на функциях, связанных с совместной работой, которые есть в программах по умолчанию, без установки всяких плагинов.
В Sketch файлы хранятся на облаке. Это позволяет делиться ими с другими пользователями и даёт возможность редактировать так же, как это работает и в других облачных сервисах. Также есть возможность прописывания версий. Исторически Sketch сочетался с другими инструментами такими как Invision или Zeplin для таких функций совместной работы как совместное использование дизайна и шеринг. Sketch развивается, чтобы предложить лучшие версии этих функций, но всё ещё чуть-чуть отстаёт от своих конкурентов в 2020 году.
Figma ворвалась в мир дизайнеров со своей возможностью совместной работы в режиме реального времени, которая позволяет нескольким людям просматривать/редактировать один и тот же файл одновременно. В последние годы это была одна из самых уникальных функций на рынке инструментов UI-дизайна. Тем не менее, она полезна только команде дизайнеров, которая фактически одновременно работает над одним и тем же проектом. Функция редактирования в реальном времени/предварительного просмотра удобна в том смысле, что любой, кто просматривает проект всегда будет видеть последние изменения и то, как это происходило. Помимо быстрой совместной работы, у Figma также есть система управления версиями, система проектирования и проверки, которая работает наравне с другими инструментами.
Adobe XD запустила собственную функцию совместного редактирования ещё в ноябре 2019 года с такими функциями как многопользовательское редактирование и контроль версий файлов. Кроме того, XD имеет те же наборы функций обмена, что и другие инструменты.
Учитывая бета-статус функций XD, Figma является лучшим выбором, особенно для дизайнеров, которые ценят сотрудничество в реальном времени.
Люди с хорошим компьютером не должны заметить значительной разницы в эффективности представленных инструментов. Проблемы с производительностью программ станут более заметными при работе с внушительным количеством артбордов/фреймов, внешними плагинами и графическими ресурсами в файле.
Я редко испытывал проблемы с производительностью при каждодневном использовании Figma. Учитывая, что она является браузерным инструментом (есть и десктопная версия, которая, скорее всего, является оболочкой веб-приложения), производительность в меньшей степени зависит от аппаратного обеспечения и в большинстве случаев работает довольно шустро. Как и в Sketch, загрузка плагинов может занять некоторое время в зависимости от содержимого и функций, что не так важно.
Что касается Adobe XD, я столкнулся с некоторыми проблемами с производительностью ещё во времена его запуска, в начале 2019 года. С тех пор все проблемы пофиксились регулярными обновлениями. Честно говоря, я не тестировал производительность XD так сильно, как другие инструменты, но находится она примерно на одном уровне со Sketch.
В категории производительности, Figma была самой надёжной в моём опыте.
Когда дело доходит до инструментов для создания прототипов, есть много чего обсудить, поскольку на рынке существует более специализированные инструменты, заточенные под это дело. Тем не менее, полезно иметь небольшое понимание возможностей прототипирования всех трёх инструментов.
Sketch поддерживает экранные ссылки для создания интерактивного прототипа с использованием хотспотов. Прототип можно предварительно просмотреть локально или поделиться с другими через Sketch Cloud. Кроме того, приятно иметь такие функции как «фиксированное положение при скролле» и «сохранять положение скролла после клика», делая Sketch на одном уровне с Invision и тем, что она может предложить для создания прототипов.
Фиксированное положение в Sketch при прокрутке помогает создавать более сложные прототипы с переходом по клику.
Figma имеет почти тот же набор функций прототипирования, что и Sketch. Основное различие заключается в эффектах перехода, где у Figma есть функция Smart Animate (автоматическая анимация состояния двух фреймов). Используя её, можно создавать более сложные прототипы.
В Adobe XD есть больше возможностей в области прототипирования. В дополнение ко всем функциям Figma и Sketch Adobe XD могут предложить больше разнообразных возможностей, а именно: добавление клавиатуры, геймпада и голосовых триггеров, для более специализированного опыта.
В этом аспекте Adobe XD побеждает с чуть более широкими возможностями ввода.
Все три инструмента поставляются с собственными экосистемами плагинов.
За время своего существования Sketch обзавёлся большой библиотекой всяческих полезных плагинов для ускорения рабочего процесса или расширения функционала Sketch.
Плагины в Figma поддерживаются с августа 2019 года. С тех пор появилось большое количество плагинов, правда их не так много, как в других инструментах.
Adobe XD запустила свою экосистему плагинов в 2018 году. Возможно, она пока не на одном уровне со Sketch, но динамика развития выглядит перспективно. Среди всех трёх инструментов, у Adobe XD (на мой взгляд) приятный опыт поиска и управления плагинами.
Sketch побеждает в категории плагинов, учитывая его огромную библиотеку.
Выбирая инструмент дизайна, на который вы собираетесь потратить время для обучения, большое внимание уделяется тому, как быстро этот инструмент развивается.
Судя по журналу обновлений Sketch, они больше всех обновляли свой продукт за год (в среднем 1 существенное обновление в месяц). Вероятно, причиной этому стало их последнее финансирование в начале 2019 года, которое дало возможность наверстать упущенное. Ключевое словосочетание здесь – «наверстать упущенное», ведь по правде говоря, Sketch проигрывает по своим возможностям Figma и Adobe XD. Учитывая, что Sketch был запущен на годы раньше своих конкурентов, удивляет факт того, что он не уступает другим конкурирующим инструментам дизайна.
Figma добавляет новые функции с такой же скоростью, что и Sketch. Стоит отметить, что Figma выпустила больше функций, посвящённых интеграции с другими инструментами, такими как Maze (для тестирования) и Framer Web (для создания прототипов). Благодаря этому Figma хорошо сотрудничает с дизайнерами или командами, которые используют дополнительные инструменты для улучшения процесса проектирования.
Темпы обновлений Adobe XD на самом деле впечатляют. Изначально он был запущен (учитывая запуск бета-версии в конце 2017 года) с проблемами, но меньше чем через два года он стал сильным соперником для других инструментов. XD не так широко интегрирован со сторонними инструментами проектирования или разработки, но он тесно связан с пакетом Adobe.
Sketch, Figma и Adobe XD – отличные инструменты для создания дизайна пользовательского интерфейса. Если вы новичок и выбираете, на какую тропу ступить – рекомендую Figma в качестве отправной точки. Если же вы ищете инструмент для проектирования, который может создавать более сложные прототипы (например, с триггерами голосового ввода), ваш выбор – Adobe XD. В конечном счёте, ваш работодатель/команда могут выбрать инструмент для вас, но хорошая новость заключается в том, что все эти три инструмента очень похожи. Это означает, что если вы изучите один инструмент, большая часть знаний пригодится при переходе на другой.
Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.
Эта статья не является историческим справочником с датами, вехами развития и секретными инсайтами, а лишь мой взгляд в историю развития продуктов и размышление о том почему Axure, имея всё то, за что мы так любим Скетч и Фигму, ещё задолго до появления оных, теперь ютится на задворках, но занимает особое место в сердцах хардкорных проектировщиков.
А ещё: Это не сравнение кто круче и не попытка засрать ваш любимый инструмент работы, каким бы он ни был.
Моё знакомство с Акшурой (здесь и далее я буду писать это название именно так) началось, нет, не с первых версий, как это часто бывает в подобных статьях, а с версии 6 или 7. Но те кто знает с какой периодичностью Акшура выпускает новые мажорные версии, понимает, что это было довольно давно.
Впервые открыв Акшуру я сразу понял, что это комбайн. Реальный. Огромный комбайн с кучей всяких функций. Но начав изучать её я понял, что все основные функции легко доступны и логика расположения панелей очень напоминает, как ни странно, Фотошоп. Это было приятно, ведь тогда Фотошоп ещё использовали для рисования сайтов и прочих интерфейсов. Да, было такое время. Вам, поколению (я даже не знаю какую букву латинского алфавита сейчас надо подставить), этого не понять. Такое знакомое расположение панелей, думаю они выбрали не случайно.
Давайте пробежимся по функциям, которые уже были в версии 7 и, которые широкое распространение получили только с приходом Скетча и Фигмы.
-
Компоненты. Да-да, те самые Символы (у Скетч) и Компоненты (у Фигмы), уже давно были и есть в Акшур. Только называются они Мастера. Принцип и логика работы мастеров абсолютна такая же, как у современных аналогов.
Что есть в Акшуре и нет в Фигме / Скетче
- Адаптивность макетов. В Акшуре можно задать точки разрыва при которых макет будет перестраиваться у юзера на устройстве. В Фигма есть только несколько плагинов, которые просто будут эмитировать адаптивность в процессе дизайна, а не у юзера.
- Вставка кода. Акшура сразу имела визуальный интерфейс программирования прототипа, который позволяет запрограммировать любой кусок прототипа и менять его состояния в зависимости от действий пользователя. А уж если вы знаете JavaScript, то вы можете сотворить просто что угодно в прототипе. Можете даже собрать работающий сайт. Фигма только сейчас робкими шагами идёт к интеграции кода в свой интерфейс. Естественно, в своём понимании как это должно работать и уже не JavaScript, а React, но идея встретить визуальный редактор и код далеко не нова.
- Инструменты создания схем. Полезно для любителей создать CJM или просто структуру страниц/экранов интерфейса и логику разных сценариев. Сейчас чаще всего для этого принято использовать, например Miro или божественный Overflow, но в Акшуе это было из покон веков без необходимости прыгать в другие инструменты.
Самое смешное, что даже сам процесс создания и редактирования шейпов в Акшуре гораздо ближе к современным принципам «рисования» в Скетч / Фигма чем в Фотошопе тех лет. Т. е. по факту в Акшуре можно нарисовать финальный дизайн ничем не хуже чем в Фигма. Единственная проблема будет с тенями (в Акшур они не очень) и эффектами наложения слоёв (которых в Акшуре просто нет), но честно говоря наложением слоёв, лично я, и не пользовался никогда.
Адобе, создав вполне не плохой, на мой взгляд, XD всё же смогли если не запрыгнуть, то хотя бы зацепиться кончиками пальцев за уходящий поезд и сейчас трепыхаются по шпалам, но держатся. А вот Акшур запрыгнуть не успели и фактически бегут за поездом в гордом одиночестве и на них с поезда изредка и с грустью в глазах поглядывают проектировщики, которые уже давно взяли волю в кулак всё более невозмутимо открывают Фигму.
На мой взгляд Акшур в какой-то момент пережила экзистенциальный кризис, отголоски которого испытывает до сих пор. С одной стороны стремясь быть похожей на героев нового времени, с другой придерживаться своих концепций и оставаться комбайном для всего и сразу. И, кажется, разработчики выбрали первый путь и стараются держать руку на пульсе, понимая, что мир изменился. Об этом говорит хотя бы то что Акшура теперь поддерживает приём файлов и Скетча, и Фигмы и даже XD (и ни один из них не поддерживает файлы Акшуры). Правда, я не знаю никого, кто будучи в здравом уме захотел бы перейти из Фигмы в Акшур.
Этот пост для меня, как некая дань уважения к Акшуре и ностальгия по работе в ней. А также взгляд в будущее с робкой надеждой на реннесанс Акшур в массовом дизайнерском сознании. Ведь она сейчас стремительно меняется и, по сути, уже не хуже Скетча и точно лучше (оценочное суждение) XD. В новой версии появился CSS код для разрабов и даже настройка анимации для дизайнеров. Да, что я вам рассказываю. Просто проверьте сами.
Эта статья не является историческим справочником с датами, вехами развития и секретными инсайтами, а лишь мой взгляд в историю развития продуктов и размышление о том почему Axure, имея всё то, за что мы так любим Скетч и Фигму, ещё задолго до появления оных, теперь ютится на задворках, но занимает особое место в сердцах хардкорных проектировщиков.
А ещё: Это не сравнение кто круче и не попытка засрать ваш любимый инструмент работы, каким бы он ни был.
Моё знакомство с Акшурой (здесь и далее я буду писать это название именно так) началось, нет, не с первых версий, как это часто бывает в подобных статьях, а с версии 6 или 7. Но те кто знает с какой периодичностью Акшура выпускает новые мажорные версии, понимает, что это было довольно давно.
Впервые открыв Акшуру я сразу понял, что это комбайн. Реальный. Огромный комбайн с кучей всяких функций. Но начав изучать её я понял, что все основные функции легко доступны и логика расположения панелей очень напоминает, как ни странно, Фотошоп. Это было приятно, ведь тогда Фотошоп ещё использовали для рисования сайтов и прочих интерфейсов. Да, было такое время. Вам, поколению (я даже не знаю какую букву латинского алфавита сейчас надо подставить), этого не понять. Такое знакомое расположение панелей, думаю они выбрали не случайно.
Давайте пробежимся по функциям, которые уже были в версии 7 и, которые широкое распространение получили только с приходом Скетча и Фигмы.
-
Компоненты. Да-да, те самые Символы (у Скетч) и Компоненты (у Фигмы), уже давно были и есть в Акшур. Только называются они Мастера. Принцип и логика работы мастеров абсолютна такая же, как у современных аналогов.
Что есть в Акшуре и нет в Фигме / Скетче
- Адаптивность макетов. В Акшуре можно задать точки разрыва при которых макет будет перестраиваться у юзера на устройстве. В Фигма есть только несколько плагинов, которые просто будут эмитировать адаптивность в процессе дизайна, а не у юзера.
- Вставка кода. Акшура сразу имела визуальный интерфейс программирования прототипа, который позволяет запрограммировать любой кусок прототипа и менять его состояния в зависимости от действий пользователя. А уж если вы знаете JavaScript, то вы можете сотворить просто что угодно в прототипе. Можете даже собрать работающий сайт. Фигма только сейчас робкими шагами идёт к интеграции кода в свой интерфейс. Естественно, в своём понимании как это должно работать и уже не JavaScript, а React, но идея встретить визуальный редактор и код далеко не нова.
- Инструменты создания схем. Полезно для любителей создать CJM или просто структуру страниц/экранов интерфейса и логику разных сценариев. Сейчас чаще всего для этого принято использовать, например Miro или божественный Overflow, но в Акшуе это было из покон веков без необходимости прыгать в другие инструменты.
Самое смешное, что даже сам процесс создания и редактирования шейпов в Акшуре гораздо ближе к современным принципам «рисования» в Скетч / Фигма чем в Фотошопе тех лет. Т. е. по факту в Акшуре можно нарисовать финальный дизайн ничем не хуже чем в Фигма. Единственная проблема будет с тенями (в Акшур они не очень) и эффектами наложения слоёв (которых в Акшуре просто нет), но честно говоря наложением слоёв, лично я, и не пользовался никогда.
Адобе, создав вполне не плохой, на мой взгляд, XD всё же смогли если не запрыгнуть, то хотя бы зацепиться кончиками пальцев за уходящий поезд и сейчас трепыхаются по шпалам, но держатся. А вот Акшур запрыгнуть не успели и фактически бегут за поездом в гордом одиночестве и на них с поезда изредка и с грустью в глазах поглядывают проектировщики, которые уже давно взяли волю в кулак всё более невозмутимо открывают Фигму.
На мой взгляд Акшур в какой-то момент пережила экзистенциальный кризис, отголоски которого испытывает до сих пор. С одной стороны стремясь быть похожей на героев нового времени, с другой придерживаться своих концепций и оставаться комбайном для всего и сразу. И, кажется, разработчики выбрали первый путь и стараются держать руку на пульсе, понимая, что мир изменился. Об этом говорит хотя бы то что Акшура теперь поддерживает приём файлов и Скетча, и Фигмы и даже XD (и ни один из них не поддерживает файлы Акшуры). Правда, я не знаю никого, кто будучи в здравом уме захотел бы перейти из Фигмы в Акшур.
Этот пост для меня, как некая дань уважения к Акшуре и ностальгия по работе в ней. А также взгляд в будущее с робкой надеждой на реннесанс Акшур в массовом дизайнерском сознании. Ведь она сейчас стремительно меняется и, по сути, уже не хуже Скетча и точно лучше (оценочное суждение) XD. В новой версии появился CSS код для разрабов и даже настройка анимации для дизайнеров. Да, что я вам рассказываю. Просто проверьте сами.
Перед началом статьи хочу сказать, что еще больше полезной и нужной информации вы найдете в моём Telegram-канале. Подпишитесь, мне будет очень приятно.
Прототипирование является ключевой частью проектирования UI и UX. Дизайнеры могут создать прототипы как с высокой, так и с низкой точностью, в зависимости от их назначения. Таким образом, прототипы дают возможность опробовать функцию, приложение или сайт. Их основная цель — протестировать идеи до того, как они будут полностью разработаны, а также улучшить пользовательский опыт.
Существует множество способов продемонстрировать дизайнерское взаимодействие с многочисленными инструментами прототипирования, которые доступны дизайнерам.
Мы рассмотрим топ-10 новейших инструментов, которые помогут UX/UI-разработчикам создать интерактивную модель для дизайна и концепции продукта.
Adobe XD — один из самых популярных инструментов среди UI/UX-дизайнеров. Данная программа функционирует в качестве универсальной платформы для создания вайрфреймов, дизайна сайтов, мобильных приложений, голосовых интерфейсов и т.д. Adobe XD позволяет командам коллективно работать между платформами в режиме реального времени, получая ценные комментарии и отзывы напрямую от клиентов.
Figma предоставляет простой в использовании редактор перетаскивания, чтобы создавать вайрфреймы и практические прототипы. В программе также имеется много элементов для анимации прототипов.
Большинство дизайнеров уже знакомы с данным UI-инструментом. Несмотря на то, что Figma считается программой по проектированию UX, она также имеет программное обеспечение для быстрого прототипирования. Дополнительные функции включают такие плагины, как Figmotion и Autoflow, а также Arc Tool и Vector Networks.
На сегодняшний день Webflow набирает популярность, поскольку ускоряет работу разработчиков, предлагая семантический код, и дизайнеров. По сути, платформа помогает в прототипировании, одновременно создавая живой сайт. Webflow — это широко известный способ прототипирования для разработки чувствительных к программированию без кода сайтов. Дизайнеры могут использовать встроенные сложные функции для высокоточных проектов, которые Webflow может преобразовать в готовый к производству сайт одним нажатием кнопки.
Sketch — одна из наиболее широко используемых программ для создания пользовательского интерфейса и прототипирования среди миллионов программистов по всему миру. Это одно из лучших современных приложений для разработки всех форм пользовательского интерфейса. Платформа напоминает усложненную и широко поддерживаемую версию Figma. Однако программа доступна только для iOS.
Это векторная платформа с элегантным графическим интерфейсом, которая позволяет управлять стилем, масштабированием и дизайнерскими шаблонами. Помимо этого, Sketch обладает широким спектром границ, градиентных заливок, режимов смешивания и т.д. Программа поддерживает целый производственный процесс, в котором дизайнеры разрабатывают высококачественные проекты.
InVision — еще одно веб-приложение, которое ориентировано на архитектуру. Оно предлагает все необходимые материалы для перехода от варфрейминга до UI-дизайна, а также полезные методы для лучшей командной работы и прототипирования.
InVision — один из самых больших и популярных инструментов прототипирования, которые используются сегодня дизайнерами и ведущими предприятиями. Платформа поддерживает изменения дизайна в режиме реального времени, а также быстро собирает ответную реакцию команд, позволяя разработчику организовать свой рабочий процесс. Такой подход упрощает проектную работу.
Axure RP сочетает эффективные инструменты проектирования, SVG-импорт, интеграцию Sketch и Adobe XD с прототипированием мирового уровня. Вы можете легко обмениваться прототипами Axure RP и монтажными областями Adobe XD, быстро рисовать и собирать входные данные поверх экранов, проверять макет, получать CSS-фрагменты и загружать ресурсы, а также конвертировать статические изображения в динамические прототипы Axure Cloud.
Платформа также облегчает комплексную документацию, автоматизированные красные линии и передачу материалов разработчикам без необходимости писать какой-либо код.
Framer известен своей универсальностью, разносторонним интерфейсом, функциональным дизайном и понятными шаблонами. Данный инструмент расширяет дизайнерскую динамику от метода перетаскивания, поскольку эта платформа основана на коде и использует CoffeeScript для создания прототипов.
Недостатком данного инструмента является усложненный интерфейс и рабочий процесс, поэтому разработчикам и дизайнерам приходится тратить много времени на его изучение.
Origami Studio — приложение для macOS, созданное и используемое Facebook. Существует также аналог мобильного приложения, который позволяет просматривать прототипы на реальном устройстве.
Facebook применяет данный инструмент прототипирования на ежедневной основе. В 2013 году Origami Studio стал доступен всему миру. Изначально он работал с Quartz Composer, но ни для кого не секрет, что эта часть Xcode-среды — не лучший способ прототипирования. Поэтому в прошлом году Facebook предоставил Origami Studio — предыдущий прототип инструмента, который работает с их собственной средой. Его производительность значительно повысилась благодаря этому шагу, но, к сожалению, он по-прежнему доступен только для пользователей Mac.
Marvel называет себя «дизайнерской платформой для цифровых продуктов». Хотя это утверждение не является полностью верным, программа отлично подходит для создания прототипов мобильных и цифровых приложений.
Marvel обладает всеми доступными ресурсами для разработки всевозможных мобильных и сетевых интерфейсов — от концепций до шаблонов. Платформа также облегчает взаимодействие жестов для создания анимированных приложений для смартфонов.
Justinmind — инструмент прототипирования, который позволяет дизайнерам сфокусироваться на пользовательском опыте. Платформа идеально подходит для создания вайрфреймов и адаптивного прототипирования, которые совместимы с различными разрешениями экранов. Дизайнерам стоит правильно использовать полный набор шаблонов и UI-библиотек, чтобы создать высокоточные прототипы. Более того, JustInMind помогает работать с формами и списками данных, не требуя при этом умения писать код.
Ниже представлено еще несколько платформ, которые не попали в список лучших инструментов для создания прототипов.
1. UXPin объединяет дизайн, прототипирование и совместную работу в одном месте на Windows, Mac или в любом браузере.
2. Blocs предоставляет возможность добавить множество интересных эффектов прокрутки и анимации в любую часть адаптивных сайтов без необходимости писать код.
3. Principle позволяет разрабатывать анимированные и интерактивные пользовательские интерфейсы через поток многоэкранного приложения или новых взаимодействий и анимации.
4. Omnigraffle предоставляет инструменты для мокапов пользовательского интерфейса, которые позволяют строить диаграммы и создавать прототипы, а также инструменты проектирования для специалистов, нацеленных на организацию работы и визуальное взаимодействие.
5. Mockflow — простое программное обеспечение для разработки вайрфреймов и совместной работы над UI-дизайном путем быстрого создания эскизов макетов интерфейсов.
6. Slickplan — система веб-прототипов, которая позволяет легко определять папки, страницы и структуры ссылок с помощью интерфейса перетаскивания.
7. Proto позволяет создавать полностью интерактивные высокоточные прототипы.
8. Moqups — оптимизированное веб-приложение, которое помогает создавать вайрфреймы, макеты, диаграммы и прототипы в режиме реального времени.
9. iPlotz обеспечивает разработку кликабельных навигационных макетов и вайрфреймов для прототипирования сайтов и программных приложений. К тому же, вы можете обсудить свои творения с другими пользователями.
10. Gliffy — программное обеспечение для построения диаграмм и рисования, которое позволяет перетаскивать фигуры или использовать шаблоны и темы для прототипирования.
11. HotGloo — UI-программа для создания вайрфреймов и прототипирования. Используется для разработки интерфейсов для цифровых, мобильных и переносимых устройств.
12. Mockingbird — UI-инструменты для создания макетов с помощью элементов перетаскивания на страницу с возможностью менять размеры.
13. Protoshare — инструмент совместного прототипирования, который помогает командам визуализировать требования с помощью вайрфреймов сайтов, интерактивного программного обеспечения и мобильных прототипов.
14. Balsamiq — программное обеспечение для разработки низкоточных вайрфреймов с большим количеством онлайн-курсов и ресурсов для изучения варфрейминга и дизайна пользовательского интерфейса.
Пользователи сайта Designer News поделились своими любимыми инструментами для прототипирования. В основном они пользуются продуктами от Adobe, Sketch, Figma, но выделили и несколько других сервисов.
Инструмент для создания интерактивных прототипов сайтов и мобильных приложений. Разрабатывает Axure одноименная компания, основанная в 2002 году. С помощью него можно также создавать диаграммы, оформлять документацию и так далее.
Компания предлагает бесплатный 30-дневный пробный период.
Призер престижной дизайн-премии Reddot 2017 года. Инструмент позволяет создавать интерактивные прототипы без кода и запускать их на устройствах на базе iOS и Android.
Стоимость бессрочной подписки на сервис составляет $99. Есть бесплатный пробный период — 7 дней. Его можно продлить на 10 дней, зарегистрировавшись на платформе Protopie Studio.
Сервис для прототипирования сайтов и мобильных приложений в браузере. Пользователи Designer News отметили его простоту и скорость.
У инструмента есть бесплатная версия для некоммерческих пользователей (например, для тех, кто только учится дизайну), а также руководство гарантирует полный возврат средств в течение 30 дней после первой оплаты в случае, если пользователя что-то не устроит.
Плагин для Sketch, с помощью которого можно быстро создавать интерактивные HTML-страницы из статичных прототипов.
Инструмент для прототипирования приложений на macOS и iOS. Позволяет создавать интерактивные и анимированные прототипы, делиться ими с коллегами и тестировать на нескольких устройствах. Есть бесплатная 14-дневная версия.
Инструмент для прототипирования, в котором прототипы создаются на основе кода. При этом собрать нужный макет можно и только визуальными средствами — так что пользоваться Framer X можно и без знаний программирования. Позволяет быстро тестировать полученные прототипы и делиться ими в облаке.
Предлагает бесплатную двухнедельную подписку.
Какие инструменты используете вы?
Пффф, слабаки. Paint. За 5 минут любой прототип можно набросать.
набросайте интерактивный прототип, пожалуйста
мы бедный стартап. предлагаем долю, как поднимемся и станем известными
Плюс за старание
Чтобы что, поиграть с вами в игру принеси мне камень?
ахахахахах полный хохотач просто ))))))))))))))
Adobe XD + Illustrator + Photoshop
А про Figma автор забыл -_-
В основном они пользуются продуктами от Adobe, Sketch, Figma, но выделили и несколько других сервисов
Да Figma топчик, причем думаю скоро будет и там анимация интерфейса.
Если олды — то у Adobe был классный Fireworks, который они убили (и в итоге выпустили XD)
На личной практике, вёрстка выходит дороже, т. к. нужно прикручивать какой-то шаблонизатор, чтобы не копипастить, например, одну и ту же шапку со страницы на страницу.
Плюс нужно куда-то её выкладывать, настраивая флоу, хоть на том же git hooks (можно, конечно, всё фигачить напрямую на фтп).
Плюс нет интерактивных комментариев, которые может накидать заказчик.
Плюс, если предполагаются какие-то нестандартные контролы, их всё равно быстрее накидывать в графическом редакторе.
Профит тоже есть, но чем больше правок, тем быстрее он тает.
фотошоп и xd (ну и иллюстратор)
Охх, фотошоп, это же путь страдающей улитки
Лист бумаги и ручка для варфреймов, а для остальной детализации Скетч. В нём же и дизайн, и прототипы.
Ранее я работал в axure. Он требовательный к ноутбуку, довольно сложный и многоуровневый. Зато в нём можно что угодно делать и интерактивные элементы мутить (выпадающие списки / анимацию / итп). Когда-то мне он очень нравился, но я больше не рисую чистовые макеты, а делаю только черновые и отдаю дизайнеру чтобы рисовал уже в ФШ или скетче.
Как-то раз я сделал прототип сайта на тильде. Для того, чтобы прикинуть что будет с контентом это очень удобно. Но никаких сложных элементов там не замутить.
Читайте также: