A menudo, en el diseño web, se suele recomendar no emplear muchos colores y siempre aquellos que de alguna forma estén relacionados con la marca. Esta sugerencia suele funcionar a la perfección y con una paleta de 3 colores se pueden diseñar sitios web modernos e incluso elegantes. Sin embargo, utilizar varios colores no es un pecado ni nada por estilo, es simplemente una decisión más arriesgada que puede traer otros problemas de diseño. Pero si se logran superar esos problemas, entonces podrás lograr un sitio web igual de magnífico. Hay otras ocasiones donde la marca o el producto se caracteriza por ser colorido, entonces realmente no queda más remedio que romper aquella “regla” del color en el diseño web.
En este artículo te listamos ejemplos de paginas web que han decidido tomar ese riesgo y han empleado un gran variedad de colores. Esperamos esta lista te sea de utilidad en tu próximo proyecto web si es que estás planteándote ir por un estilo más colorido.
Loop
Este sitio posee una gradiente de diversos colores como fondo. Sólo mirar a la página de inicio te transmite alegría. Para hacer contraste con los vibrantes colores de fondo se emplea una tipografía sencilla de color blanco. El nombre del sitio se ha colocado en la página de inicio en gran puntaje.
Al bajar podemos ver imágenes. Aunque no se nota a simple vista se ha usado una cuadrícula para colocar esta imágenes, pero como se dejan espacios en blanco parece que no hubiera un orden particular. Se ha hecho de esta manera para dar un mayor descanso visual a los visitantes y para que puedan concentrarse en una sola imagen.
Guy Moorhouse
Este portafolio online es de estilo flat. En la parte superior izquierda de ubica el menú en el cual se emplea una tipografía sencilla y un color plano como fondo. En la parte superior derecha se ubica un icono que enlaza a la página de inicio.
El portafolio se divide en cuadrículas, no todos los proyectos ocupan el mismo espacio. Este contraste de tamaños hace que el sitio se vea más interesante. Los colores de fondo que se emplean en cada cuadrícula es diferente y se crea una colorida composición.
Panic
Este interactivo sitio posee diversas animaciones sencillas. No bien ingresamos a la página vemos que el logo se anima, para luego colocarse en la parte superior y luego vemos los demás elementos que conforman el layout colocándose en su respectivo lugar.
Este sitio posee como color de fondo un verde y se acentúa con rosado. Una combinación poco común, pero que realmente llama la atención. Adicionalmente se emplean las líneas inclinadas para dar un mayor movimiento a toda la composición.
Saver.is
Este colorido sitio posee parallax e ilustraciones sencillas que se complementan con una tipografía sans-serif que se caracteriza por sus “s”. La tipografía es legible y se utiliza de color blanco sobre fondo de colores para realzar el contraste.
Es interesante los colores vibrantes que se emplean en las ilustraciones y también las formas sencillas. Se suelen utilizar patrones de repetición en muchas ilustraciones. Aunque el sitio es mayormente visual, se complementa con breves comentarios de clientes.
Kelsey Dake
El portafolio de esta ilustradora posee un color naranja como fondo. En la página de inicio tenemos acceso a sus proyectos que se encuentran organizados en una cuadrícula. El color de fondo para cada proyecto es distinto y en cada ilustración se emplean colores vibrantes. En general es un portafolio bastante colorido que transmite la creatividad de esta ilustradora.
El menú se encuentra localizado en la parte superior derecha y posee algunas categorías básicas para poder filtrar los proyectos.
Drei
El sitio web de este juego no posee colores tan vibrantes, pero sí que es bastante colorido debido a los propios personajes del juego. Sólo en el primer pantallazo se emplea un color cálido como fondo. En el resto de la página se emplea el color gris de fondo y el texto es de color negro. Pero las coloridas ilustraciones que se colocan en cada parte destacan en este fondo, por lo tanto, el visitante les presta mayor atención.
Promethean IT
Este sitio emplea una gradiente de colores. Cada color principal de la gradiente sirve también para dividir la página de inicio en 6 partes iguales, de modo que cada color se asocia a una sección específica. Se han colocado los nombres de la secciones de manera vertical, alineados a la izquierda. En el centro se ha colocado el título en letras de mayor puntaje y también con bastones más gruesos.
Es un sitio bastante sencillo y limpio. Posee animaciones sencillas que le añaden mayor interactividad y el uso de la gradiente es perfecto ya que en su mayoría se usan colores no saturados y cálidos.
Odd Pears
Esta tienda online utiliza la cuadrícula para poder presentar mejor su catálogo de productos. Lo interesante de su catálogo es que no se presentan fotografías, sino que se colocan los diseños en digital e ilustraciones del producto. Es una decisión arriesgada, pero le da un toque auténtico a la tienda y ya que venden productos donde se toma el cuenta el diseño, entonces podría ser una decisión acertada.
Los coloridos patrones que se emplean en los productos le dan bastante vida a todo el sitio. Se hace uso de colores plano como fondo para poder colocar el nombre del modelo y el precio del mismo.
Hungry Sandwich Club
Esta agencia de diseño alinea todos sus proyectos en el centro de la página de inicio, bajo la barra de navegación. Cada proyecto ocupa un gran espacio horizontal y se le coloca un color plano como fondo, de modo que al ver toda la composición tenemos diversos colores. Aparte de esta inusual manera de organizar proyectos, también posee tipografía de color rojo, un color poco común, sin embargo, debido a la cantidad mínima de texto que posee la página, es una buena selección de color para llamar la atención sobre la navegación.
Moodsoup
Este sitio utiliza una fotografía como fondo y se le superponen gradientes. Esta gradiente va cambiando, de modo que podemos apreciar gran diversidad de colores conforme vamos navegando por la página. Otra característica interesante es que el menú cambia de posición al pasar el primer pantallazo. Hace uso también de tipografía de gran tamaño que funcionan como enlaces a nuevas páginas de proyectos. No podemos negar que se ve como un sitio bastante moderno debido al uso de colores, la ubicación de la tipografía y sus animaciones simples y efectivas.
Studiobema
En la página inicial de este sitio vemos una fotografía sencilla, se ha superpuesto una capa de color para darle un toque original a la fotografía. Se usa un color amarillo vibrante que hace contraste con la tipografía blanca. Al bajar podemos ver cómo los proyectos se alinean en una cuadrícula. Gran parte de los proyectos contienen como fondo un color sencillo. Es una página sencilla y directa.
Poke
Este sitio hace emplea diferentes colores según la sección donde el usuario se ubica. En la pantalla de inicio presenta una animación sencilla que le añade interactividad al sitio sin distraer al visitante de otros elementos como la frase que resumen un poco a que se dedica esta agencia de diseño.
Otra característica distintiva es que el logo se ubica en la parte superior derecha, aunque no al mismo nivel que la barra de navegación. En total se emplean 4 colores principales en este sitio, a pesar de esta dificultad se ha logrado un sitio moderno y creativo.
Andrew McCarthy
Este portafolio hace uso de diversos colores para dividir secciones en su página de inicio. Cada sección posee una frase, es como si el diseñador se estuviera presentando ante sus clientes. No sólo cambian los colores mientras vamos avanzando hacia abajo, sino que la imagen de fondo se va animando. Este sitio posee una especie de scrolling infinito, de modo que al finalizar con las cuentas en redes sociales, regresa nuevamente al nombre del diseñador. Es un sitio bastante creativo e único.
You Gotta Love FrontEnd
Este sitio posee un fondo de gradientes. Aunque al ingresar no podemos saber en qué página estamos debido a que las letras se encuentran desordenadas, no bien bajamos un poco, las letras se alinean en el cuadrado formando la frase “You Gotta Love FrontEnd” que es justamente el nombre del evento.
El menú siempre se mantiene a la vista en la parte superior derecha y nos indica mediante pistas visuales en que sección nos encontramos.
Transformation Projects
Este sitio hace uso de una selección cuidadosamente seleccionada de colores, de modo que el color de las tipografías se ha elegido para que hagan contraste y se ha dejado de lado, en gran parte, las fuentes de color blanco. Los fondos son coloridos y planos, posee el tono adecuado para no generar mucha tensión en la visión del usuario ante una exposición prolongada. Cada sección tiene una paleta de colores distinta.
For Better Coffee
Este sitio posee animaciones que se activan cuando el usuario se desplaza hacia abajo. No sólo la página de inicio es colorida, sino que también las ilustraciones que se han usado en las animaciones. Todas son sencillas, pero hacen uso de diversos colores y animan así al visitante a seguir navegando en la página.
In Pieces
Este sitio hace uso de ilustraciones Low Poly para mostrarnos 30 especies en peligro de extinción. El sitio no sólo se limita a mostrar ilustraciones, sino que emplea animaciones sencilla, de modo que podemos ver moverse a los animales que conforman parte de esta galería. Es un sitio bastante interactivo e informativo.
Cada animal se encuentra ilustrado mediante la técnica Low-Poly, el fondo cambia dependiendo del animal. Al ofrecer información de modo tan interactivo permite que un número mayor de usuarios se interesen por el tema.
Names for Change
Este sitio usa diferentes colores como fondo y divide el layout en una cuadrícula donde coloca de manera organizada las imágenes. Como fondo no sólo se emplean diferentes colores sino que se emplea la técnica Low-Poly. Que todas las imágenes posean esta característica como fondo le da cierto sentido de unida a toda la composición, sin mencionar que las fotos poseen el mismo tratamiento.
Posee animaciones sencilla, pero efectivas e intercala imágenes con texto para dar cierto dinamismo a la composición y no hacer que se vea tan repetitiva.
