Slik bruker du grids når du oppretter prototyper av sider

Denne artikkelen vil være nyttig hvis du lager prototyper av nettsteder for å få ideene dine til webdesignere og utviklere. Opplæringen vil lære deg hvordan du prototyperer et nett.

Ansvarsfraskrivelse: Hvis du lager en prototype uten et rutenett, vil ikke noe forferdelig skje. En profesjonell designer eller webutvikler vil legge til et rutenett for deg. Men hvis du lærer å jobbe med nett, vil kvaliteten på prototyper øke dramatisk, og du ser på sidene på nettsteder på en annen måte.

Hva er et rutenett og hvorfor bruke det

Et rutenett er et system med vertikale eller vertikale og horisontale linjer som deler en side i kolonner eller celler. Opprettet ved hjelp av en rutenett eller en celle, danner strukturen eller skjelettet på siden, med hvilken designere organiserer innhold.

Det er med hjelp av rutenett du lager en ramme som du har på alle elementene på siden: logo, meny, skyveknapp, skjema, bilde og så videre. Takket være skjelettet kan elementets sider harmonisk plasseres, velge deres relative og absolutt dimensjoner, sett den visuelle rytmen.

Et viktig punkt: Rutenettene gir fleksibilitet i design, som er nødvendig for å tilpasse oppsettet til forskjellige skjermstørrelser. Det vil si bruken av rammen - et skritt for å skape en responsiv side.

På den ferdige siden er gridene vanligvis ikke synlige. Men de kan ses på prototyper og layouter.

Hva er nettene

Hvis du ikke er engasjert i design og webutvikling profesjonelt, er det nok å vite om eksistensen av to typer grids: columnar og modulær.

Et kolonnegrid er et system med vertikale linjer som deler en side i kolonner og strekker.

Mørke og brede områder i illustrasjonen er kolonner, lette og smale er ledd.

Modulgitteret er et system med vertikale og horisontale linjer som deler siden i moduler.

I dette tilfellet er modulene rektangler på 20 x 20 piksler, merket med tykkere linjer.

Hvis du ikke er en profesjonell webdesigner og -utvikler, bruk et kolonnerett for å lage prototyper. Det er minst to grunner til dette. Først: Kolonnegrunnene er veldig populære på nettet. De bygger populære rammer, for eksempel Bootstrap, Bulma, Skeleton, hvilke webutviklere bruker for sidelayout.

Den andre grunnen: For prototypen av siden er det nok å bruke kolonnettet. Om nødvendig vil en profesjonell webdesigner legge til et modulært rutenett når det blir skissen din til et fullverdig layout.

Hvordan bruke masker under prototyping

Dette er en praktisk del som lærer hvordan du bruker masker når du lager prototyper.

Hvor å tegne rister

Svaret avhenger av verktøyene du bruker til prototyping. Gitter kan trekkes for hånd hvis prototypen er på et ark. Hvis skissen er opprettet ved hjelp av spesialprogrammer og tjenester, dyp inn i innstillingene. Verktøyene til de mest populære prototypingsprogrammene har nett. Eksempler nedenfor.

For å aktivere rutenettet i Moqups, klikk på ikonet Arbeidsområde og sjekk alternativet Vis layout rutenett. Hvis du trenger et modulært rutenett, merker du alternativet Vis papirstørrelse.

For å aktivere grids i Proto.io, velg Innstillinger - Grid Settings-menyen.

Sjekk alternativet Vis layout. Velg antall kolonner, deres bredde og bredden på indrykkene mellom kolonnene og langs kantene på siden. Disse innstillingene vil bli diskutert nedenfor.

Hvis du trenger et modulært rutenett, merk av for Vis rutenett og angi innstillingene.

Hvis du bruker Justinmind Prototype, velger du kategorien Maler i redigeringsprogrammet, og bruker ett av malnettene: 12 eller 16 kolonner.

Hvis du bruker annen prototyping programvare, finn masker selv.

Hvordan bygge et rutenett

Bygg et rutenett - velg antall kolonner, deres bredde, samt bredden på delene mellom kolonnene og langs kantene på siden.

Spørsmål: Hvor mange kolonner skal være i kolonnettet? Det korte svaret er 12. Poenget er ikke engang at de fleste CSS-rammebetingelser som webutviklere bruker, er bygget på 12-kolonne grids. Om nødvendig endres standardinnstillingene til rammene.

Tallet 12 er nesten magisk: Det er delt inn i 6, 4, 3 og 2. Dette betyr at på en side med et rutenett på 12 kolonner i en rad kan du harmonisk arrangere seks, fire, tre eller to elementer. Siden nummeret alltid er delbart av seg selv og av en, kan du plassere 12 eller ett element på rad.

Videre, hvis du ikke legger merke til de ekstreme kolonnene, gir gridet med 12 kolonner deg harmonisk plass på en rekke med fem eller 10 elementer.

Gitter med et annet antall kolonner gir ikke slik fleksibilitet. For eksempel er 16 delt inn i 8, 4 og 2. For å harmonisk plassere tre eller seks elementer på rad, kan du slippe to ytre kolonner.

Men for å sette i en rekke med fem eller 10 elementer, må du slippe de tre ekstreme kolonnene. Dette er ikke veldig praktisk.

