Un buen diseño puede realmente ponerte de humor. Hoy, tenemos una colección de diseños de sitios web oscuros y caprichosos que lo ayudarán a crear un ambiente distinto en su trabajo de diseño.
Mientras que la mayoría de las colecciones oscuras tienen un poco de decepción? Ambiente, no todos estos diseños tienen esa sensación (aunque el color tiene mucho que ver con cómo te sientes cuando los miras). Este escaparate es más que una galería, esperamos que lo inspire a crear su propio diseño oscuro y de mal humor.
Colores oscuros
Lo que es importante tener en cuenta es que la oscuridad no siempre significa negro. Una paleta de colores oscuros establece inmediatamente un cierto tono para un diseño. Lo que es importante considerar que oscuro no siempre significa negro. A menudo, los colores están tonificados (adición de negro) o sombreados (adición de gris).
Al examinar el diseño anterior para Hooligan, el estado de ánimo general es un poco sombrío y oscuro gracias al fondo negruzco, pero lo que realmente hace es el color del acento. El profundo amarillo dorado ha sido tonificado para adaptarse al estado de ánimo del video de fondo. El resultado es serio pero visualmente intrigante.
Oscuridad
Las sombras emanan misterio. Esa es una de las razones clave por las que los diseñadores usan patrones de diseño oscuros y caprichosos. Crean interés y curiosidad en el usuario.
Las sombras que rodean el automóvil en el sitio web de Clear Motion, arriba, casi te obligan a leer la copia. ¿Por qué el auto se ve de esta manera? ¿Qué es importante al respecto? La estética oscura contribuye con un ambiente que se centra alrededor de una curiosidad para aprender más.
Superposiciones Negras
Una capa negra es una de las formas más comunes de crear un estado de ánimo oscuro. Pero el tipo de negro que elijas puede darle más significado. ¿Es más oscuro o más transparente? ¿Qué parte de la imagen o el fondo puede ver el usuario a través de la superposición?
Las superposiciones más oscuras con menos transparencia casi ocultan lo que sucede en el fondo para que no sea una parte central del diseño. Las capas negras más transparentes permiten que los elementos visuales se vean como parte del diseño principal al tiempo que proporcionan contraste con los elementos primarios, como el texto o las llamadas a la acción.
Fhoke, arriba, usa bien esta técnica. Puede ver la acción en el video de fondo, pero el enfoque real está en el título y la acción de desplazamiento.
Stark Canvas
Rígido: Grave o desnuda en apariencia o contorno.
Con muchos diseños llenos de elementos para hacerte lucir, un diseño más rígido crea una sensación de nada, casi obligando al usuario a examinarlo más a fondo. Una vez más, la oscuridad y un fondo más marcado crean un misterio que el usuario quiere resolver.
Dubois, aunque no es tan rígido como los diseños sin nada en el fondo, crea esta sensación de asombro. El patrón de puntos en realidad contribuye al misterio: mire de cerca y algunos de ellos incluyen notas de color.
Pero lo que hace el diseño es forzar la vista al texto, que se encuentra en una ubicación desconocida en la pantalla para la mayoría de los usuarios. La marca y el título principal se encuentran en la parte inferior del primer rollo en lugar de en la mitad superior del diseño.
Opciones de tipografía
¿Qué asociaciones tienes ya con el punk? ¿Te pone tizzy de emoción o en un estado de ánimo más enojado? Punk is not dead probablemente te haga sentir algo de inmediato. La experiencia es nítida y altamente visual, y si hace clic en el enlace al sitio, también hay un componente de audio. Te hará sentir de cierta manera. ¿Qué asociaciones tienes ya con el punk? ¿Te pone tizzy de emoción o en un estado de ánimo más enojado?
El fondo oscuro y los destellos de colores brillantes contribuyen, pero lo que realmente crea el ambiente aquí es la elección de la tipografía. (Imagínelo con un guión ligero, totalmente diferente). Los bordes afilados e irregulares de la fuente y el factor de legibilidad casi molesto en cómo se siente al verla.
El resultado es interesante, pero difícil y viene con una sensación de inquietud.
En blanco y negro
¿Cómo te sientes cuando un diseño tiene una falta completa de color? ¿Y si es en su mayoría en blanco y negro con algunos elementos coloridos?
Si bien un diseño en blanco y negro no tiene la misma sensación de drama que un diseño oscuro, puede ser bastante interesante. Hay un conflicto incorporado en el diseño con tantos elementos de contraste y áreas de color.
Puede hacer que el ojo se mueva en una ráfaga a través del diseño y a diferentes elementos en un torbellino, al igual que lo que sucede cuando miras a Super Rebel. El ojo va a la parte superior de inmediato con la gran imagen en blanco y negro, pero luego aparece en todos los demás bloques de estilo de revista, nunca aterriza en un solo lugar.
La sensación es un poco de sobrecarga de información.
Imágenes
¿El aspecto cincelado en la imagen de Jimmy Chin en su portafolio? La página te da una impresión del hombre. Y eso es exactamente lo que se supone que hacen las imágenes oscuras, en blanco y negro.
Las elecciones que realice con el color, la iluminación y el uso de la foto contribuyen al estado de ánimo general del diseño. Aquí, el resultado es oscuro y fuerte. Pero imagínate si estuviera usando una camisa amarilla suave y pantalones verde lima; El estado de ánimo sería muy diferente.
La imagen crea una conexión emocional distinta con el usuario que fue intencional por parte del diseñador.
Oscuro con una? Luz? Estado animico
Si bien hemos visto muchos diseños caprichosos aquí, la oscuridad no tiene por qué equipararse con un estado de ánimo oscuro. Una estética oscura puede dar como resultado un sentimiento bastante ligero y energético. Se trata de cómo se juntan las partes.
Atom usa un fondo más oscuro, pero con una figura de estilo de dibujos animados para establecer un tono que sea visualmente interesante y oscuro, pero emocionalmente claro. La yuxtaposición yin y yang crea el mismo sentido de maravilla visual que los diseños más oscuros, pero sin intimidar al usuario en un sitio web que está pidiendo algo de visitantes (para descargar un producto digital).
La conexión emocional general más ligera entre el diseño y el usuario se siente un poco más confiable y menos dramática, lo que en realidad podría hacer que se sienta más cómodo con la descarga.
Conclusión
¿Te gusta un diseño con un toque caprichoso?
Esta técnica puede funcionar para ciertos tipos de proyectos. Pero podría ser más desastroso para otros: tenga en cuenta que no hay sitios de comercio electrónico en esta colección. Los proyectos más oscuros y de mal humor son misteriosos e interesantes, pero no siempre comunican credibilidad y confianza a los usuarios.
Puede ser un equilibrio delicado y es por eso que a menudo se ven esquemas sombríos y sombríos más a menudo con una cartera o diseños de sitios web informativos.