Vit bakgrund i design: när tomt utrymme är det bästa valet

Design med vit bakgrund är det bästa valet när det som ligger ovanpå förtjänar all uppmärksamhet: en produkt, ett fotografi, ett långt stycke, en enda mening som måste sitta. Det misslyckas när vitt väljs av gammal vana, för då ser det ut som en sida som ingen blev klar med. Skillnaden kommer ner till tre beslut: vilken vit ton, hur mycket luft och en liten detalj som visar att tomheten var avsiktlig.

När en vit bakgrund är rätt val

Vitt har ingen egen stämning, och det är dess styrka. Det går ur vägen. Därför är det den naturliga grunden för allt som har egen färg eller struktur, och den sämsta grunden för allt som behöver atmosfär för att bära.

Om din design hör hemma i högerspalten passar en mjuk färgbotten eller en len gradient oftast bättre. Minimalistiska bakgrunder går igenom stillsamma alternativ bortom vitt, och mörkt läge i design tar upp motsatsen.

Välj en off-white, inte ren vit

Ren #ffffff är det ljusaste en skärm kan visa. Som bakgrund bakom ett foto går det bra; för en sida som någon läser i två minuter bländar den. En off-white sänker ljusstyrkan något och ger sidan en temperatur. Varma vita toner känns tryckta, lugna och mänskliga. Svala vita toner känns kliniska, tekniska och exakta. Välj den som passar det du säljer.

Ge orden luft

Tomrum är inte det som blir över. Det är ett layoutbeslut, och det ser bara avsiktligt ut när det är generöst. En praktisk tumregel: marginaler på minst 8 procent av kortsidan, alltså 86 px på ett inlägg på 1080×1350, och mer utrymme mellan grupper än inuti dem. En rubrik, en kort rad under och en liten detalj längst ner räcker gott för ett inlägg.

Hierarki betyder mer på vitt än någon annanstans, eftersom ingen färg leder blicken. Använd storlek och vikt för att rangordna orden, som beskrivs i visuell hierarki, och håll dig till en typsnittsfamilj om du kan.

Textfärg på vit bakgrund

Ren svart på ren vit har det högsta kontrast en skärm kan visa, vilket är mer än läsning behöver och kan kännas kärvt. Ett nästan-svart med en nyans av bakgrundens temperatur, som #1c1917 på en varm vit eller #0f172a på en sval, klarar ändå varje tillgänglighetsgräns med marginal. För brödtext ska kontrastförhållandet vara minst 4,5:1; färgkontrast och tillgänglighet visar hur du kontrollerar det.

Så ser en vit bakgrund inte ofärdig ut

Risken med vitt är att det ser ut som en tom duk i stället för en vald. En enda stillsam detalj räcker för att rätta till det. Välj en, inte alla.

• Ett svagt korn med mycket låg styrka, så att vitt läses som en yta. Se kornstruktur.
• Ett mjukt hörnljus, en varmvit som tonar mot en något djupare gräddton i ett hörn.
• En hårfin linje eller tunn ram i din bläckfärg, ett par pixlar bred.
• En accentfärg som används en gång, på ett pris, ett datum eller en knapp.
• En papperskänsla för tryckta eller hantverksmässiga varumärken; papperstextur visar hur.

En vit bakgrund i CSS

På webben sätter du off-white en gång som en variabel så att alla sektioner delar den, och ger bilderna en matchande bakgrund så att produktbilder på ren vit inte syns som rutor mot din papperston.

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

Vill du ha en vit känsla med lite mer karaktär är ljusa Marks i Gradiently ett bra ställe att börja: mjuka, bleka grunder med riktigt material och ljus, där den lugnaste ytan flyttar sig bakom dina ord och Auto-bläck håller varje rad tillräckligt mörk för att läsas. Du kan designa med vilken osäkrad Mark som helst gratis; säkra den du gillar när du är redo att exportera.