Wireframe-sovellusten käyttäminen kehitysprosessin tehostamiseen
Wire-kehyksen luominen on yksi ensimmäisistä vaiheista, joita sinun pitäisi tehdä ennen verkkosivujen suunnittelua.
Ohjausrunko auttaa organisoimaan ja yksinkertaistamaan verkkosivustojen elementtejä ja sisältöä ja on kehitysprosessin olennainen työkalu.
Johdinkuvake on pohjimmiltaan visuaalinen esitys sisällön ulkoasusta sivuston suunnittelussa .
Ohjausrunko toimii prototyyppinä, joka näyttää sivun ominaisuuksien, kuten otsikon, alatunnisteen, sisällön, sivupalkkien ja navigoinnin, sijoittamisen.
Se myös määrittää elementtien sijoituksen näihin sisältöalueisiin. Jos haluat kehittää sivuston, joka vastaa täsmällisesti asiakkaan vaatimuksia ja minimoi projektin tarkistukset, langankorjaus pitää sinut oikealla tiellä.
Wireframingin edut
Wire-kehyksen luominen antaa asiakkaalle, kehittäjälle ja suunnittelijalle mahdollisuuden tarkastella sivuston rakennetta kriittisesti ja antaa heille mahdollisuuden tehdä korjauksia helposti prosessin varhaisessa vaiheessa.
Wireframing tarjoaa seuraavat keskeiset edut:
- Se antaa asiakkaalle varhaisen, lähikuvan näkymän sivuston suunnittelusta (tai uudelleensuunnittelusta).
- Se voi innostaa suunnittelijaa, mikä lisää nestemäistä luovaa prosessia.
- Se antaa kehittäjälle selkeän kuvan elementeistä, joita he tarvitsevat koodaamaan.
- Se tekee jokaiselle sivulle selkeän kehotuksen toimia.
- Se on helppo mukauttaa ja se voi näyttää sivuston monien osien asettelun.
Työkalut Wireframe-kehitykselle
Sinulla on monia työkaluja, joista voit valita, kun luodaan rautalanka:
- Käsihahmominen paperilla on aina hyvä aloituskohde jokaiselle suunnittelijalle. Se tarjoaa nopean ja helpon tavan keskittää ja järjestää. Jos olet hyvin tarkka luonnostelussa, voit jopa käyttää sitä viimeisenä rautalanganne. (Katso kuva 1.)
- Vuokaavio tai mielentarkistusohjelmisto , kuten visio . Näissä ohjelmavaihtoehdoissa on valmiiksi pakattuja elementtejä, joiden avulla voit helposti luoda viirakaaviosi vuokaavion esityksiä.
- Web-prototyyppausohjelmistot , kuten Gliffy tai Balsamiq- . Tällaiset työkalut on luotu erityisesti rautalankojen tuottamiseksi, ja niillä on helppokäyttöiset prototyyppitoiminnot.
- Graafinen ohjelmisto , kuten Photoshop tai Illustrator. Näiden työkalujen hyödyntäminen on, että rautalankaverkko voidaan muuntaa suoraan verkkosivuston suunnittelun graafiseksi malliksi; kuitenkin haittapuoli on se, että sinun täytyy luoda kaikki elementit käsin.
- (X) HTML- lanka-alueet ovat melkein kuin varsinaiset sivustot itse. Voit määrittää viirakehyksen koodilla ennen tyylien soveltamista tai voit luoda täysin tyylikkään, korkealaatuisen ulkoasun, joka näyttää paljon lopullisesta suunnittelusta. (Katso kuva 2.)
Lopulta kehittäjä tai suunnittelija valitsee haluamansa työkalun. Henkilökohtaisesti käytän Photoshopia, koska pidän siitä, miten se järjestää prosessin ja kuinka helposti voin muuntaa tiedoston malliksi.
Wireframe-esimerkki
Wire-kehyksen yksityiskohtien taso riippuu useista tekijöistä, mukaan lukien: kuinka paljon suunnitelma ja sisältö asiakkaasi on antanut, kuinka monimutkainen sisältö on, kuinka pitkälle prosessissa olet ja kuinka paljon yksityiskohtia haluat sen sisällyttävän .
Seuraavassa on esimerkkejä langoista, jotka on luotu käyttäen erilaisia työkaluja ja joilla on eri tasot yksityiskohdat ja värit:
Kuva 1: Tämä yksinkertainen rautalangan luonnos Coastal Capital Partners -verkkosivustolle (nyt nimeksi Broad Reach Retail Partners) käytettiin graafisten mallien luomiseen ja lopulta lopulliseen muotoiluun. mennessä Mike Rohde .
Kuva 2: Hyvin alhainen fidelity HTML wireframe. Hyödyllinen osoittamaan, miltä sivu näyttää ennen kuin tyylit lisätään. Hyvin hyödyllinen näkövammaisille käyttäjille.
Kuva 3: Pienjänniteverkon runko Embrace Pet Community , esittäjä Jesse Bennett-Chamberlain, 31.3 .
Kuva 4: Alustava mockup sosiaalisen konferenssityökalun rakentamisesta tiddlywiki käytettäväksi Le Webissä 3. Mukana tulevat muistiinpanot ovat klo tiddleleweb.tiddlyspot.com . Wireframe by Phil Hawksworth.
Kuva 5: Tämä perustuu blogikirjoitusjärjestelmän (WordPress) edistyneeseen käyttöön. mennessä Mattheiu Mingassson tai Activeside Internet Strategies ja Consulting .
Kuva 6: Johdinkuvake Embrace Pet Community , esittäjä Jesse Bennett-Chamberlain, 31.3 .
Kuva 7: Värikuva, jossa on väriä ja kuvia. Tekijä sivu wireframe by Bokhandel .
Kuva 8: Toinen värisävyteksti. Tekijä Mattheiu Mingassson Internetin strategiat ja konsultointi .
Parhaat käytännöt
Optimaalisten tulosten saavuttamiseksi tässä on useita tärkeitä asioita, jotka on pidettävä mielessä kehitettäessä rautalankaa:
- Yksinkertaisuus. Avain on pitää se riittävän yksinkertaisena olla selkeä asiakkaalle ja olla joustava suunnittelija, mutta riittävän yksityiskohtainen ohjaamaan ohjelmoijaa. Kuten edellä mainittiin, voit luoda korkealaatuisen raidan, mutta tämä kehitysvaiheen aikaisessa vaiheessa voi olla hämmentävää asiakkaalle, joka voi erehtyä sen lopullisesta luonnoksesta.
- Harmaa harmaasävy. Kun luot elementtejä rautalankaaseen, on parasta työskennellä harmaasävyllä, jotta voit keskittyä ulkoasuun ilman, että suunnitelma häiritsee. Jos sinulla on täysi väri -logo, muuta se myös harmaasävyyn. Eri elementtien erottamiseksi ja kategorisoimiseksi näytä muodot ja ääriviivat eri harmaasävyissä.
- Käytä wireframe-sivuja yhdessä sivustokartan kanssa. Lanka on visuaalinen esitys hyvästä sivustokartasta, ei korvaava. Sivukartta on hyödyllinen työkalu mille tahansa verkkosivustolle ja olisi ehdottomasti hyödyllistä mainita kehitysprosessin aikana.
- Keskity haluttuun lopputulokseen. Hanki selkeä käsitys siitä, miten asiakkaasi haluaa käyttäjien vastata sivulle ennen kuin luotaisi raidan. Toimintapuhelut pitäisi olla hyvin selkeitä yksinkertaisesti katsomalla rautalankaa.
- Luo täysikokoinen raita, jos se on verkkosivustolle. Tämä antaa tarkimman kuvan todellisesta sivusta.
- Suunnittele elementit varmistamalla sisältö etukäteen. Parhaassa tapauksessa asiakkaasi on jo toimittanut niille elementtejä, jotka pitäisi näkyä jokaiselle sivulle, kuten logo, mainokset, Flash- tai videotoistat, ominaisuudet, navigointiosat ja sivupalkki, otsikko ja alatunnisteelementit. Jos sinulla ei vielä ole näitä tietoja, tavata asiakkaasi ja saada (tai luoda) sivustokartta. Jos suunnittelet nykyisiä elementtejä uudelleen, voit kerätä ne verkkosivustosta huolellisesti. Tässä skenaariossa varmista, että ensin vahvistat asiakkaasi kanssa, että sinun ei tarvitse lisätä tai poistaa elementtejä, koska heidän odotustensa ymmärtäminen ei hidasta prosessia.
Harmaasävy vs. väri
Harmaasävyllä työskentelevän rautalankojen luominen auttaa pitämään keskittymän prosessin ensisijaiseen tehtävään , joka on viimeistellä asettelua, ei suunnittelua (ks. Kuva 3). Toinen väritysturvan riski on se, että asiakas voi erehtyä viimeisen mockup-raidan johdosta.
Väri voi kuitenkin osoittautua hyödylliseksi, kun näytetään kunkin puhelun sijainti toimintaan. Koska yksi sivu voi sisältää useita toimintapyyntöjä, priorisointi on tärkeää. Wireframes voi auttaa määrittämään, minkä toimintapyynnön haluat piirtää käyttäjän silmään.
Olen äskettäin työskennellyt projektissa, jolla oli erittäin vilkas logo, joka oli tässä tapauksessa ensisijainen toimintapyyntö, koska se edusti hiljattain julkaistua aikakauslehteä.
Kun käytät väriä, voit helposti selvittää, ovatko tietyt elementit ylivoimaisesti ensisijainen toimintapyyntö. Tämä prosessi jää yhä rajaamaan langankorjauksen sijaan mockup-mallin sijaan, koska elementtipaikkoja on vielä määritetty.
Väri voidaan vähitellen lisätä rautalangaan, koska hanke etenee , mikä on tehokkaampaa kuin eteenpäin mockupien kanssa ennen kuin elementtien sijainti on lukittu. Näin graafinen ohjelmisto auttaa sinua siirtymään suoraan mockup-malliin, kun se on valmis.
Mitä on vältettävä
Kuten muutkin kehitysprosessinne osa-alueet, langankiristys voi aiheuttaa sen epäonnistumisia, jos niitä ei suoriteta oikein. Seuraavassa on muutamia vinkkejä siitä, mitä voit välttää tehokkaimpien tulosten saavuttamiseksi:
- Liian paljon tapahtuu sivulla. Jätä runsaasti tilaa niin, että malli ei näytä liian kiireiseltä tai sekavalta.
- Väri ja muotoilu korostuvat. Wireframing on päättäessään elementtien ulkoasusta ja sijainnista. Vaikka rautalanka voi vaikuttaa suunnitteluun, lisäämällä grafiikkaa ja väriä luultavasti vain häiritsisi sen tarkoitusta.
- Liian paljon yksityiskohtia. Voit lisätä lisää yksityiskohtia myöhemmin, mutta jos liitetään liikaa alkuvaiheessa, asiakas voi sekoittaa viimeisen mockup-johdon raidan.
Jos olet kiinnostunut tutustumaan enemmän langankorkeisiin, Wireframe Magazine on suuri resurssi, joka jakaa näytteitä, käsittelee tekniikoita ja ratkaisee tietorakenteeseen liittyviä ongelmia.
Wire-kehyksen luominen asiakkaasi verkkosivustolle tarjoaa tehokkaan viestintävälineen kaikille osapuolille.
Yksinkertaisen rautalangan rakentaminen säästää aikaa pitkällä aikavälillä ja helpottaa suunnittelijan, kehittäjän ja asiakkaan kehitysprosessia.
Kirjallinen yksinomaan Eric Shaferin WDD: lle.
Käytätkö kaapeleita suunnittelua varten? Mitkä ovat parhaita tapoja luoda tehokkaita lankahaaroita?