Using Wireframes til að hagræða þróunarferlinu þínu

Að búa til vírframleiðslu er ein af fyrstu skrefin sem þú ættir að taka áður en þú ert að hanna vefsíðu.

A wireframe hjálpar þér að skipuleggja og einfalda þætti og efni á vefsíðu og er nauðsynlegt tól í þróunarferlinu.

A wireframe er í grundvallaratriðum sjónrænt framsetning á innihaldsefni í vefsíðum .

The wireframe virkar sem frumgerð sem sýnir staðsetningu á síðu lögun, svo sem haus, fótur, efni, skenkur og siglingar.

Það tilgreinir einnig staðsetningu þætti innan þessara innihaldssvæða. Ef þú vilt búa til vefsíðu sem passar nákvæmlega kröfur viðskiptavinarins og lágmarka endurskoðun verkefnisins, mun vírframleiðsla halda þér á réttan kjöl.

Kostir vírframleiðslu

Að búa til vírframleiðslu gefur viðskiptavininum, verktaki og hönnuður tækifæri til að taka gagnrýninn útlit á uppbyggingu vefsíðunnar og gerir þeim kleift að gera endurskoðun auðveldlega snemma í því ferli.

Wireframing færir eftirfarandi lykilatriði:

Það gefur viðskiptavininum snemma, nánari sýn á síðuna hönnun (eða endurhönnun).
Það getur hvetja hönnuðurinn, sem leiðir til meira vökva skapandi ferli.
Það gefur verktaki skýran mynd af þeim þáttum sem þeir þurfa að kóða.
Það vekur athygli á aðgerð á hverri síðu.
Það er auðvelt að aðlaga og geta sýnt útlit margra hluta vefsvæðisins.

Verkfæri fyrir Wireframe Development

Þú hefur marga verkfæri til að velja úr þegar þú býrð til vírframleiðslu:

Hand skissa á pappír er alltaf góður upphafspunktur fyrir hönnuður. Það býður upp á fljótlegan og auðveldan leið til að einbeita sér að og skipuleggja. Ef þú ert mjög nákvæmur með sketching, getur þú jafnvel notað þetta sem endanleg vírframleiðsla. (Sjá mynd 1.)
Flowchart eða hugur-kortlagning hugbúnaður , svo sem Visio . Þessir hugbúnaðarvalkostir koma með fyrirfram pakkaðum þætti sem gerir þér kleift að búa til flæðirit af wireframe þínum.
Web prototyping hugbúnaður , svo sem Gliffy eða Balsamiq . Verkfæri eins og þessar voru sérstaklega búnar til í því skyni að búa til vírframleiðslu, og þeir hafa einfalt í notkun prototyping getu.
Grafísk hugbúnað , svo sem Photoshop eða Illustrator. Ávinningur þess að nota þessi verkfæri er að vírframleiðan geti síðan verið breytt beint inn í grafískan mockup á hönnun vefsvæðisins; Hins vegar er galli þess að þú verður að búa til alla þætti fyrir hendi.
(X) HTML wireframes eru nánast eins og raunveruleg vefsvæði sjálfir. Þú getur sett fram vírrammanninn með kóða áður en þú notar stíllina, eða þú getur búið til fullkomlega stíll, hárþekkingu sem lítur út eins og endanleg hönnun. (Sjá mynd 2.)

Að lokum ætti verktaki eða hönnuður að velja tólið sem þeir vilja. Persónulega nota ég Photoshop vegna þess að ég eins og hvernig það skipuleggur ferlið og hversu auðveldlega ég geti umbreytt skránni í mockup.

Wireframe Dæmi

Hversu smáatriði í vírramma fer eftir ýmsum þáttum, þar á meðal: hversu mikið átt og innihald viðskiptavinarins hefur veitt, hversu flókið innihald er, hversu langt meðfram ferlinu sem þú ert og hversu mikið smáatriði þú vilt að það innihaldi .

Hér eru dæmi um vírramma sem voru búnar til með mismunandi verkfærum og sýna mismunandi stig í smáatriðum og litum:

Mynd 1: Þessi einfalda víddarskissa fyrir vefsíðuna Coastal Partners er nú notuð til að búa til grafík og að lokum endanlegri hönnun. Með Mike Rohde .

Mynd 2: Mjög lágstætt HTML vírframe. Gagnlegt til að sýna fram á hvaða síða mun líta út áður en stílin er bætt við. Mjög gagnlegt fyrir sjónskerta notendur.

Mynd 3: Léttvísi vírframleiðsla fyrir Faðma gæludýr samfélagsins , eftir Jesse Bennett-Chamberlain frá 31Three .

Mynd 4: Forkeppni mockup á félagslegum fundur tól byggð á Tiddlywiki til notkunar á Le Web 3. Skýringarnar sem fylgja henni eru á tiddleleweb.tiddlyspot.com . Wireframe by Phil Hawksworth.

Mynd 5: Þessi er byggður á háþróaðri notkun bloggútgáfu (WordPress). Með Mattheiu Mingassson eða Activeside Internet Strategies og ráðgjöf .

Mynd 6: A vírframleiðsla fyrir Faðma gæludýr samfélagsins , eftir Jesse Bennett-Chamberlain frá 31Three .

Mynd 7: A vírram með lit og myndum. Höfundar síðu wireframe eftir Bokhandel .

Mynd 8: Annar vírframe með lit. Eftir Mattheiu Mingassson af Activeside Internet Strategies og ráðgjöf .

Best Practices

Til að ná sem bestum árangri eru hér nokkur mikilvæg atriði sem þarf að hafa í huga þegar vírframleiðsla er þróuð:

