Пътеводител за изграждането на прототипи на уеб сайтове

Искате да имате нов уебсайт? Логично е да се доверите на креативен екип от уеб дизайнери и програмисти, за да бъдете сигурни, че генерираните идеи ще се реализират. В основата на тяхната реализация стоят планирането и структурирането.

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

Искате да научите повече за прототипите? Този кратък пътеводител ще Ви помогне.

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

Планиране на съдържанието
Изграждането на прототипи включва 90% от планирането на съдържанието. На първата стъпка се определят характеристиките на потребителите. Кои са крайните потребители? Какъв техен проблем ще реши уеб сайта? Защо те ще посещават Вашия уеб сайт? След като са ясни потребителските характеристики, може да се измисли съдържанието и другите елементи на уеб страниците.

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

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

Първоначално, уеб разработчиците си водят бележки за функционалностите на бъдещия сайт и неговото предназначение. След това правят пълен списък с тях, който подлежи на обсъждане от целия екип. На този етап е важно да се създадат ясни очаквания. В допълнение към основните елементи като хедър (заглавна лента), футер (лента в края на страницата), странични ленти и пространства за съдържанието, трябва да се обърне внимание и на следните въпроси:
- Добре ли е да има динамични интерактивни компоненти?
- Ще се включват ли видео линкове?
- Как ще се представят тези линкове?
- Ще има ли листа с най-новото публикувано съдържание?

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

Избор на вид прототип
Различните уеб разработчици създават прототипи по различен начин. Най-често се започва от такива с по-ниска прецизност и се преминава към по-висока, в зависимост от това каква детайлност се цели да се постигне при всяко взаимодействие.

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

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

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

Колаборация между всички участници в проекта
Прототипът може да се финализира само след солидно количество оценки и препоръки. Когато идеите са споделени, тяхното величие се умножава. Екипността е основен фактор за реализацията на всеки уеб проект.

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

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

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

Регулярно получаване на обратна връзка от клиента още от началния етап
Първоначалните груби скици се използват за предаването на основната идея на клиента и за получавана на обратна връзка още на ранен етап. Опитните разработчици задават правилните въпроси, в зависимост от това какво искат да получат - отговори, одобрение или оторизация. Колкото по-често се получава обратна връзка от клиента, толкова по-добре. Прецизността на прототипите не е от съществено значение.

Някои от най-често задаваните въпроси от разработчиците по време на срещите с клиента включват:
- Какви други елементи бихте искали да се добавят към прототипа?
- Бихте ли променили потока на съдържанието?
- Как намирате фокуса върху различните елементи?

За получаването на допълнителни подробностите, специалистите обикновено приканват клиента да сподели повече за своите работни процеси.

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

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

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

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

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

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

В заключение…
За да се направят елементите визуално по-въздействащи се използва пълния спектър от градации на сивото. Това спомага особено много за изграждането на визуалния дизайн. С добавянето на повече детайли се изготвя прототип с висока прецизност. Това означава да се добави колкото е възможно повече информация, без визията да се изменя значително. Може да се прибави оригиналното съдържание и да се определи идеалният размер на шрифта. На този етап е възможно да се сложат и цветове. По този начин, при започване на програмирането, перфектният прототип ще е налице.

Споделете в: