La fórmula aceptada para el diseño de un sitio web es un fondo blanco, texto negro o gris oscuro y colores de la marca esparcidos generosamente por todas partes. La gran mayoría de los sitios web de alto rendimiento utilizan esta fórmula con gran efecto. Pero, ¿es la única fórmula que puede tener éxito? En este artículo, vamos a profundizar en la creación de un diseño con un fondo oscuro, y por qué a veces es mejor usar este concepto, porque, a veces, los sitios web con fondos oscuros pueden Superar blanco.
Inicie un tema de WordPress, SquareSpace, Webflow, Weebly o una de las muchas otras herramientas de diseño web y automáticamente cargará una página con fondo blanco con texto negro. Puede cambiarlo, por supuesto, pero esta combinación es la norma percibida.
No tiene por qué serlo.
Cuando se hace bien, un fondo oscuro para un sitio web puede funcionar mejor de lo que cree.
La primera preocupación de cualquier diseño web es ¿qué quiere el usuario? ¿Qué colores se adaptan al medio, la marca, el uso previsto, el público objetivo y qué funcionaría en los dispositivos que se utilizan para acceder al sitio?
La mayoría de los clientes asumen que será un fondo blanco con fuentes sans serif negras u oscuras. Esa suposición puede no ser tan en blanco y negro (juego de palabras).
¿Por qué blanco?
Hay dos razones principales por las que la combinación de negro sobre blanco se considera la norma.
Pero esto en realidad tiene sus raíces en la historia: impresión y legibilidad.
Cuando hacíamos todo en papel, el color blanquecino del papel significaba que era más fácil utilizar el negro para la tinta en lugar de colorear el papel. Tu necesitas less tinte y fue un trabajo mucho más limpio y más fácil. Aquellos primeros folletos impresos fueron tinta negra sobre papel liviano y los medios impresos se mantuvieron así.
La otra razón es la legibilidad. Para muchos usuarios, especialmente aquellos en dispositivos móviles, el blanco sobre la oscuridad no siempre se lee bien. Aquellos con discapacidades visuales como astigmatismo tienen dificultad para discernir el texto blanco sobre un fondo oscuro. Cualquier cosa que haga que la pupila se expanda como lo hace una pantalla oscura significa que la discapacidad se amplifica, lo que hace que la página sea muy difícil de leer.
Sin embargo, un gran diseño puede superar estas deficiencias y puede tener un impacto, transmitir emoción e influir en el visitante de una manera que un fondo blanco simplemente no puede.
Lo que necesita saber sobre los fondos oscuros
Digo mucho aquí oscuro y no negro.
El negro es la opción obvia para un fondo oscuro para un sitio web, pero no es su única opción. Hay miles de variantes de fondos oscuros y el negro es solo una de ellas. El rojo oscuro, verde oscuro, azul oscuro y otros pueden funcionar con el diseño correcto en la situación correcta.
Hay muchos aspectos del uso del color en el diseño y no voy a trabajar con todos ellos aquí. Solo me voy a concentrar en los aspectos que pertenecen a los fondos oscuros.
Percepción visual de la oscuridad
Una encuesta muy citada realizada por ProBlogger en 2009 nos mostró que los usuarios de la web no están tan a favor de los fondos blancos como podríamos pensar inicialmente.
Aunque ahora tiene diez años, la encuesta encontró que solo el 47% de los encuestados preferían fondos siempre claros. Otro 36% dijo que depende del blog, el 10% dijo que prefería siempre oscuro y el 7% no podía decidir. La mayoría puede preferir un fondo blanco, pero el 43% dijo que le gustaba la oscuridad o que debería depender del diseño general del sitio.
Una encuesta más cuatro años después en CSS-Tricks descubrió que la mayoría de los encuestados prefería el texto claro sobre un fondo oscuro. Para ser claros, esta fue una encuesta sobre el uso de herramientas de codificación y preguntó qué configuración preferían los usuarios de sus editores de código, oscuro sobre blanco o blanco sobre oscuro. De los que respondieron, el 63% prefirió un fondo oscuro.
El aspecto de contraste
El titulado enérgicamenteEl impacto de las combinaciones de colores de fondo y texto de una página web en la legibilidad, la retención, la estética y la intención de comportamiento'es un estudio interesante.
Observó cómo el contraste entre el fondo y los colores del texto dentro de un diseño web era el factor decisivo en su usabilidad y no los colores utilizados. No estamos hablando de estética aquí, puramente de usabilidad.
El estudio encontró que la polarización influía en la legibilidad más que el color real del fondo. Por lo tanto, el blanco sobre negro es tan efectivo como el negro sobre blanco siempre que haya suficiente contraste entre los dos colores, se mantenga la legibilidad, la legibilidad y la facilidad de uso.
El contraste es increíblemente importante en el diseño web.
Algunos sitios web modernos intentan utilizar diseños de bajo contraste con resultados mixtos. Incluso Apple lo han probado con algunas páginas de su propio sitio web.
Las páginas de bajo contraste son más difíciles de leer, no funcionan para las personas con discapacidad visual y requieren más esfuerzo del lector para entenderlas. Nada de eso contribuye a un buen diseño de página.
Esto va en contra del aspecto de contraste y es el lector el que sufre. En mi opinión, no importa mucho si usa oscuro sobre claro o claro sobre oscuro, siempre que la relación de contraste sea lo más amplia posible para mejorar la legibilidad.
El aspecto de la legibilidad
Los fondos oscuros pueden ser la elección de diseño perfecta en algunas situaciones.
Los sitios web con mucho texto no son una de esas situaciones. Si bien el contraste tiene una mayor influencia sobre la legibilidad de una página, la elección del color también influye. Según Jacob Nielsen, el texto negativo, el de texto blanco sobre fondo oscuro, requiere un poco más de esfuerzo para leer y se lee más lento que el texto positivo que es negro sobre fondo blanco.
Aparte de eso, siempre que el contraste entre el texto y el fondo sea suficiente, la legibilidad no se ve afectada.
Yo agregaría un poco a eso. Al decir que el texto en blanco sobre fondos oscuros no afecta la legibilidad, siempre que lo diseñe correctamente.
Para mi eso significa:
- Uso inteligente del espacio vacío entre bloques para evitar fugas de luz.
- Se siguen las reglas de legibilidad adecuadas en términos de oraciones cortas, párrafos cortos, palabras cortas y texto fácilmente digerible.
- Selección de fuente cuidadosa para maximizar la legibilidad en diferentes tamaños de pantalla.
- Mantener el máximo contraste al trabajar con fondos oscuros.
- Evitando degradados y sombreados con fondo oscuro.
La elección de la fuente es importante en cualquier diseño web, pero más aún cuando se trata de fondos oscuros.
Por lo general, seleccionamos fuentes serif porque agregan un toque de clase o elegancia a un diseño y usamos sans serif para la modernidad. Cuando se trata de texto claro sobre un fondo oscuro, la elección se reduce solo a sans serif.
Las fuentes serif pueden funcionar, pero requieren más trabajo por parte del lector para comprenderlas. Eso se agrava cuando se utilizan pantallas más pequeñas o móviles.
El aspecto de la percepción emocional
Todos sabemos que diferentes colores pueden evocar diferentes emociones. Lo sabemos desde hace años y estudios más recientes lo respaldan con evidencia. Sabemos que diferentes combinaciones de colores afectan al cerebro de diferentes maneras y algunos especialistas en marketing piensan que el uso del color por sí solo puede aumentar la conversión.
La psicología del color nos dice que cuando vemos colores, nuestro cerebro indica la liberación de hormonas que pueden hacernos sentir emociones. Los diferentes colores provocan la liberación de diferentes hormonas. lo que puede influir en cómo nos sentimos acerca de algo de un color en particular. Esto se combina con nuestra percepción de lo que significa un color que puede usarse en nuestra contra para marketing y ventas.
Tenemos ideas arraigadas sobre lo que significa un color.
Por ejemplo, negro Se suele asociar como un color potente, erótico, misterioso, formal y elegante. Blanco se siente limpio, fresco, moderno, joven, accesible y familiar. Rojo es atrevida, poderosa, segura y sensual.
Cada color invoca sentimientos diferentes en el lector, por lo que, como diseñadores web, pasamos una cantidad de tiempo desmesurada tratando de encontrar la combinación perfecta y luego aún más tratando de convencer al cliente de que los colores que elegimos funcionarán.
Beneficios de los fondos oscuros
Los fondos oscuros no son adecuados para todos los diseños o proyectos.
Cuando son adecuados, un fondo oscuro puede agregar carácter, impacto, énfasis y alguna respuesta emocional a un diseño web. Ya he cubierto todo eso, así que veamos algunos otros beneficios de usar fondos oscuros en el diseño.
1. Less fatiga visual
Aparentemente, es más fácil leer durante más tiempo cuando se usa un fondo oscuro. Aunque leemos más lento, siempre que la relación de contraste sea lo suficientemente amplia y el diseño sea por lo demás sólido, podemos leer sin fatiga visual durante períodos de tiempo más prolongados.
Sobre el tema de los ojos, los fondos oscuros afectarán el sueño less demasiado. La pantalla contendrá less luz azul / blanca que una página web tradicional. Actualmente, se cree que esta luz azul afecta nuestro ritmo circadiano y afecta nuestro sueño, causa enfermedades e impacta negativamente en nuestra vida diaria.
2. Elegante
Hay una razón por la que todas las mujeres tienen un pequeño vestido negro o por qué las limusinas son negras. Agrega un sentido de estilo y elegancia que es difícil de conseguir en otros lugares. Siempre que el diseño general sea de alta calidad, el uso de fondos oscuros transmite ese sentimiento de inmediato que puede influir en una decisión de compra, crear un vínculo emocional o hacer que el lector se tome más en serio lo que ve.
3. familiaridad
Los sitios web con fondos oscuros solían ser muy raros. Aquellos que vimos a menudo no seguían las reglas de usabilidad en absoluto y no funcionaban bien. Con más interfaces de usuario de programas que usan fondos oscuros, juegos que usan cada vez más fondos oscuros en menús, navegación y escenas de corte y modo nocturno en todo tipo de dispositivos, la oscuridad ya no es tan nicho.
Lo vemos en todas partes. De muchos productos de Adobe, Windows 10 Dark Mode, Mac OS Dark Mode, Adobe Photoshop y Dreamweaver y muchos otros programas líderes.
Ahora que estamos más acostumbrados a ver texto claro sobre fondos oscuros, no sorprende ni impacta negativamente nuestras expectativas como antes.
4. Destaca
Si bien los sitios web con fondos oscuros son cada vez más aceptables, todavía son una minoría. Esto proporciona un elemento de impacto inmediatamente que alguien aterriza en la página. Incluso antes de leer una palabra o escanear una imagen, su página ya está causando una impresión y haciendo que el lector mire con ojos nuevos el diseño.
Siempre que ese diseño se base en esa primera impresión inicial con buena legibilidad, buen uso del espacio y algunas imágenes impactantes, estás en un ganador.
5. Se desvanece en el fondo
Las interfaces de usuario y los fondos oscuros proporcionan ese primer impacto inicial, pero luego pueden desvanecerse silenciosamente en el fondo para que el contenido brille. Esto es más cierto en el diseño de la interfaz de usuario, pero también tiene relevancia en el diseño web. Las imágenes y el contenido cuidadosamente colocados con el nivel de contraste adecuado se destacarán mucho más mientras el fondo en sí desaparece de la vista.
Esto puede ayudar a leer el contenido de la página en entornos con mucha luz, como al aire libre o con mucha luz. En entornos más oscuros, un fondo blanco o claro puede fatigar la vista y dificultar la lectura. En entornos más claros, un fondo oscuro puede ser lo contrario. Si bien no podemos diseñar para entornos específicos, noless un beneficio de un fondo más oscuro que se lee bien a la luz del sol.
Desventajas de usar fondos oscuros
Usar un fondo oscuro en el diseño no es universalmente positivo. Hay algunas desventajas de este estilo y no deben subestimarse.
1. Consideración cuidadosa
Los fondos oscuros no funcionarán para todos los clientes ni para todas las situaciones. Este tema de diseño requiere mucho más pensamiento y planificación que el tradicional fondo claro. También requerirá más pruebas por parte de los usuarios para asegurarse de que el equilibrio sea correcto antes del lanzamiento. No todos los esquemas de marca funcionarán con fondos oscuros. Tampoco todos los productos o temas funcionarán con él.
Algunos clientes todavía perciben los fondos oscuros de la forma en que solíamos hacerlo, de forma negativa. Incluso si está convencido de que un fondo oscuro es el camino a seguir, es posible que le resulte más difícil convencer a su cliente de lo que lo haría si estuviera siguiendo la ruta tradicional.
2. Planificación cuidadosa
Todas las opciones de diseño requieren una cuidadosa planificación, color, fuente e imagen. El uso de fondos oscuros agrega aún más pensamiento a eso. El espacio en blanco / oscuro se vuelve aún más importante para evitar que la luz se filtre en la oscuridad y para garantizar que el texto sea legible. Las imágenes y los elementos de diseño necesitan una separación real para mantenerlos legibles y evitar que la luz o el color se filtren a otras áreas.
El proceso de revelado puede llevar más tiempo con un fondo oscuro debido a esto. Es posible que se requieran más pruebas de usuario y es posible que también sea necesario tener en cuenta más mejoras en la experiencia móvil.
3. Equilibrio cuidadoso
El uso de elementos oscuros dentro de un diseño agrega peso a una página. Demasiado peso y la página puede resultar engorrosa y pesada. Eso es aún más cierto cuando se trata de fondos oscuros. Cada página debe equilibrarse con mucho cuidado para evitar que se sienta pesada y resaltar su elegancia inherente en lugar de su desgana.
Es una pregunta difícil y requerirá mucho refinamiento y mucho espacio en blanco / negro en la página para mantener el equilibrio.
4. Accesibilidad
Un aspecto de los diseños oscuros que no recibe mucha atención es la accesibilidad. Todo diseño web debe tener en cuenta la accesibilidad en las primeras etapas de planificación. Afortunadamente, siempre que siga las reglas generales de alto contraste entre el texto y el fondo, la mayoría de los usuarios podrán leer y comprender su página.
La Pautas de accesibilidad al contenido web (WCAG) requiere un contraste de color 4.5.1 entre el texto y el fondo para texto normal y 3: 1 para texto grande. Sugiere texto blanco para fondos negros, pero hay cierto margen para otros colores siempre que la relación de contraste sea lo más amplia posible.
Mencioné el astigmatismo anteriormente, ya que este es un impedimento que se ve afectado negativamente por el uso de fondos oscuros. El astigmatismo es una imperfección en la córnea que causa visión borrosa o distorsionada. Sobre un fondo oscuro, la pupila tiene que dilatarse para leer, lo que acentúa la borrosidad.
Si bien este es solo un impedimento en un mundo de muchos, alrededor del 33% de los estadounidenses tienen alguna forma de astigmatismo. Si expande eso a una audiencia global, casi un tercio de su audiencia potencial puede tener astigmatismo en un grado u otro. Eso es algo que todo diseño debe tener en cuenta.
Cuándo deberías usar un fondo oscuro
Hay una variedad de situaciones en las que los fondos oscuros se prestan bien al diseño web. Incluyen:
- Cuando quieras generar ese impacto visual inicial.
- Cuando oscurece se adapta a la identidad de marca del cliente.
- Al exhibir productos o servicios de lujo o de alto estatus.
- Cuando el diseño es moderno o minimalista.
- Cuando necesitas crear drama o misterio en un diseño.
Cuando no deberías usar un fondo oscuro
Igualmente, hay ocasiones en las que un fondo oscuro no será tu mejor opción y conviene evitarlas a toda costa. Incluso si el cliente insiste en usar uno.
- Cuando la página tiene mucho contenido.
- Cuando la voz de la marca no lo apoya.
- Cuando se sabe que el público objetivo no responde bien a él.
- Cuando hay mucho que hacer con la página y el espacio en blanco / negro es escaso.
- Cuando la intención es B2B u oficial, como gubernamental.
10 ejemplos de temas de fondo oscuro
Para mostrarte lo que quiero decir con los fondos oscuros que se ven increíbles cuando se hacen bien, he recopilado diez temas excelentes que los usan. Cada uno es ligeramente diferente en términos de diseño, pero todos tienen una cosa en común, utilizan fondos oscuros para lograr el máximo efecto.
1. Divi con Web Freelancers Layout Pack
El tema Divi WordPress tiene que ser uno de los más flexibles. Si bien muchas de sus plantillas son de fondo claro, puede revertirlas en segundos. Agregue el paquete de diseño Web Freelancers a Divi y podrá tener un sitio web excelente con un fondo oscuro para cualquier uso.
Todo lo que necesita hacer es instalar los dos temas, activar el tema, abrir una página y cambiar el fondo a oscuro. Luego use la opción 'Extender el color de fondo' en las secciones de la página para poner todo en línea.
Obtén Divi con un 10 % de descuento hasta marzo de 2024
2. Astra con el sitio de inicio del fotógrafo
El uso del marco Astra con la instalación del sitio de demostración del fotógrafo ofrece un excelente sitio web con un fondo negro. El buen uso del espacio, las fuentes contrastantes y el diseño minimalista hacen que este tema se destaque.
Echa un vistazo al sitio de inicio de fotografía
3. Genesis con Parallax Pro
Parallax Pro es un tema para Genesis framework que utiliza un diseño monocromático alterno con gran efecto. Es otro diseño simple que permite que el contenido de la página brille y proporciona un excelente ejemplo de cómo los fondos oscuros pueden funcionar tan bien.
Ver demostración en vivo de Parallax Pro
4. Lente de PixelGrade
Lens From PixelGrade usa un diseño de cuadrícula para darnos un portafolio o exhibición de imágenes usando un tema oscuro. El fondo oscuro solo es realmente visible en el menú lateral y el tema usa colores contrastantes de una manera muy interesante, agregando colores distintos al blanco y negro para resaltar realmente.
NB: Tenemos un 20% OFF directamente desde PixelGrade, exclusivo de CollectiveRay visitantes. Simplemente haga clic en el enlace a continuación, su descuento se aplicará automáticamente cuando realice el pago. Esta oferta es válida SÓLO hasta finales de marzo de 2024.
5. Divi con Electrician Dark Pack
Otro tema de Divi, esta vez la página de destino del electricista en la oscuridad. Este es un tema de muy alta calidad con fondo oscuro, tipografía nítida, buen uso de imágenes y algunos colores complementarios para agregar interés. Este es uno de mis favoritos personales y creo que funciona increíblemente bien.
Obtenga Divi con un 10% de descuento
6. Aldo de ThemeRex
Aldo de ThemeRex es un tema que hace que la apariencia elegante sea fácil. Es un esfuerzoless tema que funcionaría para muchos temas y equilibra una gran cantidad de contenido de la página con un fondo oscuro sin sobrecargar la página. Es un diseño muy logrado que funciona bien en cualquier tamaño de pantalla.
Visite la vista previa en vivo de Aldo
7. Neve Pro con imágenes de Parallax oscuro
Neve Pro con Dark Parallax Images utiliza el tema Neve con todo su poder, velocidad y características. Combinado con un fondo oscuro y una temática complementaria, este tema de WordPress es uno de los mejores que existen. Las páginas están bien equilibradas, se carga rápidamente, el contenido guía al lector suavemente por la página y no te queda nada.
8. Contar con diseño de jugador
El diseño de Telling with Gamer es un excelente ejemplo de cómo utilizar otros colores llamativos para enriquecer un fondo oscuro. No se deje engañar por el apodo de jugador, podría usar este tema para cualquier cosa y aún se vería increíble. Un menú sólido, un diseño excelente, una nitidez y un contraste excelentes y un buen uso del espacio son solo algunos de los aspectos positivos.
9. Siguiente
Nextout es un tema de WordPress muy elegante que utiliza un fondo oscuro más claro con colores contrastantes y complementarios. Con un atractivo control deslizante superior, se desplaza hacia abajo en un diseño en mosaico que se prestaría perfectamente para sitios web orientados a imágenes. Con una navegación elegante y diseños bien pensados, definitivamente es uno de los mejores temas web aquí.
10. Hestia Pro con imágenes de paralaje oscuro
Hestia Pro con Dark Parallax Images es otro tema muy elegante que equilibra fondos oscuros con elementos claros, colores contrastantes y una tipografía excelente. Las páginas son ricas pero no demasiado completas y el equilibrio es perfecto independientemente del tipo de pantalla que use. Podría funcionar en cualquier dispositivo, para cualquier tema y definitivamente es uno para probar.
Si quieres saber más sobre Hestia - echa un vistazo a este artículo sobre Collectiveray.
Conclusión: uso de fondos oscuros en el diseño web
Una de las mejores cosas de la Internet moderna es la libertad de expresarse y romper las reglas. Si bien algunas de esas reglas no deben romperse, otras sí. Como el tradicional diseño en blanco y negro que nos acompaña desde el 17th siglo.
Creo que los fondos oscuros pueden verse increíbles cuando se hacen con atención. Hacen ese impacto inicial y luego se desvanecen en un segundo plano. Funcionan bien en la mayoría de las condiciones de luz y una página bien equilibrada con un uso inteligente del espacio puede hacer que el fondo enfatice el producto o la intención de una página mejor que los fondos blancos.
Los diseños oscuros no se adaptan a todos los proyectos ni a todos los propósitos y requieren mucha más planificación, refinamiento y pruebas que los fondos blancos. Sin embargo, si se hace bien, creo que todo ese tiempo y esfuerzo extra puede valer la pena.
Por favor, deja un eficiente Comente con sus pensamientos, luego comparta esto en su (s) grupo (s) de Facebook que lo encontrarán útil y cosechemos los beneficios juntos. ¡Gracias por compartir y ser amable!
Divulgación: Esta página puede contener enlaces a sitios externos para productos que amamos y recomendamos de todo corazón. Si compra productos que le sugerimos, es posible que ganemos una tarifa de referencia. Tales tarifas no influyen en nuestras recomendaciones y no aceptamos pagos por reseñas positivas.
y muchos más ...