Erstelle atemberaubende Designs für Webseiten, Apps und vieles mehr mit Adobe XD. In diesem Grundkurs gebe ich dir einen umfassend Rundblick, was du mit XD alles machen kannst und wie alles funktioniert. Damit du anschließend ganz einfach und schnell deine Designs umsetzen kannst.
Vorlage herunterladenAls Erstes klären wir kurz was Adobe XD genau ist und für was es geeignet ist. Anschließend besprechen wir die Installation des Programms und welche verschiedenen Versionen es gibt. Dann starten wir direkt ein ins Programm, in dem wir uns die ersten Schritte anschauen, also wie du ein Projekt anlegen kannst. Damit wir uns auch im Programm auskennen, folgt ein anschließender Rundblick über die Oberfläche, damit wir wissen, wo was ist. Als nächstes nehmen wir dann einen der wichtigsten Teile des Programms genau unter die Lupe, die verschiedenen Werkzeuge und gehen auf Raster, Anordnungen, Objekte, Pathfinder, Texte, Bilder und Grafiken genau ein. Auch wie du projektübergreifende Elemente erstellen kannst und von deiner Creative Cloud Bibliothek profitierst werden wir besprechen. Anschließend gehen wir auch noch auf Ebenen und Add-Ons ein. Auch der Blick auf den zweiten großen Teil des Programmes darf nicht fehlen, nämlich dem Prototypen bzw. Animations Prozess, womit dein Design zum Leben erweckt wird. Abschließend nehmen wir dann noch die verschiedenen Vorschau, Export, Speicher und Freigabe Optionen unter die Lupe. Zum Schluss gibt es dann noch drei Bonus-Kapitel wo wir noch wichtige Themen im Rahmen von Adobe XD kurz besprechen. Zwischendurch gibt es immer mal kleine Tipps, Beispiele und Aufgaben, damit du auch dein neu erlerntes Wissen anwenden kannst. Falls du irgendwelche Fragen während des Kurses haben solltest, stell diese doch in den Kommentaren und wir probieren dir weiter zu helfen. Für mehr solcher Grundkurse und hunderten Tutorials kannst du meinen YouTube-Kanal gerne kostenlos abonnieren. Genug geredet fange wir jetzt an mit dem ersten Kapitel.
Was ist Adobe XD?
Bevor wir jetzt richtig durchstarten, möchte ich nochmal aufklären für, was Adobe XD gedacht ist, da es nicht immer so einfach zu verstehen ist. Adobe XD ist eine einzig und alleine Design Software, womit man die Möglichkeit hat einfach Designs für Webseiten und Geräte zu erstellen. Mit der Software kann man keine Webseite oder Apps programmieren geschweige irgendeine Art von Code. Die Software wird hauptsächlich im Bereich User Experience also Interaktionsdesign verwendet um ein optimales Design für neue Anwendungen erstellen zu können, welche dann als Programmiervorlage verwendet werden können. Das ist noch ein recht neues Berufsfeld und dementsprechend ist die Software von Adobe erst wenige Jahre jung und sie wird stetig erweitert. Deswegen kann es gut sein, dass wenn du den Grundkurs zu einem späteren Zeitpunkt schaust, einige neue Funktionen existieren, aber die Grundelemente, um welche es hier geht, sollten alle eigentlich noch so sein wie jetzt.
Installation & Preis
Grundsätzlich kannst du Adobe XD kostenlos aber eingeschränkt nutzen. Egal ob du es kostenlos oder kostenpflichtig nutzt, in beiden Fällen benötigst du eine Adobe ID und die Creative Cloud auf deinem Computer um Adobe XD installieren und verwenden zu können. Was die Adobe Creative Cloud genau ist, habe ich in einem anderen Video schon ausführlich erklärt, Link in der Beschreibung. Kurz zusammengefasst, ist diese die universelle Anwendung von Adobe, über welche du Zugriff auf die ganzen Adobe Programme bekommst, sei es Adobe XD, Photoshop, Illustrator und Co. Die meisten Anwendungen sind kostenpflichtig und können nur in Form eines Jahres oder Monats Abo abonniert werden. Alle Preise findest du über diesen Link. Hier kannst du dir auch eine Adobe ID kostenlos über die offizielle Adobe XD Seite erstellen. Dann musst du die Creative Cloud als Programm auf deinem Computer installieren und dich dort mit deiner ID anmelden. Jetzt siehst du alle Programme und kannst hier Adobe XD kostenlos installieren und verwenden. Das Programm kann auf einem Windows oder Mac-Computer verwendet werden. Es gibt zwar eine App von Adobe XD für Smartphones und Tablets, diese sind aber nur ergänzend und für eine Funktion in Adobe XD da, welche wir zum Ende des Grundkursen noch besprechen werden. Jetzt habe ich aber zu Beginn gesagt es gibt eine kostenlose und kostenpflichtige Version von XD. Was ist der Unterschied? Bei der kostenlosen Version kannst du maximal ein Prototyp freigeben, hast eine eingeschränkte Adobe Fonts Auswahl, also an Schriftarten und einen Cloudspeicher von 2 GB. Mit der kostenpflichtigen Version, welche du ab 11,89€ pro Monat bekommst und auch im Alle Applikationen Abo der Creative Cloud dabei ist, kannst du unendlich viele Prototypen freigeben, hast kompletten Zugriff auf die Adobe Schriftarten und standardmäßig 100 GB Cloud Speicher, was je nach deinem Creative Cloud Abo aber variieren kann. Es gibt auch noch eine weitere Version speziell für Teams, welche wir aber in diesem Grundkurs nicht thematisieren werden. Für den Einstieg ins Programm reicht die kostenlose Version vollkommen aus, sobald man aber damit beruflich arbeiten sollte oder uneingeschränkten Zugriff auf die ganzen Cloud Funktionen bekommen möchte, sollte man Upgraden. Um diesen Grundkurs nachvollziehen zu können brauchst du keine kostenpflichtige Version.
Erste Schritte (Projekt anlegen)
Haben wir das Programm jetzt gestartet befinden wir uns auf dem Startbildschirm. Dieser Bildschirm erscheint auch immer wieder, sofern wir ein neues Projekt erstellen wollen. Hier haben wir zentral in der Mitte direkt die Möglichkeit ein neues Projekt anhand einer Zeichenfläche zu starten. Hier können wir ganz einfach gängige Smartphone, Tablet oder Computermaße auswählen. Über das Dropdown Menü hat man noch eine größere Auswahl. Am rechten Rand kannst du aber auch deine eigenen Maße erstellen und du siehst auch immer untern den Vorlagen welche genauen Maße diese haben. Schlussendlich wird dein Prototyp aus mehreren Zeichenflächen bestehen und du kannst in einem Projekt auch die Maße später ändern und verschiedene Maße in einem Projekt haben. Neben den Zeichenflächen kannst du auch direkt eine offizielle Tutorial Datei öffnen, wo uns das Programm näher gebracht wird. Wir werden alles was du da findest auch noch in diesem Grundkurs besprechen, aber falls du schon einen kleinen Teaser haben möchtest, kannst du dir diese gerne anschauen. Unter den Vorlagen siehst du auch alle deine zuletzt verwendeten Projekte, mit Vorschaubild, Namen und Speicherort. Auf der linken Seite kannst du dann neben dieser Startseitenansicht auch Add-Ons aufrufen, welche wir uns später noch genauer anschauen werden. Im nächsten Bereich, kannst du alle deine Projekte verwalten. Hier hast du ganz oben deine sogenannten Cloud-Dokumente, welche super praktisch sind. Hier kannst du direkt die Adobe XD Projektdateien in deiner Creative Cloud Speichern, und so von jedem Gerät aus direkt aufrufen und hier siehst du auch alle deine gespeicherten Projekte und kannst diese dann öffnen und weiter an ihnen arbeiten. Sollte jemand dir ein Projekt freigegeben haben, findest du dieses im Bereich darunter und unter Links verwalten kannst du auch die Projekte sehen, welche du freigegeben hast, aber am Ende noch mehr dazu und als letzten Punkt siehst du noch deine gelöschten Projekte. Du kannst natürlich aber auch Projekte direkt auf deinem Computer speichern und diese auswählen. Am unteren Rand kommst du auch auf eine Seite, wo du alle aktuellen neuen Funktionen sehen kannst. Wie schon erwähnt wird zu Adobe XD monatlich neue Funktionen und Co. hinzugefügt und es ist immer einen Blick Wert, zu schauen was sich so verändert. Darunter findest du auch noch die offizielle Hilfeseite von Adobe XD und du kannst Feedback zum Programm hinterlassen. Hier kannst du auch neue Funktionen vorschlagen und andere Vorschläge upvoten. So sehen die Entwickler was am meisten gefragt ist und sie haben schon vieles daraus ins Programm über die Zeit eingebaut. Um jetzt ein neues Projekt zu erstellen wähle einfach deine Masse aus. Ich werde hier bspw. eine Webseite erstellen, deswegen wähle ich jetzt Web 1920 aus, was einer Full-HD Seite entspricht.
Oberfläche
Haben wir jetzt ein Projekt geöffnet, befinden sich dieses direkt in der Mitte. Drumherum ist das Programm eigentlich ähnlich aufgebaut, wie auch andere Programme von Adobe. Hier hast du auf der linken Seite deine Werkzeugleiste, wo du diese hier alle auswählen kannst. Am unteren Rand kannst du hier auch noch deine Elemente, Ebenen und Add-Ons abrufen. Auf der rechten Seite kannst du dann alle möglichen Einstellungen, zu deinem aktuell ausgewählten Element machen oder prinzipiell zur ausgewählten Zeichenfläche. In der Mitte siehst du dann alle deine Zeichenflächen, welche du oberhalb durch doppelklicken Umbenennen kannst und über die blauen Ränder die breite verändern kannst. Wenn du diese nach unten oder oben verlängert, wird die Seite länger und du kannst später auf dieser scrollen. An dem nun erstellten gestrichelten blauen Strich siehst du immer was standardmäßig zusehen ist und alles was unter diesem ist, erreicht man durch das scrollen.
Bei diesem Beispiel Social Media App Design von mir sieht man bspw auf der Standardansicht den ersten Post und den oberen Teil des zweitens. Durch scrollen kann man aber alle drei erstellten Post in der Vorschau sehen. Am oberen Rand siehst du in der Mitte deinen Projektnamen und an der Wolke daneben, siehst du dass es sich um ein Cloud Projekt handelt, dass ist nämlich meisten standardmäßig. Klickst du auf den Namen kannst du dein Projekt aber auch umbenennen und manuell festlegen ob es auf deinem aktuellen Gerät gespeichert werden soll. Teilst du dein Projekt mit einem Team kannst du über den Namen auch andere Version abrufen, aber später noch mehr dazu. Am rechten Rand kannst du die dargestellte Größe deiner Zeichenflächen im Programm anpassen. Grundsätzlich kannst du aber auch durch gedrückte Alt Taste und dem Mausrad immer einfach ein und auszoomen. Mit der Shift Taste und dem Mausrad kannst du auch nach Links oder Rechts scrollen, in deinem Projekt.
Mehr hilfreiche Tastaturbefehle zu Adobe XD und anderen Adobe Programmen findest du auf unserem Instagram Account: @simontutorial.
Neben den Größeneinstellungen kannst du auch eine Live Vorschau auf deinem aktuellen Gerät oder in der App öffnen, sowie andere Mitglieder zum Projekt hinzufügen, später noch mehr dazu. Am linken Rand kommst du dann auch noch in den Prototyp und Freigabebereich und über das Haus-Symbol öffnet sich die Startseite, welche wir eben schon besprochen haben und du kannst ein weiteres Projekt in einem neuen Fenster öffnen. So kannst du auch mehrere Projekte gleichzeitig offen haben und über Kopieren und Einfügen auch Elemente zwischen diesen austauschen. Über das Burger Menü kommst du noch zu den Standardeinstellungen. Wo du auch direkt ein neues Projekt starteten oder ein anderes öffnen kannst. Auch UI Kits kannst du hier abrufen, dazu ganz am Ende noch mehr und deine CC-Bibliothek kannst du hier abrufen und dein Projekt umbenennen. Auch dein Projekt kannst du hier speichern und auch über Speichern unter eine weitere Projekt-Kopie erstellen. Schlussendlich kannst du hier auch die Rechtschreibprüfung verwalten sowie einzelne Zeichenflächen exportieren, importieren oder das Projekt freigeben. Auch die Plugins kannst du hier verwalten aber zu den ganzen Sachen später in Ruhe noch mehr.
Werkzeuge
Schauen wir uns jetzt erstmal die ganzen Werkzeuge aus der linken Seite an, mit welcher du schlussendlich alles auf deinen Zeichenflächen erstellen kannst. Hier hast du ganz oben das Auswahl-Werkzeug, mit welchem du einzelne Objekte oder mehrere Auswählen kannst um diese dann über das Menü auf der rechten Seite bearbeiten zu können, oder einfach um Objekte zu verschieben. Darunter findest du dann die vier Formtools. Damit kannst du Rechtecke, Kreise, Dreiecke und Linien ganz einfach erstellen. Einfach die jeweilige Form auswählen und auf der Zeichenfläche auf schieben. Durch gedrückte Shift Taste dabei, kannst du auch proportional feste Formen erstellen. Also bspw. ein Quadrat mit dem Rechteck-Tool oder einen perfekten Kreis oder Dreieck und beim Linientool gerade Linien oder in jeweils 45 Grad Neigungen. Das ist eine Tastenkombination die ich sehr oft verwende, da man sie einfach für cleane Designs immer mal braucht. Unter den Formentools hast du auch ein Pfadtool, womit du quasi individuelle Formen erstellen kannst. Einfach durch das Verbinden von mehreren Punkten. Grundsätzlich erstellst du damit Linien, wenn du aber deine Form schließt, in dem du mit dem aktuellen Ende auf den ersten Punkt klickst, hast du eine Form. Du kannst alle Punkte auch nachträglich mit dem Auswahl-Werkzeug verschieben um die Form zu verändern. Auch ein Text-Tool hast du, mit welchem man einfach Texte durch klicken oder durch das Aufschieben von einem Bereich erstellen kann. Als vorletztes hast du dann noch die Möglichkeiten neue Zeichenflächen zu erstellen. Hast du das ausgewählt, siehst du auf der rechten Seite auch viele verschiedene Vorlagen welche du auswählen kannst, du kannst aber auch einfach in einem leeren Bereich deine eigene Zeichenfläche auf schieben, so wie du auch Formen aufschieben kannst. Wenn du jetzt bspw. mehrere Zeichenflächen für eine Anwendung benötigst kannst du auch einfach durch das Auswählen der ersten Zeichenfläche, diese mit Strg+C und Strg+V kopieren. So kann man sich auch später viel Zeit Sparen da man schon erstellte Designs kopieren kann und diese dann weiter bearbeiten kann. Als letztes Werkzeug hast du dann noch die Lupe mit welchem du in dein Projekt reinzoomen kannst und mit gedrückter Alt Taste rauszoomen kannst. Da ich das grundsätzlich in Kombination mit dem Mausrad mache, nutze ich dieses Tool gar nicht aus der Werkzeugleiste.
Raster & Anordnen
Bei Designs für Apps und Webseiten geht es viel darum symmetrische Anordnungen und Aufteilungen zu haben. Vielleicht hast du schon gesehen, als wir eine Form erstellt und bewegt haben, dass manchmal pinke Linien aufgeblitzt sind. Das sind die automatischen Anordnung Linien wo du ganz einfach Objekte zentrieren und anordnen kannst, durch einfaches hin schieben und dann rastern die leicht ein. Wenn du jetzt aber ein Objekt ausgewählt hast, kannst du am rechten Rand auch dieses direkt an eine Komposition ausrichten oder wenn du mehrere Elemente gleichzeitig ausgewählt hast, diese miteinander ausrichten. Hier kannst du Festlegen dass sie sich auf einer gleichen Ebene oberhalb, unterhalb oder Mittig befinden sollen. Aber auch Links, rechts und dort mittig. Hast du mehrere Objekte kannst du auch den Abstand zwischen diesen gleichmachen, horizontal oder vertikal. Wir haben hier jetzt 5 Kreise welche alle auf der gleichen Ebene, also Mittig sein sollen, mit dem gleichen Abstand. Das können wir jetzt einfach oberhalb auswählen und tadaa, es hat funktioniert. Jetzt haben wir aber neben dem Anordnen auch die Möglichkeit eine Zeichenfläche zu rastern. Dafür wählen wir eine Zeichenfläche aus und können ein Raster jetzt am rechten Rand aktivieren. Hier können wir zwischen Raster Kästchen, also so College Block Style oder einem eigenen Layout wählen. Bei den Raster Kästchen können wir lediglich die Größe dieser auswählen. Bei dem Layout können wir die Anzahl der Spalten, deren Breite und Abstand einstellen. Auch ob es Linien oder Kästchen sein sollen, kann man noch festlegen. Hier kann man die jeweilige Länge in alle vier Richtungen bestimmten. Egal welches Raster du verwendest, dieses wird auf deinem schlussendlichen Design, wenn du es exportiert nicht zu sehen sein, sie helfen dir nur dabei Objekte an diesen auszurichten. Du kannst damit natürlich aber noch alles so platzieren wie du es gerne magst. Das soll dir nur eine Hilfe sein, dein Design symmetrisch oder nach Bestimmten Abständen designen zu können. Für jede Zeichenfläche kannst du ein anderes Raster festlegen. Pausiere diesen Grundkurs jetzt am Besten und überlege dir doch mal ob es Sinn macht für deine Idee ein Raster anzulegen. Meistens ist es der Fall und dann Erstell doch mal eins. Denn das solltest du zu Beginn machen, bevor du mit dem richtigen Design loslegst.
Objekte & Pathfinder
Wir haben ja jetzt schon die 4 bzw. 5 Formtools, wenn wir den Pfad noch mit dazu nehmen kennen gelernt. Doch mit diesen 5 Formen kann man doch nicht ein komplettes Design erstellen? Doch kann man, dass ist wie mit Farben, man hat die Grundfarben und aus diesen kann man sich alle anderen Farben mischen. Wir haben hier jetzt die Grundformen und daraus können wir, mit der Hilfe des praktischen Pathfinder-Tool, ganz einfach alle Formen kreieren wie wir wollen. Dafür müssen wir aber auch verstehen wie das Funktioniert. Wer Illustrator verwendet kennt dies wahrscheinlich schon, da es dort genau die gleiche Funktion gibt. Du findest den Pathfinder im rechten Menü unter den Anordnungsfunktionen. Dieser ist jedoch ausgegraut, wenn du ein Objekt ausgewählt hast. Um ihn verwenden zu können musst du mind. 2 Objekte auswählen. Weil mit dem Pathfinder kannst du zwei Formen zu einer Form werden lassen. Hier kannst du grundsätzlich sagen, dass die fläche von beiden Formen eine Form ergeben soll. Du kannst aber auch sagen, dass die überschneidende Fläche von der einen Form die andere Form abschneiden soll oder dass nur die Fläche erhalten werden soll, als Form, wo beide Flächen übereinander liegen. Schließlich auch nur die Flächen die nicht übereinander liegen. So kannst du ganz einfach komplexere Formen aus Grundformen erstellen. Das coole am Pathfinder ist, dass dieser nicht irreversible ist, also wenn du ihn einmal aktiviert hast, kannst du durch erneutes Klicken darauf ihn wieder deaktivieren und so die alten Formen wieder verwenden. Doch was kannst du eigentlich alles mit so einer Form anstellen? Grundsätzlich wenn du eine Form erstellt und ausgewählt hast, kannst du ganz viel auf der rechten Seite einstellen. Unter Erscheinungsbild kannst du die Deckkraft also die Transparenz der Form festlegen und auch Füllmethoden anwenden, welche du vielleicht auch aus Photoshop kennst. Diese verändern das Verhalten der Form in bestimmten Licht und Farb Situationen. Darunter kannst du aber auch die Farbe der Fläche, der Kontur und einen Schatten einstellen. Durch das klicken auf das Farbfenster findest du eine Farbauswahl, wo du am rechten Rand auch eine Transparenz festlegen kannst und unterhalb auch direkt einen Farbcode eingeben kannst sowie über die Pipette eine Farbe aus dem Programm auswählen kannst, welche das Objekt annehmen soll. Ganz unten kannst du auch spezifische Farben für das Projekt hinzufügen, welche dann bei jedem Farbfenster unten angezeigt werden und du direkt dann auch für andere Objekte auswählen kannst. Über den Schriftzug “Farbfläche” kannst du auch einen linearen oder radialen Farbverlauf erstellen. Ein linearer Farbverlauf ist einfach, wenn von einer zu einer anderen Farbe gegangen wird auf einer Linie. Beim Radialen Farbverlauf befindet sich die eine Farbe auf einem Punkt um welche dann, wie ein Kreis die andere Farbe verläuft. Bei beiden Verläufen siehst du dann die beiden Farbpunkte auf deinem Objekt und kannst diese auch frei anpassen. Im Farbfenster kannst du dann aber natürlich auch beide Punkte auswählen und die gerade besprochenen Farboptionen jeweils anwenden. Neben der Füllfarbe deiner Form kannst du auch eine Kontur, bzw. Rahmen festlegen, wo du die gleichen farblichen Möglichkeiten über das Feld hast. Hier kannst du zusätzlich noch die Dicke der Kontur festlegen und du kannst die Kontur auch stricheln durch die Lücken und Strich Funktion. Je höher die Lücke desto breiter der Abstand zwischen den Strichen und je höher die Striche desto dicker werden diese. Darunter kannst du auch noch festlegen, wie sich die Kontur an Kanten verhält und ob diese bspw. abgerundet werden soll. Unter Schatten kannst du, wie der Name schon sagt, einen Schatten hinzufügen. Wo du durch die X und Y Werte die Position des Schattens festlegen kannst. Diese gehen immer von der Form aus und unter W kannst du die Weiche des Schattens festlegen. Als letztes hast du hier noch die Möglichkeit Hintergrund weichzeichnen, dass schauen wir uns aber bei Bildern noch genauer an, da es dort mehr Sinn macht. Grundsätzlich kannst du aber auch noch, wenn du eine Form auswählst diese über die Ränder verformen. Im Menü kannst du hier auch genaue Werte eingeben und auch das Objekt drehen, in dem du eine Gradzahl eingibst oder auch Horizontal oder Vertikal Spiegeln. Klickst du doppelt auf ein Objekt, erscheinen am Rand auch noch weitere Punkte, welche du nach innen oder aussen ziehen kannst um die Ecken abzurunden. Dies kannst du dann auch durch bestimmte Werte am rechten Rand machen. Hier kannst du auch festlegen ob alle Ecken gleich abgerundet werden sollen oder jede einzeln. Jetzt bist du an der Reihe. Erstell doch mal eine Startseite für eine App oder Webseite, nur mit den Formtools und den Möglichkeiten welche wir bisher besprochen habe. Auch gerne anhand eines Rasters um die Symmetrie zu wahren. Ich habe hier bspw. jetzt einen Rohling für eine Tagebuch-Webseite erstellt. Hier haben wir auf der linken Seite die Grundform für den täglichen Tagebuch Eintrag und auf der rechten Seite Platz für ein inspirierendes Zitat. Der Hintergrund wird auch durch eine blaue Form in den nächsten Bereich übergeleitet und im oberen rechten Menü ist Platz für ein Profilbild und wir haben hier im Menü auch eine Form welche symbolisiert, wo wir uns gerade auf der Webseite befinden. Du kannst dir mein Projekt auch als Vorlage am Anfang des Artikels herunterladen und dir die Datei nochmal in Ruhe anschauen, wie ich alles aufgebaut habe. Pausiere den Grundkurs hier gerne wieder und nimm dir die Zeit anhand von deinem eigenen Praxis Projekt die Sachen zu intensivieren.
Texte
Du hast jetzt in meinem Projekt bestimmt schon den Text im Menü gesehen. Wir wollen uns jetzt mit den ganzen verschiedenen Möglichkeiten von Text näher auseinandersetzen. Dafür wählst du einfach aus der Werkzeugleiste das Text-Tool aus. Damit kannst du durch einfaches Klicken auf deine Zeichenfläche direkt einen Text eintippen. Diese Möglichkeit solltest du verwenden wenn du einzelne Wörter schreiben willst. Willst du aber Blocktexte, Beschreibungen oder einfach längere Texte erstellen, rate ich dir dazu ein Textfeld aufzuschieben. Das machst du einfach wenn du beim Klicken in die Zeichenfläche, die Maustaste gedrückt hältst und ein Fenster aufziehst, sowie du bspw auch Formen erstellen kannst. Jetzt hast du ein Fenster in welches du Text schreiben kannst und an den Rändern dieses Fenster von der Größe bearbeiten kannst und sich der Text darin an dieses Anpasst. Hast du einen Text ohne Rahmen erstellst, kannst du diesen Text ganz einfach über den Punkt vergrößern oder verkleinern. Mit Rahmen kannst du nur diesen vergrößern und es beeinflusst nicht die Textgröße. Hast du jetzt einen Text ausgewählt kannst du am rechten Rand auch alle wichtigen Informationen dazu einstellen. D.h. die Schriftart, Schriftgröße und Version der Art. Auch den Buchstabenabstand, sowie Zeilenabstand und Einschub kannst du manuell ändern. Zudem kannst du auch festlegen ob der Text rechts oder linksbündig oder zentriert sein soll und kannst von der normalen in die Rahmen Version oder umgekehrt wechseln. Schlussendlich kannst du noch festlegen ob alle Buchstaben großgeschrieben oder klein geschrieben sein sollen. Sowie Hoch und Tiefzahlen kannst du erstellen und Texte unterstreichen oder Durchstreichen. Wählst du nur einen Teil des Textes aus und bearbeitest du diesen dann, wird das auch nur auf diesen Teil angewendet und du kannst so innerhalb eines Textfeld, unterschiedliche Textdarstellungen haben. Unter Erscheinungsbild kannst du auch Farben, Konturen und Schatten einstellen. Das sind genau die gleichen Funktionen wie bei den Formen.
Bilder & Grafiken
Du hast aber natürlich auch die Möglichkeit Grafiken, wie Icons und natürlich auch Bilder in Adobe XD einzufügen. Bilder kannst du einfach aus deinem Dateibrowser in dein Projekt schieben. Lässt du sie einfach in einem leeren Bereich los, werden sie in Originalgröße platziert und über die Ränder kannst du dann die Größe auch noch weiter bearbeiten und auch die Ecken abrunden. Über die Einstellungen am rechten Rand kannst du hier natürlich auch Schatten, Transparenz und Co. Einstellen. Bedenke wenn du eine Farbe auswählst, wird das Bild mit dieser ersetzt. So wie bei den Formen kannst du auch Bilder oberhalb am rechten Rand drehen, die Maße anhand von Werten anpassen und das Bild horizontal oder vertikal spiegeln. Als zweite Möglichkeit hast du aber auch die Option beim Importieren ein Bild auf eine Form zu platzieren. Dafür ziehst du das Bild einfach auf diese und lässt dann los. Jetzt wird das Bild in der Form platziert und passt sich ihrer Größe an. Wenn du mit Doppelklick in das Bild klickst kannst du dieses auch vergrößern und verschieben, innerhalb der Form um das Bild darin am Besten zu platzieren, aber immer noch die Größe der Form zu behalten. Was ich dir jetzt noch kurz Demonstrieren möchte, ist der Hintergrund weichzeichnen Effekt, welchen wir vorhin bei den Formen ausgelassen haben. Wenn wir jetzt eine Form über ein Bild legen, sehen wir diesen nicht mehr, da es ja von der Form verdeckt wird. Wählen wir jetzt aber bei der Form Hintergrund weichzeichnen aus, wird die Form quasi transparent und alles was sich dahinter befindet wird weichgezeichnet. So kannst du ganz einfach ein Hintergrundbild unscharf machen. Die Stärke, Helligkeit und Deckkraft des Weichzeichners kannst du zudem auch noch festlegen um dein optimales Bild zu kreieren. So eine Weichzeichnung ist praktisch für Hintergründe, da dadurch eine Art Tiefen Effekt erreicht wird, womit sich der Vordergrund abhebt und der Hintergrund nicht mehr so dominant zusehen ist. In Kombination von Transparenz oder Schwarz oder Weiß, sieht das meistens auch sehr gut aus.
Neben den Bilder kannst du aber natürlich auch Icons oder Grafiken importieren. Das geht genau gleich, wie mit den Bildern, ziehe diese einfach in das Projekt aus deinem Datei Explorer. Falls dir das zu kompliziert ist kannst du auch Dateien über das Menü importieren. Das Programm erkennt PNG Dateien, also Dateien die Transparenz enthalten und diese bleiben dann auch bestehen. Jedoch kannst du hier nicht über das Farbtool die Farbe von Icons bspw. ändern, da dort die Transparenz nicht erkannt wird.
Ich füge jetzt zu meiner Webseite, noch ein Hintergrundbild per Drag und Drop ein, sowie mein Logo, damit meine Anwendung auch einen schönen Namen bekommt. Zusätzlich füge ich dann noch alle Texte ein, damit man weiß, was in welches Feld geschrieben werden soll. Ich mach diese Transparent, da es ja nur Platzhalter sein sollen. Auf der rechten Seite füge ich dann ein Zitat ein, mit einem Hashtag, wo ich dann zwei unterschiedliche Schriftdicken verwende um die Wörter besser von einander unterscheiden zu können. Du kannst jetzt auch bei deinem eigenen Projekt beginnen, Texte und Bilder, sowie Grafiken einzubauen um dein Design zum leben zu erwecken. Wie schon erwähnt über den Link in der Beschreibung kannst du auch meine Vorlage herunterladen und mit dieser arbeiten.
Elemente & CC Bibliothek
Solche Designprojekte für eine Webseite können schnell sehr groß werden und viele Zeichenflächen beinhalten. Da man ja jede Seite mind. einmal erstellen muss und dann auch noch Zeichenflächen für verschiedene Interaktionen erstellen muss. Wenn du jetzt aber bspw. das Logo auf einer Seite änderst, weil es dir vlt doch nicht so gut gefällt, musst du es auf jeder Zeichenfläche manuell machen, was echt viel Zeit fressen kann. Damit du dass nicht machen musst und bestimmte Elemente universell für das Projekt funktionieren, gibt es die sogenannten Elemente. Diese kannst du am unteren linken Rand öffnen. Als solche Elemente kannst du Farben sehen, dass haben wir ja auch beim Farbfeld schon kurz besprochen, dass du für dein Projekt bestimmte Farben hinzufügen kannst. Das coole hierbei ist, wenn du dann die Farbe im Elemente Bereich bearbeitest und veränderst, wird die Farbe auf jeder Zeichenfläche auch in die neue Farbe verändert. Prinzipiell zum Thema Farben, solltest du probieren dein Design mit max. 2 unterschiedlichen Farben zu erstellen, welche sich nicht Beißen. Natürlich kannst du auch Abstufungen von den Farben, also hellere oder dunklere Versionen davon verwenden, aber grundsätzlich umso weniger unterschiedliche Farben du verwendest umso moderner und professioneller sieht es meistens aus. Vermeide auch sehr stechende oder grelle Farben, das sieht in sehr wenigen Fällen gut aus. Jetzt kannst du neben den Farben auch Schriftarten hinzufügen, welche du ebenfalls über das Elemente Fenster bearbeiten kannst und diese dann auch alle in deinem Projekt verändert werden. Auch bearbeitete Schriftarten, also mit Farbe, Dicke und so weiter kannst du unter Zeichenformate speichern. Dafür wähle einfach den Text auf deiner Zeichenfläche aus und mit rechter Maustaste kannst du ihn zu den Elementen hinzufügen. Als letzten Bereich haben wir hier den Komponenten-Bereich. Hier kannst du eigene erstelle Formen oder mehrere Formen als ein Objekt universell speichern. Sowas ist sinnvoll für Logos oder Buttons, welche auf jeder Zeichenfläche gleich groß sein sollen und gleich aussehen. Dafür wähle bspw. einfach dein Logo aus und klicke dann auf das Plus bei den Komponenten. Jetzt kannst du diese Elemente einfach immer wieder verwenden wenn du sie aus dem Komponenten Bereich ziehst. Das coole daran ist außerdem, dass du auch Zeichenflächen übergreifend diese Elemente bearbeiten kannst und diese dann auf allen angewendet werden. Grundsätzlich passiert das nicht und du kannst über die normale Bearbeitung immer individuell Veränderungen vornehmen. Willst du jetzt aber globale Änderungen vornehmen, klicke einfach eines der Elemente an und wähle im Menü, Primärkomponente bearbeiten. Jetzt siehst du die Elemente direkt neben deiner Zeichenflächen und wenn du hier jetzt was veränderst, wird es auf jeder angewendet. So kannst du jetzt einfach Elemente, Farben und Co. innerhalb eines Projekts organisieren. Jetzt gibt es aber auch noch die Möglichkeit Elemente aus anderen Projekten in dein aktuelles zu laden. Dafür klickst du einfach auf das Plus und wählst deine Adobe XD Datei aus, aus welcher du Elemente importieren möchtest. Hier kannst du auch Bibliotheken aus dem Programm Sketch importieren, falls du dieses in der Vergangenheit verwendet hast. Neben dem Plus hast du auch Zugriff auf deine Creative Cloud Bibliotheken, wo du ja auch Farben, Grafiken und Co. speichern kannst und von allen Adobe Programmen drauf zugreifen und bearbeiten kannst. So kannst du auch Elemente Programm übergreifend importieren. Das Elemente Fenster kann schnell sehr voll werden und damit du den Überblick nicht verlierst kannst du zwischen einer Raster oder Listenansicht wechseln und nach bestimmten Elementen suchen, den alle Sachen kannst du auch manuell benennen.
Ebenen
Unter dem Elemente Bereich, finden wir im Menü auch unseren Ebenenbereich. Hier siehst du alle deine Zeichenflächen, falls du gerade keine ausgewählt hast und kannst diese durchsuchen aber auch umbenennen, löschen, duplizieren oder direkt auswählen. Hast du letzteres gemacht, siehst du alle Ebenen von dieser. D.h. alle Formen, Texte, Bilder und Co. Das sieht wahrscheinlich sehr chaotisch aus wenn du es das erste Mal öffnest und viele öffnen das Ebenenfenster erst gar nicht da sie es nicht brauchen. Jedoch wenn dein Projekt sehr umfangreich wird, ist es gut seine einzelne Objekte zu benennen und zu Gruppieren um den Überblick nicht zu verlieren. Was du grundsätzlich zu Ebenen wissen solltest, ist das die Reihenfolge eine wichtige Rolle spielt. Denn Sachen die oben angezeigt werden, liegen quasi über den Objekten die darunter liegen. Als Beispiel, wenn wir hier zwei Formen haben, sehen wir die obere Form komplett und die darunter wird teilweise von der oberen überdeckt. Du kannst die Reihenfolge über einen Rechtsklick auf die Form verändern, unter Anordnen, wo du ein Objekt ganz nach oben oder unten positionieren kannst oder Schrittweise, also nur eine Form weiter nach oben oder unten. Das kannst du aber auch per Drag und Drop im Ebenenfenster machen. Du hast auch die Möglichkeit Objekte zu gruppieren wo du dann beim normalen Auswählen die Gruppe an sich bearbeitest und erst wenn du doppelt rein klickst die einzelnen Objekte darin bearbeiten kannst. Dafür kannst du einfach mit gedrückter Strg oder Cmd Taste mehrere Ebenen auswählen und über das Menü diese zu einer Gruppe erstellen. Die Gruppe kannst du natürlich auch benennen. Wenn du jetzt über eine Ebene fährst kannst du dir diese auch zum Export markieren, aber sie auch sperren, sodass diese nicht mehr bearbeiten werden kann, solange du sie nicht über den gleichen Button entsperren. Das ist bspw. praktisch wenn du einen Hintergrund erstellt hast, welcher nicht mehr bearbeitet werden solltest du aber noch einige Objekte vor diesem bearbeitest. Dann kann der nicht mehr automatisch mit ausgewählt werden und du gehst sicher diesen nicht ausversehen mal zu bearbeiten. Als letztes kannst du auch einzelne Ebenen und Gruppen ausblenden umso diese nicht mehr auf der aktuellen Zeichenfläche zu sehen aber nicht zu löschen, falls du sie vlt doch noch zu einem späteren Zeitpunkt verwenden willst. Wie schon zu beginn gesagt, du musst das Ebenen Fenster nicht unbedingt sortieren und alles benennen, erst recht wenn du nicht viel Zeit hast. Es ist aber gut zu wissen dass es exestiert, was es macht und wie es funktioniert.
Add-Ons
Du hast die Möglichkeit Adobe XD mit Add-Ons an Funktionen und Möglichkeiten immens zu erweitern. Du kannst ganz unten links dein Add-Ons Fenster öffnen, wo du alle verwendeten Add Ons sehen kannst und auch auf den Store zugreifen kannst um welche zu installieren. Die Auswahl von Add Ons ist riesig. Man muss dazu aber sagen, dass diese nicht von Adobe sondern von Dritten erstellt wurden und es bei manchen manchmal zu Komplikationen kommen kann. Deswegen orientiere dich vor dem Installieren an den Bewertungen und den Funktionen dieser Add Ons. Verwende Add Ons am Besten nur, wenn du wirklich von ihnen profitierst. Du findest hier Add Ons welche dir dabei helfen schneller ein gewünschtes Design zu erhalten oder jegliche Art wie du Daten in dein Design einfach einbinden kannst. Hast du ein Addon hinzugefügt, siehst du es im Fenster und kannst auf seine Funktionen zugreifen. Hier ist es je nach Add On natürlich anders. Aber über das Drei Punkte Menü am Add On kannst du dieses auch verwalten. Hier kommst du dann wieder in eine Übersicht wo du alle deine installierten Add Ons siehst und diese über das drei Punkte Menü deaktivieren oder deinstallieren kannst. Du solltest sie nur deinstallieren wenn du dir sicher bist dass keine Funktion vom Add On mehr in deinem Design ist, weil dies sonst dein Design zerstören könnte. Wenn du es nur deaktivierst kannst du es ggf. auch wieder aktivieren, wenn du es doch nochmal benötigst.
Prototyp & Animieren
Wir haben jetzt unser Design erstellt, wie wir es uns vorgestellt haben, mit allen verschiedenen Seiten, Elemente und Co. Bevor wir jetzt unser Design zum Leben erwecken und Seiten miteinander verknüpfen will ich dir noch kurz die Logik dahinter erklären. Den schlussendlich sind die Zeichenfläche quasi nur wie ein Screenshot, also ein Bild was du erstellt hast. Jetzt hast du die Möglichkeit, wenn man auf bestimmte Elemente in der Zeichenfläche klickst, zu einer anderen Zeichenfläche, also quasi einen anderen Screenshot zu kommen, auf verschiedene Wege, welche wir uns gleich anschauen werden. D.h. wenn du bspw. durch das Klicken auf die Pfeiltasten in diesem Design, einen Tag nach vorne springen willst, musst du das Design einmal für den ersten Tag und einmal für den zweiten Tag haben, damit du diese dann miteinander verbinden kannst. Hier habe ich dir hier jetzt mal ein anderes Projekt mitgebracht, meine Make Your Burger App wo man das noch besser sehen kann. DU siehst ich habe hier bestimmte Screens mehrfach wo einzelne Elemente grün hinterlegt sind, was als Auswahl angezeigt werden soll. D.h. wenn man dann bei dem Design davor auf diesen Bereich klickt, wird er grün, da es zu dem anderen Design wechselt wo du dieser Grün ist. Sofern man mehrere Möglichkeiten haben will, kann das Projekt immer komplexer werden. Aber genug davon, wie macht man das jetzt alles? Dafür wechseln wir im oberen Bereich in den Prototyp Bereich. Hier siehst du jetzt auch alle deine Zeichenflächen. Du kannst hier aber die Formen lediglich auswählen und verschieben aber nicht mehr bearbeiten. Das siehst du auch daran, dass die Werkzeugleiste verschwunden ist. Wenn du jetzt ein Elemente auswählst siehst du einen blauen Pfeil an der Seite. Klickst du diesen an kannst du per Drag und Drop festlegen, welche Zeichenfläche erscheinen soll, wenn das Objekt angeklickt wird. Anhand der Verbindungslinie siehst du auch später immer noch alle Verbindungen. Hast du so eine Linie ausgewählt kannst du auch noch einiges zu dieser auf der rechten Seite einstellen. Das kannst du auch zu einem späteren Zeitpunkt immer wieder bearbeiten. Unter Trigger kannst du festlegen, was den Designwechsel auslösen soll. Standardmäßig ist hier antippen ausgewählt, d.h. wenn du das Objekt anklickt wechselt es. Du kannst aber auch sagen, wenn an dem Objekt gezogen wird, was bspw. für Apps wichtig ist, bei Gestensteuerungen, wird das Design gewechselt. Auch bei einem Bestimmten Tastendruck oder Sprachbefehl kann das Design geändert werden. So kannst du bspw. auch Anwendungen für Sprachassistenten einfach erstellen. Da gibst du dann einfach einen Text ein welcher gesprochen werden muss um die Animation auszulösen. Unter Aktion kannst du dann festlegen, wie das neue Design erscheinen soll. Hier kannst du einen normalen Übergang wählen. Wo du dann festlegen ob das einfach über Deckkraft oder von einer bestimmten Richtung passieren soll. Auch wie Smooth, also wie die Bewegung sein soll und wie lange diese sein soll kannst du hier festlegen. Auto-Animate ist hier noch eine komplexerer Übergäng. Hier werden gleiche Objekte, über einen gleichen Namen erkannt und wenn diese sich auf der anderen Zeichenfläche woanders befinden werden diese als Übergang dorthin bewegt. So kann man ziemlich coole Übergänge machen aber man muss dafür viel bei der Zeichenflächen-Erstellung beachten und die Ebenen auch alle dementsprechend gleich benennen damit das reibungslos funktioniert. Auch hier kannst du die Länge und Bewegung einstellen. Der Overlay übergang ist für Menüs oder Fenster welche nicht den kompletten Bildschirm bedecken, gedacht. D.h. wo du auch Transparenzen hast und sich bspw. einfach ein Menü öffnen soll. Hier hast du dann einen grünen Bereich welche die Größe der neuen Zeichenfläche zeigt und du diese dann so platzieren kannst wie du es möchtest. Unter Sprachwiedergabe kannst du quasi eine Antwort auswählen, welche abgespielt wird. Hier kannst du einen Sprecher auswählen und den Text eingeben, welchen er dann von sich geben soll, sobald der Trigger ausgelöst wurde.
Du kannst an einer Zeichenfläche auch den blauen Balken am linken Rand sehen. Das zeigt dir, welche Zeichenfläche deine Startseite ist, also die Zeichenfläche welche zuerst angezeigt wird. Willst du das Ändern, dann klicke bei der Zeichenfläche, welche du als erstes haben willst, auf die graue Version von dem Button und sie wird blau und ist dann die Startseite.
Wie du merkst kann man viel mit diesen verschiedenen Optionen anstellen und das benötigt einiges an Zeit und ausprobieren bis du die perfekten Übergänge für dein Design erstellt hast. Probier da einfach am Besten viel rum und du bekommst ein Gefühl dafür was am Besten passt. Neuerdings kannst du auch für ein Element mehrere Trigger erstellen. D.h. du kannst wenn du schon eine Verbindung erstellt hast über das Plus eine weitere Verbindung erstellen. So kannst du bspw. für ein Objekt mehrere verschiedene Trigger verwenden, was für komplexe Designs sehr hilfreich ist.
Vorschau
Doch jetzt willst du ja auch sehen, wie dein Design schlussendlich live aussieht mit den Animationen und du selbst damit interagieren kannst. Du hast jetzt mehrere Möglichkeiten dein Design anzeigen zu lassen. Die einfachste Möglichkeit ist es über den Play-Button am oberen rechten Rand. Hier kannst du dein Design direkt in einem neuen Fenster sehen und direkt darin mit allen Übergängen interagieren. Du kannst hier auch in Echtzeit Dinge verändern, d.h du kannst das Fenster offen lassen und dein Design oder Übergänge bearbeiten und direkt die Veränderungen sehen. Grundsätzlich öffnet sich in dem Fenster immer die Zeichenfläche welche du gerade ausgewählt hast. Über das Kreissymbol in der Vorschau kannst du auch über deinen Computer eine Aufnahme von deinem Design machen und wie du damit interagierst, in Form eines Videos.
Wenn du jetzt aber bspw. ein App Design erstellt hast, ist es auch Sinnvoll das Design direkt auf deinem eigenen Smartphone oder Tablet testen zu können. Dafür musst du dir einfach die kostenlose Adobe XD App aus deinem AppStore herunterladen. Link zu App für Android und IOS. In der App musst du dich dann mit deinem Adobe Konto anmelden. Hier siehst du dann deine Cloud Projekte und kannst diese auf dem Gerät öffnen und testen. Du kannst die Projekte auf deinem Gerät nicht bearbeiten sondern nur anzeigen lassen. Wenn du ein iOS-Gerät hast, kannst du diese auch per USB Kabel mit deinem Computer verbinden und dann bekommst in der App auch eine Echtzeit Vorschau, also kannst direkt Bearbeitungen die du vornimmst, auf dem Gerät sehen. Sonst kannst du wie gesagt nur gespeicherte Projekte abrufen und musst um Änderungen auf deinem Gerät zu sehen, dein Projekt am Computer speichern und auf deinem Gerät neu öffnen. Über das USB Kabel ist es dann alles in Echtzeit und du musst nix weiter einstellen um neue Veränderungen zu sehen. Leider gibt es diese Funktionen noch nicht für Android Geräte, aber vielleicht wird sie noch hinzugefügt und wenn du dieses Video zu einem späteren Zeitpunkt siehst geht es ja vielleicht.
Exportieren & speichern
Du kannst jetzt neben der Vorschau auch im Design Bereich einzelne Zeichenflächen als Bilddateien oder so auf deinem Computer speichern um diese bspw. in anderen Programmen weiterverwenden zu können. Dafür wählst du einfach alle Zeichenflächen aus, welche du exportieren möchtest und gehst dann im Menü auf Exportieren. Hier kannst du jetzt festlegen ob du nur die ausgewählten Zeichenflächen exportieren möchtest. Markiert wird hier differenziert, da du bei jedem Objekt die Möglichkeit hast dieses für den Export zu Markieren und dann werden nur diese exportiert. Du kannst aber auch einfach alle Zeichenflächen exportieren. Hier wird dann jede Zeichenfläche als einzelne Datei exportiert und als letztes kannst du es auch für After Effects exportieren. Letzters wird oft verwendet wenn Übergänge und Co. nicht in Adobe XD erstellt werden sondern als Video in After Effects. Warum After Effects? Einfach weil man da viel mehr Möglichkeiten hat aber das ist wesentlich schwieriger und komplexer und wie gesagt kannst es dann “nur” als Video exportieren. Hier werden dann alle Ebenen einzeln in ein neues After Effects Projekt geladen und du kannst so alles genau bearbeiten. Falls du wissen willst wie die Grundlagen von After Effects funktionieren und wie du damit eigentlich alles animieren kannst, was du dir vorstellen kannst, dann schau doch mal auf simontutorial.de/cc vorbei, dort findest du einige Grundkurse, wie diesen hier, für auch die anderen Adobe Programme. Wählst du jetzt aber eine der anderen Optionen kannst du noch festlegen in welchem Format diese exportiert werden sollen. Hier kannst du grundsätzlich zwischen JPEG und PNG auswählen, was die gängigen Bildformate sind, wo du dann quasi als Bilder weiterarbeiten kannst. Wenn du es Drucken willst, dann ist es ratsam alles als PDF zu exportieren. Schlussendlich kannst du es auch als SVG exportieren, was ein verlustfreies Format ist, was das Thema Skalieren angeht, aber wie gut deine Designs damit funktionieren kann ich dir nicht beantworten. Darunter kannst du dann noch festlegen für was dein Design erstellt wurde um die passende Qualität dafür zu exportieren und kannst die Dateien dann auch in normaler oder doppelten Qualität exportieren. Als letztes kannst du dann noch einen Speicherort festlegen und dann werden dort deine Zeichenflächen hin exportiert. Du kannst im Menü natürlich auch deine Adobe XD Datei speichern, um an dieser zu einem späteren Zeitpunkt weiterarbeiten zu können. Hier kannst du wählen ob du es auf deinem Computer als normale Datei speichern möchtest oder als Cloud Dokument in deiner Creative Cloud um es von allen Geräten verwenden zu können.
Freigaben & Teamarbeit
Du kannst jetzt aber auch deine Projekt mit der Welt teilen. Über einen Link wo dein komplettes Design interaktiv zu sehen und erleben ist. Dafür wechselst du einfach in den letzten Bereich oben im Menü, nämlich die Freigabe. Hier kannst du direkt einen Link erstellen, über welches dein Design angezeigt werden kann im Web. Hier kannst du dann noch einen Namen für dein Projekt festlegen, welcher angezeigt wird. Sowie die Darstellungsoptionen. Hier kannst du Design Review auswählen, wenn Leute dein Design sehen sollen und die Möglichkeit haben sollen, es zu kommentieren. Über die Entwicklung kannst du das Design auch als Code ausgeben, wo du dieses dann in deine Webseites als HTML Schnipsel einbetten kannst. Bei Präsentationen wird nur das Design gezeigt und man hat Präsentationstools. Bei Benutzertest werden auch Navigationen und co. ausgeblendet und man sieht wirklich nur das Design. Unter Benutzerdefiniert kannst du auch manuell festlegen was alles möglich sein soll mit dem Design. Als letztes kannst du dann noch festlegen wer über den Link dein Design sehen darf und ob es mit einem Passwort geschützt sein soll, welches du dann festlegen kannst. Nach einer kurzen Erstellungszeit siehst du dann den Link und kannst diesen einfach kopieren und teilen. Du kannst auch nachträglich Einstellungen tätigen und wenn du etwas an deinem Design noch nachträglich änderst, kannst du einfach auf Link aktualisieren klicken damit die Änderungen über den Link auch sehbar sind. Der Link verändert sich dabei nicht. Öffnest du den Link dann mal, siehst du in einer einfachen Übersicht dein Design und alle Funktionen welche du freigegeben hast. Hier kann man bspw. in eine Übersicht aller Zeichenflächen wechseln und unter dem Design über das Haus zur Startseite zurückkehren und die nächsten Zeichenflächen anzeigen.
Neuerdings kannst du auch mit der Hilfe von Cloud-Dokumenten, mit mehreren Personen gleichzeitig an einem Design arbeiten. Um das zu machen musst du dein Projekt als erstes als Cloud-Dokument speichern. Weißt du noch wie das geht? Einfach über den Namen oder über das Menü unter Speichern. Jetzt kannst du am oberen rechten Menü auf das Personen Symbol klicken und Leute per E-Mail Adresse hinzufügen. Die E-Mail Adressen müssen mit der E-Mail Adresse der Adobe ID der Person übereinstimmen und die Person muss Adobe XD auf ihrem Computer installiert haben um dann auf dein Projekt zugreifen zu können. Am unteren Rand kannst du dann das Co-Editing aktivieren damit ihr gleichzeitig in der Datei arbeiten könnt. Du siehst dann bei dem Personen Symbol wenn jemand gleichzeitig im Projekt ist. Du kannst dann über den Namen des Projekts die neuen Bearbeitungen anhand eines Verlaufs sehen und bestimmte Zeitpunkte als neue Datei speichern. So kannst du sicher gehen dass nichts wichtiges irgendwann verloren geht. Im Startmenü siehst du unter Link freigaben, alle Projekte die von anderen für dich freigegeben wurden.
Das waren so alle wichtigen Grundinformationen die du über Adobe XD wissen solltest um deine eigenen Projekte darin umzusetzen. Ich habe jetzt noch drei Bonus-Kapitel, welche drei wirklich wichtige Themen in Adobe XD behandeln.
Bonus: UI Kit (iOS & Android)
Als Erstes sprechen wir über UI Kits, welche wir schon direkt im Startmenü sehen und auch über das Menü aufrufen können. Doch was ist so ein UI Kit? Ein UI Kit ist quasi eine Vorlage von verschiedenen System und Anbieter, welche man für seine Design verwenden kannst. Du kannst dir bspw. das Apple iOS UI Kit oder Android UI Kit herunterladen und dort findest du alle System Design von diesen Betriebssystemen. So kannst du ganz einfach Systemelemente einfügen, wie bspw. Tastaturen, Auswahlfelder, wie sie wirklich auf den verschiedenen Geräten sind um noch authentischer dein Design darstellen lassen zu können. Über die Links kommst du direkt auf die offiziellen Seiten, wo du dir die UI Kits einfach als Adobe XD Datei herunterladen kannst und dann seprarat neben deiner Datei öffnen kannst um dir einfach Elemente kopieren zu können. In erster Linien hilft es dir auch die Grundelemente nicht selbst immer erstellen zu müssen und du einiges an Zeit und Nerven sparen kannst.
Bonus: Wiederholungsraster
Wo du auch einiges an Zeit und Nerven sparen kannst, sind mit den Wiederholungsrastern in Adobe XD. Damit hast du die Möglichkeit bestimmte Elemente wiederholend einzubauen. Dafür wähle einfach ein Elemente aus was du wiederholen willst. Ich hab hier jetzt bspw. einen Post Layout erstellt, aber auf der Seite sollen viele verschiedene Posts zu sehen sein. Dann wähle ich dieses Layout aus und klicke am rechten Rand auf das Wiederholungsraster und es bildet sich ein grüner Rand um unser Objekt. Ziehen wir jetzt an den Balken wiederholt sich unser Element und wir können durch das Klicken zwischen diese Elemente den generellen Abstand anpassen. Bearbeiten wir jetzt ein Element wird es auf alle angepasst. Aber das war noch nicht alles coole daran. Wenn du jetzt bspw. mehrere Bilder am Computer auswählst und diese in einen dafür vorgesehen Platz ziehst, werden deine ausgewählten Bilder auf die verschiedenen Post angewendet und du musst sie nicht einzeln reinschieben. Das funktioniert auch mit Text welchen du einfach mit einer Text Datei importieren kannst. Das spart dir enorm viel Zeit, wenn du immer wiederholende Elemente hast, was ja in vielen Anwendungen der Fall ist.
Bonus: Responsiv
Als Letztes möchte ich noch über Responsiv sprechen, was heutzutage im Web Design nicht mehr wegzudenken ist. Mit Responsive meint man, dass sich das Format von einer App oder einer Webseite dem Bildschirm anpasst. Sodass bswp. ein Menü immer den kompletten oberen Rand der Seite einnimmt, egal wie groß der Bildschirm ist. So ist es wesentlich einfach geworden Designs einfach für alle Geräte zu erstellen und nicht 10 unterschiedliche Designs erstellen zu müssen für die einzelnen Formate. In Adobe XD solltest du für Webseiten und mobile Geräte immer noch separate Designs machen damit die perfekt dafür sind. Aber du hast am Rechten Rand auch Möglichkeiten die das vereinfachen. So kannst du unter Responsive Resize automatisch festlegen, womit das Design automatisch angepasst wird, falls du die Größe der Zeichenfläche veränderst. Unter Manuell kannst du aber auch Festlegen nach welchen Kriterien sich die einzelnen Objekte verhalten sollen. Also ob sie immer gleich breit oder hoch sein sollen, egal wie sich das Format verändert. Auch an welchen Bildschirmrand sie sich ausrichten sollen, kannst du hier festlegen. Anschaulicher wird das, wenn man eine Zeichenfläche dupliziert und bei der einen einfach das Format verschiebt. Dann siehst du wie sich die Elemente damit verhalten.
Jetzt weißt du wie du ganz einfach und schnell dein nächstes Web oder App Design in Adobe XD erstellen kannst. Lade dir das Programm noch heute über diesen Link herunter und starte deine Kreationen. Bedenke, aber du kannst damit keine Webseiten programmieren und veröffentlichen. Du kannst dir auch oberhalb am Artikel unsere Vorlage herunterladen, um mit unserem gezeigten Projekte zu arbeiten. Falls du irgendwelche Fragen haben solltest, kannst du diese gerne in den Kommentaren stellen und falls du dein eigenes Design erstellt hast, kannst du gerne einen Link unter diesen Artikel posten und ich schau es mir vielleicht an und gebe dir noch paar hilfreiche Tipps, wie du es verbessern kannst. Für mehr Grundkurse zu Adobe Programmen und praktischen Beispielen schau doch mal auf meinem YouTube-Kanal vorbei und wenn du keine solche Tutorials verpassen willst, kannst du ihn auch gerne kostenlos abonnieren. Über das Teilen des Artikel freue ich mich immer sehr.
