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

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

MS Visio

Раньше когда-то для создания эскизов мы использовали MS Visio. Это очень мощный графический редактор для построения разного рода схем; в нем можно нарисоватьчто угодно — от простой круговой диаграммы до плана этажа или трехмерной маршрутной карты.

Пример диаграммы в Visio План комнаты в Visio
Пример диаграммы в Visio Маршрутная карта в Visio

Для этого в Visio есть наборы различных объектов (или, как они там называются, фигур), сгруппированных по области их применения, например, для построения карт и планов этажей или, скажем, электротехнических схем.

Набор фигур в Visio Набор фигур для изображения мультимедийных приложений
Набор фигур в Visio Набор фигур для построения схем метро

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

Эскиз страницы в Visio Эскиз страницы, созданный в Visio

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

Ну, и, помимо прочего, Visio стоит денег, и немаленьких.

Moqups.com

К счастью, на свете существуют специальные приложения для рисования макетов веб-страниц (по-английски они называются mockups, и это слово часто используется в названии таких приложений). Этот чудесный мир mockup-приложений открыл нам moqups.com, поэтому на его примере я и расскажу о преимуществах таких инструментов.

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

Так же, как и в Visio, здесь есть набор объектов, которые могут понадобиться при создании макета. Но работать с ними гораздо удобнее. Например, чтобы нарисовать вкладки, нужно перетащить соответствующий объект в рабочую область и отредактировать названия вкладок (активная вкладка помечается звездочкой. Пять секунд — и панель вкладок готова.

Редактирование в Moqups Рисование панели вкладок в Moqups

Так же просто и с другими объектами. Вот такую страничку можно нарисовать за несколько минут:

Страница в Moqups

Из других приятных мелочей: есть набор иконок, которые лично мне очень часто были полезны — чтобы обозначить иконки соцсетей или нарисовать онлайн-плеер. Можно добавлять свои картинки, если среди стандартных не нашлось подходящих.

Набор иконок в Moqups Набор иконок

О структурировании данных. Можно создавать проекты, в каждом проекте — страницы. Удобно, что страницы можно создавать путем копирования.

Созданные макеты можно экспортировать в PDF или PNG или дать другим людям доступ для просмотра прямо через браузер.

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

Пока сервис бесплатный, но что-то подсказывает, что это не навсегда…

И другие…

Помимо Moqups, мне довелось попробовать пару других сервисов для создания макетов и прототипов сайтов. Расскажу о них вкратце.

MockupBuilder

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

Как и Moqups, он бесплатный.

Balsamiq Mockups

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

Есть версия для десктопов и веб-приложения. После окончания демо-периода все это платное.

Invision

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

Два проекта можно создать бесплатно, за последующие уже надо будет платить от 5 долларов в месяц.

Что выбрать

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