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.
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.
Intenta lo mismo con un color azul que contraste, para un botón secundario.
Conclusión
Con una imagen apropiada puedes empezar todo un esquema de color y la base de un diseño web completo.
El ejemplo que has seguido está tomado de un próximo curso que se titula "Code-Friendly Design With Adobe XD", así que ¡estemos atentos!
Si estás interesado en la teoría del color, también puedes consultar estos recursos de aprendizaje:
