Публикувано на 27 юли, 2009 в Уеб Дизайн с етикети Web Design, wireframe
Създаването на wireframe е едно от първите неща които трябва да предприемем при създаването на сайт. Wireframe-а помага да организираме и визуализираме структурата на сайта и да позиционираме елементите в нея.
Първо се правят основните елементи като header, footer, content и sidebar и след това се правят останалите елементи върху тях. Примерно къде в хийдъра ще бъде разположено логото, от коя страна, главното меню къде ще бъде, дали в хийдъра или сайдбара, ще има ли нужда от друго меню, ако да, къде ще бъде разположено то и как ще изглежда то, дали ще бъде хоризонтално или вертикално.
При правенето на wireframe е хубаво да не се използват цветове, тъй като те могат да бъдат доста разсейващи и да привлекат вниманието ни към елемент, който сме направили цветен. Разбира се, може да се използва и цвят, но тогава е добре повечето елементи или всички да бъдат цветни.
Има няколко начина за създаване на wireframe: на ръка с молив и хартия, със специално създадена за целта програма или с помощта на друга програма като Photoshop и Illustrator. Аз лично до скоро правех това нещо с лист и молив, на ръка, като използвах тези готови за целта шаблони които първо се принтират на лист хартия и след това се скицира върху тях. Ако все пак решите да ги пробвате, добре е да намалите opacity-то преди това, защото излизат много ярки и може само с маркер да се чертае върху тях.
От скоро, за създаването на wireframe използвам новия си таблет на Wacom, който приятелката ми ми подари и сега го правя на Illustrator + Wacom, тъй като се упражнявам с таблета, освен това може да се нарисува всичко на ръка, както на листа, с плюсовете, че може да се импортира външен файл много лесно в него и може предварително работната площ да се разграфи с Guides & Grids.
На тези от вас, които ще се спрат на варианта с използването на специално за целта приложение, препоръчвам да пробват Axure RP Pro, видео презентация на програмата може да гледате на официалния и сайт: http://www.axure.com/tour.aspx.
Добър пример за това как изглежда един wireframe, правен на ръка:
Доста дизайнери казват, че по-добре на лист хартия (с таблет), защото не ги ограничава при използването на въображението си..докато когато се ползва приложение човека е ограничен до определен брой инструменти от toolkit-a му. Не съм дизайнер и за това ми стана интересно да те питам… Ползвал ли си до сега приложение ?
Любо, това към което дадох линк по-горе съм пробвал, но някак си не ме влече да правя drag & drop. По друг начин се чувствам с молив в ръка, пък после ако се налага(за пред клиент примерно) мога да го направя и с приложение.
Примерно в момента правя нещо такова.