Sådan mestrer du designgitteret

Et crashkursus til design af digitale ting ved hjælp af et gittersystem

Grib denne skissefil her

I det sidste år har jeg undervist i UX og produktdesign på generalforsamlingen her i Toronto. Jeg har lært et ton, og de studerende, der kommer gennem døren, er fulde af spænding, håb og entusiasme for at bygge morgendagens produkter og tjenester.

Ved flere lejligheder har jeg set, at spænding, håb og entusiasme dræner fra deres ansigter og lader dem drukne i en pulje af fortvivlelse. Årsagen? Det kraftfulde gitter.

I et forsøg på at hjælpe jer, der lige er startet i UX / UI Design med at overvinde panikken og forvirringen, som nogle gange omgiver nettet, har jeg sammensat et praktisk crashkursus, så du kan angribe gitteret som en champ og få revner på dine verdensforandrende ideer. Vi vil dække et par forskellige emner her, herunder:

  1. The Grid Guts - Hvad består gitteret ud af?
  2. Designing On The Grid - Hvordan man faktisk lægger ting ud på nettet.
  3. Kreativ fleksibilitet - At vide, hvordan man bøjer gitteret til din vilje
  4. Baseline - Den anden del af et gittersystem, der gør vidundere for lodret rytme.

Et advarsel - Denne vejledning er mere rettet mod responsiv webdesign og drejer sig om et flydende 12-søjles gitter, men gitterprincipperne kan anvendes på tværs af enhver digital ting, du designer. Lad os dykke ind.

Grid Guts

Gitteret består af to hovedkomponenter - Søjler og tagrender. Sammen udgør de den vandrette bredde på din skærm, og de arbejder sammen, men der er et par regler, du skal vide.

Det vigtigste er, at søjler er et lykkeligt sted, hvor dine designelementer kan begynde og slutte, og tagren er en farlig kløft, du ønsker at undgå. Enkelt nok, ikke?

Nu hvor vi har fået det grundlæggende i gitteret ud af vejen, så lad os komme ind på at designe det.

Design på nettet

For at "justere gitteret", der henviser til det vandrette gitter af søjler og tagrender, skal objekter og typografi uden for en overordnet beholder altid begynde og slutte på kanten af ​​en søjle. I dette første billede ser disse rektangler uskyldige ud.

Åh, se bare dem. Bare at være rektangler.

Men når vi afslører gitteroverlejringen i Sketch, OH THE TREACHERY. Vores ven, det lille rektangel, er ikke på nettet. Som du kan se ovenfor, begynder og ender venstre og højre kanter af det lille rektangel i rennen, mens det større rektangel kanter begynder og slutter i en søjle. Det rektangel ved hvad der sker.

HVOR VOVER DU.

Kreativ fleksibilitet

Jeg ved, at nogle af jer måske tænker, at gitteret virker temmelig begrænsende, og helt sikkert, der er regler, men der er også måder at bøje disse regler lidt på, hvilket kan være ekstremt befriende. Her er et af mine yndlingscitater, som fru Vivona, min gymnasielærelærer sagde til mig:

"Du kan ikke handle, før du kender dine linjer."

Hun sagde altid, at vi ikke rigtig kan være skuespillere, før vi lærte vores linjer koldt. Hvordan kunne vi være virkelig kreative og bringe vores personligheder ind i en rolle, hvis vi altid tænkte over, hvad vi skal sige næste?

For gitter betyder det, at du ikke kan begynde at eksperimentere, skubbe grænserne eller tilføre din egen stil ind i dine design, før du lærer begrænsningerne. Så bliv vild, og design dine hjerter ud, men husk reglerne.

Husk dette, når det drejer sig om at bøje disse regler - Så længe din forældrebeholder er på nettet, kan de ting inde i beholderen have en vis fleksibilitet. Her er hvad jeg mener:

Se det? I ovenstående eksempel er begge disse designelementer teknisk set på nettet. Teksten i sig selv er ikke på det horisontale gitter, men dens overordnede beholder er, hvilket gør det okay.

Basislinjenettet

Ud over den vandrette rytme, du opretter med søjler og tagrender, er der en lodret justering og rytme, som du skal oprette ved hjælp af et baseline-gitter.

En basislinje er en forudmålt trinvis højde, som alle objekter og typografi skal tilpasses. Hos Filament bruger vi en 7px basislinje, fordi 28 px for os er en behagelig, læsbar linjehøjde til en 16pt basefont. Andre bruger en grundlinje på 8 eller 5 gange, afhængigt af deres præference eller platformen, de designer til. Efter vores erfaring fungerer en basislinje på 7 eller 8 eller x stor.

At tilpasse designelementer som billeder eller containere til basislinien betyder, at deres højder er en multipel af basisværdien - i dette tilfælde 7px. For typografi betyder det, at liniehøjden for det pågældende skrifttype er et multiplum af basisværdien - så liniehøjden kan være 7, 14, 21, 28, 35 osv. Det er vigtigt at bemærke, at skrifttypestørrelsen ikke behøver at være være en multipel af basislinjen, kun liniehøjden.

Gå videre og design

Gitter behøver ikke at være panikfremmende. Faktisk kan de være temmelig utrolige, når du først har forstået det grundlæggende om, hvordan du bruger dem, og jo mere du arbejder med gitteret, jo bedre er det med at bøje det til din vilje. Du har det her. Jeg ser frem til at høre om dine succeshistorier i gitteret i kommentarerne.

Følg mig på Twitter
Fandt dette nyttigt? Et nedenfor vil hjælpe andre med at finde det også.

Dette indlæg blev oprindeligt vist på Filament Blog