Con su blanca palidez
Hay una enorme cantidad de sitios web en internet y, si te tomas el tiempo de recorrerlos, notarás que el porcentaje con fondo blanco es altísimo. Las razones son variadas, pero sin duda ha habido gente que eligió un fondo blanco liso simplemente porque su ubicuidad y popularidad hacen parecer que es automáticamente lo mejor para cualquier proyecto, y no siempre es el caso.
Por eso aquí desmenuzamos algunas de las razones (simples y complejas) de por qué el diseño web tiende a gravitar hacia el telón blanco. Entender esas motivaciones puede ayudarte a decidir si irte de blanco total es lo correcto o lo incorrecto para tu proyecto.
Códigos del color Blanco
Galería
Una muestra de fondos blancos listos para usar. Pasa el cursor sobre cualquier imagen y presiona el botón de descarga para obtener la versión en resolución completa.
Formas de usar un fondo blanco
Fondo de pantalla: un fondo blanco limpio mantiene tu computadora o celular en calma y legible; cada imagen de arriba se descarga en resolución completa.
Liso y sólido: el estándar detrás de fotos de producto, fotos de identificación y listados; copia un tono exacto más abajo.
Web y diseño: el blanco es el espacio en blanco: es lo que hace que los diseños minimalistas se sientan sin esfuerzo y el contenido se sienta organizado.
Tonos de blanco
El blanco puro es solo el comienzo: la nieve, el marfil, el lino y la perla cargan cada uno una temperatura distinta. Los blancos cálidos (crema, blanco antiguo) se sienten suaves y orgánicos; los fríos (blanco fantasma, bruma azul) se sienten nítidos y técnicos. Lado a lado las diferencias son obvias; por separado, cada uno sigue leyéndose blanco.
Haz clic en un tono para copiar su código hex, o descárgalo como fondo listo para usar:
Fondos blancos con degradado
Un degradado le da a un fondo blanco justo la profundidad suficiente para no sentirse plano. Aquí tienes seis degradados blancos listos para usar. Copia el CSS directo a tu hoja de estilos, o descarga la imagen en resolución completa. ¿Quieres crear el tuyo? Abre CSS Gradient y arma un blanco a tu medida.
Qué significa el blanco
El blanco parece simple hasta que lo pones a trabajar. La accesibilidad, la legibilidad y la cultura entran todas en juego.
Cuestiones de accesibilidad
Posiblemente la explicación más simple de por qué tantos sitios se apoyan en un fondo blanco es algo llamado «el efecto por defecto»: cuando una opción es la predeterminada, la mayoría de la gente la elige sobre todas las demás. Las razones son muchas: hay quien asume que ser la opción por defecto equivale a una recomendación, hay quien se abruma y prefiere no gastar energía mental decidiendo cuando ya existe un valor predeterminado, y la lista sigue. Los desarrolladores web saben que los estilos de CSS y HTML en los navegadores traen el blanco por defecto, así que tienden a quedarse con él. Es como poner papel tapiz blanco sobre una pared ya pintada de blanco.
Legibilidad
Un tema recurrente al hablar de por qué el fondo blanco liso es la norma en el diseño web es que el fondo blanco con texto negro es la cima de la legibilidad. La idea dominante es que, para que un sitio sea fácil de leer, el contraste es la clave, y el contraste suele lograrse emparejando los dos extremos opuestos del espectro.
¿Y por qué texto negro sobre fondo blanco y no al revés? Hay una teoría interesante: desde los primeros días de la escritura hemos usado tinta oscura sobre papel claro (o pergamino, o papiro), y eso persiste hasta hoy: quienes crecimos con libros antes de que hubiera computadoras en casa necesitaríamos ese recordatorio visual de los libros. La teoría no se sostiene del todo si estuviste en los días del texto verde brillante sobre el fondo negro apagado de la Apple IIc familiar. Si la legibilidad es tu única razón para elegir un fondo blanco liso bajo texto negro, es completamente válida. Pero el texto negro sobre telón blanco no es la única opción legible que existe.
Consideraciones culturales del blanco
La psicología del color estudia cómo los colores pueden influir en el comportamiento humano, incluso de forma inconsciente. Es una herramienta invaluable en marketing y branding, porque la reacción de una audiencia a ciertos colores o combinaciones tiene un efecto muy directo en cómo se percibe un producto. Los logotipos y el empaque impactan directamente las ventas, así que no es un salto decir que los colores de tu sitio web pueden ser clave para atraer (o repeler) audiencias. Saber un poco de psicología del color te ayuda a no ofender por accidente a clientes potenciales.
Hay quien piensa en el blanco como un color neutro. Puede serlo en diseño de interiores, pero no necesariamente en la web: tu sitio puede llegar a personas de todo el mundo, así que vale la pena pensar cómo se perciben tus elecciones de color en culturas distintas de la tuya.
En la mayoría de las culturas occidentales, el blanco significa pureza y paz: por eso encuentras vestidos blancos y palomas blancas en las bodas. Pero en varios países asiáticos, incluidos China y Corea, el blanco simboliza la muerte, el luto y la mala suerte. Mientras en Occidente se viste de negro en los funerales, donde el blanco significa muerte los dolientes tradicionalmente visten de blanco. Como nota aparte, en Italia se suelen dejar crisantemos blancos en las tumbas: el crisantemo es flor de luto en muchos países europeos, así que el crisantemo blanco carga doble simbolismo.
Los colores también se traslapan entre culturas: una bandera blanca es símbolo de tregua en todo el mundo. Y mientras unas culturas ven en el blanco limpieza, otras ven esterilidad: parecen sinónimos, pero la limpieza carga una asociación mucho más positiva. La lección es tener presente quién es tu audiencia y si sus asociaciones con el blanco probablemente sean positivas o negativas, y planear en consecuencia.
Haz que el blanco trabaje para ti
Ahora que leíste por qué la gente gravita hacia el blanco y conoces sus componentes culturales, psicológicos y de diseño, explora el color para tu sitio, tus redes o tus fondos de pantalla. Al final, el diseño se trata de tu estética. Si buscas una sensación pulcra y minimalista, un fondo blanco liso es una gran elección. Y sigue siendo el estándar de oro para blogs y sitios con mucho texto, por el factor de legibilidad.
Un fondo blanco liso no es tu única opción. Puedes jugar con nuestra herramienta Trianglify y crear un fondo blanco con textura, con tonos variados de blanco y blanco roto, para un efecto sutil de blanco sobre blanco. Un wallpaper de degradado CSS con blancos y grises claros es otro giro divertido, porque agrega dimensionalidad sin opacar el contenido de tu sitio. Hasta puedes canalizar a tu Mondrian interior y explorar figuras geométricas en un fondo blanco abstracto, jugando con el blanco como color de contraste. Como ya vimos, el blanco no es neutro, así que no tengas miedo de usarlo para expresarte igual que con cualquier otro color.
Significado histórico en el arte
El diseño web es un arte en sí mismo, así que tiene sentido mirar cómo se ha usado el blanco en el arte a lo largo de los años en busca de inspiración. (Vale la pena notar que muchos museos y galerías usan paredes blancas como telón para las piezas que exhiben, lo que puede servirte de metáfora si tu proyecto es pesado en imágenes.)
Las cuevas de Lascaux, en Francia, conservan dibujos de hace unos 17 000 años, hechos principalmente con carbón y hierro que los propios artistas prehistóricos preparaban. También usaron calcita y gis para crear telones blancos o marcar brillos contra el pigmento oscuro. Hace ya varios milenios, nuestros predecesores sabían lo que seguimos sabiendo: para causar impacto, el contraste es la clave. Y no estaban solos: en la antigua Grecia se veía el mundo en oscuridad y luz, y su arte cargaba fuerte el contraste entre negro y blanco (aunque, con solo cuatro colores en uso, quizá no fue una decisión enteramente de diseño).
Quizá el uso más interesante del blanco en el arte vino del pintor holandés Piet Mondrian, pionero de la abstracción del siglo XX. Al pensar en él, probablemente recuerdas obras como la Composición con gran plano rojo, amarillo, negro, gris y azul de 1921, parte de su serie definitivamente abstracta que cambió el mundo del arte. Limitó su paleta a los tres colores primarios, más negro, blanco y gris. Seguro puedes imaginar las líneas negras austeras que dividen el cuadro en rectángulos, y hasta los grandes cuadros de un rojo decidido y los más pequeños de amarillo mantequilla. Pero si lo miras otra vez, verás cuánto trabajo hace el blanco en la pieza. El fondo blanco es lo que aporta el contraste y el drama.
Colofón
Aunque Cool Backgrounds es un buen recurso para generar imágenes a partir de librerías populares de JavaScript, el verdadero trabajo pesado corre a cargo de los propios autores de las librerías. En cuanto a la atención al cliente, Quinn Rohlf, de Trianglify.js, responde con una rapidez increíble y, además, es un tipo muy inteligente. Particle.js está desarrollado por Marc Brüderlin, con una API estupenda, y se mantiene de forma activa. Gradient Topography es un proyecto recién creado por mí como respuesta al trabajo increíble del equipo de Codrops. Y, por supuesto, Unsplash es uno de los mejores tesoros de internet de todos los tiempos, creado por el antiguo equipo de Crew como proyecto paralelo.
Ah, sí, y no puedo olvidarme de CSS Gradient y Rellax.js, que es el «cool background» que impulsa esas formas de paralaje deslizantes en la sección de contenido de este sitio.