Lo que se debe y lo que no se debe hacer al diseño web oscuro
Los diseños web oscuros son muy populares y pueden tener un atractivo elegante y creativo.
También son perfectos para muchos tipos de trabajo con clientes, sin embargo, no son adecuados para todos los sitios web y deben usarse solo cuando corresponda.
A pesar del impactante impacto visual que pueden tener estos diseños oscuros, muchos diseñadores no saben cómo sacarlos de manera efectiva sin desconectar al visitante.
Con un diseño oscuro viene menos legibilidad , menos atractivo para la mayoría de los lectores y menos oportunidad para los elementos de diseño convencionales.
En esta publicación, analizaremos algunos consejos para hacer que su próximo diseño oscuro de sitio web atraiga a un público más amplio , mientras le permite a usted, el diseñador, expresar su creatividad.
UN encuesta reciente sugiere que los diseños ligeros son preferidos por la audiencia general de la web en un enorme 47%. La razón principal es la legibilidad . A la mayoría de las personas no les gusta ver texto claro sobre un fondo oscuro en sitios web porque les molesta, lo que les proporciona una experiencia mucho menos placentera.
Por el contrario, el 10% de los encuestados dijo que siempre preferían fondos oscuros para sitios web, mientras que otro 36% dijo que la mejor opción dependería del tipo de sitio web.
Entonces, ¿cuál es la respuesta correcta? Cuando se trata de eso, todos tienen su propia opinión, y eso es todo.
Pero con un porcentaje tan grande de usuarios que dicen que los diseños de sitios web oscuros son tolerables y, a veces, incluso preferidos, nosotros, como diseñadores web, tenemos que aprender a crear diseños oscuros eficaces para nosotros y nuestros clientes.
Esto significa convencer a todos los verdaderos creyentes de fondos claros de que el diseño oscuro puede ser más legible y fácil de usar.
Usa más espacio en blanco
¿O debería llamarse "espacio negro"? El uso eficaz del espacio en blanco es importante para cualquier tipo de diseño, pero es esencial para los sitios web con fondos oscuros.
Los diseños oscuros tienden a sentirse "pesados" , y abarrotarlos puede reforzar ese sentimiento. Echa un vistazo a algunos de los populares diseños web oscuros a continuación y observa su uso liberal del espacio en blanco con gran efecto.
Black Estate se ve en todo Internet en vitrinas de diseño web oscuro. De hecho, es un hermoso diseño y digno de toda la atención. Se utiliza una gran cantidad de espacio en blanco en todo el diseño, y lo que hace único a este diseño en particular es cómo se utiliza el espacio en blanco para delinear ciertos elementos de manera tan eficiente.
El logotipo tiene mucho espacio en blanco y es lo primero que vemos como visitantes. Vemos el contenido principal y la botella a la derecha. Como puede ver, el espacio en blanco se usa perfectamente para resaltar el texto de la botella y el título del contenido principal.
El contenido presentado en TIC Toc y la imagen que lo acompaña en este diseño están enmarcadas con el mayor espacio en blanco. A medida que avanzamos, vemos menos espacio en blanco, lo que nos hace prestar atención al contenido que se muestra.
El punto aquí es que el espacio en blanco guía gradualmente al usuario hasta el final de la página .
El fondo oscuro agrega profundidad al diseño. Debido a que el sitio web se basa tanto en el espacio en blanco, sería menos interesante sin el efecto creativo del fondo oscuro.
los Mark Dearman el sitio web tiene un espacio en blanco liberal y uniformemente distribuido en todo su diseño.
El espacio en blanco que enmarca cada pieza de portafolio proporciona mucho espacio para respirar por el contenido que contiene, y es un buen punto de descanso antes de pasar a la siguiente pieza.
Un montón de espacio en blanco es esencial para los diseños oscuros porque ayuda no solo a despejar el diseño, sino también a enmarcar elementos importantes y agregar elegancia al aspecto general.
Espacio blanco textual
Debido a que la legibilidad es la preocupación número uno de los que no les gustan los fondos oscuros, los diseñadores deben prestar mucha atención al texto en sí.
Al igual que en el diseño general, una forma de mejorar la legibilidad en sitios web oscuros es aumentar el espacio en blanco ajustando el tamaño del párrafo, el interletraje y el puntero .
El siguiente ejemplo muestra la diferencia que hace el espaciado entre los personajes al comparar diseños oscuros y claros.
Otra forma de mejorar la legibilidad en diseños web oscuros es aumentar el tamaño de la fuente . Al igual que la mayoría de las otras reglas en esta publicación, los tamaños de letra más grandes significan más espacio en blanco. Cuanto más grandes sean las letras, más espacio en blanco aparecerá alrededor y dentro de cada letra.
Por ejemplo, la letra "a" a continuación obtiene más espacio en blanco a medida que se hace más grande, tanto en el área que lo rodea como en el espacio dentro del recinto de la a y debajo del saliente.
Tenga en cuenta que leer texto pequeño es mucho más fácil en un fondo claro que en uno oscuro. Al configurar la tipografía para un nuevo sitio web, asegúrese de mirar algún texto ficticio para asegurarse de que sea legible . De lo contrario, vea si ayuda aumentar el tamaño del texto.
Contraste de texto
Muchas personas estarían de acuerdo en que los sitios web oscuros peor concebidos causan fatiga visual. Demasiado o muy poco contraste suele ser el culpable. ¿Cómo se encuentra el equilibrio perfecto?
Si estás en una habitación que es completamente negra, mirar de repente directamente a la luz no es agradable. Pero mirar una luz menos brillante en una habitación menos oscura está bien. El mismo principio se aplica al diseño web.
Encontrar el contraste perfecto significa equilibrar la oscuridad del fondo con la ligereza del texto .
A continuación hay una guía (muy) aproximada que muestra cómo funciona el contraste entre el texto y el fondo. Uno nota que a medida que el fondo se aclara, también lo hace el texto.
Encontrar un contraste agradable para el texto es mucho más difícil con un fondo negro puro.
Para encontrar el equilibrio perfecto, experimenta con diferentes tonos. El mejor resultado suele ser un fondo que no es negro puro y texto que no es blanco puro.
Tratando con fuentes
Las fuentes juegan un papel importante en el diseño y definitivamente deben tomarse en consideración con diseños oscuros. La imagen a continuación muestra una fuente de 14 puntos sobre un fondo oscuro en las fuentes serif y sans-serif.
La fuente sans-serif es obviamente más legible . Pero muchos diseñadores todavía eligen las fuentes serif por su elegancia.
El truco, sin embargo, es poner solo texto más grande en fuentes serif, de modo que el espacio en blanco adicional se inunde alrededor de cada carácter y haga que el texto sea muy legible.
La siguiente captura de pantalla es de un sitio web discutido anteriormente en este artículo. Presenta las fuentes serif y sans-serif, pero las usa de forma inteligente.
Texto más grande, como encabezados, navegación y encabezados, está en una fuente serif para mayor elegancia. Para obtener un mejor contraste y una legibilidad mejorada, el texto del cuerpo está en una fuente limpia sans-serif.
Utilice esquemas de color mínimos
Para dar a sus diseños oscuros una apariencia limpia y despejada, los diseñadores siempre deben optar por esquemas de color mínimos .
De los pocos ejemplos a continuación, podemos ver que los esquemas de color ocupados realmente se interponen en el camino de fondos oscuros, porque el contraste es demasiado nítido.
Quédate con uno o dos colores . Para agregar más color, pruebe con un fondo de color oscuro.
Por supuesto, muchos diseños web oscuros tienen esquemas de color más emocionantes. Entonces esta regla a menudo se rompe, pero solo con las técnicas correctas.
En general, sin embargo, el color es a menudo lo que hace que un sitio web parezca demasiado ocupado . Debido a que los sitios web más oscuros ya tienen profundidad, use el color con precaución.
Ofrezca un selector de estilo
Si bien tenemos muchas buenas prácticas a nuestra disposición para hacer que los diseños web oscuros sean más atractivos, ninguna cantidad de esfuerzo satisfará a cada usuario.
Asegúrese de incluir un selector de estilo , de modo que los usuarios finalmente tengan la opción de ver texto oscuro sobre un fondo claro.
Para esto se requieren dos hojas de estilo, una para el diseño oscuro predeterminado y otra para el diseño de luz alternativo.
SitePoint tiene un excelente tutorial sobre esto: Crear un selector de estilo simple en CSS . En lugar de utilizar las versiones "naranja", "azul" y "blanco" en el tutorial, solo use hojas de estilo "claro" y "oscuro".
Cuando Dark Web Design funciona mejor
Como se dijo, una gran proporción de usuarios de la web cree que un diseño web oscuro podría funcionar para ciertos tipos de sitios web. Pero el estudio es vago sobre qué son exactamente estos tipos.
En términos generales, la oscuridad funciona mejor para diseños creativos o elegantes . Para los sitios web modernos y elegantes, los fondos oscuros añaden elegancia. Para estilos grungy o dibujados a mano, los fondos oscuros mejoran la creatividad del diseño.
Elegante diseño oscuro
La oscuridad puede ser profunda, autoritaria y fuerte, y a menudo se ve elegante cuando se usa apropiadamente. Aquí hay algunos ejemplos y algunas técnicas para resaltar la elegancia en un diseño oscuro.
El sitio web para Larissa Meek tiene un patrón simple de estilo vintage en el fondo, configurando un tono elegante. Otras características más peculiares añaden un toque personal al diseño.
Esta técnica se puede usar para muchos tipos de sitios web. Los patrones y texturas vintage o clásicas pueden crear una apariencia elegante y apropiada según la edad .
La mayoría de nosotros asociamos los patrones vintage con la clase alta, por lo que crear un sitio web de alto nivel de esta manera es fácil.
Núcleo de profundidad tiene un diseño muy limpio, con un fondo oscuro que agrega estilo y clase. Un sentido de autoridad también es evidente en el diseño. Esta elegancia también puede hacer que el trabajo de cartera de un diseñador parezca más valioso como resultado.
Tenga en cuenta que este diseño no tiene textura o imágenes que no sean las piezas de la cartera y el logotipo. De lo contrario, el diseño habría estado demasiado ocupado; tal como está, el contenido está bien unido.
Un buen proceso a seguir es agregar contenido esencial primero y luego incorporar elementos de diseño según sea necesario . El diseñador puede hacer una pausa y reflexionar a medida que se agrega cada elemento nuevo, asegurándose de que el diseño no tenga demasiada potencia.
Así como las ilustraciones pueden parecer más valiosas en un diseño elegante, también lo pueden hacer los productos. Un diseño oscuro y elegante, como Tapbots y tantos otros, ayuda a mostrar el producto que se vende.
El diseño refleja el dispositivo en sí , con sus degradados y efectos de iluminación; algunos diseños incluso imitan la textura de sus productos de alta tecnología.
Diseño oscuro creativo
Más allá de simplemente aparecer diseños de sitios web oscuros y elegantes, también pueden provocar más respuestas emocionales que los diseños de luz estándar, lo que los hace ideales para proyectos creativos. Veamos algunos ejemplos de los tipos de diseños creativos que son posibles.
los sitio a continuación tiene muy poco contenido, pero tiene un diseño único y colores oscuros para la profundidad. Los fondos oscuros son perfectos para sitios web con muy poco contenido .
Y debido a que requieren más espacio en blanco, el diseñador tiene más espacio para trabajar.
El diseño web de Grunge viene en muchas formas, y debido a que el grunge es "oscuro y sucio", los fondos oscuros son una de esas formas.
Diseños oscuros del grunge como Trozo parecen romper todas las reglas: texturas ocupadas, distribución atestada y una amplia gama de colores. Y sin embargo, este sitio web aún funciona. ¿Cómo es eso posible?
Con tantos elementos desordenados para trabajar, el diseño de grunge puede ser complicado para los principiantes. Lo que hace que este funcione es su organización .
El fondo tiene bloques claramente diseñados que guían el ojo del usuario y ayudan a dividir el contenido en secciones manejables.
En segundo lugar, tiene una tonelada de espacio en blanco . El fondo puede tener textura, pero el patrón repetido lo ve el usuario como un espacio en blanco, lo que ayuda a aligerar el diseño.
Este espacio en blanco es más evidente a la izquierda del logotipo, debajo de la navegación y en el lado derecho.
Incluso entre "Exhibit 01" y "Exhibit 02" hay más espacio en blanco de lo que normalmente se encontraría en un sitio web como este.
El espacio en blanco iguala las cosas, a pesar de que no se ve como un espacio en blanco porque tiene textura . El texto mínimo y algunas secciones (solo tres) también contribuyen a esta apariencia de simplicidad.
El diseño de Drew Wilson definitivamente rompe la regla de usar un color mínimo. Sin embargo, todavía funciona, porque el encabezado de colores brillantes es una de las pocas características de este diseño escaso, por lo que nada lo supera.
Y el fondo oscuro hace que el encabezado parezca aún más brillante y más extraordinario.
Los fondos oscuros a menudo se usan para crear efectos de iluminación y los colores brillantes se destacan más .
Tales diseños son una maravillosa y creativa excepción a la regla del color mínimo. Pero la regla debe romperse con precaución: evite distraer los degradados, las texturas y el color más adelante en la página.
Terminando
Los fondos oscuros dan una sensación elegante y creativa a los diseños web, lo que los hace perfectos para algunas carteras, pero no son adecuados para todos los sitios.
Para sitios web más grandes, especialmente para personas con problemas de visión y otras discapacidades, los diseños oscuros son un no-no, incluso con un selector de estilo.
Afortunadamente, cuando llegue el momento de diseñar un sitio web con un fondo oscuro, estos consejos y estrategias ayudarán.
Escrito exclusivamente para WDD por Kayla Knight .
Hay muchas más técnicas y estrategias para mejorar los diseños web oscuros, así que comparta las que ha elegido en la sección de comentarios a continuación.