«Balsamiq Mockups» – создание макетов сайтов, мобильных и веб-приложений

Balsamiq Mockups
Balsamiq Mockups
Balsamiq Mockups – это сер­вис для постро­е­ния маке­тов поль­зо­ва­тель­ских интер­фей­сов веб-сай­тов, мобиль­ных при­ло­же­ний и обыч­ных про­грамм.

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

Раз­ра­бот­ка соб­ствен­ных циф­ро­вых про­дук­тов явля­ет­ся доволь­но слож­ным про­цес­сом, тре­бу­ю­щим объ­еди­не­ния уси­лий самых раз­ных спе­ци­а­ли­стов. Одна­ко на ран­них ста­ди­ях про­ек­та все­гда есть очень важ­ный этап – созда­ние про­то­ти­па буду­ще­го сай­та или при­ло­же­ния. Сде­лать это мож­но раз­ны­ми спо­со­ба­ми, но одним из самых лег­ких и удоб­ных явля­ет­ся исполь­зо­ва­ние сер­ви­са Balsamiq Mockups. Для нача­ла рабо­ты в этом веб-при­ло­же­нии вам даже не пона­до­бит­ся созда­вать свою учет­ную запись. Про­сто откры­ва­ем в бра­у­зе­ре эту ссыл­ку и сра­зу попа­да­ем в редак­тор, в кото­ром уже загру­же­ны несколь­ко запи­сей для объ­яс­не­ния основ­ных при­е­мов рабо­ты.

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

Пер­вым делом, вам потре­бу­ет­ся очи­стить область редак­ти­ро­ва­ния для сво­е­го маке­та. Дела­ет­ся это выбо­ром в меню Mockup коман­ды Clear Mockup. Теперь мож­но добав­лять нуж­ные вам эле­мен­ты. Для это­го нахо­дим в ката­ло­ге тре­бу­е­мый эле­мент интер­фей­са и пере­тас­ки­ва­ем его в нуж­ное место. Гото­вых эле­мен­тов име­ет­ся огром­ное коли­че­ство и все они раз­би­ты на тема­ти­че­ские кате­го­рии, так что най­ти нуж­ное не состав­ля­ет ника­ко­го тру­да. Тем более, что для быст­ро­го поис­ка вы може­те поль­зо­вать­ся встро­ен­ной стро­кой поис­ка, куда доста­точ­но про­сто вве­сти пер­вые бук­вы назва­ния.

Balsamiq Mockups
Созда­ние про­то­ти­па сай­та в Balsamiq Mockups

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

Balsamiq Mockups
Окно свойств объ­ек­та Balsamiq Mockups

После окон­ча­ния рабо­ты над маке­том вы може­те сохра­нить его в фор­ма­тах PNG или PDF, что может вам при­го­дить­ся для печа­ти или при необ­хо­ди­мо­сти демон­стра­ции сво­е­го про­ек­та на устрой­ствах, не име­ю­щих досту­па к сети. Кро­ме это­го, есть воз­мож­ность экс­пор­ти­ро­вать про­ект в виде XML-фай­ла. Это даст вам воз­мож­ность открыть его позд­нее в Balsamiq Mockups и про­дол­жить редак­ти­ро­ва­ние, а так­же пере­слать макет по почте кол­ле­гам для вне­се­ния пра­вок. Для сохра­не­ния в этом фор­ма­те вам необ­хо­ди­мо выбрать пункт Export Mpckup XML в меню Mockup. После это­го раз­мет­ка ваше­го маке­та будет ско­пи­ро­ва­на в буфер обме­на, отку­да ее мож­но вста­вить в любой тек­сто­вый файл или поч­то­вое сооб­ще­ние.

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

Веб-сер­вис Balsamiq Mockups остав­ля­ет хоро­шее впе­чат­ле­ние про­ду­ман­но­стью сво­ей рабо­ты и отлич­ной функ­ци­о­наль­но­стью. Не даром это при­ло­же­ние заво­е­ва­ло широ­кое при­зна­ние сре­ди раз­ра­бот­чи­ков про­грамм­ных интер­фей­сов и веб-дизай­не­ров, кото­рые выкла­ды­ва­ют в сеть допол­ни­тель­ные объ­ек­ты и гото­вые маке­ты, кото­рые вы може­те исполь­зо­вать в сво­их про­ек­тах. Мно­гие из них вы най­де­те на этой стра­ни­це.