Macaw — фотошоп для веб-сайтов.

Macaw — фотошоп для веб-сайтов.

macaw-logo

Недавно наткнулся на очень крутую программу под названием Macaw.
Macaw является профессиональным веб-дизайнерским инструментом, созданным для дизайнеров и разработчиков. Он был построен с целью изменить подход в веб-дизайне. Нам больше не нужны статические результаты и написание кода с нуля в блокноте, чтобы воплотить свои самые смелые идиеи в жизнь. С Macaw, вы можете создать адаптивный веб-дизайн, без глубокого знания кода.  Это как фотошоп для создание сайта.  Самое главное он доступен как для Windows так и для Mac OS.

macaw.co

Сразу прикрепляю ссылки на: русскую документацию / официальные видеоуроки / шаблоны для Macaw /  youtube уроки

 

macaw1

Знакомство с Macaw

Изначально я скептически отнесся к подобной программе, учитывая, что подобных сервисов уже целая туча (webflow, webydo и прочие..) Но все же я решил скачать и попробовать, только потому, что это не онлайн приложение. И честно сказать, я был в восторге. Программа сделана очень хорошо. Интуитивный интерфейс доставляет удовольствие при работе с Macaw, все ясно и понятно с первых шагов, каждый элемент ведет себя так, как надо. В программе встроен один из самых умных движков для дизайна и кода, когда-либо построенных. Настолько легко и просто еще никогда не было возможности сделать хороший красивый и адаптивный лендинг. Все создается буквально на лету. Удобная и умная сетка подгоняет все элементы в идеальный ряд. Все, что вам надо это просто творить, не отвлекаясь на код.

 

macaw-demo

Каковы основные преимущества и недостатки Macaw

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

На сегодняшний день, это однозначно одно из лучших решений для быстрого создания красивой страницы, прототипов, лендинга, заглушки, или любой другой несложной задачи. В процессе работы с программой действительно получаешь удовольствие. Программа работает очень быстро, все логично, удобно. Есть все документации и видеоуроки по Macaw. Также отличная фишка, как удаленный доступ к веб-страницы (ваш компьютер работает как сервер ), которую вы генерируете при просмотре.

 

macaw6

macaw5

 

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

На каждый созданный элемент прописывается свой класс. Что например не очень правильно, если мы например делаем меню используя ul и li  теги. Код будет выглядеть вот так вот:

</ul>
<ul class=»container clearfix»>
<li class=»text text-1″>тест</li>
<li class=»text text-2″>тест</li>
<li class=»text text-3″>тест</li>
</ul>

Нельзя брать дочерние элементы и прописывать нужные нам стили. Во всяком случае в беглом обзоре программы с программистом мы не нашли этой функции. То есть правильно спроектировать интернет-магазин, например, да еще и чтобы он корректно адаптировался как нам надо, будет сложной задачей. А вот простые одностраничные сайты — это без проблем. Но если же, вы знаете, как избежать этих проблем, будем рады добавить в статью полезную информацию, напишите об этом в комментариях.

В демо версиях нашли вот такой способ реализации меню:

<div class=»nav»><a href=»#»>HOME</a> &nbsp;| &nbsp;<a href=»#»>SHOP</a> &nbsp;| &nbsp;<a href=»#»>ABOUT</a> &nbsp;| &nbsp;<a href=»#»>CONTACT</a> </div>
</nav>

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

 

macaw7

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

Для бесплатного доступа доступна месячная trial-версия программы.

 

macaw3

macaw

 

А вот и команда разработчиков:

 

macaw2

 

(UPD) Так же бонусом публикую полезные ссылки, которые мне порекомендовал Adam Crhist:

Tuts+ Macaw Video Series
http://webdesign.tutsplus.com/series/designing-and-building-websites-with-macaw—cms-556

Free ebook
http://schonne.com/macaw/

Peachpit Book
http://www.peachpit.com/store/getting-started-with-macaw-9780133995831

Forums
http://forum.macaw.co/

 

Что может быть круче чем Macaw? Scarlet!

Новая программа от создателей Macaw

 

Когда я искал дополнительные материалы по macaw, я наткнулся на еще одну крутую программу, от этих же авторов, которая называется scarlet. И там на рекламной странице ребята рассказывают о новых возможностях продукта, который скоро появится на свет. Они проводят параллель с Macaw и сравнивая его с Scarlet.  Дословно:

Scarlet is a completely different tool. The previous version of Macaw excelled at prototyping and mockups. Scarlet is focused more on building full-fledged design systems.

Scarlet

То есть, они все же подтверждают мою мысль, что Macaw  больше подходит для простых задач типа прототипирования или мокапов, Scarlet же ориентирован больше на строительство полноценных сайтов. С правильным оформлением CSS стилей и дочерних элементов.

Так же ребята уверяют, что с этой программой, будет удобно работать подключая свои знания в области HTML, CSS и JS.  И самое важно, в ней можно будет легко реализовать верстку, по всем правилам и  канонам проектирования. Соблюдая  семантику и другие важные правила разработки и проектирования сайтов.

 

 

То есть  Scarlet должен подойти не только дизайнерам, но и заядлым программистам. Для них в программе будут реализованы многие дополнительные инструменты, такие как параллельные браузеры, и отдельный код-редактор. Очень хотелось бы в это верить! Учитывая успех Macaw, я буду с нетерпением ждать выход Scarlet. (Кстати триал версию можно будет скачать быстрее всего для Mac OS, программа для Windows появится позже, но над ней тоже работают).

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

Официальный сайт Scarlet (сейчас там презентация проекта)

scarlet.macaw.co

 

 

2 Comments


    • Mosquito
      Reply Cancel Reply
    • Июль 29, 2015

    Программа отличная. Но код так себе на выходе. Но не ужасный.

      • Anonim good
        Reply Cancel Reply
      • Август 3, 2015

      ЕГОР!!!!! Спасибо за подробную статью! MACAW офигеннннный просто.

Leave a Reply

Your email address will not be published Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

x