Adobe Xd 2021 Grundlagen - UI / UX Design Kurs

1. Kurs-Einführung: Hey Designer und mein Name ist Alex und willkommen zur Skill-Share-Klasse auf Adobe XD 2021. In dieser Klasse werden wir grundlegende Tools von Adobe XD abdecken. Und ich führe Sie durch meinen Designprozess und zeige Ihnen alle wichtigen Tools und Funktionen, die Adobe XD zu bieten hat, damit Sie ein besserer UI-UX-Designer sein können. Ich bin ein Entwickler von Designprodukten und habe bisher über 500 Produkte, die ich kreiert habe. Ich bin auch ein Kursteilnehmer und bisher habe ich mehr als 20 Kurse und ich habe mehr als 30 Tausend Studenten in meinen Kursen eingeschrieben. Und in diesem kostenlosen Adobe XD-Kurs erfahren Sie, was Adobe XD ist, wie Sie es herunterladen können und wie die Updates funktionieren, Mac gegen Windows. Und was ist der Unterschied? Wie Interface funktioniert und alle wichtigen Funktionen der Schnittstelle wie Formen, mental, dex, Werkzeug, Bar Edwards, Bibliotheken, Ebenen und Plug-Ins. Wir werden ein Wiederholungsraster erforschen und was es für Ihr Design tun kann. Wie Sie Masken verwenden können, bei denen es sich um 3D-Funktionen in Adobe XD handelt. Wie können Sie Mock-ups verwenden, welche die Tastenkombinationen sind, um Ihre Arbeit mit verschiedenen Dateien zu verbessern und wie können Sie verschiedene Dateien öffnen und mit ihnen in Adobe XD arbeiten? Wie können Sie mit kostenlosen Ressourcen arbeiten und was ist der Unterschied zwischen kostenlosen und Premium-Ressourcen und warum eine besser ist als die andere. Verwenden Sie UI-Kits, um Ihren Workflow zu verbessern ein Designprojekt zu erstellen und von der Erstellung von Design, Prototyping Ihres Designs, teilen Sie Ihr Design mit Kunden und Entwicklern, exportieren Sie Ihr Design, erstellen Sie ein Designsystem, Erstellen von Design-Token, Erstellen von Styleguide, wie man großartige Präsentationen zu erstellen. Und schließlich, Zukunft der Design-Tools. Wir werden eine Menge in dieser freien Klasse abdecken. Wenn Sie also zu irgendeinem Zeitpunkt auf die Links zugreifen möchten, wird PDF zur Verfügung gestellt. So können Sie das PDF herunterladen und Sie können einfach auf die Links klicken und besuchen, was ich spreche in diesem kostenlosen Kurs , so dass Sie entlang Ihrer Klasse Projekt für diese Klasse folgen können, ist es die Tipps und Techniken, die Sie aus diesem lernen , um sie auf Ihren Designprozess anzuwenden. Und ich möchte wirklich, dass Sie entweder eine einseitige Website oder einen einzigen Bildschirm für die App mit den Tipps und Techniken, die Sie aus diesem Kurs lernen, erstellen entweder eine einseitige Website oder einen einzigen Bildschirm für die App mit den Tipps und Techniken, die Sie aus diesem Kurs lernen und sie in die Klassenprojekte hochladen. Adobe XD ist eines der besten Tools für UI-UX-Designer sind wirklich davon überzeugt, dass, weil ich es jeden Tag verwende. Auf meinem YouTube-Kanal habe ich eine Reihe dieser verschiedenen Videos erstellt , die alles über Adobe XD, verschiedene Tools und Techniken erklären . Also, wenn Sie wollen, können Sie das auch für jetzt ohne weiteres überprüfen. Lasst uns mit dem Kurs beginnen. 2. Was ist Adobe Xd: Adobe XD ist ein UI-UX-Design-Tool, das von Adobe erstellt wurde. Sie können alle in einer App entwerfen, Prototypen erstellen, teilen und zusammenarbeiten. Sie müssen die Apps nicht ändern. Sie müssen keine separaten Dinge auf Ihrem Computer installieren. Sie können alles innerhalb einer App tun. Es ist großartig, weil es kostenlos ist, um loszulegen. Und Sie können einfach loslegen, indem Sie Adobe XD herunterladen und auf Ihrem Computer installieren. Das werde ich im nächsten Abschnitt zeigen. Aber im Grunde, was Sie in diesem Tool tun können, wenn Sie hier überprüfen und anfangen, nach unten zu scrollen, können Sie sehen, dass es vier Design ist. So können Sie mobiles App-Design erstellen. Sie können eine Website entworfenen Dashboard-Design erstellen , egal welche Art von UI-UX-Design Sie wollen, können Sie sogar Stil Jungs erstellen. Sie können sehen, dass Sie Prototypen erstellen können, verschiedene Interaktionen einschließen, verschiedene Animationen einschließen können, die Sie mit Kunden, mit Entwicklern, mit Ihren Teamkollegen, alle mit Adobe XD teilen können mit Entwicklern, mit Ihren Teamkollegen, . Und Sie können hier kostenlos auf Start klicken, um Adobe XD herunterzuladen und zu installieren. Und darüber werden wir als Nächstes reden. 3. Mac Vs Pc: Wie gesagt, Adobe XD funktioniert sowohl auf Mac als auch auf PC gut. Und der entscheidende Unterschied zwischen diesen beiden Betriebssystemen ist, wie sie aussehen. Also im Grunde auf Fenstern haben Sie dieses Hamburger-Menü oben links. Und weil ich an Windows arbeite, werde ich Ihnen das in nur einer Sekunde zeigen. Aber auf einem Mac haben Sie mehrere dieser Optionen einfach auf dem oberen Teil Ihres Bildschirms gepunktet. Und das ist wirklich der entscheidende Unterschied zwischen Mac und PC. Und ein weiterer Unterschied ist die Aufnahme von Prototypen, denn Adobe XD hat diese Funktion, mit der Sie Ihre Prototypen aufnehmen und sie als Video teilen können, entweder für Ihre Kunden oder Sie können sie in sozialen Medien teilen nur um eine größere um sich selbst beeinflusst zu erstellen. Grundsätzlich besteht der entscheidende Unterschied zwischen Mac und PC darin, dass Sie auf dem Mac diese native Option haben, wo Sie einfach auf Aufnahme klicken können und es wird es erfordern, und Sie können auf Stopp klicken und das ist im Grunde das Ende davon. Während auf den Fenstern, müssen Sie ihre Spielaufzeichnungsfunktion verwenden und Sie können darauf zugreifen, indem Sie die Windows-Taste und die G-Taste drücken, und dann können Sie Ihre Aufnahme auf diese Weise starten. Ich werde das auch ein bisschen später in diesem Kurs zeigen. Und schließlich, was ich schnell erwähnen wollte, ist, wenn Sie Windows sieben Windows, acht Windows waster, Adobe XD wird nicht auf Ihrem Computer funktionieren. Sie müssen Adobe XD auf Ihrem Fenster Stan Maschine installiert haben. Vorzugsweise, wenn Sie es auf dem Creator-Update Ihres Windows-Computers installieren können, funktioniert es einwandfrei, aber es wird nicht von älteren Versionen von Windows wie 78 oder sogar Weisheit unterstützt. Das ist es, was Sie wissen müssen. 4. Welcome: Wenn Sie Ihre Adobe XD öffnen, werden Sie zum Begrüßungsbildschirm weitergeleitet und ich werde Ihnen zeigen, was Creme begrüßt und wie sie sich im Laufe der Zeit ändert. Also hier ist der Willkommensbildschirm und Sie können sehen, dass Sie auf dem Home-Bildschirm sind hier. Sie können auf „Lernen“ klicken, und Sie können auf einige Tutorials des Adobe XD-Teams zugreifen. Sie können auch direkt hier klicken, um mehr über ihre neuen Funktionen zu erfahren und einige Techniken von ihrem Team zu erfahren. Harbin Skill startet, in der Regel jede Woche, neue Tutorials über Adobe XD und es ist großartig, wenn Sie wollen, können Sie ihm auch auf Behance folgen für diese Live-Streams über Adobe XD. Grundsätzlich ist das, was Learn Tab ist, Cloud-Dokumente, weil XD in der Regel cloud-basiert ist, aber Sie können auch lokale Dokumente auf Ihrem Computer speichern, wenn Sie Dokumente aufrufen möchten, sind alle Ihre Dokumente, die sich innerhalb der Cloud befinden. So können Sie einfach hier klicken, um auf sie zuzugreifen. Sie freigegeben sind die Dokumente, die von den Kunden oder von Ihren Teamkollegen mit Ihnen geteilt werden. Gelöscht, sind alle Dateien, die Sie zuvor gelöscht haben weil denken Sie daran, Sie haben begrenzten Speicherplatz auf der kostenlosen Version von Adobe XD und Sie haben nur einen einzigen Prototyp, Sie mit Ihren Kunden oder Stakeholdern teilen können. Um mehrere Prototypen gleichzeitig zur Verfügung zu haben, müssen Sie ein Upgrade auf kostenpflichtige Anlage durchführen. Und deshalb zeige ich Ihnen das auf einem kostenlosen Plan. Sie können sehen, ich bin auf einem kostenlosen Plan, weil es sagt, Upgrade-und es sagt, starten Sie einen Plan. Aber ich wollte dir zeigen, dass du all diese Dinge im Startup Land erledigen kannst, besonders wenn du anfängst. Sie müssen also nicht von Anfang an für Premiumversionen bezahlen. Sie können dieses Tool testen. Sie können sehen, ob es für Sie richtig ist, ob die UI für Sie das Richtige ist, und wenn dies der Fall ist, können Sie dann fortfahren und für dieses Tool bezahlen. So bewegen wir die Linie nach unten, haben wir Links verwaltet. Also im Grunde sind dies die Links, die Sie mit Ihren Kunden oder Stakeholdern geteilt haben . Und auf Ihrem Computer können Sie die Dateien auf Ihrem Computer finden. Hier können Sie sehen, dass sich Design-Prototypen teilen , denn das macht Adobe XD und das ist es, was es ist. Und unten haben wir einige Flughäfen, die Sie von hier aus erstellen können. Diese sind vorerstellt unsere Boards, und Sie können für mobile sehen, wir haben iPhone-Größen, wir hoffen, Google Pixel, iPad, Nexus und so weiter. Dann für das Web, können Sie sehen, wir haben 1920 von 1080. Und wenn ich hier klicke, können Sie sehen, dass sie Ihnen diese neu zusammengesetzten Optionen geben. Wenn Sie sie verwenden möchten, dann haben wir Social-Media-Größen. So können Sie sehen, wir haben Instagram Story-Posts, Twitter-Posts Header, Facebook, Facebook-Cover und schließlich YouTube-Video. Und schließlich haben wir benutzerdefinierte Größe. So können Sie diese benutzerdefinierte Größe für jede gewünschte Größe verwenden. Sie können Pixelwert direkt hier eingeben, und Sie können einfach darauf klicken und dann wird es als neues Dokument geöffnet. Und damit, unsere Port-Größe drinnen. Wie gesagt, können Sie eines davon verwenden oder Sie können einfach einen benutzerdefinierten Wert hier eingeben. Und schließlich hier haben wir aktuelle Dokumente. sind also nur die Dokumente, die Sie geöffnet haben. Und Sie können hier klicken, um auf einige der neueren Artikel aus ihrem Blog und Hilfe-Post zugreifen und so weiter. Wie ich erklärte, Eine Sache zu beachten ist, dass dieser Willkommensbildschirm wird sich im Laufe der Zeit ändern. Stellen Sie also sicher, dass Sie verstehen, dass, wenn Sie dieses Video oder Diskurs in der Zukunft sehen und Sie dies überprüfen und es nicht so aussieht wie Ihre, stellen Sie sicher, dass Sie verstehen, dass sie es ständig aktualisieren. Aber das sind nur die grundlegenden Funktionen und Tools, die Sie hier auf dem Willkommensbildschirm erwarten können. Also, um loszulegen, ich werde nur eine wählen, rpart psi iso, vielleicht 1920 von 1080. Und ich werde es hier eingeben, nur um dir zu zeigen, wie das aussieht. Es ist also eine 80. Sie können auf EINGABETASTE klicken oder hier klicken, um es zu öffnen und zu verwerfen. Es sieht so aus, als ob es geöffnet ist, lass es mich ein wenig vergrößern. Und wir gehen jetzt zu Adobe XD ist Tools und Funktionen und was Sie erwarten können. 5. Interface: Die Schönheit von Adobe XD ist, dass es wirklich einfach, Schnittstelle zu verwenden hat. Also bin ich auf einer Windows-Version, wie gesagt, und das ist der Hauptunterschied zwischen Windows und Mac, denn unter Windows haben Sie dieses Hamburger-Menü und Sie können von hier aus auf alle Ihre Tools zugreifen. Sie können auch mit der rechten Maustaste auf einen beliebigen Teil des Dokuments klicken, um auf einige zusätzliche Funktionen wie diese zuzugreifen. Sie können hier mit der rechten Maustaste klicken. Und dann haben Sie Untermenüs, die Sie eingeben und einige der Funktionen verwenden können. Während auf dem Mac, werden Sie alle diese Optionen direkt hier oben und darunter haben. Das ist also wirklich der entscheidende Unterschied zwischen XD auf einem Mac und einem PC. Also, wenn es um die Schnittstelle geht, können Sie sehen, dass es in drei Teile unterteilt ist. Genau hier haben Sie Ihre Werkzeuge, so dass Sie Ihr Auswahlwerkzeug haben, um mehrere Dinge auszuwählen. Du hast deine Formen genau hier. Dann haben Sie einen Bleistift, Text, unsere Boards Tool, und schließlich Zoom-Tool. Und unten hier haben wir Bibliotheken, wir haben Ebenen, wir haben Plugins genau hier oben. Wir haben Prototypen teilen entworfen, denn das sind die Dinge, von denen XD berühmt ist. Und Sie können einfach zwischen diesen drei Registerkarten wechseln , um auf verschiedene Funktionen von Adobe XD zuzugreifen. Endlich haben wir dieses Panel hier auf der rechten Seite. Und je nachdem, was Sie auf Ihrem Board tun, je nachdem, was ausgewählt ist, ändert sich dieses rechte Panel immer. Es hat immer einige Funktionen im Inneren für alle Dinge, die Sie tun, zum Beispiel Positionierung und so weiter. Aber es ändert sich ständig, je nachdem, was Sie ausgewählt haben. Ob es sich um Design-Prototypen handelt, ob Sie hier etwas an Ihrem R-Anschluss arbeiten. Gehen wir nun zu Formen über und ich werde erklären welche Art von Formen Sie in Adobe XD haben und was Sie damit machen können. 6. Formen: Beginnen wir mit den Formen und Formen, die sich direkt hier befinden. Und Sie können sehen, wie Rechteck Sie Lippen haben, Sie Polygon haben, und schließlich haben Sie Ihr Linien-Werkzeug. Und schließlich können Sie benutzerdefinierte Formen mit mental erstellen. Aber ich werde etwas mehr Zeit für den Mantel selbst widmen. Also, um eine beliebige Form von hier zu verwenden, müssen Sie nur darauf klicken, um es auszuwählen, und dann einfach auf Ihre Bretter zeichnen. Und sobald Sie das tun, haben Sie hier einige Werte. Also gehen wir eins nach dem anderen und ich werde Ihnen zeigen was all diese Werte für jede dieser Formen sind. Also zuerst, lasst uns diese Formen schnell zeichnen, damit ich euch zeigen kann wie alle Nuklid so sind. Und ich benutze einfach v omega-Tastatur, um das Auswahlwerkzeug zu verwenden, um es zu positionieren. Und schließlich, lassen Sie uns voran und schaffen eine Form mit unserem mentalen. Und lassen Sie mich Ihnen schnell Unterschiede zeigen. So können Sie direkt hier in Ihrem Ebenenbedienfeld sehen , das Sie ausblenden können, indem Sie einfach hier klicken. Wir haben Rechteck, das ist diese, Ellipse Polygonlinie. Und schließlich Teil, weil wir das Stiftwerkzeug verwenden, um dieses benutzerdefinierte Teil zu erstellen. Was Sie jetzt mit all Ihren Formen tun können, ist, wenn Sie eine Form auswählen, können Sie alle diese Werkzeuge sehen, die Ihnen direkt hier zur Verfügung stehen. Also hier haben wir Positionierungswerkzeuge, so dass Sie es an jedem beliebigen Teil des Flughafens positionieren können. Wir haben ein Wiederholungsraster und ich werde die Wiederholung Grade etwas später genauer erklären und was Sie damit machen können. Und dann haben wir Zusammenführen von Werkzeugen und booleschen Operationen. Im Grunde können Sie zwei oder mehr dieser Türen auswählen und Sie können Überlappungen hinzufügen, subtrahieren, schneiden und schließlich ausschließen. Und ich ermutige Sie, wenn Sie nicht wissen, was all diese Dinge sind, zwei oder mehr Formen auszuwählen und mit ihnen herumzuspielen und zu sehen, was Sie tun können. Aber im Grunde können Sie sie zu einer einzigen Form kombinieren oder Sie können mehrere Eigenschaften hinzufügen, wie zum Beispiel ausgeschlossene Umrisse und vieles mehr. Wenn wir weiter unten gehen, dann haben wir uns verwandelt. Sie können Ihre Breite ändern, Sie können Ihre Höhe ändern. Positionieren Sie auf der X- und Y-Achse, haben Sie Ihre Drehung. Wenn ich zum Beispiel 45 Grad eingebe , können Sie es gedreht sehen, aber Sie können auch direkt hier schweben, zum Beispiel die Umschalttaste halten, und es wird in Schritten gedreht. Oder Sie können Steuerelement z drücken, um zurück zu gehen. Als nächstes haben wir Flipping, also Flip horizontal, Flip vertikal. Darunter haben wir eine horizontale Schriftrolle. Und das werde ich später erklären. Was es ist. Wir haben vertikale Scrollen und wir haben Scrollen in allen Positionen. Schließlich haben wir beim Scrollen eine feste Position. Wenn Sie also Website-Designer oder App-Designs erstellen, möchten Sie, dass einige Elemente fixiert werden, sobald der Benutzer mit dem Crawling beginnt. Das ist also, wofür das verwendet wird und ich werde Ihnen das auch in späteren Beispielen zeigen. Darunter haben wir, wie gesagt, Responsive Größe ändern. Und ich werde Ihnen später auch ein bisschen mehr über die Responsive Größenänderung zeigen. Darunter haben wir Fettleibigkeit. So können Sie die Fettleibigkeit von Ihrem Objekt ändern, indem einfach diesen Schieberegler verwenden oder Sie können Tastenkombinationen verwenden. So ist man für 10%, für, ist für die 40%, zum Beispiel, acht ist 4800% ist für 100%. Darunter haben Sie Mischmodi, und Sie haben mehrere Mischmodi, im Grunde die gleichen wie in Photoshop, Illustrator. Also, wenn Sie jemals für Shop verwendet haben, ermutige ich Sie wirklich, diese Mischmodi zu testen weil sie fast die gleiche wie in Photoshop funktionieren, aber sie haben nicht fast so viele Funktionen wie im Waldstrauch, offensichtlich, weil in xsd, ist es nur für UI- und UX-Arbeit optimiert. Darunter. Wir haben einen Eckenradius. Im Moment ist es also 0, aber wenn Sie die Ecken runden möchten, können Sie diese Punkte verwenden und einfach klicken und ziehen. Und es wird die Ecken umrunden. Und Sie können sehen, während ich das tue, Werte hier ändern sich. Oder Sie können einfach manuell eingeben, zum Beispiel, 24, den Eckenradius und es wird Ihre Ecken auf diesen Wert laufen. Sie können auch um die Ecken jeder Ihre Ecken. Also zum Beispiel werde ich 0 drücken und Sie können sehen, oben links ist 0, rechts hier. Und das kannst du für alle Oregon tun. Einfach coef hier anti 20 und es wird an allen Ecken runden. Als nächstes kommt die Füllfarbe. Sie können direkt dort klicken und Sie können die Füllfarbe ändern. Hier können Sie den Hex-Code eingeben. So zum Beispiel drei 0s, C6, FF für ein schönes Blau. Und Sie haben hier Ihre Grenzwerte weiß. Aber bevor wir zu den Grenzen übergehen, können Sie vom Farbspektrum wechseln. Warum können Sie hier ändern, wie hell oder dunkel Ihre Farbe sein wird. Sie können die Deckkraft Ihrer Farbe ändern. Sie können Hex-Code hinzufügen oder Sie können einfach hier klicken , um die Farbe als Farbfeld zu speichern, damit Sie sie später verwenden können, aber einfach darauf klicken. Und es gilt für das ausgewählte Objekt oder in Ihrem Flughafen. Als nächstes, wenn Sie rechts hier klicken, wird ein linearer Farbverlauf oder radialen Farbverlauf zu öffnen. Und im Grunde haben Sie diese drei Optionen. Im Moment ist es also die einfarbige Farbe. Wenn ich hier rechts klicke, können Sie sehen, wir haben lineare Farbverlauf und Sie können so viele Stopps hinzufügen, wie Sie wollen. Sie können einfach hier klicken, dann können Sie Ihren Farbverlauf drehen, um von einer Seite zur anderen zu gehen. Und schließlich können Sie für jeden dieser Stopps eine andere Farbe hinzufügen oder einen anderen Farbton Ihrer Farbe hinzufügen. Sie können auch klicken und reduzieren ihre Fettleibigkeit wie so für jede einzelne Farbe. Aber radiale Verläufe sehen im Grunde genau gleich aus, aber es ist InCircle. Aber ich werde nur solide Carlos für dieses Beispiel verwenden, um die Dinge schön und einfach zu halten. Darunter haben wir Grenze. Und wenn ich hier klicke, siehst du, dass die Grenze verschwindet. Und wenn ich die Größe vergrößere, so zum Beispiel zehn, können Sie sehen, jetzt ist es erhöht. Sie können auch direkt hier klicken, um die Farbe Ihres Rahmens zu ändern. Dieselbe Geschichte, Fettleibigkeit Hex-Code. Sie können es auch als Farbfeld hinzufügen, oder Sie können hier klicken , um eine Farbe zu wählen, wo immer Sie möchten. Und lassen Sie mich schnell diese blaue Farbe als meine Grenze abtasten. Aber gehen wir zurück zu hier und lassen Sie mich das alles erklären. Also haben wir Strichbreite, was im Grunde das ist, was Sie hier sehen. Dann haben wir den Strich. Und wenn ich sagte, ich weiß nicht, 50 zum Beispiel, können Sie sehen, dass es in diese Striche unterteilt ist und die Lücke ist auch 50. Aber wenn ich die Lücke auf 100 vergrößere, kann man jetzt sehen, dass die Lücke zwischen diesen Strichen viel größer ist. Sie können immer auf 0 und unten auf 0 gehen. Sehen Sie, wie das aussieht. Und genau hier haben wir einige verschiedene Schlaganfall-Optionen. Also Innerer Schlaganfall, unsere Schlaganfallzentren Schlaganfall. Und ich ermutige Sie wirklich, es zu testen und selbst für all diese verschiedenen Optionen zu versuchen und zu sehen, was sie tun. Als Nächstes. Wir haben Bootcamp, runde Kappe und vorstehende Lücke. Und das ist sehr nützlich, wenn Sie zum Beispiel abgerundete Kanten auf Ihren Linien haben möchten. Als nächstes haben wir Mr. um ein Joint und Bevel Joint beigetreten. Und so werden die Ecken im Grunde aussehen. Endlich haben wir den Schatten. Dies ist also der Hintergrundschatten von Ihrer Form selbst. Feststoffe geben zum Beispiel etwas wirklich riesiges ein. Also 202020, also das ist die x-Achse, das ist die y-Achse, und das ist, wie viel Unschärfe Sie für Ihren Schatten verwenden möchten. Also, wenn ich dies zum Beispiel erhöhen, können Sie sehen, dass es auf der y-Achse nach unten geht. Wenn ich es hier vergrößere, können Sie sehen, dass es direkt auf der x-Achse geht. Und wenn ich es hier vergrößere, können Sie sehen, dass der Unschärfewert massiv zunimmt, wenn sie in der Größe steigen und Sie können nur auf 100 gehen. So sieht der Schatten im Grunde aus. Und Sie können auch für die Farbe und den Rahmen speichern. Sie können die Farbe ändern. Sie können aus Kohlenstoff-Spektrum gehen, Sie können Umfang interagieren, Sie können Farbmuster verwenden und Sie können es immer senken in Fettleibigkeit von hier aus. Schließlich haben wir die Hintergrundunschärfe und Hintergrundunschärfe Option ist wirklich nützlich, aber Sie müssen zwei oder mehr Elemente haben, damit dies funktioniert. Also lassen Sie mich das ein bisschen wechseln. Also habe ich das Rechteck über die Ellipse verschoben, nur damit ich dir zeigen kann, wie das aussieht. Also, wenn ich niedriger als meine Menge, niedriger als meine Helligkeit, können Sie einfach anfangen, den Kreis hinter unserem Rechteck zu sehen und Sie können sehen, wie das aussieht. So kann ich meinen Betrag senken oder erhöhen. Ich kann meine Helligkeit erhöhen oder verringern und ich kann meine Fettleibigkeit erhöhen oder verringern, je nachdem, was ich tun möchte. Also im Grunde funktioniert das, und so sieht das aus. Wenn Sie möchten, können Sie Hintergrundunschärfe für alle Arten von Dingen in Adobe XD verwenden, besonders nützlich für Bilder, wenn Sie verschwommene Hintergründe wünschen. Wenn Sie etwas wie Glasmorphismus in Ihrem Design verwenden möchten, können Sie diese Option mit der Hintergrundunschärfe verwenden. Endlich haben wir Mark für den Export hier. Und das ist wirklich nützlich, wenn Sie schnell alle Ihre Dateien exportieren möchten , die für den Export markiert sind, können Sie einfach direkt dort klicken, um es auszuchecken. Oder Sie können immer direkt hier gehen und sagt Mark für den Export. Und dann können Sie schnell alle Ihre Dateien exportieren, die für Designer, Entwickler oder Kunden für den Export markiert sind . Wenn wir also einen nach unten bewegen, können Sie im Grunde sehen, dass für all diese, wir haben einige dieser Optionen. Einige von ihnen sind gleich, einige von ihnen sind ein bisschen anders. Und schließlich, für diesen, wollte ich zeigen, weil dies das Polygonwerkzeug ist, das ist dieses Werkzeug genau hier. Und Sie können eine teilen, wie viele Ecken Sie wollen. So gerade sagte es frei, also ist es ein Dreieck. Aber wenn ich es auf fünf ändere, können Sie sehen, wie das aussieht. Wenn ich es auf acht ändere, sieht es so aus. Sie können die Größe ihrer Formen auch vergrößern oder verkleinern, indem Sie einfach die Umschalttaste gedrückt halten und in eine der Ecken klicken, um die Größe Ihrer Form zu vergrößern oder zu verkleinern. Wie wir erklären, können Sie ändern, wie groß die Grenze sein wird. Und schließlich haben wir hier einen Eckenradius wie diesen. Also lasst uns mit 20 gehen. Und Sie können sehen, dass alle Ecken für jedes dieser Viertel abgerundet werden, egal welchen Wert ich hier eingegeben habe. Schließlich haben wir das Sternenverhältnis und ich weiß nicht, sagen wir zum Beispiel 50. Und Sie können sehen, dass es diese verschiedenen Sterne schafft. Also, wenn eingeben, sagen wir zehn, können Sie eine Art von einem Zahnrad oder 70. So schafft es diese andere Art von Formen genau hier. Aber wenn ich gehen 100, geht zurück zu unserer ursprünglichen Form. Sie können auch hier tun, ist so halten und dann so. Also größer als und dann Nummer drei, drücken Sie die Eingabetaste und es wird ein Herz, das ist ein einfacher Lebensraum Adobe XD teen erstellt nur um Ihr Leben einfacher zu machen, wenn Sie anfangen, diese Symbole zu erstellen. Also haben wir im Grunde die gleichen Optionen wie immer. So können Sie jetzt erstellen, Sie können es die Füllfarbe hinzufügen, Sie können es der Rahmenfarbe hinzufügen. Und du kannst immer dorthin zurückkehren, wo du vorher warst. So können Sie alle diese verschiedenen Optionen erstellen. Also zum Beispiel, ich war eindeutig drei. Ich kann zu meiner Füllfarbe zu so etwas gehen. Sie können Ihren Hintergrund, Schatten, Hintergrundunschärfe und alle diese Optionen, die wir erklärt haben, hinzufügen. Schließlich lassen Sie sie schnell bedecken diese Bleistiftteile und ich werde in nur einer Sekunde darauf zurückgehen und einen Bleistift erklären. Also, was Sie damit tun können, ist genau das gleiche für alle Formen, aber das ist nur eine benutzerdefinierte Form, die Sie mit mental erstellt haben. Und wir werden weitermachen und ich werde erklären, was Stiftwerkzeug jetzt ist. Dann werde ich Ihnen zeigen, wie Sie komplexe Formen bearbeiten können und wie wir komplexe Formen mit Bleistift erstellen können. 7. Stift-Tool: Wie gesagt, können Sie Bleistift verwenden, um alle Arten von Formen zu erstellen, aber normalerweise verwenden Sie Bleistift, um diese komplexeren Formen wie diese zu erstellen , je nachdem, was von erstellt wurde. Lass uns noch mal gehen. So können Sie auf Ihren Bleistift klicken und Sie können klicken, wo Sie wollen, und Sie haben diese Ankerpunkte. Und wenn Sie fertig sind, Ihre Form zu vervollständigen, können Sie einen Klick auf den Flughafen kriechen und Sie können ihn bewegen, wo immer Sie wollen. Also lassen Sie uns sagen, dass ich das hier hier verschieben möchte. Und wenn Sie darauf doppelklicken, wird es zu diesem Bogen. Und dann können Sie ändern, wie dieser Bogen positioniert werden soll. Und Sie können auch Shift halten, um in diesen Schritten nach unten zu gehen, wenn Sie möchten. So wird es den Winkel Ihrer Ankerpunkte zu dem Winkel halten, den Sie wollen. So zum Beispiel 4517918 und so weiter. So können Sie das für alle tun, Doppelklicken Sie einfach auf oder wenn Sie Ihre Meinung und jeden Punkt ändern, Sie können einfach doppelklicken zurück und es wird wieder zu gerade. Aber was Sie auch tun können, haben wir dies in den vorherigen Abschnitten erklärt. Sie können die Füllfarbe, Rahmenfarbe ändern, aber gehen wir zurück und ich werde Ihnen zeigen, wie diese aussehen. Also werde ich ganz genau hineinzoomen und so klicke ich auf Mein Schaf. Also lasst uns zur runden Kappe gehen. Und das siehst du im Moment nicht. Aber zum Beispiel, wenn ich hier klicke, dann hier, und hier, dann drücke Escape Just, um diese Zeile zu erstellen. Lassen Sie mich es noch einmal auswählen. Wenn ich wirklich genau hineinzoomen. Jetzt können Sie sehen, wie die Knospenkappe aussieht. Sieht so aus. Also im Grunde, es ist wirklich flach. So sieht die projizierende Kappe aus. Also ist es wirklich flach, aber es erstreckt sich irgendwie, wo man Punkt ist in der Knospe Kappe, es ist direkt in der Mitte, aber hier in der vorstehenden Kappe, ist es genau hier. Das ist also der Unterschied, wo sich Ihr Endpunkt befindet. Während mit einer runden Kappe, können Sie sehen, dass es rundet Ihre Mütze und es läuft Ihre Linie in Ihrer Form. So kannst du wirklich damit herumspielen. Grundsätzlich, wenn Sie hier klicken und um die Lücke klicken, können Sie sicher sein, dass jeder einzelne dieser Ankerpunkte diese runden Kappen enthält. Oder wenn Sie zum Beispiel eine davon löschen möchten, hätte ich diese setzen können. Sie können sehen, dass es diese runde Kappe enthält und sie sich immer noch innerhalb dieser Form befindet. Wie gesagt, Sie können mit all diesen verschiedenen Einstellungen herumspielen und Sie können klicken und Sie können alle diese Ankerpunkte verschieben. Und gehen wir mit der Füllfarbe und lassen Sie uns eine Füllfarbe hinzufügen. Lassen Sie uns einen anderen Rahmen hinzufügen. Geben wir ihm zehn. Damit du sehen kannst, was los ist. Und Sie können auch klicken, wo Sie einen neuen Ankerpunkt hinzufügen möchten. Sie können sie erweitern, doppelklicken und ändern und grundsätzlich verschiedene Formen erstellen. Wenn Sie mit Adobe XD zeichnen möchten, können Sie Ihre Skizze in Adobe XD einfügen. Stellen wir uns dann vor, dass dies die Form ist, die Sie erstellen. Sie können es Oreo Skizze zum Beispiel so positionieren. Dann können Sie die Fettleibigkeit senken und dann können Sie einfach auf Ihre Form klicken und Sie können dann alle diese später anpassen, was sehr nützlich ist, wenn Sie als UI UX Designer arbeiten. Wenn Sie beispielsweise Symbole erstellen und diese verschiedenen Symbole mithilfe von Stift und Papier skizzieren. Dann können Sie Adobe XD verwenden, um alle diese anzupassen und Sie können die Rahmenstärke ( 2222 oder was auch immer Sie wollen) anpassen . Und im Grunde funktioniert das Stiftwerkzeug so und sieht es in Adobe XD aus. 8. Textwerkzeug: Wenn es darum geht, Ihre Angriffe einzugeben, als Texte in Adobe XD zu verwenden, haben Sie einige großartige Funktionen, aber es ist nicht so weit fortgeschritten wie etwas wie Illustrator oder InDesign, das für den Druck verwendet wird. Also lassen Sie es uns überprüfen. Sie haben eine Textoptionen direkt hier. Sie können auch t auf Ihrem Keyword drücken. Also lassen Sie mich einige zufällige Texte eingeben bis Ideen nur so dass wir etwas Text auf der Seite haben. Und damit ich erklären kann, was ist. wir also, dass wir das abgeschlossen haben. Und wenn ich ausgewählt habe, können Sie sehen, dass wir diese Optionen genau hier haben. Also noch einmal, das gleiche für die Formen. Wir haben diese positionierten Optionen an der Spitze, wir haben diese Transformationsoptionen, Spiegeln, Drehen und Sägen, nicht reagieren Größe ändern. Und hier haben wir das Textfeld, das ein wichtiger Teil dieser Steuer ist. Sie können die Größe Ihres Textes vergrößern, indem Sie einfach den Mauszeiger über diesen Punkt bewegen, darauf klicken und einfach ziehen. Und es ist wirklich nützlich, was zu tun, wenn Sie Ihren Text positionieren möchten, können Sie diese als Set verwenden. Und schließlich, lassen Sie uns jetzt zu Text gehen, damit Sie Ihre Schriftfamilie hier auswählen können. Also lassen Sie uns zum Beispiel mit vier Pins gehen , was eine freie Regelschrift ist. Und ich werde einfach positionieren und in der Mitte, so. Dann, was Sie tun können, ist die Größe zu verwenden. Also ist es momentan bei 47. Sie können Umschalt- und Aufwärtspfeil verwenden, um zwischen zehn verschiedenen Schritten in der Größe 5767 und so weiter zu springen . Als nächstes haben wir, wie das Schriftgewicht aussehen wird. Je nachdem, welche Schriftart Sie hier ausgewählt haben, haben Sie möglicherweise unterschiedliche Gewichtungen. Sum, einige von ihnen haben ein oder zwei irgendwo, wo sie 1020 haben, also je nachdem, welche Sie ausgewählt haben. Also lassen Sie uns zum Beispiel mit extra Licht gehen, sehen, wie das aussieht wie Licht. Und Sie können auch hier die Umschalttaste verwenden. Gehen Sie einfach nach oben oder unten und sehen Sie, wie all diese aussehen. Als nächstes haben wir Zeichenabstand, und das ist im Grunde der Abstand zwischen den einzelnen Zeichen. Wenn ich also meine Umschalttaste und Inkremente verwende, können Sie sehen, wie das aussieht. Es ist also wirklich nützlich, wenn Sie das tun wollen. Hier haben wir Zeilenabstand. Also Abstand zwischen jeder dieser Textzeilen. Und schließlich, was wir hier haben, ist Absatzabstand, aber ich muss einen Absatz erstellen, um das zu tun. Aber im Grunde tut es fast das gleiche wie der Zeilenabstand. Hier haben wir eine linke Ausrichtung, so dass, wenn Sie tippen, es wird von links nach rechts gehen. Hier haben wir zentriert ausgerichtet. So können Sie sehen, wie das aussieht. Und es wird im Grunde von der Mitte nach außen gehen. Und hier haben wir Allianz schreiben. Also im Grunde das Gleiche wie links ausgerichtet. Hier haben wir automatische Breite, also egal, was Sie eingeben, Lassen Sie uns mit der linken Zeile gehen, um das zu zeigen, egal was Sie tippen. Und wenn Sie beenden, können Sie sehen, dass es die automatische Breite ist. Hier haben wir automatische Höhe. Nehmen wir an, zum Beispiel, dass ich etwas mehr eingeben möchte. Sie können sehen, dass es automatisch in der Höhe als auch geht. Und schließlich haben wir eine feste Größe, was der Absatz ist, über den ich gesprochen habe. Also, wenn ich hier rechts klicke und es unten senken, können Sie sehen, dass dies eine gute Option ist, wenn Sie viele Texte haben. Und zum Beispiel, wenn ich so etwas gemacht habe und ich weiß, dass es unten mehr Text gibt, kann ich immer hier klicken. Und es wird mir den Text zeigen, der unten ist. Was wir hier haben, ist Großbuchstaben. Wir haben Kleinbuchstaben, Titelschreibung. Also wird jeder erste Buchstabe der Welt betitelt werden. Dann haben wir hochgestellt. Also lassen Sie mich zum Beispiel eine Nummer hinzufügen. Und wenn ich auf Super-Skript klicke, können Sie sehen, was es genau dort tut. Wir haben tiefgestellt. Also im Grunde dasselbe, aber unten haben wir unterstrichen. Der gesamte Text wird also unterstrichen und wir haben durchgestrichen, also wird er durch den Text selbst gehen. Sie können hier jederzeit klicken, um es zu ändern und hinzuzufügen, was Sie wollen. Aber im Grunde Großbuchstaben, Kleinbuchstaben, Titelschreibung. Und lasst es uns dabei belassen. Für den Moment. Darunter haben wir ein grundlegendes Aussehen so wie das, was die Formen haben wir Fettleibigkeit. Also, wenn ein Kind zu einem Mickey Wort wird 20 in Fettleibigkeit Mischmodus, Füllfarbe, Rahmenfarben, Schatten, Hintergrund, Unschärfe, und Mark für den Export. Also im Grunde alle die gleichen Dinge, die wir in unseren Formen hatten. Als nächstes gehen wir zu unseren Brettern und ich werde schnell erklären, was Flughäfen sind und welche Vorteile die Nutzung von Flughäfen im Vergleich zu nicht haben. 9. Kunstflächen: Wie wir in einem früheren Willkommensvideo erklärt haben, wo ich über unsere Boards gesagt habe und wo Sie sie erstellen können und wie wir all diese verschiedenen Größen innerhalb von Adobe XD erstellen können, gibt es auch eine weitere Option für den rpart als auch. Wenn Sie also rechts hier auf der linken Seite klicken, werden Sie mit all diesen verschiedenen Boardgrößen präsentiert, was im Grunde genau das gleiche ist wie hier auf der Homepage. Alle diese Größen befinden sich also auch hier. Aber warum sind unsere Boards so nützlich? Und was Sie mit Ihren Artboards machen können, können Sie hier direkt klicken. Sie können die Größe ändern. Also lassen Sie uns sagen, dass dies unser Hauptbildschirm ist. Und Sie können die Größe von Ihrem Artboard direkt von hier aus wählen. Sie können es drehen. So können Sie so klicken oder so. Und lassen Sie uns sagen, dass ich die Größe ändern möchte, um ich weiß nicht. Sagen wir etwas wie 2453 aus irgendeinem Grund, auf den es sich hier erstrecken wird. Sie können auch auf Responsive Größe ändern klicken. Wenn Sie also mit der Größenänderung beginnen, können Sie sehen, wie sich der Text verhalten wird. Und das ist wirklich nützlich. Offensichtlich, wenn Sie ansprechendes Design tun, das Sie ein wenig später berühren werden. Dann haben Sie auch ein Handbuch, das Sie klicken und entscheiden können, wo Sie wollen, Responsive Größe ändern und wie Sie es arbeiten möchten. Als nächstes, wenn ich rechts dort klicke, können Sie sehen, dass wir ein vertikales Scrollen haben und wir keine haben. Aber Sie können auch diese Optionen, die ich zuvor erwähnt habe, über horizontales, vertikales Scrollen und Scrollen in alle Richtungen verwenden. Und das werde ich später noch etwas anfassen. Als nächstes haben wir Aussehen. Also, wenn wir hier klicken, können Sie sehen, dies ist die Farbe Ihres Flughafens selbst. So hässlich mit bei weiß. Oder Sie können es in die gewünschte Farbe ändern. Und schließlich darunter haben wir Layout. Also, wenn ich hier klicken, können Sie sehen, dass wir Layout haben oder wir Quadrat haben. Wenn Sie Ihre quadratische Größe haben, können Sie sie in Heres ändern, quadratische Rastergröße von acht. Ich kann es auf Sonntag ändern, riesig wie 80. Und Sie können sehen, wie das aussieht, wenn es einfacher für Sie ist, Elemente auf dem Raster so auszurichten. Oder Sie können es von hier aus auswählen. Und dann können Sie es von Quadrat zu Layout ändern. Und dann kannst du mit diesen Säulen herumspielen. So werden Spalten normalerweise für UI-UX-Design verwendet, weil Sie Dinge zwei verschiedene Spalten ausrichten können, und Sie können einfach Spalten zählen, was dann wirklich leicht in Code übersetzt wird weil Entwickler einfach verstehen in Bezug auf Spalten, wie breit etwas ist, wie groß etwas ist, und so weiter. Also hier haben wir 12 Spalten und wir haben diese schöne 1920 x 1080, unsere Board-Größe, die wirklich nützlich für Web-Design zum Beispiel sein kann. Also, wenn ich mich dafür entscheide, kann ich so etwas wie acht Spalten verwenden. Ich kann es sogar auf vier ändern, aber gehen wir zurück zu 12. Und ich kann die Rinnenbreite auf 60 ändern, zum Beispiel in der Rinnenbreite ist im Grunde der Abstand zwischen diesen Spalten und Spalten sind diese blauen Bits in unserem Fall. So können Sie beispielsweise die Spaltenbreite 260 ändern, um Ihre Spalten noch schmaler zu machen. Und Sie können verschiedene Ränder ändern. Ränder sind also der Abstand zwischen diesen Spalten. Hier links und rechts können Sie sie also automatisch ändern. Zum Beispiel, wenn ich 200 eintippe und Sie sehen können, dass die Ränder jetzt wirklich riesig sind, aber Sie können auch hier gehen und verschiedene Ränder ändern. Wenn ich also schwebe, können Sie sehen, dass wir Marge, oben, Rand, rechts, unten und links haben. Sie können auch die Standardeinstellung verwenden. Also, wenn wir hier klicken, ist dies die Standardoption, oder Sie können Standard. Also, wenn wir zum Beispiel diese Änderungen vornehmen, 6060, und lassen Sie uns dies zum Beispiel als 60 verwenden. Und wir wollen dies als unsere Standardeinstellung machen. Sie können einfach auf „Standard festlegen“ klicken. Sie können ihm auch einen Namen geben und es wird eine Standardoption dafür machen. Schließlich, wenn Sie denken, dass diese Spalten sind zu ablenkend, können Sie hier klicken und Sie können die Fettleibigkeit dieser Spalten senken, so dass sie nicht zu ablenkend sind , um zu betrachten und Sie können immer Glas auf Ihren Inhalt zu entspannen. 10. Bibliotheken: Bibliotheken sind eine große Bereicherung in Adobe XD, da Sie schnell alle Ihre Dateien, alle Ihre Farben, alle Ihre Zeichenstile und vieles mehr in einem einzigen Raum organisieren alle Ihre Farben, können, in dem Sie navigieren und Sie können auf alle diese Dateien gleichzeitig zugreifen. Es befindet sich also genau hier. Und wenn wir darauf klicken, können Sie sehen, dass Sie Farben hinzufügen können, Sie Zeichenstile hinzufügen können, und Sie können Komponenten hinzufügen. Also lassen Sie mich Ihnen schnell zeigen, wie das funktioniert. Also lasst uns duplizieren. Diese schlugen Control D und wenn Chlor auf 40, zum Beispiel. Und lasst uns es von mittel zu leicht ändern. Lassen Sie uns auch die Farbe zu diesem wirklich dunklen Schwarz ändern. Und lasst uns dies in eine hellere Farbe ändern oder noch besser, lasst uns etwas völlig anderes verwenden. Einsamkeit, Offenlegung, zum Beispiel, und lassen Sie sie hier und dann genau hier kochen, um meine Führer zu verstecken. Was Sie von hier aus tun können, ist für die Farben, die ich hier klicken kann, und ich kann die Farbe meines Textes als Farbfeld hinzufügen. Und ich kann das gleiche auch für Dezimalstellen tun. Für die Zeichenstile kann ich das gleiche tun. Klicken Sie also hier und fügen Sie es dann hier hinzu. Also, weil wir das haben und lassen Sie mich es löschen. So, lasst uns jetzt voran gehen und diese ändern. Also lasst uns mit der rechten Maustaste auf diesen hier klicken. Hit, löschen, so. Also jetzt haben wir nur diese 157 und ich werde auch das gleiche von hier aus tun. Also haben wir diesen Tiefpunkt nicht mehr. So kann ich hier klicken und das hinzugefügt, aber es hat auch hinzugefügt. So kann ich immer auf einen dieser klicken und hier löschen drücken. Und Milchherde, im Grunde. So fügen Sie Farben hinzu. Dieses Hj Sie Charakterstile genannt hatte, und Sie können dies für jede einzelne Form tun. Also lassen Sie uns dies zum Beispiel verwenden, und lassen Sie uns dies verwenden. Und lassen Sie uns zum Beispiel den Rahmen entfernen. Und Sie können einfach hier klicken, um diese Farbe hinzuzufügen. Sie können hier auch doppelklicken und es nennen, zum Beispiel Hauptroute, genannt diese Hauptroute blau zum Beispiel. So wie so. Und nennen wir das und Textfarbe oder Haupttext oder was auch immer. Und das ist wirklich nützlich, wenn Sie später mit Entwicklern zu tun haben, weil Dan, können Sie diese Token erstellen und es wird leicht für sie zugänglich sein. Nun in Bezug auf die Komponenten, lassen Sie uns sagen, dass ich zum Beispiel diese duplizieren wollte, drücken Sie Control D den Shift Alt und klicken Sie mit der linken Maustaste auf meine Maus. Und ich werde mich ändern. Und zum Beispiel, lassen Sie uns diese beiden verwenden. Und statt dessen, lassen Sie uns so etwas kreieren. Und auch wenn ich zum Beispiel darauf klicke , kann ich es vielleicht auf 20 ändern. Und sagen wir, das ist unsere Ikone oder unser Logo oder was auch immer. Und ich kann auf meine Ebenenpalette gehen, hier doppelklicken und es Logo nennen, nur zum Beispiel. Und was Sie tun können, ist, Sie können hier klicken, um es als Komponente hinzuzufügen. Sie können auch direkt hier klicken, um es als Komponente hinzuzufügen. Aber Sie können die Strg- oder Befehlstaste auf Ihrer Tastatur drücken und Sie können es als Komponente hinzufügen. Also zum Beispiel, wenn Sie eine neue Flughäfen erstellen möchten, und lassen Sie uns sagen, dass wir diese erstellen möchten. Sie können klicken, wenn Ihr Logo, ziehen Sie es und legen Sie es rechts hier. Und Sie können sehen, dass es eine Instanz eines Bauteils weil es Ihnen diesen ausgehöhlten Diamanten gibt, den Sie hier sehen können. Und da dies unsere Hauptkomponente ist, können Sie sehen, dass es ausgefüllt ist. Wenn wir sie also nehmen und nebeneinander hierher bringen, können Sie den Unterschied deutlich erkennen. Lassen Sie uns diesen löschen. Drücken Sie Control 0, um wieder an Ort und Stelle zu rasten, und klicken Sie mit der linken Maustaste, um zu navigieren Also, wenn wir hier klicken, können Sie sehen, dass es gefüllt ist und das ist leer. Was das im Grunde bedeutet, ist, wenn Sie Diamant gefüllt sind, Ihre Arbeit mit Hauptkomponente und wenn Ihr Diamant ausgehöhlt ist, als eine Instanz dieser Hauptkomponente arbeitet, was das im Grunde im einfachen Englisch bedeutet, unabhängig von Änderungen, die Sie erstellen und die Hauptkomponente machen, werden sie automatisch in die untergeordnete Komponente oder diesen ausgehöhlten Diamanten in diesem Fall übersetzen . Wenn Sie zum Beispiel die untergeordneten Komponenten überhaupt nicht berührt haben, wird jede Änderung, die Sie an der Hauptkomponente vornehmen automatisch in die untergeordnete Komponente übersetzt. Aber zum Beispiel, wenn Sie diese Änderungen außer Kraft setzen, wenn in unserem Fall zum Beispiel, sagen wir, dass, wenn ich hier doppelklicke, wie so, und ändern Sie es auf zehn oder sogar 0. Dann springe ich hier rein, doppelklicke innen, um meine Form einzugeben und ändert sich zu 50. Sie können es hier aktualisiert sehen, aber nicht hier. Es wurde in der Hauptkomponente aktualisiert, nicht in der untergeordneten Komponente, da wir diesen Wert manuell in untergeordnete Komponenten geändert haben, bevor wir es in der Hauptkomponente getan haben. Sie können sich also vorstellen, dass Sie dies für Ihre gesamte Arbeit in Adobe XD tun können. Stellen wir uns also vor, dass Sie zum Beispiel eine Navigation für Ihre Website erstellt haben. Und als Hauptkomponente haben Sie es so. Aber als untergeordnete Komponenten, nehmen wir an, dass Sie Elemente in Ihrer Navigation ausgewählt haben. Es wird sich also nicht in der Hauptkomponente ändern, aber es wird sich in einer untergeordneten Komponente ändern. Aber in der untergeordneten Komponente haben Sie zum Beispiel die Hintergrundfarbe nicht geändert. So können Sie schnell in die Hauptkomponente springen, ändern Sie die Hintergrundfarbe wird alle Ihre untergeordneten Komponenten aktualisieren. Und Sie können so viele untergeordnete Komponenten haben, wie Sie möchten. In diesem Fall habe ich nur einen, um zu demonstrieren, wie das aussieht. Und lassen Sie uns sagen, dass zum Beispiel in der Schuldennavigation Hauptkomponente, Sie Charakter Stil ändern möchten. Sie möchten beispielsweise die Schriftfamilie aktualisieren. Sie möchten die Schriftgröße aktualisieren. Vielleicht möchten Sie die Schriftfarbe aktualisieren. Sie können dies in der Hauptkomponente tun und es wird in den untergeordneten Komponenten aktualisiert. Egal wie viele untergeordnete Komponenten Sie haben, nur vorgestellt, Änderungen, die Sie an ihren untergeordneten Komponenten vornehmen, werden nicht in Ihre Hauptkomponenten übersetzen, aber sie werden umgekehrt übersetzen. Also von der Hauptkomponente zu den untergeordneten Komponenten. Gehen wir also schnell zurück zu hier und lassen Sie mich das noch ein bisschen mehr erklären. So können Sie auf dieser Hauptkomponente sehen, haben wir diese rote Farbe ausgewählt. Aber wenn ich diese Farbe zum Beispiel wähle , wird es aktualisiert. Auch untergeordnete Komponente. Und lasst uns das ein bisschen interessanter machen. Halten wir unseren alten Würfel oder optionalen MAC. Mann, ich kann noch eine untergeordnete Komponente machen. So können Sie sehen, dass sich diese ausgehöhlten Diamanten nicht ändern. Also im Grunde haben Sie ausgefüllt oder Sie haben durchhalten und das ist es im Grunde. Also lassen Sie uns sagen, dass ich bei diesem einspringen kann, doppelklicken und es zu blau ändern kann. Also lasst uns dieses aktualisieren, um es zu lesen. Aber dieses blaue wird sich nicht ändern, weil es innerhalb dieser untergeordneten Komponente überschrieben wird und nicht in dieser Hauptkomponente. Im Grunde können Sie sehen, wie diese Komponenten aussehen, wie sie funktionieren, und sie sind wirklich nützlich, vor allem, wenn Sie mit, sagen wir, Icons arbeiten. Wenn Sie mit komplexen Elementen wie Navigation arbeiten. Denn zum Beispiel können Sie verschiedene Stile von Komponenten erstellen und verschiedene Elemente erstellen. Wir sind Komponenten, und dann können Sie von dort weitermachen. Sie können auch etwas erstellen, das Komponentenstatus genannt wird. Und das bedeutet im Grunde, wenn Sie später in das Prototyping einsteigen, wie sich diese Komponente ändern wird. Lassen Sie mich Ihnen das an einem echten Beispiel zeigen. Also hier haben wir diese Komponente und sagen wir, dass ich einen anderen Zustand erstellen möchte, zum Beispiel für den Hover-Zustand. Also kann ich einfach hier klicken und einen neuen Status oder einen Hover-Zustand hinzufügen. In unserem Fall möchte ich nur ein Pferd Daten erstellen und ich werde alle Staaten ein wenig später im Kurs erklären, ein bisschen mehr Details. Aber jetzt lassen Sie uns einfach schnell Horace Zustände erkundet, nur damit Sie verstehen können, wie alles funktioniert. Also hier haben wir Hover-Zustände. Wieder einmal können Sie hier auf einen Clickerstatus klicken und bearbeiten. Sie können es auch ändern. Also zum Beispiel, schweben. Und innerhalb des Horrorstatus wir einen Rahmen hinzu, oder fügen Sie uns Hintergrundschatten hinzu, lassen Sie uns einige Elemente hinzufügen. Klicken Sie also auf den Schatten. Lassen Sie uns eine lächerliche Größe oder 202020 mitbringen. So etwas wirklich riesiges wie das. Und wenn ich Sie zurück zu meinem Ebenen-Panel bringe, können Sie sehen, wenn Sie rechts hier klicken, können Sie zwischen Ihren Komponentenstatus wechseln. Aber wenn Sie rechts hier klicken, können Sie sehen, dass Sie auch diesen Komponentenstatus haben. Und auch hier. Da wir vorher keine Komponentenzustände einbezogen haben, haben wir das geändert und in unsere Hauptkomponente aufgenommen, wir haben es nicht in unsere untergeordneten Komponenten aufgenommen. Also noch einmal, was auch immer Sie an Ihrem Mink machen und es wird zu einem Kind Komponenten zu übersetzen. Also hier sind wir im Standardzustand. Und wenn ich hier rechts klicke, und nur um diese Änderungen in der Vorschau, und wenn ein schnell mit dem Mauszeiger darüber, Sie können sehen, dass es sich ändert und dass es in Echtzeit aktualisiert. Aber auch, Sie können direkt hier schweben. Und Sie können sehen, dass es sich ändert, weil wir diese Änderung hier vorgenommen haben. Und es wird auch wie bei der Hauptkomponente aktualisiert. Aber weil wir diesen Eckenradius hier haben, haben wir ihn hier nicht in diesen beiden Komponenten. Wenn ich schwebe, können Sie sehen, dass es aktualisiert und gibt uns diese Änderung, weil wir es in der Hauptkomponente gemacht. Also, das ist es im Grunde für die Komponenten. Du kannst mit ihnen herumspielen. Sie können verschiedene Zustände hinzufügen. Ich werde erklären, dass ein wenig später in diesem Kurs, was Sie mit diesen Komponenten tun können, und diese sind die Bibliothek wieder gesucht, wenn ich Sie zurück zu hier, können Sie sehen, dass wir Farben haben. Sie können beliebig viele Farben haben. Zeichenformatvorlagen. Sie können so viele von ihnen haben, wie Sie wollen. Sie können auch direkt hier klicken, um zwischen GridView Analyst Sie zu wechseln, was auch immer es Ihnen einfacher ist. Vielleicht ist diese Ansicht viel besser geeignet, wenn Sie mehrere Symbole, mehrere Lows usw. haben . Und Sie können dieses Panel auch erweitern, um sich ein bisschen mehr Platz zu geben. Und Sie können es immer ausblenden, indem Sie einfach hier klicken. Es steht Ihnen also nicht im Weg. Und Sie können das auch für Bibliotheken, Layer und Plug-Ins tun. Sie können auch das Dokumentelement durchsuchen. So zum Beispiel das Logo. Hier ist es. So ist es viel einfacher zu finden, besonders wenn Sie Hunderte von verschiedenen Icons haben. Nehmen wir an, dass ich zum Beispiel 50 verschiedene Suchsymbole habe. Ich kann die Suche eingeben, und dann kann ich zwischen diesen Suchsymbolen direkt hier in dieser Liste sortieren, anstatt nach unten zu scrollen und zwischen allen Mart-Symbolen zu suchen. Schließlich können Sie Dokument-Assets direkt hier haben. Also, wenn ich zurückgehe, wird es dich zu den Bibliotheken bringen. Und das sind die Dokumentensäuren. Also alle Assets aus unserem Dokument, die Sie hier sehen können. Oder Sie können auch eine Meine Bibliothek erstellen, die Sie in die Cloud bringt. Und Sie können Ihre Bibliothek zum Beispiel mit benutzerdefinierten Bildern, benutzerdefinierten Farben, benutzerdefinierten Schriftarten, benutzerdefinierten Symbolen und vielem mehr in der Cloud erstellen. Und Sie können einfach dort klicken mit meiner Bibliothek wird ihre Bibliothek aus der Cloud ziehen. Und Sie können die Elemente einfach per Drag & Drop aus der Cloud direkt in Ihr Dokument ziehen. Das ist also ein großartiges Feature und Vorteil, diese Online-Bibliotheken gelesen zu haben. Grundsätzlich, wenn Sie auf einem kostenlosen Plan sind, haben Sie diesen Zugang zu Online-Bibliotheken, aber Ihr Platz ist begrenzt. Wenn Sie den Premium-Tarif haben, haben Sie unbegrenzten Speicherplatz. So können Sie beliebig viele Dateien in der Cloud haben. 11. Ebenen: Wenn Sie als UI-UX-Designer arbeiten, besteht die Wahrscheinlichkeit, dass Sie eine Reihe von verschiedenen Ebenen darin haben. Ein Layer-Management ist wirklich wichtig, als eine Fähigkeit zu haben, aber als eine Art Gewohnheit, Guth Gewohnheiten zu haben. Denn wenn Ihre Projekte wachsen, wenn sie größer werden, wird die Menge an Ebenen enorm sein. Also Layer-Organisation ist wirklich eine große Fähigkeit, als UI-UX-Designer zu haben. Also lassen Sie mich Ihnen in einer WASD zeigen, Schichten befinden sich genau hier. Hier habe ich nur ein Projekt für meinen YouTube-Kanal und du kannst es dir ansehen. Ich werde den Link verlassen, damit Sie gehen und es dort überprüfen können und sehen, wie ich das erstellt habe, wenn Sie es für sich selbst erstellen möchten. Aber Layer befinden sich direkt darunter in Bibliotheken. Und dieselbe Geschichte für die Bibliotheken, auf die Sie klicken können, um sie anzuzeigen und zu klicken, um sie auszublenden. Sie können keine Layer sehen, bevor Sie den Flughafen auswählen. Also, wenn ich diese sind mehr, zum Beispiel, können Sie alle diese Ebenen direkt hier sehen. Lassen Sie mich also etwas näher hineinzoomen und erläutern, was zum Beispiel in diesem Text vor sich geht. Also hier habe ich den Titel, ich habe den Air Max, das ist dieser Text hier, und ich habe diese Maske, und wir werden die Masken etwas später aufrühren. Sie können z. B. alle diese Elemente auswählen. Wenn ich also von hier nach hier gehe, die Shift-Taste gedrückt halte und dann Control oder Command G drücke, damit ich sie in einer Gruppe gruppieren kann. Ich kann hier doppelklicken und den Namen dieser Gruppe zum Beispiel auf Website ändern. Und dann können Sie Ihre Schichten Tragfähigkeit organisieren. in Gruppen zu organisieren ist wirklich nützlich, denn wenn ich nur ein wenig davon ausgehen, können Sie sehen, dass ich eine Gruppe für meine Navigation habe. Innerhalb dieser Gruppe habe ich drei Elemente und ich gehe immer gerne von links nach rechts, weil Mehrheit der Weltbevölkerung von links nach rechts liest. So haben daher eine diese Organisation. Also gehe ich von Logo, das auf der linken Seite ist, oben links Suche, und dann Menü. Du brauchst keine Organisation so zu haben, wie ich die Dinge mache. Es liegt wirklich an Ihnen und wie Sie Ihre Ebenen strukturieren möchten. Aber ich liebe es, sie auf diese Weise zu machen. So können Sie sehen, dass ich sie in eine Gruppe gesteckt habe, weil es viel einfacher ist, diese Gruppe zu verstecken. Sie können das einfach tun, indem Sie hier klicken. Wenn Sie zum Beispiel einige dieser Elemente neu positionieren möchten und Sie nicht möchten, dass diese Navigation aufdringlich ist und an Ort und Stelle steht. Sie können es auch sperren, damit Sie es nicht verschieben können. Also, wenn ich hier klicke, können Sie sehen, dass es an Ort und Stelle bleibt und Sie können es auch für den Export markieren. So können Sie direkt dort klicken und Sie können es später exportieren, wenn Sie möchten. Sie können auch einige Gegenstände außerhalb der Gruppen lassen, wie ich es hier getan habe. Aber Sie können sie setzen, Zum Beispiel habe ich eine Gruppe und unser Element, Ich kann Steuerung z treffen und sie in einer separaten Gruppe setzen. Es liegt also wirklich an Ihnen, wie Sie Ihre Elemente strukturieren möchten. Sie können zum Beispiel auch die Seite zwei aufteilen. Oberteil, Mittelteil, Unterteil Sie können Ihre Elemente auf diese Weise kombinieren. Es liegt also wirklich an Ihnen und wie Sie Ihre Elemente innerhalb des Ebenenbedienfelds strukturieren möchten . Sie können einige dieser Elemente auch neu organisieren, so dass Sie eine Gruppe auswählen können, z. B. ziehen Sie sie unter bestimmte Elemente. Und Sie können das auch für die Elemente tun. Sie können es den ganzen Weg hier unten setzen und Sie können control z so oft drücken , wie Sie möchten, um alle Ihre Ebenen zu organisieren. Das ist es im Grunde für die Schichten. Aber sie sind wirklich wichtig. Und ich kann nicht genug betonen, wie wichtig es ist, besonders wenn Sie anfangen, lernen Sie, Ihre Ebenen zu benennen, weil Sie schnell in diesem Moment gefangen werden werden , wo Sie nicht wissen, was etwas ist, weil Sie es getan haben, es richtig. Und jetzt müssen Sie die Datei an Ihren Client senden, anstatt Stunden am Ende zu verschwenden, nur um Ihre Ebenen umzubenennen, sie umzubenennen, während Sie sich bewegen, oder zumindest versuchen, sie in eine Gruppe zu setzen und eine Gruppe umzubenennen. Wenn Sie also eine Datei an den Entwickler senden, wird der Entwickler leicht in der Lage sein zu verstehen, was alles ist und wo sich alles auf der Seite befindet. 12. Plug-ins: Plugins sind wirklich nützlich, was in Adobe XD zu haben, weil es Eier diese Funktionalität erweitert und geht zurück und weg von Grundlagen. Und Sie können wirklich einige wirklich fortgeschrittene Dinge in Adobe XD tun, indem Sie Plug-Ins verwenden. Plugins befinden sich also genau hier. Auf der linken Seite können Sie dort rechts klicken. Und es wird Ihnen die Liste der derzeit installierten Plug-Ins zeigen. Jetzt sind das nur Mind Plug-Ins. Wenn Sie nur Adobe XD installieren, wird diese Liste leer sein. Sie müssen also mit der Installation von Plugins auf Ihrem Computer beginnen. Und dazu können Sie einfach auf dieses Plus-Symbol klicken. Es wird Sie hierher bringen und hier können Sie entdecken, durchsuchen und verwalten. Wenn Sie auf Verwalten klicken, können Sie natürlich alle Ihre vorhandenen Plugins sehen und Sie können Kit aktualisieren. Alle. In meinem Fall habe ich diese beiden, die aktualisiert werden müssen, damit Sie durchsuchen können. Und lassen Sie uns sagen, dass ich, ich weiß nicht, einen Text hinzufügen möchte . Und Sie können die Eingabetaste drücken. Und Sie können all diese verschiedenen Text-Plugins sehen, die Sie verwenden können , um Ihre Geschwindigkeit zu erhöhen und zu verbessern oder wie lorem ipsum in meinem Fall, was ich werde Ihnen zeigen. Aber das ist im Grunde, wie Browse-Funktion funktioniert. Und entdecken ist wirklich großartig, weil Sie Editor's Wahl haben, haben Sie Jump-Start Ihr Design. So zukünftige Sammlung, welche Dating, dass alle Designer genau dort gelegen haben sollten. So können Sie es überprüfen oder Sie können Ihre eigenen Listen erstellen. Es hängt wirklich davon ab, was Sie tun, weil Plugins ich für mich selbst verwende, vielleicht nicht tot nützlich für Sie sein werden. Hier haben wir wesentliche Plugins. Dokumentieren Sie Chat, ausgefallene Karten, Listen, Plug-in und Glitch. Ich empfehle wirklich, ausgefallene Karten zu verwenden, da Sie zum Beispiel eine schnelle Karte direkt dort installieren können. Und es wird Informationen von Google Maps zu ziehen und es wird, dass wirklich leicht zu integrieren. Sie können XD mit Ihrer Lieblings-App verbinden. Also, wenn Sie Schlacke Ängste in Sapling Dropbox und so weiter verwenden, können Sie es verbinden. Wir haben Sammlungen, so beliebte Skizzen-Plug-Ins, wenn Sie einige Wireframing machen, zum Beispiel, Text- und Lokalisierungstests und Benutzerfreundlichkeit. Also für all diese verschiedenen Funktionen und Sie können auch durch Kategorien blättern. So Kollaboration-Tools und Automatisierung, Benutzerfreundlichkeit und Tests, Publisher behandelt und entworfen Assets. Also lassen Sie uns sagen, dass ich auf das Design klicken möchte, da es mir verschiedene Plugins zeigen wird, die in der Kategorie Design Assets sind. Oder ich kann einfach hier klicken und zwischen diesen verschiedenen Kategorien suchen oder direkt von hier aus suchen. Grundsätzlich, wenn Sie ein Plugin installieren. Nehmen wir an, ich möchte diese UI-Gesichter verwenden und ich kann darauf klicken, um es zu installieren. Sie können die Rezension lesen oder Sie können auf das Plugin klicken, Sie können sehen, was es tut. Sie können all diese verschiedenen Beispiele sehen. Und Sie können die Tags sehen, was ist neu, SO Updates, Bewertung. Sie können sehen, wer es gemacht hat und vieles mehr. Also, das ist es im Grunde. Wie können Sie ein Update-Plug-Ins verwenden, wo sie sich befinden? Und lassen Sie uns nun einige Plug-Ins erkunden. Also hier habe ich diesen Text. Und lassen Sie uns sagen, dass ich diesen Text bearbeiten möchte. Aber sagen wir, ich habe es gerade erstellt und ich weiß nicht, was ich einschließen soll. Dare, Was ich verwenden kann, ist ein Plugin namens Lorem Ipsum zum Beispiel. Sie können einfach Ihren Text auswählen. Klicken Sie hier. Fühle den Platzhaltertext. Sie können von hier aus wählen, was Sie wollen. Und mal sehen. Und mit Satzzeichen, sagen wir Punkt, Zeilenumbrüche einschließen, können Sie deaktivieren, die auf was immer Sie wollen überprüft werden. Gestutzte Textbereichshöhe, um den eingefügten Text anzupassen. Und ich habe zwei Textzeilen, also drücken Sie Einfügen, und es wird diesen Text einfügen. Sie können es noch einmal ausprobieren. Sie können den Platzhaltertext letzte Einstellungen spüren, schnell lorem ipsum, quick lorem, ipsum, Trimhöhe und vieles mehr. Also lassen Sie uns sagen, dass ich meine feste Größe haben möchte. Nehmen wir an, ich möchte es hier erhöhen. Und zum Beispiel, um zu hören, vielleicht fühlen Sie sich mit Platzhaltertext. Jetzt füllt es sich mit Text. Sie können es auch zu hoch schneiden. Sie können auch eine feste Größe machen. Du kannst so machen. Und zum Beispiel brauche ich mehr Text, dann kann ich schnell lorem ipsum wird es füllen. Vielleicht kann ich es ein bisschen mehr auf so etwas wie dieses schnelle Lorem ipsum ausdehnen wird sich in fühlen. Das ist im Grunde, wie lorem ipsum funktioniert und wie dieses konkrete Plug-In funktioniert. Aber sagen wir, dass du willst, ich weiß nichts anderes. So haben wir zum Beispiel diese UI Gesichter. Jetzt lassen Sie uns das ein paar Mal schnell rückgängig machen. Also machen Sie dies zu meiner ersten und ursprünglichen Einstellung rückgängig, was dies war. Also lassen Sie uns sagen, dass ein, ich brauche eine UI genau hier, vielleicht UI-Symbol, vielleicht einige, unser Reifen oder etwas anderes. Lassen Sie uns schnell diese Informationen verlassen. Also irgendwo hier, lassen Sie uns sagen, dass ich ein Gesicht einer Person darin einschließen möchte. Ich kann zu so etwas wie UI-Gesichter gehen. Und ich kann meine Quelle aus US nehmen, gesegnet zum Beispiel, Sie können zu Filters Entertainer gehen. Ich möchte eine Frau von, mal sehen, ich weiß nicht, 30 bis 40 Jahre alt und Emotion ist glücklich. Und das ist alles eine Hilfe. Sie können auch zu Erweitert gehen und sagen wir, anwenden zufällig sind ausgewählte Fotos. Ich wähle nach dem Zufallsprinzip. Es funktioniert im Hintergrund. Und nachdem es die Website für meine spezifischen Aufgaben scannt , weil ich vertraute, mir eine Frau in dieser bestimmten demographischen finden. Sie können sehen, dass es dieses freie Bild von selbstlos gefunden. Und Sie können dies auch für zusätzliche Bilder tun. Also lassen Sie uns sagen, ich will, ich weiß nicht, zwei oder mehr schaffen . Also lassen Sie uns sagen, dass ich diesen schnell löschen möchte. Lasst uns schnell zu hier gehen. Sie können auch das Wiederholungsraster verwenden, aber ich werde ein wenig erklären, ein wenig später erstellen. Und sagen wir, ich will es in diesen drei von uns erröten Filter ausfüllen . Sagen wir 230, Ich weiß nicht, männlich und weiblich und gelten zufällig tun, um seine Magie zu arbeiten. Und je mehr Bilder Sie haben, um es auszufüllen, wird es mehr Zeit in Anspruch nehmen. Offensichtlich kommt hier Ihre Internetverbindungsgeschwindigkeit in Betracht. Und was seitdem getan ist, können Sie sehen, was es hier tut. Also hier haben wir drei Weibchen, und ich habe auch ein Männchen ausgewählt. Also lassen Sie uns sagen, dass ich möchte, dass dies ein Männchen ist und draußen klicken kann. Deaktivieren Sie dann Weiblich, klicken Sie auf Zufallsprinzip anwenden. N wird ein zufälliges männliches Gesicht direkt hier auf dieses Bild anwenden, sobald es gefunden wird, die Kriterien genau dort übereinstimmen. Also da hast du es. Das sind die Plugins. Und Sie können natürlich mit diesen verschiedenen Plug-Ins herumspielen. Sie können installieren Wie viele von ihnen, wie Sie möchten. Sie können sehen, dass ich nur ein paar hier habe, aber Sie können sich vorstellen, Sie könnten eine Liste von Plugins direkt hier haben. Und Sie können nach oben und unten scrollen und im Grunde nach diesen verschiedenen Plug-Ins suchen und sie anwenden. Und schließlich, entdecken Sie Plugins. Ich kann zu „Plugins verwalten“ gehen. Und sagen wir, ich möchte diesen Töpfermacher zum Beispiel löschen , denn wie Sie sehen können, erscheint er hier immer wieder. Ich kann eine 100 installieren. Es wird es deinstalliert. Und du siehst automatisch, wir können sie hier nicht mehr sehen. Also im Grunde sind Türen Bereitstellungen und es liegt wirklich an Ihnen, dem Designer, wie Sie diese Plugins verwenden werden. Sie können zum Beispiel einfach lorem, ipsum und maps verwenden. Sie können dies verwenden, was wir UI-Gesichter für diese Phasen verwenden, um diese zufälligen Avatare zu generieren, Sie können so etwas wie einen weißen Rand verwenden, was wirklich unglaublich ist. Sie können auch verschiedene Plugins verwenden, die in der Lage sein, Ihnen verschiedene Layouts, die bereits vorerstellt wurden, zur Verfügung zu stellen. So können Sie diese Layouts einfach per Drag & Drop in Ihre Boards ziehen und damit beginnen, Designs auf diese Weise zu erstellen. Es ist wirklich alles an Ihnen, wie Sie gehen, um diese Plug-Ins und Plug-Ins lose wird immer erweitert. Jeder kann ein Plug-in für Adobe XD erstellen. Also stellen Sie sicher, dass Sie es immer überprüfen. Achten Sie darauf, Adobe XD Steam auf Twitter zu folgen, zum Beispiel, wenn sie neue Plug-Ins starten, die wirklich cool sind und denken, dass immer mehr Menschen davon wissen sollten. Sie werden immer auf Twitter posten, zum Beispiel, und auf ihrer Facebook-Seite. Also stellen Sie sicher, dass Sie dort für alle neuesten Plugins und Neuigkeiten über Plug-Ins fallen. 13. Raster wiederholen: Wiederholen Raster ist dieses erstaunliche Werkzeug in Adobe XD, die in der Lage ist, alle diese langweiligen Aufgaben eines sich wiederholenden Elemente zu kürzen. Anstatt verschiedene Elemente zu kopieren und einzufügen und sie dann untereinander zu positionieren, können Sie einfach ein Wiederholungsraster verwenden, um diese mühsamen Aufgaben zu erledigen. Also hier haben wir dieses Design und ich beginne mit einem Drahtmodell. Und lassen Sie uns sagen, dass ich eine Liste dieser beliebten Hotels erstellen möchte. Also zuerst, lasst uns schnell einige dieser Elemente loswerden und ich werde sie in einer Gruppe weitermachen. Also kontrolliere g. Und dann bin ich in der Lage, sie einfach nach unten zu bewegen. Und lasst uns das loswerden. Also lassen Sie uns sagen, dass ich diesen Raum ausfüllen muss und ich einige weitere Informationen hinzufügen muss. Was ich tun kann, ist einfach das auszuwählen und das Wiederholungsraster zu drücken. Was das sein wird, erlauben Sie mir, die Menge all dieser verschiedenen Elemente zu erweitern. Also lassen Sie uns sagen, dass ich zwei von ihnen erstellen möchte. Und ich möchte sie auf der linken Seite mit diesen hier unten ausrichten. Und lassen Sie uns sagen, dass ich ein alle drei oder vier mehr erstellen möchte, zum Beispiel so etwas. Und im Grunde ist das, wie einfach Wiederholen eines Rasters ist, mit dem zu arbeiten. Und dann, wenn Sie Ihre Textdateien haben, die Sie, dann können Sie leicht ziehen und ablegen einen Text hinein und Sie können ihn leicht ändern. Also lassen Sie mich Ihnen schnell zeigen, wie das funktioniert. Nehmen wir an, ich möchte eine Textdatei erstellen. Also lassen Sie mich schnell eine auf meinem Computer erstellen und es nennen, zum Beispiel Städte. Und so sieht es aus. Ich benutze einfach Notepad unter Windows. Sie können die Standardoption auf dem Mac verwenden. Und Sie können sehen, dass wir Honolulu uns haben, sagen wir, dass ich das benutzen will. Aber ich möchte auch ein London, Großbritannien, Paris, Frankreich, Italien verwenden . Und lassen Sie uns zwei weitere geben, zum Beispiel in Belgrad, Serbien, und sagen wir Montreal, Kanada. Nehmen wir an, das ist alles, was wir geschaffen haben. Und jetzt, wie können Sie diese Datei wirklich in anderen BSD wirklich schnell verwenden. Also, was ich tun werde, ist es zu schließen, drücken Sie Speichern. Und ich werde es einfach von meinem Desktop ziehen. Wie Sie sehen können, habe ich es Städte genannt und einfach auf die erste gelegt, weil ich nicht möchte, dass es es hier platziert. Ich wollte es auf das erste setzen, weil wir aus diesem ersten Wiederholungsraster erstellt haben. So können Sie im Grunde genau hier und Sie können sehen, dass es in allen diesen automatisch aktualisiert wird. So können Sie so viele dieser Dokumente haben, wie Sie möchten. Sie können zum Beispiel für männliche Namen, weibliche Namen, Städte, Länder, verschiedene Lebensmittel-Refs,Rezepte getan haben für männliche Namen, weibliche Namen, Städte, Länder, verschiedene Lebensmittel-Refs, , wo immer Sie in Adobe XD tun, können Sie verschiedene Dateien für Schulden, verschiedene Decks haben. Sie können dies auch im Web generieren. Sie können zufällige Websites verwenden und Sie können diese Informationen generieren, die wirklich nützlich sein wird , weil dann können Sie eine wirklich aussehende Websites erstellen, real aussehende Apps, wir suchen Dashboards wirklich schnell, weil Sie alle haben diese Dateien bereits vorbereitet. Sagen wir mal, ich möchte, anstatt diesen Ozeanblick zu nennen und was auch immer, sagen wir, ich möchte eine andere erstellen für, mal sehen, ich kenne keine Leute. Und ich werde Leute anrufen. Und Sie können sehen, wenn ich doppelklicke, Ich nannte es Leute. Sagen wir, ich möchte ihnen Namen geben. Jack, Mary spielt keine Rolle, Mark. Stephanie, Jude, Analysten sagen Graeme. Und jetzt, da ich all diese Namen abgeschlossen habe, kann ich schließen und die Bilder auf meinem Computer finden, die ich darin einschließen möchte. Oder Sie können ein zufälliges Werkzeug verwenden. Nehmen wir an, ich möchte sie hier einschließen und zu UI-Gesichtern gehen, diesmal zu Pixeln gehen. Und lassen Sie uns mit Filtern männlich und weiblich gehen. Und lassen Sie uns sagen, dass sie alle glücklich sind und klicken Sie zufällig auf Anwenden. Dieses Plugin wird seine Magie arbeiten, aber Sie können auch das Gleiche von Ihrem Computer aus tun. Also werde ich Ihnen das auch zeigen. So können Sie sehen, dass es mit all diesen verschiedenen Bildern gefüllt ist. Aber wie gesagt, Sie können das für, sagen wir mal männlich. Und hier sind nur einige dieser Bilder vorbereitet. Und ich kann einfach Drag & Drop Wie viele dieser Bilder ich möchte. Sagen wir mal, ich habe sechs davon. Ich kann sechs verschiedene Bilder auswählen, und ich kann sie einfach per Drag & Drop von meinem Computer. Lassen Sie mich das nur eine Sekunde vergrößern. Also sechs von ihnen, kann ich einfach klicken, Drag & Drop in die erste. Und es wird mit diesen sechs Bildern bevölkern. Wie Sie sehen können, ist Wiederholungsraster wirklich sehr nützlich. Und wenn Sie mit verschiedenen Komponenten arbeiten, können Sie sehen, dass ich verfärbt ausgewählt habe, vielleicht möchte ich diesen Gelehrten bearbeiten. Ich kann mit der rechten Maustaste klicken und ich kann einfach zu Bearbeiten gehen. Und lassen Sie uns sagen, dass ich eine bläuliche Version davon verwenden möchte. Sie können sehen, wo immer diese Farbe ausgewählt ist, sie wird zu dieser Farbe wechseln und in Echtzeit aktualisiert. So können Sie sehen, dass es wirklich nützlich ist, mit Wiederholungsraster zu arbeiten. Es ist wirklich sehr einfach. Alles, was Sie tun müssen, ist einfach eine Instanz des gewünschten Entwurfslayouts zu erstellen. Hit Rapid Grid, erstellen Sie, wie viele Varianten Sie wollen. Und Sie können auch Dateien verwenden, wie ich Ihnen mit den Textdateien gezeigt habe, unbegrenzte Anzahl von Dateien. Wie gesagt, Sie können eine für die Namen, Namen der Stadt Namen der Länder und vieles mehr tun. Oder Sie können einfach Plugins verwenden, um verschiedene Layouts, verschiedene Elemente auf Ihre Wiederholungsrasterdesigns anzuwenden . 14. Masken: Wenn Sie Teile Ihrer Elemente oder Ihrer Entwürfe vor Ihnen verbergen möchten, können Sie jederzeit Moscheen in Adobe XD verwenden, um dies zu erreichen. Also lassen Sie mich Ihnen auf meinem Beispiel zeigen, wie ich Masken verwendet habe und wie Sie das tun können. Also hier habe ich ein Beispiel für die Animation von meinem Knopf. Also, wenn ein Hit hier, nur schnelle Vorschau und klicken Sie rechts hier, Sie können sehen, eine Menge davon los ist. Und du kannst dieses ganze Tutorial auf meinem Youtube-Kanal sehen. Aber im Grunde sind viele dieser verschiedenen Dinge passiert und alles wegen der Masken. Also, wenn ich hier springe und dir auf meinem Ebenenbedienfeld zeige, was los ist. Also offensichtlich habe ich eine andere Komponente und verschiedene Zustände mit verschiedenen Animationen. Noch einmal, wenn du es überprüfen willst, Harvard ist fertig, sieh dir meinen YouTube-Kanal an. Das Video wird da sein, damit du lernen kannst, wie ich das gemacht habe. Aber im Grunde haben wir hier diesen Knopf und die Sache, die wir interessiert sind, ist Musk. Also im Grunde, wie Masken funktionieren können Sie sehen, dass wir all diese verschiedenen Elemente im Inneren haben. So haben wir Lieferwagen-Symbol, das ist dies genau hier, Lieferungen gesendet, was der Text ist, den Sie im Moment nicht sehen können. Burgess jetzt, das ist dieser Text hier und offensichtlich Knopf. So, wie ich diese Maske erstellt habe , lassen Sie mich zum Beispiel schnell alles kopieren. Also hatte er die Kontrolle C. Und sagen wir, ich will hier die Kontrolle D treffen. Und lasst uns all diese Dinge löschen. Und ich werde mit der rechten Maustaste auf Komponente aufheben klicken. Ein Rechtsklick auf Gruppenmoschee, hier löschen. Also noch einmal, was wir hier haben, ist dieser Lieferwagen. Sagen wir, ich möchte es hier positionieren. Wir können die Lieferung schicken lassen und ich möchte sie aus dem Weg nach irgendwo hier bewegen. Und wir haben jetzt gekauft, mit dem ich genau hier in der Mitte bewegen möchte. Also, wie kann eine Moschee alles, damit die Menschen nicht sehen, diese Lieferung geschickt. Und lasst uns sogar seine Farbe ändern, denn es spielt wirklich keine Rolle, welche Farbe es ist. Also, wie können Sie das tun, ist einfach das duplizieren, was die ursprüngliche Watson-Hit Control D. ist und im Grunde in unserem Fall, weil ich sehen will, was los ist möchte ich es nur ein wenig erweitern. So Umschalttaste Alt und Linksklick. Ich kann es hier erweitern. Ich kann die Grenze einschließen, die Farbe entfernen, nur damit wir sehen können, was in unserem Fall los ist, Positionen genau hier. Und alles, was Sie tun müssen, ist es einfach nach oben zu positionieren. Klicken Sie darauf. Halten Sie die Umschalttaste gedrückt, klicken Sie hier, um alle Ihre Elemente auszuwählen. Drücken Sie dann die Umschaltsteuerung M oder die Umschalttaste auf einer Maske. Und es wird auf einem Oberkiefer und es wird eine Maske aller dieser Komponenten erstellen. Also im Grunde, was hier passiert ist, ist Maske hat versteckte Komponenten und Elemente, die außerhalb Ihrer sind. Also, im Grunde ist Ihre Ansicht Ihre Maske. Und weil unsere Moschee so groß ist, ist alles, was sich außerhalb unserer Moschee befindet, nicht zu sehen. Alles, was sich in befindet, kann gesehen werden. Grundsätzlich können Sie sehen, dass ich das vielleicht hierher bringen kann. Und Sie werden nicht in der Lage sein, den ganzen LKW zu sehen wenn ich draußen klicke, weil es Maske von hier ist, können Sie offensichtlich Ihre Maske ein wenig nach unten bewegen, wenn Sie wollen, können Sie es nach oben bewegen. Sie können mit ihm herumspielen und Sie können Masken mit mentalen erstellen, zum Beispiel. Wenn Sie also komplexe Formen haben, die Sie auswählen müssen, können Sie natürlich Bleistift dafür verwenden. Und dann können Sie in Schuldenform platzieren, Sie mit Bleistift auf der Oberseite oder Lebensmittelschicht Stapel erstellt haben, wie ich es mit der Kopie meines Knopfes hier getan habe. Dann wählen Sie es einfach aus, wählen Sie alles darunter, drücken Sie Shift Control, Shift Befehl ihnen, um eine Maske zu erstellen und dann können Sie damit spielen. Offensichtlich können Sie andere Zustände erstellen, wie ich Ihnen hier gezeigt habe. Und lassen Sie mich Ihnen noch einmal in unserem Beispiel zeigen, was hier passiert. Also im ersten Zustand, wenn Benutzer klicken oder tippen Burgess jetzt wird verschwinden, LKW wird fallen. Verschwinden, Schaltfläche wird wieder erscheinen und wir haben diese Lieferung gesendet. Wie Sie sehen können, ist alles mit einer Maske gemacht. Alles wird mit den Komponentenzuständen erledigt. Also Masken sind wirklich wichtig, ein wirklich leistungsfähiges Werkzeug in Adobe USD zu haben. Also ermutige ich Sie wirklich, es zu testen und es selbst auszuprobieren und zu sehen, was Sie mit Masken erstellen können. 15. 3D-Funktionen: Adobe XD hat einige 3D-Funktionalität und obwohl es wirklich begrenzt ist, ist es toll, eine Upgrade-Option zu haben, nur um Ihre Designs hier und da nur ein wenig aufzupeppen. Aber es ist wichtig zu beachten, dass Adobe XD keineswegs ein 3D-Tool ist. Wenn Sie 3D lernen möchten, ermutige ich Sie wirklich, kostenlose Tools wie Mixer zu testen, zum Beispiel, nur um zu verstehen, was echte 3D ist und was Sie damit tun können. Aber in Adobe XD können Sie wirklich einige lustige Sachen machen. Lassen Sie mich Ihnen also schnell ein Beispiel zeigen. Dies ist das Video, das ich kürzlich auf meinem YouTube-Kanal erstellt habe und Sie können es dort als Tutorial überprüfen, um zu sehen, wie es gemacht wird. Aber im Grunde, wenn ich hineinzoomen, habe ich alle diese Karten. Und lassen Sie uns sagen, dass ich diese Karte erstellen möchte, um 3D zu sein. Alles, was ich tun muss, ist einfach hier klicken. Dieses Ding erscheint und Sie können klicken und drehen und Sie können sehen, dass es wirklich einfach ist. Wie gesagt, es ist 3D, aber zur gleichen Zeit, es ist nicht wirklich so es ist 3D, aber zur gleichen Zeit, weit fortgeschritten, aber Sie können einige ziemlich coole Dinge mit diesem Tool tun. Also, wenn ich Ihnen schnell zeigen, was ich für dieses Tutorial erstellt habe, wenn ich hier klicken, dann klicken Sie hier auf die Vorschau, und klicken Sie rechts hier. Sie können sehen, dass es von Lager geht, das ist diese 12 3D mit nur einem einzigen Tippen. So können Sie sehen, dass Ihre Optionen mit dieser 3D-Funktion wirklich eingeschränkt sind. Also lasst uns es ein bisschen tiefer erkunden. Also nochmals, wenn ich hier rechts klicke, um in meine 3D-Option zu gehen, was ich hier habe, unsere Breite und Höhe. Also im Grunde das gleiche, x und y sagen Malerei, aber hier haben wir diese drei. Das ist also die Rotationsachse, das ist die y-Rotation. Und schließlich ist dies die z-Rotation oder gewünschte Rotation, wie wir wollen, und das ist Wüstenlage. Also anstelle von x und y haben wir jetzt auch die Z-Position. Was Sie also tun können, ist ein wenig zu erkunden und zu sehen, welche all diese Rotationen sind, indem Sie einfach hier klicken und dann die Umschalttaste und dann die Pfeile nach oben oder unten halten. Also, wenn ich Sie zehn Inkremente auf einmal nehme, können Sie sehen, was x-Achse ist. Wenn ich dasselbe mache, können Sie sehen, was die Y-Achse ist, und Sie können umgekehrt gehen, zu negativ, und es wird sich auch auf diese Weise ändern. Und Sie können auch direkt hier klicken und sehen, warum, was tut das? So können Sie gehen, zum Beispiel, 30 so. Und dann kannst du mit 30 so herumspielen. Und vielleicht, ich weiß nicht, 30 so. Und Sie können diese verrückten Formen in 3D haben, oder Sie können einfach 0, Tab 0, Tab 0 drücken . Und dann geben Sie geht zurück auf die Standardoption zu gehen. Und es ist wirklich wichtig, wenn Sie aus dem 3D kommen wollen, müssen Sie wirklich das hier treffen, was die 3D-Transformationen ist. Oder Sie können Control oder Befehl T verwenden, um nach innen zu gehen, dann wird es aus der 3D verlassen. Was wirklich toll ist, ist, dass Sie verschiedene Komponentenzustände mit 3D verwenden können. Zum Beispiel ist dies mein Standardzustand, aber Sie können sich das einfach vorstellen. Nehmen wir an, dass ich verschiedene verwenden möchte, sagen wir Hintergrund, Schatten oder verschiedene Farben oder was auch immer. In meinem nächsten Zustand, Seele, sagen wir, ich will, ich weiß nicht, dass dieser erste Zustand so ist. Aber wenn sie klicken Hintergrund wird die Farbe zu ändern, wird dies die Farbe ändern und vieles mehr. Nehmen wir also an, dass dieser Zustand als geklickter Zustand bezeichnet wird. Jetzt können Sie das hier nicht tun und es wird in 3D übersetzen, was wirklich eine großartige Ergänzung ist. Aber es ist im Grunde, es ist wirklich begrenzt. Aber du kannst ein paar wirklich coole Sachen machen. Was Sie im Moment der Erstellung dieses Videos nicht tun können, ist 3D schweben. Deshalb habe ich dir gezeigt, wie man tippt, aber du kannst immer noch keinen Hover machen. Aber in der Zwischenzeit, wenn Sie sich dieses Video ansehen, vielleicht beenden Team dieses Update oder sie werden es in der Zukunft aktualisieren und ein Update gestartet. So stellen Sie sicher, wie ich zu Beginn dieses Kurses sagte, dass Sie Ihre Updates überprüfen, das Adobe XD-Team überprüfen und sehen, woran sie gerade arbeiten und welche Updates sie starten. Aber im Grunde ist das alles, was Sie im Moment in Adobe XD haben werden. Aber vielleicht wirst du dieses Video in einem Jahr sehen und vielleicht die aktualisierte. Stellen Sie also sicher, dass Sie Ihr Update überprüfen und die Optionen, die Sie für 3D haben könnten, überprüfen. 16. Mockups: Verwendung von Mockups in Adobe XD ist wirklich ziemlich einfach, aber das Problem ist im Moment, Sie haben nicht so große Auswahl an Mock-ups. Also würde ich wirklich empfehlen, entweder ein kostenloses Online-Tool oder wenn Sie Photoshop haben, Ihre Optionen sind grundsätzlich endlos, denn es gibt Tausende und Tausende von verschiedenen Mockups online , die Sie kostenlos herunterladen können oder sogar verschiedene Pakete kaufen und direkt in Photoshop verwenden. So können Sie Dateien aus XD exportieren, zum Beispiel als PNG oder JPEG speichern und dann einfach in Photoshop-Mockups öffnen, in Mockups platzieren und dann verschiedene Präsentationen erstellen. Aber wenn Sie alles in Adobe XD erstellen möchten, ist die einzige gute Option, die ich gefunden habe, Winkel. Es funktioniert wirklich großartig für mich, aber ich habe einige Leute online gefunden und verstehe es nicht wirklich. Sie bekommen die kostenlose Version, sie haben die B-Version nicht bekommen. Also nimm es mit einem Körnchen Salz. Es funktioniert für mich und ich werde Ihnen zeigen, dass es für mich funktioniert, aber es funktioniert vielleicht nicht für Sie. Also hier habe ich mein gesprächiges UIKit und du kannst dieses UI-Kit auf meiner Website bekommen, wenn du willst. Ich kann Kontrolle C drücken, um dieses zu kopieren, zum Beispiel. Und dann kann ich zurück in den Winkel gehen, oder noch besser, ich kann dieses Modell zum Beispiel nehmen, und Sie können sehen, dass ich ein Premium-Winkelgepäck habe. Dies ist ein bisschen ältere Version. Sie haben eine neuere Version und jetzt, aber sagen wir zum Beispiel, dass ich dieses eines Telefons verwenden möchte, drücken Sie Control-C, um es zu kopieren. Und Sie können sehen, dass ich mehrere davon habe und sie sind nicht einmal alle von ihnen hier aufgelistet, weil sie iMac fehlen, zum Beispiel. Also, wenn ich dich zurück zu meinem Chador UIKit bringe, sagen wir, dass ich dieses Modell hier einfügen sagen wir, dass ich dieses Modell hier einfügenmöchte und ich es hier so positionieren möchte. Und sagen wir, Sie erstellen unsere Präsentation Volumenkörper klicken Sie hier. Und vielleicht ist Ihre Präsentation 1920 mal 1080. Nennen wir es eine Präsentation. So wie so. Lassen Sie uns das Mock-up nach innen bewegen und geben wir es ein paar Farben. Also, wenn ich hier gehe, gehen Sie mit Hauptballon sein kann. Und dann lassen wir es zum Beispiel einfach so. Sie müssen also Ihr Mockup dieses Bildschirms in Ihrem Telefon positionieren. Also, wie willst du das machen? Klicken Sie einfach auf Steuerung, und klicken Sie auf Wechseln zu einem Ebenenbedienfeld Sie müssen auf der Bildschirmschicht sein, die ich im Moment habe. Und dann mal sehen, das wird Splash-Screen genannt. Sie müssen also zu Plugins gehen. Sie müssen das Winkel-Plug-in finden, Mockup anwenden. Dann müssen Sie einen Begrüßungsbildschirm auswählen und auf Anwenden klicken. Es wird seine Magie wirken. Und in einigen Fällen wird es viel Zeit in Anspruch nehmen. Aber in meinem Fall, weil es wirklich ganz einfach ist, hat es das Mockup angewendet und Sie können sehen, wie das aussieht. Wenn Sie also zum Beispiel diesen Feed Nummer fünf verwenden möchten , ist der Prozess genau der gleiche. Also werde ich zur Bildschirmschicht gehen, zu den Plugins gehen, Mockup anwenden und Nummer fünf füttern. Lassen Sie uns gleich hier liegen. Also füttern Sie Nummer fünf hier ist es. Und Sie können mit Pixeldichtequalitätsorientierung herumspielen. So haben Sie das Beste und Sie haben ein wenig besser, Sie haben Durchschnitt und so weiter. Aber ich beschließe, bestenfalls getroffen zu sein, bewerbe mich. Und Sie können sehen, dass es seine Magie funktioniert hat. Und je nachdem, wie groß Ihr Bildschirm ist oder wie groß er ist, wie viele verschiedene Elemente darin sind, dauert es mehr oder weniger Zeit. Aber wie Sie sehen können, dauert es nur ein paar Sekunden in meinem Fall. Also, wie gesagt, das ist wirklich eine tolle Sache zu haben. Und gehen wir zurück zu diesem Thema. Und sagen wir, jetzt möchte ich dieses Mock-up verwenden oder noch besser, lassen Sie uns, ich weiß nicht, dieses verwenden. Drücken Sie Control C, und dann kann ich zurück zu meiner Hauptpräsentationsdatei gehen, meinen Flughafen erweitern. Du würdest V kontrollieren, um es darin einzufügen. Vielleicht wird es sich hier befinden. Und jetzt kann ich drinnen klicken, meine Bildschirmebene finden, die hier genau hier ist. Und lassen Sie uns sagen, dass ich dies in weiß akzeptierten Bildschirm einfügen möchte. Also gehen wir zurück zu hier, wenden Sie Mock-up befindet. Also in weiß, akzeptiert. Mal sehen, wo es sich befindet. Für kann es sogar hier auf der Liste finden. Hier ist es in weiß akzeptiert, hit gelten. Es wird seine Magie wirken. Und vielleicht wird es etwas länger dauern , wegen all dieser verschiedenen Elemente, aber hier sind sie. Wenn ich also das gesamte Modell auswähle, bringe es runter. Sie können sehen, dass die Qualität ziemlich anständig ist, aber es wird offensichtlich ein wenig komprimieren. Es wird also nicht so hochwertig sein, wie dies ist, aber das ist wirklich großartig und gut genug für die Präsentation. Also im Grunde ist das Winkel. Und Sie können auf ihre Website gehen, können Sie einfach in Winkel für Eier D eingeben, zum Beispiel, wird Sie dorthin bringen. Wie Sie sehen können, funktioniert es in meinem Fall, aber ich habe online gefunden, dass einige Leute sagen, dass es nicht funktioniert. Also, was Sie tun können, ist dort installiert, Plug-in, wie Sie hier sehen können, ist es, genau hier. Sie können einfach zur Plug-In-Liste gehen. Sie können zum Suchrichtungswinkel wechseln. Und Sie können sehen, dass es genau hier ist. Ich habe es installiert. Und nachdem Sie es installiert haben, gehen Sie auf ihre Website und schauen Sie sich die kostenlose Version der Mockups an. Das haben sie. C Wenn du so bist, würdest du sehen, ob sie für dich arbeiten. Wenn sie das tun, großartig, dann können Sie wirklich entscheiden, ob Sie das volle Premium-Paket kaufen möchten. Und Sie können in meinem Fall sehen, wenn ich Ihnen das noch einmal zeige, wie viele dieser Mockups es gibt. Dies ist auch nicht Standardgeschichte, weil Sie auch alle diese Vol Papiere bekommen können. So sieht es aus. So können Sie diese Tapeten bekommen und Sie können sie in Ihren Entwürfen verwenden und sie sind extrem groß. Also lassen Sie uns sagen, diese Unschärfe Nummer eins, und gehen wir zurück zu unserem Blickwinkel, und gehen wir zurück zu unserem Design. Also lassen Sie uns sagen, dass ich das Bild hier aufnehmen wollte. Und lassen Sie uns in diesen Hintergrund gehen. Zum Beispiel wollte ich diese verschwommen einbeziehen. Ich kann es einfach per Drag & Drop hineinziehen und Sie können sehen, wie groß das ist, wenn ich doppelklicke. So können Sie es wirklich skalieren. Und wenn ich noch einmal überprüfe, denke ich, es gibt einige, die 4K und 5K mögen, wenn ja, phi 1202880 in der Größe. So erhalten Sie auch diese entwickelten Papiere und Sie bekommen alle diese verschiedenen Winkel Mockups. Und Sie können sehen, wir haben Uhr, wir haben Pixel Nexus Galaxie iMac und sah viel mehr. Also, wenn Sie wollen, können Sie es überprüfen, aber stellen Sie sicher, dass Sie es für sich selbst testen. Da ich online gesehen habe, beschweren sich einige Leute, dass sie das Plugin nicht installieren können oder die Mockups funktionieren nicht oder sie funktionieren nicht in ihrem Fall, aber sie arbeiten in Frankreich Fall. Stellen Sie also sicher, dass Sie das selbst testen, aber das ist es im Grunde für die Mockups in Adobe XD. Wenn Sie Photoshop haben, wenn Sie verschiedene Online-Optionen haben, empfehle ich diese wirklich. Und weil Türen in der Reichweite viel besser sind, können Sie auch verschiedene Geräte wählen. Sie können zum Beispiel wählen, um Ihren Designer Druckwagen zu setzen oder ihn auf ein Haus oder auf ein Schild oder was auch immer zu setzen. Sie haben diese Option jedoch noch nicht in Adobe XD. Sie können auch zwischen Photoshop und XD springen und die Bildretter als Bilder speichern. Xsd springt dann in Photoshop, positioniert sie dort in Mockups, dann drücken Sie die Steuerung oder den Befehl, da sie automatisch auf XD-Dateien angewendet werden. Aber das ist wirklich ein Workaround. Ihre Optionen sind also entweder Winkel oder wenn, wenn Sie sich dieses Video ansehen, vielleicht einige verschiedene Optionen auftauchen. Aber in meinem Fall ist es vorerst entweder Winkel oder Photoshop oder ein anderes Online-Tool. Also noch einmal, in ländliche bis zu entscheiden, was Sie wollen, was Sie am bequemsten mit der Verwendung sind. Und wenn Sie wollen, können Sie für Winkel bezahlen oder Sie müssen nicht, Sie können die kostenlose Version verwenden, die wirklich begrenzt ist. 17. Kurzbefehle: Zu wissen, wie Sie Tastenkombinationen verwenden, ist äußerst wichtig da es Ihren Prozess beschleunigen wird, um Ihren Workflow zu beschleunigen. Und er wird Ihr Leben als UI-UX-Designer viel einfacher machen wenn Sie wissen, wie Sie bestimmte Verknüpfungen für den Anfang verwenden, stellen Sie sicher, dass Sie die wichtigsten lernen. Aber später, wenn Sie die Linie nach unten gehen und Ihre Kenntnisse über UI UX oder Adobe XD als Werkzeug verbessern , dann empfehle ich wirklich, einige, ein bisschen fortgeschrittenere Verknüpfungen zu lernen . Um dir zu zeigen, was ich meine, habe irgendwie ein Design, das ich auf meinem YouTube-Kanal erstellt habe. Wenn Sie also sehen wollen, wie ich erstellt habe, gehen Sie auf den YouTube-Kanal und überprüfen Sie es. Es ist eigentlich eine Reihe von Entwürfen. Wir bewegen uns von der Papierskizze zu einem Drahtmodell in XD, dann zum Design und schließlich zum Prototyping. Also, wenn du willst, kannst du es da draußen überprüfen. Und um Ihnen zu zeigen, was ich meine, hier haben wir eine Reihe von diesen verschiedenen Elementen, solide. Sagen Sie, ich möchte hier klicken und dann mit der rechten Maustaste klicken. Sie können neben all diesen sehen, können Sie diese Verknüpfungen sehen. Offensichtlich ist das wichtigste und am häufigsten verwendete Rückgängigmachen, was Control oder Command Z ist. Aber Sie haben auch Kontrolle V, Kontrolle C. Sie haben einen Befehl, wir sind Command C natürlich, aber Sie haben mehrere von diese. Also, wenn ich hier mit der rechten Maustaste klicke, können Sie Kopie sehen. Sie können basierend auf der Darstellung, Duplizieren, Löschen, Verschieben nach vorne, Verschieben nach hinten, Gruppieren, Aufheben der Gruppierung sehen. Es gibt also viele dieser verschiedenen Verknüpfungen und ich empfehle Ihnen, so viele von ihnen zu lernen, wie Sie möchten und wie Sie benötigen, besonders wenn Sie Ihren Workflow entwickeln und wenn Sie sehen, dass Sie immer wieder dieselben Aufgaben verwenden wieder, ist es wirklich wichtig, diese Aufgaben als Verknüpfungen zu speichern , da es Ihre Geschwindigkeit massiv verbessern wird. Um diese Verknüpfungen zu lernen, können Sie natürlich tun, was ich tue, genau hier. So können Sie mit der rechten Maustaste klicken und Sie können sehen, was alles ist. Oder Sie können auf Websites wie diese gehen. Sie können einfach Google Adobe XD-Verknüpfungen in. Es wird Ihre offizielle Adobe-Hilfe benötigen. Und Sie können Tastaturbefehle direkt hier sehen. Wenn Sie möchten, können Sie auf klicken, um die PDF-Version dieser Verknüpfungen herunterzuladen. Und Sie können sehen, dass es sowohl Mac- als auch Windows-Optionen zeigt. So können Sie eine allgemeine Tastenkombinationen für das Bearbeitungsmenü, für Datei Menü für Teil oder Stift Werkzeug für Ebenen, Objekte, Gruppen und so weiter sehen. So können Sie die erlernten PDF-Verknüpfungen auf diese Weise herunterladen, oder Sie können sie über Adobe ASD erkunden. Erfahren Sie einfach, was der beste Weg ist, um sich Zeit zu sparen , wenn Sie als Jo-Jo-Designer in Adobe XD arbeiten , indem Sie Verknüpfungen verwenden, weil Sie sehen, sobald sie in Ihre tägliche Routine gehen, sehen, sobald sie in Ihre tägliche Routine gehen, wird in der Lage sein, viel schneller, viel produktiver zu sein, und Sie werden XD viel mehr genießen , weil Sie nicht überdenken, was Sie tun, weil Ihre geistige Kapazität mit all diesen ASD-Verknüpfungen zugenommen hat. 18. Arbeiten mit Dateien: Sie können mit mehreren Dateien und Dateitypen in Adobe XD Saw von grundlegenden Bilddateitypen wie JPEG, PNG arbeiten Adobe XD Saw von grundlegenden Bilddateitypen wie JPEG, , können Sie PDF-Dateien öffnen und speichern. Sie können mit SVG-Symbolen und vielem mehr arbeiten. Außerdem sind Dateitypen wirklich wichtig, wenn es um Dokumentdateien geht. Da Adobe XD beispielsweise offensichtlich von Adobe erstellt wird, können Sie Photoshop-Dateien einfach öffnen und mit ihnen arbeiten. Sie können auch mit Illustrator-Dateien arbeiten. Und Sie können auch stundenlang mit Skizze arbeiten, weil sie versuchen, so viele Skizzenbenutzer wie möglich zu nehmen und sie in Adobe XD zu bringen und sie dort zu bleiben. Also, wenn ich Ihnen hier auf unserem Home-Bildschirm zeigen, was wir haben, ist auf Ihrem Computer, Sie können dort klicken und Sie können deutlich sehen, beginnt mit bestehenden Design. Das ist es, worüber ich gesprochen habe, wenn Sie eine Akte haben. So hat unser Kundenentwicklerteam beispielsweise jemand anderes Ihnen den Dateityp zugeschickt und Sie müssen ihn in Adobe XD öffnen. Sie können es von hier aus tun. Also hier haben wir b ist d oder AI, so Photoshop oder Adobe Illustrator -Datei, wir haben XD offensichtlich, und das ist, was, wie er öffnet sich die beste und einfachste. Aber wir haben auch Skizzendateien und das wollte ich Ihnen zeigen. Also habe ich eine Skizzendatei von envision und ich werde sie öffnen. Und eine tolle Sache an Adobe XD-Dateien ist, dass sie wirklich klein sind. Aber hier mit dieser Skizzendatei, mit all diesen verschiedenen Komponenten, Layerstilen und vielem mehr, haben wir eine große Datei. Deshalb braucht es, wenn Sie hier einen Blick werfen, wirklich lange, um zu öffnen. Aber was Adobe XD versucht, ist, diese Skizzendatei zu öffnen und in Adobe XD-Dateien zu konvertieren. Wie Sie sehen können, beginnt es sich mit diesen Komponenten zu füllen und es wird ein bisschen mehr zeigen. Jetzt, wie Sie sehen können. Und was tut, ist zu versuchen, Skizzenkomponenten zu nehmen und sie direkt hierher zu bringen. Wie Sie sehen können, fehlen uns immer noch Farben, wir fehlen immer noch Zeichenstile. Wenn Sie jedoch auf diese Schriftarten aktualisieren, die in diesem Fall fehlen, werden sie hier im Zeichenformatfenster angezeigt. Aber im Grunde wird das so aussehen. So haben wir Begrüßungsbildschirm, wir haben mobile Version. Wenn ich nach unten scrollen, haben wir Tablet-Version. Und schließlich haben wir auch hier eine Web-Version. Wir haben UI-Farbe. Also das ist im Grunde, sie sind eine Art Styleguide. Wir haben diese Hauptkomponenten und Sie können natürlich Komponenten aus diesen Elementen erstellen und Sie können sehen, dass sie Fehler manchmal wie eine Woche sind, diesen Text zum Beispiel, aber wir haben es als Komponente hier. Wir haben auch Symbole, die eine Art zu sagen Komponenten skizziert sind. So gab es auch in XD Symbole genannt werden. Jetzt sind sie unter Komponenten. Also im Grunde sieht das so aus. So können Sie sehen, dass es ziemlich chaotisch aussieht, aber Sie können immer noch mit diesen Dateien arbeiten. Sie können sie öffnen, sie als native Komponenten in Adobe XD speichern Anschließend können Sie die Datei später speichern und sie für Clients, Entwickler und Teamkollegen freigeben . Lassen Sie mich Ihnen endlich die Struktur zeigen. Wenn wir also zum Beispiel dieses Symbol hier nehmen, und wenn ich hier zu meiner Ebenenpalette wechseln, können Sie sehen, was wir haben. Also haben wir diese Form. So können wir es alle diese Elemente hinzufügen. Sagen wir, ich möchte sie ändern. Sie können jedoch sehen, dass es ziemlich leicht aktualisiert wird. Wir haben dieses Symbol in der Mitte, so dass Sie es einfach hinzufügen können. Das Aussehen dieses Symbols, zum Beispiel, wir haben diesen Text und sagen wir, dass ich dies aktualisieren möchte. Also lassen Sie uns sagen, dass ich die Basis und den Knopf erweitern möchte. Also lasst es uns hierher bringen. Bringen wir diesen Text jetzt ein bisschen mit. Es ist also 60 zwischen ICANN und diesem Text und diesem Text. Also im Grunde wird diese Komponente jetzt aktualisiert und ich kann das gleiche für alle diese anderen Komponenten tun. Also, was wir es finden können, nennt man es ein Formular. Und ich kann hier reinspringen. Ich kann tun, was ich dir gesagt habe. Also klicken Sie hier, tippen Sie in das Forum, weil, wie gesagt, wir haben mehrere von ihnen. So können Sie schweben, Sie haben zwei Instanzen gebildet. Und schließlich haben wir uns aus zwei Instanzen dieser einen gebildet. Vielleicht ist es eine bessere Idee, und das haben sie im ersten Fall nicht getan. Da es sich um mittlere Komponenten und mobile Symbole handelt, werde ich dieses Formular mobil nennen. Also lassen Sie es uns testen. Bilden Sie mobil, weshalb es wieder wichtig ist, auf dem Desktop oder Ihrer Elemente. So haben wir Forum und Form und Form. Aber wenn wir es von Anfang an als ein Formular mobil erstellt haben, dann gibt es vielleicht, wenn wir es finden konnten, mobil immer noch nicht. Also müssen Sie vielleicht am Ausgang schließen, dann öffnen Sie es wieder, und dann wird es dort aktualisiert und dort angezeigt. Aber das ist es im Grunde. So einfach ist es, mit Skizzendateien zu arbeiten. Wie Sie sehen können, gibt es eindeutig einige Fehler und Sie müssen Ihren Weg um diese Bugs finden. Sie können diese Komponenten beispielsweise aus dieser Datei löschen und dann von vorn beginnen. Oder Sie können das tun, was ich getan habe, direkt hier und dann die Komponenten bearbeiten. Schließen Sie die dxdy-Datei, öffnen Sie sie erneut und es wird als Hilfe für die Komponente dort angezeigt. Dann können Sie es als x D-Datei speichern und Sie können teilen, mit denen wir ein Video-Entwickler entwickeln, Kunden oder Teamkollegen. 19. Arbeiten mit kostenlosen Ressourcen: Wenn Sie als UX-Designer arbeiten, benötigen Sie natürlich in jedem einzelnen Projekt Ressourcen. Nun, ob das Bilder sind, aber das sind Symbole, Mockups, davon, welche andere Ressource Sie verwenden möchten, Sie haben zwei Möglichkeiten. Sie können mit kostenlosen Ressourcen arbeiten oder mit bezahlten Ressourcen arbeiten. Vor allem Anfänger und Designer, die gerade in diesem Geschäft beginnen, neigen dazu, kostenlose Ressourcen zu nutzen. Deshalb sehen die meisten Designs online genau gleich aus. Denn all diese Wünsche verwenden im Grunde genau die gleichen Ressourcen wie alle anderen. Und das ist das einzige Schlüsselproblem. Und das andere Schlüsselproblem ist nur die Auswahl, die Sie online haben. Also, wenn ich Ihnen mit dem Bild Beispiel zeige, aber dies kann auch zwei Icons übersetzt werden. Hier habe ich unspliced offen, was im Grunde der goldene Standard dieser freien Bilder ist. Und Sie können sehen, dass Sie nach unten scrollen und einige erstaunliche Bilder finden können. Also lassen Sie uns sagen, dass ich zum Beispiel für mein Projekt dieses Bild verwenden möchte. Ich kann es aufmachen. Ich kann sehen, wer der Fotograf ist und ich kann es hier herunterladen. Ich werde auch den Link zum Profil dieses Fotografen verlassen müssen , weil ich sie gutschreiben muss. Du musst das nicht unbedingt tun. Aber wie erröten sagt, es wird wirklich schön für den Fotografen im Besonderen und für uns errötet das Geschäft als auch. Um den Link zu verlassen, wo Sie Ihr Bild gefunden haben, so dass Sie nicht müssen, aber es ist wirklich schön, was zu tun. Paxos tut dies ebenso wie alle diese anderen Websites. Wenn wir also zurück zum Bild gehen, sagen wir, dass ich dieses Bild benutze, aber zum Beispiel möchte ich ein Foto dieses Mädchens in einigen anderen Positionen verwenden. Oder lassen Sie uns sagen, dass ich das Foto verwenden möchte, wo Sie dieses Mädchen als Ganzes sehen können. Vielleicht sitzt sie irgendwo, sie steht solar. Mal sehen, ob wir ein Bild finden können. So können Sie sehen, dass wir dieses eine Bild haben und das ist das Wachstum, aber sollte nicht, es hat nicht diese Blumen. Mal sehen, ob wir etwas anderes finden können. Und wie Sie sehen können, stecken wir jetzt fest. Daher können wir dieses Bild nicht in einer Reihe anderer Bilder verwenden. Ja, es ist das gleiche Mädchen, aber es ist gleichgültig Outfits. Das hat sie nicht, die Blumen auf ihrem Gesicht. Es hat nicht die gleiche Belichtung. Farben sind nicht genau die gleichen. Outfit ist nicht das gleiche. Sofort haben wir ein Problem. Also, wie Designer umgehen dieses Problem? Es gibt einfach andere Modelle zu finden, die ähnlich aussehen mit der ähnlichen Belichtung auf den Bildern mit ähnlichen Farben, Stilen, mit Temperaturen und so viel mehr. Aber im Grunde ist das Ihre Problemumgehung. Ihre Entwürfe werden nicht kohärent sein, weil Sie gehen, um Bild von diesem Fotografen mit dieser Belichtung zu nehmen, tut Fotograf mit dieser Belichtung. Und die gleiche Geschichte gilt für die Mock-ups. Also zum Beispiel, wenn Sie Mockups verwenden, die nicht aus der Sammlung sind , wie ich Ihnen gezeigt habe, Winkelsammlung ist dann ein Mock-ups ist ein Ein-Mock-up wird haben, zum Beispiel, ich weiß nicht, iPhone zehn. Der andere wird iPhone 11 haben und dann MacBook wird die ältere Version sein. Und so viel mehr, wenn Sie Symbole verwenden, dieselbe Geschichte, sagen wir, dass Sie Gliederungssymbole in Ihrem Fall verwenden. Und vielleicht gefällt Ihnen das Suchsymbol von diesem Umriss zurück. Aber zum Beispiel brauchen Sie auch ein Haussymbol und Sie können nicht den gleichen Stil von Symbolen in dieser Rückseite finden. Also, was Sie tun müssen, ist völlig anders als jemand anderes zu verwenden, der es gemacht hat. Das wird eine lästige Aufgabe für Entwickler sein, weil Icons nicht auf die gleiche Weise gemacht werden. Vielleicht ist dieses Symbol als SVG verfügbar, dieses Symbol ist als PNG verfügbar. Und wenn Sie diese Dateien an den Client senden, müssen Sie auch dem Client sagen, ob Sie diese Elemente verwenden möchten. So zum Beispiel, dieses Bild, dieses Symbol, dieses Modell, Sie müssen all diese Designer gutschreiben, weil sie es erstellt haben. Und unter bestimmten Lizenzen müssen Sie bestimmte Dinge tun. Sonst riskieren Sie eine Klage. Und das ist wirklich das Hauptproblem mit diesen kostenlosen Ressourcen, weil unsere, meine fast 20 Jahre in dieser Branche, ich fand viele, viele, viele Designer da draußen, die sich beschweren, dass jemand anderes hinter ihnen her kommt. Ido Fotograf oder ein Kollege Designer oder eine Website, weil sie eine Ressource verwenden, vor allem von Google Images. Denn wenn Sie Ressourcen aus Google-Bildern verwenden, haben Sie wirklich keine Ahnung, wer es erstellt hat. Weiß und sie erstellt, lassen Sie zumindest mit Websites wie Ameisen Versprechen zum Beispiel, oder Symbol-Websites wie flache Symbol zum Beispiel, Sie wissen zumindest, wer das ursprüngliche Element erstellt, wo Sie es herunterladen und wen Sie Kredit. Aber wenn Sie Google Bilder, zum Beispiel, oder Google-Dateien, dann sind Sie in echten Schwierigkeiten, weil die meisten Male haben Sie wirklich keine Ahnung, wer das ursprüngliche Design oder das Symbol oder was auch immer erstellt. Und dann, wenn Ihr Kunde es verwendet, riskieren sie oder potenzielle wird sortieren. Also bedenken Sie diese Dinge im Hinterkopf. Nummer eins, Sammlungen, also werden Ihre Entwürfe nicht kohärent aussehen, weil Sie ein Bild aus der Dispersion nehmen können, ein Bild von dieser Person. Design wird also ziemlich chaotisch aussehen, besonders auf Bildschirmen mit niedrigerer Latenz. Und vor allem heute haben wir 120 Hertz Bildschirme. Also, wenn Sie PNG-Symbol und SVG-Symbol verwenden, können Benutzer wirklich sagen, und vor allem mit diesen Klagen. Also behalten Sie all diese Dinge im Hinterkopf, wenn Sie anfangen, wenn Sie diese kostenlosen Artikel aus dem Web verwenden. Also vergewissern Sie sich, dass Sie es verstehen. Ich sage nicht, dass Sie diese kostenlosen Gegenstände nicht verwenden, aber stellen Sie sicher, wenn Sie sie verwenden, um sie verantwortungsvoll zu verwenden, speichern Sie einfach alle diese Lizenzen, Meereswand dieser Ressourcen, sehr, Sie haben sie gefunden. Sie können zum Beispiel Google-Dokument öffnen. Und dann können Sie Bilder in einer Liste auflisten, in der Sie sie für ein bestimmtes Projekt oder Symbole gefunden haben oder welche andere Ressource Sie verwenden. Und dann können Sie zumindest an Ihren Kunden senden und sagen, wenn Sie diese Ressourcen verwenden möchten. So vernünftige diejenigen, die ich in meinem Design gemacht habe, stellt sicher, diese Schritte zu befolgen, um diesen Leuten zu danken, um die Links auf ihre Websites zu setzen und so weiter. So sind Sie als Designer abgedeckt und dann übernehmen Sie die Verantwortung von sich selbst zu Ihren Kunden und lassen sie eine Wahl haben. Also, wenn sie diese Gegenstände verwenden wollen, können sie, aber sie kennen jetzt die Risiken. Zum Beispiel, nennen wir es so. Oder wenn sie einige andere Gegenstände verwenden wollen, dann sind Sie auch freigegeben, weil Sie sich vor potenziellen Klagen und potenziellen Problemen in der Zukunft retten . 20. Arbeiten mit erstklassigen Ressourcen: Aber was passiert nach einer gewissen Zeit, wenn Sie etwas Traktion gewinnen, wenn Sie einige wertvollere Kunden bekommen, wenn Sie etwas Geld sparen als wirklich, wirklich empfehlen, dass Sie alle diese freien Ressourcen zu vermeiden, außer zum Beispiel, für Schriftarten, weil Sie Google-Formulare verwenden können , die frei und Open-Source-und wirklich großartig sind. Aber wieder einmal, die Mehrheit der Designer gibt es mit diesen Mitteln. Stellen Sie also sicher, dass Sie verstehen, ob Ihr Design ähnlich aussieht oder sogar genau das gleiche wie einige dieser anderen Designer. Es besteht eine große Chance, dass Sie Schriftart gewählt haben, die andere Designer als auch gewählt haben, Symbole, Bilder und vieles mehr. Also noch einmal, wenn Sie Premium-Ressourcen verwenden möchten, gibt es viele verschiedene Optionen gibt, aber was ich wirklich empfehlen, ist und lebenswichtige Elemente. So sieht es aus. N, Sie erhalten alle diese Artikel, die Sie hier unter einem einzigen Preis sehen. Du bekommst also weitere 50 Millionen Fotos. Sie haben auch ihre Fotos hier. Sie haben Stock Video, Video-Vorlagen, Musik, Soundeffekte, Grafik Dan Blut. So drucken Sie Vorlagen, Websites, Ihre Kinder Infografiken. Wir haben Grafik, also Hintergründe, Texturen, Muster, Symbole, Präsentationen, Fotos, Schriftarten, Add-ons, Web-Vorlagen wie Website-Vorlagen. Sie haben auch WordPress-Themes. Wir haben 3D genau hier haben wir WordPress, CMS, drei Dateien. Wir haben eBooks und Kurse sowie auf Watteau dots plus, Sie bekommen all diese verschiedenen Elemente unter einem einzigen Preis. Sie zahlen den Preis für ein Jahr. Und dann in diesem Jahr haben Sie unbegrenzte Nutzung dieser Dateien. Denn auf einigen anderen Seiten wie usaid, zum Beispiel, wenn Sie zahlen, haben Sie ein tägliches Downloadlimit. So haben Sie ein Limit, wie viele Elemente Sie zum Beispiel in einer einzigen Sitzung oder für ein einzelnes Projekt herunterladen können . Während Whitt und Vitalelemente, brauchen Sie das nicht und Sie können verwenden, was Sie wollen mit Eduardo-Elementen und Sie sind immer mit ihrer Lizenz abgedeckt. Also lassen Sie uns Fotos machen, zum Beispiel, springen wir direkt hier rein und lassen Sie uns Fotos sehen. Also noch einmal, Sie können zu diesen 120 Fotos gehen und es sind 50 Millionen zusätzliche Fotos da draußen. Also lassen Sie uns sagen, dass ich dieses Foto verwenden möchte. Ich kann darauf klicken. Und wenn es sich öffnet, können Sie sofort einen großen Unterschied zwischen Premium-Fotos und kostenlosen Fotos sehen . Es ist die Größe. So können Sie diese Fotos zum Beispiel in einer Kampagne verwenden. Nehmen wir an, Ihr Kunde hat eine Kampagne. Sie verwenden diesen exakten Foto-Fußabdruck auf kleinen Flächen. Sagen wir also auf einer Visitenkarte oder auf einem Flyer auf großen Flächen. Also sagen wir auf einer Seite eines Gebäudes, auf einer Website. Also Webseiten, und sagen wir, zum Beispiel, mobiles Design als auch. Vielleicht benutzen sie es in einem Druck, vielleicht benutzen sie es im Fernsehen. So sind Sie wirklich abgedeckt. Nummer eins durch die Lizenz und Nummer zwei mit der Dateigröße, weil die Dateigröße riesig ist und Sie damit wirklich einfach arbeiten können. Jetzt, wenn es an der Zeit ist, es herunterzuladen, können Sie einfach hier klicken, um herunterzuladen, Sie können ein neues Projekt erstellen und nennen Sie es r Bild, oder ein Projektbild oder was auch immer. Und Sie können einfach auf Erstellen, Projekt, unser Bild, Anzeige und Dialog klicken. Und es wird sofort mit dem Download beginnen. Sie können ohne Lizenz herunterladen, aber auf diese Weise werden Sie Wasserzeichen überall auf diesem Bild zu bekommen, wie Sie genau hier sehen. So können Sie es verwenden und es an Kunden senden, aber sie werden immer noch dieses Bild kaufen müssen. Es ist also wirklich ein Drag. Sie können sehen, dass es 70 Megabyte groß ist, also ist es wirklich ziemlich riesig und lassen Sie es schnell abbrechen. Du machst dich also nicht darum, weil ich dir noch mehr zeigen will. Es ist von dieser Person zu 74 Bildern. Also schauen wir uns dieses Mädchen an. So können Sie das Profil dieser Person öffnen. Sie können auch nach unten scrollen und sofort sehen. Also hier ist es, und Sie können sehen, wie das aussieht. So sofort können Sie sehen, dass es aus dieser Serie ist, weil die Beleuchtung die gleiche ist, Modelle sind die gleichen. So können Sie mit dem Scrollen beginnen und sehen, wo sich das Bild befindet. Nehmen wir an, zum Beispiel, Sie brauchen diese Bilder von diesen Leuten. Sie können sehen, dass sie alle in diesem Büro sind. Die Beleuchtung ist genau das Gleiche. Größen sind riesig und Sie können auch alle diese zusätzlichen Bilder aus der gleichen Serie verwenden. Also lassen Sie uns sagen, dass Sie über uns Abschnitt auf einer Website zum Beispiel haben. Und wenn du deinen Teamkollegen zeigen willst, kannst du diese Leute benutzen. Wenn Sie Ihre Arbeitsumgebung zeigen möchten, können Sie diese Personen verwenden. Und es wird kohärent aussehen, weil es aus dem gleichen Set stammt, das am selben Tag erstellt wurde, unter der gleichen Beleuchtung von demselben Fotografen, an einem Ort hochgeladen wurde. Also in diesem Fall in VO2-Elemente, und Sie können sie alle unter der gleichen lizenzierten verwenden. Sie müssen also nicht fünf Bilder herunterladen, fünf verschiedene Lizenzen an Ihren Kunden senden, und sie müssen jedem Autor dieser fünf verschiedenen Bilder gutschreiben. Sie können diese Lizenz einfach nutzen. Sie müssen niemandem gutschreiben. Sie haben nur diese Lizenz für den Fall, dass dieser Fotograf sich ihnen nähert. Und sie können einfach zeigte ihm die Lizenz zu sagen, werfen Sie einen Blick mein Designer und bekam diese von einem VO2 Elemente sind die Lizenz und sie sind abgedeckt. Dies ist also wirklich der Haupt- und Hauptunterschied zwischen kostenlosen und bezahlten Ressourcen. Wieder einmal können Sie mit kostenlosen Ressourcen beginnen. Vergewissern Sie sich, dass Sie es verstehen, wenn Sie sie verwenden. Es gibt einige Risiken, und es gibt einige berufliche Niveaus beteiligt, wie ich erklärt habe. Aber wenn Sie professionelle Lizenzen verwenden und für diese Dienste bezahlen, dann haben Sie wirklich keine Einschränkung. Und die Auswahl ist wirklich ziemlich riesig, wie Sie hier gesehen haben. Lassen Sie mich Ihnen zum Beispiel eine weitere Sache mit den Icons zeigen. Also, wenn ich Sie hier zurück nehme und sagen wir, ich weiß nicht, starten Sie Icons zum Beispiel. Und Sie können hier sehen, es öffnet sich in verschiedenen Kategorien. Also lassen Sie uns sagen, dass ich Grafiken brauche, weil ich diese Startup-Symbole brauche, können Sie sie eindeutig so trennen. Sie können auch das gewünschte Dateiformat auswählen. Und Sie haben auch ein bisschen mehr von diesen Dateiformaten unterstützt, aber sie werden hier im Moment nicht angezeigt. Also lassen Sie uns sagen, dass ich diese wirklich mag und ich mag, wie sie aussehen. So kann ich einfach die Person besuchen, die sie gemacht hat. Es ist nur eine Ikone. Und Sie können deutlich sehen, wie diese Symbole aussehen. Und ich kann hier reinspringen und die Symbole finden, die Sie im exakt gleichen Stil sehen können. Sie haben alle diese verschiedenen Symbole, so dass Sie sie in Ihrem Projekt verwenden können. Und Ihr Projekt wird viel kohärenter sein. Außerdem können Sie deutlich sehen, dass sie wirklich präzise und wirklich professionell gemacht werden. Aber Sie bekommen auch farbige Symbole sowie die Ausreißer Symbole ohne jede Farbe. So können Sie sie anpassen, wie Sie brauchen und wie Sie wollen. Sie erhalten auch diese Premium aussehenden Illustrationen, was ein großer Trend ist, den ich in letzter Zeit sehe, vor allem in den letzten ein oder zwei Jahren, Menschen verwenden dieses Plug-In in Adobe XD, um diese Illustrationen zu generieren. Und jedes einzelne Design da draußen sieht genau gleich aus, weil all diese Designer genau die gleichen Illustrationen verwenden. Und sie gehen so weit, dass faul zu sein, nicht die Farbe dieser Illustrationen zu ändern und vielleicht die Pose zu ändern, vielleicht die Größe, Zusammensetzung oder irgendetwas anderes zu ändern . Sie verwenden nur diese Symbole und Illustrationen kostenlos. Also, die Verwendung eines Watteau-Elemente zum Beispiel, in Dienstleistungen wie es gibt Ihnen, dass Wettbewerbsvorteil. Da Sie nicht nur von diesen Lizenzen abgedeckt sind, werden Ihre Entwürfe frisch aussehen, da Sie all diese Beispiele zur Auswahl haben. Und sie werden viel professioneller aussehen, denn Sie werden sie von Designern nehmen , die sie in der Seite der Kollektionen erstellt haben. Ob es sich also um Bilder handelt, wie ich Ihnen gezeigt habe oder um Symbole, wie ich Ihnen in diesem Fall gezeigt habe, Ihre Designs werden viel polierter und viel professioneller aussehen wenn Sie Premium-Dienste wie Wechselrichterelemente verwenden, zum Beispiel. 21. Verwendung von UI: Wenn Sie nicht jedes Mal von Grund auf neu beginnen möchten, Ihren Workflow verbessern und Ihre Geschwindigkeit erhöhen, ist die Verwendung von UI-Kits. Und Sie können UI-Kits verwenden, die kostenlos und wirklich klein sind, oder die bezahlt und wirklich groß sind. Also lassen Sie mich Ihnen hier einen schnellen Vergleich zeigen. Cura hat also ein gesprächiges UI-Kit, das ist das UIKit, das ich und mein Team vor langer Zeit erstellt haben. Also haben Sie alle diese Elemente, Sie haben alle diese Komponenten, Sie haben all diese Charakter-Stil direkt hier, so dass Sie sofort loslegen können. Also, wenn ich hier rechts klicke und einige davon nehmen. Also, lassen Sie uns das zum Beispiel verwenden. Und lassen Sie uns sagen, dass ich zum Beispiel auf einer alten Desktop-BAR-Kopie verwenden und direkt hier eingefügt werden möchte. Ich möchte dieses Bild verwenden, kopieren und direkt hier einfügen. Und lassen Sie uns sagen, dass ich diese Schaltfläche verwenden möchte, zum Beispiel kopieren und direkt hier einfügen. Du bekommst also die Idee, wie schnell das ist. Sie müssen nur Elemente kopieren und einfügen, und Sie können auch Komponenten verwenden. Also, wenn ich dich noch einmal zurücknehme, zum Beispiel, kann ich hier gehen und wir haben nav bar Chat zum Beispiel. Ich kann es direkt hier ziehen und ablegen. Und ich kann es einfach so positionieren, dass es genau hier ist. So können Sie sehen, dass Sie beginnen können, diese Elemente wirklich schnell zu bauen. Sie können diese Elemente ändern. Sie können die Farben ändern, Sie können Bilder, Symbole und vieles mehr ändern . Deshalb sind Sie, warum Kinder extrem nützlich sind. Sie müssen diese Elemente nicht von Grund auf neu erstellen. Sie können sie einfach verwenden. Jetzt war dies mein UI-Kit, aber Sie müssen nichts kaufen, was wir erstellt haben. Was Sie tun können, ist einfach kostenlos UIKit zu verwenden, die online sind. Aber wieder einmal, Sie stoßen auf die gleiche Ausgabe, die ich zuvor über kostenlose und Premium-Artikel erwähnt habe . Ihre Entwürfe könnten am Ende genau gleich aussehen, aber nicht in jedem Fall. Lassen Sie mich es Ihnen zeigen. Also, wenn Sie direkt hier springen, das sind Adobe.com Slash Produkte, XD Futures UI-Kits, oder einfach die Eingabe von Adobe XD UI-Kits online und gehen Sie auf die Website von Adobe. Sie können hier gehen und sehen, dass Großbritannien Apple Design hat, das Apple zertifiziertes Design ist. Und das ist wirklich sehr nützlich, wenn Sie iOS-Apps erstellen. Also ich wirklich, wirklich wirklich empfehlen, dass Sie dieses Google-Materialdesign erhalten, die gleiche Geschichte, aber für Android AGM-Komponenten. Also kannst du das tun. Microsoft UWB, wenn Sie für Microsoft arbeiten, Plattformen, für Amazon, Amazon, Alexa, wenn Sie mit Stimme arbeiten, was die Zukunft ist, Adobe XD unterstützt auch. Sie haben IBM Design und Sie haben auch Bootstrap. Wenn Sie also mit Bootstrap arbeiten, können Sie dort nicht anfangen. Außerdem können Sie den ganzen Weg nach unten scrollen und Sie können sehen, Sie haben Anmeldebildschirm Notizen, App, handgezeichnete Wireframes. So haben Sie dieses Designsystem Präsentation Komponenten Datum. So können Sie direkt hier einspringen und jede dieser UIKit herunterladen , um Ihren kreativen Prozess zu starten. Also noch einmal, denken Sie einfach darüber nach. Fangen Sie immer mit kostenlosen an, die, egal was Sie tun, vor allem, wenn Sie loslegen. Also nur Desktop Wasser, sehen, was für Sie funktioniert, was nicht. Und später können Sie einige dieser UI-Kits und Elemente kaufen, wenn Sie möchten. Aber wie Sie gesehen haben, ist die freie Auswahl extrem riesig und das ist nur auf dieser offiziellen Adobe-Website. Sie sind Websites von Drittanbietern und Designer, die alle möglichen erstaunlichen Sachen kreieren. Also ich fordere Sie wirklich auf, es zu überprüfen und zu sehen, weil Sie Kinder sind wirklich sparen Sie eine Menge Zeit und eine Menge Energie, die an jedem Projekt arbeiten, groß oder klein. 22. Ein Designprojekt erstellen: Wenn Sie Designprojekte erstellen, gibt es wenige Dinge, die Sie beachten sollten, wie groß das Projekt ist, wie lange wird es dauern? Aber auch, wie lange können Sie mit der Struktur gehen, die Sie an Ort und Stelle haben? heißt, wenn der Kunde aus irgendeinem Grund entscheidet, diese Projekte in der Zukunft zu erweitern. Wenn Sie also ein Website-Design machen, möchten sie vielleicht einige weitere Seiten hinzufügen. Wenn sie App-Design machen, möchten sie vielleicht mehr Bildschirme hinzufügen. Sie machen Dashboard-Design. Vielleicht möchten Sie ein paar weitere Abschnitte hinzufügen, die Sie vorher nicht gezählt haben. Wie wird all das in Ihrem Designprozess aussehen und sind Ihre Dateien skalierbar genug? Ist Ihre Struktur skalierbar genug, um die Schuldenlast zusätzlicher Designanforderungen und Design-Feedback zu unterstützen . Also werde ich Ihnen eine Datei zeigen, die aus meinem Kurs stammt, Adobe XD Masterclass, die mit über 20 Stunden langer Meisterklasse ist. Und Sie können es mit einem riesigen Rabatt bekommen. Oder wenn Sie sich diesen Kurs auf einer der Plattformen ansehen, können Sie sich jetzt einfach anmelden. Und wenn Sie bereits in der Klasse angemeldet sind und dann werden Sie diese Datei in einer Klassendateien enthalten bekommen. So sieht es so aus. Und ich beginne normalerweise mit dem Designbrief. Wir haben hier in dieser einzigartigen Datei keinen Designbrief, da es sich um eine externe Datei handelt. Und noch einmal, wenn Sie in einem Kurs sind, werden Sie das Design kurz bekommen. Sie können diese Datei dann in Ihre eigenen Projekte replizieren, unabhängig davon, ob sie groß oder klein sind Sie können diese Projektdatei für die Entwurfsunterlagen für Ihre persönlichen und kommerziellen Projekte verwenden . Also wieder, Sie werden diese Datei bekommen, wenn Sie in einem Kurs angemeldet sind. Aber hier haben wir diese Dateistruktur. Und wie gesagt, beginnen wir normalerweise mit einem Designbrief. Und innerhalb des Entwurfsbriefes müssen wir all diese wichtigen Informationen erhalten, wie wer der Kunde ist, wer seine Zielgruppe ist, wie alt sie sind, wo sie leben , was sie tun, wie sie interagieren werden unser App-Website-Dashboard, was auch immer wir tun. Und dann werden wir den Kunden alle diese zusätzlichen Fragen stellen , die in diesem Design-Kurzvideo aufgelistet und erklärt werden. So können Sie es noch einmal im Kurs auschecken und auch die Datei auschecken. Nachdem Sie alle diese Informationen gesammelt haben, beginnen wir, in diesem Fall die Website-Architektur. Hier haben wir also die Website-Architektur herumliegen. Und ich werde nicht den ganzen Weg zoomen, um Sie nicht zu stören, aber das ist nur eine Ebene aller Seiten, die derzeit auf unserer Website sind, wie sie miteinander interagieren. Und das ist nur auf der sehr grundlegenden Ebene darüber, wie Seiten miteinander interagieren. Wenn der Benutzer auf eine Seite klickt, wohin führt er sie? Wenn sie auf eine andere Seite klicken, wohin bringen sie sie irgendwie von Seite zu Seite? Müssen sie zu separaten Seiten, externen Seiten und vieles mehr gehen? Wieder einmal, wenn Sie sich in den Kurs einschreiben, Alles wird in diesem Video erklärt. Darunter haben wir Papier-Drahtmodelle. Und wie ich schon oft sagte, ich mag es, mit Papierdrahmen zu beginnen, weil es nur der so einfache Prozess ist, Sie tun müssen, ist einfach jede Art von Ben zu verwenden, jede Art von Papier. Und Sie können Ihre Ideen, die Sie in Ihrem Kopf haben, einfach auf ein Stück Papier ablegen. Und sobald Sie anfangen, das zu tun, beginnen Sie, unsere SOM-Ideen zu realisieren, die funktionieren. Vielleicht funktionieren einige Ideen mit diesem Projekt nicht. Dann werden Sie in der Lage sein, es schnell zu verstehen, weil Sie das viel schneller machen können , als wir mit jeder Software einschließlich Adobe XD beginnen würden, denn alles, was Sie noch einmal brauchen, ist nur ein Stift und Papier. Dann, wenn Sie sich für den gesamten Projektstil entscheiden, über die gesamte Projektstruktur. Anschließend können Sie von Papier-Drahtmodellen zu Adobe XD wechseln. Und hier haben wir Papier-Drahtmodelle genau hier. Ich habe sie gescannt und gezogen und in Adobe XD abgelegt. Wenn Sie jedoch keinen Scanner haben, können Sie ein Bild mit Ihrem Telefon aufnehmen und dann das Bild in Adobe XD bringen. Und von da an können wir zu Drahtmodellen übergehen. Und Sie können sehen, dass wir gerade diese Grundfarben haben. Also haben wir wenige Grautöne, wie wirklich hellgrau, vielleicht etwas dunkler. Und dann diese dunkelgrau, Wir haben ein Logo, weil in diesem Fall Kunden zentriert das Logo und wir haben einige Strukturelemente wie die Fußzeile hier. Und Sie können sehen, dass wir gerade diese eine Zeile in den Fußzeilenlinks gemacht haben, weil wir an diesem Punkt immer noch nicht erkannt haben, dass die Fußzeilenstruktur enthalten wird, deshalb haben wir es nur sehr minimal gehalten, aber gleichzeitig funktioniert es immer noch als Fußzeile und Sie werden immer noch in der Lage sein zu verstehen, was alles ist. Dan, hier haben wir eine Login- und Anmeldeseiten, und hier haben wir die große Dashboard-Seite, die die Homepage für das Dashboard ist. Denn wenn Benutzer alle diese Seiten durchlaufen, gehen sie zur Anmeldung und Anmeldung von dieser Seiten, weil wir eine Call-to-Action-Schaltfläche hier oben haben. Dann können sie dorthin gehen. Von dort aus können sie sich in ihrem Dashboard anmelden und auf all diese wichtigen Informationen zugreifen, wie Kontoinformationen, Transaktionen, Kreditkarten und so weiter. Weil es sich um eine Fallstudie der Bank handelt. Also im Grunde Schulden, wie Wireframes aussehen werden und Wireframes sind da. Wieder einmal können Sie zu diesem Zeitpunkt mit der Freigabe für Ihren Kunden beginnen. Der Kunde kann damit beginnen, Ihnen Feedback zu hinterlassen. Sie können das auch in der Papier-Wireframe-Phase tun. Aber es ist viel eleganter und es ist hier viel einfacher, weil Sie es in Adobe XD getan haben. Sie können den einzelnen Link mit ihnen teilen und dann können sie das Feedback hinterlassen. Vielleicht können sie beginnen, die Struktur der Website, der App oder des Dashboards zu verstehen , was auch immer Sie tun, und dann geben Sie konkrete Rückmeldungen zur Schuldenstruktur oder auf einer einzigen Seite einer Struktur. Und Sie können es leicht ändern, denn noch einmal, werfen Sie einen Blick auf es ist nur ein Drahtmodell. Sie haben keine Bilder, um die man sich Sorgen machen muss. Sie haben keine Farben, um die man sich Sorgen machen muss. Vielleicht sogar nicht Symbol, um zu sorgen, weil Sie in diesem Fall sehen können, haben wir nur Stern verwendet, um anzuzeigen, dass dies ist, wo das Symbol gehen wird. Sobald wir mit dem Design beginnen, haben wir diese Farbe für alle Bilder verwendet, die Sie nicht sehen können. Und Sie müssen das Ihrem Kunden erklären, wenn Sie dies tun , weil sie manchmal nicht verstehen und sie werden Sie fragen, vor allem Kunden, die sich vorher nicht mit Designern befasst haben, was das ist, während das Bild und Sie müssen ihnen erklären und sie durch die gesamte Struktur und den gesamten Entwurfsprozess führen. Okay, das ist nur der Ideationsteil. Das ist nur die Idee. Dies wird das Bild darstellen, dies wird Ihr Logo darstellen, dies wird das Symbol darstellen und so weiter und so weiter. Sobald sie also auf der Struktur festgelegt sind oder zumindest teilweise festgelegt sind, können Sie zum Entwurf selbst übergehen. Und hier haben wir das Design. Und wie Sie sehen können, haben wir viele verschiedene Bilder aufgenommen, viele verschiedene Farben Dieses Mal haben wir auch verschiedene Übergänge aufgenommen, die ich Ihnen in nur einer Sekunde zeigen werde. Wie Sie sehen können, ist die Fußzeile jetzt als Ganzes, weil wir tatsächlich wissen, die Gesamtstruktur unserer Seite, wo alles geht eine höhere Bewertung ist angelegt, so dass wir diese Fußzeile einschließen können. Und noch einmal, wegen der Verknüpfungseigenschaften, kann ich dies einfach als Komponente einbinden. Und du kannst sehen. Und das als untergeordnete Komponente. Und all dies sind untergeordnete Komponente dieser Master-Komponente. Und jede Änderung, die Sie direkt hier auf dem Foto vornehmen, zum Beispiel, ändert der Kunde ihre Meinung und sie wollen keine Karten, Debitkarten, zum Beispiel, vielleicht wollen Sie es nicht zu etwas anderes ändern, oder Sie müssen geht einfach hier zu einer Master-Komponente. Und noch einmal, wissen Sie, es ist eine massive Komponente wegen dieses Feldes in Diamant, während die Kindkomponenten sind, haben diesen leeren und Holdouts Diamant. Wenn sie also zum Beispiel diese Debitkarten ändern wollen , können Sie sie hier ändern und es wird automatisch in Echtzeit über alle Ihre Kunstboards aktualisiert . Aber Sie können auch hier sehen, ist, dass wir Animationen hier enthalten. Und wir haben auch verschiedene Bildschirme für das Dashboard-Design erstellt. Weil wir jetzt mit den Drahtmodellen nur eins hatten. Aber es ist nur um festzustellen, dass wir diesen akustischen Stil haben. Wir wissen, was das Dashboard enthalten wird. Und woher wissen wir das? Weil wir unseren Kunden viele dieser verschiedenen Fragen gestellt haben , die noch einmal in Design-Briefung nicht aufgeführt sind. Und wenn Sie anfangen, Ihre gehen, um mit Ihrem Client zu kommunizieren, entweder um echte slack durch E-Mail, Chats, WhatsApp, y-bar zu erstellen entweder um echte slack durch E-Mail, , ist es nicht wirklich wichtig, wo Sie diese Kommunikation zwei nehmen, wirklich wichtig, wo Sie diese Kommunikation zwei nehmen, gehen, um ihnen eine Menge verschiedener Fragen zu stellen. Und dann von dieser einseitigen Seite verurteilen Sie Zweig auf all diese verschiedenen Seiten, denn jetzt wissen Sie, was ist der Master und die erforderlichen Informationen? Was sind die wichtigsten Informationen, die sie auf dieser Seite behalten werden? Und dann kannst du von dort ausgehen, wie wir es in diesem Fall getan haben. So können Sie sehen, dass wir Dashboard-Konten, Transaktions-Songs haben, und wir haben alle diese Seiten, denn wieder, wir haben unseren Kunden gefragt, was sind die wichtigsten Dienstleistungen. Wir haben diese Dienste und einfachere Zweig von dort. Und noch einmal habe ich all das im Kurs erklärt , damit Sie es überprüfen können, um selbst zu sehen. Als nächstes, was wir nach dem Designprozess getan haben, ist beendet. Weil Sie sehen können, ist dies das weiße Design, weil es für die Desktop-Geräte wie diese großen Bildschirme und so weiter getan wird. Also gingen wir auf das responsive Website-Design. Und hier haben wir nur ein paar Beispiele für verschiedene Gitter. Und so sieht eine dieser Grundlagen aus. Das ist also nur die Homepage und ich habe im Kurs gezeigt, wie Sie von diesem breiten Layout bis hin zu diesem kleinen Layout gehen diesem breiten Layout bis hin zu und Ihr Layout an all diese verschiedenen Seiten anpassen können. Jetzt wollten wir nicht all diese anderen Seiten, denn dann würde der Kurs etwas wie, ich weiß nicht, 100 Stunden oder so etwas dauern . Also habe ich gerade die mündliche Struktur erklärt, wie alles funktioniert. Ich habe jeden einzelnen Schüler durch diesen gesamten Prozess geführt und erklärt, wie sich all diese verschiedenen Elemente an diese unterschiedlichen Breiten und Höhen anpassen. Und dann gingen wir zum Responsive-Website-Design für unseren Dashboard-Bildschirm. Jetzt haben wir auch das Gleiche gemacht wie hier. Also verwenden wir einfach den Dashboard-Home-Bildschirm und das Gleiche für diese Seite. Also Dashboard, der Home-Bildschirm und Website-Home-Bildschirm hier als auch. Und wir haben sie durch all diese verschiedenen Größen angepasst. Also im Grunde haben Sie fünf verschiedene Größen. Und Sie können wissen, wie viele Größen Ihr Kunde unterstützen wird , indem Sie ihn einfach fragen, ob der Kunde nicht weiß, ob er nicht versteht, dass er einfach fragen kann, es gibt Entwickler über all diese unterschiedliche Breite. Dies ist besonders wichtig im Webdesign, auch im App-Design. Denn stellen Sie sich vor, Sie erstellen zum Beispiel ein Design für das iPhone 12. Und der Kunde möchte iPhone acht unterstützen. Sie wollen auch auf das iPhone sieben gehen, aber diese älteren Telefone haben keine Kerbe an der Spitze. Daher müssen Sie Ihr Design an die Bedürfnisse des kleineren Bildschirms anpassen. Auch die Bildschirmdichte ist anders. Daher müssen Sie sich vorbereiten, indem Sie Ihren Kunden all diese Fragen stellen, weil es eine andere Sache ist. Wenn sie nur eine Seite in einer Größe haben und das ist es. Oder wenn sie so haben, wie wir es hier tun. Also lassen Sie es uns überprüfen. 246810121415, verschiedene Seiten, wie Sie sehen können, in fünf verschiedenen Größen. Und wir machen auch Wireframes wie diese. Und Wireframes auf einem Stück Papier und Website-Architektur, so viel mehr. Sie können sich also vorstellen, dass ein Projekt wie dieses ein oder zwei Monate dauern wird, je nachdem, wie aktiv der Kunde ist und wie oft er auf Ihr Feedback reagiert. Sie können sich also vorstellen, dass es viel Zeit in Anspruch nehmen wird, um ein Projekt wie dieses abzuschließen, anstatt nur eine einzige Seite zu machen. Aber das spielt keine Rolle. Der Prozess spricht für sich und er steht. Sie müssen all diese Dinge tun, wenn Sie verfolgen wollen, was Sie tun. Wenn Sie den Client in der Schleife halten möchten, wenn Sie sie in Ihren Notizen behalten möchten, damit Sie all diese Dinge tun können oder nicht. Aber dann noch einmal, sagte ich am Anfang, sie wollen mehr Seiten machen. Du hattest keine Struktur. Diese Seiten werden also anders aussehen als die Originalseite. Dann müssen Sie auch die Originalseite ändern. Und jetzt bist du wieder in dieser Schleife. So eine solide Struktur an Ort und Stelle, sobald von Anfang an. Also, sobald Sie anfangen zu gehen und beginnen zu entwerfen, wird Ihnen massiv später helfen und wird Ihren Kunden helfen, dieses Projekt zu skalieren und zu wachsen, wie sie ihr Geschäft wachsen. Also nach dem Responsive Design, wie Sie sehen können, haben wir Projekt Style Guide. Und Projektstil Guide enthält alles von Anrufern über Typografie und verschiedene Schriftgrößen und Schriftgewichte bis hin zu Ikonographie. Verschiedene Komponenten sind so viel mehr. Und Sie können hier sehen, wie viele Zeichenstile wir haben, wie viele Farben wir haben. Und schließlich, wie viele Komponenten wir haben. Sie können sehen, dass es viele von ihnen gibt. Und schließlich, nachdem das abgeschlossen ist, gehen wir dann auf die Projektpräsentation. Und ich erkläre einfach 3D, wie es im Raum funktioniert. Und Sie können hier sehen, wie diese drei Komponenten aussehen. Das ist also nur eine einzelne Komponente. Dies ist Komponenten Horace Zustand, aber wir verwalten es in 3D zu erstellen, um diese Art von Aussehen zu geben. Nachdem ich die Präsentation erklärt habe, gehen wir zu Q und a. und Sie werden all diese zusätzlichen Informationen erhalten, die Teil des Kurses sind, und das ist im Grunde der Kurs selbst. Eine wichtige Sache, die ich erwähnen möchte, sind diese Komponenten. Und ich möchte dir endlich zeigen, wie das alles aussieht. Daher sind Komponenten äußerst wichtig, da Sie sie skalieren können, während Sie sich bewegen. Lassen Sie mich Ihnen nur ein kurzes Beispiel zeigen. Wenn wir hier auf meine Website ansprechendes Design zoomen. Sie können sehen, dass dies Komponenten sind, denn wenn ich hier doppelklicke, haben wir den Hover-Zustand und wir haben den Standardzustand, und wir haben das Gleiche für alle von ihnen. Sie können sehen, wie unser Zustand und Standardzustand. Also, wenn wir von dort nach unten gehen, können Sie sehen, dass wir das Gleiche für hier haben. Also, wenn ich hier doppelklicke, können Sie sehen, dass wir Horror-Zustand haben und wir Standardzustand haben. Dies sind große Geräte. Also wieder, schweben Sie Status und Standardzustand. Aber weil es sich um mittlere Geräte und Tablets handelt, haben wir nur Horst, sorry, default state, weil das alles ist, was wir brauchen. Denn auf dem Tablet können Sie nicht schweben und dasselbe gilt für die Schäume. Sie können den Mauszeiger nicht auf den Bildschirm des Telefons bewegen. Also musst du über all diese Dinge nachdenken. Sobald Sie mit der Gestaltung beginnen, müssen Sie alle Ihre Seiten anpassen. Und Sie können deutlich sehen, dass sich diese Komponente gut anpasst. Sie können sehen, wie Text wirklich schön umhüllt. Hohe Bewertung erstreckt sich, um den notwendigen Platz zu füllen. Alles sieht in Ordnung und wie es sollte. Also im Grunde geht es hier um Komponenten. Und schließlich, lassen Sie mich Preview treffen. Also klicke ich auf diesen Fluss. Klicken Sie hier, um meine Vorschau zu starten. Und ich werde Ihnen zeigen, wie all das aussehen wird, wenn Sie sich für einen Kurs anmelden und Sie werden alle diese verschiedenen Animationen bekommen. Also hier haben wir einen einfachen Hover-Effekt. Und du wirst sehen, sobald ich beginne zu scrollen, wir haben diesen Glas-Morphismus-Effekt im Hintergrund und alles bleibt stehen und bleibt fixiert. Sobald wir anfangen zu scrollen. Dann haben wir diese Hover-Effekte mit diesen animierten Icons im Hintergrund. Das haben wir auch. Wir haben Hover-Effekt für all diese verschiedenen Schaltflächen. Sie können sehen, sobald Sie den Mauszeiger bewegen sich diese Pfeile. Und ich kann zur Kontoseite gehen, zum Beispiel, von wo immer ich bin. Und hier haben wir diese. Also haben wir hier Hover-Effekt und auch wir haben diese. Wenn Sie also auf einige von ihnen klicken, ändern sie sich je nach Service, den der Client zu diesem Zeitpunkt anbietet. Und tut mir leid, dass mein Computer in C dort ein wenig buggy wird. Also, sobald Sie beginnen, sich durch all diese zu bewegen, werden Sie alle diese Animationen erhalten. Schließlich haben wir so etwas wie Karten und wir einige tiefere Animationen hier mit dem Hover aufgenommen, Sie können sehen, dass das Herz etwas wie ein Herzschlag erweitert. Wir haben diese Animation auch mit dem Hintergrundschatten hier hinzugefügt. Dasselbe für diese, wir haben diesen, also dreht sich die Karte. Wir haben Hover-Effekte auf all diese verschiedenen Schaltflächen. Und sobald Sie alle diese verschiedenen Seiten durchlaufen haben, können Sie sich anmelden. Sie können auf Passwort vergessen klicken oder kein Konto haben. Sie können sehen, dass es animiert wird, sobald Sie sich anmelden, Sie gehen zum Dashboard und alle diese verschiedenen Seiten enthalten unterschiedliche Informationen. So können Sie durch all diese klicken. Zum Beispiel können Sie zu Ihrem Konto gehen, sagen wir, und Sie können hier zwischen ihnen wechseln. Und das ist, warum die Komponenten so wichtig sind, wie eine halten erklären, Sie können diese animieren, Sie können den höheren Effekt hier erhalten. Sie haben diese scrollbaren Gruppen, wie so. Und Sie können all das durchgehen. Und im Grunde ist das das Design und wie es gemacht wird. Aber Sie können zwischen ihnen wechseln. Sie können verschiedene Karten ändern, Sie können Geld einzahlen, um abzulegen und vieles mehr. Das ist also das Design aus dem Kurs. Sie können sich für einen Kurs anmelden. Und wenn Sie sich das auf YouTube ansehen, wird massiver Rabatt unten verlinkt werden. Stellen Sie also sicher, dass Sie es überprüfen und stellen Sie sicher, dass Sie diesen Gutscheincode eingeben, um diesen massiven Rabatt zu erhalten, da dieses Angebot begrenzt ist Stellen Sie also sicher, dass Sie es verwenden und das ist es im Grunde für dieses gesamte Projekt. Ich wollte Ihnen nur zeigen, wie Sie Ihre Designprojekte strukturieren, wie Sie sie erstellen können und sie dann in größerem Maßstab skalieren können. Egal wie viele Bildschirme Sie haben, egal wie viele Größen Sie haben. Sobald Sie die gute Grundlage haben, können Sie endlos skalieren. 23. Design erstellen: Wenn Sie mit der Erstellung von Design beginnen, wie ich im vorherigen Beispiel erläutert habe, können Sie viele dieser verschiedenen Dinge in Adobe XD tun. Also wollen nur schnell auf einige dieser verschiedenen Tipps und Tricks zu erarbeiten. Und du kannst immer meine Kurse ansehen. Sie können immer meinen YouTube-Kanal mit vielen dieser verschiedenen Tutorials überprüfen , wenn Sie in die Tiefe gehen wollen, dies ist nur ein Grundkurs und ich möchte es einfach schön und kurz halten , um Ihnen so viele Informationen wie möglich zur Verfügung zu stellen. Also, wenn wir gehen und einen Blick auf es aus dem vorherigen Beispiel hier haben wir dieses Website-Design. Ich will dir nur schnell zeigen, wie es geht. Also, was wir hier haben, ist diese Navigation. Und Sie können sehen, was ich über die Komponentenzustände erwähnt habe. Sie können so viele Komponentenstatus haben, wie Sie möchten. Sie können verschiedene Hover-Zustände einschließen. Du kannst mit ihnen machen, was du willst. Also in diesem Beispiel, wie Sie sehen können, haben wir Standard-Staatskonten, Kreditkarten, investieren digital. Also alle diese verschiedenen Menüpunkte und plus wir haben Komponente innerhalb der Komponente enthalten, die für diese Schaltfläche ist, die zwei Status hat. Also im Grunde kann dies extrem kompliziert werden oder es kann extrem einfach und einfach sein, wenn Sie gerade erst anfangen, stellen Sie sicher, dass die Dinge schön und einfach nicht zu verwirren sich. Aber sobald Sie etwas Belichtung bekommen, sobald Sie etwas Verständnis von all dem bekommen, stellen Sie sicher, zu versuchen und die verschiedenen Komponenten Tage, weil es wird Ihr Leben viel einfacher und viel einfacher als mit nur einem einzigen -Komponente verwenden, können Sie überall in Ihrem Design kopieren und einfügen. Jetzt können Sie sehen, dass es beim Scrollen behoben ist. Also, wenn ich hier klicken, um diese Vorschau zu öffnen, können Sie sehen, wenn ich beginne scrollen, dass dies behoben ist, weil es Adobe XD sagt, stellen Sie sicher, dass Sie bleiben, wo ich Sie setzen, wenn es beginnt krabbeln, stellt sicher, dass Sie da sein. Sie können sehen, dass wir hier keinen Hover-Effekt haben. Und das ist absichtlich, weil ich nicht wollte, während meine Schüler zu viel. Aber ich erklärte, dass Sie verschiedene Horroreffekte einbeziehen können. Aber in diesem Fall, ich glaube nicht, dass es so gut funktioniert, weil dieser Glas-Morphismus-Effekt , den wir im Hintergrund haben. Ich wollte diesen Hintergrundeffekt einschließen, nur um die Dinge schön und einfach zu halten und es ein wenig kühler aussehen zu lassen, denn das ist der ganze Sinn dieses Projekts. Wenn Sie im Kurs zum Design Kurzvideo gehen, werden Sie verstehen, warum, denn das ist die Zielgruppe, spezifische Zielgruppe für genau dieses Projekt. Daher wird ein weißer Hintergrund nicht nur tot zu tun. Aber wenn Sie einen einfarbigen Hintergrund wie weiß, grau, dunkelgrau, schwarz machen , je nachdem, was auch immer die Farbe ist, die Sie einschließen, dann können Sie für jeden einzelnen dieser Menüelemente einen höheren Effekt einschließen, wie wir hier für der Login-Button zum Beispiel. Dies ist also nur der Standardzustand. Dies ist ein Hover-Zustand und Sie können sehen, dass es funktioniert, egal wo Sie sich befinden. Aber mit diesem Glas-Morphismus-Effekt es wirklich nicht so gut aus, diesen Schwebeeffekt zu haben. So ist das also vollendet. Und als nächstes möchte ich Ihnen unsere scrollbaren Gruppen zeigen. Jetzt können Sie hier sehen, dass wir vier verschiedene Flaggen haben. Wir haben vier hier, aber wir haben drei hier, wir haben zwei hier. Und das ist mit scrollbaren Gruppen getan. Wenn ich Sie auf die Originalseite bringe, können Sie sehen, wie das aussieht. So haben wir 246 verschiedene Flaggen mit sechs verschiedenen Wechselkursen. Aber hier auf einer mobilen Version, zum Beispiel, wir müssen nur, so lassen Sie mich schnell nehmen Sie die, diese. So ist es 40 Tabletten und könnte es vergrößern klicken. Und lassen Sie uns runtergehen, wo sie sind. Hier sind sie. Also, was Benutzer tun können, ist einfach tippen. Und scrollen Sie zwischen all diesen und gehen Sie dann nach links und rechts. Also, was dies tut, ist, dass Sie Ihr Design für verschiedene Geräte in verschiedenen Gerätegrößen und verschiedenen Bildschirmgrößen vorbereiten . Und Sie tun dies, in diesem Fall mit etwas, das eine Schriftrolle genannt wird. Und wenn Sie direkt dort klicken, können Sie sehen, dass dieser horizontale Bildlauf enthalten ist. Sie können auch einen vertikalen Bildlauf einschließen. Und ich kann Ihnen sogar zeigen, dass in diesem Beispiel, das für unser Dashboard Responsive Design ist. Oder wir gehen hier rauf. Wenn ich hier rechts klicke und dann hier klicke, Vorschau, können Sie sehen, dass wir vertikale Bildlauf hier enthalten haben, was großartig ist, weil Sie diese Grenzpunkte einstellen können und Sie Ihr Design nicht ganz nach unten erweitern müssen. Sie können einfach den Raum nutzen, den Sie haben. Und dann können Sie einfach diese scrollbaren Gruppen an Ort und Stelle einschließen. So können Sie all diese unterschiedlichen und zusätzlichen Daten und Informationen anzeigen anstatt einfach Ihr Design zu erweitern damit die Benutzer durch Ihr Design als Ganzes scrollen. Und schließlich können Sie damit noch viel mehr tun. Wir haben keine Karte an diesem konkreten Beispiel. Aber was Sie auch tun können, ist diese Animationen. Also, wenn ich innen doppelklicke, können Sie sehen, dass wir Standardzustand haben. Wir haben Hover-Zustand. Es ist wirklich ganz einfach, aber es gibt auch einige Schlagschatten enthalten. Hier ist ein Kreis enthalten. Es ist also eine Menge los, aber es sieht ziemlich einfach aus und es sieht ziemlich schön aus. Und auch mit diesem Beispiel hier, zum Beispiel, haben wir die gleiche Karte wie unten, aber jetzt ist ihr Hover-Effekt viel größer. Und Sie können sehen, dass dieser Hintergrundschatten viel dunkler wird, wenn Sie im Horrorzustand sind. So können Sie all diese verschiedenen zusätzlichen Dinge mit Ihren Komponenten erledigen. Und schließlich, lassen Sie uns dieser Welt zum Beispiel geben. So wie Sie sehen können, dieser gesamte Abschnitt ist, Lassen Sie uns es auch im Ebenenfenster überprüfen. Also brauchen wir, ich brauche ein Darlehen ist, wie Sie sehen können, eine Komponente. Und Sie können zum Standardzustand gehen, der geschlossen ist, dann sind alle Symbole nicht so. Sie können zu diesem ersten Zustand gehen, er ist ausgewählt, andere sind es nicht. Und Sie können sehen, wenn Benutzer zwischen all diesen Datumsangaben klicken, sie ändern sich je nachdem, was sie angeklickt haben, oder sie können in den Standardzustand wechseln. Und all diese Informationen unten werden bis hier zusammenbrechen. Und wenn sie zum Beispiel hier klicken, wird es sich erweitern und den ganzen Weg nach unten gehen. Wie Sie sehen können, können Sie in Adobe ASD viele verschiedene Dinge in Bezug auf Design tun. Machen Sie es so einfach wie möglich oder Sie können es so komplex wie möglich machen , abhängig von Ihren Fähigkeiten und je nach Projekt. Einige Projekte erfordern wirklich keine komplexen Animationen und in komplexen Übergängen komplexe Designs, während andere dies erfordern. also sicher, wenn Sie anfangen zu lernen, wenn Sie anfangen zu wachsen, wenn Sie angefangen haben, etwas Belichtung und etwas Traktion in dieser UI-UX-Design-Rolle zu gewinnen. Vergewissern Sie sich, dass Sie sich darauf konzentrieren, Ihre Fähigkeiten so weit wie möglich zu erweitern. Stellen Sie sicher, dass Sie Verknüpfungen so viel wie möglich lernen , denn es ist extrem wichtig, später der Zeile so viele dieser Verknüpfungen wie möglich zu kennen , da sie Ihnen massiv helfen werden. 24. Prototyping deines Designs: Der nächste Teil von Adobe XD , den ich abdecken möchte, ist Prototyping. Es ist wirklich wichtig, denn in der Vergangenheit, zum Beispiel, wenn Sie Ihre Entwürfe in Photoshop erstellt haben, müssen Sie externe Ressourcen verwenden, etwa vorstellen, um Prototypen zu erstellen. Daher müssen Sie alle Ihre Photoshop-Dateien oder LinkedIn mit vorstellungen exportieren und dann Ihre Prototypen dort erstellen. Dann müssen Sie sich vorstellen, die mit Ihrem Kunden verknüpft ist. Der Kunde muss antworten. Dort haben Sie E-Mail-Benachrichtigung, die einfach zu kompliziert ist für die heutige schnell sich entwickelnde Welt. So hat Adobe XD diese großartigen Funktionen enthalten, die Prototyping ist. So können Sie erstellen, Prototypen erstellen und teilen oder mit Ihren Kunden oder Teamkollegen zusammenarbeiten , alle innerhalb einer App innerhalb, ohne dass Sie diese Apps ändern müssen, ohne dass Sie für externe Ressourcen bezahlen müssen, haben Sie alle innerhalb eine App und Sie können kostenlos loslegen. Also lassen Sie mich Ihnen in diesem Beispiel zeigen, dass wir hier Prototypen erstellt haben. Also habe ich dir ein Design gezeigt. Wenn Sie auf Prototyp klicken, können Sie sehen, dass sofort alle diese blauen Pins angezeigt wurden. Und das sind für diese Ströme. So können Sie sehen, dass wir bei diesem Fluss keine Verbindung mit diesem Fluss haben. Wir haben viele dieser verschiedenen Verbindungen mit diesem Fehler. Wir haben keine. Und mit diesem Fluss haben wir keine. Aber wenn ich hier klicke, können Sie sehen, dass wir es immer noch tun. Und auch wenn ich auf diese unsere Tafel klicke, können Sie sehen, dass wir immer noch tun und es ist immer noch mit einigen dieser Hauptbildschirme verbunden. Also, was all das bedeutet in der Übersetzung ins Englische im Grunde, ist, dass Sie alle Ihre Berichte miteinander verbinden können. Sie können sie mit einer einzigen Größe verbinden, wie ich Ihnen für die Website-Größe gezeigt habe. Aber Sie können sie auch mit der reaktionsfähigen Größe verbinden. Und Sie können Ihren Kunden direkt zeigen, wie all das aussehen wird. Also, wenn Sie mit dem Teilen beginnen und wir gehen, um die Freigabe in einem Experten zu erhalten, dann können Sie entweder einen Fluss teilen, nur zum Beispiel Website-Design für Desktops ist , oder Sie können einfach alle Flows teilen, das ist alle Website-Designs in allen Größen. Also, wenn ich Ihnen zeige, wie diese Prototypen aussehen, lassen Sie mich zum Website-Design gehen. Hier können Sie sehen, wie viele Interaktionen wir haben. Also, wenn wir in wirklich schön und nah zoomen und klicken Sie auf diesen rpart und Sie können es Homepage-Design sehen. Dies ist bilanziert Designer Kredite Design und so weiter und so weiter. Jeder einzelne von ihnen. Und wieder einmal können Sie in den Kurs gehen, Sie können einen Blick darauf werfen und weil es über 20 Stunden lang ist. Und noch einmal, dies ist nur Grundkurs, um alle Grundlagen von Adobe D. erklären Wenn Sie sich in den Kurs einschreiben, werden wir durch alle diese verschiedenen Seiten gehen und ich werde den Geschlechtsverkehr erklären. Jede einzelne dieser Interaktionen, Weiße, die so verbunden sind. Weiß ist so fertig. Und was Sie besser für Ihre persönlichen Projekte hätten tun sollen. Also, was Sie hier mit diesen blauen Linien sehen, ist im Grunde, Sie können von einem Teil Ihrer langweilig klicken, ziehen Sie diese blaue Linie zu einem anderen. Sobald Sie sich in einem Prototyping-Modus befinden. Dann hier im Interaktionspanel, das auftaucht und ich habe Ihnen bereits erklärt, dass dieses Panel auf der rechten Seite ständig ändert, was Sie auswählen. Im Entwurfsmodus sieht es also anders aus. In einem Prototyp-Modus sieht es anders aus. Und im Share-Modus wird wieder verschiedene aussehen. Und das werde ich als Nächstes zeigen. Was wir hier haben, ist Interaktion. Also zuerst haben wir Auslöser. Also, was die Benutzer in unserem Fall tun, müssen sie tippen, um zu dieser Seite zu gehen. Aber Sie können auch Drag, Hover, Keys und Gamepad und Stimme Boden wählen . Es kann schnell auf einige von ihnen ausarbeiten, weil sie extrem komplexe Aura Zeit bekommen können. Also noch einmal, Registerkarte, können Sie es für Desktops verwenden oder Sie können sie für mobile verwenden. Also tippen kann im Grunde bedeutet das Tippen einer Maus oder das Tippen mit dem Finger. Egal, welches Gerät Sie verwenden, Sie können die Registerkarte verwenden. Drag ist im Grunde der, den ich dir im vorherigen Video mit diesen Flaggen gezeigt habe , zum Beispiel. Wenn sie sich also auf einem mobilen Gerät befinden, können sie klicken, um nach links oder rechts zu ziehen, oder sie können das sogar auf Website-Design tun, wenn Sie irgendwo schneiden müssen , damit sie von links nach rechts ziehen können. Zum Beispiel ist Hover das, was wir mehrmals erklärt haben. So können Sie zum Beispiel mit diesen Schaltflächen verschiedene Hover-Effekte einbeziehen. Keys, End-Game-Betten ist im Grunde, wenn Sie einige erfahrene für ein Spiel erstellen, können Sie etwas wie PlayStation Controller oder Xbox-Controller. Und dann können Sie programmieren, was jeder einzelne Schlüssel tut. Und dann, wenn Sie beginnen, ihren Prototyp mit Ihrem Client zu teilen, wenn sie den gleichen Controller haben, können sie im Grunde irgendwie dieses Spiel mit Ihnen in Adobe XD spielen, was extrem cool ist. Und schließlich haben wir die Stimme. So können Sie etwas wie Google Assistant, Amazon, Alexa oder Siri tun. Sie können alle diese verschiedenen Controller integrieren, wenn Sie für Sprache entwerfen. Als Nächstes haben wir Action. Was passiert also, wenn ein Benutzer tippt, welche Aktion ausgeführt wird? Re kann Übergang gehen. Wir können automatisch animieren, durch vorherige integrierte Audiowiedergabe oder Sprachwiedergabe scrollen. Übergang ist im Grunde, es, Übergänge von einer Seite zur anderen. Auto Animate ist diese magische Zukunft von Adobe XD, die mithilfe von KI lernen, was Sie tun müssen. Und Sie können meine Kurse oder meine YouTube-Videos ansehen, weil ich automatisch animieren die ganze Zeit verwende. Ich liebe es wirklich. Und im Grunde weiß es, was Sie zwischen zwei Zuständen und Feinden einwandfrei tun müssen , so dass Sie nicht so etwas wie Keyframes in Adobe After Effects erstellen müssen , oder so etwas. Wir haben bereits, was großartig ist, wenn Sie für mobile entwerfen. So haben Sie dieses Menü zum Beispiel auf der Seite, und Sie müssen auf das Menü-Symbol tippen und dann erscheint dieses Menü-Overlay. Also Schulden, warum das nützlich ist, aber Sie können es auch für Menüpunkte in Website-Design verwenden , wenn Sie diese mündlich Funktion an Ort und Stelle benötigen, haben wir auch scrollen, so dass Sie Ankerlinks erstellen können. Wenn dies beispielsweise nur eine einzelne Seite ist und all dies unterschiedliche Abschnitte sind, können Benutzer durch all diese verschiedenen Designs blättern. Und dann, zum Beispiel, wenn sie auf diese Seite klicken, wird zu scrollen, um zu hören. Wenn sie auf diesen Menüpunkt klicken, wird es hier blättern. Und so viel mehr. Bisherige Kunst Boards spricht für sich. Audio-Wiedergabe ist, Wenn Sie benötigen, zum Beispiel, um einen schmalen Zustand zu erstellen. Wenn sie dort tippen, wird es zu spielen, dass Audio- und Sprachwiedergabe großartig ist. Wieder einmal, für Stimme, wenn Sie für diese Unterstützung entwerfen, erhaltene Scroll-Position im Grunde tut, was es auf den zehn sagt. Wenn Sie dort klicken, und zum Beispiel geht es hier, wird die Bildlaufposition beibehalten. In diesem Fall wird es oben sein. Aber wenn Sie es tun, dass hier, zum Beispiel, wird es an der gleichen Position sein, wenn die Kohle Ziel wagen. So können Sie wählen, welche Ports Sie Animation wünschen, Sie haben eine Reihe dieser verschiedenen Animationen an Ort und Stelle. Und schließlich haben wir Lockerung gesehen, wie Animation aussehen wird. Wird es in hart gehen, wird nicht in den Krieg gehen in weichen ist Sie gehen hart oder weich wird springen. Wird es in Position schnappen? So können Sie zwischen all diesen wählen. Und wenn Sie hier klicken, können Sie gehen von non ist aus einfach ein einfach jetzt zu schnappen, Windup und Bounce. Sie haben alle diese verschiedenen Optionen. Und schließlich haben wir Dauer. So Dauer, wie lange diese Aktion dauern wird? In unserem Fall, wenn sie tippen, wird es zum Account-Design mit der Löse-Animation mit einfacher Notenerleichterung übergehen . Und es wird für 0,4 Sekunden dauern. Jetzt können Sie hier zusätzliche Aktionen hinzufügen, so zusätzliche Animation, aber ich werde Sie in diesem Stadium nicht stören. Also im Grunde, wie all das aussieht an Ort und Stelle. Ich werde hier klicken, ich werde auf die Vorschau klicken. Ich werde auf die Konten klicken. Und es wird zu dieser bestimmten Seite übergehen. Sobald sie auf Logo klicken, zum Beispiel, wird sie auf die Homepage zu bringen. Und Sie können sehen, sobald sie auf Konten klicken, wird dies auftauchen. Aber sobald Sie auf Darlehen klicken, wird dort Übergang und schmal in der Größe. So können Sie all diese Dinge und vieles, viel mehr in Adobe XD mit diesen Prototyping-Funktionen , ohne dass Sie auf externe Tools wie zum Beispiel in der Vergangenheit gehen müssen . Oder Sie müssen keine zusätzlichen Leistungen bezahlen. Sie haben all das in Adobe XD enthalten, um sofort loszulegen. 25. Teilen deines Designs: Ein weiteres erstaunliches Tool, das Adobe XD hat, ist die Freigabe. Wie gesagt, können Sie Prototypen entwerfen und alle in einer App teilen, und es befindet sich genau hier an der Spitze. Also, sobald Sie fertig entwerfen, Sobald Sie Prototyping getan haben und alle Ihre Kunst-Boards in verschiedenen Zuständen verbinden, alle über verschiedene Bildschirme. Dann ist es an der Zeit, mit Ihren Kunden zu teilen. Und es ist wichtig zu beachten, dass Sie an jedem Punkt Ihres Entwurfsprozesses teilen können. So zum Beispiel, wenn Sie in Wireframing-Phase sind, können Sie teilen von wagen, Feedback zu erhalten und dann gehen Sie zu diesem Feedback und erstellen Design aktualisiert werden, dass Prototyp, aktualisieren Sie diesen Link und teilen Sie es wieder mit dem Client, Sie können Ihnen dann Feedback zum Website-Design oder Responsive Design geben und sogar bei Styleguides und Projektpräsentationen viel mehr sehen. So können sie Ihnen zu jedem Zeitpunkt der Projektphase das Feedback geben. Also, wie kannst du es wirklich teilen? Nun, wie ich am Anfang sagte, verwende ich eine kostenlose Version, nur um zu veranschaulichen , dass Sie dies tun können, egal wo Sie in einer Welt sind, Sie können kostenlos damit beginnen. Also im Grunde mit der kostenlosen Version, haben Sie nur eine Link-Sharing-Option. Wenn Sie also an mehreren Projekten gleichzeitig arbeiten, müssen Sie für Adobe XD bezahlen. Aber auf ihrer Website steht es nur neun Dollar im Monat. Oder wenn Sie Adobe Premium-Paket haben, Creative Cloud bezahlt haben und dann Adobe XD auch in diesem Creative Cloud-Abonnement enthalten ist. Wenn Sie also teilen möchten, können Sie einfach auswählen, was Sie teilen möchten. In unserem Fall möchten wir dieses Website-Design teilen. Sie können es auch Umleitung und Dashboard-Design teilen, aber ich möchte das teilen. Und Sie können verschiedene Einstellungen wählen. Für eine Designüberprüfung und Feedback zu Ihrem Design oder Prototyp erhalten, kann dieses Feedback entweder von den Teamkollegen, Ihren Kunden Stakeholdern, sogar Entwicklern, bereitgestellt werden . Sie können Ihr Design oder Ihren Prototyp mit Entwicklern teilen. Und was dies tut, ist, dass es Codeausschnitte für Ihre Entwickler bereitstellt. So können sie leicht sehen, zum Beispiel, innerhalb des CSS, welche Aufrufe Sie verwendet haben, Abstände stark beanspruchen, die stark nutzbar sind. So zum Beispiel mit Typografie, welche Größen Sie verwendet haben, damit sie sofort mit der Integration beginnen können. Und wenn Sie webbasierte Schriftarten verwenden, zum Beispiel diese Google-Schriftarten, die wir in diesem Kurs verwenden. Dann können sie einfach den Link zu diesen Schriftarten integrieren und dann sofort mit dem Code beginnen. Dann haben wir die Präsentation optimiert, um Ihre Entwürfe zu präsentieren, was großartig ist. Wenn Sie zum Beispiel ins Büro Ihres Kunden gehen und dies auf einem großen Bildschirm präsentieren möchten, und dann geht es ohne Ablenkung in den Vollbildmodus. Und Sie können Seele von Art wie eine PowerPoint-Präsentation zum Beispiel präsentieren. Dann haben wir Anwendertests durchgeführt, was ideal ist, um Ihren Prototyp zu testen. Sie können in diesem Benutzer-Testmodus ausblenden, zum Beispiel können Sie alle diese verschiedenen Elemente wie Navigation ausblenden. So erlauben Sie Ihren Benutzern nicht zu sehen, wo sie klicken müssen. Das müssen sie selbst herausfinden. So können sie dir dann das Feedback geben und du kannst wissen, wo du weitermachen musst. Und schließlich haben Sie benutzerdefinierte und Sie können benutzerdefinierte Erfahrung aus all diesen kombinierten Link-Zugriff erstellen. Also hat jeder mit dem Link nur Leute eingeladen. Sie können sie per E-Mail einladen und jeder, der das Passwort hat, kann Ihre Links mit Passwort schützen. Schließlich müssen Sie nur auf Link erstellen klicken. Und bevor ich das mache, kannst du das einfach umbenennen. Lassen Sie uns mit der neuen Bank Website Redesign gehen, um ein wenig passen. Was wir hier haben, klicken Sie auf Link erstellen. Und abhängig von Ihrer Internetgeschwindigkeit, je nachdem, wie groß Ihr Prototyp ist, je nachdem, wie viele Dinge Adobe XD in die Cloud hochladen muss. Dies kann länger oder kürzer dauern. Also, was auch immer Sie erstellen, stellen Sie sicher, dass Sie das im Hinterkopf behalten. Wenn Sie in einem engen Zeitplan sind, wenn Sie ein knappes Budget haben, stellen Sie sicher, dass dies in das Projekt. Denn manchmal kann es viel Zeit dauern, bis es hochgeladen wird, und dann kann es manchmal viel Zeit dauern , bis Ihre Kunden sie öffnen, wenn sie auch eine langsame Internetverbindung haben. Sobald die Freigabe abgeschlossen ist, erhalten Sie einen Link wie diesen. Und was Sie tun können, ist, diesen Link zu kopieren. Sie können diesen Link in eine Behance-Präsentation einbetten, zum Beispiel, Sie können ihn auf Ihrer eigenen Website ablegen und wieder, Sie können hier auf die Berechtigungen zugreifen. Und jeder, der den Link hat, kann das ändern. Sie können ihnen Zugriff geben oder nicht. Und im Grunde, wenn Sie kopieren und fügen Sie diesen Link in Ihrem Browser oder senden Sie ihn an den Client. Auf diese Weise wird die Gesamterfahrung je nachdem, was Sie hier in Adobe XD ausgewählt haben, aussehen . Also ist es für Design Review, ist für Prototyping, ist es für Entwickler? Und so viel mehr. Also noch einmal, was sie hier tun können, ist, dass sie scrollen können, als wäre es eine echte Seite. Sie können auf einen dieser Links klicken. Sie können sehen, wie Hover-Effekte immer noch funktionieren. Sie können einen Kommentar machen, sie können zum Beispiel einen Stift hier ziehen . Und sie können sagen, zum Beispiel, löscht diesen Kreis. Und sobald sie einreichen, können Sie sehen, dass dieser Kreis löschen ist auf dieser Seite. So Homepage-Design, und Sie können Ihren Weg zu Homepage-Design navigieren. Sie können auch direkt hier klicken, und es wird Ihnen alle Ihre verschiedenen Seiten aus diesem Fluss, den Sie freigegeben haben, anzeigen. Denn wieder einmal teilten wir diesen Fluss nur innerhalb einer Aktie, eines dieser anderen Flüsse. Deswegen zeigt es nur das. Und im Grunde können Sie zu Ihrer Arbeit gehen und weitermachen, wo Sie aufgehört haben, und Sie können dort klicken, um wieder auf den Prototyp zuzugreifen. Also im Grunde funktioniert das alles. Und was Sie auch tun können, ist zwischen diesen verschiedenen Seiten zu navigieren , um Ihren Kunden zu zeigen, wie die Seiten aussehen werden. Was Sie tun können, ist Ein- oder Ausblenden von Kommentaren. Sie können auf die Homepage gehen, die diese Seite in diesem Fall ist, wie gesagt, sie können durch verschiedene Seiten klicken. Also gehen wir zum Beispiel in die Lunge. Sie können dorthin gehen und Sie können sehen, dass es einen Kommentar zum Homepage-Design gibt. Sie können dort klicken und darauf zugreifen, und Sie können sehen, dass es mit Nummer eins beschriftet ist. Wenn wir einen weiteren Kommentar machen, wird es Nummer zwei beschriftet. Und so viel mehr. Was sie auch tun können, ist hier zurück zu gehen. Sie können jeden anderen Benutzer oder Teamkollegen erwähnen. Sie können Leute zum Hören einladen. Sie können dies auf Vollbildmodus erweitern. Sie können Kommentare und vieles mehr verbergen. Grundsätzlich, wenn Sie mit der Entwicklerfreigabe beginnen, werden Sie, wie gesagt, einige Code-Snippets erhalten. Sie werden etwas CSS bekommen, Sie werden einige Komponentenzustände erhalten. Sie werden all diese zusätzlichen Informationen erhalten , die für Ihren Kunden nicht relevant sind. Und außer wenn sie sich nicht zitieren oder wenn sie Code nicht verstehen. Also wollen sie nur schnell ein paar Dinge hier und da überprüfen. Aber im Grunde können Sie das mit den Entwicklern teilen. Was die Benutzer-Tests betrifft, können Sie dies grundsätzlich in einem Vollbildmodus ohne all dies testen. Denn wie Sie sehen können, wenn ich irgendwo außerhalb klicke, zeigt es, wo sie klicken können. Wenn sie also hier klicken, wird es sie auf diese digitale Seite bringen. Aber in der Benutzertestmethode wird es ihnen nicht zeigen, ihre Benutzer müssen das für sich selbst herausfinden und Sie müssen sich durch Tests entscheiden , ob es für sie einfach ist, auf alle diese Seiten zuzugreifen oder nicht, und was Sie es ändern sollten, was Sie behalten sollten. Schließlich ist der letzte und entscheidende Teil dieses Entwurfsprozesses die Freigabe Ihrer Dateien, nachdem sie abgeschlossen sind. Nachdem das Design abgeschlossen ist, Prototyping, nachdem alles fertig ist, müssen Sie diese Dateien mit Ihren Kunden und Entwicklern teilen und das ist es, was als nächstes kommt. 26. Exportieren deiner Dateien: Schließlich ist das letzte Stück der Hektik des Designprojekts , Ihr Design mit Kunden und Entwicklern zu teilen. Sobald alles abgeschlossen ist, müssen Sie es exportieren und Sie müssen es so verpacken, dass es sowohl für Ihre Kunden als auch für Ihre Entwickler leicht verständlich ist. Also in unserem Fall, was wir hier haben, ist, dass wir einen großen Desktop haben, wir haben Responsive Design. Stellen Sie sich also vor, dass wir dies für alle anderen Seiten erstellt haben. Jetzt kommt die Zeit zu exportieren und mit unseren Kunden und Entwicklern zu teilen. Also, bevor wir das tun, empfehle ich immer den Menschen und meinen Schülern, eine Art Ordnerstruktur, Organisationsmuster zu erstellen , um dies mit Ihren Kunden und Entwicklern teilen zu können , damit sie es leicht als sobald sie es bekommen, damit sie anfangen können zu arbeiten und nicht mit einigen Fragen und zusätzlichem Feedback gesunken sind. Was ich also gerne mache, ist, dass ich gerne eine Ordnerstruktur erstelle. Innerhalb dieser Ordnerstruktur habe ich gerne meine Hauptdatei, die Adobe XD-Datei ist. Ich mag auch einen Ordner wie diesen zu erstellen, der als Assets bezeichnet wird. Sind alle Vermögenswerte oder was auch immer Sie wollen. Und Sie können Symbole einschließen, Sie können Bilder einschließen, Sie können eine PDF-Dateien einschließen, und Sie können das auch tun, indem Sie sie einfach innerhalb eines Ordners platzieren. So Bilder, zum Beispiel. Und lassen Sie uns kopieren und einfügen, und nennen wir dies zum Beispiel Symbole. Und innerhalb der Dosis, zum Beispiel, wenn Sie sowohl SVG- als auch PNG-Symbole verwenden, können Sie sie einschließen. Wenn Sie PNG- und JPEG-Bilder verwenden, können Sie sie einschließen. Wenn Sie beispielsweise verschiedene PDFs verwenden , können Sie diese dann trennen. Egal, wie groß Ihr Projekt wird und wie groß die Menge der Dateien wird. Sie können sie einfach in Ordner aufteilen und wird viel einfacher für Ihre Kunden und Entwickler zu dieser Ordnerstruktur navigieren, als nur, um ihnen alles in einer ZIP-Dateien zu senden. Also müssen sie es für sich selbst herausfinden. Wie für die Größen selbst, können Sie sehen, dass wir alle diese verschiedenen Seiten direkt hier befinden. Und für jeden dieser Ordner habe ich noch einmal eine Ordnerstruktur erstellt. So große Desktops, Desktops, große Geräte, mittlere Geräte und kleine Geräte. Dies ist nur mein Fall und der Fall für dieses spezielle Projekt. Also, wenn ich Sie zurück zur Adobe XD-Datei bringe, können Sie sehen, wie das aussieht, aber Ihr Projekt könnte anders aussehen. Fragen Sie einfach Ihre Entwickler, welche Gerätetypen und welche Größen sie unterstützen werden. Daher werden Sie in der Lage sein, besser zu verstehen, wie Sie Ihre Ordnerstruktur strukturieren können , wenn Sie beginnen, diese Dateien mit Ihren Clients und Entwicklern zu teilen , sah wieder, mit der Ordnerstruktur, je nachdem, welche Größen Sie erstellen werden, werden Sie eine größere Anzahl oder kleinere Anzahl dieser Ordner in der gleichen Sache für die Säuren haben . Also vielleicht verwenden Sie nur ein Symbol, vielleicht zehn, Sie können sie hier setzen. Oder wenn Sie eine große Anzahl von Symbolen verwenden, wie wir es hier tun. Wenn ich Sie also zu meinen Dokument-Assets bringe und nach unten scrolle, können Sie sehen, wie viele verschiedene Symbole wir verwenden. Daher müssen wir all diese verschiedenen Säuren und in Asset-Größen exportieren. Stellen Sie also sicher, dass Sie Ihre Entwickler im Voraus fragen, müssen sie diese Symbole in verschiedenen Größen haben? Oder es kann ihnen einfach ein SVG-Symbol zum Beispiel senden. Und dann können sie in all diesen Größen passen. Sprechen Sie also wirklich einfach mit Ihren Entwicklern, sprechen Sie mit Ihren Kunden darüber, was sie brauchen. Bevor Sie beginnen, sie zu senden. Daher werden Sie Ihre Arbeitsbelastung stark reduzieren. Also, wenn es an der Zeit kommt, diese verschiedenen Dinge tatsächlich zu exportieren. Was wir hier haben, sind zum Beispiel große Desktops und ich möchte dieses Bild exportieren. Ich weiß, es ist ein PNG-Bild. Also, was ich tun kann, ist einfach ausgewählt, ich kann Control oder Command E drücken oder Tastatur und ich kann es als PNG exportieren , weil es keine Hintergrundelemente hat. Genau hier ist nur ein PNG-Bild. Wenn es nur ein flaches Bild wie dieses war, dieses, und dies zum Beispiel, dann werde ich dies als JPEG wählen. Wenn Sie mit Symbolen zu tun haben, ist es immer empfehlenswert, wenn sie SVG sind, sie als SVG zu exportieren, sie sind PNG, um es als PNG zu exportieren. Aber ein kurzer Tipp, stellen Sie sicher, SVG-Symbole so weit wie möglich zu verwenden, da sie unendlich skalierbar sind und sie nicht an Qualität verlieren, sobald sie in der Größe reduziert sind. Was wir endlich hier haben, ist PDF. Und was ich Ihnen für das PDF zeigen kann. Beispiel: Sie möchten diesen Projektstilguide exportieren. Was Sie tun können, ist einfach Control E drücken, PDF von hier aus wählen, und dann können Sie es einfach als PDF exportieren. Oder PDF kann mehrere PDF-Dateien oder Seiten haben. So sind Ihre Kunden Entwickler, können einfach durch all diese verschiedenen Seiten scrollen, um zu sehen, wo sie sind. Aber lasst uns schnell wieder hierher gehen. So werde ich noch einmal, Sie können, sobald Sie Ihren Artikel auswählen, Sie können Control E drücken. Wie gesagt, dies ist ein PNG Sie für Design wählen wird bei 1X exportieren. Wenn Sie dies für Web entwerfen, was wir getan haben, kann es das als ein x und 2x exportieren. Aber noch einmal, stellen Sie sicher, dass Sie mit Ihren Entwicklern auf die Notwendigkeit, dass zusätzliche Größe zu sprechen , weil wir Responsive Design an Ort und Stelle haben , stellen Sie sicher, dass sie fragen, was sie exportiert werden müssen? Denn das wird Ihnen viel Zeit sparen, denn in einigen Fällen müssen Sie das Bild nur einmal exportieren und dann werden sie es durch Code anpassen. Aber manchmal müssen Sie dieses Bild oder dieses Symbol exportieren, vielleicht Illustration, all diese verschiedenen Größen, weil sie es nicht wirklich gut im Code anpassen können und Sie das im Design tun müssen. Also wieder einmal, Kommunikation ist hier der Schlüssel, und es ist entscheidend für Sie, Ihre Kunden und Entwickler, sich an diesem Projekt zu amüsieren. Also, was wir hier haben, ist iOS, so können Sie wählen 123 x eins x ist die ursprüngliche Größe. Zwei Achsen verdoppeln die Größe, und dies wird die Größe verdreifacht. Und schließlich, wo Sie das exportieren möchten. Wenn wir Sie zum Beispiel hierher bringen, haben wir die Homepage und wir haben eine große Desktops. Das wird also unser Navigationsmuster sein. Egal, was du hier wählst, es wird dich dorthin bringen. Schließlich haben wir Android N wird mit all diesen verschiedenen Größen exportieren. Und es gibt nur Android und wie es organisiert ist. Für SVG ist, können Sie alle diese verschiedenen Attribute haben und Sie können wählen, Wollen wir interne CSS verwenden oder sie können externe optimieren minified verwenden , so wird die Dateigröße noch mehr PDF reduzieren, wie erklärt. Und schließlich, was wir hier haben, ist JPEG. Also ist es Design oder ist es Web? Wieder einmal, wenn Sie Web wählen, wird es, dass 1X und 2X exportieren. Und schließlich möchten Sie hier auch Ihre Dateien exportieren. Das ist es im Grunde für den Export, wie Sie sehen können, kann es ziemlich einfach sein. Was du tun kannst. Und lassen Sie mich schnell zeigen, dass auch, können Sie mehrere davon auswählen. So haben wir zum Beispiel diese Flaggen. Ich kann zu meiner Ebenenpalette gehen und sehen, wo sie sind. Also, was Sie tun können, ist einfach alle diese öffnen. Du kannst deinen alten Kim oder deine Option auf dem Mac halten. Sie können nach unten scrollen und alle auswählen. Und sobald Sie Control E getroffen haben, weiß ich, dass das PNG sein wird. Ich kann sie für Design verwenden, weil ich sie nicht brauche, um ein x 2x und 3x zu sein. Und ich kann einfach auf Export drücken, sobald ich meinen bestimmten Ordner ausgewählt habe , wo ich sie exportieren möchte, drücken Sie einfach Export und es wird in all diesen verschiedenen Größen exportieren, in diesen verschiedenen Dateiformaten, die Sie haben ausgewählt. Und jeder einzelne von ihnen wird wie dein Name sie hier genannt werden. Also nochmals ist die Benennung Ihrer Ebenen entscheidend hier, denn wie Sie sehen können, wird es Sie früher oder später einholen. Also hier senden Sie diese Dateien an Entwickler. Sie müssen Ihre Dateien benennen, damit Entwickler verstehen können, was diese Dateien sind. So können sie sie tatsächlich im Code verwenden. Egal, ob Sie ein Website-Design Dashboard Design App-Design erstellen, spielt keine Rolle. Sie müssen Ihre Layer immer benennen. Warum also nicht früher als später anfangen und aufhören, Ihre Zeit hier zu verschwenden nachdem Sie mit dem Projekt fertig sind und Sie wollen, dass dies Orbit ist. Also, das ist es im Grunde. So exportieren Sie Dateien in Adobe XD. Und das sind die verschiedenen Formate, die von der nativen Adobe XD-Exportoption unterstützt werden. 27. Ein Designsystem erstellen: Design-Systeme sind eine gute Möglichkeit, große Projekte zu organisieren, denn sobald Sie anfangen, Ihr Projekt zu skalieren, sobald Sie beginnen, neue Seiten hinzuzufügen, neue responsive Größen, vielleicht sogar eine mobile App, alles muss zusammenhängend aussehen, alles hat kohärent ausgesehen, und alles muss aussehen, wie es zu dem gleichen Projekt gehört, die es glauben oder nicht, es kann extrem schwierig sein, wenn Sie mit der Skalierung beginnen. Das ist, während kleine und größere Unternehmen, vor allem große Unternehmen, all diese Konstruktionssysteme vorhanden haben. Also, was ist ein Design-System für Design anpassen, oder ist es so viel mehr? Schauen wir es uns an. Also hier habe ich Carbon-Design-System geöffnet und Sie können tatsächlich voran gehen und diese von ihrer Website herunterladen. Was Carbon-Design-System ist, ist es für das Open-Source-Design-System der IBM für ihre Produkte und digitale Erlebnisse. So können Sie sehen, dass es nicht nur für Produkte sein kann. Es kann auch für ein digitales Erlebnis sein. Es kann für analoge Erlebnisse sein. So kann das Designsystem all diese zusätzlichen Gruppen und Funktionen umfassen. Also, was wir hier haben, können Sie alles über Kohlenstoff lesen, aber wenn es um Design geht, haben Sie Design-Kinder, Sie haben andere Ressourcen, Tutorials. Wenn es um die Entwicklung geht, können Sie loslegen. Framework hat so viel mehr. Was hier interessant ist, ist und Richtlinien. Also, wenn ich hier klicken, können Sie sehen, dass sie sie besprochen haben grüßen für sich selbst erstellt. Sie haben Regeln für die Barrierefreiheit. Sie haben Inhaltsrollen, Farbregeln, Symbolregeln, Piktogramme, Bewegungsabstände, Teams, Topographie und sahen viel mehr. So können Sie all diese verschiedenen Dinge tun. Bereitstellung von Schulden, können Sie dieses Projekt erstellen. Also weiß ich nicht, warum es so lange dauert, um zu öffnen. Öffnen wir es also in dieser Registerkarte, während es geladen wird. Lassen Sie mich Ihnen das schnell zeigen. So ist dies, wie diese Design-System. So können Sie sehen, ob ich beginne zu scrollen, dass all diese Erlebnisse genau gleich aussehen, egal auf welchen Geräten Sie sind, ob Sie sich auf diesem großen Gerät wie iMac befinden oder auf einem Laptop, Handy, Uhr, es spielt keine Rolle. Es sieht genau gleich aus. Was aber noch wichtiger ist, denn Audi ist ein Automobilunternehmen, es sieht auch im Auto genau so aus. So haben Nutzer genau die gleiche Erfahrung egal ob sie die Audi App nutzen, zum Beispiel, ob sie ihre Website besucht haben oder wenn sie im eigentlichen Audi Produkt sitzen, das ist das Auto, nutzen sie das Infotainment System, zum Beispiel. Dann mit Hilfe der Navigation sieht alles genau gleich aus, inkohärent und wie es zu dieser ganzen Erfahrung gehört. Also, wenn ich dich hierher bringe, richtig? Wir haben responsive UI, wir haben fremde Tool-Komponenten. Wenn ich also hier klicke, haben wir Buttons, zum Beispiel. Und Sie können sehen, wie ihre Knöpfe aussehen. Also haben sie klein, mittel, groß. Sie können sehen, wie das aussieht, als hätten wir sekundäre, Sie können darauf klicken. Sie haben alle diese verschiedenen Animationen. So können Sie sehen, wie das aussieht. Textschaltfläche mit diesem Pfeil, können Sie sehen, dass dieser Hover-Effekt funktioniert. Sie sehen alle diese verschiedenen Symbole, solide C oder Karte. Karte kann wirklich etwas sein, im Grunde ist dieser Krieg so etwas. So können Sie diesen Pop-up-Effekt beim Hover sehen. Sie können diese größeren Karten sehen, so Aktion, Sie können auf sie klicken. Sie können sehen, wie sie aussehen. Sie können gehen, um Drag & Drop, was auch wichtig ist, zum Beispiel für ihre Benutzeroberfläche in einem Auto, vielleicht möchten Sie unseren Song direkt dort ziehen und ablegen. Sie können sehen, wie das wie Eingabefeld aussieht, was auch wichtig ist. Wenn Sie rechts dort klicken, können Sie sehen, dass dieser Text oben geht. Suchen Sie, wie es aussieht wie mehrere Texteingaben und vieles mehr. Wenn wir zum Beispiel zum Spieler gehen, können Sie sehen, wie sein Spieler aussieht, wie das aussieht. Icons rückwärts und so vieles mehr. Wenn wir auf die responsive Benutzeroberfläche gehen, können Sie sehen, es gibt Gitter eingerichtet und das ist, warum dies wichtig ist. Sie können diese Raster so einstellen, dass das gesamte Projekt verfolgt wird. Denn zum Beispiel, wenn Sie dieses Projekt erstellen, sagen wir im Jahr 2021. Und dann entscheidet der Kunde in fünf Jahren, um wieder zu Ihnen zu gehen und dann können Sie fortfahren und fügen Sie alle diese zusätzlichen Seiten, zusätzliche Bildschirme, Sie stecken fest, weil entweder Sie diesen Designprozess an Ort und Stelle setzen und vielleicht sogar erstellen dieses Designsystem in einem kleineren Maßstab. Dann können Sie einfach dort abholen, wo Sie aufgehört haben und von dort weitermachen. Sie wollen plötzlich die Farben ändern, die Stile ändern. Sie können das leicht tun, weil alles an Ort und Stelle ist. Sie haben dieses Designsystem an Ort und Stelle. Sie haben alle diese Komponenten an Ort und Stelle. Sie haben den Styleguide an Ort und Stelle. Also noch einmal, wenn Sie alles über dieses Projekt lernen wollen, stellen Sie sicher, dass mein Kurs alle 20 Stunden lang ist und ich alle diese Dinge in viel detaillierter als ich in diesem kostenlosen Kurs. Aber im Grunde, was Sie können, ist leicht skalieren, dass. Egal, ob Sie in einem Jahr oder fünf Jahren zum Projekt zurückkehren, Sie können einfach weitermachen, wo Sie aufgehört haben, es aufheben und einfach weiterentwickeln, wenn sie ändern möchten, können Sie leicht die Farben und Stile ändern, die Schriftarten, die Farben, das Logo, wann immer Sie wollen, auch die Bilder, nur ein paar Klicks, anstatt einfach nur wieder über den Ort zu starten. Wenn wir also einen Blick hier werfen, können Sie sehen, wie diese Karten skaliert werden. Zum Beispiel können Sie diese Rasterlinien sehen, wie ich Ihnen erklärt habe. So können Sie sehen, dass Sie Adobe XD dafür verwenden können. Sie können sehen, wie sie nach unten skaliert wurden, was sind gute Praktiken, die schlechte Praktiken sind, und warum? Sie können alle diese Inhalte Abstand Linien, Rhythmus, vertikalen oder horizontalen Rhythmus zu sehen. Also bleibt alles gleich. Abstand, wie alle diese Spalten und Inhalte aussehen, so dass alles so aussieht, wie es sollte. Und schließlich, sobald das auf das Carbon Design System geladen wird, und ich ermutige Sie wirklich, dies zu überprüfen. Wenn wir auf ein 2x Raster klicken und Sie können sehen, wie das aussieht und wie es skaliert. Wenn ich dies also absenke, klicken Sie auf Abspielen. Sie können dort zwei x Gitter sehen, das ist wieder das Gitter, das sie für sich selbst entwickelt haben. Sie müssen dieses Raster nicht in Ihren Projekten verwenden. Es funktioniert in ihrem Projekt, aber vielleicht müssen Sie für Ihr Projekt etwas anderes erstellen. Es ist im Grunde ein 8-Raster und Sie können es einfach in Adobe ASD erstellen. Und das habe ich Ihnen bereits im vorherigen Abschnitt dieses Kurses gezeigt. So können Sie im Grunde sehen, wie es nach oben und unten skaliert. Wir können zur Topographie übergehen. Sie können den Maßstabsstil, Farbe Ressourcen sehen. Sie können dort eine Schrift sehen und wie es ist, wie sie im Code aussieht. Sie haben auch diese Schriftfamilien und wie es aussieht. Entwickler können diese dann einfach von hier auswählen und einfach weitermachen. Wenn wir zum Beispiel zu Symbolen gehen, können Sie sehen, welche Symbole sie verwenden und den gesamten Stil dieser Symbole. Und Sie können zum Beispiel einfach den Namen dieses Symbols kopieren. Und dann können sie es später im Code verwenden. Sie können sehen, wie sie aussehen und sie sind offensichtlich in Kategorien unterteilt. Also alphanumerischen Handel und das ist für Sie relevant, wenn Sie etwas wie ihre Googles Material Design Symbole verwenden , weil Sie ihnen Namen geben oder Namen verwenden können , die Google bereits verwendet, wenn Sie etwas anderes verwenden, wie Premium Zum Beispiel, von End-Vital-Elementen oder von welchem anderen Ort es wirklich wichtig ist, diese Symbole Namen zu geben , damit Entwickler sie leicht später verwenden können. Sie können also sehen, dass es hier Gebäude heißt, aber hier heißt es Gebäude 32. Dies ist also der eigentliche Name, den sie im Code verwenden werden. Und wenn Sie einfach als VG von hier herunterladen, das ist wieder einmal eine gute Praxis. Daher ermutige ich Sie wirklich, diese Designsysteme zu erkunden , weil es eine Menge von ihnen gibt. Shopping für Shopify hat eine, Adobe hat eine, Microsoft hat eine, Apple hat eine. Also stellen Sie sicher, dass Sie sie überprüfen und zu verstehen, was diese großen Unternehmen tun. Also können Sie das für sich selbst tun, nicht in diesem großen Maßstab, offensichtlich, vor allem, wenn Sie allein arbeiten, weil es Jahre dauern wird, um all das zu erschaffen. Aber einige bedeuten in wichtigen Faktoren wie Farbe, Typografie, Ikonographie, Abstände oder Radonraster und vieles mehr Sie für Ihre Kunden und Ihre kleineren Projekte erstellen können. So stellen Sie sicher, dass zu überprüfen, wenn Sie sehen dies auf YouTube, Ich werde den Link unten in der Beschreibung zu einigen dieser Design-System verlassen, die ich denke, sie sind cool und die ich denke, Sie können einige weitere Informationen von abholen. 28. Design erstellen: Gute Möglichkeit, Ihre Projekte zu organisieren und es einfach für Sie, Ihre Teamkollegen, Ihre Kunden und schließlich Entwickler zu machen , ist etwas zu verwenden, das Design-Token genannt wird. Anstatt zum Beispiel einfach Ihre Farbe Road zu benennen, können Sie Ihren Entwicklern verkaufen, was dieses Rot zu tun hat. Also, wenn ich Ihnen in meinem Beispiel hier zeige, haben wir Gefahr rot, was so etwas ist, wenn sie, wenn Benutzer einen Fehler gemacht haben, dann wird es ihnen diese rote Farbe in einer Form zeigen, zum Beispiel in einem -Feld und eine Schaltfläche. Aber Gefahr Rot ist im Grunde verfärbt reden , die Entwickler dann verwenden können, um in Code zu integrieren. Und wenn ich diesen Hex-Code kopiere, anstatt ihn so zu benennen oder einfach zu lesen, können sie ihn einfach Gefahr rot nennen, was offensichtlich nützlich ist, wenn Sie mehrere Versionen dieser Farbe haben. Entwickler müssen verstehen, in welchem Fall Sie welche Farbe verwenden. Daher ist es wirklich nützlich, ihm diese Design-Token zu geben , denn wie ich Ihnen im vorherigen Beispiel mit Designsystemen gezeigt habe, ist es äußerst wichtig, besonders bei Symbolen, wenn Sie mehrere Versionen desselben Symbols haben. Sie können sich an den vorherigen Abschnitt des Kurses erinnern, wenn ich mit Ihnen über Designsysteme spreche, können Sie sehen, dass IBM die Gebäudenummer 32 hat, da sie 32 verschiedene Gebäudesymbole haben , die sie in ihrem Designsystem verwenden. So können Sie genau das Gleiche tun. Sie können Ihre Layer so benennen, und Sie können Entwicklern dann helfen, leicht zu verstehen und schnell zu entwickeln, indem Sie Ihren Design-Token Namen geben. Also noch einmal, Sie können anstelle von Weiß sehen, wir haben schlicht weiß, weil zum Beispiel, irgendwann wollen wir vielleicht dunkleres Weiß einschließen, wir wollen, ich weiß nicht, über Overlay weiß oder was auch immer. Wir haben dunkelgrau, hellgrau, Hauptgrün, sekundäres Grün, was auch wichtig ist, weil dieses Hauptgrün die Hauptfarbe unseres Projekts oder unserer Marke oder Website ist . Sekundäres Grün ist die Farbe unseres Hover-Effekts, zum Beispiel, können Sie es schwebend grün nennen. Vielleicht können Sie es dunkelgrau nennen, grün auf schweben. Vielleicht kannst du so etwas tun. Aber noch einmal ist es immer am besten, mit Entwicklern darüber zu sprechen und sie einfach zu fragen, wie würden Sie es vorziehen, dass Ihre Farben benannt werden und all diese Dawkins benannt werden, damit sie sie später im Code leicht verstehen können. Sie können das auch mit Zeichenstilen tun. Also hier habe ich Poppins 16, aber in einigen Fällen möchte ich vielleicht diesen H1 Bob in 16 nennen. Vielleicht möchte ich es nur nennen H Mai 1 Haupt sein, H1, H2, H3, H4, H5. Also zum Beispiel, ob vielleicht Absatztext, so dass Sie es Absatzgröße nennen können, können Sie einige verschiedene Dexter's von verschiedenen Orten haben. Wie zum Beispiel in Dashboard-Bildschirmen, haben Sie dort vielleicht unterschiedliche Textgrößen. Vielleicht können Sie sogar etwas wie Promo-Text einfügen. Vielleicht möchten Sie es in das Banner aufnehmen. Denken Sie also einfach über all diese verschiedenen Dinge nach, während Sie entwerfen. Daher können Sie sie als Design-Token einschließen. Und schließlich, für die Symbole und Komponenten, können Sie sehen, wir haben mobile top nav, main, top nav, Hauptmenü-Symbol, und wir haben sekundäre Menü-Symbol und so vieles mehr. Aber hier ist der Hauptunterschied zwischen diesen beiden. Wenn Sie Komponenten benennen, Mobile top nav ist wichtig, weil es auf mobile geht, während Haupt-Top-nav geht direkt hier auf einem Website-Design, das sofort leicht für Entwickler zu verstehen ist , weil sie verstehen können, Okay, das ist also für ein Handy, das ist für das Web und sie können wirklich schnell losgehen. Das sind also die Design-Token und ich ermutige Sie wirklich, Ihre Ebenen nochmals zu benennen, mit Ihren Entwicklern und Ihren Kunden zu sprechen. Wie möchten sie, dass Sie Ihre Layer benennen, damit sie diese leicht verstehen und innerhalb des Codes ziehen können, damit sie Ihre Arbeitslast später reduzieren können , nachdem Sie das Projekt abgeschlossen haben. 29. Stilleitfaden erstellen: Styleguides sind äußerst nützlich, da sie Ihren Kunden und insbesondere Entwicklern helfen können , zu verstehen, welche Assets Sie in Ihren Entwürfen verwendet haben. Und sie können dem alten Stil folgen, sie können der Farbe folgen, sie können Farben aus Ihrem Styleguide kopieren und einfügen. Wenn ich also zu unserem Beispiel hier zurücknehme, das wir wiederverwenden, haben wir hier einen Projektstileguide. Wenn wir also ganz nah zoomen, können Sie sehen, dass wir all diese verschiedenen Farben haben. So können sie schlicht weiß sehen, was wieder, wenn ich dich hier nehme, hier ist es hellgrau, so dass sie schnell sehen und sehen können, welchen Hex-Code Sie verwenden. So können sie diesen Hex-Code kopieren, der direkt in Code eingefügt wurde, alle zusammen verdrahtet, codieren und sie werden diese Farben integriert haben. Die andere Option ist, weil es SDS-frei sein wird und dies immer den Entwicklern empfehlen, mit denen ich im Laufe der Jahre arbeite, ist einfach XD zu installieren, diese Datei zu öffnen und einfach kopieren und einfügen dies direkt in Code, wenn sie wollen. Denn so können sie einfach durchblättern und verstehen , wo diese Farben verwendet werden. Dasselbe für die Typografie. So können Sie verschiedene Farben für verschiedene Größen sehen, unterschiedliche Abstände und unterschiedliche Zeilenhöhe ist unterschiedlich. Hier ist alles anders. So können Entwickler leicht verstehen, OK, das ist, dass ich das hier verwenden kann. Ich kann das dort benutzen, das wird dafür verwendet. Auch zu beachten, dass, wenn Sie für Entwickler teilen, wird viel einfacher für sie sein, ihnen diesen Link zu geben weil sie diese Stile einfach kopieren und direkt von diesem freigegebenen Link in den Code einfügen können . Aber wieder einmal, dieser Projektstil-Guide ist wirklich nützlich, um die Dinge auf einen Blick schön aussehen zu lassen, Ikonographie. Also noch einmal, sie können auf t2 schauen, welche Symbole Haben Sie verwendet? Und in diesem Fall haben wir diese Karte. Also, wenn Sie 50 verschiedene Karten verwendet haben, können Sie den Text unten setzen und nennen Sie dies zum Beispiel Website-Design und Kartenseite, scrollen Sie drei oder was auch immer. So können sie wissen, dass Sie dieses Betonelement in Ihrem Design verwendet haben. Also, das ist, wo ein Stil Führer nützlich sind. Und Kunden können diese Styleguides auch sehen. Und das ist wirklich vereinfachte Version, die Sie so komplex den Styleguide erstellen können , wie Sie wollen. Sie können verschiedene Bilder in Ihren Styleguide einfügen. Sie können verschiedene Moodboards zur Inspiration erstellen. Sie können sie in einen Styleguide einbinden. Sie können zum Beispiel mehr über die Absätze erläutern. So können Sie größere Absätze, kleinere Absätze erstellen. Sie können zeigen, wie der Absatz aussieht, links ausgerichtete Mittellinie und die Linie schreiben, damit Sie beliebig viele Informationen in diesen Styleguide einfügen können . Oder einige Projekte benötigen überhaupt keinen Styleguide. Also noch einmal, müssen Sie mit Ihren Kunden und Entwicklern sprechen. Sie brauchen tatsächlich den Styleguide, denn wenn sie es nicht tun, ist dies nur eine Design-Übung für sich selbst. Oder wenn Sie einfach zu viel Freizeit auf Ihrer Hand haben, können Sie dies erstellen. Aber noch einmal, Styleguide erfordert viel Zeit und viel Mühe und Gedanken in sie gelegt. Wenn Sie also nicht mit allen Mitteln einen Style Guide erstellen müssen, erstellen Sie ihn nicht, sondern fragen Sie Ihre Kunden und Entwickler, müssen Sie sie tatsächlich erstellen? Denn wenn Sie mit der Freigabe beginnen, können Sie für Clients freigeben und für Entwickler freigeben. Und beide können das Bild dorthin anstatt dass Sie zusätzlich diesen Styleguide erstellen. Aber wieder einmal, es ist ein wichtiger Teil des Entwurfsprozesses selbst. 30. Großartige Präsentationen erstellen: Schließlich, der letzte Teil oder der Designprozess, unsere Präsentationen, müssen Sie gute Präsentationsfähigkeiten entweder persönlich, über den Zoom-Anruf, Skype-Anruf, oder in der Präsentation selbst haben. Sie müssen also erklären, was das Problem ist. Wie greifen Sie auf dieses Problem zu? Wie machst du es? Wie geht es darum, die Lösung zu finden? Und wie hast du dann das Problem gelöst? Sie müssen alles in Ihrer Präsentation zeigen. Und das wird normalerweise Fallstudie genannt. Und jedes Projekt ist die Fallstudie für sich. Aber woher wissen Sie, was Sie präsentieren müssen? Es ist wirklich einfach. Gehen Sie einfach zu Google. Bevor Sie zu Google gehen, stellen Sie sicher, dass Sie diese Projektpräsentation verstehen bevor Sie mit der Arbeit beginnen oder nachdem Sie mit der Arbeit beginnen. Und Sie müssen es für Ihr Portfolio verwenden. Denn bevor Sie mit der Arbeit beginnen, müssen Sie Ihrem potenziellen Kunden erklären, weil sie noch nicht Ihr Kunde sind, aber Sie sind Pitching zu ihnen. Sie müssen erklären, was Ihre Fähigkeiten als Designer sind. Also müssen Sie sich ihnen im Grunde verkaufen, um für sie an ihrem Projekt zu arbeiten. Sie müssen also Ihre Problemlösungsfähigkeiten erklären und wie können Sie ihnen bei diesem Projekt helfen? Wenn Sie jedoch auf der anderen Seite dieses Projekt abgeschlossen haben und Sie nur Ihre Gestaltungsfähigkeiten, Ihren gesamten Prozess während der Gestaltung dieser Website zeigen möchten , dann müssen Sie es in die andere Richtung gehen. also in der ersten Methode sicher, dass Sie so etwas wie eine PowerPoint-Präsentation verwenden. Sie möchten so viele Probleme zeigen, die Sie in dieser bestimmten Nische wie möglich lösen können. So kann der Kunde Sie leicht verstehen. Wenn ein Ihnen ein Beispiel geben, wenn Sie nähern, weil wir Dao De verwenden Im vorherigen Beispiel, sagen wir, dass Sie zu Ihrem lokalen Audi-Händler gehen und Sie wollen ihre Website neu gestalten. Aber was Sie zuvor getan haben, ist eine neu gestaltete eine Reihe von diesen Gaming-Websites. Es ist nicht relevant für unsere D. Sie werden nicht einstellen, Sie sind egal wie gut Designer Sie sind, weil Sie nicht verstehen, die Probleme, die sie innerhalb dieser Branche konfrontiert sind. Stellen Sie also sicher, dass Sie beim Pitchen die richtige Tonhöhe für den richtigen Kunden aufstellen der die Probleme verstehen wird und die Lösungen verstehen wird, die Sie anbieten , daher wird es besser passen für Sie. Und es wird ein größeres Projekt mündlich sein. Auf der anderen Seite wenn Sie das Projekt beenden und Sie es entweder in Ihrem Portfolio, in Ihrer Behance Seite oder sogar zukünftigen Kunden zeigen möchten , was ebenfalls wichtig ist. Sie möchten ihnen zeigen, wie Sie die Probleme in Ihren vorherigen Projekten in der gleichen Nische gelöst haben, in der sie sich befinden, und dort haben Sie eine Gewinnkombination. Also lassen Sie mich schnell gehen, weil, und ich werde Ihnen einige gute Beispiele zeigen, die ich schnell gefunden habe. Aber Sie können auch verschiedene Beispiele entdecken und finden, die für Sie am besten geeignet sind. Also, was haben wir hier? Ist dieses mobile Projekt. Dort, nennen Sie es farbig, und hier können Sie sehen, was es ist. Sie haben diese schöne Hintergrundanimation. So lebensrettende Verfahren digitalisiert, damit Sie sehen können, was die App tut. Unsere Vision. Also, was ist unsere Vision? Die Probleme? Sie können sofort sehen, was die App tun kann. Ein Klick kann jemandem das Leben retten. Das ist also die Lösung. Was wir getan haben, unser Ansatz, etwas Branding, UX-Design, UI-Design, und für jedes von ihnen, was sie getan haben, Benutzerfluss. Also noch einmal, wo sie ihre Benutzer gefunden haben, wie der Benutzer zu dieser App reist. So User Journey im Grunde Wissensdatenbank. Also, was sie eingebaut haben, gekauft und vergossen haben, was sie geschaffen haben. So können Sie all diese verschiedenen zusätzlichen Informationen sehen , die sie innerhalb der App verwenden. können Sie einige Legendenpunkte sehen. Schneller Fluss, virtuelle Präsenz. Also im Grunde geht noch weiter, wie Smartwatch durch die App fließt. Und im Grunde sieht es so aus. So können Sie sehen, dies ist wirklich komplexes Beispiel die Projektpräsentation ist sehr gut gemacht. So können Sie Ihre zusätzliche Zeit auf die Präsentationen aufteilen , da gute Präsentation die Hälfte des Verkaufs ist. Achten Sie darauf, das zu wissen, stellen Sie sicher, dass Sie sich daran erinnern. Denn wenn Sie eine gute Präsentation haben, die wirklich gut kommuniziert und es sieht wirklich schön aus, Sie sind schon auf halbem Weg wagen, totes Projekt oder sogar das zukünftige Projekt zu leihen. Ein weiteres Beispiel, das ich Ihnen zeigen möchte, ist diese Visa-Website Redesign. Sie können sehen, es ist von Ekaterina, Meinem Heiligenschein. Und im Grunde ging sie andersherum herum herum. Dies ist das Website-Design und nicht dieses App-Design. So können Sie dies für alles tun, was Sie im Grunde entwerfen, was sie hier tut , zeigt, dass diese Seite auf Handy so aussieht. Sofort. Sie nahm es, sie nimmt das Branding, sie breitet das noch mehr aus. Sie hat diese schönen Animationen zwischen den Karten. Sie zeigt, wie das Scrollen auf der Seite aussieht. Vielleicht sogar einige Horroreffekte und vieles mehr. Diese Seite, wie es aussieht auf Web und Mobile. Hier haben wir das Gitter. So können Sie sehen, dass sie echte Seiten und all diese zusätzlichen Details wie eine Schriftgröße zwischen all dem trennt , während diese Jungs alles in Abschnitten getrennt. Es liegt also wirklich an Ihnen, wie Sie Ihre Präsentationen für Ihre Kunden strukturieren und im Grunde sagen möchten , was Sie für sie in einem bestimmten Fall tun können. Also, das ist es für die Präsentationen sind wirklich ermutigen Sie, es zu überprüfen. Gehen Sie zu B hat ein C in Ihrer Branche, in Ihrer Nische, wie die Präsentationen aussehen, stellen Sie sicher, dass Sie sich an das Audi Beispiel erinnern, aber Sie können das auf jedes Beispiel anwenden. Und in jeder Branche, in der Sie sich befinden, stellen Sie sicher, zu kommunizieren, Ideen zu schreiben, Probleme zu beheben und Lösungen mit den richtigen Kunden zu schreiben. Und Dan, du wirst auf einer Siegerserie sein. 31. Zukunft der Design-Tools: So könnten Sie gerade erst in diesem Geschäft beginnen und Sie fragen sich vielleicht nur, was die Zukunft dieser Design-Tools ist, sollte nur meine Zeit für Adobe XD wert sein. Soll ich sogar für Sigma vier Skizze gehen, vielleicht Photoshop oder Illustrator? Worauf sollte ich in diesen Werkzeugen achten und wo sollte ich auch meine Zeit widmen? So kann ich Ihnen sagen, aus meiner jahrelangen Erfahrung, fast zwei Jahrzehnte in diesem Geschäft, dass es wirklich keine richtige Antwort gibt. All diese Werkzeuge entwickeln sich im Laufe der Zeit weiter. Ich mag Adobe XD wirklich, weil es Teil der Adobe-Familie ist und wirklich keine Schulden sind. Wenn ich mein Premium-Abonnement für Adobe-Paket, Es wird unterstützt werden und ich kann es in Verbindung mit verwenden, zum Beispiel, Photoshop Illustrator. Wenn ich einige meiner Bilder reparieren muss, mal sehen, vielleicht kann ich Lightroom wirklich verwenden. Also habe ich all das in kreativ genannt Abonnement. Daher mag ich Adobe XD für diese Angelegenheit, auch Vielseitigkeit, denn wie sie in diesem Kurs gesagt haben, können Sie vom Design-Prototyping und dem Teilen ihrer Funktionen für die Zusammenarbeit ausgehen. Und das Wichtigste von allen ist, dass Updates jeden Monat kommen. Und große Updates kommen ein- oder zweimal, vielleicht dreimal im Jahr, abhängig vom Rückstand des Teams und dem, was sie bisher geschaffen haben. Stellen Sie also sicher, dass Sie verstehen, wenn Sie sich für diese Design-Tools entscheiden. Achten Sie darauf, diejenige auszuwählen, die für Sie geeignet ist. Vielleicht verwenden Sie gerne Skizze, aber Skizzen werden unter Windows nicht unterstützt. Also, wenn Sie ein Windows-Benutzer sind, dann ist das keine Option. Vielleicht möchten Sie für Sigma verwenden, dann können Sie fortfahren und für Sigma in der Cloud verwenden. Aber wenn Ihre Internetverbindung ist viel zu langsam, Dan , Diese Erfahrung wird nicht groß sein mit einer anderen Erfahrung, die hat, zum Beispiel, Sumatra Designer, die bessere Internet-Verbindungsgeschwindigkeiten hat. Wenn Sie auf der anderen Seite, wie Adobe XD, wie ich, und Sie möchten einige der anderen Adobe-Produkte verwenden, dann gehen Sie wirklich weiter. Es gibt hier keine richtige oder falsche Option. Ich kann Ihnen aus Erfahrung sagen, wir leben in einer großartigen Zeit, um ein UI- und UX-Designer zu sein , weil wir all diese Tools zur Verfügung haben, nur was wir tun müssen, ist einfach zu arbeiten. Sie können an sich selbst arbeiten, Sie können daran arbeiten, sich selbst zu verbessern. Und eine wichtige Sache, um von diesem Kurs und von diesem, ein Teil des Kurses, vor allem, wenn Sie wissen, wie man einige dieser Tools verwendet, wie in diesem Fall, wird es x D sein. Es wird viel einfacher für Sie zu verstehen diese UDL-Tools wie FISMA oder Skizze oder sogar Photoshop. Weil alle diese Werkzeuge im Grunde die gleichen sind. Es liegt nur an Ihnen und was Ihnen am besten passt , wenn Sie kostenlose Versionen als XD verdienen und Sigma sind gute Option, wenn Sie auf einem Mac in realen Skizze sind oder Sie sind ein Team Sie zwingen, Skizze zu verwenden oder Sie wirklich Skizze verwenden möchten, dann musst du für die Scatchard bezahlen. Also stellen Sie sicher, dass Sie sehen, was das Beste für Sie ist. In meinem Fall, wie gesagt, eine echte wie Adobe XD. Und weil es leicht ist, bietet es mir diese großartigen Möglichkeiten. Und wenn Sie zum Beispiel etwas fortgeschrittener und Emissionen machen und Daten oder Kunden oder Entwickler anzeigen möchten , können Sie diese Adobe XD-Datei auswählen, zum Beispiel direkt in Premier gehen oder sogar nach Effekten. Und in, After Effects, können Sie all diese erstaunlichen Details und all diese erstaunlichen Animationen hinzufügen. Sie müssen es nicht einmal tun, weil es so viele Plugins in Adobe XD gibt. Und dann können Sie mit Plugins zum Beispiel Benutzertests gehen. Es gibt etwas, das Anima genannt wird. Seit kurzem können Sie Code direkt aus Adobe XD exportieren. Sie können auf so vielen verschiedenen Optionen und so vielen verschiedenen Ebenen arbeiten. Nur im Inneren wird es sein, ohne jemals eines dieser Werkzeuge zu wechseln. Weil ich mich erinnere, als ich anfing und wir pflegten, um Websites in Photoshop und Illustrator zu erstellen. Dann müssen wir Werkzeuge wie sich vorstellen, aber es war viel später. Bevor wir uns vorstellen, müssen wir unseren Kunden erklären, die keine Webdesigner sind, die keine Entwickler sind, wie das Design aussehen wird , sobald es entwickelt ist. Es ist also wirklich schwierig, solche Ideen mit Ihrem Kunden zu kommunizieren, besonders wenn sie nicht wissen und nicht verstehen, wovon Sie reden. Aber mit Tools wie Adobe XD und all diesen Tools, Erweiterungen, Plugins und den Ressourcen, die wir jetzt zur Verfügung haben, ist es für Kunden viel einfacher zu verstehen, denn wie Sie im Diskurs gesehen haben, ist es viel einfacher für sie, Feedback und um Sie durch dieses Projekt zu führen, damit Sie schneller mit dem Projekt arbeiten können. Es ist viel einfacher, mit dem Entwickler zu kommunizieren, denn in der Vergangenheit war das auch die Hektik. Sie müssen verschiedene Plugins installieren, um aufzupolieren und es war wirklich ein Chaos. Aber genau hier haben Sie integrierte Lösungen für den Export Ihrer Dateien. So ist es viel einfacher, mit Entwicklern zu arbeiten, mit Kunden, welche Stakeholder, mit Ihren Teamkollegen auf einen Blick, alles in einer App. Und Sie können kostenlos loslegen. 32. KURSPROJEKT: Ihr Klassenprojekt für diese Klasse besteht darin, die Tipps und Techniken zu verwenden Sie aus diesem Kurs lernen, um sie auf Ihren Designprozess anzuwenden. Und ich möchte, dass Sie entweder eine einseitige Website oder einen einzigen Bildschirm für die App erstellen entweder eine einseitige Website oder einen einzigen Bildschirm für , indem Sie die Tipps und Techniken verwenden, die Sie aus diesem Kurs lernen , und um sie in die Klassenprojekte hochzuladen, stellen Sie sicher, dass Sie sie speichern als einfaches JPEG heraus, müssen Sie nichts Phantasievolles wie eine Emissionen einschließen, irgendetwas Phantasievolles wie Geoff's einfach als JPEG-Bilder einschließen, sie in den Klassendateibereich hochladen und ich und andere Schüler können Ihnen mit dem Feedback. Niemand ist hier, um dich zu verurteilen. Wir sind alle hier als Freunde, um einander zu helfen und einander zu helfen, in diesem Bereich zu wachsen und zu expandieren. Also noch einmal, ich ermutige Sie wirklich, zu erstellen, was Sie von dieser Klasse gelernt haben wollen, und laden Sie es einfach in die Klassenprojektdateien hoch. 33. Conclusion: Vielen Dank, dass Sie sich diesen Kurs angesehen haben. Ich hoffe wirklich, dass Sie Wert darin gefunden haben. Wenn Sie möchten, können Sie hier meinen Adobe XD-Masterclass-Kurs überprüfen. Sie können sich anmelden. Und dann finden Sie alle Tools und Funktionen, über die wir in diesem kostenlosen Kurs gesprochen haben. Wenn Sie auf die Links und Ressourcen zugreifen möchten, die ich in diesem Kurs erwähnt habe, wird es in einem PDF verlinkt. Stellen Sie sicher, dass Sie Open-ended PDF herunterladen und Sie können einfach auf den Link klicken , der Sie interessiert, und Sie können es bis zum nächsten Mal leicht zugreifen. Vielen Dank nochmals für das Zuschauen und ich wünsche Ihnen viel Glück bei all Ihren Bemühungen. Sie haben das richtige Feld gewählt, denn UI UX Design ist das Feld InDesign, das sich am schnellsten erweitert und es gibt viele verschiedene Möglichkeiten für Sie. Also wünsche ich Ihnen alles Glück bei Ihrer Jobsuche oder bei Ihren Karriereverbesserungen. Danke. Und bis zum nächsten Mal, kümmern Sie sich.