Kickstart eines Webdesigns unter Verwendung eines Bildes als Basis

In diesem kurzen Tutorial zeige ich Ihnen eine meiner Lieblingskürzel für den Start eines Webdesigns. Dies ist eine Methode, die ich häufig für freiberufliches Design verwendet habe. Sie wird Ihnen dabei helfen, die anfängliche Hürde zu überwinden, bei der Sie herausfinden müssen, wie das Farbschema und das Gesamtgefühl aussehen werden.

Diese Technik ist einfach, aber es ist nicht unbedingt offensichtlich, bis Sie den Vorgang ein paar Mal durchlaufen haben. Alles beginnt mit der Auswahl des perfekten Bildes. Mit dem gesagt, lass uns eintauchen!

Schauen Sie sich den Screencast an

Bild auswählen

Wie gesagt, beginnt alles mit einem Bild. Etwas, das mit der von Ihnen gestalteten Website verbunden ist. Ich werde oft Unsplash verwenden, weil es einfach toll ist, aber das Volumen der inspirierenden Fotos, die jetzt auf Envato Elements verfügbar sind, ist ebenfalls hervorragend. 

Wählen Sie etwas relevantes aus, aber etwas, das auch Farben enthält, die Sie sich vorstellen können, wird gut zu Ihrem Projekt passen. Wenn Sie etwas für ein etabliertes Unternehmen entwerfen, müssen Sie möglicherweise die Branding-Anforderungen einhalten. In diesem Fall funktioniert der gesamte Prozess genauso gut, wenn Sie ein Logo als Ausgangspunkt verwenden.

Hier ist das Bild, mit dem ich von Kyler Trautner beginnen möchte (es ist wunderschön und gibt uns eine Reihe ausgewogener Farben):

Sie können das bläuliche Schwarz auf dem Asphalt sehen, plus einen orangefarbenen Farbton aus der Tundra, wenn wir die Sättigung erhöhen, plus etwas, das grau erscheint, aber tatsächlich eine Blautonfarbe aus der tief liegenden Wolke ist.

Ein Bild in Adobe XD importieren

Ich habe das Bild heruntergeladen und gespeichert, und jetzt werde ich Adobe XD öffnen.. 

Gehe zu Datei> Importieren und wählen Sie das Bild aus, um es auf Ihre Leinwand zu bringen. Ändern Sie die Größe, wie Sie es für richtig halten.

Farben auswählen

Durch das Platzieren von UI-Objekten auf der Leinwand können wir den Farbwähler nehmen und jeden mit Schatten aus unserem Bild füllen. 

Zum Beispiel:

• Platzieren Sie ein Körperrechteck, das als Hintergrund dient, und geben Sie ihm einen mittleren Schatten auf dem Asphalt.
• Erstellen Sie ein weiteres Rechteck für das Hauptverpackungselement, und geben Sie ihm dann einen dunkleren Schatten von der Straße.
• Fügen Sie dem gleichen Wrapper-Element einen Schatten hinzu und weisen Sie ihm einen passenden dunkelblau / grauen Farbton zu.
• Eine helle Himmelsfarbe passt zu einem Seitenelement unter dem Bild.
• Dasselbe gilt für Text, von dem einige bei Licht dunkel sein müssen, und umgekehrt.

Das habe ich bisher:

Kontrastierende Elemente der Benutzeroberfläche

Lassen Sie uns nun einige kontrastierende Orangetöne für einige Tasten verwenden. Platzieren Sie einige Rechtecke auf der Seite und wählen Sie einen beige / orange Farbton aus dem Gestrüpp neben der Straße aus.

Der anfängliche Effekt ist fast "stumpf", also mit Füllen Auswahlwerkzeug Ziehen Sie den Picker nach oben und nach rechts, um die Sättigung zu erhöhen.

Versuchen Sie dasselbe mit einer kontrastierenden blauen Farbe für eine sekundäre Taste.

Fazit

Mit nur einem passenden Bild können Sie ein komplettes Farbschema und die Grundlage eines kompletten Webdesigns erstellen. 

Das Beispiel, das Sie verfolgt haben, stammt aus einem bevorstehenden Kurs mit dem Titel „Code-Friendly Design With Adobe XD“. Halten Sie dies im Auge!

Wenn Sie sich für die Farbtheorie interessieren, können Sie auch diese anderen Lernressourcen ausprobieren: