Проектирането на уеб сайтове не е лесно. Преди всичко, трябва да основем професионалният си опит на някои фундаментални навигационни механизми, които трябва да сме разгледали и изучили. Философията на “User Centered Design” е част от тази основа, предоставяйки на професионалиста възможността да погледне продукта си през очите на потребителя, за който в крайна сметка е създаден.
Следователно е очевидно, че проектирането в съответствие с тези параметри е хубаво нещо, но за постигането на един полезен и окончателен модел трябва да се мисли и действа на различни нива, като например: предназначение и ползване на сайта, за конкретните му нужди, видове потребители, модели и прототипи, които биха подпомогнали сравняването и подобряването на стандартите и прочее.
Нас ни интересува едно от тези неща, а именно, създаването на сравнително точен, отчасти графичен модел, който да ни позволява да определяме навигацията, инструментите и съдържанието на сайта.
Фазата преди създаването на wireframe
Някои прости правила могат да ни помогнат да разберем и определим крайната визия на нашият продукт, въпреки че често стъпките са стандартни и повечето професионалисти са в състояние да ги определят априори, както ще видим в последствие.
- Първата среща с клиента, разбира се, е това, което ще ни помогне да обособим и изчистим идеите, нахвърляни преди това.
- Бреймстормингът е отлично средство за определяне на целите и предназначението на нашите проекти.
- Анализът на конкурентни сайтове често помага да се идентифицират печеливши механизми и стратегии, които трябва да бъдат разгледани, за да се разбере какво носи повече продажби и/или потребители.
- Също така, хубаво е да се определят посредством симулиране на навигация или “сценарии” начините на взаимодействие с интерфейса на сайта и целите, които искате да постигнете.
Преди да започнем същинското създаване на wireframe, нека да проучим някои стандарти.
Определяне на компонентите на една страница
Това, което никога не бива да се пропуска в една уеб страница, независимо дали е началната страница на личен блог или на голям корпоративен сайт е:
- Header, в който да присъстват името и логото на компанията, или някакво тематично заглавие/слоган. Много е важно потребителя да може да разбере незабавно къде се намира. И като се има, предвид че в интернет липсва физическият контакт, на който обикновено се надяваме, за да направим подобаващо впечатление, трябва да се отбележи, че при сайтовете логото и тайтъла изпълняват тази задача. Обикновено при западноевропейските сайтове се намира в горния ляв ъгъл: областта върху която веднага попада погледа. При повечето ориенталски сайтове се наблюдава обратното, поради простия факт, че те пишат отдясно наляво.
- Субтайтъла, слоганите и таглайна са важни, за да разбере посетителя тематиката на сайта. Често се случва човек да влезе в нечий сайт, да види логото или дори съдържанието и въпреки това да му е абсолютно неясно за какво става дума. Подберете внимателно тайтъла/слогана, ако нямате фирмен такъв. Често в тази зона се поставя в основното меню за навигация: за него, разбира се, биха могли да се осъществят и по-творчески решения, но винаги в полза на непосредствеността и яснотата на навигацията. Освен това хедъра обикновено съдържа т. нар. “breadcrumbs”, които определят къде сме при по-задълбочена навигация.
- Съдържанието. Структурата, есенциална част от сайта, има различни характеристики, в зависимост от употребата.
- Футъра, или “края на страницата”, който съдържа обобщена информация относно заглавие, подзаглавие, авторски права или евентуални лицензи.
Типични характеристики на някои сайтове
Сайтовете се различават едни от други по някои типични елементи. Щом влезете в даден сайт, принципно веднага се ориентирате към каква категория спада той.
Основните видове сайтове, които можете да срещнете са: корпоративни уеб сайтове, онлайн магазини, електронни издания и блогове. Структурата им може да е съставена от една, две или три колони (в по-редки случаи и четири).
Един корпоративен уеб сайт, например, ще предлага като съдържание повече или по-малко творчески оформено изложение на предлаганите услуги и продукти, както и промоции, информация за фирмата, снимки и контакти.
Електронните онлайн списания като цяло имат по-богата и детайлна структура, за да изложат на началната си страница възможно най-много информация. Точно като вестниците, ще има основни новини, подчертани по някакъв начин и придружени от снимков материал, след това последните 5/6 новини в низходящ хронологичен ред, или подредени по вид. Ще има и рекламни карета на стратегически места. По подобен начин са изградени и блоговете, който в зависимост от сложността си, ще подреждат последните си публикации в една или две странични колони, заедно с други полезни функции като коментари, RSS канали и др.
Електроните магазини имат съвсем различна структура. Един от основните и недостатъци - намалена гъвкавост - се изразява в твърде стандартизираните елементи, като подредба на категориите, информация за продукта, кошниците и процедурите по пазаруване. Разбира се, това отново е, за да може потребителя да се ориентира лесно и безпроблемно (изключително важна задача, когато целта е същият този потребител да си закупи нещо от нас).
Естествено, това не означава, че подобни структури не могат да бъдат реализирани по един креативен и нестандартен начин, напротив - важното е да се направят съответните тестове, за да се прецени реално практичността им. Ако днес се използват някакви стандарти, то е именно защото са били проведени тестове за използваемост през годините, които са потвърдили ефективността им.
Създаване на уайърфрейм
След като установихме стандартите, да се заемем със създаването на wireframe. Първата стъпка е да се вземе молив и хартия (да, точно хартия) и да се направи скица с основните идеи от проекта ни. В тази фаза, ще забележите, че белият лист пред вас не поставя ограничения на въображението ви. Това е също и етапа, в който се управляват и двата аспекта на създаването на сайта: структурата и презентацията.
След това идва времето, в което трябва да премахнем излишните неща: всичко, което ви се струва в повече, тромаво или не на място трябва да отиде директно в кошчето. И не се страхувайте, че ще останат “дупки”.
Правилните пропорции разчупват дизайна и подаряват глътка свеж въздух при претрупаните лейаути, които рискуват да се превърнат в твърде разсейващи. Симетрията не е задължителна, но компенсациите са.
Настъпва момента, в който уайърфрейма приема дигитален образ - Photoshop, Illustrator, Gimp… който и да е инструмент по ваш избор, стига да започнете да пресъздавате нещата в пиксели, за да се доближите до реалния образ на вашият проект. Достатъчно е да се очертаят формите и да се оцветят в съответните цветове. Симулирайте текстове (чрез Lorem Ipsum, или действителното съдържание), отчетете ефектите, които се пресъздават с тях.
Действителната роля на уайърфрейма и неговото използване
Излишно е да се казва, че неопитният в подобен вид дейност клиент ще разбере твърде малко от уайърфрейма, който ще му предложите за одобрение. Неговото използване в действителност, ще бъде предимно в собствения ви екип, за да подпомогне разположението на компонентите във вашият сайт.
Сходни статии от блога на Уеб Дизайн България ®:
- FLV Видео файлове във уеб сайтове, конвертиране на видео файлове във FLV флаш видео формат чрез YouTube Някой собственици и уебмастъри не винаги използват YouTube, за да добавят видео файлове в техните уеб сайтове, а видео стриймването чрез флаш технологии е много разпространено и удобно днес. Добавянето...
- Какво прави дизайна на даден уеб сайт наистина ефективен Какво прави дизайна на даден уеб сайт наистина ефективен? Графики които хващат окото, внимателен подбор на палитрата, използването на Flash, за да раздвижим приложението си. Някои с право могат да...
- Графични тенденции WEB 2.0 Най-очевидният аспект на даден сайт в очите на потребителите е графиката или тъй нареченото “look and feel”, което както подсказва самото наименование, сочи първото и най-ярко впечатление при влизането...
