Gunearen esparrua. Sortzeko tresnak

Gunearen wireframe (edo gunearen egitura) webguneko orrien egitura eta hierarkia definitzen duen organigrama da. Wireframe-k webgunearen garapenerako oinarri gisa balio du, edukia antolatzen eta erabiltzaileei nabigazio logikoa eskaintzen laguntzen die. Webgune bat sortzea lehen baino askoz errazagoa da. Hala ere, proiektu esanguratsua da oraindik. Eta beste edozein proiektu bezala, plan sendo bat behar duzu.

Zure webgunearen diseinua plan honen zatirik garrantzitsuena da. Koloreak, grafikoak eta bestelako edukiak diseinua baino askoz errazago alda daitezke. Pentsa diseinua zure webgunearen hezurdura gisa. Orrialde bakoitzaren egitura zehazten du, gerora findu egingo dena.

Wireframe bat webgune baten diseinuaren eskema laburra da. Elementu desberdinak non kokatuko diren erakusten du. Horrek egiten du ideala webgunea sortzeko abiapuntua. Web diseinuko agentzia eskudunak beti alanbre batekin hasten dira. Zure webgunea garatzen duzunean, bakarrik edo taldean, marko baliotsu bat ere aurkituko duzu.

Webgune baten alanbrea beti marraz daiteke arkatz eta paperarekin. Hala ere, hau ez da beharrezkoa wireframing tresna asko eskuragarri badaude.

Ikus ditzagun webguneak markatzeko tresna ezagunenetako batzuk.

 

Zergatik erabili wireframe tresna?

Web diseinua bezalako eremu moderno batean ere, diseinatzaile batzuek oraindik nahiago dute metodo zaharrak erabiltzea. Jakina, ez dago gaizki webgune bat paperean marrazteak. Iraganean milaka web diseinatzailerentzat bikain funtzionatu duen metodo frogatua da. Hala ere, enkoadraketa tresna bat erabiltzeak denbora eta esfortzu asko aurreztu dezake. Webgunearen esparrua

• Wireframing tresna bat erabiltzeak abiapuntu hobea ematen dizu. 

Arkatza eta paperarekin, literalki arbel huts batekin hasten zara. Marko-tresnek erraz egiten dute hastea. Gehienek diseinu-jarraibideak dituzte, sare sinplea bada ere. Batzuek orrialdean jar ditzakezun elementu lehenetsiak ere eskaintzen dituzte, ezer marraztu beharrik ez izateko.

• Edizioa eta zuzenketak askoz errazagoak bihurtu dira. 

Paperean lan egiten baduzu, alanbre osoa berriro marraztu beharko duzu aldaketa handi bat egiten duzun bakoitzean. Wireframing tresna askok elementuak arrastatu eta jaregiteko aukera ematen dute. Honek lan orduak aurreztu ditzake, jatorrizkoa hobetzen ari zaren ala ez diseinatu edo egin aldaketak bezeroaren eskaeraren arabera.

• Emaitzak profesionalagoak dirudite. 

Diseinatzaile onenak ere marrazteko trebetasun apur bat falta izan dezake. Wireframing tresna batekin, ez duzu inoiz kezkatu behar lerro zuzen bat marrazteaz edo elementu bat primeran zentratuta dagoela ziurtatzeaz. Jakina, alanbre bat alanbre bat besterik ez denez, bere itxura ez da amaitutako webgunearen itxura bezain garrantzitsua. Baina zuk bada bezeroekin lan egin, marko oso garbi batek harritu ditzake. Horrek gaizki-ulertuak saihestu ditzake, esate baterako, bezero batek elementu bat ez dela zentratuko suposatzen duenean alanbrean apur bat zentratuta marraztu delako.

• Erosoagoa da zure taldearentzat. 

