Poner en marcha un diseño web utilizando una imagen como base

En este breve tutorial, te mostraré uno de mis accesos directos favoritos para iniciar un diseño web. Este es un método que he usado mucho en diseño independiente, y realmente te ayudará a superar ese obstáculo inicial en el que necesitas resolver cuál será el esquema de color y la "sensación" general..

Esta técnica es simple, pero no es necesariamente obvia hasta que haya pasado por el proceso un par de veces. Todo comienza seleccionando la imagen perfecta. Así que con eso dicho, vamos a bucear en!

Mira el Screencast

Seleccionando una imagen

Como se mencionó, todo comienza con una imagen. Algo que está conectado al sitio web que estás diseñando. A menudo usaré Unsplash porque es impresionante, pero el volumen de fotos inspiradoras ahora disponibles en Envato Elements también es excelente. 

Elija algo relevante, pero algo que también contenga colores que pueda imaginar que se adapten bien a su proyecto. Si está diseñando algo para un negocio establecido, es posible que deba cumplir con los requisitos de marca, en cuyo caso todo este proceso funcionará igual de bien utilizando un logotipo como punto de partida..

Aquí está la imagen con la que comenzaré, por Kyler Trautner (es hermosa y nos brinda una gama de colores equilibrados):

Puedes ver el negro azulado del asfalto, más lo que será un tono naranja de la tundra si subimos la saturación, más lo que parece ser gris, pero en realidad es un tono azul de la nube baja..

Importando una imagen en Adobe XD

Tengo la imagen descargada y guardada, así que ahora abriré Adobe XD (que en este caso es mi herramienta preferida en este caso, puedes usar algo que te resulte más familiar si lo prefieres). 

Ir Archivo> Importar y selecciona la imagen para ponerla en tu lienzo. Cambia el tamaño como mejor te parezca.

Recogiendo colores

Al colocar objetos de la interfaz de usuario en el lienzo, podemos tomar el selector de color y rellenar cada uno con sombras de nuestra imagen.. 

Por ejemplo:

• Coloque un rectángulo de cuerpo para que sirva de fondo, luego delimite una sombra "media" desde la pista..
• Cree otro rectángulo para el elemento de envoltura principal, luego dale un tono más oscuro de la carretera.
• Agregue una sombra al mismo elemento de envoltura y asígnele un tono azul oscuro / gris que coincida adecuadamente..
• Un color de cielo pálido se adaptará a un elemento de página debajo de la imagen.
• Lo mismo se aplica al texto, algunos de los cuales deberán ser oscuros en la luz, y viceversa..

Esto es lo que tengo hasta ahora:

Elementos contrastantes de la interfaz de usuario

Ahora vamos a usar algunos tonos de naranja contrastantes para algunos botones. Coloque algunos rectángulos de botones en la página y elija un tono beige / naranja del matorral al lado de la carretera.

El efecto inicial es casi “apagado”, por lo que al usar el Llenar herramienta de selección arrastre el selector hacia arriba y hacia la derecha para aumentar la saturación.

Intenta lo mismo con un color azul contrastante también, para un botón secundario.

Conclusión

Desde una sola imagen adecuada, puede iniciar un esquema de color completo y la base de un diseño web completo. 

El ejemplo que ha estado siguiendo está tomado de un próximo curso titulado “Diseño compatible con el código con Adobe XD”, así que esté atento.!

Si está interesado en la teoría del color, también puede consultar estos otros recursos de aprendizaje: