Najboljši viri za skiciranje žičnih omrežij na osnovi mreže

Postopek oblikovanje vmesnika vedno začne z generacije idej. To vključuje vizualizacijo, raziskovanje drugih mest in hitro izdelavo prototipov. Ta zgodnja faza ideje je ključnega pomena za razumevanje postavitve in uporabniške izkušnje nameravate zgraditi. Torej, kako naj dejansko izvedete žično izdelavo novega projekta?

Sem ljubitelj tradicionalnega papirja in svinčnika z dodatnimi orodji, kot je potrebno. Toda digitalno ožičenje je tudi velik, in to je izvedljiva možnost za moderne oblikovalce. V tem članku bi rad delil najboljše vire za obe tehniki, da bi vam pomagal ustvariti svoje omrežni vmesniki, ki temeljijo na omrežju.

Zgodnja konceptualizacija uporabniškega vmesnika / UX

Začnimo z razjasnitvijo razlik med okvir in a prototip. Ti dve besedi se pogosto uporabljata zamenljivo, ker se nanašata na isti proces.

A okvir je ena statična skica uporabniškega vmesnika spletne strani ali aplikacije. Lahko imajo oblačke, ki pojasnjujejo besedilo gumba, robove, velikosti elementov ali celo animacije. Toda okvirji so pravični osnutki posameznih strani.

Podobno a prototip je kot a diagram poteka, ki prikazuje, kako se različne strani povezujejo skupaj. Tako prototip poveže žične okvirje, da prikaže, kako naj bi različni gumbi ali povezave vodili do drugih strani.

Te definicije niso izklesane v kamen, nekateri oblikovalci imajo lahko svojo terminologijo in se ne strinjajo z mojim natančnim besedilom. Ampak to je, kako sem jih običajno videl opisan, in to je, koliko oblikovalcev razume te izraze kot najboljše.

Torej, kaj naj bi točno storili s temi zgodnjimi konceptualnimi deli? Ali so res potrebni? Rekel bi, da izdelava prototipov ni vedno potrebna, vendar je to zelo dobra ideja, zlasti za načrtovanje aplikacij s kompleksnimi interakcijami.

Toda ožičenje je vedno dobra ideja za vsak nov projekt. Pomaga vam osredotočiti se na veliko sliko brez skrbi za podrobnosti. Dobiš občutek, kako je določena celotna stran, in to je neprecenljivo, ko načrtuješ konkretno postavitev.

Cilji za Wireframing

Vsakič, ko začnete nov projekt, razmislite kar poskušate rešiti. Vsako spletno mesto je zgrajeno z določenim ciljem. Številna spletna mesta imajo celo več ciljev, kjer so nekateri cilji pomembnejši od drugih.

Uporabite okovje kot vodilo, ki vam pomaga najti najboljšo strategijo zajemanje ciljev spletne strani. To se verjetno ne bo zgodilo na prvem ogrodju, zato bodite pripravljeni skicirati veliko različnih idej.

Poiščite druge podobne spletne strani in si zapišite njihove najboljše lastnosti. Analizirajte, kako je vsebina organizirana in kako se premikate skozi vsako stran.

Pomislite na žične okvirje iz interaktivno stališče. To niso le lepe slike. Predstavljajo digitalne vmesnike in s tem v mislih želite skicirati svoje ideje.

Če imate na razpolago omrežne vire, ki so na voljo, ne glede na to, ali so izdelani iz papirja ali so digitalni, lahko veliko pripomorejo k hitremu skiciranju. Zdaj pa si oglejmo najboljše vire za ustvarjanje okvirjev.

Mrežne skice

Vedno lahko začnete z osnovnimi skicami sličic na papirju tiskalnika samo, da načrtujte grobe ideje. Osebno ponavadi začnem delati na papirju za tiskalnik, ker sem na ta način manj zaskrbljen zaradi omrežij in več ustvarjanje idej.

Skice za risanje točk ste najboljši način, če želite očistite idejo, in ji dajo več strukture. Omrežje vam pomaga ocenite razdalje med predmeti na strani in ustvarite neke vrste simetrija v okvirju.

Obstaja veliko veliko izdelka tam, če želite zaženite žico na papirju, na primer Rhodia Dot Pad je na voljo v različnih velikostih za vsakodnevno uporabo. Na voljo je samo 80 strani, vendar je to precej tipično za večino skicnih knjig.

Drug zelo kul in prilagodljiv izdelek je Dotgrid. Vsi predmeti podjetja Dotgrid so dražji od knjig Rhodia, vendar prihajajo z več materiali in oblikovanjem po meri.

Dotgrid celo sprejema naročila, ki vam dovoljujejo ustvarite lastno sketchpad po meri. Vsaka knjiga vsebuje nekaj manj kot 100 listov, tako da boste na sprednji in zadnji strani dobili približno 200 strani za skiciranje mreže.

Nekaj ​​drugih skicirk, ki jih želim omeniti, so Behance Dot Grid, ki je trda in spiralno vezana, čeprav vsebuje le 50 listov papirja..

Prilagodljiv Design Sketchbook je eden najboljših virov za spletne oblikovalce. Noben drug oblikovalec izdelkov ne bi potreboval odzivne skice za oblikovanje, toda spletni oblikovalci so imeli veliko koristi od svobode ustvarjanje idej na različnih širinah naprav na vrhu mreže.

Te odzivne oblikovalske blazinice imajo tudi 50 listov s skupno 100 strani, vendar ima vsaka stran štiri različne odzivne mreže predstavljajo različne točke v odzivnem oblikovanju: namizni, prenosni, tablični in pametni.

Čeprav je oblikovanje v primerjavi z Dotgrid knjigami, je nihče drug ne upošteva odzivnih skic za spletne oblikovalce. Če ste v tej stvari, potem je vredno naročiti eno za testno vožnjo.

Če ste res v ročno izdelane stvari, in ne želite porabiti denarja lahko tudi natisnite lastne strani omrežja s skico vmesnika. Ta brezplačna stran ponuja različne predloge omrežja ki jih lahko natisnete in uporabite za ročno narisane okvirje.

Mreže so v velikosti črk A4 in ZDA za različne sloge papirja za tiskalnik. Izbirate lahko med številnimi možnostmi, na primer predlogami za celoten spletni brskalnik, ali različnimi zasloni iPhone.

Vse te možnosti so odlične in vredne raziskovanja, če vas zanima skiciranje svinčnika. Papir je eden izmed najlažjih medijev, ki hitro dobijo nove ideje, zato je pogosto najprimernejša izbira tudi pri oblikovalcih uporabniškega vmesnika.

Digitalna orodja in spletne aplikacije

Obstaja toliko velikih programov za žično izdelavo, da jih je težko pokriti, ne da bi tvegali analizo paralize, zato se zdaj osredotočimo na nekatere izmed najboljših možnosti za omrežno ožičenje.

Najprej želim omeniti, da lahko uporabite orodja Adobe, kot je Illustrator ustvarite lastne žice. To ni del vsakokratnega poteka dela, Illustrator pa zagotovo ni brezplačen. Toda, če že delate z Adobe Creative Cloud, je morda dobro začeti.

1. Moqups

Moqups je eno najboljših spletnih orodij za okovje. Delate z vizualnim urejevalnikom in knjižnico sredstev, da povlečete in spustite po vsej strani.

Vsak nov projekt Moqups ima vnaprej določena mreža, in uporablja svetlo vijolične črte, ki vam pomagajo pri poravnavi elementov. To je odlično spletno orodje, ki omogoča veliko lažje oblikovanje z mrežo.

Stran deluje privzeto na prostem načrtu, ki uporabnika omejuje na 300 objektov strani. Spletna stran ima premijske možnosti, vendar je plačilo mesečne pristojbine morda bolj nadležno kot samo uporaba orodij Adobe ali enkratni nakup programa Sketch..

2. Mreža Papr

Spletna aplikacija Grid Papr je popolnoma brezplačna in ponuja tako javne kot zasebne račune za vaše žice. Ustvarite ime za svoj projekt in dobite svoj edinstven URL za okvir, ki ga lahko urejate iz katerega koli računalnika.

Vsak nov okvir prihaja z mrežo ki vam omogoča izvajanje snap-to-grid na vseh elementih. Funkcije so preproste, vendar so dovolj v nekaj minutah ustvarite ogrodje lo-fi. Samo povlecite karkoli želite na stran, in sledite mreži, da ustvarite zvezdno žico.

3. Wireframe.cc

Wireframe.cc je eno od najpreprostejših in najbolj minimalnih orodij, ki jih lahko uporabite za žično ogrodje. Ima a vmesnik brez ovir z vgrajeno omrežje in organizirane orodne vrstice. Če želite ustvariti nove elemente na platnu, preprosto kliknite in povlecite. Svoje delo lahko tudi shranite in daste v skupno rabo.

To je še eno orodje, ki je brezplačno na voljo z izbirnimi načrti premij. Vsak načrt se obračuna mesečno, zato je zelo podoben Moqups v strukturi cen. Brezplačno orodje je uporabno iz katerega koli računalnika brez računa.

4. Ptičje ponižanje

Mockingbird je še ena odlična možnost, ki ponuja veliko več funkcij kot večina orodij za žično izdelavo. Začnete lahko brezplačno, poskus pa je omejen na 7 dni. To je lahko moteno za nekatere uporabnike, vendar je orodje res neverjetno in deluje v vseh brskalnikih.

Mockingbird ima neskončno knjižnico elementov uporabniškega vmesnika, kot je zavihki, harmonike, spustni meniji, video predvajalniki in preproste besedilne povezave. Privzeta mreža uporablja omrežje 960gs, vendar lahko izbirate med njimi 12, 16 in 24 stolpcev.

Končne besede

Ne glede na to, ali izberete tradicionalno ali digitalno okovje, je vedno na voljo kakovost proizvodnje. Ob tej vrsti dela se je treba veliko naučiti, zato najti orodje, ki vam najbolj ustreza.

Če se premaknete naprej, je najboljša stvar začnite z žičnim ogrodjem. Pridobite občutek za tisto, kar vam je najbolj všeč (papirnate ali digitalne), in naredite svoje. Viri v tem članku bi vam morali dati več kot dovolj, da začnete z žičnim oblikovanjem lastnih digitalnih vmesnikov.

(Cover foto Oykun Yilmaz)