So beschleunigen Sie den Wireframing-Prozess mit Photoshop und Adobe XD

Bevor Sie mit einem Designprojekt beginnen, gibt es ein Wort, das Ihnen von Anfang an folgen wird: Wireframing . Heute lernen wir, wie man ein Wireframe in Adobe XD erstellt und wie man einige Grafiken aus Photoshop einfach mithilfe von Bibliotheken implementiert.

Aber zuerst, was genau ist ein Wireframe?

Ein Wireframe ist eine visuelle Darstellung der Struktur Ihres Projekts. Es definiert die Knochen, die Elemente, die in Ihrem Layout funktionieren, und die Platzierung des Inhalts für Ihren Prototyp.

Das Tolle am Wireframing ist, dass es eine Kombination aus einfachen Elementen ist, die Sie dazu bringen, sich auf die Funktionalität Ihres Projekts zu konzentrieren. In dieser Phase können Sie zeichnen, ohne zu viel über Stil und Design nachzudenken.

Sie müssen nur herausfinden, was Ihre Projektziele sind und wie Sie sie durch Wireframing mit einfachen Elementen entwickeln können. Während Sie sich weiter durch Wireframing bewegen, entwickeln Sie die besten Lösungen, während die Teamkomponente Kommentare und Vorschläge zu Ihrer Skizze macht.

Der erste Schritt besteht darin, ein Projekt zu erstellen und es „Abschnitte“ zu nennen, dann eine Liste der „Elemente“ zu erstellen, die Sie benötigen, um die verschiedenen Schritte abzuschließen, bis zur Erstellung der endgültigen „Architektur“.

Es macht sehr viel Sinn, zunächst ein Wireframe „von Hand“ zu erstellen. Es hilft Ihnen, die gesamte Idee auf Papier (ohne digitale Grenzen) zu entwickeln, und lässt Ihre Konzepte leicht fließen. Für diejenigen unter Ihnen, die in einem Team arbeiten, scheint die Arbeit mit Papier nicht der beste Ansatz zu sein, wenn Sie Ihre Vorstellungen mit allen am Projekt Beteiligten teilen möchten – insbesondere, wenn Sie mit Ihrem Team online arbeiten.

In diesem Tutorial behandeln wir die folgenden Schritte:

1. Erstellen Sie ein Wireframe, wählen Sie PS-Assets aus und fügen Sie sie über Bibliotheken ein;
2. Aktualisieren Sie PS-Dateien und sehen Sie sich die Ergebnisse in Adobe XD an.

Wir werden eine Reihe von Objekten erstellen, die in unserem Drahtmodell verwendet werden. Wir werden sie in unserem Vermögen beiseite legen, da wir eine zusätzliche Tafel hatten, von der wir unsere Werkzeuge nehmen können.

Sobald Sie damit fertig sind, können Sie es speichern und für zukünftige Projekte wiederverwenden, indem Sie dieselben Elemente erneut verwenden und einige weitere Objekte hinzufügen.

Sie benötigen diese Photoshop-Elemente, die ich für die Verwendung in unserem Drahtmodell vorbereitet habe.

Folgendes werden wir erstellen:

1 . Erstellen Sie ein Wireframe und wählen Sie PS-Assets aus und fügen Sie sie über Bibliotheken ein

Der beste Ort, um mit der Entwicklung eines Drahtmodells von Grund auf zu beginnen, ist, es zuerst von Hand zu zeichnen.

In diesem Projekt möchte ich eine Zielseite für eine Online-Kurs-Website erstellen. Ich weiß, dass ich wesentliche Informationen darin kommunizieren muss. Es muss nicht beim ersten Mal perfekt sein, aber am Ende hängt seine Effektivität sehr stark davon ab, wie ich das Wireframe organisiert habe und wie eng es mit dem ursprünglichen Zweck übereinstimmt.

Erster Schritt : Hier sind meine eigenen handgezeichneten Wireframes.

Wie Sie sehen können, gibt es nicht viele Informationen über sie. Zunächst soll nur gezeigt werden, wie das Layout aufgebaut wird und welche Elemente zu berücksichtigen sind. Sauber und einfach.

Zweiter Schritt : Senden Sie das Wireframe in einer kleineren Größe und mit einigen Randnotizen erneut, die ich verwende, um die Elemente und ihre Verwendung zu erklären:

