3 най-добри начина за изграждане на прототип на уебсайт

Макет на уебсайт от Ian Pilon

Макет на уебсайт от Ian Pilon

Попитайте „Какъв е най-добрият начин за изграждане на прототип на уебсайт?“ е като да попитате „Какъв е най-добрият начин да направите уебсайт?“ Няма един единствен „най-добър“ начин. Всеки отделен прототип, както всеки отделен уебсайт, има свои собствени стилове, цели и стратегии.

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



01. Прототипиране с презентационен софтуер

Основна промо снимка

Keynote става все по-популярен за изграждане на прототипи

Като за начало има традиционният PowerPoint, надежден основен бизнес, който се използва за презентации повече от две десетилетия. Ако търсите по-модерна алтернатива, Keynote нараства популярността.

Нека да разгледаме плюсовете и минусите, за да можете да вземете образовано решение.

Плюсове на прототипиране с презентационни програми

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

Минуси от прототипиране с презентационни програми

  • Ограничен обхват: Както е описано в безплатната електронна книга на UXPin Крайното ръководство за прототипиране , след като започнете да играете с усъвършенствани потребителски потоци и взаимодействия, основно сте достигнали границата на софтуера за презентации
  • Ограничено сътрудничество: Повечето презентационни програми не предлагат никакво сътрудничество (с изключение на Google Presentation). Компромисът е, че софтуерът за съвместно представяне липсва интерактивност, манипулация на графики, форми, текст и цветове, които ги правят полезни за прототипиране. Ако искате да си сътрудничите без компромис, придържайте се към инструмент за прототипиране
  • График с ограничен поток: Въпреки че е възможно да се комуникират напреднали потребителски потоци, това не е лесно да се направи и картите на сайта не са свързани с прототипите, както са в специалния софтуер за прототипиране
  • Ограничена интерактивност: Находчивите потребители могат да стигнат доста далеч, ако използват всички функции в Keynote или Powerpoint, но ако ще предприемете всички тези усилия, може да е по-лесно и по-ефективно да преминете към нещо специализирано

Ако искате да научите повече, Keynotopia има някои основни уроци по прототипиране за Powerpoint и Основен доклад .

02. Кодирано (HTML) прототипиране

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

Днес има повече причини от всякога да започнете да кодирате рано. Манталитетът „Аз го проектирам, ти го изграждаш“, възприет от дизайнерите в миналото, е остарял, тъй като технологичният напредък в големи крачки и сътрудничеството става задължително.

Има няколко различни предимства на прототипирането в кода, най-вече поради факта, че стартирате дизайна в нещо, което прилича на крайната форма.

Плюсове на кодираното прототипиране

  • Платформа-агностична: Прототипите на HTML работят на всяка операционна система и никой не се нуждае от външен софтуер, за да го използва
  • Модулни: HTML е базиран на компоненти, което може да помогне с производителността
  • Ниска цена: Има много безплатни HTML текстови редактори, но ще трябва да отделите малко време за изучаване на езика, преди да е полезен (или да използвате този HTML мамят лист )
  • Техническа основа: При условие, че създавате готов за производство код (а не само за изхвърляне заради бърз прототип), можете в крайна сметка да спестите време в разработката

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

Освен това, гмуркането направо в кода може да попречи на креативността - запитайте се колко взаимодействия и потоци на страници можете да създадете с 30 минути в инструмент за прототипиране спрямо код като HTML или JavaScript.

03. Използване на прототип за софтуер и приложения

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

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

UXPin скрийнграб

Инструмент като UXPin може да помогне на некодерите да създадат работещи прототипи

Тези инструменти се различават по своите възможности, като някои са по-приспособени към определени ситуации, отколкото други, така че е най-добре да намерите най-подходящия за вашите нужди. За да започнете да търсите, можете да разгледате инструменти като UXPin , InVision и Omnigraffle . Разгледайте нашия списък с Топ 10 инструменти за прототипиране за още.

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

Плюсове от използването на специален инструмент за прототипиране

  • Скорост: Мощните потребители могат да работят със специализирани инструменти дори по-бързо от прототипирането на хартия, защото могат да създават, копират и създават разширени взаимодействия само с няколко щраквания на мишката
  • Библиотеки на елементи: Докато инструменти като InVision са чудесни за бързо кликващи се прототипи, които свързват множество екрани с прости взаимодействия (като щракване и задържане), други инструменти като UXPin се предлагат с вградени библиотеки на елементи (и ви позволяват да създадете свои собствени за многократна употреба)
  • Разширени потребителски потоци: Потокът и функционалността са най-важните аспекти на прототипирането и повечето инструменти идват с вградени тези функции. Повечето също ви позволяват да генерирате карти на сайта, докато създавате нови екрани, и ви позволяват да ги преглеждате един до друг за лесна навигация
  • Вградено сътрудничество: Много специализирани инструменти поставят сътрудничеството отпред и в центъра, включително възможността да коментирате дизайни, да ги редактирате като екип и да ги споделяте чрез URL. Най-доброто предложение за история на ревизиите и съхранение в облак, за да опростите работния поток, като го направите агностичен за устройства
  • Рационализирана презентация: Това може да означава експортиране в PDF или експортиране в уеб или мобилно приложение за истинско изживяване на прототип

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

Избор на метод за прототипиране

За да намушкаме въпроса „Кой е най-добрият начин за прототипиране?“, Ще отговорим: „Който и начин да работи най-добре за вас“. Това обаче не е евфемизъм за „Който е най-лесен“ или „Който изисква най-малко работа“. Най-добрият начин за прототипиране е начинът, който за вас ще даде най-добри резултати.

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

За повече практически съвети относно прототипиране с ниска или висока точност изтеглете безплатния Ръководство за прототипиране . Научете как и кога да използвате различни инструменти и тактики за прототипиране, с най-добрите практики от Zurb, Google Ventures, IDEO и много други.

Свързани статии: