Parhaat resurssit ruudukkopohjaisten piirilevyjen luonnosteluun
Prosessi käyttöliittymän suunnittelu alkaa aina ideasukupolvi. Tämä sisältää visualisoinnin, muiden sivustojen tutkimisen ja nopean prototyypin. Tämä varhaisen ajatuksen vaihe on ratkaisevan tärkeää ymmärtää ulkoasun ja käyttäjäkokemuksen aiot rakentaa. Joten miten sinun pitäisi todella tehdä uuden projektin wireframing-työ?
Olen fani perinteisen paperin ja lyijykynän kanssa ylimääräisiä työkaluja tarpeen mukaan. Mutta digitaalinen wireframing on myös suuri, ja se on toimiva vaihtoehto nykyaikaisille suunnittelijoille. Tässä artikkelissa haluaisin jakaa parhaat resurssit kummallekin tekniikalle, jotta voit luoda omia verkkoon perustuvat käyttöliittymäverkot.
Varhainen UI / UX-käsitteellistäminen
Aloitetaan selventämällä eroja a rautalanka ja a prototyyppi. Näitä kahta sanaa käytetään usein vaihdettavasti, koska ne liittyvät samaan prosessiin.
rautalanka on yksittäinen staattinen luonnos Web-sivun käyttöliittymän tai sovelluksen Sillä voi olla kutsuja, joilla selitetään painetekstiä, marginaaleja, elementtien kokoja tai jopa animaatioita. Mutta wireframes ovat vain karkeat luonnokset yksittäisille sivuille.
Samoin a prototyyppi on kuin a vuokaavio, josta käy ilmi, miten eri sivut yhdistyvät. Joten prototyyppi yhdistää wireframesin osoittamaan, miten eri painikkeet tai linkit johtavat muihin sivuihin.
Näitä määritelmiä ei ole kivetty, jotkut suunnittelijat voivat käyttää omaa terminologiaan, ja ne voivat olla eri mieltä tarkasta sanamuodostani. Mutta näin olen tavallisesti nähnyt niitä kuvaamassa, ja kuinka monta suunnittelijaa ymmärtää nämä ehdot parhaiten.
Mitä siis sinun pitäisi tehdä juuri näiden varhaisen käsitteellisten kappaleiden kanssa? Ovatko ne todella tarpeellisia? Sanoisin, että prototyyppien valmistaminen ei ole aina välttämätöntä, mutta se on erittäin hyvä idea erityisesti sovellusten suunnittelussa, joilla on monimutkaisia vuorovaikutuksia.
Mutta wireframing on aina hyvä idea jokaista uutta hanketta varten. Se auttaa sinua keskittyä suurempaan kuvaan huolimatta yksityiskohdista. Saat kokeen siitä, miten koko sivu on asetettu, ja tämä on korvaamaton, kun suunnittelet betoniasetusta.
Wireframingin tavoitteet
Joka kerta kun aloitat uuden projektin, kannattaa harkita mitä yrität ratkaista. Jokainen sivusto on rakennettu tietyn tavoitteen mukaisesti. Monilla sivustoilla on jopa useita tavoitteita, joissa jotkut tavoitteet ovat tärkeämpiä kuin toiset.
Käytä wireframing-ohjetta, joka auttaa sinua löytämään parhaan strategian siepata verkkosivuston tavoitteet. Tämä ei luultavasti tapahdu ensimmäisessä lankakehyksessä, joten olkaa valmiita piirtää paljon erilaisia ideoita.
Etsi muita vastaavia sivustoja ja kirjoita niiden parhaat ominaisuudet. Analysoi, miten sisältö on järjestetty ja miten siirryt kunkin sivun läpi.
Ajattele wireframes alkaen vuorovaikutteinen näkökulma. Nämä eivät ole vain kauniita kuvia. He edustavat digitaalisia rajapintoja ja haluat piirtää ajatuksesi mielessäsi.
Jos verkkoon perustuvia resursseja on saatavilla, olivatpa ne sitten paperia tai ne ovat digitaalisia, ne voivat auttaa paljon nopeassa luonnostelussa. Nyt tarkista parhaat resurssit wireframes-sovellusten luomiseksi.
Ruudukon sketchpadit
Voit aina aloittaa pikkukuvan luonnoksilla tulostimen paperilla vain kartoittaa karkeita ideoita. Henkilökohtaisesti aloin työskennellä tulostinpaperilla, koska näin olen vähemmän huolissaan verkkoista ja enemmän ideoita.
Dot-ruudukon luonnokset ovat paras tapa mennä, jos haluat puhdista idea, ja antaa sille enemmän rakennetta. Verkko auttaa sinua arvioida etäisyydet kohteiden välillä sivulla ja luo eräänlainen symmetria lanka.
On monia hyviä tuotteita, jos haluat aloita wireframing paperilla, esimerkiksi Rhodia Dot Pad on saatavana eri kokoisina päivittäiseen käyttöön. Se sisältää vain 80 sivua, mutta tämä on melko tyypillinen useimmille ruudukon luonnoksille.
Toinen erittäin viileä ja muokattavissa oleva tuote on Dotgrid. Kaikki Dotgridin kohteet ovat kalliimpia kuin Rhodia-kirjat, mutta niissä on enemmän materiaaleja ja mukautettuja kansikuvia.
Dotgrid hyväksyy jopa räätälöityjä tilauksia suunnittele omaa sketchpadia. Jokaisessa kirjassa on hieman alle 100 arkkia, joten etu- ja takasivulla saat noin 200 sivua ruudukon luonnosteluun.
Muutamia muita pistekilpailuja, joita haluan mainita, ovat Behance Dot Grid, joka on kovakantinen ja spiraali, vaikka se sisältää vain 50 paperiarkkia.
Responsive Design Sketchbook on yksi web-suunnittelijoiden parhaista resursseista. Mikään muu tuotesuunnittelija ei tarvitsisi vastaavaa suunnittelukuvaa, mutta web-suunnittelijat hyötyvät suuresti vapaudesta luoda ideoita erilaisilla laitteen leveyksillä ruudukon päälle.
Näissä reagoivissa suunnittelupatjoissa on myös 50 arkkia yhteensä 100 sivua, mutta jokaisella sivulla on neljä erilaista reagoivaa verkkoa edustavat eri pisteitä reagoivassa suunnittelussa: työpöytä, kannettava tietokone, tabletti ja älypuhelin.
Vaikka muotoilu on sujuvaa verrattuna Dotgrid-kirjoihin, kukaan muu ei ole pitänyt web-suunnittelijoille herkkiä sketchbookeja. Jos olet tuossa asiaa, kannattaa tilata yksi koeajoa varten.
Jos olet todella käsityönä ja et halua käyttää rahaa, voit myös tulosta omia ruudukon sivuja rajapintakuvio. Tämä ilmainen sivusto tarjoaa eri verkkomallit voit tulostaa ja käyttää käsin piirrettyjä lankoja.
Ruudukko on A4- ja US-kirjainkokoina eri paperityyppejä varten. Voit valita monista vaihtoehdoista, kuten täyspitkän selaimen malleista tai muista iPhonen näytöistä.
Kaikki nämä vaihtoehdot ovat hyviä, ja kannattaa tutustua, jos olet mukana lyijykynän piirustus. Paperi on yksi helpoimmista medioista, joiden avulla uusia ideoita voidaan alentaa nopeasti, joten se on usein suosituin vaihtoehto jopa UI-suunnittelijoille.
Digitaaliset työkalut ja Web-sovellukset
Siellä on niin paljon upeita wireframing-ohjelmia, että niitä voidaan tuskin kattaa ilman analyysin halvaantumista, joten nyt keskitymme joihinkin parhaista vaihtoehdoista verkkoon perustuva langallinen kehys.
Ensinnäkin haluaisin mainita, että voit käyttää Adobe-työkaluja, kuten Illustratoria luo omia wireframes. Tämä ei ole osa kaikkien työnkulkuja ja Illustrator ei varmasti ole ilmainen. Mutta jos jo työskentelet Adobe Creative Cloudin kanssa, se voi olla hyvä paikka aloittaa.
1. Moqups
Moqups on yksi parhaista online-työkaluista Wireframing. Työskentelet visuaalisen editorin ja varojen kirjaston kanssa, jotta voit vetää ja pudottaa koko sivun.
Jokaisella uudella Moqupsin hankkeella on a ennalta määritetyn ruudukon, ja käyttää kirkkaita violetteja viivoja, joiden avulla voit napsauttaa elementtejä kohdistukseen. Se on loistava web-työkalu, joka tekee verkon suunnittelusta paljon helpompaa.
Sivusto toimii oletusarvoisesti vapaassa suunnitelmassa, joka rajoittaa käyttäjän 300 sivun esineeseen. Sivustolla ei ole palkkio-optioita, mutta kuukausimaksun maksaminen saattaa olla ärsyttävää kuin vain Adobe-työkalujen käyttäminen tai kertaluonteinen Sketch-ostos.
2. Ruudukko Papr
Grid Papr -verkkosovellus on täysin ilmainen, ja se tarjoaa sekä julkisia että yksityisiä tilejä wireframeille. Voit luoda projektille nimen ja hankkia oman ainutlaatuisen URL-osoitteen lanka-kehykselle, jota voit muokata mistä tahansa tietokoneesta.
Jokainen uusi lanka mukana ruudukko joka mahdollistaa snap-to-ruudukon tekemisen kaikissa osissa. Ominaisuudet ovat yksinkertaisia, mutta ne riittävät luo lo-fi-lankapiiri muutamassa minuutissa. Vedä mitä haluat haluamallesi sivulle, ja seuraa ruudukkoa luomaan tähtitaivas.
3. Wireframe.cc
Wireframe.cc on yksi yksinkertaisimmista ja pienimmistä työkaluista, joita voit käyttää wireframingiin. Siinä on a häiriötön käyttöliittymä kanssa valmiiksi rakennettu ruudukko ja järjestetyt työkalurivit. Voit luoda uusia elementtejä kankaalle napsauttamalla ja vetämällä. Voit myös tallentaa ja jakaa työsi.
Tämä on vielä yksi työkalu, jota tarjotaan ilmaiseksi vapaaehtoisilla palkkiojärjestelmillä. Kukin suunnitelma laskutetaan kuukausittain, joten se on hyvin samankaltainen kuin hintarakenteen Moqups. Vapaa työkalu on käytettävissä missä tahansa tietokoneessa, jossa ei ole tiliä.
4. Mockingbird
Mockingbird on toinen loistava vaihtoehto, joka tarjoaa paljon enemmän ominaisuuksia kuin useimmat wireframing-työkalut. Voit aloittaa ilmaiseksi, mutta kokeilu on rajoitettu 7 päivään. Tämä voi olla ärsyttävää joillekin käyttäjille, mutta työkalu on todella uskomaton ja toimii kaikissa selaimissa.
Mockingbirdissä on loputon kirjasto UI-elementeistä, kuten välilehdet, harmonikot, pudotusvalikot, videonauhurit ja yksinkertaiset tekstilinkit. Oletusverkossa käytetään 960gs-verkkojärjestelmää, mutta voit valita 12, 16 ja 24 saraketta.
Lopulliset sanat
Riippumatta siitä, oletko valinnut perinteisen tai digitaalisen wireframing, se on aina noin tuotannon laatu. Tällaista työtä tehtäessä on paljon opittavaa, joten löydät mitä työkalu tuntuu mukavimmalta.
Paras asia on siirtyä eteenpäin aloita vain wireframing. Tutustu mihin haluat parhaiten (paperi tai digitaalinen) ja tee se omaksi. Tämän artikkelin resurssien pitäisi antaa sinulle enemmän kuin tarpeeksi, jotta voit aloittaa omien digitaalisten rajapintojasi varten.
(Oykun Yilmazin kuva)
