Design med hvit bakgrunn: når tomrom er det beste valget

Design med hvit bakgrunn er det beste valget når det som ligger oppå, fortjener all oppmerksomheten: et produkt, et foto, et langt avsnitt, en enkelt setning som skal treffe. Det mislykkes når hvitt velges som standard, for da virker det som en side ingen gjorde ferdig. Forskjellen ligger i tre valg: hvilken hvittone, hvor mye luft og én liten detalj som forteller betrakteren at tomrommet er tilsiktet.

Når en hvit bakgrunn er riktig valg

Hvitt har ingen egen stemning, og det er styrken. Det holder seg i bakgrunnen. Dermed er det en naturlig bunn for alt som har sin egen farge eller tekstur, og den dårligste bunnen for noe som trenger atmosfære for å fungere.

Hvis designet ditt hører hjemme på høyre side av tabellen, fungerer en myk fargebunn eller en dempet gradient vanligvis bedre. Minimalistiske bakgrunner dekker rolige alternativer utover hvitt, og design i mørk modus dekker den andre enden.

Velg brukket hvitt fremfor rent hvitt

Rent #ffffff er det lyseste en skjerm kan vise. Som fotobakgrunn er det fint; på en side noen leser i to minutter, blender det. Brukket hvitt demper lysstyrken litt og gir siden en temperatur. Varme hvittoner føles trykte, rolige og menneskelige. Kjølige hvittoner føles kliniske, tekniske og presise. Velg den som passer det du selger.

Gi ordene plass

Luft er ikke det som blir til overs. Det er et valg i oppsettet, og det virker bare bevisst når det er romslig. En praktisk regel: marger på minst 8 prosent av den korteste siden, altså 86 px på et innlegg i 1080×1350, og mer avstand mellom grupper enn inni dem. En overskrift, en kort linje under og en liten detalj nederst er nok til ett innlegg.

Hierarki betyr mer på hvitt enn noe annet sted, fordi ingen farge leder blikket. Bruk størrelse og vekt til å rangere ordene, som beskrevet i visuelt hierarki, og hold deg til én skriftfamilie hvis du kan.

Tekstfarge på hvit bakgrunn

Rent svart på rent hvitt gir den høyeste kontrasten en skjerm kan vise, mer enn lesing krever, og kan virke hardt. En nesten svart tone med et hint av bakgrunnens temperatur, som #1c1917 på varmt hvitt eller #0f172a på kjølig hvitt, ligger fortsatt godt over alle tilgjengelighetsgrenser. Brødtekst bør ha et kontrastforhold på minst 4,5:1; fargekontrast og tilgjengelighet forklarer hvordan du sjekker det.

Unngå at en hvit bakgrunn virker uferdig

Risikoen med hvitt er at det ser ut som en tom flate fremfor en valgt flate. Én rolig detalj er nok til å løse det. Velg én, ikke alle.

• Svakt korn med svært lav styrke, slik at hvitt oppfattes som en overflate. Se korntekstur.
• Mykt lys i et hjørne, varmt hvitt som glir over i en litt dypere kremtone i ett hjørne.
• En hårfin linje eller tynn kant i blekkfargen din, noen få piksler bred.
• Én aksentfarge brukt én gang, på en pris, en dato eller en knapp.
• En papirfølelse for trykte eller håndverksbaserte merkevarer; papirtekstur viser hvordan.

Hvit bakgrunn i CSS

På nett setter du brukket hvitt én gang som en variabel, slik at alle seksjoner deler tonen, og gir bilder en tilsvarende bakgrunn så produktbilder på rent hvitt ikke vises som bokser mot papirfargen.

:root {
  --paper: #faf7f2;
  --ink: #1c1917;
  --rule: #e7e1d8;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

/* Product photos shot on pure white: blend them into the paper */
.product img {
  mix-blend-mode: multiply;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
}

Hvis du vil ha et hvitt uttrykk med litt mer karakter, er de lyse Marks i Gradiently et godt sted å begynne: myke, bleke bunner med ekte materiale og lys, der det roligste feltet flytter seg bak ordene og Auto-tekstfarge holder hver linje mørk nok til å lese. Det er gratis å designe med enhver Mark ingen har sikret seg; sikre deg den du liker når du er klar til å eksportere.