Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Adobe XD lernen

Vom Wireframe zum Mockup

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Ausarbeitung von einem Wireframe zu einem Mockup folgt den gleichen Arbeitsschritten, die auch bereits bei der Erstellung eines Wireframes gesetzt wurden – nur, dass jetzt genaue Einstellungen bezüglich Typographie, Bildern und Schmuckelementen vorgenommen werden. Das Video demonstriert, wie man mit der Überführung von einem Wireframe zu einem Mockup beginnen kann.

Transkript

Nachdem das Wireframe abgenommen wurde, wir also mit der Arbeit beginnen können, aus diesem Wireframe einen Mockup zu generieren, sind im Grunde die gleichen Schritte wie auch zuvor schon notwendig, nur dass wir uns jetzt konzentrieren auf Design, auf Typographie, auf Farben, Bildmaterial etc. Ich möchte anhand der Startseite einmal demonstrieren, wie man dann in diesem Prozess, in diesem Designprozess oder in diesem Workflow damit beginnt. Zunächst einmal würde ich selbstverständlich das Wireframe separat abspeichern, wobei nichts dagegen spricht, das jetzt in einer Datei, also in der Wireframe-Datei, auch direkt zu bearbeiten. Ich gebe nur zu bedenken, wenn Sie das z. B. testen möchten in einem Device oder in der Vorschau, dann haben Sie halt immer zwei Versionen drin, ist aber durchaus möglich. Ich mache mir mal ein bisschen Platz, ziehe das Ganze mal ein Stück rüber und mit gedrückter Alt-Taste lege ich mir hier einfach ein neues Device oder ein neues Fenster an, so. Und zoomen wir da mal rein. Diesen ganzen Inhalt brauche ich im Großen und Ganzen nicht, kann das also auch wieder löschen. Ich hätte auch ein neues, leeres Fenster aufmachen können, kein Thema. Jetzt benenne ich das gerade noch um in "Wireframe", so. Und das ist dann der ganz normale Welcome-Screen. Meine übliche Vorgehensweise ist tatsächlich so, dass ich mir immer mein Wireframe nehme, setze das daneben, um mich daran zu orientieren, und beginne dann mit der Umsetzung dieses Designprozesses. Jetzt ist mir bewusst, dass später an dieser Position ein Bild angezeigt werden soll. Und aus diesem Grund könnte ich natürlich auch hier direkt ein passendes Bild verwenden. Aber man möchte sich ja bei Wireframes von Farben und Details noch nicht ablenken lassen. Dennoch mag ich persönlich es sehr, dass bei der Gestaltung eines Designs auf gerätespezifische Oberflächenobjekte zurückgegriffen werden kann. So gibt es bei Windows das markante Kreuz zum Schließen eines Fensters oder beim iPhone bspw. die Batterieanzeige oder das WLAN-Symbol. Und ganz interessant ist in dem Zusammenhang vielleicht, dass auch Adobe XD mit sog. UI Kits daherkommt und uns auch dabei kräftig unterstützt. Und da haben wir die Wahl zwischen Apple iOS, Google Material und Microsoft Windows. Da ich hier eine App für iOS entwickle, öffne ich das mal. Und jetzt kann ich mir bestimmte Objekte herausholen. Sie sehen im Übrigen hier unten die ganzen Elemente für die Entwicklung einer Apple Watch App, und hier oben halt für das ganz normale iPhone. Ich brauche nicht viel an Elementen. Ich greife mir das, was ich jetzt hier mal sehe, markiere das also quasi. Theoretisch kann ich auch hier unten drauf verzichten. Ich nehme nur den oberen Block mit Command+C in die Zwischenablage, dann schließe ich das wieder, und mit Command+V füge ich das Ganze jetzt hier entsprechend ein. Und damit muss ich jetzt das Ganze nur noch positionieren. Das sieht aber schon ganz gut aus, mehr brauche ich gar nicht machen. Was mir nicht gefällt, das sind die Einstellungen, wie Sie so im deutschsprachigen Raum nicht vorkommen, und das würde ich gerne entsprechend noch abändern. Also, das Erste, was ich ändere, ist mal die Uhrzeit. Ich führe hier einen Doppelklick drauf aus, und das finde ich eben ganz besonders elegant gelöst, dass es bei dem Übertrag auf diese einzelnen Elemente auch wirklich noch sich um bearbeitbare Elemente und Objekte handelt. Also, ich kann jetzt hier ohne große Probleme die Schreibweise im z. B. deutschsprachigen Raum eintragen, kann das natürlich auch noch platzieren, damit es auch in der Mitte ist. Als Carrier möchte ich den nicht da stehen haben, sondern ich nehme jetzt einfach mal so was wie hier, funktioniert, und platziere mir das auch hier wieder zentriert. Ich denke, Sie sehen, worauf das hinausläuft. Und es ist eine wirklich schicke Funktion. Was ich jetzt nicht mehr brauche, ist diesen Block hier unten. Das nehme ich mal raus. Und um das Ganze so ein bisschen abzutrennen, wäre hier eine Linie denkbar, aber da gleich hier auch eine Leiste hinkommt, die das Ganze mit der Grafik direkt begrenzt, kann ich mir das sparen. Dann wäre der nächste Schritt im Prinzip genauso vorzugehen mit einer Grafik. Und auch das habe ich vorbereitet. Wir haben also hier einen Ordner mit einigen Fotos von dem Rallye-Sport. Und ich schalte mal grad um auf diese Optik, dann sieht man das besser. So, da habe ich also hier dieses erste Bild, das zweite Bild, da sieht man, es ist schon bearbeitet, und das dritte Bild. Und da es sich hier um JPEGs handelt, wird auch schon deutlich, dass es wahrscheinlich mit einem externen Programm wie Adobe Photoshop bearbeitet wurde. Und genau das habe ich auch gemacht. Es handelt sich ja um ein und dasselbe Bild. Ich habe es halt hier nur mal ein bisschen verändert. In Grenzen kann man so etwas auch in Adobe XD machen, aber gerade, was so die Bildbearbeitung angeht, vielleicht noch mit Effekten, also, wenn man die Variante hier im Vorfeld sich anschaut, dann wird das hier durchaus etwas schwieriger. Also, mache ich das auch ganz gerne im externen Workflow und brauche jetzt im Grunde dieses Bild in meiner Gestaltung und platziere das nun einfach. Jetzt haben wir natürlich hier ein Riesenimage, weil es ist ja im Original. Sie können das selbstverständlich auch noch kleiner machen. Man muss hier nicht wirklich die Originalgröße eines solchen Bildes nehmen, kostet auch Speicherplatz, aber von der Art und Weise her macht es jetzt natürlich nichts aus. Und ich kann mir sicher sein, dass ich hier eine auch wirklich bestmögliche Qualität habe. Und das Ganze passe ich jetzt einfach nur auf die Breite meiner Applikation an. Und dann sieht man hier, habe ich auch schon den großen Vorteil dieser Abgrenzung zur oberen Leiste und das hat schon was, das sieht schon wirklich so aus, wie man sich das eigentlich wünschen mag. Und jetzt theoretisch gesehen, ich hätte auch hier sicherlich hingehen können und hätte eine Grafik da drüber gelegt, oder besser gesagt, ein Zeichenobjekt. Das kann man dann mit einer bestimmten Fläche füllen. Und Sie sehen, jetzt wird hier auch schon wieder eine andere Farbe entstehen. Also, das ist auch durchaus möglich, es ist nicht zwingend, dass man das in einem Photobearbeitungs- oder Bildbearbeitungsprogramm machen muss, aber je nachdem, wie gesagt, was Sie vorhaben, sicherlich die einfachste Art. So, jetzt habe ich auch schon ein ganz klein bisschen Vorarbeit geleistet und hole mir das mal. Sie sehen, hier unten habe ich schon einige Designs umgesetzt. Das kopiere ich in die Zwischenablage und dann entsprechend hier hinein. Und da sind wir dann schon fast fertig. So. Und wie ist dieses Ganze aufgebaut? Ich hole das Bild zunächst mal in den Vordergrund, rechte Maustaste auf das Bild. Und dann einfach hier in den Vordergrund setzen. Und wie ist das Ganze entsprechend aufgebaut? Erstmal fällt mir auf, dass das Bild wahrscheinlich noch nicht groß genug ist, muss das also hier noch ein ganz klein bisschen anpassen, damit ich wirklich hier über diese Fläche drüber komme. So soll das nämlich aussehen. Und das kann ich ja ohne Probleme, ich kann es zentrieren oder anders anordnen, vollkommen egal, solange ich dann auf meiner Zeichenfläche bleibe, sieht das dann auch so aus, wie wir das gerade sehen. Was ich benötige ist ein Schatten, denn das Ganze soll ein wenig erhaben wirken. Und das kann auch ruhig ein bisschen mehr sein, gehen wir mal auf 10, 10 von dem Bild, und das auch nicht in dieser Form, sondern es kann ruhig ein bisschen kräftiger sein. Sie sehen, so ungefähr soll das aussehen. Ich zeige Ihnen jetzt nur ganz kurz an den fertigen Objekten, wie die Umsetzung stattgefunden hat. Einmal ist vielleicht interessant hier unten dieser Streifen. Im Großen und Ganzen ist das ganz simpel umgesetzt. Ich habe also lauter einzelne Quadrate, wie man hier erkennen kann, und diese ordne ich einfach in drei Reihen an, jeweils im Karree, und habe dann dieses komplette Objekt gruppiert. Nachdem ich das gruppiert habe, kann ich es ganz einfach nach oben ziehen und hole dann die Objekte aus der Gruppierung heraus. So, und jetzt sieht man, es ist ganz das Gleiche wie hier oben und das schiebe ich dann einfach so da drunter. Und so ist dann dieser Effekt schon entstanden. Ich lösche das wieder. Das sind alles ganz normale Rechtecke, auch das hole ich alles mal gerade aus der Gruppierung, damit wir da besser dran kommen. Hier habe ich also, wie man gut erkennen kann, nur die linke untere Ecke abgerundet, genauso wie dann hier das Gegenteil davon, die rechte untere Ecke. Ich habe den Text übertragen hier in ein entsprechendes Layout und das Ganze, das hat mir dann nicht ganz so gefallen mit diesen Rundungen hier unten. Das habe ich dann in den unteren Bereich der Zeichenfläche gesetzt. Der Hintergedanke war auch der, dass ich es angenehmer fand, mit dem Daumen die einzelnen Menüpunkte aufzurufen. Hier hätte ich etwas weiter nach oben gemusst und hier habe ich eine viel bessere Optik erreichen können, dass ich weiß, wo ich mit dem Daumen hin klicken muss. Schauen wir uns mal an, wie wir den Hintergrund gemacht haben, weil der ist vielleicht noch interessant. Ich nehme die erste Ebene weg und da sieht man schon, hier habe ich eine Fläche erstellt, ganz normal ein Rechteck, das weich gezeichnet wurde mit diesen Einstellungen. Und hier liegt im Hintergrund ein ganz normales Bild, ebenfalls aus meiner Liste der Fotografien der Rallye-Fotografien, und das habe ich nun schlicht einfach hier in den Hintergrund gelegt, so wie wir es gerade gesehen haben, und dann diese Ebene dort drüber. Und das gibt diesen wunderschönen Effekt. Muss man nicht so machen, man kann sicherlich auch andere Elemente dort hineinsetzen, miteinander verwischen oder Sie arbeiten kreativ in Photoshop, ganz egal. Mir ging es jetzt nur darum, dass ich Ihnen zeige, wie man mit ganz simplen, einfachen Mitteln durchaus auch solche tollen Strukturen, wie ich finde, erstellt. Ja, das sind wiederum ganz normal die übernommenen Objekte aus dem Wireframe und da habe ich nicht viel geändert, außer dass ich hier den Rahmen etwas größer gesetzt habe. Ich habe noch so einen Pfeil drauf gesetzt, das fand ich ganz passend, das Ganze so strukturiert, dass es von der Optik her dann auch in mein Layout hinein passt. Und das fertige Ergebnis sieht nun so aus, dass ich also den ersten Eindruck wirklich bekommen kann von meinem Layout. Es hat diese giftgrüne Farbe, die ich als für den Rallye-Bereich besonders toll finde. Ich muss gestehen, ich mag auch einen Getränkehersteller in der Form sehr gerne. Von der optischen Seite her finde ich das klasse, was die für Layouts machen. Da habe ich mich so ein bisschen dran orientiert. Andere Ideen aus dem Rennsport, wie hier dieses Karree, und dann der Gedanke an die Benutzerführung und die Gestaltung für die erste Seite, die war maßgeblich entscheidend, weil der Benutzer natürlich die App aufruft. Und hier muss sofort klar und deutlich erkennbar sein, worum geht es, was erwartet ihn und was kann er machen. Und das ist, wie ich finde, sehr übersichtlich gelungen.

Adobe XD lernen

Lernen Sie die Funktionen des Adobe Experience Design, kurz Adobe XD, anhand eines kompletten Praxisworkshops.

3 Std. 20 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:31.01.2017
Aktualisiert am:17.03.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!