Kako koristiti rešetke pri izradi prototipova stranica

Ovaj će članak biti koristan ako napravite prototipove web-lokacija kako biste svoje ideje prenijeli na web-dizajnere i programere. Tutorial će vas naučiti kako prototipirati mrežu.

Odricanje od odgovornosti: ako napravite prototip bez rešetke, ništa strašno se neće dogoditi. Profesionalni dizajner ili web developer će dodati rešetku za vas. Ali ako naučite kako raditi s rešetkama, kvaliteta prototipova će se dramatično povećati, a stranice stranica ćete pogledati na drugačiji način.

Što je mreža i zašto je koristiti

Mreža je sustav vertikalnih ili vertikalnih i horizontalnih linija koje dijele stranicu na stupce ili ćelije. Izrađeni pomoću stupca mreže ili ćelije čine strukturu ili kostur stranice s kojom dizajneri organiziraju sadržaj.

To jest, pomoću rešetki napravite okvir na kojem nosite sve elemente stranice: logotip, izbornik, klizač, oblik, sliku i tako dalje. Zahvaljujući kosturu, elementi stranice mogu se skladno pozicionirati, izabrati njihove relativne i apsolutne dimenzije, postaviti vizualni ritam.

Važna točka: rešetke pružaju fleksibilnost dizajna, koja je potrebna za prilagodbu rasporeda različitim veličinama zaslona. To jest, korištenje okvira - korak za stvaranje stranice koja odgovara.

Na završenoj stranici mreže obično nisu vidljive. Ali oni se mogu vidjeti na prototipovima i rasporedima.

Što su rešetke

Ako se profesionalno ne bavite dizajnom i izradom web stranica, dovoljno je znati o postojanju dvije vrste rešetki: stupacnih i modularnih.

Mreža stupaca je sustav vertikalnih linija koje dijele stranicu na stupce i uvlake.

Tamni i široki prostori na slici su stupci, lagani i uski su uvlake.

Modularna mreža je sustav vertikalnih i horizontalnih linija koje dijele stranicu na module.

U ovom slučaju, moduli su pravokutnici od 20 x 20 piksela, označeni debljim crtama.

Ako niste profesionalni web-dizajner i razvojni programer, za izradu prototipa koristite rešetku stupaca. Postoje barem dva razloga za to. Prvo: rešetke stupaca vrlo su popularne na webu. Oni grade popularne okvire, na primjer, Bootstrap, Bulma, Skeleton, koji web programeri koriste za izgled stranice.

Drugi razlog: za prototip stranice dovoljno je koristiti mrežu stupaca. Ako je potrebno, profesionalni web dizajner će dodati modularnu mrežu kad pretvori vašu skicu u punopravni izgled.

Kako koristiti mreže tijekom izrade prototipa

Ovo je praktičan odjeljak koji uči kako koristiti mrežice pri izradi prototipa.

Gdje crtati rešetke

Odgovor ovisi o alatima koje koristite za izradu prototipova. Mreže se mogu nacrtati ručno ako je prototip na listu papira. Ako je skica stvorena pomoću posebnih programa i usluga, pređite na postavke. Alati najpopularnijeg softvera za izradu prototipova imaju rešetke. Primjeri u nastavku.

Da biste omogućili mrežu u programu Moqups, kliknite ikonu Radni prostor i označite opciju Prikaži raspored rasporeda. Ako vam je potrebna modularna mreža, označite opciju Show paper grid (Prikaži rešetku papira).

Da biste omogućili mreže u Proto.io, odaberite izbornik Postavke - Mreža.

Označite opciju Prikaži raspored. Odaberite broj stupaca, njihovu širinu i širinu udubljenja između stupaca i rubova stranice. O ovim postavkama ćemo raspravljati u nastavku.

Ako vam je potrebna modularna mreža, označite opciju Prikaži mrežu i odredite postavke.

Ako koristite Justinmind Prototype, u uređivaču odaberite karticu Predlošci i koristite jednu od predložaka: 12 ili 16 stupaca.

Ako koristite drugi softver za izradu prototipova, pronađite mreže.

Kako izgraditi mrežu

Izgradite mrežu - odaberite broj stupaca, njihovu širinu, kao i širinu udubljenja između stupaca i duž rubova stranice.

Pitanje: koliko bi stupaca trebalo biti u stupcu? Kratak odgovor je 12. Bit nije u tome da većina CSS okvira koje web programeri koriste izgrađuju se na mrežama od 12 stupaca. Ako je potrebno, mijenjaju se zadane postavke okvira.

Broj 12 je gotovo magičan: podijeljen je na 6, 4, 3 i 2. To znači da na stranici s mrežom od 12 stupaca u jednom redu skladno možete urediti šest, četiri, tri ili dva elementa. Budući da je broj uvijek djeljiv sam po sebi i po jedan, možete postaviti 12 ili jedan element u niz.

Štoviše, ako ne obratite pozornost na ekstremne stupce, rešetka od 12 stupaca omogućuje skladno postavljanje u red od pet ili deset elemenata.

Mreže s različitim brojem stupaca ne pružaju takvu fleksibilnost. Na primjer, 16 je podijeljeno na 8, 4 i 2. Da bi se skladno smjestili tri ili šest elemenata u nizu, možete ispustiti dva vanjska stupca.