Esparru-tresnek askoz errazten dute besteekin elkarlanean aritzea. Tresna askok hainbat erabiltzaileri sarbidea eman diezaiekezu, denek fitxategi berdinetan lan egin dezaten. Lankidetza eginbideekin, zure taldeak fitxategi baten uneko bertsioa partekatzeko beharra ezaba dezake. Zure talde osoak elkarrekin lan egin dezake, bulego berean egon ala ez. Webgunearen esparrua

• Hau erosoagoa da web diseinuko bezeroentzat. 

Wireframing tresna erabiltzea zure taldearentzat azkarragoa eta errazagoa denez, eskaintzen duzun zerbitzuaren kalitatea ere hobetuko du besteentzako webguneak garatzen ari bazara. Zure bezeroek alanbre-laginak azkarrago jaso ahal izango dituzte eta askoz errazagoa izango zaizu aldaketak egitea. Hobetzen da bezeroarentzako zerbitzuaren kalitatea. Eta noski, pozik dauden bezeroek iritzi on bat uzteko edo besteei gomendatzeko aukera gehiago dute bezeroak zure negoziorako.

Beraz, paperean alanbre garbiak azkar marrazten aditua bazara ere, merezi du alanbre tresna nola erabiltzen ikasteko denbora hartzea. Zorionez, horietako asko doakoak dira, eta ordainpeko tresna askok doako probak dituzte zuretzat eta zure taldearentzako egokia aukeratzen laguntzeko. Ea zer dagoen!

 

Wireframe.cc Gunearen markoa

Mota: web aplikazioa

kostua: Doako bertsioa eskuragarri; hilean 16 eta 99 dolar arteko prima

wireframe.cc arkatza eta papera nahiago dutenentzat wireframing tresna minimalista da. Zure web arakatzailean exekutatzen da, beraz, ez da deskargatu behar. Aplikazioa sareta sinple batekin hasten da eta bertan hainbat alanbre-elementu marraztu ditzakezu hainbat tresna erabiliz. Oso erraza da erabiltzeko eta doako bertsioa du. Doako bertsioa funtzioetan mugatuegia dela erabakitzen baduzu, premium plan batera igo dezakezu funtzio gehiago desblokeatzeko.

 

Jumpchart Site Wireframe

Mota: web aplikazioa

kostua: Doako bertsioa eskuragarri; prima $ 5 - $ 50 hilean.

Jauzi-diagrama ez dago ikusizko webgunearen diseinurako. Horren ordez, zure orriak elkarren artean nola erlazionatzen diren planifikatzen laguntzeko diseinatuta dago. Hau UXrako (erabiltzaileen esperientzia) orrialde diseinuak bezain garrantzitsua da, horregatik Jumpchart beste balio handikoa da. doako tresna, zure webgunea planifikatzeko armategian gehi daitekeena. Espero zenuten bezala, doako planak bere mugak ditu (proiektu bat gehienez 10 orrialde eta 2 erabiltzaile), baina webgune sinple bat planifikatzeko abiapuntu bikaina da. Ordainpeko planek aukera gehiago ematen dizkizute eta orrialde eta taldekide gehiagorekin lan egiteko aukera ematen dizute, baita hainbat proiektu aldi berean.

Aurrekontu bat duen web diseinatzailea bazara, Wireframe.cc eta Jumpchart batera erabiltzeak webgune bat planifikatzeko behar duzun guztia emango dizu. Hau da lehenengoak jasotzen duen diseinu bisuala eta bigarrenak jasotzen duen gune maparen plangintza. Bi aplikazioak elkarren osagarri dira oso ondo eta doan eskuragarri daude deskargatu gabe.

 

Gliffy/Gunearen alanbrea

Mota: web aplikazioa

kostua: Doako bertsioa eskuragarri; bertsio osoa $ 7,99/hilean