Einfaldleiki. Lykillinn er að viðhalda því nógu einfalt til að vera skýrt fyrir viðskiptavininn og vera sveigjanlegur fyrir hönnuður, en nógu nákvæmur til að leiðbeina forritara. Eins og nefnt er, getur þú búið til hágæða vírramma, en að gera þetta snemma í þróunarferlinu gæti verið ruglingslegt fyrir viðskiptavininn, sem getur misst það fyrir loka drög.
Vinna í grátóna. Þegar þú býrð til þætti fyrir vírramma er best að vinna í grátóna þannig að þú getir einbeitt þér að uppsetninguinni án þess að vera truflaðir af hönnuninni. Ef þú hefur fengið fullt lógómerki, umbreyttu það einnig í gráskala. Til að greina á milli og flokka ýmsar þættir, sýnið form og útlínur í mismunandi litum af gráum.
Notaðu wireframes í sambandi við sitemap. A wireframe er sjónræn framsetning góðs sitemap, ekki í staðinn. A sitemap er gagnlegt tól fyrir hvaða vefsíðu sem er og myndi örugglega vera gagnlegt til að vísa til í þróunarferlinu.
Leggðu áherslu á viðkomandi útkomu. Hafa skýra skilning á því hvernig viðskiptavinur þinn vill að notendur svari síðunni áður en þú setur upp vírframleiðslu þína. Símtöl til aðgerða ættu að vera mjög skýrar einfaldlega frá að horfa á wireframe.
Búðu til fullri stærð vírramma ef það er fyrir vefsíðuna. Þetta mun gefa nákvæmasta framsetningu raunverulegs síðu.
Skipuleggðu þætti með því að tryggja innihaldið fyrirfram. Í bestu tilviki hefur viðskiptavinur þinn þegar veitt þér upplýsingar um þá þætti sem á að birtast á hverri síðu, svo sem lógó, auglýsingar, Flash eða myndspilara, aðgerðir, siglingar og hliðarbakki, haus og fótur. Ef þú hefur ekki þessar upplýsingar ennþá skaltu hitta viðskiptavininn þinn og fáðu (eða stofnaðu) sitemap. Ef þú ert að endurskapa núverandi þætti geturðu safnað þeim úr vandlega endurskoðun vefsvæðisins. Í þessu tilfelli, vertu viss um að fyrst staðfesta með viðskiptavininum að þú verður ekki krafist að bæta við eða fjarlægja þætti, því að hafa ekki skýra skilning á væntingum þeirra mun hægja á ferlinu.

Gráskala vs lit.

Þegar þú vinnur í vírargrind hjálpar vinna í grátóna að einbeita þér að aðalhlutverki ferlisins , sem er að klára skipulagið, ekki hönnunina (sjá mynd 3). Annar hætta á að vinna í lit er að viðskiptavinurinn getur mistekið vírframleiðsluna fyrir endanlegan mockup.

Litur getur hins vegar reynst gagnlegt þegar það sýnir staðsetningu hvers símtala til aðgerða. Vegna þess að ein síða getur innihaldið nokkrar kallar til aðgerða er mikilvægt að forgangsraða þeim. Wireframes geta hjálpað til við að ákvarða hvaða kall til aðgerða til að draga augun notandans fyrst.

Ég vann nýlega við verkefni sem hafði mjög líflegt lógó, sem í því tilfelli var aðalráðstafan vegna þess að hún táknaði nýlega hleypt af stokkunum tímaritinu.

Þegar þú notar lit, getur þú auðveldlega sagt frá því hvort ákveðin atriði séu að yfirbuga aðalráðstafann. Þetta ferli fellur enn undir ríki vírframleiðslu, frekar en að mockup hönnun, vegna þess að frumefni staðsetningar eru enn ákveðnar.

Litur má smám saman bæta við vírframleiðsluna þegar verkefnið fer fram , sem er skilvirkari en að fara framhjá mockups áður en staðsetning þættanna er læst. Með því að gera þetta getur grafískur hugbúnaður hjálpað þér að skipta beint yfir í mockup þegar það er tilbúið.

Hvað á að forðast

Eins og aðrir þættir þróunarferlisins þíns, getur vírframleiðsla haft fallgalla ef það er ekki gert rétt. Hér eru nokkrar ábendingar um hvað á að forðast til að ná árangri árangri:

Of mikið að gerast á síðunni. Skildu nægilega hvítt pláss þannig að hönnunin sé ekki of upptekin eða ringulreið.
Áhersla á lit og hönnun. Wireframing er til að ákveða skipulag og staðsetningu þætti. Jafnvel þótt vírframleiðsla geti haft áhrif á hönnunina, myndi líklega aðeins afvegaleiða grafík og lit frá tilgangi þess.
Of mikið smáatriði. Þú getur alltaf bætt við smáatriðum seinna, en ef þú tekur of mikið í byrjun getur viðskiptavinurinn ruglað vírframleiðsluna fyrir endanlega mockupið.

Ef þú hefur áhuga á að læra meira um wireframes, Wireframe Magazine er frábær auðlind sem deilir sýni, fjallar um tækni og leysir vandamál sem tengjast upplýsingum arkitektúr.

Að búa til vírframleiðslu fyrir heimasíðu viðskiptavinarins þíns býður upp á skilvirkt samskiptatæki fyrir alla aðila sem taka þátt.

Jafnvel að byggja upp einfalda vírramma mun spara tíma til lengri tíma litið og auðvelda þróunarferlið fyrir hönnuður, verktaki og viðskiptavini.

Skrifað eingöngu fyrir WDD eftir Eric Shafer.

Notir þú vírframleiðslu fyrir hönnunina þína? Hver eru nokkrar af bestu leiðunum til að búa til árangursríka vírrama?

hönnun vefhönnun wireframes