Dritter Schritt : Beginnen wir mit der Erstellung unseres digitalen Drahtmodells mit Adobe XD.

Öffnen Sie Adobe XD und wählen Sie im geöffneten Fenster „Web 1920“.

Speichern Sie Ihr Projekt als „Wireframe“, indem Sie Datei → Speichern unter auswählen.

Sobald Ihre Datei gespeichert ist, erstellen Sie auch eine weitere Zeichenfläche für iPhone ⁶ ⁄ ₇ Plus.

Klicken Sie auf die Schaltfläche A (Zeichenfläche) auf der linken Seite und wählen Sie „iPhone 6/7/8“ in der rechten Seitenleiste.

Und hier sind unsere beiden Zeichenflächen: eine für den Desktop und eine für Mobilgeräte.

Jetzt können wir damit beginnen, unsere Wireframe-Objekte zu erstellen. Nach unseren handgezeichneten Skizzen erstellen wir nun dieselben Objekte in XD.

Heldenbild
Wählen Sie das Rechteckwerkzeug ( R ) und zeichnen Sie eine Form, wo Ihr Heldenbild sein sollte. Dann nimm das Linienwerkzeug ( L ) und zeichne zwei Linien, die die Scheitelpunkte verbinden. Diese Art von Form repräsentiert unseren Bildplatzhalter.

Gruppieren Sie die Form und die Linien und nennen Sie die Gruppe „Hero“:

Fahren wir nun mit dem Abschnitt „Icons“ fort. Ich habe etwas Text vor meine Symbole gesetzt und werde das mit einigen Linien visuell darstellen. Ergreifen Sie das Linienwerkzeug ( L ) erneut und zeichnen Sie eine einzelne horizontale Linie. Klicken Sie auf Repeat Grid Tool ( ⌘ + R auf Mac oder STRG + R auf Windows) und ziehen Sie Ihre Linie, bis Sie drei davon haben.

Wir brauchen drei Symbole für unsere Icons, also klicke auf Ellipse Tool / E ) und zeichne einen Kreis. Klicken Sie erneut auf Repeat Grid Tool ( ⌘ + R auf Mac oder STRG + R auf Windows) und erstellen Sie drei Kreise. Wählen Sie dann den Raum zwischen den Kreisen aus und ziehen Sie, um ihn breiter zu machen.

Feature-Bereich
Erstellen Sie mit dem Rechteckwerkzeug ( R ) einen hellgrauen Hintergrund ( #F8F8F8 ). Wiederholen Sie die Schritte aus dem vorherigen Abschnitt „Hero-Bild“ oben, um einen Bildplatzhalter zu erstellen, und wiederholen Sie dann die Schritte aus dem Abschnitt „Symbole“ (ebenfalls oben), um eine Zeile für Text zu erstellen. Erstellen Sie schließlich mit Hilfe des Rechteckwerkzeugs ( R ) eine einfache Schaltfläche.

Das ist das Endergebnis:

Wiederholen Sie für den Testimonial-Bereich die gleichen Schritte wie zuvor, um einen Bildplatzhalter und einige Textzeilen zu erstellen. Wie Sie auf dem vollständigen Wireframe-Bild sehen können, gibt es ein Anführungszeichen-Symbol, das wir einfügen müssen.

Wir werden es mit Photoshop machen.

Öffnen Sie die von mir bereitgestellte Photoshop-Datei, indem Sie auf diesen Link klicken.

Ich möchte dieses Bild mit Libraries CC als Symbol einfügen.

Stellen Sie in Photoshop sicher, dass das Bedienfeld Bibliotheken angezeigt wird, indem Sie auf Fenster → Bibliotheken gehen. Erstellen Sie eine neue Bibliothek, indem Sie auf das kleine Symbol oben rechts klicken (siehe Bild):

Ich habe meine Bibliothek „Wireframe“ genannt. Geben Sie Ihrer Bibliothek den gewünschten Namen.

Klicken Sie nun auf das Symbol, das Sie in Ihrer Bibliothek haben möchten, und ziehen Sie es:

Wechseln Sie zurück zu XD und gehen Sie zu Datei → CC-Bibliotheken öffnen und Sie sehen das letzte Symbol, das Sie gerade über Photoshop hochgeladen haben, und die Bibliothek, die Sie erstellt haben.

Ziehen Sie das Zitatsymbol in Ihr Drahtmodell in XD und positionieren Sie es dort, wo Sie es benötigen.

Für die Abschnitte „Preise, Abonnement und Fußzeile“ werden wir sie darstellen, indem wir zusätzliche Kästchen und Zeilen verwenden, wie Sie sie im Bild unten sehen.

Hinweis : Sie finden das E-Mail-Symbol in der Photoshop-Datei, die ich hier bereitgestellt habe .)

