Design med hvid baggrund: når tom plads er det bedste valg

Design med hvid baggrund er det bedste valg, når det, der ligger ovenpå, fortjener al opmærksomheden: et produkt, et fotografi, et langt afsnit, en enkelt sætning, der skal ramme. Det fejler, når hvid vælges som standard, for så ligner det en side, ingen gjorde færdig. Forskellen kommer ned til tre beslutninger: hvilken hvid, hvor meget plads og én lille detalje, der fortæller beskueren, at tomheden er med vilje.

Hvornår en hvid baggrund er det rigtige valg

Hvid har ingen stemning i sig selv, og det er dens styrke. Den træder til side. Det gør den til den naturlige bund for alt med sin egen farve eller tekstur og den dårligste bund for alt, der har brug for atmosfære for at bære.

Hører dit design til højre i tabellen, vil en blød farvebund eller en blid gradient som regel tjene det bedre. Minimalistiske baggrunde dækker stille muligheder ud over hvid, og design til dark mode dækker den modsatte ende.

Vælg en råhvid, ikke helt hvid

Helt hvid #ffffff er det lyseste, en skærm kan vise. Som baggrund til et foto er det fint; til en side, nogen læser i to minutter, blænder den. En råhvid sænker lysstyrken en smule og giver siden en temperatur. Varme hvide føles trykte, rolige og menneskelige. Kølige hvide føles kliniske, tekniske og præcise. Vælg den, der passer til det, du sælger.

Giv ordene luft

Hvid plads er ikke det, der er tilbage. Det er en layoutbeslutning, og den virker kun bevidst, når den er generøs. En praktisk regel: marginer på mindst 8 procent af den korteste side, altså 86 px på et opslag i 1080×1350, og mere plads mellem grupper end inden i dem. En overskrift, en kort linje under den og en lille detalje nederst er rigeligt til ét opslag.

Hierarki betyder mere på hvid end noget andet sted, fordi der ingen farve er til at lede øjet. Brug størrelse og vægt til at rangere ordene, som beskrevet i visuelt hierarki, og hold dig til én skriftfamilie, hvis du kan.

Tekstfarve på en hvid baggrund

Helt sort på helt hvid har den højeste kontrast, en skærm kan vise, hvilket er mere, end læsning kræver, og det kan føles hårdt. En næsten sort med et strejf af baggrundens temperatur, som #1c1917 på en varm hvid eller #0f172a på en kølig, klarer stadig alle krav til tilgængelighed med god margen. Hold et kontrastforhold på mindst 4,5:1 til brødtekst; farvekontrast og tilgængelighed forklarer, hvordan du tjekker det.

Sådan undgår du, at en hvid baggrund ser ufærdig ud

Risikoen ved hvid er, at den ligner et tomt lærred frem for et valgt. Én stille detalje er nok til at løse det. Vælg én, ikke dem alle.

• Et svagt korn i meget lav styrke, så den hvide læses som en overflade. Se korntekstur.
• Et blødt lys i et hjørne, en varm hvid, der toner over i en lidt dybere creme i ét hjørne.
• En hårfin streg eller en tynd kant i din blækfarve, få pixels bred.
• Én accentfarve brugt én gang, på en pris, en dato eller en knap.
• En papirfornemmelse til trykte eller håndværksbrands; papirtekstur viser hvordan.

En hvid baggrund i CSS

På nettet sætter du den råhvide én gang som en variabel, så alle sektioner deler den, og giver billeder en matchende baggrund, så produktfotos på helt hvid ikke vises som bokse mod din papirfarve.

: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);
}

Vil du have et hvidt look med lidt mere karakter, er de lyse Marks i Gradiently et godt sted at starte: bløde, blege bunde med ægte materiale og lys, hvor det roligste område flytter ind bag dine ord, og Auto-blæk holder hver linje mørk nok til at kunne læses. Det er gratis at designe med enhver Mark, som ingen har sikret sig; sikr dig den, du kan lide, når du er klar til at eksportere.