Gliffy ez bakarrik wireframesentzat. Hau web-oinarritutako diagramak egiteko aplikazio bat da, baina wireframes eta beste diseinu mota batzuk barne hartzen ditu. Wireframe.cc edo Jumpchart baino apur bat gutxiago intuitiboa da, baina oraindik erraza da erabiltzeko (arrastatu eta jaregin) eta goiko bi aplikazioen helburuetarako balio dezake. Gliffy-rekin, web-orrietarako alanbre-markoak sor ditzakezu, baita fluxu-diagramak ere zure gune-mapa irudikatzeko. Web-orri baten edo beste diseinu baten zati desberdinak irudikatzeko hainbat elementu barneratuta ditu, eta zure irudiak ere igo ditzakezu. Diagramak sortzea dakarten beste diseinu edo plangintza lanetarako ere erabilgarria izan daiteke. Webgunearen esparrua

 

MockFlow

Mota: web aplikazioa

kostua: Doako bertsioa eskuragarri; prima $ 19-45 hilean.

MockFlow halaber, wireframes sortzeko eta gune mapak planifikatzeko funtzioak konbinatzen ditu. Gliffy baino espezializatuagoa da, beraz, webguneetan eta taldeen lankidetzan zentratuago dago diagrametan baino. Bere wireframing tresnak bikainak dira, prest hasteko diseinu eta osagaien liburutegiarekin. Erraz sor dezakezu alanbre bat minututan eta, ondoren, nahi duzun moduan edita dezakezu. Premium planek eginbide gehigarriak desblokeatzen dituzte, hala nola taldeen lankidetzarako funtzio baliotsuak eta beste. Urtero ordaintzen baduzu, % 20ko deskontua lortuko duzu, eta beste ezaugarri batzuk, hala nola, lineaz kanpoko modua eta tresna osagarriak. Webgunearen esparrua

 

Canva

Mota: web aplikazioa

kostua: Doako bertsioa eskuragarri; bertsio osoa $ 9,99/hilean (urtero fakturatzen da)

Canva kalitate profesionaleko grafikoak sortzeko lineako tresna ezaguna da, nahiz eta diseinatzailea ez izan. Txantiloi, ilustrazio, argazki eta abarrez beteta dago. Wireframing tresna dedikatu bat ez denez, orain arte aztertu ditugun beste irtenbide batzuen ezaugarri batzuk falta ditu. Hala ere, oraindik ere erabil dezakezu alanbreak sortzeko oso erraz arrastatu eta jaregin erabiliz.

 

Adobe XD/Site Framework

Mota: Softwarea; Mac eta Windows-erako eskuragarri

kostua: Doako bertsioa eskuragarri; bertsio osoa $ 9,99 hilean hasten da.

Adobe XD Photoshop, Illustrator, InDesign eta beste software profesional ospetsu batzuen garatzaileek sortutako UX diseinurako tresna aurreratua da. Adobe softwarea ezagutzen baduzu, haien aplikazio bakoitzak duen espezializazio eta potentzia handia dela jakitun zara. Ikaskuntza-kurba igotzeko prest zauden bitartean, haien tresnek kontrol asko ematen dizute, pentsatzen duzun ia edozein gauza ekoizteko aukera emango dizuna. Adobe XD ez da desberdina, web diseinuko tresna multzo aberats eta sendoa eskaintzen du. Webguneen wireframes haratago doa eta maketa osoak eta baita prototipoak ere proiektu fitxategi bakarrean sortzeko aukera ematen du. Zorionez, beste Adobe software batzuk baino errazagoa da erabiltzen ikasteko, beraz, merezi du probatzea irtenbide aurreratuago baten bila bazabiltza. Webgunearen esparrua

 

figma

Mota: Web aplikazio gisa eta Mac, Windows eta Linuxerako software gisa eskuragarri.

kostua: Doako bertsioa eskuragarri; prima $ 12-45 hilean.

