Geometrisk design: rutnät, former och mönsteridéer

Geometrisk design bygger bilder av regelbundna former (cirklar, kvadrater, trianglar och raka linjer) placerade i ett rutnät. Det är Bauhaus språk, de schweiziska affischernas, art déco och de flesta moderna logotyper. Det känns ordnat, självsäkert och tidlöst eftersom reglerna syns: saker linjerar, upprepas och hänger ihop. Här går vi igenom hur du sätter upp rutnätet, väljer former med avsikt och gör geometriska mönster, bland annat flera som du kan rita i ren CSS.

Börja med ett rutnät

Former ensamma gör inte en design geometrisk, det gör linjeringen. Ett rutnät ger varje element en plats: marginaler runt kanten, kolumner tvärs över ytan och mellanrum emellan. När det finns fäster sig varje cirkel, block och textrad vid det, och hela designen börjar kännas byggd.

Mästarna i det här förhållningssättet var de schweiziska formgivarna på 1950- och 1960-talen, vars affischer fortfarande ser aktuella ut. Schweizisk design går igenom deras metoder, och Bauhaus-design visar var kärleken till cirkel, kvadrat och triangel började.

Välj former med avsikt

Varje grundform bär associationer som ofta används i designundervisning, men ingen är absolut. Se dem som tendenser och låt färg och sammanhang göra resten.

• Cirkel: fullständig, vänlig, fokuserad. Bra för att lyfta fram en enda sak, som ett datum eller ett ansikte.
• Kvadrat och rektangel: stabil, ärlig, strukturell. Den naturliga behållaren för text och bilder.
• Triangel: riktad och energisk. Leder ögat, antyder rörelse eller spänning.
• Linje och rand: rytm och fart. Vågrätt känns lugnt, diagonalt känns dynamiskt.
• Halvcirkel och kvartscirkel: mjukar upp en sträng layout men förblir geometriska, en favorit på moderna affischer.

Idéer till geometriska mönster

Mönster är geometrisk design när den syns som mest. Klassikerna är ränder, rutor, prickar, strålar, ringar, sparrar och rutnät av linjer. Håll dig till två eller tre färger, välj en skala och avgör om mönstret är hjälten (en affisch, ett omslagspapper) eller en stilla bakgrund, och sänk i så fall kontrasten rejält.

Art déco tog strålar, solfjädrar och trappstegsformer i guld och svart, medan Memphis bröt rutnätet med slingor och konfetti. Art déco-design och Memphis-design är båda rika källor om du vill ha ett mönster med en tidsepoks känsla.

Rutor, prickar och rutnät i CSS

Vissa mönster behöver sin rutstorlek satt separat med background-size, så att de upprepas över ett helt element. Dessa tre är de som efterfrågas mest. Artikeln om css-mönster har många fler, och repeterande linjär gradient förklarar hårda 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;
}

Geometriska designidéer att prova den här veckan

• En stor cirkel: en enda cirkel som fyller halva affischen, med eventets datum satt inuti.
• Randig kant: ett band av markisränder längs överkanten på en meny eller prislista, inget annat mönstrat.
• Kvartscirklar i hörnen: en kvartscirkel i varje hörn på ett kvadratiskt inlägg, i två omväxlande färger.
• Siffra i rutnätet: en jättesiffra (ett år, ett pris, ett antal dagar) linjerad mot vänstra kolumnen, med liten text bredvid.
• Solstrålar bakom en produkt: lågkontrastiga strålar som strålar ut bakom en flaska eller ask på en butiksbanner.
• Anteckningar på rutpapper: en tipskarusell mot en svag rutnätsbakgrund, där varje bild har en regel skriven på sig.

Varje idé använder ett enda geometriskt grepp och låter resten vara enkelt. Det räcker oftast för att ge ett inlägg en tydlig hållning, och det är lätt att upprepa genom en hel serie.

Håll geometriska designer läsbara

Fina, högkontrastiga ränder kan flimra på skärmar och bli moaré när en app ändrar storlek på din bild, så testa i den storlek som folk faktiskt ser. Geometrisk ordning passar också bra ihop med ett mjukt inslag: en enda organisk form på ett strängt rutnät tillför värme utan att bryta systemet. I Gradiently kan Designer lägga ut ett inlägg på ett rent rutnät i ditt varumärkes Mark och göra alla andra storlekar utifrån det, så att linjeringen överlever varje format.