Empezando un diseño web utilizando una imagen como base

Spanish (Español) translation by Carlos (you can also view the original English article)

En este breve tutorial, voy a enseñarte uno de mis atajos favoritos para iniciar un diseño web. Este es un método que he utilizado mucho en el diseño independiente, y realmente te ayudará a superar ese obstáculo inicial en el que necesitas determinar cuál será el esquema de color y la "percepción" general.

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

Mira el Screencast

Seleccionando una imagen

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

Escoge algo relevante, pero algo que también contenga colores que imagines que se adaptarán bien a tu proyecto. Si estás diseñando algo para un negocio establecido, es posible que necesites mantenerse dentro de los requisitos de la marca, en cuyo caso todo este proceso funcionará igual utilizando un logotipo como punto de partida.

Aquí está la imagen con la que iniciaré, por Kyler Trautner (es hermosa, y nos da un rango de colores equilibrados):

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

Importando una imagen a Adobe XD

Tengo la imagen descargada y guardada, así que ahora voy a abrir Adobe XD (que simplemente es mi herramienta de elección en este ejemplo, puedes utilizar algo que sea más familiar para ti si lo prefieres).

Ve a Archivo> Importar y selecciona la imagen para llevarla a tu lienzo. Redimensiona el tamaño como mejor te parezca.

Seleccionado los colores

Al situar objetos de UI en el lienzo, podemos tomar el selector de color y llenar cada uno con tonos de nuestra imagen.

picking colors from an image in Adobe XD

Por ejemplo:

Coloca un rectángulo para que sirva de fondo, luego dale una sombra "media" desde el asfalto.
Crea otro rectángulo para el elemento de envoltura principal, luego dale un color más oscuro de la carretera.
Añade una sombra al mismo elemento de envoltura y dale un tono azul / gris oscuro que combine adecuadamente.
Un color de cielo pálido se ajustará a un elemento de la página debajo de la imagen.
Lo mismo aplica al texto, algunos de los cuales deberán ser oscuros con respecto a la luz, y viceversa.

Esto es lo que tengo hasta el momento:

Contrastado elementos UI

Ahora usemos tonalidades anaranjadas contrastantes para algunos botones. Coloca algunos rectángulos de botón en la página y eecoge un tono beige / naranja del matorral al lado de la carretera.

El efecto inicial es casi "opaco", así que con la herramienta de selección de Relleno arrastra el selector hacia arriba y hacia la derecha para incrementar la saturación.