No, staviti u red od pet ili deset elemenata, morate ispustiti tri ekstremna stupca. To nije baš prikladno.

Prilikom odabira broja stupaca u mreži, isključite sadržaj koji namjeravate postaviti na stranicu. Na primjer, ako napravite stranicu sa sadržajem bez bočne trake, dovoljan je jedan stupac ili široki pravokutni prostor u središtu stranice. A ako napravite portfelj stranicu ili galeriju fotografija, trebat će vam složena modularna mreža.

No, za izradu prototipa u 99 slučajeva od 100 je zgodno raditi s mrežom od 12 stupaca. Profesionalni dizajner ili web developer, zahvaljujući rešetki stupaca, pretvorit će vaš prototip u nekoliko rasporeda za različite veličine zaslona.

Prilikom izgradnje rešetke, morate odabrati širinu alineja na rubovima stranice, širinu udubljenja između stupaca i širinu samih stupaca. Općenito, tijekom izrade prototipa, nije potrebno odrediti te vrijednosti s točnošću piksela. Kasnije, dizajner i web developer će se pobrinuti za to. Ali za praktičnost, upotrijebite sljedeće preporuke:

  • U odabranom programu za izradu prototipova, radite sa stranicom predloška za radnu površinu. Širina stranice mora biti najmanje 960 piksela. Ostavite pristup mobilnih prvih profesionalaca.
  • Margine moraju biti najmanje dvostruko veće od širine udubljenja između stupova (oluka). Čini se da ova tehnika usmjerava pogled posjetitelja unutar stranice.
  • Što je prostor između stupaca širi, to je više na stranici "zrak" ili slobodnom prostoru.

Primjer mreže s kojom se može raditi može se vidjeti na slici.

Kako koristiti fleksibilnu mrežu stupaca prilikom planiranja izgleda stranice

Rešetka stupaca - osnova izgleda stranice. To se može ilustrirati tipičnim rasporedom iz članka "Kako stvoriti prototip stranice" (vidi fotografiju).

U ovom slučaju zaglavlje i podnožje zauzimaju svih 12 stupaca. Glavna jedinica i bočna traka mogu zauzimati 9 i 3 ili 10 i 2 stupca.

Pomoću rešetke stupaca moguće je izgraditi složenije rasporede, primjerice raspodjelu stupaca 5–5–2, 3–6–3 i tako dalje.

To jest, pomoću rešetke s 12 stupaca moguće je konstruirati rasporede koji se sastoje od blokova različitih širina. Postoji nekoliko blokova za redom.

Prilikom odabira broja i širine blokova vodite se sadržajem koji namjeravate objaviti na stranici. Pravi primjeri pomoći će vam da to razumijete.

Na stranici "Povezano" nalaze se navigacijski izbornik i kartice s kategorijama.

Takav raspored može biti predstavljen u obliku četiri bloka u tri stupca širine.

Drugi primjer sa stranice "Svyaznoy": katalog telefona jednog proizvođača s navigacijskim izbornikom i četiri kartice proizvoda u nizu.

Izgled ove stranice može se obaviti na mreži sa 16 stupaca. Izbornik za navigaciju ima četiri stupca, a kartice proizvoda - po tri stupca.

Praktični primjer u nastavku pomoći će u boljem razumijevanju načela rada s rešetkom stupaca.

Korištenje rešetke: primjer stranice prototipa

Da bih napravio prototip stranice, koristio sam rešetku s 12 stupaca. Uključena i papirnata rešetka, kako bi se lakše rasporedili elementi u vertikalnom smjeru.

U zaglavlje dodam logotip, gumb za pretvorbu i navigacijski izbornik. Obratite pozornost na poravnanje mreže: elementi zauzimaju 4, 4 i 9 stupaca.

Pod zaglavljem dodajte veliki klizač. Zauzima 10 središnjih zvučnika.

Pod klizačem dodam tri kartice proizvoda, koje se sastoje od fotografije, teksta i navigacijskog gumba. Kartice zauzimaju četiri stupca.

Pod karticom stranica je podijeljena u dva okomita bloka: glavni i bočni. Oni zauzimaju 8 odnosno 4 stupca.

U podnožju dodajte informacije o usluzi. Prototip stranice može se pregledati pomoću gumba Pregled u gornjem desnom kutu zaslona.

U načinu pregleda, rešetka se ne prikazuje. To nam omogućuje procjenu prototipa bez vizualnih smetnji i, ako je potrebno, povratak na uređivanje. Na primjer, u načinu pregleda, klizač se činio preuskim.

Povećavam širinu klizača na 12 stupaca ili uklanjam kontrolere iz slika u najudaljenije stupce rešetke. Sjećam se da je pored navigacijskog izbornika ostavljen prostor za obrazac za pretraživanje.

Prototip je spreman.

Jednostavan i moćan alat

To je posljednja karakteristika mreže. Uz pomoć ovog alata, bilo koji stručnjak bez tehničke obuke dobiva fleksibilan okvir na kojem je prikladno izgraditi prototipove stranice. Možete koristiti rešetku na listu papira ili u popularnim programima za izradu prototipova. U budućnosti, dizajner i programer će moći pretvoriti mrežu stupaca kako bi prototip s niskim detaljima pretvorili u cjeloviti izgled i prilagodljivu stranicu.

Pogledajte videozapis: Upravljanje gorionikom na pelet (Rujan 2019).

Ostavite Komentar