Befolgen Sie die im Funktionsabschnitt beschriebenen Schritte, um das Symbol über Photoshop in die Bibliothek einzufügen , öffnen Sie es in XD und ziehen Sie es auf Ihre Drahtgitter-Zeichenfläche.

Das ist das Ergebnis:

Eine letzte Sache, die wir tun müssen, bevor wir fortfahren, ist, unsere Schichten zu bestellen. Stellen Sie sicher, dass Ihre Ebenen aktiviert sind, indem Sie auf das Ebenensymbol klicken ( ⌘ + Y für Mac oder STRG + Y für Windows).

Gruppieren Sie alle Abschnittselemente in Ordnern (ich habe ihnen denselben Namen des Abschnitts zugewiesen, den sie darstellen). Auf diese Weise haben Sie alle Ihre Elemente in Ordnung und haben keine Schwierigkeiten, sie schnell zu finden (siehe Bild).

Wir sind jetzt mit unserem Wireframe fertig!

Im nächsten Schritt werden wir unser Design erstellen, indem wir unser Drahtmodell verwenden und herausfinden, wie die Elemente der Bibliotheken sofort geändert werden können.

2. Fügen Sie Ihrem Wireframe eine Ebene der Wiedergabetreue hinzu

Wir haben gerade unser Wireframe fertiggestellt und können es an dieser Stelle noch einmal überprüfen, um zu sehen, ob wir etwas übersehen haben. Sobald wir sicher sind, dass wir alle notwendigen Informationen im Wireframe enthalten haben, können wir sie mit dem Projektteam teilen.

Wir sind bereit, weiterzumachen und unser Wireframe zu aktualisieren, um es mit Bildern, Farben und Platzhalterkopien „lebendig“ zu machen.

Gehen Sie voran und erstellen Sie Ihr Design. Duplizieren Sie Ihr Wireframe, indem Sie es unter einem anderen Namen speichern (z. B. „Wireframe-Layout“).

Zuerst brauchen wir ein Bild für unseren Heldenbereich (ich habe dieses von Priscilla Du Preez von Unsplash verwendet. .)

Öffnen Sie das Bild in Photoshop und reduzieren Sie die Bildgröße, indem Sie auf Bild → Bildgröße klicken und die Breite auf 3000 Pixel einstellen:

Speichern Sie Ihr Bild und ziehen Sie es dann in Ihre Bibliotheken.

Ziehen Sie in XD das Bild aus Bibliotheken auf Ihre Zeichenfläche. Passen Sie es an die Form an, die wir gerade als Bildplatzhalter erstellt haben.

Ich werde diesem Bild ein Logo und etwas Text hinzufügen; Ich brauche das Bild etwas dunkler, damit die Informationen gut lesbar sind. Gehen Sie zurück zu den Photoshop-Bibliotheken und doppelklicken Sie auf das Bild im Bedienfeld. Sobald das Bild geöffnet ist, gehen Sie zum Ebenenbedienfeld, wählen Sie die Bildebene aus und klicken Sie unten im Bedienfeld auf Ebenenstil hinzufügen. Legen Sie eine Farbüberlagerung mit den unten gezeigten Einstellungen fest:

Speichern Sie es, und es wird automatisch in allen Ihren Bibliotheken gespeichert. Wechseln Sie zurück zu XD und Sie sehen das Bild in Ihrer Zeichenfläche aktualisiert (Sie müssen es nicht erneut aus der Bibliothek zurückziehen).

Hinweis : Je nach Bildgröße kann es etwas länger dauern, bis sich die Bibliotheken aktualisiert haben.

