Najbolji resursi za skiciranje žičanih okvira temeljenih na mreži
Proces projektiranje sučelja uvijek počinje s generiranje ideja. To uključuje vizualizaciju, istraživanje drugih mjesta i brzu izradu prototipova. Ova rana faza ideje je ključna za razumjeti izgled i korisničko iskustvo namjeravate graditi. Dakle, kako biste zapravo trebali obaviti rad na žičanom ramu na novom projektu?
Ja sam obožavatelj tradicionalnog papira i olovke s dodatnim alatima po potrebi. Ali digitalno ožičenje je također velika, i to je održiva opcija za moderne dizajnere. U ovom članku želim podijeliti najbolje resurse za obje tehnike kako bi vam pomogao izraditi vlastite UI žičani okviri temeljeni na mreži.
Rana UI / UX konceptualizacija
Počnimo s pojašnjavanjem razlika između Wireframe i a prototip. Te se dvije riječi često koriste naizmjenično jer se odnose na isti proces.
Wireframe je jedna statična skica korisničkog sučelja web-stranice ili aplikacije. Možda ima oblačiće koji objašnjavaju tekst gumba, margine, veličine elemenata ili čak animacije. No, okviri su pravedni grube nacrte za pojedinačne stranice.
Slično tome, a prototip je kao dijagram toka koji prikazuje kako se različite stranice povezuju zajedno. Tako prototip povezuje žičane okvire kako bi pokazao kako bi različiti gumbi ili veze trebali voditi do drugih stranica.
Ove definicije nisu uklesane u kamenu, neki dizajneri mogu imati vlastitu terminologiju i možda se ne slažu s mojom točnom formulacijom. No, ovo je način na koji sam ih često opisivao i koliko ih dizajneri najbolje razumiju.
Što biste trebali točno učiniti s tim ranim konceptualnim djelima? Jesu li doista potrebni? Rekao bih da izrada prototipa nije uvijek potrebna, ali to je vrlo dobra ideja, posebno za projektiranje aplikacija sa složenim interakcijama.
Ali, ožičenje uvijek je dobra ideja za svaki novi projekt. Pomaže vam usredotočite se na veliku sliku bez brige o pojedinostima. Dobivate osjećaj kako je cjelokupna stranica izložena, a to je neprocjenjivo kada dizajnirate konkretan izgled.
Ciljevi za Wireframing
Svaki put kada pokrenete novi projekt, trebali biste razmisliti što pokušavate riješiti. Svaka je stranica izgrađena s određenim ciljem na umu. Mnoge web-lokacije imaju čak više ciljeva gdje su neki ciljevi važniji od drugih.
Koristite wireframing kao vodič koji će vam pomoći pronaći najbolju strategiju hvatanje ciljeva web-lokacije. To se vjerojatno neće dogoditi na prvom wireframeu, stoga budite spremni skicirati mnogo različitih ideja.
Potražite druge slične web-lokacije i napišite njihove najbolje značajke. Analizirajte kako je sadržaj organiziran i kako se krećete kroz svaku stranicu.
Razmislite o žičanim okvirima iz interaktivno stajalište. Ovo nisu samo lijepe slike. To su prikazi digitalnih sučelja, a vi to želite skicirati na umu.
Imati pri ruci resurse temeljene na mreži, bilo da su napravljeni od papira ili su digitalni, mogu puno pomoći u brzom skiciranju. Sada provjerimo najbolje resurse za izradu grafičkih okvira.
Mreže za skiciranje
Uvijek možete početi s osnovnim crtežima sličica na papiru pisača samo na mapirajte grube ideje. Osobno, obično počinjem raditi na papiru za pisač, jer sam na taj način manje zabrinut za rešetke i više o tome generiranje ideja.
Skice za crtanje točkastih mreža je najbolji način da odete ako želite očistiti ideju, i dati joj više strukture. Mreža vam pomaže procjenu udaljenosti između stavki na stranici i izradite neka vrsta simetrije u žičanom okviru.
Postoje mnogi veliki proizvodi vani ako želite pokrenuti žičanu mrežu na papiru, na primjer, Rhodia Dot Pad dolazi u različitim veličinama za svakodnevnu uporabu. Ona dolazi samo s 80 stranica, ali to je prilično tipično za većinu knjiga skica.
Još jedan vrlo cool i prilagodljiv proizvod je Dotgrid. Sve Dotgridove stavke su skuplje od Rhodia knjiga, ali dolaze s više materijala i dizajna prilagođenih poklopaca.
Dotgrid čak prihvaća narudžbe koje vam dopuštaju osmislite vlastiti sketchpad. Svaka knjiga sadrži nešto manje od 100 listova, tako da uključujući prednje i stražnje stranice dobivate oko 200 stranica za skiciranje mreže.
Nekoliko drugih skica za crtanje točkastih mreža koje želim spomenuti uključuju Behance Dot Grid koja je tvrda i spiralno povezana, iako sadrži samo 50 listova papira.
Responsive Design Sketchbook je jedan od najboljih resursa za web dizajnere. Niti jedan drugi dizajner proizvoda ne bi trebao imati odgovarajući dizajn sketchbooka, ali web dizajneri imaju velike koristi od slobode generirati ideje na različitim širinama uređaja na vrhu rasporeda mreže.
Ove osjetljive dizajnerske jastučiće također imaju 50 listova u ukupnom iznosu od 100 stranica, ali svaka stranica ima četiri različite mreže koji predstavljaju različite prijelomne točke u odgovornom dizajnu: stolna, prijenosna, tabletna i pametna.
Iako je dizajn bland u usporedbi s Dotgrid knjigama, nitko drugi nije smatrao odgovarajući sketchbooks za web dizajnere. Ako ste u toj vrsti stvari onda vrijedi naručiti jednu za probnu vožnju.
Ako ste stvarno u ručno izrađenim stvarima, a ne želite trošiti novac, također možete ispišite vlastite stranice mreže s Skica sučelja. Ova besplatna web-lokacija nudi različite predloške rešetki koje možete ispisati i koristiti za ručno crtane okvire.
Rešetke dolaze u A4 i US veličinama slova za različite stilove papira za pisač. Možete birati između mnogih opcija, kao što su predlošci za čitav web-preglednik ili različite iPhone zaslone.
Sve ove opcije su sjajne i vrijedi istražiti ako ste crtanje olovkom. Papir je jedan od najlakših medija za brzo spuštanje novih ideja, pa je često preferirani izbor čak i od strane dizajnera korisničkog sučelja.
Digitalni alati i web-aplikacije
Postoji toliko mnogo velikih programa ožičenja, koji se teško mogu pokriti bez rizika za paralizu analize, pa se sada usredotočimo na neke od najboljih opcija za mrežna žica.
Prvo, htio bih spomenuti da možete koristiti Adobe alate kao što je Illustrator stvorite vlastite žičane okvire. Ovo nije dio svačijeg tijeka rada, a Illustrator sigurno nije besplatan. Ali ako već radite s programom Adobe Creative Cloud, to bi moglo biti dobro mjesto za početak.
1. Moqups
Moqups je jedan od najboljih online alata za wireframing. Radite s vizualnim uređivačem i bibliotekom sredstava za povlačenje i ispuštanje po cijeloj stranici.
Svaki novi projekt Moqups ima unaprijed definiranu mrežu, i koristi svijetle ljubičaste linije kako bi vam pomogao pri povezivanju elemenata. To je izvrstan web-alat koji olakšava projektiranje s mrežom.
Stranica radi prema zadanim postavkama na besplatnom planu koji ograničava korisnika na objekte od 300 stranica. Web-lokacija ima opcije premije, ali plaćanje mjesečne naknade može biti iritantnije nego samo pokretanje Adobe alata ili jednokratna kupnja Sketch-a..
2. Grid Papr
Grid Papr web aplikacija je potpuno besplatna i nudi i javne i privatne račune za vaše žičane okvire. Možete stvoriti naziv za svoj projekt i dobiti svoj jedinstveni URL za okvir koji možete uređivati s bilo kojeg računala.
Svaki novi wireframe dolazi s rešetkom koji vam omogućuje izvođenje snap-to-grid na svim elementima. Značajke su jednostavne, ali su dovoljne stvoriti lo-fi wireframe u nekoliko minuta. Samo povucite što god želite na stranicu i slijedite rešetku da biste stvorili zvjezdani wireframe.
3. Wireframe.cc
Wireframe.cc je jedan od najjednostavnijih i minimalnih alata koje možete koristiti za wireframing. Ima a sučelje bez zagušenja s unaprijed izgrađena mreža i organizirane alatne trake. Jednostavno kliknite i povucite da biste stvorili nove elemente na platnu. Također možete spremiti i podijeliti svoje djelo.
Ovo je još jedan alat koji se nudi besplatno s dodatnim premijskim planovima. Svaki plan se naplaćuje mjesečno, tako da je vrlo sličan modelu Moqups u strukturi cijena. Besplatni alat upotrebljiv je s bilo kojeg računala bez računa.
4. Ptica rugalice
Mockingbird je još jedna izvrsna opcija, koja nudi mnogo više mogućnosti nego većina alata za iscrtavanje. Možete početi besplatno, ali suđenje je ograničeno na 7 dana. To može biti smetnja nekim korisnicima, ali alat je zaista nevjerojatan i radi u svim preglednicima.
Mockingbird ima beskonačnu knjižnicu elemenata korisničkog sučelja kao što je kartice, harmonike, padajuće izbornike, video playere i jednostavne tekstualne veze. Zadana mreža koristi mrežu 960gs grid, ali možete birati između 12, 16 i 24 stupaca.
Završne riječi
Bez obzira odaberete li tradicionalnu ili digitalnu ožičenje, uvijek se radi o kvalitetu izlaza. Mnogo toga se može naučiti kada radite ovu vrstu posla, stoga pronađite bilo koji alat koji vam najviše odgovara.
Kretanje naprijed najbolje je učiniti samo pokrenite wireframing. Osjetite što god želite najbolje (papirni ili digitalni) i napravite ga svojim. Resursi u ovom članku trebali bi vam dati više nego dovoljno da biste započeli s žičanim uokvirivanjem vlastitih digitalnih sučelja.
(Fotografija poklopca Oykuna Yilmaza)
