Преди и след Wireframe схемите

Изработката на един уеб сайт не е лесна работа. Преди всичко вие трябва да имате известен опит и да сте си изградили определена линия на начинът ви на работа. Моделът User Centered Design е, именно, такава линия и е изграден около гледната точка на крайният потребител, тоест този, за който ще бъде направен сайта.

Следователно е очевидно, че проектирането в съответствие с тези параметри е нещо необходимо, но за да се оформи един настина полезен модел, трябва да разсъждаваме на различни нива: предназначението на сайта, специфичните нужди на сайта, целевата група потребители, създаването на модели и прототипи, които могат да ви помогнат да сравните и подобрите вашите стандарти и т.н.

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

Фазата, която предшества създаването на Wireframe

Съществуват няколко прости стъпки, които могат да ни помогнат да разберем и определим крайната визия на нашият сайт, въпреки че някои по-стандартни функции ще могат да бъдат определени предварително, както ще видим по-късно.

Първата среща с клиента ще ви послужи да изясните отправните точки във вашият проект, за което обикновено се използва така нареченият “брейнсторминг” модел. По този начин ще очертаете целите на проекта.

Анализът на конкурентни сайтове също ще помогне да бъдат определени някои механизми и печеливши стратегии, даващи идеи за кое носи повече потребители и / или продажби.

Хубаво е да се направят сценарии или симулации на навигация, за да се определят начините на взаимодействие между потребителя и интерфейса на бъдещият сайт.

Но преди да преминем към етапа на създаване на действителните Wireframe, нека да погледнем някои стандарти в сферата.

Определяне на компонентите на една страница

Това, което не може да липсва по никакъв начин в една уеб страница, независимо дали става дума за блог, онлайн шоурум или корпоративен уеб сайт е:

Хедър, където са разположени логото и наименованието/слогана на съответната компания. От голяма важност е потребителя да разбере веднага в чий сайт се намира, и тъй като в мрежата не съществува физическият контакт между две лица, тук тази функция я извършва логото. Обикновено по западните стандарти логото е разположено в горния ляв ъгъл, зона към която окото веднага се ориентира. Естествено, при ориенталските сайтове тази зона ще бъде в десния горен ъгъл, поради факта, че те започват да пишат (и съответно да четат) от дясно наляво.

Подзаглавие, слоган или мото, които играят съществена роля в идентифицирането на сайта. Чрез тях крайният потребител разбира за какво става дума в страницата. Потребителите се отегчават и дразнят от липсата на яснота в тези случаи, затова е хубаво да подберете внимателно вашето подзаглавие или слоган.

Понякога в тази област се включва и основното меню, макар че в последните години стандартният вариант е лява или дясна колона, избор на който се спират много дизайнери заради простотата в навигацията.

Често хедъра ще съдържа и така наречените “breadcrumbs”, които ще ни посочват къде сме при по-задълбочена навигация.

Съдържание. Основната част от сайта, която според употребата му ще има различни специфики.

Футър, който ще съдържа обобщена информация за заглавието, подзаглавието, авторските права или съответните лицензи, както и данни за контакт с фирмата в някои случаи.

Типични характеристики на някои сайтове

Някои сайтове се различават от други чрез определени типични елементи. От самото начало, дори и в сайт без никакво съдържание, човек усеща в какъв тип сайт навигира.

Основните видове които бихте срещнали са: фирмени уеб страници, онлайн магазини, шоуруми, информационни сайтове, блогове и лични страници.

Един фирмен уеб сайт, например, ще съдържа някакво описание на предлаганите продукти или услуги, съответно снимки и данни за контакт. Често там се включва и информация за самото дружество, история, екип и прочее.

Едно електронно списание ще има много по-богата и креативна структура, за да може да изложи на началната си страница възможно най-много информация. Точно като вестниците, ще има една до няколко основни новини, задължително със снимки, последните 5-6 новини, подредени в хронологичен ред или разделени по категории, хороскопи, метеорологична информация и рекламни карета, разположени на стратегически места. По подобен начин понякога са структурирани и личните страници или монетизираните блогове, които в съответствие със сложността си ще се разположат на една две или три колони, предлагайки освен това опции като коментари, RSS фийдове, анкети и др.

Електронния магазин ще има съвсем различна структура, по-ограничена и стандартизирана, където ще се наблегне на излагането на съответните артикули по категории. Там основните елементи са каталозите, индикациите за пазаруване и начините на покупка, както и всякаква полезна за консуматора информация, която ще го улесни в неговият избор и покупка.

Разбира се, това не означава, че не трябва да се подхожда креативно и с иновативна мисъл към подобни структури, стига резултата да бъде също толкова ефективен като функционалност и ефикасност. Нещата които изложихме досега като решения са тествани многократно и отдавна са доказали своята ефективност.

Управление на пространството при създаването на Wireframe

След като разгледахме гореописаните стандарти, да започнем със създаването на Wireframe. Първата стъпка е да вземете молив и хартия (да, хартия) и да започнете да нахвърляте идеите си за този сайт, рисувайки негова скица.

На този етап ще забележите, че белият лист пред вас не поставя ограничения върху разположението на модулите на вашата страница и въображението ви ще може да се развихри. Точно на този етап ще започнете да управлявате и двата аспекта на разработката ви – структура и представяне. Задръжте брейнсторминга, докато не определите отправните си точки и тогава дайте поле за изява на вашата креативност, докато не достигнете желаният резултат.

Сега е време за отстраняване на всичко излишно, повтарящо се, преувеличено. Не се скъпете на премахване и не се страхувайте от “дупки” в разработката си. Точните пропорции са глътка свеж въздух във всеки дизайн, който в противен случай може да се окаже претрупан и тежък за окото, а в по-лошия вариант – да не позволи на потребителя да се концентрира върху нещо и той отегчен просто да излезне от сайта.

Време е да преобразите вашата скица в дигитален Wireframe (Photoshop, Illustrator, Gimp…). Използвайте това приложение, с което ви е най-удобно да работите, стига да започнете да разсъждавате в пиксели. достатъчно е да очертаете границите и да оцветите съответните пространства, запълвайки ги със симулация на текст и в последствие да обозначите евентуалните промени в модулите и функциите.

Това е имитация на нашият проект в реален мащаб. Сега можем да се концентрираме върху детайлите и да определим крайната визия на нашият сайт.

Реалната полза от Wireframe и неговата употреба

Излишно е да се казва, че неопитният в уеб дизайна клиент няма да разбере много от вашият Wireframe. Употребата му в действителност е предназначена за вас и вашият екип и цели да ви улесни в проектирането на зададеният ви проект.

На клиента е добре да се представи графика, изобразяваща крайният вариант на проекта, изготвен въз основа на този Wireframe. Графичната презентация е по-достъпният за клиента вариант и без съмнение най-препоръчителният.