Jetzt fügen wir unser Logo ein. Öffnen Sie die Photoshop-Datei und ziehen Sie das Symbol „Learn!“ Logo in die Bibliotheken. Dies ist die Schriftart, die ich verwendet habe.

Da unser Hintergrund dunkel ist, benötigen wir ein weißes Logo. Wechseln Sie zurück zu Photoshop und doppelklicken Sie auf das Logo von Libraries.

Schnappen Sie sich das Textwerkzeug, markieren Sie den Logotext und machen Sie ihn weiß. Speichern Sie es, und es wird automatisch auch in Ihrer XD-Zeichenfläche gespeichert.

Fügen Sie etwas Text und eine Schaltfläche ein, um den Heldenabschnitt zu vervollständigen.

Als Nächstes fülle ich den nächsten Abschnitt aus, indem ich Text und Symbole hinzufüge. Die, die ich verwendet habe, stammen aus einem kostenlosen Paket, das ich für das Smashing Magazine erstellt habe und das Sie hier finden können.

Öffnen Sie wie zuvor die Symbole und fügen Sie sie zu Ihren Bibliotheken in Photoshop hinzu. Wechseln Sie dann zurück zu XD, um sie in Ihrem Drahtmodell zu platzieren. Hier ist das Ergebnis:

Jetzt gehen wir zum Feature- Bereich über. Wie zuvor ziehen wir ein Bild auf den Bildplatzhalter (ich habe dieses Bild von Sonnie Hiles verwendet, das auf Unsplash gefunden wurde). Fügen Sie etwas Text und eine Schaltfläche hinzu, wie ich es Ihnen in den vorherigen Schritten oben gezeigt habe.

Öffnen Sie die von mir bereitgestellte Photoshop-Datei und fügen Sie das Häkchen-Symbol zu Ihren Bibliotheken hinzu. Öffnen Sie Bibliotheken in XD und platzieren Sie das Symbol neben dem Text. Verwenden Sie das Wiederholungsraster, um drei Kopien davon zu erstellen:

Lassen Sie uns nun die Farbe des Häkchensymbols ändern. Gehen Sie zurück zu Photoshop, öffnen Sie es aus den Bibliotheken und geben Sie ihm eine Farbüberlagerung, wie unten gezeigt:

Speichern Sie es und sehen Sie Ihre Symbole in XD direkt aktualisiert.

Lassen Sie uns nun unser Layout beenden.

Fügen Sie für den Abschnitt Testimonial Text und ein Bild für das Testimonial hinzu (ich habe meins von UI Faces genommen).

Schließlich fügen wir Informationen für den Abschnitt „ Preis “, den Abschnitt „ Abonnieren “ und die Fußzeile hinzu. Preistabellen finden Sie in der von mir bereitgestellten Photoshop-Datei. Ziehen Sie sie in Ihre Bibliotheken in Photoshop, öffnen Sie dann Bibliotheken in XD und ziehen Sie sie in Ihre Zeichenfläche. Fühlen Sie sich frei, sie nach Belieben zu ändern.

Und… wir sind fertig!

Fazit

In diesem Lernprogramm haben wir gelernt, wie man mit Photoshop und Adobe XD arbeitet, um ein Drahtgitter zu erstellen, und wie man es dann schnell originalgetreuer macht, indem man Bibliothekselemente ändert. Als Referenz habe ich ein mobiles Wireframe erstellt, mit dem Sie dieses Tutorial üben und befolgen können. Befolgen Sie die Schritte wie für die Desktop-Version, um Text und Bilder hinzuzufügen.

Lass mich dein Ergebnis in den Kommentaren sehen!

Dieser Artikel ist Teil der von Adobe gesponserten UX-Designreihe. Das Adobe XD-Tool wurde für einen schnellen und flüssigen UX-Designprozess entwickelt, da Sie damit schneller von der Idee zum Prototyp gelangen können. Entwerfen, prototypisieren und teilen – alles in einer App. Sie können sich weitere inspirierende Projekte ansehen, die mit Adobe XD auf Behance erstellt wurden, und sich auch für den Adobe Experience Design-Newsletter anmelden, um auf dem Laufenden zu bleiben und über die neuesten Trends und Erkenntnisse für UX/UI-Design informiert zu bleiben.