13 мыслей о Macaw. 20.10.2016

  • #ui
  • #ux
  • #macaw

Новая программа для проектирования прототипов веб приложений и сайтов. (Вольный перевод статьи http://www.peachpit.com/articles/article.aspx?p=23...)


Macaw представляет собой бесплатную программу для прототипирования сайтов и веб приложений. Средства на создание данного приложения были собраны на Kickstarter. Релиз состоялся в марте 2014г.

Хоть в настоящее время большинство UI/UX специалистов используют Axure RP для создания прототипов, так как он обладает наиболее богатым арсеналом инструментов, Macaw тоже имеет ряд неоспоримых преимуществ, одно из них и наверно самое главное - это бесплатное распространение.

Сайт Macaw сразу говорит о свежем взгляде разработчиков на визуализацию приложений и веб-дизайн в целом, но в этой статье речь пойдет об особенностях самого приложения, его функциях и возможностях.

1. Контрольные точки.

В адаптивном веб-дизайне, мы используем CSS медиа-запросы (@media screen and (max-width: 980px)) для создания контрольных точек, которые указывают браузеру состояние, при котором он должен изменить объект или окружение вокруг него по средствам CSS. Контрольные точки часто основаны на ширине окна или устройства (например, если окно менее 600 пикселей, меняем css на "этот"). Запись медиа-запросов вручную это хорошо, но постоянная слежка за всеми изменениями постепенно превращается в рутину. Macaw берет это на себя.

После создания контрольных точек, вы можете изменить практически все элементы на странице: позиционирование, размер, цвет, границы, видимость, и так далее. Программа позволяет в два клика переключаться между множеством контрольных точек, что позволяет сразу визуально сравнить и оценить вид приложения под разными разрешениями. Это гораздо приятнее, и более визуально-ориентированно, чем работать с CSS или различными препроцессорами, такими как LESS или SASS (и не поймите меня не правильно я люблю SASS).

2. Динамическая, отзывчивая сетка.

Проектирование на модульной сетке имеет основное значение для поддержки читаемости и организации структуры сайта (веб-приложения). Сетка в Macaw состоит из столбцов, которым можно задать ширину и боковые отступы, так же можно контролировать ширину самой модульной сетки.

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

3. Локальное изображение сервера с автоматическим обновлением.

Macaw построен на веб-технологии, что позволяет получить прототип, максимально приближенный к реальному изображению в браузере. Это конечно очень полезная функция, но нельзя пренебрегать тестированием на различных устройствах и браузерах. Использование локального сервера позволяет получить предварительный просмотр Вашего проекта по IP адресу (что-то вроде http://192.168.1.100:5353).

Это очень здорово само по себе, но еще лучше, каждый раз, когда вы предварительно просматриваете вашу работу, другие устройства будут автоматически обновляться.

4. Css конвертер

CSS3 существует уже достаточно давно, чтобы поддерживаться всеми браузерами, но огромное количество синтаксических правил для различных браузеров не всегда легко запомнить. Есть инструменты, такие как Autoprefixer, которые позволяет справиться с этой проблемой, но Macaw автоматически сформирует правильный синтаксис для всех браузеров. В Macaw встроен CSS конвертер, который поможет получить сразу готовый CSS по Вашему прототипу.

Программа предусматривает диалоговые окна и панели для создания градиентов, теней и других стандартных средств визуализации, и они максимально приближены к стилистики продуктов Adobe, поэтому интерфейс будет казаться очень знакомым и понятным. Даже если Вы очень хорошо знаете верстку, Macaw позволит меньше зацикливаться на коде и постоянных проверках, а больше времени уделить визуализации.


5. Усовершенствованные элементы управления текстом.

Огромное количество веб-шрифтов, по мимо стандартного набора, есть возможность подключать Google шрифты, а так же интегрироваться с Adobe Typekit для еще большего выбора пользовательских шрифтов. Практически все, что Вы можете сделать со шрифтом в CSS3, реализовано в Macaw. Каждый текстовый блок, так же показывает его ширину, для контроля читаемости колонок.

6. Простое управление позиционированием.

При создании сайта, очень много времени уходе на группировку, позиционирование, выравнивание и перемещение слоев. В Macaw все элементы группируются и находятся на слоях, при перемещении реагируют на точки остановки. Вы захотели большой заголовок, но при уменьшении холста Вам постоянно приходится его корректировать под разные разрешения, Macaw позволяет проектировать не теряя время на постоянные обновления и поправки, изменение размеров происходит динамически в зависимости от заданных настроек.

Если Вы опытный веб-разработчик, то идея отказа от прямого контроля над CSS, может не внушать доверия. Подробнее о визуальной разработке, мы говорим в книге, как использование контейнеров, поможет облегчить необходимость прямого использования CSS, для определения местоположения.

7. Возможность визуально отслеживать проблемы.

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

Одним из очень интересных режимов отладки дизайна, является режим Outline Macaw, который схематично показывает границы каждого элемента на странице, он позволит Вам сразу определить элемент, который вызывает нежелательный скролл и вылазит за пределы родителя.

Macaw имеет удобную панель для работы с тегами на странице Outline. Не путайте с визуальным режимом.

8. Инструмент для выравнивания и создания интервалов.

Элементы в Macaw могут быть привязаны к текущей сетке, но есть и другие инструменты для управления выравниванием и интервалами между элементами.

9. Группы и контейнеры.

В графических приложениях мы группируем элементы, для последующего копирования и перемещения групп, в Macaw Тоже предусмотрен данных функционал, но есть существенное отличие - мы можем группировать и назначать элементам теги, а им стили и в последствии конвертировать в HTML и CSS. Создание контейнеров с использованием группировки намного приятнее, чем писать разметку и переписывать свой HTML.

Группы в Macaw так же имеют собственный контекст для позиционирования, что позволяет Вам открыть любую группу и работать внутри ее области, используя модальную сетку и контрольные точки.

10. Генератор HTML и CSS: Это очень хорошо!

Первое, что спрашивают опытные веб разработчики о Macaw - "Сгенерированный код, пригодный?". Ответ на этот вопрос к счастью, это да. Для параноиков, предусмотрены различные настройки и инструменты контроля. Вы можете настроить, детальность генератора, а так же вносить собственные коррективы.

Возможно после генерации, вас будет смущать стиль Macaw, но Вы всегда можете дописать, откорректировать и дополнить свой стиль. В любом случае на выходе, Вы получите пригодный HTML и CSS, который можно допилить ручками, это все же быстрее и приятнее чем писать с нуля.

11. Построенный на Web платформах

Macaw создан при помощи таких веб технологий как Node.js, Chrome, HTML, CSS и JavaScript с относительно тонкими настройками для ОС. Это дает то, что относительно того как проект выглядит на холсте и того что мы увидим в браузере, практически не будет разницы. Так как Macaw по сути является гибридом веб-браузера и графического редактора. Но не надо пренебрегать тестированием на других устройствах и браузерах.

12. Делает простое - легким, а сложное - возможным.

Macaw предоставляет большое количество инструментов, для быстрой и качественной разработки как полноценных интерфейсов так и их элементов. Он позволит в считанные часы создать готовый прототип, небольшого веб (мобильного) приложения, получить пригодный код и при необходимости написать пользовательский javascript.

13. Делает простое - легким, а сложное - возможным.

Macaw предоставляет большое количество инструментов, для быстрой и качественной разработки как полноценных интерфейсов так и их элементов. Он позволит в считанные часы создать готовый прототип, небольшого веб (мобильного) приложения, получить пригодный код и при необходимости написать пользовательский javascript.

13. Разработчикам которые слушают и отвечают.

Macaw была разработана, маленькой группой энтузиастов, так что если Вы решили помочь или хотите оставить свой отзыв, пишите нам на официальном сайте.

Яндекс.Метрика