Valkoinen tausta: milloin tyhjä tila toimii parhaiten

Valkoinen tausta on paras valinta, kun sen päällä oleva sisältö ansaitsee kaiken huomion: tuote, valokuva, pitkä kappale tai yksi vaikuttava lause. Oletusvalintana valkoinen voi näyttää sivulta, jota kukaan ei viimeistellyt. Ero syntyy kolmesta päätöksestä: valkoisen sävystä, tilan määrästä ja yhdestä pienestä yksityiskohdasta, joka kertoo tyhjyyden olevan tarkoituksellista.

Milloin valkoinen tausta on oikea valinta

Valkoisella ei ole omaa tunnelmaa, ja juuri siinä on sen vahvuus. Se antaa sisällölle tilaa. Siksi se sopii luonnostaan sisällölle, jolla on oma väri tai tekstuuri, mutta heikosti sisällölle, joka tarvitsee tunnelmaa tuekseen.

Jos ulkoasusi kuuluu taulukon oikealle puolelle, pehmeä väripohja tai hillitty liukuväri palvelee sitä yleensä paremmin. Minimalistiset taustat esittelee rauhallisia vaihtoehtoja valkoiselle, ja tumman tilan suunnittelu käsittelee toista ääripäätä.

Valitse sävytetty valkoinen

Puhdas #ffffff on kirkkain väri, jonka näyttö voi esittää. Valokuvan taustana se toimii, mutta kahden minuutin lukemiseen se on häikäisevä. Hieman sävytetty valkoinen laskee kirkkautta ja antaa sivulle lämpötilan. Lämpimät valkoiset tuntuvat painetuilta, rauhallisilta ja inhimillisiltä. Viileät valkoiset ovat kliinisiä, teknisiä ja täsmällisiä. Valitse myymääsi tuotteeseen sopiva sävy.

Anna sanoille tilaa

Tyhjä tila ei ole vain ylijäämää. Se on sommittelupäätös, joka näyttää harkitulta vain, jos tilaa on reilusti. Käytännön sääntö: jätä marginaaliksi vähintään 8 prosenttia lyhyemmästä sivusta eli 86 px koossa 1080×1350. Jätä ryhmien väliin enemmän tilaa kuin niiden sisälle. Otsikko, lyhyt rivi sen alla ja pieni yksityiskohta alareunassa riittävät yhteen julkaisuun.

Hierarkia on valkoisella erityisen tärkeää, koska väri ei ohjaa katsetta. Järjestä sanat koon ja vahvuuden avulla, kuten visuaalisen hierarkian oppaassa neuvotaan, ja käytä mahdollisuuksien mukaan yhtä kirjasinperhettä.

Tekstin väri valkoisella taustalla

Puhdas musta puhtaalla valkoisella tuottaa näytön suurimman kontrastin. Lukeminen ei tarvitse niin suurta eroa, ja vaikutelma voi olla kova. Taustan lämpötilaa toistava lähes musta, kuten #1c1917 lämpimällä valkoisella tai #0f172a viileällä, ylittää silti saavutettavuuden raja-arvot reilusti. Leipätekstin kontrastisuhteen on oltava vähintään 4,5:1. Värikontrasti ja saavutettavuus kertoo, miten tarkistat sen.

Viimeistele valkoinen tausta

Valkoinen voi näyttää valitun taustan sijaan tyhjältä työpohjalta. Yksi hillitty yksityiskohta riittää korjaamaan vaikutelman. Valitse yksi näistä, älä kaikkia.

• Hieno rakeisuus hyvin pienellä voimakkuudella saa valkoisen tuntumaan pinnalta. Katso rakeinen tekstuuri.
• Pehmeä kulmavalo: lämmin valkoinen häipyy yhdessä kulmassa hieman syvemmäksi kermansävyksi.
• Hiuksenhieno viiva tai muutaman pikselin levyinen reunus tekstin värissä.
• Yksi korostusväri kerran käytettynä hinnassa, päivämäärässä tai painikkeessa.
• Paperin tuntu painotuotteita tai käsityötä painottaville brändeille. Paperitekstuuri näyttää keinot.

Valkoinen tausta CSS:llä

Määritä verkkosivun sävytetty valkoinen kerran muuttujaksi, jotta jokainen osio käyttää sitä. Sovita myös kuvien taustat siihen, etteivät puhtaan valkoiset tuotekuvat näytä laatikoilta paperinvärisellä sivulla.

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

Jos haluat valkoiseen ilmeeseen hieman enemmän luonnetta, aloita Gradientlyn vaaleista Markeista. Niissä pehmeään, vaaleaan pohjaan yhdistyvät aito materiaali ja valo. Rauhallisin alue siirtyy sanojen taakse, ja Automaattinen muste pitää jokaisen rivin tarpeeksi tummana luettavaksi. Voit suunnitella ilmaiseksi millä tahansa lunastamattomalla Markilla. Lunasta mieleisesi, kun olet valmis viemään työn.