figma taldekideen arteko denbora errealeko lankidetzan oso bideratua. Hala ere, bere tresnak berdin baliagarriak dira baita bakarkako diseinatzaileentzat ere. Figmak alanbre bat sortzeko behar duzun guztia eskaintzen du, oinarrizko diseinu baten bila bazabiltza edo aurreratuago joan nahi baduzu. Edizio tresnek zehaztasun handia eskaintzen dute, diseinua behar duzun moduan moldatu ahal izateko. Figma ere oso bateragarria da sistema eragile anitzekin, beraz, Linux garapen talde baterako irtenbide aproposa izan daiteke.

 

Nola aukeratu marko-tresna bat

Zure tresnak aukeratzea zure beharren araberakoa izan behar da beti. Webgune-esparru bat ez da alde horretatik beste edozein proiekturen aldean. Garrantzitsua da aldez aurretik tresna egokiak aukeratzea. Jakina, aurrekontu txikiago batekin has zaitezke eta gero eguneratu ahal izanez gero. Baina zure beharretarako batere egokiak ez diren tresnak erabiltzea saihestu nahi duzu. Webgunearen esparrua

Beraz, nola aukeratzen duzu web diseinurako wireframing tresna onena? Egin zaitez galdera hauek:

• Zein da nire aurrekontua? Kalkulatu zenbat gastatu dezakezun softwarean edo premium aplikazioetarako sarbidea. Gogoratu hau hilero edo urteko kuota izan ohi dela.
• Zenbat taldekidek behar dute tresnetarako sarbidea? Horrek premiumra berritzea edo doako kontu bat erabiltzearen arteko aldea esan dezake.
• Zein sistema eragiletan exekutatu behar da tresnak? Ziur ez bazaude, seguruena web-aplikazioekin mantentzea da.
• Zein ezaugarri behar ditut? Konparatu erabilgarri dauden funtzioak zure proiektuaren tamainarekin. Wireframe soil bat bakarrik sortu behar baduzu, tresna mugatuago batek egingo du. Baina wireframes eta prototipoak guztiz arakatu behar badituzu edo zure gune-maparen egitura ere planifikatu behar baduzu, hobeto egongo zara tresna aurreratuago batekin (edo bien konbinazio batekin).
• Zein da nire erosotasun maila tresna zehatz batekin? Aukerak zure beharretara murrizten dituzunean, probatu baldintza horiek betetzen dituzten tresnak. Aprobetxatu doako probak! Antzeko gaitasunak dituzten tresnek ere erabiltzailearen esperientzia oso desberdinak izan ditzakete. Aukeratu zurekin lan egiteko erraza (edo dibertigarria) den bat.

 

Puntuak/Gunearen Markoa

Web diseinua eremu aberasgarria da, errazteko tresna asko dituena. Wireframing tresna batek zure lan-fluxua sinplifikatu dezake eta zure diseinu-prozesuaren zati nagusi bihur daiteke. Laburtu dezagun landu duguna:

• Wireframe tresna batek web diseinua askoz errazagoa eta azkarragoa egingo du diseinatzaile batentzat, bakarrik edo agentzia batekin lan egiten duen.
• Aukera bikain asko daude eskuragarri, web aplikazio bat erabili edo ordenagailuan softwarea instalatu nahi baduzu.
• Esparru-tresna desberdinak hobeak izan daitezke talde handiagoetarako eta/edo proiektu handiagoetarako. Beste batzuk mugatuagoak dira.
• Wireframing tresna askok doako bertsioa eskaintzen dute, eta ordaintzeak muga horietako asko ken ditzake.
• Wireframing tresna egokia aurkitzeko, oinarrizko galdera batzuk egin behar dizkiozu zeure buruari.
• Bilatu beti softwarea ezagutzeko erabil dezakezun doako proba bat.

Esperientziadun diseinatzailea izan edo hasi berria zaren ala ez, badago zerbait zuretzat perfektua maketazio tresna. Aurkitutakoan, ez zara berriro arkatz eta paperera itzuliko!

 АЗБУКА