Figma или axure что лучше
Обновлено: 04.07.2024
Axure и подобные программы предназначены для создание сложных интерфейсов. где сначала нужно построить логику работы. Например, разработка CRM.
Структура → элементы → стили → поведение. Просто последовательная детализация проекта. А в чем она осуществляется не важно. Формат конечных чертежей важнее.
Я бы их вообще в PDF предоставлял. Ну правда, вы себе представляете что слесарю нужно уметь пользоваться кульманом для чтения чертежей детали? А ведь предоставление файлов PS или Figma именно такой подход подразумевают.
Style guide (типографика, шрифты, сетка, поведение), UI Kit (элементы), Layout (макеты страниц), Cut Guide (инструкции) в PDF. Плюс каталог Assets. Шрифты, изображения, actions для обработки изображений…
Не говоря уж о том, что в полиграфии, из которой взялся термин верстальщик, это дизайнер. Веб–верстальщику, скорее наборщику соответствует. Может стоит, как на Хабре предлагали, вместо верстальщиков ввести веб–технологов (правда, тоже не однозначное определение). Специалисты которые не просто «режут макеты», а думают как человек это сайт на медленном 3G получать будет. Или что будет если его через screen reader откроют. Или на телевизоре откроют (но тут вопрос и к дизайнерам).
А там глядишь и дизайнеры вспомнят, что не у всех пользователей 27 экраны с идеальной цветопередачей и 100% зрение. Что бывает цветовая слепота и дислексия. Что сайт таки предназначен не только для выставления в Behance.
Речь естественно не о сайтах «однодневках».
P. S. «ux/ui дизайн» меня это все время веселит. Это как? Эргономика или интерфейс? Эргономика деленная на интерфейс? Эргономика против интерфейса? Или еще какое значение есть у косой черты при таком применении?
"«ux/ui дизайн» меня это все время веселит." - это типо придумываешь так чтоб удобно оценивая поведение людей и чтоб одновременно типо красиво.
Александр Оракул (63576) БЛЭК КЭТ (гёл), по поводу вопроса с фигмой. Обрати внимание на первое же CSS правило. Абсолютное позиционирование. Как в программах визуальных конструкторов. Потому их так «любят разработчики». Поддерживать такой код это даже не «оттенки серого»… : -) Два монитора, на одном редактор, на другом браузер. Плагины лайв релоада. Вот и «визуальная разработка».Для верстки глубокое знание JS не требуется. Достаточно умения подключать готовые скрипты.
Перед началом статьи хочу сказать, что еще больше полезной и нужной информации вы найдете в моём 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 — программное обеспечение для разработки низкоточных вайрфреймов с большим количеством онлайн-курсов и ресурсов для изучения варфрейминга и дизайна пользовательского интерфейса.
Прототипирование выполняет роль чертежа и позволяет разработчикам просмотреть полный обзор сайта или приложения до начала его создания.
Это необходимый шаг в дизайнерском процессе, поскольку он помогает взаимодействовать с командой и изучать новые способы работы. Вы сможете убедиться, что UX/UI-дизайн правильно сформирован, прежде чем приступить к работе над конечным продуктом.
Если в прошлом вы избегали прототипирование, так как не хотели работать с программированием, теперь большинство инструментов для создания прототипов не требуют опыта в этом.
Итак, в данной статье мы рассмотрим топ-19 инструментов прототипирования для дизайнеров UX/UI, а также расскажем про плюсы и минусы каждого из них.
1. Figma
Figma — ведущий инструмент прототипирования для UX/UI-дизайнеров. Основная цель данной платформы — расширение коллективной работы, чтобы команды смогли создавать прототипы и проектировать совместно друг с другом. Поскольку Figma разработан на основе облака, проект автоматически сохраняется, и вам не придется беспокоиться о потере черновика.
Вы можете начать с бесплатной версии, а затем перейти на платную (45 долларов в месяц), которую может использовать вся организация.
2. Adobe XD
Adobe XD помогает предоставляет широкий спектр инструментов для создания прототипов. Он прост в настройке и использовании, но также предлагает сложные инструменты проектирования.
Стартовая версия бесплатна, но вы также можете заплатить 9,99 долларов в месяц за одно приложение.
3. Sketch
Sketch помогает командам сотрудничать и создавать прототипы, но доступен только на устройствах Mac. Sketch также предлагает плагины, с помощью которых можно одновременно работать над одним проектом с командой и использовать различные варианты экспорта.
В зависимости от того, сколько лицензий вам нужно, платная версия Sketch может стоить от 79 до 99 долларов в год.
4. Zeplin
Zeplin позволяет легко перенести прототип в конечный продукт. UX/UI обладает уникальным дизайном, но при экспорте иногда возникают проблемы.
Zeplin доступен бесплатно, но в зависимости от объема и структуры работы может взиматься оплата от 10,75 до 26 долларов в месяц.
5. Framer
Framer помогает команде сфокусироваться на программировании и дизайне. Некоторые новые пользователи жалуются на интерфейс и ограничения программы. Но данная платформа гарантирует такие важные факторы для разработки прототипов, как гибкость и скорость.
Framer предлагает различные планы подписки: они варьируются от бесплатной до PRO-версии, которая поддерживает неограниченное количество проектов всего за 20 долларов в месяц.
6. MockFlow
MockFlow предлагает автономный режим, поэтому вы можете использовать данный сервис даже без доступа к облаку. Его преимущество заключается в создании каркасных конструкций, которые поставляются с шаблонами. При помощи этих шаблонов вы сможете ускорить творческий процесс.
MockFlow предлагает бесплатную базовую версию, а дополнительные функции обойдутся в 19 долларов в месяц.
7. Balsamiq Cloud
Balsamiq Cloud — это веб-приложение, которое помогает быстро создать прототип. Это позволяет сосредоточиться на структуре и идее, а не зацикливаться на мелких деталях. Однако такого рода скорость и доступность достигается за счет жесткого подхода и меньшего количества настроек.
Balsamiq Cloud стоит всего 90 долларов в год для двух проектов и до 1 990 долларов в год для 200 проектов.
8. Webflow
Webflow поставляется с большим количеством учебных пособий, которые упрощают его использование. Более того, данный сервис может похвастаться комплексным набором дизайнерских инструментов, поэтому некоторым пользователям может быть трудно ориентироваться в нем.
Первые два проекта вы можете сделать бесплатно, а затем сервис предложит вам подписку до 42 долларов в месяц для учетной записи PRO.
9. Flinto
Flinto позволяет добавлять анимации в прототип. Однако имейте в виду, что процесс разработки анимации потребует много времени, и при попытке создать взаимодействие между компонентами в прототипе существуют некоторые ограничения.
Flinto предлагает бесплатную 30-дневную пробную версию, а затем будет взимать 20 долларов в месяц за каждого участника.
10. Origami Studio
Платформа Origami Studio была разработана командой дизайнеров Facebook и полностью бесплатна. Дизайнерам Facebook нужен был инструмент для создания прототипов, который быстро работает и позволяет получать хороший результат. Origami Studio демонстрирует свою силу при разработке микровзаимодействий или выделении определенной страницы в прототипе.
11. ProtoPie
ProtoPie прост в использовании, однако ассортимент творческих материалов достаточно ограничен. Программа бесплатна для всех учителей, студентов и школьников. Но также вы можете приобрести платную версию, цена которой варьируется от 11 до 42 долларов в месяц.
12. UXPin
UXPin предлагает большой диапазон инструментов, которые помогут разработчикам достигать поставленных целей, включая условные взаимодействия, выражения и интерактивные состояния. Недостатком использования UXPin является то, что библиотека дизайна не обновляется, а компоненты пользовательского интерфейса могут показаться устаревшими.
Основная версия UXPin стоит 19 долларов в месяц, но также имеет и более продвинутые и профессиональные версии, цена которых может доходить до 69 долларов.
13. Axure RP 9
Axure RP 9 предлагает интерфейс перетаскивания, который облегчает управление. Данный сервис достаточно легко использовать, но без знаний программирования могут возникнуть трудности. Axure RP 9 стоит 25 или 42 долларов в месяц за версию для команд.
14. InVision
InVision фокусируется на повторяемом и оптимизированном рабочем процессе проектирования с разработкой и прототипированием продуктов перед написанием кода. Известно, что данный инструмент имеет небольшую функциональность и ограниченный просмотр при замедлении работы процессора из-за большого количества создаваемых файлов.
Для одного человека и небольших команд вы можете использовать InVision бесплатно. Для более крупных команд программа будет стоить 7,95 долларов на пользователя в месяц.
15. Principle
Principle направлен на создание интерактивного и реалистичного прототипа, который будет сочетаться со статическими макетами и вайрфреймами. Однако этот мощный инструмент предназначен только для использования на Mac или iPhone. Стоимость — 129 долларов в год.
16. JustInMind
JustInMind позволяет создать прототипы с высоким разрешением и помогает начать работу с различными шаблонами. Однако у вас могут возникнуть трудности при совместном использовании и экспорте завершенного прототипа.
JustInMind обойдется в 19 долларов в месяц для обычных пользователей и в 39 долларов в месяц — для компаний.
17. Marvel
У Marvel есть бесплатная версия, доступная только для одного пользователя и одного проекта, а также платные версии от 12 до 42 долларов в месяц. Marvel предлагает чистый и простой пользовательский интерфейс и упрощает совместную работу. Он обеспечивает отличную общую базу для прототипирования, но функционал достаточно ограничен.
18. MockPlus
MockPlus позволяет быстро создавать прототипы с помощью реальных дизайнерских файлов, публиковать проекты в облаке и делиться ими с командой по ссылке. Однако при тестировании на мобильных устройствах прототипы будут работать с задержками, а также потребуют полной загрузки при каждом просмотре.
Базовая программа MockPlus IDoc бесплатна и охватывает 10 пользователей и 10 проектов. Дополнительные версии стоят от 5,95 до 12,95 долларов за пользователя в месяц.
19. Atomic
Atomic обеспечивает гибкую основу для совместной работы всей команды с дополнительными виджетами и дополнениями, которые помогут получить желаемый результат. Однако экспорт с помощью Atomic не предусмотрен, и для демонстрации прототипа потребуется дополнительный инструмент. Atomic — это инструмент для создания прототипов на основе браузера, который стоит от 15 до 35 долларов в месяц.
В этой статье я напомню о важности навыка прототипирования для бизнес-аналитика, объясню, почему Axure уже не тот и поделюсь лайфхаками, как извлечь максимум пользы из Figma.
̶К̶р̶а̶т̶к̶о̶е̶ введение
Мы живем в такое время, в котором количество информации растет в геометрической прогрессии. Если, к тому же, принять во внимание специфику работы бизнес-аналитика, то каждый день приходится учиться новому.
Как и программистам, которым приходится изо дня в день изучать множество кучу статей на специализированных ресурсах, так и наши коллеги постоянно находятся в поисках информации о новых доменах, технологиях, инструментах.
Однако не только IT-специалистам приходится каждый день изучать тонны информации для того, чтобы делать свою работу лучше. Каждый из наших заказчиков, работая с IT командой, должен погрузиться в проект, выделить время на общение с аналитиком и на прочтение сотен страниц документации.
Можно считать, что нам повезло, если заказчик из финансового сектора, когда клиент сам создает и управляет документацией на предприятиях. Однако, гораздо чаще приходят такие проекты, где заказчик руководствуется только бизнес-логикой, в будущем IT решении видит ценность как в инструменте обогащения и сокращения издержек, и, следовательно, ожидает, что вся работа будет сделана в кратчайшие сроки, без лишних хаоса и бюрократии.
В таких ситуациях (и не только) бизнес-аналитикам на помощь приходят прототипы! С полной уверенностью могу сказать, что если разрабатываемое ПО не отвечает за сохранность жизни людей или финансы (например, домены healthcare и банки), то чаще всего написание многостраничной SRS в современных реалиях уже не требуется. Миром правят картинки.
Когда вы открываете сайт государственной организации, какие ощущения вы испытываете? Старые веб-сайты, которые дошли до наших дней в том виде, в котором они запускались в далеких 90-х, сегодня выглядят странно, дико и в то же время удивительно. Такое происходит, когда либо поддержка сайта заканчивается быстро, либо когда на дизайн и обновление времени и желания нет.
Такое же ощущение может возникнуть и при использовании Axure.
Как бы грустно это ни звучало, сам по себе Axure, может, и хорош, однако уже не поспевает за планетой.
Девятая версия вышла год назад, однако уже можно сказать, что в ней есть некоторые вещи и детали, которые на данный момент кажутся устарелыми. Например, отсутствие настроек дизайна стандартных компонентов.
Как говорят сами создатели, Figma — первый облачный инструмент для разработки пользовательского интерфейса, позволяющий вести совместную работу в режиме реального времени.
Судьба свела меня с этим замечательным инструментом когда я искала подходящий инструмент для дизайна. До этого проекты я выполняла в Axure без зазрения совести и считала его крутейшим инструментом, в то время как Figma позволяет делать анимированные переходы между страницами, показывать выпадающие списки и так далее, тому подобное.
Сам по себе инструмент Figma используется дизайнерами как замена After Effect и Sketch. Все-таки пользоваться легковесным инструментом для создания современных интерфейсов просто удобно. Однако мне удалось найти преимущества в Figma также и для бизнес-аналитиков. Расскажу о них далее по порядку
Условная бесплатность
Не бойтесь все потерять!
Совместное редактирование
Для меня это скорее минус, чем плюс, т.к. мой опыт одновременного редактирования гугл-документа показывает, что изменения от нескольких пользователей могут серьезно навредить форматированию. Но в случае, если необходимо сразу нескольким аналитикам работать над одним проектом, то в Figma присутствует функционал многопользовательского подключения.
Режим просмотра
В любой момент вы можете дать ссылку на проект кому-либо из команды либо самому заказчику. Таким образом вы можете презентовать проект без необходимости использования стриминговых видео-сервисов, таких как Skype и другие. Достаточно дать ссылку на презентацию проекта. Figma является полностью бесплатной для участников проекта: менеджеров, клиентов, и программистов в режиме просмотра.
Долой миллион версий
Думаю, что всем знакома переписка в почте с архивами проектов Adorable_Project_v1.14. А сколько отдельных файлов приходится хранить на PC. Figma может помочь решить и эту проблему. В случае, если вы уже отправили клиенту ссылку на прототип и хотите внести изменение, можете просто взять… и внести его! Прототипы для клиента обновятся автоматически и отправлять повторное письмо с новой версией артефактов не придется.
P.S. Да, я знаю о сервисе AxureShare, однако для того, чтобы внести там изменение, придется пересохранять файл и заново заливать в облако.
Библиотека компонентов
Управление компонентами
Чумовая анимация
Этот пункт отмечу особенно, т.к. для меня это главный плюс.
Сколько времени и сил было сэкономлено благодаря меню, которое выдвигается слева, табам, которые можно переключать, возможности открытия попапов с затемнением экрана, увеличению масштаба при нажатии и многому другому. Главное, что переход между элементами происходит интуитивно и иногда теряется ощущение, что это всего лишь прототип.
Отсутствие поиска по компонентам
В Axure есть возможность поиска по названиям страниц и элементов. В Figma приходится либо вручную искать элемент в библиотеке, либо высматривать его в рабочей области с компонентами.
Нет возможности работать без интернета
Онлайновость Figma— одновременно и достоинство, и недостаток. Большинство привыкло работать с файлами, хранящимися на диске. В случае же, если работаешь за городом или дома с нестабильным Интернетом, невольно становишься заложником обстоятельств, несмотря на то что при переподключении к сети Figma синхронизирует изменения в незакрытом макете. Конечно, файл с проектом можно сохранить и на диск в формате FIG, но для его открытия все равно понадобится подключение к Интернету.
Профессия бизнес-аналитика молодая и развивающаяся, поэтому хотелось бы, чтобы создаваемые нами артефакты также шли в ногу со временем. Уверена, что с помощью Figma и перечисленных выше возможностей каждый из бизнес-аналитиков найдет общий язык с командой и клиентом, что приведет к успешному завершению проекта!
Читайте также: