Mediakar

Wireframes: сервисы для создания макета сайта

С помощью этих бесплатных инструментов можно создать wireframe – макет сайта или блога, на который будут ориентироваться дизайнер и программист. 

Впервые в жизни я столкнулась с необходимостью создать макет будущего сайта. Сейчас я вхожу в команду, разрабатывающую новый журнал для крупного немецкого издательства. В частности, отвечаю за цифровую стратегию для будущего печатного продукта. Одна из задач – придумать, как будет выглядеть сайт журнала: стартовая страница, отдельная стандартная статья, специальные повторяющиеся форматы. Конечно, придумывается все в голове, наброски рисуются от руки, а вот как передать эту информацию программисту и дизайнеру, которые будут заниматься воплощением идеи? Для этого существует специальный термин – wireframe, или mockup. Грубо говоря – чертеж, набросок, русский термин – “структурная схема страниц”.

Wireframe позволяет сделать набросок сайта, который, в зависимости от присутствующих элементов и затраченных усилий, может выглядеть очень даже профессионально. Я пользовалась программой Balsamiq, которая на время испытательного периода бесплатна. Вот так могло бы выглядеть создание макета для iTunes Store:

[youtube=http://www.youtube.com/watch?v=70hfU7_95Gw&w=420&h=315]

Однако у Balsamiq есть один весомый недостаток: через 6 дней после начала пользования халява заканчивается и, чтобы сохранять созданные макеты, вам придется выложить $79. Я-то сделала все макеты за один день, но что, если вам нужно долго и нудно обсуждать созданный wireframe с коллегами, начальством, дизайнерами, программистами, родственниками, друзьями и домашними животными? Здравый смысл говорит, что нужно либо покупать программку, либо искать альтернативы.

Читала, что такие сервисы, как Axure или, например, Visio от Microsoft довольно неплохи. Их можно попробовать в испытательной версии.

А из бесплатных сервисов для создания макета сайта можно рассмотреть следующие:

  • Pencil Project работает на Windows и MacOS и, в общем, нужные функции выполняет нормально, хоть и не так элегантно и стильно, как в случае с Balsamiq. Есть даже отдельные элементы для Android и iOS. Кстати, в Balsamiq для Android я ничего подобного не заметила. Но:  разобраться с тем, как вставлять текстовые рамки, где текст нормально распределялся бы по всей ширине, я за 5 минут так и не смогла (см. картинку). Может, на шестой минуте бы дошло. Да, еще и с экспортом картинки были проблемы. В общем, дешево, но не всегда сердито.
  • Lovely Charts, вообще-то, предназначены скорее для создания разных графиков и схем и на макетах страниц не специализируется. Для того, чтобы начать пользоваться версией для браузера, нужно сначала зарегистрироваться.
  • Cacoo – вот это сюрприз! – есть и на русском языке. Естественно, бесплатная версия программы работает с ограниченным функционалом. Но под пиво сойдет. Плюс есть возможность подключать к работе и других пользователей.
  • Gliffy выглядит более профессионально, но при попытке сохранить работу предлагает подписаться на платный аккаунт. Пользоваться бесплатной версией можно в течение 30 дней.
  • Lumzy – простое веб-приложение, не требующее регистрации и без проблем сохраняющее файлы в формате jpg и pdf.
  • Mockflow позволяет бесплатно работать над одним проектом, состоящим самое большее из 4 страниц, и привлекать к работе еще максимум двух человек. Годовой план стоит $69.

Тем, кто хочет протестировать и другие программки по созданию wireframes, советую прочитать пост 23 Best User Interface Design/Website Wireframing Tools with Features and Comparison и обратить внимание на сравнительную таблицу внизу страницы.

Вывод: Если создание макетов – часть вашей ежедневной работы, то бесплатные инструменты вам вряд ли понравятся. А для периодического создания wireframes я бы выбрала Balsamiq или Lumzy.

Leave a Reply

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