El uso de los colores vibrantes es una decisión bastante común cuando se trata de captar la atención. Nada más efectivo que destacar un elemento mediante color. Sin embargo, existen otras técnicas que puedes emplear para hacer destacar ciertos elementos en una composición. Como diseñador, probablemente ya lo sepas y manejes estas técnicas al revés y al derecho. Sin embargo, si estás acostumbrado a emplear muchos colores en tus diseño, te listamos algunos ejemplos de paginas web que han hecho uso de colores opacos y han logrado resultados increíbles y que seguramente te servirán como referencia si quieres hacer un diseño con tonos oscuros:
A Book of Beards
Esta página emplea una foto en blanco y negro para captar la atención en su página de inicio. La fotografía tiene una buena composición y la nitidez es impresionante. El título usa una fuente serif que se ve muy elegante. Esta fuente también se emplea en el menú, que es pequeño y se encuentra ubicado en un recuadro en la parte superior izquierda. Como color de acento se emplea agua marina que combina con el fondo y el otro color elegido para las tipografías: blanco.
Electrik Company
Este sitio web emplea fotografías en blanco y negro. Su tipografía de títulos es sans serif con bastones de medioa ancho. Tanto para el título como para el cuerpo de texto, el cual no sólo se encuentra en otra fuente sino que se le ha dado formato (itálicas), se emplea el color blanco. Este color también se emplea en las secciones que conforman el menú. El color de acento es un amarillo encendido, lo cuál nos hace recordar a la luz emitida por un foco y que se relaciona directamente con el nombre y logo de esta empresa.
Ryan Mulford
El fondo empleado en esta página es un paisaje nocturno sintetizado. Se puede notar claramente las estrellas y las montañas que generan un impacto visual y permiten que el fondo no se vea tan genérico. El logo circular destaca no sólo por el tamaño, sino por la tipografía empleada que nos hace recordar a una especie de sello antiguo.
Para la tipografía se emplea una legible sans serif blanca o roja, cuando se desea destacar ciertas palabras. Al bajar vemos el portafolio, donde las imágenes sí son a colores y resaltan debido al fondo negro utilizado.
Whisperism
Este tema de diseño minimalista emplea colores opacos: negro para el fondo y un tono gris para el cuerpo de texto así como para su menú. Para el título sí emplea color blanco para su tipografía pues de esa manera se genera un mayor contraste. Usa tanto sans serif como serif, sans serif para el título y serif para el cuerpo de texto.
La página tiene animaciones sencillas y una diagramación única que le dan un aspecto diferente.
Tokyo Mild Foundation
Este sitio presenta una animación de inicio sencilla, también en colores oscuros. Asimismo, también presenta una genial animación al cargarse cualquier página. Esta empresa posee un menú hamburguesa localizado en un lugar bastante peculiar: en la parte central izquierda. Al pinchar sobre el menú este se extiende, pero de por sí la página de inicio tiene cierto aspecto de menú pues emplea una cuadrícula para dividir a sus clientes más representativos. Al posar el cursor por cada cliente, la imagen en blanco y negro cambia por una a full color.
Las fotografías de la página de inicio son cautivantes y cumplen con su propósito. El menú blanco contrasta a la perfección con el color negro del fondo y el color opaco de las fotografías.
Vool
Este sitio posee un fondo de color negro y tipografías en tonos de grises. Hay ciertas tipografías que son coloridas y de bastones gruesos, su propósito es destacar los beneficios del producto y lo logran mediante el contraste y el tamaño. La tipografía principal es delgada y legible, haciendo que el mayor peso visual se concentre en los subtítulos.
El sitio usa espacios en blanco en abundancia, ayudando a la organización y legibilidad en general de la página.
Mammoth Media
Este sitio es simple, pero bastante cautivador. No sólo por los colores empleados que solo usa tonos de grises para diferenciar el menú del pie de página, sino también por la selección de la tipografía que tiene ciertas similaritudes pero aún así se destacan los títulos por tamaño y peso (pues se seleccionó una fuente posee bastones gruesos).
La tipografía es de color blanco, con excepción de ciertas palabras y adornos que se emplean mínimamente en el diseño. Asimismo, la imagen del mar y las olas nos da cierta sensación de movimiento.
Image Consciuous Studio
Todo acerca de esta página tiene un estilo retro, desde la fotografía en blanco con las tramas superpuestas, hasta el elemento de acento en la parte superior. Si bajamos podemos ver el portafolio y una breve presentación de la empresa, cuyos colores se oponen al de la página de destino. En el portafolio también se emplean tonos grises, pero se acentúan con amarillo. El menú se mantiene siempre visible en la parte superior de la página.
La página tiene bastante personalidad y estilo, que seguramente se alinea con la personalidad de marca de la empresa.
Visage
El sitio emplea una foto estática de un paisaje nevado, sin embargo, se ha aplicado un filtro de color opaco pues no se pueden notar los azules vibrantes propios de este paisaje. Se ha realizado esta modificación para que el enfoque del visitante estuviera en las el título que varía en un determinado periodo de tiempo. Se ha empleado un verde para las zonas de acento, que es el mismo color que se utiliza para el logo en la parte superior.
La tipografía es blanca y de bastones gruesos, efectiva para llamar de inmediato la atención de cualquier visitante. En l página de destino existen dos botones de acción, pero se usa el color más vibrante para indicar cuál es más importante.
La página en general sólo tiene el contenido necesario y se emplean efectivamente los espacios en blanco.
Patrick Monkel
Este portafolio online emplea un fondo oscuro decorado con figuras geométricas y texturizado. Los triángulos empleados en el fondo se pueden apreciar también como elemento decorativo en la página de inicio. La tipografía es de bastones gruesos, muy llamativa.
El portafolio posee imágenes grandes (incluso en miniatura), se encuentran centradas y se emplean en abundancia los espacios en blanco. En esta zona se emplea blanco como fondo, que genera un buen contraste con los colores oscuros empleados en la página de inicio.
Louis XIV
El color oscuro usado en este sitio ayuda a resaltar la elegancia y excelencia de la marca. Además, el color negro forma parte del envase de esta bebida energética y por lo tanto, tiene sentido que también se utilice este color como fondo.
Incluso las fotografías del producto presentan un fondo oscuro. Para las tipografías se emplean color blanco y amarillo para hacer acento, como cuando se incluyen los nombres de los premios que ha ganado la marca.
Intercore
Este sitio presenta una fotografía de un edificio en su página de inicio, pero se le ha aplicado un filtro de color. La característica más interesante de esta página es que al pasar cierto tiempo cambia las imágenes, así como el mensaje. Es decir, para cada foto presenta un mensaje nuevo. De esta forma, se exhibe un poco de los logros y beneficios de la marca.
El resto del sitio mantiene la misma estética al color una imagen de gran tamaño como fondo. El filtro de color siempre se mantiene, pero el mensaje y la información cambian según la sección en la que nos encontremos.
Drexler
Este sitio presenta en su página de inicio colores oscuros: negro como fondo y gris en ciertos texto secundarios. Además, la fotografía que presenta al inicio se encuentra en blanco y negro. A pesar de todo, estamos frente a una página de inicio bastante llamativa por su composición: no se ha empleado una fotografía que ocupa todo el ancho de pantalla, sino que se ha dividido el layout en dos. En el lado derecho tenemos la fotografía y en el lado izquierdo el nombre de la empresa y el texto que indica brevemente a lo que se dedica la empresa. El menú se ha colocado en la parte inferior en un llamativo color amarillo.
Dang & Blast
Este sitio emplea una fotografía en blanco y negro con ciertos toques sepia como fondo. El menú se encuentra en la parte superior, dividido por el logo de la empresa. Abajo vemos el texto que indica a lo que se dedica la empresa. Para el texto se usan dos tipografías y dos colores, destacando la parte más importante del texto por tamaño. También vemos un original botón fantasma que ocupa casi todo el ancho de la pantalla.
El resto del sitio se usan colores neutros de fondo como el blanco y también colores llamativos como el amarillo. El pie de página es de color negro y hace que el fondo destaque.
Fiasam Web Solutions
Este sitio hace uso de un fondo que contiene ilustraciones tipo boceto. En el centro se ubica el logo de la empresa, posee un tamaño y colores vistosos. Abajo podemos ver que se hace uso de iconos y texto para explicar a qué se dedica la empresa. El menú se halla en la parte lateral izquierda.
Según la sección se emplean fondos de distintos colores, sólo el fondo principal posee estas ilustraciones y colores oscuros, los demás fondos son de colores vibrantes.
Craig Teel
Este sitio posee una fotografía a la que se le ha aplicado un filtro de un color oscuro. Tiene un diseño de una sola página y el menú se localiza en la parte lateral izquierda. Para el menú se emplean iconos y no texto, un cambio interesante y arriesgado.
El sitio usa fotografías en gran tamaño y espacios en blanco de manera abundante, de modo que tenemos como resultado un sitio web bastante organizado.
Jamie Syke
Este sitio emplea no sólo una fotografía con filtro oscuro para su página de inicio, sino que también emplea un color gris como fondo. Como colores de acento se usa blanco y un verde vibrante, que destaca los enlaces, las palabras más importantes del texto y los botones de llamada a la acción.
Magnetic Creative
Este agencia de diseño emplea colores oscuros en todo su diseño, desde las imágenes de fondo hasta las fotografías de los miembros de la agencia. En la página de inicio podemos ver un breve video introductorio donde los mismo miembros nos explican a qué se dedica la agencia y que los motiva como equipo.
Dividen cada pieza de información no sólo con un título sino por colores y los intercalan con fotografías para invitar a la audiencia a seguir bajando por la página. Incluso usan las fotografías en blanco y negro a su favor pues realizan diseños tipográficos encima de ellas.
