Geometrisk design: gitre, former og mønsterideer

Geometrisk design bygger billeder af regelmæssige former (cirkler, firkanter, trekanter og lige linjer) placeret på et gitter. Det er Bauhaus' sprog, de schweiziske plakaters, art deco's og de fleste moderne logoer. Det føles ordnet, selvsikkert og tidløst, fordi reglerne er synlige: tingene flugter, gentages og hører sammen. Her er, hvordan du sætter gitteret op, vælger former med vilje og laver geometriske mønstre, bl.a. flere du kan tegne i ren CSS.

Start med et gitterlayout

Former alene gør ikke et design geometrisk, det gør flugtning. Et gitter giver hvert element sin plads: marginer langs kanten, kolonner henover billedet og mellemrum imellem. Når det først er der, falder hver cirkel, blok og tekstlinje på plads efter det, og hele designet begynder at føles bygget.

Mestrene i denne tilgang var de schweiziske designere i 1950erne og 1960erne, hvis plakater stadig ser aktuelle ud. Schweizisk design gennemgår deres metoder, og Bauhaus-design viser, hvor kærligheden til cirkel, firkant og trekant begyndte.

Vælg former med vilje

Hver grundform bærer på associationer, som ofte bruges i designundervisning, selv om ingen af dem er absolutte. Brug dem som tendenser, og lad farve og sammenhæng klare resten.

• Cirkel: komplet, venlig, fokuseret. God til at fremhæve én ting, som en dato eller et ansigt.
• Firkant og rektangel: stabil, ærlig, struktureret. Den naturlige ramme om tekst og billeder.
• Trekant: retningsgivende og energisk. Leder øjet, antyder bevægelse eller spænding.
• Linje og stribe: rytme og fart. Vandret virker rolig, diagonal virker dynamisk.
• Halvcirkel og kvartcirkel: blødgør et strengt layout og forbliver geometrisk, en favorit på moderne plakater.

Ideer til geometriske mønstre

Mønstre er geometrisk design på sit mest synlige. Klassikerne er striber, tern, prikker, stråler, ringe, chevrons og net af linjer. Hold dig til to eller tre farver, vælg én skala, og beslut, om mønsteret er helten (en plakat, gavepapir) eller en rolig baggrund, og sænk i så fald kontrasten kraftigt.

Art deco brugte stråler, vifter og trappeformer i guld og sort, mens Memphis brød gitteret med snirkler og konfetti. Art deco-design og Memphis-design er begge rige kilder, hvis du vil have et mønster med præg af en bestemt tid.

Tern, prikker og gitre i CSS

Nogle mønstre kræver, at flisens størrelse sættes for sig med background-size, så de gentages over hele elementet. Disse tre efterspørges mest. Artiklen om css-mønstre har mange flere, og repeating linear gradient forklarer hårde stop i detaljer.

/* 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 at prøve i denne uge

• Én stor cirkel: en enkelt cirkel, der fylder halvdelen af en plakat, med begivenhedens dato inde i den.
• Stribekant: et bånd af markisestriber langs toppen af et menukort eller en prisliste, og intet andet med mønster.
• Kvartcirkelhjørner: en kvartcirkel i hvert hjørne af et kvadratisk opslag, i to skiftende farver.
• Tal på gitteret: et kæmpe tal (et årstal, en pris, et antal dage) flugtet til venstre kolonne, med lille tekst ved siden af.
• Solstråler bag et produkt: lavkontrast-stråler, der stråler ud bag en flaske eller æske på et butiksbanner.
• Noter på linjepapir: en karrusel med tips på en svag gitterbaggrund, hvor hvert slide har én regel skrevet på.

Hver idé bruger ét geometrisk greb og lader resten være enkelt. Det er som regel nok til at give et opslag et klart udtryk, og det er nemt at gentage gennem en hel serie.

Hold geometriske designs læsbare

Fine striber med høj kontrast kan flimre på skærme og blive til moiré, når en app skalerer dit billede, så test i den størrelse, folk faktisk ser. Geometrisk orden passer også godt sammen med ét blødt element: en enkelt organisk form på et strengt gitter giver varme uden at bryde systemet. I Gradiently kan Designer lægge et opslag ud på et rent gitter i dit brands Mark og lave alle de andre størrelser ud fra det, så flugtningen overlever hvert format.