Démarrer une conception Web en utilisant une image comme base

Dans ce court tutoriel, je vais vous montrer l'un de mes raccourcis préférés pour lancer un design web. C’est une méthode que j’ai beaucoup utilisée dans la conception indépendante, et elle vous aidera vraiment à surmonter cet obstacle initial, qui vous oblige à déterminer le schéma de couleurs et le «toucher» général..

Cette technique est simple, mais elle n’est pas nécessairement évidente tant que vous n’avez pas suivi le processus plusieurs fois. Tout commence par la sélection de l'image parfaite. Donc, avec cela dit, plongons dans!

Regarder le screencast

Sélection d'une image

Comme mentionné, tout commence par une image. Quelque chose qui est connecté au site Web que vous concevez. Je vais souvent utiliser Unsplash parce que c'est génial, mais le volume de photos inspirantes maintenant disponibles sur Envato Elements est également excellent.. 

Choisissez quelque chose de pertinent, mais quelque chose qui contient également des couleurs que vous pouvez imaginer conviendra bien à votre projet. Si vous concevez quelque chose pour une entreprise établie, vous devrez peut-être respecter les exigences de la marque. Dans ce cas, tout ce processus fonctionnera tout aussi bien en utilisant un logo comme point de départ..

Voici l'image avec laquelle je vais commencer, de Kyler Trautner (c'est magnifique et nous donne une gamme de couleurs équilibrées):

Vous pouvez voir le noir bleuâtre du tarmac, plus ce qui sera une teinte orange de la toundra si nous augmentons la saturation, plus ce qui semble être gris mais qui est en réalité une nuance de bleu du nuage bas.

Importation d'une image dans Adobe XD

J'ai l'image téléchargée et sauvegardée, alors je vais maintenant ouvrir Adobe XD (ce qui s'avère être mon outil de choix dans ce cas, vous pouvez utiliser quelque chose qui vous est plus familier si vous préférez). 

Aller à Fichier> Importer et sélectionnez l'image pour l'amener sur votre toile. Redimensionnez-le comme bon vous semble.

Choisir des couleurs

En plaçant des objets d'interface utilisateur sur le canevas, nous pouvons alors prendre le sélecteur de couleur et remplir chacun d'eux avec les nuances de notre image.. 

Par exemple:

• Placez un rectangle de corps pour servir d’arrière-plan, puis donnez-lui une nuance «moyenne» du tarmac..
• Créez un autre rectangle pour l'élément enveloppant principal, puis donnez-lui une nuance plus foncée depuis la route..
• Ajoutez une ombre à ce même élément enveloppant et donnez-lui une nuance bleu foncé / gris assortie.
• Une couleur de ciel pâle conviendra à un élément de page situé sous l'image.
• Il en va de même pour le texte, dont certains devront être foncés à la lumière, et inversement.

C'est ce que j'ai jusqu'ici:

Éléments d'interface utilisateur contrastés

Utilisons maintenant des teintes orange contrastées pour certains boutons. Placez des rectangles de bouton sur la page et choisissez une teinte beige / orange dans le gommage près de la route..

L'effet initial est presque «terne», utilisez donc le Remplir outil de sélection faites glisser le sélecteur en haut et à droite pour augmenter la saturation.

Essayez la même chose avec une couleur bleue contrastante aussi, pour un bouton secondaire.

Conclusion

À partir d'une seule image appropriée, vous pouvez créer une palette de couleurs complète et la base d'une conception Web complète.. 

L’exemple que vous avez suivi est tiré d’un cours à venir intitulé «Conception conviviale avec Adobe XD», alors surveillez-le de près.!

Si la théorie des couleurs vous intéresse, vous pouvez également consulter ces autres ressources d'apprentissage: