Geometrisk design: rutenett, former og mønsterideer

Geometrisk design bygger bilder av regelmessige former (sirkler, kvadrater, trekanter og rette linjer) plassert på et rutenett. Det er språket til Bauhaus, de sveitsiske plakatene, art deco og de fleste moderne logoer. Det føles ordnet, selvsikkert og tidløst fordi reglene er synlige: ting står på linje, gjentas og henger sammen. Her ser du hvordan du setter opp rutenettet, velger former med vilje og lager geometriske mønstre, blant annet flere du kan tegne i ren CSS.

Start med et rutenett

Former alene gjør ikke et design geometrisk; det er justeringen som gjør det. Et rutenett gir hvert element en plass: marger rundt kanten, kolonner over flaten og mellomrom mellom dem. Når det først finnes, festes hver sirkel, hver blokk og hver tekstlinje til det, og hele designet begynner å føles bygget.

Mesterne i denne tilnærmingen var de sveitsiske designerne på 1950- og 1960-tallet, og plakatene deres ser fortsatt aktuelle ut. Sveitsisk design forklarer metodene deres, og Bauhaus-design viser hvor kjærligheten til sirkel, kvadrat og trekant begynte.

Velg former med vilje

Hver grunnform har assosiasjoner som brukes mye i designundervisning, selv om ingen av dem er absolutte. Se på dem som tendenser, og la fargen og sammenhengen gjøre resten.

• Sirkel: hel, vennlig, fokusert. Fin for å fremheve én ting, som en dato eller et ansikt.
• Kvadrat og rektangel: stabil, ærlig, strukturell. Den naturlige rammen for tekst og bilder.
• Trekant: retningsbestemt og energisk. Leder blikket og antyder bevegelse eller spenning.
• Linje og stripe: rytme og fart. Vannrett føles rolig, diagonalt føles dynamisk.
• Halvsirkel og kvartsirkel: myker opp et strengt oppsett og forblir likevel geometrisk, en favoritt på moderne plakater.

Ideer til geometriske mønstre

Mønstre er geometrisk design på sitt mest synlige. Klassikerne er striper, ruter, prikker, stråler, ringer, sikksakk og linjenett. Hold deg til to eller tre farger, velg én skala, og bestem om mønsteret er hovedpersonen (en plakat, et gavepapir) eller en stille bakgrunn, og i så fall senker du kontrasten kraftig.

Art deco tok i bruk stråler, vifter og trappeformer i gull og svart; Memphis brøt rutenettet med krusseduller og konfetti. Art deco-design og Memphis-design er begge rike kilder hvis du vil ha et mønster med preg av en bestemt epoke.

Ruter, prikker og rutenett i CSS

Noen mønstre trenger at flisstørrelsen settes for seg med background-size, slik at de gjentas over hele elementet. Disse tre er de mest etterspurte. Artikkelen om CSS-mønstre har mange flere, og repeterende lineære gradienter forklarer harde stopp i detalj.

/* Checkerboard: one conic gradient, tiled */
.checks {
  background: repeating-conic-gradient(#111827 0 25%, #f3f4f6 0 50%) 0 0 / 48px 48px;
}

/* Polka dots */
.dots {
  background-color: #fef3c7;
  background-image: radial-gradient(circle, #b45309 6px, transparent 7px);
  background-size: 32px 32px;
}

/* Graph paper grid */
.grid {
  background-color: #f8fafc;
  background-image:
    linear-gradient(#cbd5e1 1px, transparent 1px),
    linear-gradient(90deg, #cbd5e1 1px, transparent 1px);
  background-size: 24px 24px;
}

Geometriske designideer å prøve denne uken

• Én stor sirkel: en enkelt sirkel som fyller halve plakaten, med datoen for arrangementet satt inni.
• Stripekant: et bånd med markisestriper langs toppen av en meny eller prisliste, og ikke noe annet mønster.
• Kvartsirkler i hjørnene: en kvartsirkel i hvert hjørne av et kvadratisk innlegg, i to vekslende farger.
• Tall på rutenettet: et enormt tall (et årstall, en pris, et antall dager) justert til venstre kolonne, med liten tekst ved siden av.
• Solstråler bak et produkt: stråler med lav kontrast som stråler ut bak en flaske eller eske på et nettbutikkbanner.
• Notater på millimeterpapir: en karusell med tips på en svak rutenettbakgrunn, med én regel skrevet på hvert bilde.

Hver idé bruker ett geometrisk grep og lar resten være enkelt. Det er som regel nok til å gi et innlegg et tydelig ståsted, og det er lett å gjenta gjennom en hel serie.

Hold geometrisk design lesbart

Tynne striper med høy kontrast kan flimre på skjermen og bli til moiré når en app skalerer bildet ditt, så test i den størrelsen folk faktisk ser det. Geometrisk orden passer også godt sammen med ett mykt element: én enkelt organisk form på et strengt rutenett gir varme uten å bryte systemet. I Gradiently kan Designer sette opp et innlegg på et rent rutenett i merkevarens Mark og lage alle de andre størrelsene ut fra det, så justeringen overlever hvert format.