Når du velger antall kolonner i rutenettet, trykker du på innholdet du planlegger å plassere på siden. Hvis du for eksempel lager en innholdsside uten sidebjelke, er det nok en kolonne eller et stort rektangulært mellomrom i midten av siden. Og hvis du lager en porteføljeside eller et fotogalleri, trenger du et komplekst modulært rutenett.

Men for å lage en prototype i 99 tilfeller ut av 100, er det praktisk å jobbe med et rutenett på 12 kolonner. En profesjonell designer eller webutvikler, takket være kolonnegrensen, vil gjøre prototypen din til flere layouter for forskjellige skjermstørrelser.

Når du bygger et rutenett, må du velge bredden på strekkene på kantene på siden, bredden på strekkene mellom kolonnene og bredden på kolonnene selv. I stor grad, under prototyping, er det ikke nødvendig å bestemme disse verdiene med pikselnøyaktighet. Senere vil designeren og webutvikleren ta seg av dette. Men for å gjøre det enklere, bruk følgende anbefalinger:

  • I det valgte programmet for prototyping, jobbe med malsiden for skrivebordet. Sidens bredde skal være minst 960 piksler. La tilnærming til mobile første fagfolk.
  • Marginene skal være minst to ganger bredden på strekkene mellom kolonnene (rennene). Denne teknikken ser ut til å lede visningen til besøkende på siden.
  • Jo bredere mellomrummet mellom kolonnene, jo mer på "luft" -siden eller ledig plass.

Et eksempel på et rutenett for å arbeide kan ses i illustrasjonen.

Slik bruker du kolonnettet fleksibelt når du planlegger sidelayout

Kolonnegrunn - grunnlaget for sidelayout. Dette kan illustreres med et typisk oppsett fra artikkelen "Hvordan lage prototypesider" (se bilde).

I dette tilfellet opptar topptekst og bunntekst alle 12 kolonner. Hovedenheten og sidebaret kan oppta henholdsvis 9 og 3 eller 10 og 2 kolonner.

Med hjelp av kolonnegitteret er det mulig å bygge mer komplekse layouter, for eksempel med fordelingen av kolonnene 5-5-2, 3-6-3, og så videre.

Det er ved hjelp av et rutenett med 12 kolonner, det er mulig å konstruere layouter som består av blokker med forskjellige bredder. Det kan være flere blokker på rad.

Når du velger antall og bredde på blokker, må du lede det innholdet du planlegger å publisere på siden. Egne eksempler vil bidra til å forstå dette.

På siden "Tilkoblet" er det en navigasjonsmeny og kategorikort.

En slik utforming kan representeres i form av fire blokker tre kolonner i bredde.

Et annet eksempel fra nettstedet "Svyaznoy": en telefonliste fra en produsent med en navigasjonsmeny og fire produktkort på rad.

Oppsettet på denne siden kan gjøres på et rutenett med 16 kolonner. Navigasjonsmenyen vil ta fire kolonner og produktkort - tre kolonner hver.

Et praktisk eksempel nedenfor vil bidra til å bedre forstå prinsippene for å arbeide med et kolonnegrid.

Bruke rutenett: et eksempel på en prototypeside

For å lage en prototype av siden brukte jeg et rutenett med 12 kolonner. Slått på og papirgitter, for å gjøre det lettere å ordne elementene i vertikal retning.

Jeg legger til en logo, en konverteringsknapp og en navigasjonsmeny til overskriften. Vær oppmerksom på justeringen av rutenettet: elementene opptar henholdsvis 4, 4 og 9 kolonner.

Under toppteksten legger du til en stor skyveknapp. Den har 10 sentrale høyttalere.

Under skyveknappen legger jeg til tre produktkort, som består av et bilde, en tekst og en navigasjonsknapp. Kortene tar opp fire kolonner.

Under kortene er siden delt inn i to vertikale blokker: hoved- og sidebjelken. De okkuperer henholdsvis 8 og 4 kolonner.

I bunnteksten legger du til serviceinformasjon. Prototypen av siden kan sees ved hjelp av forhåndsvisningsknappen øverst til høyre på skjermen.

I forhåndsvisningsmodus vises ikke rutenettet. Dette gjør at vi kan evaluere prototypen uten visuell forstyrrelse og om nødvendig gå tilbake til redigering. For eksempel i forhåndsvisningsmodus virket glidebryteren for smal.

Jeg øker glidebredden til 12 kolonner eller fjern kontrollerne fra bildene til de ytre kolonnene i rutenettet. Jeg husker at ved siden av navigasjonsmenyen igjen rom for søkeskjemaet.

Prototypen er klar.

Enkelt og kraftig verktøy

Dette er den endelige egenskapen til nettet. Ved hjelp av dette verktøyet får enhver spesialist uten teknisk trening et fleksibelt rammeverk som det er praktisk å bygge prototyper på siden. Du kan bruke nettet på et ark papir eller i populære prototypeprogrammer. I fremtiden vil designeren og utvikleren kunne dreie kolonnegitteret inn i en prototype på lavt nivå i en fullverdig layout og adaptiv side.

Loading...

Legg Igjen Din Kommentar