Grundlagen des User Experience Design – Adobe XD UI UX Design

1. Einführung in den Kurs Adobe XD Essentials-Kurs: [MUSIK] Hallo allerseits. Mein Name ist Dan Scott und ich bin ein Adobe Certified Instructor. Gemeinsam lernen Sie und ich, wie Sie mit der Software Adobe XD UX-Designer werden können. Jetzt richtet sich dieser Kurs an Personen, die völlig neu in der Adobe XD-Software sind. Es richtet sich auch an Personen, die im Allgemeinen völlig neu im UX-Design sind . Wir beginnen den Kurs gleich am Anfang und arbeiten uns Schritt für Schritt durch. Zuerst beschreiben wir den Brief und wie wir mit einer UX-Persona arbeiten werden. Dann lernen Sie, wie Sie einfache Wireframes erstellen. Von dort aus lernen wir, wie Sie Farben und Bilder richtig in Ihre Entwürfe implementieren können. Sie lernen, wie Sie Schriftarten sowohl für Web- als auch für mobile Anwendungen auswählen . Sie lernen, wie Sie Ihre eigenen Icons, Schaltflächen und alle UI-Komponenten erstellen . Ich werde Ihnen alle geheimen Tricks in Adobe XD mitteilen , die Ihnen helfen, Ihren Workflow zu beschleunigen und unser Leben zu erleichtern, indem Sie kostenlose UI-Kits und bereits vorhandene Vorlagen in XD verwenden. Wir steigen vom Computer aus und ich zeige Ihnen, wie Sie Ihre Entwürfe tatsächlich auf Ihrem Handy testen können. Wir erstellen einen einfachen Styleguide , der für eine Kundenübergabe bereit ist. Wir werden Spaß daran haben, diese Mikro-Intrichtungen, Seitenübergänge und Animationen zu machen. Vor dem Ende dieses Kurses haben wir einen vollständig interaktiven Prototyp bis hin zur Zusammenarbeit mit anderen Teammitgliedern und zum Exportieren der richtigen Dateien, die zur Übergabe an unseren Entwickler bereit sind oder Software-Ingenieur. Während des Kurses werde ich auch einige der Erwartungen an Sie als neuer UX-Designer abdecken . Jetzt habe ich während des gesamten Kurses Aufgaben, die Ihnen helfen, das zu üben, was wir bei der Arbeit lernen, und auch etwas Einzigartiges für Ihr Portfolio aufzubauen. Alles klar, es ist an der Zeit, von Adobe XD Zero zu UX Hero zu wechseln , mit mir im Unterricht zu kommen. Nun, ehrliche Meinung, denkst du: „Das ist ein cooles Licht, das er da hat. Wie cool ist das?“ Oder [LACHEN] das ist den ganzen Weg während des Kurses, denkst du: „Wofür ist das lahme rosa Licht?“ 2. Erste Schritte mit deinem Adobe XD-Projekt beginnen.: Hallo allerseits. Willkommen beim Video „Erste Schritte“. Als Erstes müssen Sie die Übungsdateien herunterladen. Es gibt hier einen Link auf diesem Bildschirm Klicken Sie also auf, laden Sie diese herunter, bevor wir fortfahren. Außerdem kann ich sehr schnell reden, wenn ich aufgeregt bin. diese Weise gibt es ein Zahnrad. [GELÄCHTER] Hier unten gibt es ein kleines Zahnradsymbol. Du kannst mich beschleunigen oder verlangsamen, wenn ich zu schnell rede, rede ich zu schnell. Stellen Sie außerdem sicher, dass Sie Adobe XD installiert haben. Wir werden die Vollversion davon verwenden. Es gibt eine kostenlose Version, sie im Moment den Starter-Plan nennen. Es ist neu, es könnte verschwinden, sie könnten den Namen ändern. musst du vielleicht herausfinden. Der Unterschied im Moment besteht darin, dass es nur für den persönlichen Gebrauch gedacht ist, die kostenlose Version namens Starter-Plan. Außerdem gibt es einige Einschränkungen, wie vielen Personen Sie das Dokument teilen und mit denen Sie zusammenarbeiten können . Aber im Moment können Sie diesen Kurs zu 100 Prozent damit machen . Das ändern sie ständig. Wir werden uns auf die Hauptversion konzentrieren. Möglicherweise stoßen Sie auf ein paar kleine Änderungen wenn Sie diese Starterversion während des gesamten Kurses verwenden , aber im Moment können Sie es zu 100 Prozent tun. Eine andere Sache, die zu beachten ist, ist, dass Adobe XD relativ neu ist. Sie aktualisieren es mit einer Ladung. Jedes Mal, wenn ich einen Kurs mache, gehen sie rein und ändern den Namen oder so. Wenn es sich um eine grundlegende Änderung handelt, nehme ich eines der Videos erneut auf. Wenn es sich um eine leichte Anpassung handelt und seine Form ändert oder sich ein wenig bewegt hat, mache ich eine Notiz, entweder ein kleines Pop-up wie dieses, [NOISE] oder überprüfe die Kommentare darunter. Es könnte etwas Neues sein und andere Schüler haben es herausgefunden. Also sieh einfach darunter nach. Ich werde versuchen, es so weit ich kann auf dem neuesten Stand zu halten, aber es gibt kleine Änderungen, die sie ständig mit Adobe XD machen. Zuletzt, Mac versus PC, was brauchst du? Es spielt keine Rolle. Sie können diesen gesamten Kurs mit PC oder Mac absolvieren. Alle Funktionen sind gleich, die Benutzeroberfläche ist etwas anders, aber keine große Veränderung. Ich werde in diesem Kurs ohne triftigen Grund einen Mac benutzen [LACHEN], außer dass es cool aussieht. [GELÄCHTER] Ich sehe wie ein Designer aus, schau dir die Brille an, hab den MAC, er ist auf dem Stand. Hab das Licht, das Licht ist aus. [GELÄCHTER] Sieh dir das an. Tut absolut nichts zur Qualität Ihrer Arbeit außer dass mein Ambiente cool aussieht. [GELÄCHTER] Aber Mac, BC, es spielt keine Rolle. Lasst uns zum nächsten Video gehen. 3. Was ist Adobe XD und macht die Programmierung, was die Programmierung für die Programmierung, und ma: Hi, allerseits. Sprechen wir darüber, wofür Adobe XD bestimmt ist. Können Sie den Code einfach exportieren und die App oder die Website direkt aus Adobe XD haben ? Es ist eine Frage, die mir oft gestellt wird. Nein, Adobe XD ist ein Design-Tool, und sobald das Design erstellt wurde, geben Sie es an die nächste Phase weiter, um es zu codieren, entweder in Xcode oder PHP oder welcher Sprache verwendet wird entwickle diese App oder diese Website. Du denkst vielleicht, warum machst du es nicht einfach direkt im Code? Das ist eine Art, dies zu tun. Es ist, als würde man ein Haus bauen und es gleichzeitig gestalten, es ist sehr schwierig, Änderungen vorzunehmen. Als Designer kann ich Dinge bewegen, die Farben ändern, eine zusätzliche Seite hinzufügen, und es dauert Minuten oder Stunden je nachdem, wie viele Änderungen passieren müssen. Aber genau die gleichen Änderungen vorzunehmen sobald es codiert wird, ist eine sehr große Sache und erfordert mehr Talent als ich beim Programmieren habe. Ich kann einige grundlegende Front-End-Codierung machen aber nichts, was eine komplexe Site aufbauen wird. Oft arbeite ich als Team. Ich mache die Designseite und die Tests und die Benutzeroberfläche und UX, die wir im nächsten Video besprechen werden, übergebe es dann einem Entwickler einem Ingenieur oder einem Programmierer oder wie du sie nennen wirst, und sie werden es bauen basierend auf diesem Design. Du würdest so sein, als würden zwei Leute einen Job machen. Das ist eine Art, wie ich es betrachte, aber was wirklich effizient ist, ist meine Fähigkeiten als Designer , den Brief zu nehmen, den Brief zu verstehen Art von Hypothesen zu entwickeln. Kein guter Tag. Du kennst das Wort, das ich meine. sich einige Dinge, die Sie möchten, von denen Sie glauben, dass dieses Problem lösen, und testen Sie sie dann. Das ist das wirklich nette an Adobe XD. Wenn Sie mir gerade eine Idee gegeben haben, sagte, ich habe eine neue Idee für eine Anmeldeseite für unsere Website, können Sie sie erstellen? Ich könnte das kurz nehmen und ich könnte es sehr schnell machen. Nehmen wir an, es könnte in ein paar Stunden erledigt werden, ich könnte diese andere Art von Anmeldeseite auf Ihrer Website verspotten , sie an potenzielle Kunden weitergeben und sie dazu bringen, sie zu testen. Es funktioniert nicht wirklich, es ist nicht vollständig integriert, aber für die Person, die es testet, ist es gut genug, um Feedback zu erhalten. Ich kann entweder zusehen, wie sie es tun oder den Bildschirm mit ihnen aufzeichnen und Fehler finden und sagen, ich dachte, wir würden dorthin gehen, sie sind es nicht. All dieser Prozess wird über Adobe XD durchgeführt. Sie können sehen, wie schnell es gemacht werden kann, und ich kann 20 verschiedene Versionen erstellen, bevor ich so bin, Erfolg, sie wissen, wie man sich anmeldet, das ist der beste Weg, sich anzumelden. Dann kann ich mit einer Sache zum Entwickler gehen und sagen, mach das für mich. Ich gebe es dem Entwickler ab, sie bauen es auf. Das ist ein effizienter Workflow. Es zu programmieren und dasselbe zu tun , würde lange dauern, und die Fähigkeiten, die ich nicht für einen komplexen Anmeldeprozess muss , kann ich es einfach nicht tun. [GELÄCHTER] Wir brauchen ein paar Leute, die in den Prozess involviert sind. Das ist es, was Adobe XD macht. Es geht um das schnelle Prototyping, und Sie können mit einem Kunden zusammenarbeiten, kann sich anmelden, sie können sagen, ich liebe diese Seite, und dann geben Sie sie ab, um sie zu bekommen. Sie müssen mit Ihrem Kunden klar sein, dass dieser Prozess, obwohl er ihn sehen kann, einen Link hören werden, dass es sich nicht wirklich um das fertige Produkt handelt. Es ist etwas, das losgehen und als nächstes weiterentwickelt werden muss . Nun könnten Sie so sein, dass ich keinen Entwickler [LACHEN] oder einen Ingenieur oder einen Programmierer habe. Du kannst diese Dinge selbst machen. Es hängt von der Arbeit, wer der Kunde ist und von der Größe des Unternehmens ab. Sie entwerfen in Adobe XD, machen das Design richtig und wenn Sie nicht zu einem Entwicklerprogrammierer gehen und alles selbst machen möchten, gibt es keine Code-Optionen, Dinge wie Webflow und Elementor und WordPress. Ich habe Kurse zu vielen Dingen, über die ich spreche, insbesondere solche, die jetzt oder sehr bald herauskommen, damit Sie als Designer das Komplettpaket machen und eine Website liefern können als Designer das Komplettpaket machen vollkommen. Aber es wird andere Zeiten geben, in denen Sie mit einer Entwicklung innerhalb eines größeren Unternehmens oder mit einem Entwickler arbeiten größeren Unternehmens oder mit , der einige benutzerdefinierte Dinge erstellt. Ihre Rolle in XD wird es sein, dies an den Entwickler zu übergeben. Die Dinge, die Sie tun können, um ihnen zu helfen, können Sie ihnen einen Großteil des Stilcodes geben , den wir in diesem Kurs tun werden, Sie geben ihnen alle Bilder und Elemente, die sie benötigen, um loslegen zu können. Du kannst es selbst programmieren. Wenn Sie eine einfache Website entwerfen, habe ich einen Kurs über Dreamweaver und VS Code. Der VS-Code One ist wahrscheinlich der beste um zu lernen, wie man HTML und CSS selbst macht und eigene Sachen baut oder sich für die Optionen ohne Code entscheiden kann man HTML und CSS selbst macht und eigene Sachen baut . Es gibt eine Menge. Squarespace, Wix, Webflow, Elementor, die beiden, auf die ich mich konzentriere, WordPress, es gibt viele Optionen für das Codeentwerfen. Sie entwerfen es immer noch in XD, weil es schnell und großartig ist, und bauen es dann danach auf, sobald der Kunde eine Genehmigung hat, was etwas länger dauert. Es exportiert keinen Code an einen Entwickler, aber es gibt ihm Elemente die er benötigt oder die Sie verwenden, wenn Sie ihn selbst von Hand codieren. Das ist dieses Video vorbei. 4. Was ist der Unterschied zwischen UI und UX in Adobe XD: Hallo. In diesem Video werden wir über UI versus UX sprechen. Wenn Sie sich über diese Begriffe bereits im Klaren sind, können Sie mit dem nächsten Video fortfahren. Für diejenigen, die ein bisschen nur eine Erklärung brauchen , um es klarzustellen, gehen wir das jetzt durch. Wir beginnen mit UI, Teil der UI/UX. Es ist ein Begriff. Diese beiden Begriffe werden ziemlich viel herumgeworfen, und zusammen sind sie ähnlich, aber in Adobe XD unterschiedlich. Es ist alles gemischt da drin. UI-Design oder Benutzererlebnisdesign ist ein Begriff verwendet wird, wenn Sie das Erscheinungsbild einer Website oder einer App oder was auch immer es passiert, entwerfen . Früher habe ich lange als UI-Designer gearbeitet. Bevor UX populär wurde und ich mich dafür interessierte, war ich nur ein UI-Designer. Wie das aussah war , dass ich einen Brief von den Kunden bekomme, recherchiere, was sie brauchten, da eine Menge meiner eigenen Erfahrungen kam, wie zum Beispiel was wohin gehen sollte und was sie Kunden würden es lieben. Der Kunde würde es abmelden und wir würden es von einem Entwickler erstellen lassen , sonst würde ich es selbst machen. Das war ich als UI-Designer. Wo UX anders ist , ist , dass es sich oft um die gleiche Art von Tools handelt. Ich würde meine Erfahrung nutzen, um das zu tun, was ich denke, aber es ist viel mehr Demut mit dem verbunden , was meiner Meinung nach eine gute Lösung für den Kunden wäre . Ich muss denken, dass dies meine Hypothese ist, das ist mein, was der Kunde meiner Meinung nach lieben wird, zumindest werden ihre Kunden lieben und es dann auf die Probe stellen. Dort fangen wir an, in UX umzusteigen. Es ist ein großes Feld. Ich werde versuchen, in diesem Kurs so viel UX-Design wie möglich abzudecken . Aber ich denke, das ist es , was ich denke, die richtigen Benutzer zu finden, um meine Hypothese oder mein Design zu testen, und dann herauszufinden , was funktioniert hat, was nicht funktioniert hat und dann darauf zu iterieren. Nicht nur ein einziges Mal, nicht nur zweimal, so oft es braucht. Angenommen, es ist ein Anmeldeprozess für eine Website, die Sie erstellen möchten, oder eine ganze Website oder eine App für etwas völlig Neues. Der Kunde möchte etwas, Sie haben eine Vorstellung davon, wie Sie das liefern können. Auf die Probe stellen wir diese Ideen auf die Probe, wo wir anfangen, UX-Designer zu werden. Mit Kunden arbeiten, testen, herausfinden, was funktioniert, und dann iterieren. Deshalb ist Adobe XD wirklich gut. Es ist sehr schnell. Sie können sehr schnell iterieren, Sie können zu denselben Personen zurückkehren, um sie im laufenden Betrieb zu testen oder einige Änderungen vorzunehmen, sie dann am nächsten Tag an sie senden und es erneut testen lassen, bis Sie einen Punkt erreicht wo Sie Ihre Aufgaben erfüllen, die Sie gesagt haben. Es ist möglicherweise die schnellste Zeit, sich anzumelden, oder zumindest die meisten angemeldeten Personen. Was auch immer Ihr Ziel ist, Sie können mit dem Kunden testen um diesen Prozess zu durcharbeiten. Das ist der Unterschied zwischen UI und UX. Das Design der Benutzeroberfläche sieht so aus, wie es aussieht, aber wenn Sie dieses Maß an Benutzererfahrungsdesign hinzufügen Benutzererfahrungsdesign , gehen Sie tatsächlich ein und testen dies. Es gibt verschiedene Arten zu testen, aber das ist die vereinfachte Version. Wie es nach Benutzeroberfläche und Benutzererfahrung sucht , hat mehr mit Testen und Iteration zu tun. Ergibt das einen Sinn? Wir werden es ein bisschen mehr erklären, während wir den Kurs durchlaufen, aber das ist UI/UX dort drüben. Ich bin mir nicht sicher warum, aber das sind sie. Lasst uns zum nächsten Video gehen. 5. Was wir in diesem Adobe making abnehmen, mache wir die: Hallo allerseits. In diesem Video möchte ich dir zeigen, wo wir hingehen. Das ist das Zeug, das wir in diesem Kurs machen werden. Wir beginnen mit der Erstellung eines Drahtgitters. Nur ein einfacher Drahtgitter, um die Grundlagen von XD in den Griff zu bekommen . Es wird einige Übergänge geben, und wir werden einige Tests auf Telefonen durchführen und einige grundlegende Dinge und eine einfache Animation erstellen. Nur um unsere Füße in Adobe XD nass zu machen, beginnen wir mit dem Aufbau unseres Moodboards, wie wir es Kunden präsentieren können, und beginnen dann mit unserer High-Fidelity-Version. All diese Begriffe werde ich später im Kurs erläutern. Aber schauen wir uns diese mal an. Ich habe mehrere Optionen für das Cover. Werfen wir einen Blick darauf. Als Animationen können Sie sehen, was wir machen. Werfen wir einen Blick darauf. Es hat ein Navi, wir haben „Jetzt kaufen“ Buttons, wir haben funktionierende Dinge, [LACHEN] -Schalter, die sich hier unten ohne Grund ein- und ausschalten , [LACHEN] aber sie sehen cool aus, mit auch ein bisschen Animation. Das bauen wir in diesem Kurs auf. Ich möchte dir früh einen Höhepunkt geben damit wir wissen, wohin wir gehen. Du magst den Kippschalter, siehst cool aus , [LACHEN] was hat der Van gemacht? Auch du kannst Animationen wie meine erstellen, wobei der Truck wenig Wheelie macht. [GELÄCHTER] Wie auch immer, lasst uns einsteigen und loslegen. 6. Was ist ein Persona und task in UX Design: Hallo allerseits. In diesem Video werden wir über den Brief, die Persona und den Aufgabenablauf für diesen Kurs sprechen und den Aufgabenablauf für diesen Kurs und was diese Begriffe bedeuten. Der kurze, nette und einfache Scotts Green Tea. Sie sind ein kleines lokales Unternehmen in Limerick, Irland, wo ich wohne, und sie liefern grünen Tee an Ihre Tür. Das ist der kurze Brief. Reden wir über Persona , die dieser nächste Teil ist. Was ist Persona? Persona ist ein Wort, das verwendet wird, um den Zielkunden zu beschreiben. Lasst es uns in unserem Fall gemeinsam lesen. Unser idealer Kunde ist eine Frau namens Zoe. Zoe ist in den Vierzigern, sie ist verheiratet, sie hat einen Doktortitel, Dr. Zoe, und arbeitet in einem geschäftigen Team. Sie lebt in Limerick und ist mit ihrem Produkt etwas vertraut, aber genießt es, Zeit damit zu verbringen, über den nächsten Kauf nachzudenken. Warum ist das nützlich? Erstens, wenn wir unsere UX-Tests machen, hat es keinen Sinn, mich dazu zu bringen die Tests durchzuführen, weil ich Dan bin. Ich lebe in Limerick, habe aber keinen Doktortitel und ich bin keine 40-jährige Frau, die verheiratet ist. Es ermöglicht uns, die richtigen Leute zu finden, um dies zu testen, was sehr wichtig ist. Wichtig ist auch als Designer, was ich vor allem zu Beginn meiner Karriere getan habe, vor allem zu Beginn meiner Karriere ich für mich selbst entworfen und versucht mir vorzustellen, dass ich grünen Tee mag. Ich lebe in Limerick, was gut ist, aber ich komme nicht aus Limerick, ich komme aus Neuseeland. Es gab diese Trennung, bei der ich für das entwerfe , was meiner Meinung nach großartig wäre, und dann würde ich mit dem kämpfen, was der Kunde denkt, dass er wollen sollte. Der Kunde hat nicht Recht, ich habe nicht Recht, Zoe hat Recht. Es geht darum, eine Person da draußen , damit der Kunde und ich über Zoe sprechen können, und es wird etwas weniger leidenschaftlich. Ich mag kein Grün oder ich mag kein Lila. Nun, was gefällt Zoe? Sie können Diskussionen eines Drittanbieters über diese andere Person führen, und es wird etwas weniger. Sie sind als Designer etwas weniger verletzt, weil Sie über diese andere Person sprechen, die praktisch ist. Es ermöglicht Ihnen aber auch, Entscheidungen über die Arten von Schriftarten, Arten von Farben und die Art und Weise zu treffen, wie ihre Website oder App erstellt wird, weil sie mit dem Produkt etwas vertraut ist , aber genießt es wirklich, Zeit dem nächsten Kauf nachzudenken. Wir müssen sicherstellen, dass es viele Details zu diesem Produkt gibt. Die Idee hier ist , nicht die schnellste Bestell-App der Welt zu sein , denn das ist nicht das, was unsere Person will. Unsere Person verbringt gerne Zeit damit, darüber nachzudenken. Es wird vielleicht ein gewisses Potenzial geben, dies im Vergleich dazu, einige Vergleiche. Diese Dinge haben wirklich formuliert, was ich hier entwerfen werde , und es sind nur ein paar Sätze. Andernfalls entwerfe ich entweder für den Kunden, was er will, und er ist kein Benutzer. Sie sind der Kunde für Sie, aber nicht der Kunde für diese App oder Website, die Sie erstellen. Oder ich entwerfe für mich selbst. Oder am Ende, der schlechteste Ort ist das Entwerfen für alle, jede Bedürfnisgruppe da draußen. Für jedermann zu gestalten ist für niemanden entwerfen. Sie enden mit dieser Website oder einer App, die für niemanden wirklich etwas tut, [LACHEN] geschweige denn für eine Gruppe. Das ist was für eine Persona. Es gibt dir Empathie für den Kunden, für Dinge, die du, grüner Tee, ich nicht einmal grünen Tee mag. [GELÄCHTER] Unsere Persona lässt mich verstehen, was ist mit Zoe an grünem Tee interessiert sein könnte und mir erlauben, ihr Design, ihr Aussehen und Gefühl und Flow basierend auf ihren Wünschen und Bedürfnissen zu entwickeln ihr Design, ihr Aussehen und Gefühl und . Das ist die Kurzversion von Persona. Sie können in viel mehr Tiefe gehen. Das ist ein Ratschlag. Ich werde Ihnen während dieses Kurses meinen Rat geben , wenn es Dinge gibt, die Sie mögen, habe ich verstanden, [GELÄCHTER] hat er das erklärt. Machen Sie es sich eine kleine Notiz in Ihrem Notizbuch und sagen Sie, ich werde das nach diesem Video oder nach diesem Kurs recherchieren . Personas ist eines dieser Dinge, bei denen es viel mehr gibt als das, worin ich Erfahrung habe, und ich kann in einem dieser kurzen Videos kommunizieren Erfahren Sie also mehr über Personas. Aber das ist die Kurzversion. Lassen Sie uns als Nächstes über Aufgabenflüsse sprechen. Dies ist die Aufgabe, zu der wir gebeten wurden zu entwerfen. Als Designer wurden Sie gebeten einem Unternehmen zu geben, für wen es ist. Dies ist es, was wir in Adobe XD produzieren oder mocken müssen, wenn wir eine Homepage/Marketing-Seite benötigen. Wir brauchen unsere Produktdetailseite über grünen Tee. Wir benötigen eine Checkout-Seite und eine Auftragsbestätigung. Dies ist der Aufgabenablauf. Ein Aufgabenablauf ist ziemlich linear. Andernfalls, wenn Sie sich nicht auf eine Sache geeinigt haben , für die Sie entwerfen, entweder von Ihrem Produktmanager oder Ihrem Chef oder vom Kunden zu Ihnen geleitet werden , für die Sie entwerfen, entweder von Ihrem Produktmanager oder Ihrem Chef oder vom Kunden zu Ihnen geleitet oder Ihrem Chef , erstellen Sie am Ende viel zu viel. Sie können am Ende die Seite mit den Allgemeinen Geschäftsbedingungen entwerfen, die für das, was wir jetzt brauchen, und sich an Personen vom Typ Zoe oder Zoe testen lassen, nicht nützlich ist. Am Ende nützlich, aber es ist nicht sinnvoll dies in den Händen von Kunden testen zu lassen. Wir haben einen vereinbarten Aufgabenablauf, und das ist es für diesen Kurs. Nun ist der Aufgabenablauf ein Begriff, sich für diesen linearen Schritt-für-Schritt-Ansatz gewöhnen kann. Schauen wir uns einen anderen Begriff an, den Benutzerfluss. Aufgabenablauf im Vergleich zum Benutzerfluss. Dies ist ein wirklich guter Artikel. Danke, Erika Harano. Sieh es dir an. In der unteren Ecke wird dort ein Link auf dem Bildschirm angezeigt . Warum entwickeln wir in diesem speziellen Kurs keinen Benutzerfluss ? Es ist interessant. Nun, es ist nützlich, den Unterschied zwischen Aufgabenflüssen und Benutzerflows zu kennen . Dieser hat ein wirklich gutes Beispiel für diesen Aufgabenablauf. Ein Pfannkuchenrezept finden. Du gehst auf die Homepage, auf der du nach Pfannkuchen suchst. In den Suchergebnissen finden sie etwas für eine Super-Bananen-Pfannkuchen-Rezeptseite. Das ist ein Aufgabenablauf, den wir darauf entwerfen können. Aber ein Benutzerfluss ist das Gleiche. Gleicher Anfang, dasselbe Ende. Aber schauen wir uns dieses Besondere hier an. Dies ist ein Benutzerfluss. Es hat die gleichen Elemente. Du beginnst auf der Homepage, sie gehen zu den Suchergebnissen, sie finden das Superbananen-Rezept. Aber dieser ursprüngliche Aufgabenablauf vernachlässigt alle anderen Pfade, auf die der Benutzer möglicherweise zugreifen kann. Nehmen wir an, er muss hier ans Ende kommen. Kannst du dieses Flussdiagramm sehen? Kann ich es vergrößern? Das kann ich. Homepage, und in unserem Aufgabenablauf gehen wir davon aus, dass sie die Suchergebnisse verwenden werden. Aber Sie können sehen, dass es diese Entscheidung gibt. Die kleinen Icons könnt ihr hier sehen. Dies sind Entscheidungsknoten. Dies sind Interaktionen mit den Websites. Dies sind verschiedene Seiten, auf denen sie gelandet sind. Homepage, haben sie tatsächlich die Suchleiste benutzt? Möglicherweise finden Sie durch Testen dieser sehr wenigen Leute, die tatsächlich die Suchleiste verwenden. Sie landen hier unten. Nein, wenn sie diese Suchkategorien verwenden, können Sie am Ende viel mehr Zeit damit verbringen eine sehr klare Kategoriedurchsuchoption aufzubauen. Oder alternativ könnte es das Gegenteil sein. Sie könnten diese erstaunliche Navigations-Drop-Extravaganz eines Dropdown-Menüs erstellen Navigations-Drop-Extravaganz . Niemand benutzt es. Jeder benutzt die Suche oder es ist eine Mischung aus beidem. Dafür sind diese Benutzerflüsse da, um Sackgassen zu finden. Sie nehmen das vielleicht an, aber die Leute versuchen etwas anderes zu finden , dass es nicht da ist. Dort kann so etwas wie dieser Benutzerfluss am Anfang gut sein, wenn Sie einen Job ausarbeiten. Sie sind immer noch an der richtigen Stelle und entwerfen immer noch nicht die Seite mit den Allgemeinen Geschäftsbedingungen, die für die App oder Website, die Sie zu diesem Zeitpunkt ausführen, wahrscheinlich nicht wichtig ist. [GELÄCHTER] Sie finden es vielleicht sehr wichtig. In dieser Anfangsphase ist es jedoch eine größere Aufgabe, einen Benutzerfluss zu erledigen, anstatt nur einen Aufgabenablauf. Aber wir halten diesen Kurs prägnant und machen einen kleinen Teil des Flusses. Aufgabenablauf ist Schritt für Schritt ziemlich linear, und ein Benutzerfluss ist oft nichtlineare Entscheidungsstruktur und es ist eine vollständigere Testoption um an Benutzertests zu gehen. Komplexer. Einfacher. Es hängt von dem Job ab, um den Sie gebeten wurden. In unserem Fall ist es dieser Job. Wir können diese vier Seiten gestalten. Ich habe das ganz einfach gehalten , um es diesem Kurs einfach zu machen. aber können Sie mit dem Brief viel näher eingehen Vor allem aber können Sie mit dem Brief viel näher eingehen. Möglicherweise erhalten Sie Jobs , die keine Unterweisung haben. Hey, ich will eine Website. Das könnte dein Brief sein. erhalten Sie solche, die sehr detailliert sind. Sie könnten durch ein größeres Unternehmen kommen, in dem es ein Team von Mitarbeitern gab, UX-Forscher. Möglicherweise haben Sie Teamleiter und Produktmanager und, ich weiß nicht, VPs und alle, die an einem Projekt arbeiten, und Sie erhalten ein ziemlich detailliertes Projekt. Für mich arbeite ich oft mit kleinen Produkten, kleinen Kunden, und oft bekomme ich die keine kurze Option oder sehr begrenzt. Ich weiß es nicht. Siehst du es hier drin, dass ich mit einer Person , einem kurzen und einem Aufgabenablauf weiß, , einem kurzen und einem Aufgabenablauf weiß, was ich jetzt tun muss. Ein Großteil der harten Arbeit ist erledigt. Obwohl es ziemlich einfach ist, auf den Bildschirm zu schauen, ist sehr klar, was der Kunde bekommen wird und was ich liefern muss. Wenn Sie dies nicht tun und neu darin sind, ist es schwer zu tun, wenn Sie neu sind, aber Sie müssen darüber nachdenken, sich an den Kunden oder Ihren Chef zurückzudrängen , was ist das, wer ist die Person? Welche Seiten entwerfe ich eigentlich? Ist es ein Benutzerfluss, Aufgabenablauf? Wie sieht es aus? Das andere letzte, was hier vernachlässigt wird, sind Dinge wie Markenwerte und Leitbilder. Wir wissen nicht viel über Scotts Green Tea. Wir wissen nicht, dreht sich alles um Effizienz? Dient ihr Roboter ihnen? Oder geht es um den Landwirt zurück und der Landwirt erhält die höheren Preise, aber der Landwirt erhält einen fairen Lohn? Das Personal ist super wichtig. Finden Sie heraus, wenn Sie für ein größeres Unternehmen arbeiten, werden sie ein Leitbild und Werte, Richtlinien und viele Dokumentationen haben , um Ihnen ein Gefühl für das Geschäft zu vermitteln. Für ein kleineres Unternehmen wird es viel schwieriger. Es wird wahrscheinlich nur ein Gespräch mit dem Besitzer darüber sein , was er tun möchte, was er zu tun versucht und auf diese Weise ein bisschen Verständnis zu bekommen . Für mich als reiferer UX-Designer, alte [LACHEN], werde ich auf all diese Dinge zurückdrängen, weil ich weiß, dass mein Leben wirklich schwer ist, wenn ich mir nicht wirklich sicher bin, für wen er entwirft. Wenn mir wirklich klar ist, wer der Zielmarkt ist, wer die Persona ist und was ich tun soll, kann ich dieses Zeug klar ausschlagen, ich kann sehr schnell testen und ein tolles liefern produkt. All meine Probleme während meiner gesamten Karriere entweder als Grafikdesigner, Motion Graphics Artist oder Fotoretoucher oder Webdesigner, all diese Dinge, die ich getan habe, Die meisten Probleme ergeben sich aus unklaren Erwartungen, entweder durch einen kurzen. Das liegt hauptsächlich daran, dass ich gerne Angst habe. [GELÄCHTER] Es wird gut zurückdrängen. Du bist, kannst du diesen Job machen? Das bist du, okay. Du gehst los und dann merkst du, dass du nicht genug Informationen darüber hast. Wenn Sie mehr Erfahrung mit UX Design haben, gibt es ein großes Loch in meinem Verständnis und gehen Sie früh und schnell zum Kunden zurück , damit es nicht der Tag ist, bevor es geliefert werden soll. aber beginnen Sie die Gespräche mit solchen Dingen wie Slips, Personas und Aufgabenflüssen. Wow, das war lang und ein bisschen langatmig. Fange an mir zu zeigen: „[LACHEN] Es ist wie auf die Knöpfe zu klicken, Dan.“ Das machen wir. Machen wir das als Nächstes? Ich denke, wir könnten zumindest sehr bald sein. [GELÄCHTER] Nächstes Video. 7. Kursprojekt 01 – Erstelle deinen eigenen Kurzbrief: Hallo allerseits. Es ist Klassenprojektzeit. Denke nicht über diese Hausaufgaben nach. Es ist wie Hausaufgaben, aber es ist eine Möglichkeit für dich, in diesem Kurs zu folgen, nicht nur blind zu folgen und Videos anzusehen, die dich dazu bringen, Dinge zu tun. Was ich getan habe, ist, dass ich dafür sorge , dass jeder ein bisschen einzigartig ist. In deinen Übungsdateien wirst du sehen, dass jetzt nicht viel drin ist , weil ich den Kurs baue, aber sie werden so etwas sein, das als Klassenprojekte bezeichnet wird. Öffne das und es wird ungefähr so aussehen. Es wird Ihnen sagen, was Sie für dieses spezielle Klassenprojekt tun müssen . Das ist ziemlich einfach. Es generiert Ihren eigenen Brief und Ihre eigene Persona. Ich habe eine Website erstellt. Nun, das Team „Bring Your Own Laptop“ hat eine Website für Sie erstellt. Es heißt randomprojectgenerator.com. Geh dorthin und generiere deinen Brief. Im Grunde möchte ich, dass Sie, sobald Sie hier sind , zu dem Adobe XD steht , Ihren Namen eingeben. Verwenden Sie Ihren Nachnamen, den Namen Ihres Freundes, Namen Ihres Haustieres, um Ihrem Unternehmen einen eindeutigen Namen zu geben. Melde dich bei mir an. Scott ist mein Nachname, das werde ich verwenden und geben Sie dann Ihren Standort ein. Ich lebe in Limerick und dann haben wir auf „Projekt generieren“ geklickt. Das ist das Produkt, das Sie verkaufen werden. Wir sind im Thema Lebensmittellieferung. In diesem Fall ist es Scotts Käse. Du hast im letzten Video gesehen, das ich gemacht habe, ich habe das schon gemacht und bin mit Scotts grünem Tee gelandet . Das war's. Deiner wird anders sein. Es wird eindeutig sein, mit Ausnahme des Namens und des Ortes, an dem das Geschäft gehalten wird. Es ist in Ihrer Nähe, weil Sie wissen, wie die Gegend unterstützen und aussehen wird. Aber hier drüben wird das alles anders sein. Wenn du so bist, mache ich keinen Käse, du kannst „Wiederholen“ drücken, aber nur einmal. Du entscheidest dich vielleicht für Kartoffelchips, das ist der, den ich will. Nicht mehr. Du weißt, dass ich durchgehe und einfach weiter auf „Wiederholen“ klicke und einen finde, benutze den ersten oder zweiten. Triff es nicht beim dritten Mal. Es wird Ärger geben. Sobald Sie Ihren Brief haben, ist es wirklich praktisch wenn Sie etwas bekommen, bei dem Sie sich nicht sicher sind. Wenn du so magst, habe ich noch nie Kartoffelchip in meinem Leben gegessen, das ist ein großartiges Produkt, mit dem du arbeiten kannst, weil du Sebastian wirklich verstehen musst und wie er in seinen späten 20ern ist und finde heraus, was er als Freiberufler mag. Sobald Sie Ihren Brief erhalten haben, machen Sie entweder einen Screenshot oder klicken Sie auf „'Als PNG herunterladen“, und damit werden Sie mit diesem Kurs zusammenarbeiten . Wir werden das gleiche Zeug bauen, aber was ich nicht machen möchte, ist, dass alle genauso aussehen wie ich mit grünem Tee. Wir werden alle weiterverfolgen. Sie werden Bilder, Schriftarten und Farben auswählen , die sich von meinen unterscheiden, weil ich möchte, dass Sie am Ende etwas Großartiges für Ihr Portfolio erstellen . Das ist nur so, dass wir, wenn Sie Hausaufgaben einreichen, nicht alle genau dasselbe tun. Es ist ein bisschen Kreativität dort. Es heißt, mach das. Es heißt, geben Sie Ihren Namen und Ihren Standort ein, speichern Sie den Brief auf Ihrem Computer und die Ergebnisse. Es wird für all diese Ergebnisse geben. Dieser ist, laden Sie einfach Ihr JPEG oder Ihren PNG-Screenshot in die Aufgaben oder die Projekte oder den Kommentarbereich dieser Website hoch. Das ist alles was du tun musst, sonst nichts. Wir sehen uns im nächsten Video. Holen Sie sich Ihren Brief, seien Sie begeistert von Ihrem Käse oder was auch immer es sein mag. Wir sehen uns im nächsten Video. 8. Was ist Lo Lo vs. High Fidelity in Adobe XD: Hi, allerseits. In diesem Video werden wir über LoFi versus HiFi oder, auch bekannt, Wireframes im Vergleich zu High-Fidelity oder hübschen Versionen sprechen. einem Wireframe beginnen wir in diesem Kurs und wo Sie als Designer anfangen sollten. Es könnte ein paar Minuten dauern, um das zu verspotten. Einige einfache Boxen und ich kann es in die Hände von jemandem bekommen, um die Leistungsfähigkeit des UX-Designs, eines MVP, des Minimum Viable Products sehr schnell zu testen und zu iterieren des Minimum Viable Products und es vor Ihnen testen zu lassen verbringe ewig damit, all das Zeug zu tun, wo du einen halben Tag damit verbringst, [LACHEN] zu kernen oder Bilder zu führen oder zu wählen. Das wird mir keinen erfahreneren Test geben. Diese Version gibt mir kein besseres und schnelleres Testergebnis von meinem Benutzer als dies tun wird. Dies, super schnell und einfach, nimmt Anpassungen vor, während sie dort sitzen. Es nimmt auch viel aus , wenn Sie Ihre ersten Konzepte ausführen, so etwas an den Kunden übergeben , sie können es verwenden, sie können es testen, aber sie kommen nicht seltsam zurück Dinge wie „Hey, das ist die falsche Schrift“, zu „Ich weiß nicht wo die Farbe ist“, denn zu Beginn des sicherzustellen, dass denn zu Beginn des Prozesses ist es nicht unser Ziel, die Farben nicht auszuwählen, ist es, die Funktionalitäten richtig. Lasst uns den Kern bekommen, bevor wir Zeit für Führung und Kerning aufwenden. Farben, die sie nicht oder mögen, Sie können sehen, dass Text entfernt worden wäre. Dies ist meine Marketingbotschaft , damit wir nicht auf „Oh, das können wir nicht sagen“ oder „wir würden es gerne etwas anderes nennen“ eintauchen „Oh, das können wir nicht sagen“ oder . Wir erhalten gerade die Funktionalität dieses Jobs , der ein Aufgabenablauf ist und der Aufgabenablauf sehr einfach ist. Wir machen nur diese vier Dinge. Sobald wir die Mechanik richtig gemacht haben , können wir Zeit verbringen. Es ist immer noch wichtig, aber am Anfang ist es nicht wichtig . Überspringen Sie den Wireframing-Teil des Prozesses auf eigene Gefahr. Nun, das ist das Drahtgitter, das ich gemacht habe. Sieht schick aus abgerundete Ecken [GELÄCHTER] Versuche und bleib weg. Langweiliger Schaum, langweilige Farben. Schalten Sie es auf Schwarz und Weiß, keine abgerundeten Ecken. Dies ist nicht der einzige Blick. Werfen wir einen Blick darauf. Es liegt an Ihnen herauszufinden, was der Job erfordert. Wird es super einfach oder wird es ein bisschen weiter fortgeschritten sein? Hält immer noch das Design fern. Aber man kann sagen, dass dieser viel mehr Zeit damit verbringt , dieses Ding gut aussehen zu lassen. Nicht alle Wireframes sind gleich erstellt. Ich bin dabei, es schnell zu erledigen sei denn, es geht in mein Portfolio. Dann lasse ich das Drahtgitter hübsch aussehen und kaufe hübsch Ich meine etwas mehr wie dieses, wo ein bisschen mehr Design hineinsteckt, viel mehr Zeit mit Leading und Kerning, aber es ist ein Portfolio-Stück. Behalte das einfach im Hinterkopf. Wireframes oder Low-Fidelity, High Fidelity, und hier unten ist dies meine High Fidelity oder gut aussehende Version oder HiFi-Vision. Das ist es, was wir in der Klasse machen. Es wird Spaß machen. [GELÄCHTER] Hier ist eine lustige Übung. Wie auch immer, das war's. LoFi, HiFi. Lasst uns zum nächsten Video gehen. 9. Kunstbilder und wie weit meine Website oder App in Adobe XD sein: Hey allerseits. In diesem Video werden wir vier weiße Rechtecke zeichnen, es wird aufregend. Wir werden untersuchen, was Zeichenflächen sind. Wir sprechen über das erste Design eines mobilen Tablets oder Desktops und einige grundlegende Navigationsverknüpfungen um Sie in Schwung zu bringen, aber machen wir einige Boxen. Um loszulegen, öffnen Sie Adobe XD, und wir beginnen entweder mit einer neuen Datei , die Ihnen nur eine generische Startdatei gibt, oder Sie können aus einer der Voreinstellungen hier drüben auswählen . Ich zeig es dir einfach. Ich klicke auf „Neue Datei“ und es ist standardmäßig auf das, was du willst. Es wird sagen: „Hey, du hast eine Seite, die eine Website-Größe hat“, und du würdest vielleicht sagen : „Das ist nicht das, was ich will.“ Schließen Sie die Datei, und was wir tun, ist aus den Voreinstellungen auszuwählen. Mobile Sachen, Webkram, Social-Media-Größen, viel Design wird in Adobe XD erledigt anstatt vielleicht etwas wie Illustrator, weil sich die Leute daran gewöhnen. Es geht ziemlich schnell. Oft haben Sie viele Ihrer Farben und Assets bereits in Adobe XD, also machen die Leute viele Social-Media-Sachen, Designarbeit in XD. Daran ist nichts falsch, und offensichtlich haben Sie eine benutzerdefinierte Größe, die Sie eingeben können. Jetzt fange ich mit dem Handy für diesen Drahtrahmen an, und hier bei dir. Ich fange mit dem iPhone 8 an; diese SE-Größe, weil es im Moment nur eine wirklich generische Größe ist. In Zukunft sehen Sie einige dieser großen oder dünneren Größen vielleicht und es könnte ein iPhone 50 geben. Google einfach, was ist die gebräuchlichste Telefongröße und beginne damit zu arbeiten. Dieser hier ist gut für Apple- und Android-Größen, also fange ich mit dem iPhone 8 an. Was wir hier tun können, ist, dass wir oben auf den Namen klicken können. Klicken wir aus, klicken Sie wieder auf. Siehst du diese Anpassung hier drüben? Es ist kontextuell sensibel, was bedeutet, dass es sich je nachdem, was Sie ausgewählt haben, ändert. Wenn Sie die Kunsttafel wechseln müssen, klicken Sie darauf. Man kann hier sagen, dass ich es tatsächlich brauche, um diese neue Größe zu sein , die 400 Pixel breit ist, etwas breiter. Ich mache das rückgängig, es ist nicht das, was ich will. Rückgängig ist „Bearbeiten“. Ich werde Command Z auf einem Mac verwenden, Control Z für den Rest dieses Kurses auf einem PC , aber Sie kennen wahrscheinlich Rückgängig. Die andere Sache, die Sie tun können, ist, dass Sie Ihre eigene Größe zeichnen können. Du kommst hier rein, es ist der falsche. Du kannst darauf klicken; klicke auf den Namen, klicke auf deiner Tastatur auf „Löschen“ und du gehst zu dieser generischen weißen Matrix; kein Land Ding, und du kannst hier rüber gehen. Dies ist dein Kunstbrett-Werkzeug. Ihr Artboard Tool; klicken Sie darauf und wir erhalten alle diese Standardeinstellungen. Wieder hier drüben sind sie alle so angelegt. Es gibt Uhren in ihren sozialen Medien, aber sagen wir, wir wollen zurück zum iPhone 8 SE. Los geht's. Das sind Standardeinstellungen, Sie können sie einfach herausziehen. Möglicherweise entwerfen etwas, das herausgezogen werden muss . Sie können diese Dinge einfach anklicken und ziehen, wie Sie möchten. Klicken Sie oben auf die Namen und Sie können sie löschen. Aus irgendeinem Grund öffnet sich meins nicht ganz breit genug. Jetzt nur noch eine Notiz zur Auswahl der Größe, wählen Sie generisch aus oder wählen Sie aus, was Ihr Kunde hat. Wenn Ihr Kunde dieses Ding testen wird und er oder sie eine bestimmte Telefongröße hat, können Sie feststellen, dass er ein iPhone 13 hat. Entwerfen Sie diese Größe, weil sie sie einfach verwenden können . Später, wenn es um die Programmierung geht und Ihr Entwickler es mit Ihrer Hilfe mit einem ansprechenden Design erstellt, passt es sich tatsächlich an verschiedene Telefongrößen an. Sie müssen zunächst eine Größe auswählen, und wenn es in die Entwicklung geht, passt sie sich an verschiedene Telefongrößen an. Was wir jetzt tun wollen, ist, dass wir es umbenennen möchten. Was wir tun können, ist, wo iPhone 8 steht oder was auch immer Sie darüber haben, doppelklicken Sie darauf und lassen Sie uns zu diesem wechseln. Dies wird meine Homepage/Marketing-Seite sein. Ich gehe auf meine Tastatur damit wir unsere Zeichenflächen benennen können. Artboards sind nur ein weiteres Wort, um unsere Seite zu sagen. Jetzt kannst du sie hier sehen. Wenn du nicht kannst, bist du vielleicht bei diesem Ding , oder jenem Ding, also werden wir hier auf dieser Ebenenoption sein und es zeigt mir meine verschiedenen Zeichenflächen. Jetzt erstellen wir vier Seiten. Bevor wir weitermachen, möchte ich meine Seite durchmischen. Wir werden nicht früh auf zu viele Abkürzungen eingehen, aber es gibt einige wichtige. Wenn Sie die Leertaste gedrückt , erhalten Sie diese kleine Hand, klicken und halten und ziehen die Maus. Halten Sie „Leertaste“ gedrückt, klicken, halten und ziehen Sie, weil ich oben drauf klicken möchte. Ich habe auf die ganze Zeichenfläche geklickt. Ich gehe auf einen Mac, Command C, Command V; kopiere und füge ein. Auf einem PC ist es Control C, Control V. Doppelklicken Sie darauf, und ich fülle meinen verschiedenen Aufgabenablauf aus. Sie können den Aufgabenablauf überprüfen, er befindet sich in unseren Übungsdateien hier. Wir bauen dieses : Homepage, Produktdetails, Kasse und Bestätigung. Der nächste wird Produktdetails heißen . Kopieren Sie Einfügen. [GELÄCHTER] Wenn Sie einmal mit Ihrem Zeichenflächenwerkzeug klicken einmal mit Ihrem Zeichenflächenwerkzeug es einfach dorthin geworfen, wo es sich anfühlt, wird es einfach dorthin geworfen, wo es sich anfühlt, also drücke ich auf meiner Tastatur „Löschen“. Leertaste, [nicht hörbar]. Doppelklicken Sie hier drüben. Das heißt, ich kann mich nicht erinnern. [GELÄCHTER] Lass mich nachsehen, und dann das letzte. Stecken wir auf zu viele Abkürzungen? Oder mach noch eine kleine Abkürzung. Zwei früher im Kurs Standby. Wenn Ihr Zeichenflächenwerkzeug ausgewählt ist, kann ich es wie ein Objekt wie ein Quadrat ziehen . Ich mache es rückgängig , um es zurück zu bewegen. Ich kann meine Wahltaste auf einem Mac, die Alt-Taste auf einem PC gedrückt halten und einfach eine andere Version davon ziehen . Du kannst sehen, ob ich dem nahe komme, es gibt etwas von der Magie von XD. Sieh dir das an. Du schaffst es in die Nähe hier. Es heißt: „Möchten Sie sich anstellen und möchten Sie im gleichen Abstand sein?“ Du sagst „Ja“, der gleiche Abstand. [GELÄCHTER] Ich finde es aufregend. Unser letzter heißt Confirmation. Habe ich das geschrieben, richtig? Ich habe nicht [GELÄCHTER]. Ich bin gleich wieder da. Ich bin zurück, ich kann nicht buchstabieren. [GELÄCHTER] Wenn Sie einen meiner anderen Kurse absolviert haben, wissen Sie das bereits, aber es ist eine Bestätigung. Da gehst du. Wir haben unsere vier Zeichenflächen. Sie passen nicht ganz rein. Meine Leertasten-Technik; denken Sie daran, „Leertaste“ gedrückt zu halten, klicken und ziehen Sie. Verkleinern ist eine weitere Abkürzung, die letzte, die ich verspreche. Halten Sie die Befehlstaste auf einem Mac gedrückt, Strg-Taste auf einem PC und drücken Minus auf Ihrer Tastatur, um auszugehen. Sie können wahrscheinlich raten, wie man reingeht, das ist Plus. Halten Sie „Command“ auf dem Mac gedrückt, „Steuern“ auf einem PC und drücken Sie Plus oder Minus. Es gibt Smart Boards. Jetzt konzentrieren wir uns auf Mobilgeräte. Es gibt keinen Grund, warum Sie sich jetzt Ihr Zeichenflächen-Tool nicht schnappen konnten und sagen, dass ich meine Tablet-Größe herausfinden werde und ich das iPad Pro verwende. Ich fange damit an, ich arbeite am iPad. Du könntest entscheiden, dass ich das hier runterschiebe. Denken Sie daran, nimm den Namen und ziehe ihn. Klicke und bewege das Ding herum , und ich könnte das Gleiche tun. Ich kann eine Homepage, Produktdetails, Checkout-Bestätigung kopieren und einfügen und erstellen eine Homepage, Produktdetails, und mit dem Erstellen des Tablets und dann die Desktop-Version beginnen . In diesem Kurs werden wir eine Desktop-Version erstellen, und es wird wahrscheinlich erwartet, dass Sie je nach Art eine Tablet- und Desktop-Version für Ihr Mockup erstellen. Wenn es eine App für ein Telefon ist, dann nein. Sie benötigen keine Desktop-Version. Was wir hier machen, ist eine mobile Website, keine App. Es muss ein Tablet und eine Desktop-Version geben, da wir möchten, dass unsere Kunden unseren Käse oder grünen Tee entweder von ihrem Computer, ihrem Telefon oder ihrem Tablet bestellen können unseren Käse oder grünen Tee entweder von ihrem Computer, ihrem Telefon oder ihrem Tablet bestellen oder grünen Tee entweder von ihrem Computer, ihrem Telefon oder ihrem Tablet aber jetzt bleiben wir einfach beim Handy. Nun, nur kurz, wir verwenden mobiles erstes Design. Wir nennen es zuerst mobil weil wir dieses mobile Design zuerst entwerfen und uns bemühen werden, dieses mobile Design und es später für Tablet und Desktop anzupassen. Wir werden es gut für diese machen, aber wir entwerfen zuerst Mobilgeräte weil wir wissen, dass durch Benutzerrecherche eine gute Vermutung dass die meisten Leute über ihr Telefon bestellen werden . Dafür entwerfen wir zuerst. Wenn Sie eine Desktop-App entwerfen und wissen, dass Personen zuerst über den Desktop auf Ihre Website oder dieses Produkt zugreifen , führen Sie zuerst ein Desktop-Design durch. Ich lege das in der Desktop-Version aus. Wenn ich Desktop sage, meine ich diese hier; Webdesktop. Wenn Sie sich nicht sicher sind , wofür Sie entwerfen sollen, wäre es wirklich üblich, dies hier zu tun; 1366, aber auch Google. Was ist derzeit die gebräuchlichste Desktop-Größe? Google wird Ihnen sagen, dass Sie dafür entwerfen können. Das Letzte, was wir tun werden, ist es zu nennen, sonst werden wir unbenannt haben. Mann, du wirst am Ende eine Menge Untitel haben. Mach dir keine Sorgen. Wir werden es benennen indem wir oben darauf doppelklicken. Wir geben ihm einen Namen, ich nenne das hier. Ich nenne es nicht Checkout, ich nenne es Scott für den Kundennamen. Scott Tea ist unser Kundenname. So nenne ich es. Du kannst es so nennen, wie du willst außer dass du es Final nennst. [GELÄCHTER] Final V1, V2, abgeschlossen. Du hast es schon früher gemacht [GELÄCHTER]. Gib ihm etwas Nettes und Iteratives. Anstatt es so zu nennen, nenne ich dies meinen Checkout Taskflow, weil wir darum gebeten wurden und es V1 oder A1 oder was auch immer Sie verwenden möchten. Wenn wir wesentliche Änderungen vornehmen, können wir es in V2 ändern und es einfach so aktualisieren. Nennen Sie es nicht Final. Lasst uns „Save“ drücken und wir sind weg. Das wird es sein. Ich werde keine richtigen Hausaufgaben machen. Ich möchte nur, dass du vier Seiten zeichnest. Ich werde es nicht überprüfen, aber nenne es mit dem Namen, den du vom Zufallsprojektgenerator hast. Nennen Sie es und halten Sie Ihre vier Seiten für das nächste Video bereit. Überspringen Sie nicht die Hausaufgaben, so werden Sie sich am Ende länger an dieses Zeug erinnern . Wir sehen uns im nächsten Video. 10. Arbeiten mit Schrift in XD-Wireframes: Hallo mein Freund. Wenn Sie dachten, dass vier weiße Rechtecke aufregend wären, warten Sie auf fünf Tick-Bits. [GELÄCHTER] Wir werden uns die Grundlagen des Typs ansehen. Wir werden nicht ins Unkraut geraten. Alles, was damit zu tun hat, dieses eine Video einzugeben. Wir werden genug kriegen, um uns in Schwung zu bringen. Eine Menge Dinge, die ich nicht einmal erklären werde, weil es darum geht, wie man bootet und unterstreicht, klicke auf den Unterstreichungsknopf. Das wird die seltsamen Dinge für Adobe XD geben. Beachten Sie auch, dass wir mit ihnen ins Unkraut geraten werden. Wenn ich Unkraut sage, gehe später im Kurs auf die Details des Typs ein. gibt es ein weiteres Video namens Font and Später im Kurs gibt es ein weiteres Video namens Font and Text Level 2 , in dem wir etwas detaillierter eingehen. Ich möchte uns nur schnell in Schwung bringen und ja, lasst uns in die Einführung in den Text in diesem Video eingehen. Das Typ-Tool, es ist dieses hier, sieht aus wie ein Kapital T. Das wussten Sie. Verknüpfungen in diesem Kurs können Sie sehen, ob Sie den Mauszeiger über eines dieser Tools bewegen, diese und oft lernen Sie die Verknüpfung. Dieses T, das Sie in den Klammern dort sehen können, ist für das Typ-Werkzeug. V ist wirklich üblich, bringt Sie hier wieder zum Auswahlwerkzeug. Denn select beginnt mit V. Aber einige von ihnen sind ein bisschen mehr Alpha-Rechteck. Weißt du, das wird Kreis sein, nein, es wird Ellipse sein, E für Ellipse. T für das Typenwerkzeug. Es gibt zwei Möglichkeiten Textfelder einzufügen. Klicken Sie einmal und Sie erhalten eine Box, die für immer weitergeht. Wenn Sie zum Typenwerkzeug zurückkehren und herausklicken und ein Feld hier nach unten ziehen und wenn Sie auf das Feld klicken und ziehen, hat es eine sogenannte feste Breite und bedeutet, dass es beim Tippen kaputt geht und gehe zur nächsten Zeile runter. Gut für Absatztext. Viel Kopie, und das ist gut für generische Sachen, Buttons und Buttons [LACHEN]. Wir machen viele Knöpfe. Du kannst sie wechseln. Sie müssen zuerst das Kästchen auswählen also greifen Sie auf Ihr Auswahlwerkzeug, klicken Sie einmal auf das Kästchen, und Sie können sehen, dass Sie jetzt die automatische Breite haben. Wenn ich jetzt anfange, es einzutippen, wird es ewig weitergehen. Gleiche gilt für das hier drüben. Wählen Sie es mit Ihrem Auswahlwerkzeug aus. Klicken Sie auf diesen Kerl und sagen Sie jetzt, dass Sie automatisch feste Höhe oder automatische Höhe haben, tut mir leid. Es bedeutet, dass es bis zum Ende kommt und dann durchbricht. Das sind die beiden. Was wir jetzt brauchen, ist, dass wir ein paar Dinge brauchen. Ich klicke auf „Löschen“. Ich hole mir mein T für mein Typ-Tool klicke dann einmal. Wir werden unser Platzhalter-Logo einsetzen, also haben wir Scott. Eigentlich mache ich Hauptstädte, Scott grüner Tee, also tippe deine Version ein. Was wir tun werden, ist mein Abschnitts-Tool zu greifen und es hierher zu verschieben. Wenn Sie entwerfen, insbesondere wenn das Unternehmen neu ist, haben sie möglicherweise kein Logo. Tippen Sie es einfach ein, haben Sie nur eine Textversion. Versuchen Sie zu diesem Zeitpunkt nicht halb, es zu entwerfen. Die andere Sache ist, wenn das Unternehmen bereits ein Logo hat, versuchen Sie einfach, eine Schwarz-Weiß-Version davon zu verwenden, damit Sie zu diesem Zeitpunkt keine Farbe einführen. Wireframes müssen einfach zum Testen sein, schnell, keine Farbe, und wenn man davon spricht, du darfst auch keine Schriftarten auswählen. Keine Schriften? Aber ich bin jetzt nicht bereit zu lügen, ich möchte Schriften machen. Sie können später Schriften erstellen, wenn wir unsere High-Fidelity-Version machen, über die wir später sprechen werden. Aber in diesem Stadium möchten Sie jedes Design herausnehmen. Es geht um Funktionen zum Testen Selbst wenn Sie Brush Script wirklich mögen, dürfen Sie es hier nicht verwenden, Sie müssen etwas Einfaches auswählen. In Bezug auf einfach ist meine Standardeinstellung auf Helvetica Neue, weil ich auf einem Mac bin. Aber so etwas wie wenn Sie sich nicht sicher sind was gut aussieht, weil Arial, ich mag Helvetica nicht einmal. Erzähl es niemandem. Ich glaube, ich habe eine Designersünde begangen, aber Helvetica ist langweilig. Roboto, ich weiß, dass es nicht so viel ist [LACHEN]. Weniger langweilig, aber es ist nur eine wirklich gute Schriftart , die für Wireframes verwendet werden kann, für alles, für jede Textkopie. Es ist klar, es ist sehr zugänglich, es ist kostenlos, wenn Sie es jetzt nicht auf Ihrem Computer haben, können Sie es herunterladen. Es ist der neue Arial, ich weiß nicht, mir gefällt es besser. Andere gute sind Open Sans ist eine wirklich gängige generische Schriftart. Öffnen Sie Sans, Source Sans, Source Sans Pro. All dies kann online gefunden werden. Ich bin mir ziemlich sicher, dass sie alle kostenlos sind, du kannst sie von irgendwoher herunterladen. Was Sie nicht tun möchten, ist, wenn Sie damit beginnen , Ihre Wireframes zu testen, was am Anfang sehr schnell funktioniert , ist, dass Sie es nicht wollen, besonders wenn Sie einen Kunden haben und sie sind , oh, es ist nicht die Unternehmensschrift oder hey, wir können das nicht verwenden oder wenn Sie den Schriftarten zu diesem Zeitpunkt Charakter hinzugefügt haben , können Sie in Gesprächen mit dem Kunden darüber enden , welche Arten von Schriftarten, das ist nicht das Richtige, und es wird dir Zeit nehmen, schnell zu sein. Halte es einfach. Wählen Sie nur eine Schriftart aus, Sie haben ein Schriftlimit. Du kannst mit dem Weißen herumspielen. Das hat mit hier unten zu tun, also halb fett, fett schwarz. Deshalb mag ich Roboto. Roboto. Werfen wir einen Blick darauf. Roboto ist wirklich praktisch für, es hat viele davon und Sie können auch noch mehr zu Roboto bringen. Open Sans ist auch ziemlich anständig. In Bezug auf Kursivschrift, dünner und wählen Sie einige Medien. [GELÄCHTER] Ich habe gesagt , wähle hier keine Schriftarten aus. Ich suche verschiedene Schriftarten und ihre unterschiedlichen Gewichte. Jedenfalls. Setze deinen Titel an die Spitze. Ich wähle Roboto für meinen aus. Du wählst aus, was du willst. Ich habe einmal geklickt und das habe ich bekommen. Ich werde hier noch ein bisschen Text hinzufügen und es zu einer festen Breite machen da dies meine Marketingbotschaft sein wird und ich möchte, dass sie in diesem Bereich sitzt. Ich tippe ein, das ist mein Marketing. Es erinnert sich an die letzte Schriftart, die Sie verwendet haben , also muss ich dies ändern. Dies ist meine Marketingbotschaft. Ich wähle den gesamten Text aus und ziehe ein Feld darum. Ich gehe zu Roboto und werde nicht fett werden. Ich gehe einfach auf Medium. Ich sage immer wieder feste Breite. Es heißt Autohöhe. Dies ist diejenige, die als feste Größe bezeichnet wird. Adobe nennt es in verschiedenen Programmen gerne anders. Der zweite in, die automatische Höhe, ich werde hier nicht alle Dinge wie Schriftgrößen richtig abdecken . Du weißt, wie man die Schriftgröße auswählt, ich wähle 48 aus. Das ist zu groß [LACHEN]. Ich zentriere es und arbeite dich durch. Kleine Icons geben es weg. Dieser hier ist der Abstand zwischen Buchstaben. Wenn ich es bis zu 20 öffne, kann man sehen, wie sich das Leerzeichen zwischen den Buchstaben öffnet, ich werde es rückgängig machen. Dies ist Ihr Vorsprung oder der Zeilenabstand. Im Moment werde ich es ein bisschen öffnen. Dies ist das Leerzeichen nach Absätzen. Wir werden später darüber reden. Sie können diese anklicken, es ist furchtbar schwer. Unterstreichen. [GELÄCHTER]. Die einzige Sache Sie hier auswählen , ist , dass Sie sie nicht stylen sollen. Obwohl ich ein bisschen gegangen bin und gemacht habe, wählst du Größen denn dies ist meine Hauptbotschaft des Marketings. Dieses möchte ich vielleicht etwas kleiner sein. Wir gehen auf 16 runter. Ich werde es mutig machen. Ich treffe jetzt Entscheidungen darüber, wie groß das sein sollte. Dies hängt von der Lesbarkeit ab, wie einfach es zu lesen ist, vielleicht Probleme mit der Barrierefreiheit. Ich werde während dieses Kurses Barrierefreiheit sagen. Wir behandeln es nicht sehr detailliert, aber es stellt sicher, dass die Leute es tatsächlich lesen können. Andere Buttons sind groß genug. Ist diese Marketingbotschaft in diesem Fall groß genug? Ist es total, aber ist es groß genug um meine Marketingbotschaft zu vermitteln? Jetzt können Sie viel Zeit damit verbringen, dies zu entwerfen, aber was passiert, wenn ich herauszoomen? Wenn Sie auf diese Weise entwerfen, werden Sie am Ende Schriftgrößen in dieser Größe auswählen . Was Sie vielleicht denken, dass es läuft, ich klicke darauf, ich werde zu 100 Prozent gehen. Perfekt. Dies hängt davon ab , wo es angezeigt wird. Wenn ich hier mein Handy abhole, kannst du mich nicht sehen, aber ich habe mein Handy, ich nehme es ab lege es jetzt von meinen Monitoren ein und es ist ungefähr doppelt so groß. Ich weiß, ob ich mein Telefon weiter daneben halte und kommando minus oder kontrolliere minus. Das ist ungefähr richtig. Wenn ich jetzt Designentscheidungen treffe , ist das groß genug? Wenn ich bei 75 Prozent bin, weiß ich, dass ich nah dran bin. Ihre wird anders sein, Ihre könnten bei 100 Prozent liegen. Möglicherweise müssen Sie viel kleiner sein. Es hängt von Ihren Einstellungen auf Ihrem Monitor ab. Was aber wirklich stimmt, ist, dass Sie auf dem Gerät testen sollten . Wir werden das auch in diesem Kurs machen , nicht gerade, aber ich zeige Ihnen, wie Sie dies auf Ihren Handys veröffentlichen können . Man kann wirklich gute Entscheidungen treffen. Wir werden einfach hier in den Ballpark gehen. Ein paar andere Dinge, um uns in Schwung zu bringen , ist, wenn ich Text kopiere und einfüge, also wähle ich ihn mit meinem Auswahlwerkzeug auf einem Mac-Befehl C, Befehl V oder Steuerung C aus, steuere V auf einem PC, du wirst feststellen, dass es wirklich nichts getan hat. Es gibt zwei Versionen davon, da gibt es Scott Grüntee, da ist Scott Grüntee, aber sie sind übereinander, nur damit du es weißt. Es bringt sie nicht zur Seite. Dieser hier wird mein Produktshot genannt. Ich werde hier oben ein Bild machen. Wir verwenden vorerst Text als Platzhalter . Bewegen Sie das nach unten. Sie werden auch feststellen, dass dies zentriert ist, weil wir das früher gemacht haben. Linksbündig zentriert. Sie werden feststellen, dass in XD, wenn ich etwas mit meinem Auswahlwerkzeug ziehe, sehen Sie, schauen Sie sich das an, es wirklich in der Mitte der Seite oder doppelt in der Mitte der Seite sein möchte . Super handlich. Das lege ich da hin. Jetzt möchte ich hier unten für Schaltflächen schreiben, anstatt denselben Trick zu kopieren und einzufügen , wir getan haben , um uns daran zu erinnern, dies zu duplizieren. Wer erinnert sich, was es war? Das stimmt. Sie halten die Wahltaste auf einem Mac gedrückt, Alt-Taste auf einem PC, wenn Sie etwas ziehen. Sie können es in derselben Instanz duplizieren wie das Verschieben. Dieser wird mein „ Jetzt kaufen“ sein. Ich werde das duplizieren. Dieser wird mein „Mehr erfahren“ -Button sein. Alles klar, das wird es vorerst sein. Andere interessante Dinge, die für Adobe XD ziemlich spezifisch sind . Ich zoome hinein. Schauen wir uns hier oben grüner Tee an. Du hast diesen kleinen weißen Punkt unten für einen festen Punkt, ich nenne es immer wieder feste Breite. Es heißt Autohöhe, nicht wahr? Feld mit automatischer Höhe. Denken Sie an den, der in die nächste Zeile einbricht. Sie haben nicht die gleichen Kontrollen, irgendwie. Dies hat vier weiße Punkte, damit Sie es erweitern können. Dieser, weil wir einmal geklickt haben und als Auto-Breite bezeichnet wird , hat einen Punkt und du meinst: Oh, was macht es? Macht ein paar Dinge, es ist ein seltsamer Typ. Zoomen Sie hinein. Ich kann es nach unten und nach oben ziehen und es ändert es. Interessant, anstatt dies zu benutzen, könntest du einfach gehen, da gehst du. Die andere Sache, die es tut, ist, anstatt darauf zu klicken, schauen Sie sich das an. Wenn ich einfach da rüberziehe. Siehst du das Symbol ändert sich? Zu weit, richtig, der magische Fleck. Du kannst es tatsächlich drehen. Du kannst all diese Dinge hier drüben machen. Du kannst einfach sagen, ich brauche es um 45 Grad und tippe es ein. Oder du schwebst einfach da oben. Das ist es, was es tut. Sie können es hier unten machen, wählen Sie diese aus. Wenn ich den Boden ziehe, macht es nicht die Größe, aber es macht die Drehung. Los geht's. Alles klar. Ich habe versprochen, nicht in das Unkraut zu kommen und ich habe ein bisschen im Unkraut geraten, aber los geht's. In Ordnung, das war's für SMS. Lass uns ins nächste Video gehen. 11. Rectangles, Kreise, Buttons und rundungen Eicken in Adobe XD: Hallo, willkommen zurück. Du bist immer noch hier, was ein gutes Zeichen ist. In diesem Video werden wir uns das Zeichnen von Rechtecken ansehen. Wir werden den Rändern abgerundete Ecken hinzufügen, Ellipsen zeichnen und einige der Verknüpfungen werden hier ebenfalls zur Navigation eingeworfen. Überspringen Sie nicht, wenn Sie glauben, dass Sie ein Rechteck mit den besten von ihnen zeichnen können, und es gibt ein paar Navigationsverknüpfungen , die ich Ihnen durchgehend zeigen werde. Lasst uns reinspringen. Um ein Rechteck zu zeichnen, ist es nicht überraschend, dass Sie das Rechteckwerkzeug drücken und es dann einfach herausziehen. Wenn Sie ein Drahtgitter machen, werden Sie die Bilder oft nicht wirklich platzieren. Ich lege nur einen Platzhalter für die Bilder ein. In diesem Fall wird es eine Kiste sein. Es wird uns zur Ebenenreihenfolge bringen , weil ich eine Box gezeichnet habe und standardmäßig alle Felder eine weiße Füllung und diesen grauen Rand haben . Sie können die Füllung ausschalten, um den Text zu sehen, aber was wir lernen möchten, ist wie man mit der Ebenenreihenfolge spielt. Hier greife ich mein Auswahlwerkzeug und möchte es hinter den Text verschieben. Es gibt ungefähr tausend Möglichkeiten, dies zu tun. Ich zeige dir die gängigen Wege. Wissen Sie nur, dass ich Ihnen während dieses Kurses entweder den am besten geeigneten auf Ihrem Niveau oder den gebräuchlichsten Weg geben werde. Es wird vier oder fünf [LACHEN] andere Möglichkeiten Dinge in den Splits von Software zu tun. Wenn du auf andere Weise entdeckst und sagst : „Warum hat Dan es mir nicht so gezeigt?“ Mein schlimmes. [GELÄCHTER] Ich werde versuchen, Ihnen den besten Weg und/oder die Art und Weise zu geben, wie es auf dieser Ebene des Kurses angemessen ist , und wir werden weiter fortgeschritten werden. Ich möchte das nach hinten verschieben. Am einfachsten ist es wahrscheinlich, mit der rechten Maustaste darauf zu klicken und zu sagen: An Zurück senden, und es steckt hinter diesem Text. Ich zeige dir ein paar andere Wege. Bringen Sie uns einfach zum Arbeiten und machen Sachen in XD, also mache ich es rückgängig. Was Sie auch tun können, ist dies der lange Formatweg. Hier oben kann ich zum Objekt gehen, denke ich ist es, und dann zu Arrangieren gehen und es zurückschicken. Es ist das Gleiche, es macht den gleichen Job. Der andere Weg ist, dass ich rückgängig machen werde ist hier drüben in meinem Ebenenbedienfeld. Sie können sehen, dass es meine Homepage gibt, und das ist die Seite, an der ich hier arbeite. Sie können sehen, dass es ein Rechteck gibt, und es befindet sich oben auf meiner Produktaufnahme. Wenn ich unter meinem Produktfoto auf Halten und Ziehen klicke , bist du es schon? Schau dir das an, es ist darunter wie Photoshop funktioniert. Die Art, wie ich immer benutze, ist eine Abkürzung. Machen wir das rückgängig, wähle ich es aus und du kannst die Verknüpfungen erkennen. Wenn ich mit der rechten Maustaste klicke, siehst du es zurück. Da ist er da. Alles, was du oft benutzt, wirst du es kennenlernen. Ich benutze das Ausblenden nie genug , um zu wissen, dass die Abkürzung ist. Ich muss mit der rechten Maustaste darauf klicken. Aber ich benutze ständig „An Zurück senden“ und „An Front senden“. In meinem Fall ist diese Hieroglyphen hier Shift Command und die eckige Klammer, und es ist die eckige Klammer mit Ihrer P-Taste. Auf einem PC ist es die eckige Klammer Control Shift. Das mache ich [NOISE]. Machen wir das rückgängig. Befehl Umschalt eckige Klammer. Vorwärts zurück, vorwärts zurück, vorwärts zurück. Ich benutze diesen quadratischen Schlüssel. [NOISE] Viele Möglichkeiten, das Gleiche zu tun. Bringen wir das da rein. Lasst uns das kriegen. Sie können die Dinge offiziell ausrichten, aber können Sie sehen, dass es wirklich nur in der Mitte sein will . So ist es wirklich praktisch. Aber du kannst sie richtig ausrichten, also wählst du beide aus und sagst hier drüben: Mitte ausrichten“, „Auf diese Weise ausrichten“. [GELÄCHTER] Es funktioniert nicht, wenn es schon da ist. Du siehst, dass ich diese Typen im Zentrum ausrichten kann. liegt an dir, aber du wirst feststellen, dass es in Adobe XD ziemlich süß ist. Es will einfach nur die Mitte von allem finden , ohne zu fragen. Nächster Schritt, Abgerundete Ecken. Ich verwende mein Auswahlwerkzeug und klicke auf dieses Feld. Möglicherweise müssen Sie hineinzoomen da wir diese nicht sehen können. Wenn du weit rauszoomst, diese kleinen Kreise, sind sie immer noch da. [GELÄCHTER] Sie werden schwieriger wenn es ein wirklich kleines Objekt auf der Seite ist. Ich zoome genug hinein , um diese Dinge zu sehen. Wenn ich auf „Halten“ klicke und sie nach rechts abgerundete Ecken ziehe , schau dir das an. Du kannst dich entscheiden. Sie können sie manuell eingeben, also mache ich das rückgängig. Wo ist es? [GELÄCHTER] Siehst du was ich da gemacht habe? Ich habe das gezogen und gesehen wo es sich im Eigenschaftenbedienfeld befand. Da ist es. [GELÄCHTER] Wenn Sie es brauchen, um genau zu sein verwenden Sie 15, Sie können es einfach eingeben, „Enter“, [NOISE] drücken und es wird 15 für alle sein. Es ist gut, wenn Sie sie in verschiedenen Dokumenten abgleichen möchten . Eine andere Sache, die Sie tun können, nur weil es interessant ist, wenn Sie die Wahltaste auf einem Mac gedrückt halten, Alt-Taste auf einem PC und auf einen von ihnen klicken und ziehen können, und Sie können einen von ihnen gleichzeitig klicken und ziehen. [NOISE] Ich kann dieses und dieses entscheiden. Sieh dir das an. [GELÄCHTER] Ich setze sie alle auf Null zurück. Sie können hier sehen, es ist in anders unterteilt, so dass einer auf 29 eingestellt ist. Lasst es uns hierher verschieben, damit wir es gut bearbeiten können. Sieh dir das an. Wenn ich das ziehe, [NOISE] macht es alle von ihnen. Halten Sie die Wahltaste auf einem Mac gedrückt, Alt-Taste auf einem PC. Kannst du sehen, dass es das nur beeinflusst? Es geht oben links, oben rechts, unten rechts, [LACHEN] unten links. Das schaffe ich. Das war's. Setze es zurück. Ich gehe zu allen zurück und sage, dass ihr alle bei Null seid. Vielen Dank. Will ich abgerundete Ecken auf der Bühne? Ich will ein bisschen. [NOISE] Nur ein kleiner Hinweis da. Ich möchte zwei davon für die Schaltflächen, also anstatt ein Rechteck zu zeichnen und danach fünf einzugeben, und danach fünf einzugeben, werde ich die Wahltaste gedrückt halten, die Alt-Taste auf einem PC, nur damit wir konsequent sind. Siehst du, selbst wenn ich die Größe mit meinem Auswahlwerkzeug ändere und nur eine der Ecken ziehe, bleibt es immer noch an diesen fünf. Es skaliert damit nicht. Ich mache viele meiner süßen Duplikationsfähigkeiten. Sind sie in diesem Fall im Zentrum? Wahrscheinlich. Lass uns nachsehen. Vielleicht nicht. Da gehst du. [GELÄCHTER] Abgerundete Ecken. Schauen wir uns den letzten an, den Kreis, der nicht als Kreis bezeichnet wird . Es nennt sich Ellipse. Ich wähle das alles mit meinem Auswahlwerkzeug und bewege dich einfach nach unten, also habe ich ein bisschen Platz. Ich hole mir das Ellipsenwerkzeug E für Ellipse. Es muss mir einen Punkt bringen, an dem du ein Oval oder eine Ellipse bekommst, wenn ich klicke und ziehe . Wenn Sie möchten, dass es ein perfekter Kreis ist, halten Sie während des Ziehens die Umschalttaste gedrückt, und er sperrt die Höhe und Breite ein. Das ist das Gleiche für das Rechteckwerkzeug. Sie für das Rechteckwerkzeug Umschalttaste gedrückt, perfektes Quadrat. [NOISE] Ich habe einen perfekten Kreis. Ich brauche es, um dorthin zu ziehen. Ich möchte, dass es ungefähr dort ist. Ich will ein kleines Plus-Symbol drin. Wir werden kein Plus ziehen. Wir geben einfach ein Plus ein, also geben Sie Tool ein, plus. Das ist [LACHEN] eindeutig ein Gleichheitszeichen. Ich wähle ein passendes Gewicht dafür aus. Da sind wir los. In Bezug auf die Größe kannst du vielleicht den Boden ziehen. Es scheint seltsam zu sein, aber du benutzt tatsächlich dieses kleine Plus-Ding, den kleinen weißen Punkt, ziemlich viel, also denke ich, dass das ein gutes Gewicht ist, [NOISE] dann geh dorthin. Ein weiterer guter Punkt ist, weil es ziemlich glücklich ist, du sagst: „Hör auf, an allem zu schnappen“. Sie können es in die Nähe bringen und es dann mit Ihrem Auswahlwerkzeug verwenden. Benutze einfach deine Pfeiltasten. Unten auf deiner Tastatur hast du oben nach unten, links-rechts, einfach nach oben, links rechts und schaffst es nah genug. Zoomen Sie den ganzen Weg nach draußen. Ich wollte keine Abkürzungen machen. Wir werden sie einfach vorstellen. Ich mache dann Lasten, damit du dich an sie erinnerst. Wenn du so sagst: „Mann, der Typ flippt mich mit den Abkürzungen aus“, mach dir keine Sorgen. [GELÄCHTER] Ich sage sie einfach weiter. Irgendwann werden sie in dein Gehirn kommen. Wirklich praktisch, um den ganzen Weg nach draußen zu gehen, es gibt ein paar Abkürzungen. Befehl 1 geht zu100 Prozent. Befehl 2, den ich nie benutze, geht auf 200 Prozent. Befehl 0, halten Sie den Befehl auf einem Mac gedrückt, es ist Control auf einem PC und drücken Sie 0 zeigt Ihnen alles an, was wahrscheinlich das praktischste ist. Befehl 1 und Command 0, ich benutze viel, weil es dich aus einer Normalität herausholt. Wenn Sie hier wirklich tippen und an etwas arbeiten, können Sie Befehl 0 oder Befehl 1 gehen, um zu 100 Prozent oder Befehl 0 zu kommen , um alles zu sehen. Wir werden in diesem Kurs eine relative Organisation haben . Es wäre jedoch sehr üblich [LACHEN] als Designer, alle Sachen überall am Laufen zu haben. Ich kopiere und füge sie ein. Am Ende hast du überall Müll. Wenn ich hier drüben bin, [NOISE] vorausgesetzt, sie sind der falsche Teil, wenn ich Command oder Control auf einem PC 0 drücke, kannst du sehen, dass es mir alles zeigt, und es ist einfach super praktisch. Auf Wiedersehen all diese Zeichenflächen und Befehl 0 nochmal. Da gehst du. Das ist praktisch. Ein bisschen mehr Navigation für dich. Das war's. Wir haben ein paar Rechtecke gezeichnet. Wir haben einen Kreis gezeichnet. Die Aufregung ist vorbei. Lass uns mit dem nächsten Video fortfahren. 12. So verwendest du Farbe in Adobe XD: Hallo allerseits. In diesem Video werden wir uns mit der Verwendung von Farbe in Adobe XD befassen. Wir werden am Ende nur einfache grüne Boxen haben, aber wir werden ein bisschen darüber sprechen, was hier vor sich geht und verschiedene Dinge für Adobe XD in Bezug auf Farbe, wir beginnen mit einer der Verknüpfungen, die ich total habe hab vergessen, es dir im letzten Video zu zeigen. Wir fangen damit an und dann tauchen wir in die Farbe ein. Wir fangen mit nichts über Farbe an. Wir werden eine Abkürzung machen , die ich vorhin vergessen habe. Wir erinnern uns, wenn Sie Command on Mac, Control auf einem PC gedrückt halten und auf „1" tippen, geht es auf 100 Prozent. Du siehst hier oben. Denken Sie an den gleichen Schlüssel in „2", 200 Prozent. Wer erinnert sich, wie wir das Ganze sehen ? Es ist ein Test. Das stimmt. Halten Sie die Befehlstaste auf einem Mac gedrückt, Strg-Taste auf einem PC und drücken Sie „0". Zeigt mir alles. Es gibt eine Sache, die ich nicht mit dir geteilt habe, dass ich Lasten benutze. Ich werde so tun, als hätte ich es bis jetzt verlassen , aber ich habe es einfach vergessen. Ich klicke auf den Namen eines Dokuments klicke dann auf „Command“ oder „Control 3". Das bringt die eine Sache , die Sie ausgewählt haben, in die vollständige Sicht. Das ist nur eine weitere kleine Abkürzung, die ich am Ende benutzen werde und du wirst gehen, wie machst du das? Los geht's, Command oder Control 3. Wir sind drin. Lass uns etwas Farbe hinzufügen. Ich klicke darauf, standardmäßig ist alles weiß mit einem grauen Rand. Zuallererst werde ich Sie davon überzeugen, keine Farben zu verwenden, aber Sie konnten aus dem Intro erkennen , dass wir es am Ende benutzt haben. Wenn Sie es mit Drahtrahmen zu tun haben, möchten Sie auch Dinge wie Farbe aus der Konversation fernhalten . Der Draht ist wie Schriften. Wenn Sie eine Reihe von Farben auswählen, können Sie am Ende keine Diskussionen über die Funktionalität unseres Aufgabenflusses und wie er funktioniert, sondern Leute, die Dinge auswählen wie, hey, das ist das falsche Grün für Ihre Firma oder ich mag kein Rot. Kommuniziert Rot wirklich richtig? Das ist eine Diskussion für später, nach den Drahtrahmen. Halten Sie die Drahtrahmen super einfach. Ich habe es hier ausgewählt, ich klicke darauf. Jetzt hast du wahrscheinlich schon einmal eine davon benutzt. Wenn nicht, haben Sie Ihren Farbton-Schieberegler hier, um Ihre Farbe in den Bereich zu bringen. Nehmen wir an, du willst Blau, du bekommst diesen kleinen Punkt im bläulichen Bereich. Dann klickst du hier rüber. Sie können einmal oder oft klicken Ich klicke einfach und ziehe es herum. Sie können sehen, wie es sich anpasst. Dadurch wird dein Farbton richtig, und dann kannst du in diesem Farbton Dinge wie wirklich gesättigt, superduperblau oder entsättigt auswählen wie wirklich gesättigt, superduperblau , was hier drüben weiß und Variationen von Licht ist , dunkel, gesättigt, nicht gesättigt. Arbeite hier drin, hol dir etwas für dein bestimmtes. Mein Rat ist, dass du Grau benutzen solltest. Grays sind überall hier drüben. Es kann sich auf jedem Farbton-Schieberegler befinden, es spielt keine Rolle, ob Sie ihn den ganzen Weg gezogen haben, und Sie müssen es nicht perfekt machen. Man bringt es gerade dorthin, eigentlich hat es ein bisschen Grün drin. Aber wenn du es vorbeiziehst und ich meine Maustaste gedrückt halte und dort in die Seite knallt, dann lasse ich los, dann ist es völlig entsättigt und es ist ein Grau , das ich hier benutzen kann. Wenn Sie volles Weiß wünschen, klicken Sie auf „Halten“ und ziehen Sie es oben links, bis Sie an der Stelle vorbeigehen, an der Sie sein müssen. Das ist vollweiß das Gleiche mit Schwarz da unten. Eigentlich hat Schwarz zwei Punkte. Wähle eine Farbe aus, nur eine. Versuche nicht mehr als einen zu benutzen. Benutze Grau. Grau ist die offizielle keine Farbe, aber es wäre üblich, nur eine Farbe hinzuzufügen. Es könnte die Markenfarbe sein , an der Sie arbeiten, nur eine. Ich suche mir eine Farbe aus. Ich pflücke Orange. [GELÄCHTER] Es war viel zu lange, Orange zu pflücken. Da gehst du. Das ist die Farbe, die ich wählen werde. [GELÄCHTER] Verbringe keine Ewigkeiten damit Farben zu pflücken. Wir haben unsere Farbe. Die andere Sache ist die Transparenz. So transparent ist es, wie durchsichtig es ist. Wenn Sie es manuell eingeben möchten, können Sie es hier unten tun. Wenn Sie es nicht gewohnt sind, Farbton, Sättigung und Helligkeit zu verwenden , dann ist dies HSB, können Sie den RGB verwenden. Die tatsächliche Farbe ist genau die gleiche. Es ist nichts anderes daran. Es hängt von dem letzten ab, was du gegangen warst. Sie könnten die Hexadezimalzahl verwenden. Wenn Sie ein Webentwickler oder ein Webdesigner sind, kennen Sie diese Farben möglicherweise besser und können damit besser arbeiten, oder Sie kopieren und fügen sie möglicherweise aus einem Handbuch zur Unternehmensspezifikation was auch immer hier unten funktioniert. Sie können Ihre RGB-Werte eingeben. Am Ende schleppe ich das gerade zu diesem Zeitpunkt herum. Wenn es sich um eine Farbe handelt, die Sie wiederverwenden möchten, drücken Sie wahrscheinlich diesen kleinen Plus-Knopf, weil sie dann hier unten bleibt und Sie sie später wiederverwenden können. Die andere ist die Pipette. Verwenden wir das Pipettenwerkzeug richtig. Klicke aus, klicke auf diesen Kerl und du meinst, ich will nicht, dass er weiß ist. Es gibt ein paar Möglichkeiten, das Pipettenwerkzeug zu bekommen. Sie können hier hineingehen, auf diese Version klicken und dann sehen Sie sie hineinzoomt, damit Sie ziemlich genau werden können? Es ist ziemlich einfach, hier ein großes Quadrat zu bekommen, aber du kannst es so machen. Man kann es schließen und tatsächlich geht das einfach geradeaus. Komm zur Verfolgungsjagd, gib mir das Pipettenwerkzeug. Boom. Was Sie im Laufe der Zeit finden könnten, weil ich das rückgängig machen werde, ist das Ich auf Ihrer Tastatur, nicht die Pipette als E-Y-E, der Buchstabe I. Wenn Sie zuerst darauf geklickt haben, muss ich es auswählen, drücken Sie das „I“ -Tool und klicken Sie dann darauf, es ist ziemlich üblich, Dinge zu tun. Viele Möglichkeiten, genau das Gleiche zu tun. Bevor wir gehen, weiß ich nicht, dass XD das wirklich will. [GELÄCHTER] Um dort ein bisschen versteckt zu sein, geht es immer wieder in der Standardeinstellung. Für den Boarder hier können Sie auf genau dieselben Funktionen klicken . Auch hier kannst du sehen, dass es mein wiederverwendbares Ding gibt, Farbe. Ich könnte es grün machen, damit es passt oder ich könnte es wahrscheinlich einfach ausschalten. Wie man die Grenze ausschaltet, kann man ihn völlig unsichtbar machen. diese Weise, wahrscheinlich nicht der beste Weg, besteht darin, die Größe auf Null zu reduzieren. Nein, das ist auch ein schlechter Weg, heben Sie es einfach dort auf. Es hat keine Grenze. Du, ich mache das Gleiche für diesen hier. Wie wähle ich zwei von ihnen gleichzeitig aus? Halten Sie die Umschalttaste gedrückt. Ich habe mein Auswahlwerkzeug, ich habe dich ausgewählt, halte „Umschalt“ gedrückt, klicke auf dieses andere und beide sind ausgewählt. Jetzt kann ich sagen, dass beide keine Grenzen haben. Nett. Wir werden etwas weiter in Striche geraten und wir werden später auf schickere Farbstoffe eingehen , Farbverläufe , und wir werden uns später im Kurs Farbstile und diese Dinge ansehen . Aber im Moment sind das die Farben 101. Benutze keine Farben [LACHEN] vielleicht nur eine, aber lass mich dich nicht mit zwei erwischen. Es wird Ärger geben. Das war's. Wir sehen uns im nächsten Video. 13. Striche und Kopierund Kopierung und fügen das Aussehen in Adobe XD ein.: Hi, allerseits. In diesem Video zeige ich Ihnen, wie Sie Linien erstellen und all die verschiedenen Dinge, die Sie über die Verwendung dieser Grenzen oder Striche oder Linien wissen müssen , auch immer Sie sie nennen möchten. Außerdem zeige ich Ihnen auch, wie Sie alles auf einmal ändern können, denn im Moment alles standardmäßig auf diese weiße Linie mit dem grauen Rand. Ich zeige dir, wie du ein paar coole Abkürzungen machst, um das Aussehen zu kopieren und es hier zu kombinieren. Lasst uns reinspringen. Das Hinzufügen eines Schlaganfalls ist einfach. Nun, im Grunde kommt alles mit einem Schlaganfall. Zeichne ein Rechteck und schau, du bekommst einen Strich um die Außenseite. Um die Größe des Strichs anzupassen, beginnen wir eigentlich mit etwas Einfachem. Gehen wir zurück zu diesem Rechteck , [NOISE] Command 3. Vergrößern Sie das Ding, das Sie ausgewählt haben, sichern Sie es vielleicht auf nur eines zurück. es ausgewählt ist, siehst du, dass ich eine Grenze habe. Schalten Sie es ein. Der Farbrand hier wird normalerweise als Strich bezeichnet , aber ich nenne es einen Strich, weil ich ihn daran kenne. Wir wählen dafür eine Farbe aus, die wir sehen können. Die Größe ist da. Wir können es auf Null ändern oder wir können es aufstoßen. Jetzt kannst du es einfach hier eintippen. Wenn ich 10 Punkte will, kann ich 10 treffen und Enter drücken. Oft ist es praktisch für eines dieser kleinen Felder, die es eingegeben haben, ich kann hier hineinklicken. Du siehst mein kleiner Cursor blinkt, und dann kann ich die Pfeile nach oben und unten benutzen, also um hinzuzufügen. Weil Sie in dieser Entwurfsphase oft nicht wissen, was Sie brauchen. Du weißt, wenn du weißt , dass es später fünf sein muss, großartig. Tippe es ein, aber oft bist du am Anfang so. Da gehst du. Ich benutze zwei. Sie können genauso wie ein weiterer kleiner interessanter Leckerbissen ist, wenn Sie die Umschalttaste gedrückt halten und aufbrauchen, es geht in 10 Stück. Sehen Sie, ob Sie die Umschalttaste gedrückt halten und verwenden Sie den Pfeil nach oben , [NOISE] 32, [NOISE] 42 und [NOISE], der bei allem funktioniert. Wenn ich das habe und ich denke : „Ich möchte nur, dass es etwas größer wird , 16 , wähle meinen Pfeil nach oben, [NOISE] hoch, hoch, hoch, hoch, hoch, hoch, hoch, gedrückt, Shift gedrückt, und ich gehe von 22 zu [NOISE] 32, [NOISE] 42. [NOISE] Das ist in irgendeinem von diesen. Du willst es über ein Pixel verschieben? [RAUSCHEN] Nach oben. [NOISE] In Anspruch nimmt viel Zeit in Anspruch. Umschalttaste gedrückt [NOISE] Bam, bewegt sich über Lasten. es total zerstört. Ich habe keine Ahnung , was das sein soll oder wo es sein soll, aber du bekommst die Idee. unserem Rand/Strich können Sie natürlich Bindestriche machen, also möchte ich fünf [NOISE] -Pixel ablegen, und es ist standardmäßig fünf der Strichstriche und dann eine Lücke von fünf, aber Sie können das anpassen. Sie könnten das als 15 oder nur eine sagen, [LACHEN] fünf. Das sind Striche. Ich gehe auf Null, [NOISE] und eine Lücke von Null. [NOISE] Da gehst du. Fügen Sie Striche hinzu. Fügen wir eine Zeile zur Mitte hinzu. Jetzt werden wir das benutzen, das Linienwerkzeug. Ich klicke darauf und klicke auf „Halten“ und ziehe von dieser Seite. Ich möchte wieder schwarz werden, also klicke ich auf die Farbe. Geh so. Denken Sie daran, ziehen Sie einfach an dieser Ecke vorbei. Dann die Größe, ich werde eins hoch gehen, und das wird meine schwarze Linie sein. Jetzt ist es sehr üblich, Product Shot vielleicht nicht zu schreiben. Ich lösche das und ziehe hier einfach eine Linie durch dieses Feld. Eine Zeile durch eine Box ist geheimer Designercode für Platzhalterbild, das das Bild abrufen wird. Wir zögern, Bilder in diesen Wireframe-Modus zu versetzen. Der Grund, warum wir keine Farben und Schriftarten verwenden möchten , ist, dass wir in einem Gespräch darüber enden , welches Bild wir verwenden sollten. Sind es die richtigen Bildträger? Wir wollen nur ein wirklich raues, sehr schnelles Wireframe machen, um entweder vom Kunden abgemeldet zu werden oder einige Tests mit nur einigen grundlegenden Schnelltests durchzuführen, also legen wir hier ein Platzhalterbild ein. Eine Sache, von der Sie verrückt werden , ist jedes Mal, wenn Sie eine Linie ziehen, können Sie die Standardeinstellungen im Moment nicht ändern. Mann, es bringt mich wegen XD um, aber hey, das haben wir. Sie könnten in Zukunft sehen, ob es eine Möglichkeit gibt, Standardwerte zu ändern, aber im Moment ist der einfache Weg, um abgerundet zu werden , eines von ein paar Dingen zu tun. Eine ist nur zu duplizieren. Sieh dir einfach diese Zeile hier an. Ich könnte es schnappen, duplizieren und ich kann es drehen. Sieh dir diesen kleinen Punkt hier drin an. Wo ist er? Wir gehen da hin. Er tut nichts. Du kannst es rüberziehen und versuchen es auszurichten oder kannst du es hier sehen? Es ist ein Spiegelbild. Es gibt eine reflektierende horizontale und vertikale, und Sie können dies tun, um es zu duplizieren. Ein anderer netter Weg ist etwas namens Kopieren und Einfügen Eigenschaften. Das lösche ich . Diese hier, diese Zeile hier, [NOISE] es hat was ich brauche. Ich kann einfach meine Verknüpfung verwenden, Command C auf einem Mac, Control C auf einem PC, nur normale alte Kopie. Anstatt jedoch nur [NOISE] einzufügen und es dann zu verschieben und umzudrehen, [NOISE] was wir tun werden, ist, dass ich das löschen werde , ist, dass wir es kopiert haben. Toll, auf diese andere Sache zu klicken. Das ist diese, die falsch ist, falsche Größe, falsche Farbe, und es gibt hier eine Option, es heißt „Bearbeiten“, „Darstellung einfügen“. Sie werden diese Verknüpfung irgendwann lernen, und es bedeutet nur, dass Sie Aussehen kopieren und einfügen können. [NOISE] Wir haben es immer noch kopiert. Ich kann auf dich klicken. Wie wähle ich mehr als einen aus? Das stimmt, halten Sie die Umschalttaste gedrückt und klicken Sie auf beide. Dann benutze ich meine süße Verknüpfung auf einem Mac, es ist Command Option V, auf einem PC, es ist Control Alt V, oder du kannst zum Menü „Bearbeiten“ gehen, [NOISE] und schau dir das an. spielt keine Rolle, es wird daran erinnert, dass der Strich schwarz war, und es spielt keine Rolle, ob der Schlaganfall darauf war oder ob er auf den Tasten ist. Sie können eine große Menge Sachen auswählen und dieses Aussehen anwenden. Ergibt das Sinn? [NOISE] Bekomme ich zu früh im Kurs zu viele Details? Oh, naja. Die andere Sache ist, dass wir jetzt hier sind Was Sie also tun können, ist, dass Sie sagen können: „Eigentlich hat mir das gefallen, aber ich habe am Ende Schwarz genommen, weil ich eine Farbe verwenden darf.“ Aber sagen wir, ich habe etwas hier drüben, tippe Werkzeug anders, und es ist eine andere Schriftart. Es ist das, und es ist 10 Punkte, und es ist die falsche Farbe. Du kannst das Gleiche tun. Wählen Sie es aus, gehen Sie zu kopieren, [NOISE] nur normale alte Kopie, und wählen Sie dann diese aus. Sie können zur Bearbeitung gehen oder die Verknüpfung verwenden oder mit der rechten Maustaste darauf klicken. Denken Sie daran, viele Wege zum selben Ort. Sieh dir das an. Es funktioniert sowohl für Schriftarten als auch für Rechtecke, Füllungen, Ränder um die äußeren Schriftarten, das Kopieren und Einfügen des Erscheinungsbildes. Das sind meine Zeilen dort. Ich hab dort ein paar Schläge. Schauen wir uns ein paar andere Striche an. Wir werden das kleine Burger-Menü in die obere rechte Ecke stellen. Ich zoome ein bisschen hinein, [NOISE] damit wir sehen können, was ich mache. [NOISE] Denken Sie daran , dass das Command Plus oder Control Plus auf einem PC ist. Ich schnappe mir mein kleines Linienwerkzeug und zeichne eine Linie, blutig graues Ding [LACHEN], das ein Pixel ist. Es macht nichts aus. Ich komme zurück zu meinem Auswahlwerkzeug und brauche drei davon. Eine Sache, die ich dort gerade beschönigt habe, ist, dass ich das Linienwerkzeug schnappe. Wenn Sie klicken und herausziehen, wird es wahrscheinlich fast dran sein, gerade zu sein. Es ist nicht [LACHEN]. Denken Sie wie zuvor daran, mit dem Rechteckwerkzeug oder dem Ellipsenwerkzeug, wenn ich die Umschalttaste gedrückt halte, versetzt es es in eine perfekte Höhe und Breite. [NOISE] E für das Ellipsenwerkzeug, halten Sie die Umschalttaste gedrückt, perfekte Höhe und Breite. Das gleiche Werkzeug [NOISE] beim Zeichnen einer Linie wird es gerade machen. Lassen Sie uns den ganzen Müll löschen, halten Sie für das Linienwerkzeug [NOISE] und klicken Sie dann auf Halten und ziehen. Wenn ich die Umschalttaste gedrückt halte, sieh zu, schnappen, es will gut laufen. Sobald es in verschiedene Grade einrastet wie anders. Ist es 90 Grad? Fünfundvierzig Grad. Dort, dort, dort, dort, dort. Ich halte die ganze Zeit die Schicht gedrückt. Ich lasse meine Maus nicht los und ich kann etwas klarstellen. Da gehst du. Ich bringe sie in Position. Ich werde duplizieren U sagen. Ich verwende meinen Alt auf einem PC Drag oder Option auf einem PC Drag. Ich mache noch einen. Was Sie bemerken werden, ist, dass Sie alles sehen können, was steht : „Möchten Sie, dass dies genau 11 Pixel sind wie das darüber?“ Ich dachte: „Ja, das tue ich. Gute Arbeit.“ Dies wird mein kleines Burger-Menü oder Nav-Sandwich oder ich weiß nicht, mobiles Navigationssymbol. Wie auch immer du es nennen willst, das sind diese kleinen gestreiften Linien. Es wird mir erlauben, ein paar Dinge zu tun. Zuallererst verwende ich meine Größe in Bezug auf meine Größe. Für mich waren es ungefähr 75 Prozent im Vergleich zu meinem Bildschirm ungefähr die richtige Größe auf meinem Handy. Die meisten Leute nennen es das Burger-Menü. Ich nenne es ein Nav-Sandwich. habe ich vorhin gehört und es blieb bei mir. [GELÄCHTER] Ich bin vielleicht der Einzige, der es ein Nav-Sandwich nennt , aber los geht's. Du betrachtest diese Größe, du sagst : „Dieser Strich ist zu niedrig. Ich kann hierher gehen. Ich gehe zur Strichgröße. Geht das ungefähr richtig? Ja. Es passt zu allem anderen, was ich mache. Vielleicht noch eins hoch. Das ist zu groß, aber denken Sie noch einmal daran, Sie sollten auf Ihrem Telefon testen. Aber ich zoome hinein, Command oder Control 3, um auf dem Ding zu sein, das du ausgewählt hast. Zoomen Sie rechts hinein, aber zu nah. Ich zoome ein bisschen zurück weil ich dir ein paar andere Dinge zeigen möchte. Wir wählen Schwarz und wählen auch diese Typen und diese Optionen hier aus. Das passiert. Wir haben das leider als Erster bezeichnet. Das ist der Standardwert. endet die Linie und stürzt bis zum Ende. Die nächste ist die runde Kappe. Sieh dir das an. Ihre Linie ist so lang, aber sie zirkuliert über das Ende. Du kannst sehen, was los ist. [GELÄCHTER] Es gibt auch das quadratische Ende. Es gibt Zeiten, in denen du sie alle benutzt, hauptsächlich benutze nur die ersten beiden. Ich werde abgerundete Kappen verwenden, weil es hübsch aussieht und es zu meinen abgerundeten Ecken passt. Ich fange an, mich in das hinzufügende Design einzuschleichen bei dem wir es wirklich einfach für unsere Navigation halten sollten . [NOISE] Aber hey, du bist nicht der Boss von mir. Ich bin der Boss und kann mich entscheiden, abgerundete Ecken anzulegen , wenn ich will. Sie können dort sehen, dass es zu dick erscheint, aber gehen wir zurück zu 75, und mein Computer scheint ungefähr die richtige Größe zu haben. Ihre könnten 100 Prozent betragen, also fühlt sich einfach immer noch ein bisschen groß an. Jetzt kannst du sie alle anpassen. [NOISE] Ich kann sie alle auswählen und einfach so etwas gehen. [NOISE] Es gibt keine offizielle Größe, [NOISE], aber Sie könnten die Symbole eines anderen überprüfen , wenn es Ihnen [GELÄCHTER] schwer fällt, drei Linien zu zeichnen , die wie ein echtes normales Navigationsmenü aussehen. Geh und überprüfe online andere Leute, was sie benutzt haben. Eine andere Sache, während wir hier sind, ist, dass ich mich an die Zeilen halte. Die Durchgangslinien sind ziemlich üblich, aber eigentlich wäre es üblich, anstelle dieser Zeilen ein Symbol hier zu setzen. Wir werden später im Kurs Icons machen, aber ich wollte, während wir hier über Zeilen und Platzhalterbilder sprechen , ich habe es gegoogelt, da ist es da. Es wäre üblich, ein Symbol wie dieses zu setzen. Du musst es nicht zeichnen. Ich zeige Ihnen später, wie Sie die meisten davon kostenlos von Orten abholen können, [NOISE], aber Sie könnten diese Zeilen loswerden und das Symbol dort hineinlegen. Das ist alles, was ich über Schlaganfälle sprechen muss. Ja, ich werde diese Texte dazu bringen, übereinstimmen. Ich wähle alle aus, die meine Umschalttaste halten, und sage: „Du, mein Freund, wieder in Schwarz.“ Weil ich das reparieren werde. Eigentlich wähle ich das aus, gehe zurück, kopiere, U Command Option V auf einem Mac, Control Option V auf einem PC. Was ich tatsächlich tun könnte, ist es nach vorne zu bringen. Es gibt viele Möglichkeiten, wie Sie so nutzen , wie Sie möchten. Ich bin ein Shortcut-Nerd, also Befehl Shift eckige Klammern nach vorne. Oh nein. [GELÄCHTER] Der Text steckt dahinter. Du nach vorne. Du dahinter. Da sind wir los. Das ist ein interessanter Punkt. Sagen wir, ich möchte das zurückziehen, ich wollte es dahinter bringen, aber das nicht. Vielleicht hast du es da drin gesehen. Ich kann das auswählen lassen, anstatt mit der rechten Maustaste zu sagen, An den Rücken senden, was hinter allem steckt. Du sagst: „Nein, direkt hinter diesem Kreis.“ [NOISE] Sie können sagen, dass Sie es rückwärts senden. Da gehst du. Wir gehen nur eine Ebene zurück. können Sie ein paar verschiedene Male rückwärts gehen Je nach [NOISE] können Sie ein paar verschiedene Male rückwärts gehen, wo Sie Ihre Layer-Reihenfolge benötigen. Wieder schwarz, [NOISE] und irgendwo so. [NOISE] Das ist es. Lass uns mit dem nächsten Video fortfahren. 14. Kursprojekt 02 – Wireframe: Hallo allerseits, es ist Klassenprojektzeit, eine etwas größere zu tun. Eigentlich bevor du weitermachst, wenn du so bist, mache ich die Hausaufgaben nicht und ich überspringe. Bevor du das tust, bevor ich in mein Spiel komme , warum du deine Hausaufgaben machen solltest, gibt es gegen Ende des Videos tatsächlich einige nützliche Dinge gegen Ende des Videos Wenn du also unartig überspringen willst, aber du kannst nicht bis zum Ende springen weil wir darüber reden, wie ich die Seiten länger mache und Dreiecke und so. Aber für diejenigen unter euch, die denken, mache ich die Hausaufgaben später nach dem Anschauen der Videos, hey, das wirst du nicht, weil niemand es tut, und es ist großartig zu üben was du gelernt hast und es hilft wirklich, es bleibt länger als einen Tag nach diesem Video bei dir. Tun Sie dies und was ich gerne sehen würde , ist Ihr Projekt am Ende davon, was Sie daraus machen, weil wir unseren eigenen Zufallsprojektgenerator verwenden, es wird für Sie einzigartig sein, also das ist mein Spiel. Lasst uns loslegen. Du solltest alles hier drin machen können. Es gibt ein paar Like, das ist nur ein Rechteck mit einer weißen Füllung und einem Blick und nichts Besonderes. Diese Dinge, diese Optionsfelder, sie sind keine Optionsfelder, sie sind nur zwei Kreise. Es muss nicht genau wie meins aussehen, aber die raue Struktur gleich bekommen, denn während dieses Kurses möchte ich Sie auf dieser Reise mitnehmen können, aber ich möchte, dass Sie etwas bauen ist einzigartig für Ihr eigenes Portfolio. Anstatt Scott Green Tea zu machen, verwenden Sie alles , was auf dem Brief steht, den Sie von der randomprojectgenerator.com erhalten haben , falls Sie Smith Honig oder sprudelnder Tee oder was auch immer es sein könnte oder sprudelnder Tee war. Victoria sagte mir, sprudelnder Tee sei cool und hip. Deshalb ist es optional da drin. Ich weiß nicht was das ist, aber ich versuche cool und hip zu sein. Benutze deinen eigenen Namen. Sie können Ihre eigene Farbe auswählen, Sie können Ihre eigene Schriftart auswählen, aber halten Sie sie wirklich einfach und sehen Sie, ob Sie dieses Ding erstellen können. Es gibt vier Seiten. Dies sind Ihre tatsächlichen Anforderungen. Ich möchte, dass du dieses Drahtgitter baust. Wenn Sie es nicht sehen können, können Sie das Video entweder vor einer Sekunde pausieren , dies hier oder in Ihren Übungsdateien, ich habe dort eine PDF-Datei erstellt, von der Sie kopieren können, wenn Sie es nicht ganz können siehe die kleine Version. Es heißt Wireframe-Beispiel, also vier Seiten. Das sind die vier Seiten, Ihre eigene Farbe, Ihre eigene Schriftart. Wenn Sie fertig sind, machen Sie einen Screenshot dessen, was Sie , und laden Sie ihn hier entweder in die Kommentare oder die Aufgaben zu den Projekten je nachdem, wo Sie uns sehen. Wenn du noch nie einen Screenshot gemacht hast, weiß ich auf einem Mac, was es ist. Ich drücke Command Shift 4 und dann kann ich eine Box um diese und auf Ihrem Desktop mit dem Screenshot ziehen und auf Ihrem Desktop mit , den Sie hochladen können. Wenn du auf einem PC bist, bin ich mir nicht sicher. Ich denke, du machst einen Druckbildschirm und fügst ihn dann in etwas ein, aber Google wie man einen Screenshot macht. Sie können ein Foto mit Ihrem Telefon von Ihrem Bildschirm machen, das ist in Ordnung. Tun diese Dinge, es gibt zwei Dinge, die dir vielleicht einen kleinen Schluckauf bescheren könnten, ist wie zeichnet man einen Pfeil? Sie können keine Pfeile in XD zeichnen. Ich schäme mich im Moment zu sagen. Es ist nur das, siehe hier drüben, das Polygonwerkzeug und ich habe ein Dreieck gezeichnet, um das ich gedreht habe. Wie habe ich es gedreht? Du kannst dieses Ding benutzen oder du kannst in den Ecken schweben und es einfach herumziehen und das ist ziemlich gut, was ich wahrscheinlich erwähnen sollte. Sie können einfach mit der Maus um die Kanten herum bewegen und sie drehen oder dort eingeben. Die andere Sache, das wirklich Wichtigste, der Grund, warum Sie sich dieses ganze Video anhören, auch wenn Sie die Hausaufgaben nicht ungezogen machen, ist, dass es hier eine extra lange Seite gibt. Wenn Sie eine Seite haben, die nicht ganz so passt wie meine nicht, können Sie auf den Seitennamen klicken und sie einfach größer ziehen. Dann bekommst du diese gepunktete Linie. Ignoriere das momentan. Bewegen Sie es nicht, Sie können es verschieben, aber bewegen Sie es noch nicht. Wir werden in einem späteren Kurs darüber sprechen, aber Sie können einfach auf den Namen der Seite oder der Kunsttafel klicken und es einfach länger machen, wie Sie es brauchen, und wir zeigen Ihnen, wie Scrollen und Dinge später. Du könntest alles da oben quetschen. Ich weiß nicht warum ich das gemacht habe. Sieh mal, es gibt viel Platz. [GELÄCHTER] Aber das ist es. Das sind deine Hausaufgaben. Nennen wir es nicht Hausaufgaben, lustige Übungen, um Dinge zu üben und zu lernen. Aber wie auch immer, das ist es. Ich sehe dich im nächsten Video, nachdem du das gemacht hast. 15. Kostenlose Icons für Adobe XD und UX/UI-Projekte: Hallo da. In diesem Video werden wir uns ansehen, wo Sie kostenlose Icons für Ihr Wire-Frame-Modell erhalten, wie Sie sie auswählen, Einführung in einige der Lizenzierungen um einige der kostenlosen und in Bezug auf welchem Format sollten Sie Ihre Icons finden. In diesem Fall PNG versus SVGs. Alles klar, lass uns reinspringen. Kostenlose Icons finden. Gerade in dieser Drahtrahmen-Phase wollen wir nicht hier sitzen und unsere eigenen Icons entwerfen , was Sie absolut tun können. Was wir tun wollen, ist los zu gehen und am wenigsten Platzhalter zu bekommen. Es gibt viele Orte , an denen Sie online kostenlose Icons finden können. Ich zeige dir iconfinder.com, ich mag es wirklich. Wenn dies jedoch nicht mehr da ist oder die Qualität nicht Ihren Standards entspricht, können Sie das, was wir hier über die kostenlose Symbolsuche lernen, für jede Website verwenden . In diesem Fall suche ich nach einem Kontosymbol. Ich möchte das kleine Viel-Personen-Ding , auf das Sie klicken, wenn Sie auf Ihre Details eingehen möchten. Zu diesem Zeitpunkt suche ich nach kostenlosen Sachen. Sie haben auch erstaunliche bezahlte Sachen , was sich absolut lohnt. Aber im Moment suche ich kostenlos, weil ich dieses Modell gerade rauskriege. Wonach ich auch als Lizenzierung suche. Dies ist der wichtige Teil. Es gibt kommerzielle Nutzung, etwas, das als Creative Commons-Lizenz bezeichnet wird. Sie müssen überprüfen, was Sie verwenden. In diesem Fall möchte ich nicht nur die kommerzielle Nutzung nutzen da diese kommerzielle Nutzung einen Backlink erfordert. Ich will diejenige, die besagt, dass kein Backlink erforderlich ist. Sie können hier die kommerzielle Nutzung sehen und erfordern keinen Backlink zum ursprünglichen Ersteller. Sagte aber es ist nicht das, wofür ich gerade bereit bin. Ich brauche nur ein paar schnelle Sachen für ein Modell oder zumindest meinen Drahtrahmen. Aber es reduziert das, was verfügbar ist. In diesem Fall gibt es viel für mich, um loszulegen. Etwas, das wie eine Person aussieht , für die ich mich entscheiden werde. Nun, [LACHEN] nur ich und die bearbeitete Notiz, dass ich etwa zwei Minuten lang auf den Bildschirm starrte . Hoffentlich hat der Redakteur diesen [LACHEN] -Abschnitt herausgeschnitten. Ich suche mir sehr schnell einen aus, aber ich habe es nicht getan. Ich habe ewig damit verbracht, einen zu pflücken. Offensichtlich versuchen wir Dinge mit sehr hohem Stil zu vermeiden , denn das wird ein Gespräch darüber beginnen, welche Farben, ist das wirklich das, was wir wollen? Wir wollen etwas Generisches, aber ich wollte, dass es nett wird. Dies bringt uns zu einem der großen Teile. Abgesehen von der Lizenzierung müssen Sie das Formatieren tun. PNG ist etwas, das die Leute schon kennen und lieben, und SVG, die Sie vielleicht schon wissen oder auch nicht. Wir werden uns beide ansehen. Ich werde diese PNG-Größe von 48 Pixeln herunterladen und diese SVG-Version und zeige Ihnen den Unterschied genau dort. Okay, also habe ich die PNG-Version und die SVG-Version heruntergeladen . Wie kriegen wir sie rein? Das ist ein guter Punkt. In XD gibt es den Long-Way-Dateiimport oder die Verknüpfung dort. Du kannst sie finden. Da sind sie da. Sie können mehrere einbeziehen, indem „Umschalt“ gedrückt halten und auf zwei davon klicken. Ich bringe sie beide herein. Da sind sie. Hier sind unsere beiden Kleinen. Was wir jetzt tun wollen, ist, sie sich ein wenig anzusehen. Kommandiere drei, um sie zu zoomen. Dann bin ich wieder dabei , denn das ist ein bisschen nah dran. Du kannst den Unterschied erkennen. PNG schlecht, SVG gut. PNGs sind nicht unbedingt schlecht, ich habe das übertrieben, indem ich einen kleinen heruntergeladen habe, aber es besteht aus diesen kleinen Würfeln, die Pixel genannt während SVG für Scalable Vector Graphic steht. Vielleicht kennst du das Wort Vektor. Das Schöne an Vektor ist wenn ich versuche, ihn zu skalieren, halte „Umschalt“ gedrückt, um den Anteil zu sperren. Ich kann es schön groß machen und es verliert nicht an Qualität. Es ist ein wirklich großes, es könnte so groß sein wie ein Bus, wie ein Berg. In der Dateigröße wird immer noch relativ klein sein und es wird immer noch große scharfe Kanten haben. Während dies, selbst wenn Sie einen größeren herunterladen , gehen wir zurück zur Seite. Ich habe den niedrigen heruntergeladen. Lasst uns das wirklich große herunterladen. Wir schauen uns das mal an. Ich habe gerade die große Version heruntergeladen. Der Unterschied ist, es großartig aussehen wird und ich zeige dir , wie ich Sachen in XD importiere. Es ist der nicht-offizielle Weg. Was ich mache ist, dass ich nicht alle Abkürzungen verwende. Ich bin faul, ich weiß es nicht. Ich ziehe es weiter. Das funktioniert [LACHEN]. Wow es ist groß. Das ist es. Ich habe die wirklich große Version heruntergeladen und du würdest sagen, ja, das ist von guter Qualität. Das Problem ist, dass der Kompromiss die Dateigröße ist. Ich kann das in meinen Übungsakten überprüfen und dort benutzen wir das. Dies sind die beiden PNGs, das ist der kleine und es ist zwei Kilobyte, genau die gleiche Größe wie der SVG. Während die große Version, schauen Sie, wie groß sie ist, sehr groß in Bezug auf Webgrößen. Vielfaches größer als das kleinere PNG. PNG ist nicht in Ordnung, nicht skalierbar. Die andere große Sache, die Sie mit PNG nicht machen können , ist, dass Sie es nicht färben können. Lasst uns wieder hier reingehen. „Command“ oder „Strg+3" [NOISE] zoomen ein wenig heraus. Es scheint seltsam, so mache ich es sowieso. Man zoomt heran, wie es dir gefällt. Das Ding hier kann nicht gefärbt werden. Sie können es in Photoshop aufnehmen und ausmalen. Während Sie darauf klicken und sagen können, ich möchte, dass Sie jede Farbe haben, die ich mag. SVGs sind gut. Stellen Sie sicher, dass Sie die Lizenz haben, sie zu benutzen. keine Angst, für sie zu bezahlen. Ich möchte nicht sagen, dass Sie nicht für sie bezahlen sollten, aber in diesem Stadium bin ich für diesen Drahtrahmen nicht in diesem Stadium, wir verpflichten uns zu keinem von ihnen. Wir brauchen sie hier nur für ein paar grundlegende Tests und für die Genehmigung des Kunden. Das Letzte, was wir in SVG versus PNG-Symbolen einklumpen , ist, dass dies editierbar ist. Dieser hier kann nicht geändert werden. Du kannst es nicht bewegen. Wir machen das in unserem späteren Video in nur einem oder zwei von ihnen. Aber ich möchte es auch hier reinwerfen. Ich habe darauf doppelt geklickt und du kannst es bewegen. Hey, das ist der andere Vorteil für SVGs. Jump Cut. Kommen Sie hierher zurück, weil es noch eine andere wichtige Sache gibt eine andere wichtige Sache für Ihre Icons zu finden, die ich vergessen habe zu erwähnen, als ich hier war. Wir haben das wie ein Kontosymbol gefunden. Nun, oft, jedes Mal, wenn Sie mehr als nur ein Symbol benötigen. Wenn Sie nach kostenlosen Symbolen suchen, schauen Sie sich diese an, bevor Sie sich verpflichten. Auf dieser Website können Sie auf das eigentliche Symbol klicken und darauf zugreifen. Sie können hier unten finden, sehen Sie, es ist Teil eines größeren Rudels. Das Schöne daran ist, dass ich dann suchen kann , weil ich brauche, mag das große Menü nicht, aber den Einkaufswagen, den ich mag. Es gibt eine Alternative für das Konto. Es gibt ein Plus und all die anderen Arten von Symbolen, die ich wahrscheinlich in der gleichen Art benötigen werde . Das ist ziemlich praktisch, wenn Sie sich entscheiden, einen zu finden , der nicht allein ein einsamer Ranger ist. Es muss Teil einer größeren Gruppe sein um Ihnen das Leben zu erleichtern. Aber seien Sie auch darauf vorbereitet , dass es Symbole geben wird, die nicht Teil jedes Pakets sind , das Sie selbst herstellen müssen , und manchmal erstellen Sie einfach das ganze Set neu irgendwann, weil Sie eine Stiländerung wünschen und es nicht genug in diesem Stil gibt oder es außerhalb der Marke ist. [GELÄCHTER] Beginnen Sie mit kostenlosen Icons in dieser Wire-Framing-Phase, aber seien Sie bereit, später Ihre eigenen zu erstellen. Das machen wir auch in diesem Kurs. Ich zeig dir wie. Das ist es für kostenlose Icons. Das Letzte, was ich da reinwerfen möchte , ist, dass sie nicht frei sein müssen. Sie können diese absolut bezahlen besonders wenn Sie in einem Unternehmen arbeiten. Das Geld, das Sie für Icons bezahlen, ist ziemlich niedrig und es unterstützt die Leute dabei. Was ich tendenziell mache, ist, dass ich ein Abonnement für einige Aktienseiten habe. Aktie ist das Zeug, das vorgefertigt ist, das bezahlt wird. Ich zahle ein monatliches Abonnement für zwei Orte, seltsamerweise Adobe Stock und Envato Elements. Beide Orte haben unterschiedliche Geschmacksrichtungen von guten Dingen. Ich kann da reingehen und nachsehen und anstatt weitermachen zu müssen , weil du dir kostenlose Sachen ansiehst und nicht das Icon bekommst, das du wirklich willst. Ich habe Abonnements für diese Websites. Ich zahle monatlich und es bedeutet, dass es mich nicht mehr kostet, eine großartige Reihe von Icons zu bekommen , die vielleicht Sport treiben, die Künstler/Designer, die sie [unhörbar] machen Das ist es für kostenlose Icons. Wir sehen uns im nächsten Video. 16. So findest und verwendest du bestehende UI-Kits in Adobe XD: Hallo da. In diesem Video werden wir uns etwas anschauen, das UI Kits genannt wird. Sie haben andere Namen und ich werde sie in einer Sekunde beschreiben, aber anstatt nach einzelnen Symbolsätzen zu suchen , sollten Sie sich die XD-Dateien vorhandener anderer Personen ansehen XD-Dateien vorhandener anderer Personen , die Sie öffnen und ausleihen können Icons von. Ich habe ein paar hier, die wir uns ansehen werden, und ich zeige Ihnen, worauf Sie achten müssen, wie Sie sie bekommen und wir können sie für unser Projekt verwenden. Der wahrscheinlich einfachste Begriff für Google sind XD UI-Kits. Kits sind das Wort, das wir wollen, das vorgefertigte Kit und es wird Icons enthalten. Aber es wird auch andere Elemente haben , die wir vielleicht brauchen. Werfen wir einen kurzen Blick auf die, die ich heruntergeladen habe. Dieser hier, du kannst sehen, dass es Knöpfe hat , die alle startklar sind. Es gibt ein bisschen zu stilisiert, aber wir könnten diese nachträglich gestalten. Aber es gibt ein großes Kit und diesen einen weiteren Download. Alle möglichen Dinge , die du einfach magst. Ja, ich brauche ein Lade-Ding und ich brauche einen Bildplatzhalter. Das gefällt mir nicht. Ich brauche ein Herz. Da gehst du. Alle Kontrollkästchen, all dies, wohin bist du gegangen, meine Optionsfelder, bei denen du [LACHEN] vielleicht Hilfe brauchst. Es ist schwer zu wissen, wie es genau aussehen sollte. UI-Kits sind ein Wort. Ein anderes Wort, nach dem Sie vielleicht suchen , ist das Aufkleberbogen. Das nennen die Leute es manchmal auch, sie nennen das ein Stickerbogen. Es ist so. Dies ist ein Aufkleberbogen. Überall mögliche Dinge die dir beim Aufbau von Dingen helfen. Ein anderes ist ein Designsystem. Jetzt ist das Designsystem ziemlich groß. Wir werden gegen Ende des Kurses über Designsysteme sprechen . Es ist das, was ein größeres Unternehmen produzieren wird, um zu beschreiben, was baut, wenn es sich um ein riesiges, großes Unternehmen handelt. Aber du kannst diesen Begriff auch verwenden, um Sachen zu finden, auch wenn du einfach nur Icons aus ihm stehlen willst. Steal ist das falsche Wort, angemessen, leihen. Wie dieses hier ist das Google-UI-Kit und Google Android, um spezifisch zu sein. Wenn Sie versuchen, ein Telefon zu verspotten und alle Tasten zu verwenden, die sich natürlich auf einem Telefon befinden, ist es gut, dies zu verwenden, da es so aussieht, anstatt zu kopieren, wie es aussehen könnte in Bezug auf die Benutzeroberfläche können Sie diese Dialoge verwenden, die mit den Schriftarten und der richtigen Positionierung und dem richtigen Styling übereinstimmen. Vergiss, dass ich das Wort Diebstahl gesagt habe, Aneignung ist besser. UI-Kits, Aufkleberbögen , Designsysteme, danach suchen wir. Was wir am Ende bekommen haben ist, ich diese Suche hier gemacht habe und am Ende mit diesen Ergebnissen gelandet bin. Sie können knifflig sein. Warum sind sie knifflig? Kostenlose Sachen online finden und viele Leute tun gute und schlechte Dinge. Manchmal findet man dieses Nugget. Großartig, ich habe diese Seite gefunden. Ich mag XD Guru, sie sind wirklich gut und sie haben kostenlose UI-Kits. Großartig, das wir suchen und es wird wahrscheinlich XD sein, weil es XD Guru heißt. Aber einige der Links funktionieren nicht mehr. Das hier sagt kostenlos, aber ich habe diesen einfach gejagt [LACHEN] und es ist nicht mehr kostenlos, es sind 5 Dollar. Ich denke nicht, dass diese Person es kostenlos verkaufen sollte, sie sagt kostenlos und dann ist es nicht enttäuschend. Außerdem haben sich viele von ihnen für E-Mail-Sachen angemeldet. Das sind Leute, die dafür bezahlt wurden. Das ist es, was du sagst ist, dass es manchmal ein bisschen spammy , wo du einen Download hast und dich einloggen und dich kostenlos anmeldest oder besser gesagt, es ist alles kostenlos, aber du gehst um [LACHEN] viele persönliche Daten einzugeben. Einige von ihnen funktionieren, einige von ihnen nicht. Was ich tendenziell mache, ist Adobe. Ich hab das hier. Das wird sich ändern. Sie scheinen es zu ändern. Sie könnten es aktualisieren. adobe.com/products/xd/Features/UI-Kits.html. Ich werde diesen Link tatsächlich jetzt in den Übungsdateien posten . Ich nenne es XD UI-Kit-Link [LACHEN]. Sucht nach dieser Akte. Vielleicht landet ihr hier und es ist cool, weil es das Kit für Apple hat. Ich habe dir das Kit gezeigt, für das wir haben, sie nennen es Google Material. Google Material ist der Name des gesamten Designsystems für Android-Geräte. Ich bin eine Android-Person, deswegen haben wir diese. Wenn du eine Apple-Person bist, lade das Apple-Kit herunter, du wirst hier einen ähnlichen Stil haben, Dinge werden gut angelegt , die du greifen kannst. Auch hier unten unten gibt es eine Reihe anderer, diese. Die Kits sind nur eine direkte Verbindung. Um Ihre Privatsphäre zu unterschreiben, Sie diese einfach herunter. Ich habe einen von ihnen heruntergeladen. Welches? Ich glaube, ich habe das handgezeichnete UI-Kit in Ihre Übungsdateien heruntergeladen , damit Sie es sich ansehen können. Wo ist es? In unseren Übungsakten. Ich habe diese beiden UI-Kits nur um Ihnen etwas Zeit zu sparen, wenn Sie sich eines ansehen möchten. Aber das ist das Material von Google, denken Sie daran Android, und es gibt die handgezeichnete Benutzeroberfläche. Doppelklicken Sie in einer Datei einfach darauf und öffnen Sie sie, sie werden in Adobe XD geöffnet. Schauen wir uns die andere handgezeichnete an. Das ist es, was das ist. Sieh mal, es ist ein Haufen Icons. Es ist einfach eine gute Möglichkeit, die UI-Kits anderer Leute zu finden. Es ist schon ein XD. Es sind nicht nur Symbole, es können Dinge wie Schaltflächen sein und Sie können Ihr komplettes Drahtmodell mit all diesem Zeug erstellen . Wie zoomt man heraus, um überhaupt zu sehen? Erinnert sich jemand? Du erinnerst dich. Befehlen oder steuern Sie Null. Schau dir das an, es ist ziemlich vollständig und wie benutzt man es dann? Man kopiert es und fügt es ein. Manchmal sind sie vielleicht gruppiert. Wir werden uns die Gruppierung und einige andere Teile in einer Sekunde ansehen. Aber sagen wir mal, du willst das Ding wirklich. Das ist das Icon in der Mitte. Sie können sehen, dass es Teil von all dem ist. Ich kann mit der rechten Maustaste darauf klicken und sagen, lass uns die Gruppierung aufheben. Immer noch gruppiert. [GELÄCHTER] Heben Sie die Gruppierung erneut auf. Jetzt ist alles in Stücke. Ich wähle diese beiden aus, halte die Umschalttaste gedrückt und klicke auf diese beiden. [GELÄCHTER] Ich lasse das da drin , weil das passiert. Sie sind gruppiert und manchmal müssen Sie, um sie auseinander zu ziehen, einige Male die Gruppierung aufheben, sie gedrückter Umschalttaste anklicken und sich ihnen wieder anschließen. Ich wähle beide aus, gruppiere sie erneut und kopiere es. Wechseln Sie zu meinem anderen Projekt und fügen Sie es ein. Da ist es da. Du könntest das anstelle meines kleinen Kreuzes benutzen und ich sage, dass du schwarz bist und ich werde diese Linien loswerden . Da sind wir los. Dauerhafte Soundeffekte. UI-Kits sind praktisch. Baue Sachen schnell mit einem bestimmten Stil, diesem skizzenhaften, handgezeichneten Zeug, ich würde nur ungern den handgezeichneten Stil verwenden. Warum? Weil es zwangsläufig eine Ikone gibt, die ich nicht habe, muss das nicht hier drin reichen und ich muss versuchen, alles handgezeichnet aussehen zu lassen . Am Ende werde ich Ewigkeiten für etwas verbringen , das meiner Benutzererfahrung nicht hilft meiner Benutzererfahrung wenn Leute dies überprüfen und sicherstellen, dass mein Drahtgitter funktioniert. wird ihnen egal sein, dass es handskizzenhaft wrigley ist, aber es wird mir Probleme bereiten, es tatsächlich zu schaffen. Wenn ich das sage, würde ich es wahrscheinlich schon mal gemacht, weil es cool und lückenhaft aussieht. Das ist es. Sie suchen nach UI-Kits, Aufkleberbögen oder Designsystemen speziell für Adobe XD. Öffne sie und fange an, Teile anzueignen. Das ist es. Wir sehen uns im nächsten Video. 17. Gruppen und Probleme, die Icons in Adobe XD bearbeiten: Hi, allerseits. In diesem Video dreht sich alles um die seltsamen Dinge, die in Adobe XD passieren. Das Problem ist, wenn Sie entweder Autodidakt oder dieser Teil des Kurses sind, gibt es einige Dinge, die später sinnvoll sind, wenn wir großartig sind und alles wissen, aber das wird uns sehr früh rausholen. Ich möchte sie jetzt hier beschreiben und wenn du am Ende dieses Videos kommst und du meinst, ich habe es verstanden, aber nicht wirklich, das ist absichtlich, stelle es früh vor und wir werden es immer wieder behandeln während des gesamten Kurses und am Ende wird es super einfach sein. Wichtigste zuerst, ist dieses kleine Panel hier drüben. Wir haben 1, 2 und 3. Wir werden Plugins ein bisschen abdecken. Wir werden uns ansehen, wie es hier ein kleines bisschen ist , weil es uns einige andere Probleme zeigen wird und dann gibt es dieses Ebenen-Panel, mit dem wir die meiste Zeit verbringen werden. Wir haben eine Bestätigung. Sehen Sie, dies sind Zeichenflächen, AKA-Seiten. Es gibt unser Homepage-Marketing, das mir ganz oben gefällt , und Produktdetails , die mir auch in chronologischer Reihenfolge gefällt. Es gibt kein richtiges Drama, also das sind die Seiten. Was ist das für eine Pasteboard? Es liegt daran, dass du es vielleicht nicht hast. Sieh dir das an. Wenn ich das lösche, gehe ich zurück zu meinen Zeichenflächen. Nun, ich habe nichts ausgewählt. Schau, keine Pasteboard. Wenn ich es rückgängig mache , sehen Sie, wir haben diese Pasteboard. Es ist wie eine eigene Seite, alles hier. Sie werden immer Pasteboard haben. Niemand ist jemals so ordentlich. Die Dinge enden alles auf einer Seite, sogar mit diesen verrückten Arbeiten überall. Wenn du das machst, mach dir keine Sorgen, ich mache es auch. Das ist dieses seltsame Pasteboard Ding. Nichts zu seltsames daran. Es wird komisch, wenn du das machst, halb an, halb weg. Sieh dir das an. Man kann manchmal etwas haben , das drauf ist. Lass es uns hier machen. Kannst du das sehen? Wo ist es hin? Das ist die Pasteboard. Es ist nur dieser Typ. Es heißt, es ist kein Pasteboard, das Ding ist da unten. Er hält sich nur ein bisschen auf der kleinsten winzigen sichtbaren Liste dieser Seite hier an der kleinsten winzigen sichtbaren Liste fest. Das passiert. Manchmal gehst du am Ende, ich arbeite nur an diesem Projekt und das verstehst du. Das ist eines der Probleme. Es ist nicht einmal ein Problem. Es ist gerade jetzt, dass du es weißt und genau das ist das Pasteboard Ding. Das nächste, was ich Ihnen zeigen möchte ist, wenn Sie von einem Dokument in das andere kopieren und einfügen, tatsächlich mache ich das ziemlich oft und Sie sagen, wie springt er zwischen Dokumenten? Auf einem Mac heißt es „Command“ und die Grabstaste oder „Control“ und die Grabstaste. Du meinst, der Aufhänger ist der „Grave“ -Schlüssel. Es ist der „Tilde“ -Schlüssel und du meinst, das ist nicht hilfreicher, es ist dieser Schlüssel hier. Ich denke, es ist das hier, aber sie werden oft damit kombiniert. Ich denke, das ist die „Tilde“ und das ist der „Grave“ -Schlüssel. Ich bin mir nicht sicher, aber das suchst du auf deiner Tastatur. Wenn Sie „Command“ gedrückt halten und auf einem Mac darauf drücken , wechselt es zwischen geöffneten Dokumenten und drücken Sie „Control“ und drücken es auf einem PC und es wird es tun. So wechsle ich schnell zwischen und kopiere und füge sie ein. Wie auch immer, das ist ein bisschen ein Nebenabstand. Kommen wir zurück zur Verrücktheit. Ich muss tauschen. Lassen Sie uns das hier sagen und nehmen wir , Sie möchten dies abrufen und kopieren und einfügen und in Ihrem Dokument verwenden. Du bist großartig, ich werde es mir einfach schnappen und du wirst den kleinen Diamanten in der oberen linken Ecke ignorieren kleinen Diamanten in der oberen linken Ecke weil du so bist, ich weiß nicht was das ist. Das wird Probleme verursachen. Wir werden zu unserem Dokument springen . Ich füge es ein und schaue hier unten, es heißt, wenn Sie Links über Dokumente einfügen , können Sie eine Bibliothek veröffentlichen. Das liegt weit über dem, was wir gerade brauchen. Zu Hardcore, also werden wir es schließen. Wir werden uns später Bibliotheken und Komponenten ansehen. Was Sie wirklich tun müssen, ist, wenn Sie Dinge rüberbringen und diese Warnung erscheint und/oder Sie hier zu dieser kleinen Option gehen , können Sie sehen, dass Bibliotheken stehen? Wenn ich darauf klicke, hast du diese Komponenten hier drin. Wir werden später Komponenten lernen und es wird einfach sein, aber im Moment müssen wir einfach zerlegen, damit wir damit arbeiten können und uns keine Probleme bereiten. Das Problem ist, wenn ich das kopiere und einfüge und zwei davon habe, wenn ich einen aktualisiere, aktualisieren sie beide. Was später cool ist, wenn wir erfahrener sind aber im Moment verursacht es uns nur Probleme. Was wir tun, ist, dass wir Komponenten einbringen, die in unsere Komponentenbibliothek oder in unsere Ebenen gelangen. Schauen wir uns jetzt an, ob ich es auswähle. Siehst du dort, es hat die Diamant-Ikone, es macht ein paar lustige Sachen. Alles, was wir tun müssen, ist mit der rechten Maustaste darauf zu klicken und Gruppierungskomponente aufheben zu sagen, und dann klicken Sie mit der rechten Maustaste und , es gibt noch eine andere, es gibt Komponenten in Komponenten hier. Der Designer, der das andere UI-Kit erstellt hat, hat dies getan. Manchmal müssen Sie weitermachen, bis keine Gruppierungskomponenten aufheben. Jetzt ist es nur ein normaler alter Kreis mit einem Rechteck und wird Ihnen weniger Probleme bereiten. Wenn Sie ignorieren, dass es sich um eine Komponente handelt, wird es wahrscheinlich immer noch funktionieren, aber Sie werden am Ende ein Symbol ändern und jeder wird aktualisiert und es gibt diese Warnung unten dort, also denke ich habe es gesagt das früher im Kurs, weil es beunruhigend sein könnte. Weil ich dich in einer Sekunde dazu bringen werde, ein paar Icons zu erstellen, wirst du auf dieses Problem stoßen. Deshalb habe ich es hier gemacht. Wenn Sie noch nicht verstehen, welche Komponenten es sich handelt, sich keine Sorgen, wir werden diese später im Kurs behandeln . Was ich jetzt machen werde, ist, dass ich es hier unten habe, ich werde sagen, dass ich sie einfach wieder zusammenfasst. Jetzt ist es nur ein dummer alter Schalter. Es macht nichts Ausgefallenes. Ich gebe ihm einen Namen. Hier drüben nenne ich diesen einen Kippschalter und die andere Sache ist, das hängt von Ihrem OCD-Niveau ab. Ich klicke auf mein „Assets“ -Panel und das werden wir später auch behandeln, aber es gibt diese kleinen Komponenten. Wir brauchen sie nicht. Wir haben das in eine eigene kleine Gruppe verwandelt, sie sind jetzt nicht verbunden. Ich weiß, dass sie nicht verbunden sind, weil sich kein kleiner Diamant in der Ecke befindet und wenn ich mit der rechten Maustaste darauf klicke, heißt es nicht die Gruppierungskomponente aufheben, nur normale alte Gruppierung und du kannst all das sehen, Ich habe sie alle mit der „Umschalt“ -Taste ausgewählt und werde dich los. Super ordentlich. Schau , wie ordentlich wir sind. War es hilfreich? Vielleicht war es das nicht. Wenn nicht, mach weiter. Fahren Sie mit dem Kurs fort, Sie lernen später Komponenten und Sie werden wahrscheinlich nicht zu viele Probleme haben, aber das ist das Komponentenproblem, das Sie möglicherweise haben. Sie werden hier so finden, wenn ich dies von der Benutzeroberfläche dieser Person kopiere, wer auch immer das UI-Kit erstellt hat, hat sie sie alle in Komponenten verwandelt? Die Google-Leute haben es getan. Wenn ich es kopiere und einfüge, weiß ich zuallererst, dass es nicht daran liegt den kleinen Diamanten nicht in der Ecke hat und wenn ich ihn hier drüben einfüge, wo ist er, da ist er, lege meinen pasteboard können Sie sehen, dass es nicht auf meinen Komponenten und in meinem Ebenenbedienfeld angezeigt wurde. Es ist nur eine Gruppe, die diesen kleinen Diamanten nicht hat . Ich weiß, dass es eine Gruppe ist. Siehst du das kleine Ordnersymbol? Das ist das Signal, eine Gruppe zu sein. Sie können darauf doppelklicken , um in die Gruppe zu schauen. Es ist eine Gruppe in einer Gruppe und dann gibt es einige Wege , die das ausmachen. Das stimmt. Aber ich weiß, dass es keine Komponente ist. Es wird mir keinen Ärger bereiten. Lassen Sie uns etwas bearbeiten. werde ich dort ignorieren. Ich bringe ein paar Icons ein. Es liegt also an Ihnen, wie Sie sie einbringen, Dateien importieren oder die Verknüpfung verwenden. Ich mache was ich mache und gehe einfach, was wollen wir? In deinen Übungsdateien möchte ich, dass du das Konto 1 und vielleicht den Warenkorb 1, diese beiden einbringst das Konto 1 und vielleicht den Warenkorb 1, und sie einfach vor mir anziehst. Wenn Sie Symbole von verschiedenen Orten aus einbringen, gibt es verschiedene Größen. Das ist eine Sache, es sind verschiedene Farben. Der nächste Schritt besteht darin, diese Dinge anzupassen, und einige der Probleme, auf die Sie stoßen könnten , weil ich Sie bitten werde , einige Symbole zu erstellen und ein kleines passendes Set zu erstellen. Was ich will ist, ihnen zuerst die richtige Größe zu besorgen. Vertrauen Sie mir, wenn ich sage, dass es einfacher ist, an ihnen zu arbeiten , wenn sie wirklich groß sind. Wenn sie wirklich klein sind, sagen wir, sie sind so sehr klein. Werfen wir einen Blick auf sie. Sie sind immer noch Vektor, also ist es großartig, ich zoome hinein. Sagen wir, ich möchte diesen kleinen Kreis hierher bewegen , weil mich das nervt. Um darauf einzugehen, kann ich eins von zwei Dingen tun. Ich kann mit der rechten Maustaste darauf klicken und sagen , Gruppierung aufheben und Gruppierung aufheben, Gruppierung aufheben, die Gruppierung aufheben, bis sie in Geboten ist, oder ich kann die Objektbearbeitung durchführen. Ich kann darauf eingehen, indem ich darauf doppelklicke. Ich kann darauf doppelklicken und erneut darauf doppelklicken . Da gehst du. Es ist eine Möglichkeit, innerhalb einer Gruppe zu gehen , ohne die Gruppierung aufheben zu müssen weil ich sie jetzt verschieben und dann auf den Hintergrund doppelklicken und herauskomme. Es liegt an Ihnen, ob Sie die Gruppierung aufheben oder darauf doppelklicken möchten , um hineinzugehen. Du kannst es hier sehen. Ich bin drin gegangen, indem ich darauf doppelklickt, ich habe das noch einmal doppelt geklickt und ich habe dieses Ding hier. Füll 112, ist dieses Rad, und wir müssen auf das Problem stoßen da es sehr klein ist. Ich habe es übertrieben, sehr klein zu sein das Problem zu verschärfen , ich denke, das ist das Wort, das ich will. Sieh dir das an, wenn ich nur ein bisschen rüber gehe [unhörbar] bekomme es? Es ist so klein, dass es tatsächlich versucht, sich an Pixeln auszurichten, wenn man weiß, was das sind. Es kann nirgendwohin gehen. Es muss mit einem der Pixel hier unten übereinstimmen. Man kann sie nicht sehen, es sind kleine Quadrate, mit denen es sich anstellen will, also macht es sowieso keinen wirklich Spaß. Was Sie tun können, ist beides zu greifen , weil es SVGs sind. Denken Sie daran, den Befehl minus zu vergrößern oder Minus auf einem PC zu steuern. Ich ziehe sie schön groß und halte die Schicht, damit sie schön groß werden. Ein weiterer Trick, während wir hier sind, halten Sie die Umschalttaste und Option auf einem Mac oder Shift und Alt auf einem PC gedrückt, anstatt von oben rechts zu gehen, wird es von der Mitte gehen. Das ist die Shift-Option auf einem Mac und Shift Alt auf einem PC, während Sie ihn ziehen. Ich mache das Lasten und ich mache es viel mehr im Kurs. Lass es uns schön groß machen. Lass uns dich auch nett und groß machen. Bringen Sie ihnen ungefähr die richtige Größe , um zu versuchen, diese Dinge anzupassen. Sieht gut aus für mich. Wenn ich jetzt darauf doppelklicke, um hineinzugehen, doppelklicken Sie erneut darauf, schauen Sie zu, ich kann viele Anpassungen haben. Lass uns da reingehen. Jede Menge Anpassung. Wir können es in kleinen kleinen Teilen verschieben und es größer und größer machen . Um diese gewünschte Anpassung zu erhalten , können Sie Ihre Pfeiltaste verwenden, tippen, tippen, tippen, tippen, tippen, tippen, tippen, tippen, tippen, tippen, es wird jeweils ein Pixel bewegt. Ich werde meine ein bisschen größer machen, gigantische Icons, okay, wir werden sie in einer Sekunde kleiner machen. Wir werden später im Kurs viel mehr mit dem Zeichnen beginnen, aber im Moment tun wir genug, um auszukommen, um unsere Wireframes nutzbar zu machen und für den Kunden und den Kunden zum Testen. Vergrößern Sie sie. Die andere Sache, die wir tun werden ist, dass wir es versuchen werden und so das jetzt ein bisschen heraus. Um es zu bearbeiten, doppelklicke ich darauf, doppelklicken Sie erneut darauf, dieses Bit und klicke noch einmal darauf. Ich gehe in die eigentliche Form ein. In diesem Fall gibt es eine Gruppe, da ist er da. Das ist mein Einkaufswagen. Wenn ich darauf doppelklicke, komme ich in diese andere Gruppe. Ich hab's nicht geschafft, jemand hat es geschafft. Gruppe innerhalb einer Gruppe. Dann drin ist dieser Teil hier, der 110 gefüllt ist. Wenn ich das letzte bisschen gehe, kann ich anfangen, alle Ankerpunkte zu sehen und ich kann einige Anpassungen vornehmen. Das ist es, was du tun kannst. Dieser hat dort zwei Punkte, was seltsam ist. Wieder habe ich es nicht geschafft. Dies sind die Dinge, auf die Sie stoßen werden. Das hier. Schau, es hat sich dahinter versteckt und es ist großartig. So nehmen Sie Ihre Anpassungen vor. Sie könnten entscheiden, dass ich, eigentlich diese eine, die Schicht hält , alle diese anklicken kann und vielleicht los geht's. Bewegen Sie das ein wenig nach unten. Fummeln Sie es und bewegen Sie es und holen Sie es so wie Sie versuchen möchten, diese beiden zu kombinieren. Die andere Sache, die Sie tun könnten, ist, das Schlaganfallgewicht zu erhöhen oder zumindest zu übereinstimmen. Siehst du, dass dieser etwas dicker ist als dieser? Es ist nicht wirklich, aber ich stelle mir vor, dass es so ist. Ich zeige dir, was zu tun ist. Ein paar Dinge, die ich tun möchte , ist, dass diese Farben übereinstimmen. Ich klicke auf „Neu“, benutze meine kleine Pipette. Wir wissen, wie das geht. Exzellent. Sie passen zur gleichen Farbe. Sagen wir, ich möchte , dass das etwas dicker wird. Es ist ein bisschen dünn und spindelig für das, was ich brauche, oder zumindest muss dieser dicker sein, lass es uns dafür tun. Im Moment ist es diese Füllung, die ich anpassen kann, aber ich kann eine kleine Linie um die Außenseite hinzufügen . Sieh dir das an. Ich habe im Hintergrund angeklickt, es deaktiviert, einmal darauf geklickt und sagen, lass uns einen großen Rahmen hinzufügen. Es muss die richtige Farbe haben, also klicke ich darauf und sage es dir. In meinem Strich oder der Rand stimmt mit der Füllung überein, also kann ich es nicht wirklich sehen, aber schau dir das an, ich kann hier hineinklicken und meinen Pfeil nach oben benutzen. Du siehst, dass ich es voller oder leichter mache. Ich könnte entscheiden, dass ich das für die Größe oder die Art und Weise brauche , wie es angesehen wird. Das Gleiche werde ich sagen, und ich füge eine Grenze hinzu. Ich werde in diesem Fall die Eigenschaften kopieren, weil es im Grunde gleich ist, bearbeiten, kopieren, das Einfügedarstellung bearbeiten und vielleicht entscheiden, dass dieses ein kleines Quadrat sein muss ein kleines Quadrat sein das ist 11, und ich bringe den auf 10, und jetzt sind sie perfekt. So bekommt man das Matching. Schauen wir uns die letzte kleine Verrücktheit an, die in Adobe XD passiert , wenn ich skaliere. Sie sind jetzt riesig. Ich zoome den ganzen Weg nach oben, erinnere mich an den Befehl Null oder kontrolliere Null, alles. Sieh dir diese Join auf der Waage an. Ich möchte sie verkleinern, also schnappen wir uns zwei von ihnen. Ich habe sie dupliziert und ich werde dich nett und klein machen. Sieh dir das an. Bringen Sie es auf die Symbolgröße herunter. Schau was passiert. Ich übertreibe es , um dir zu zeigen, was passiert. Oft, was die Leute tun, gehen sie einfach und merken nicht, dass sie tatsächlich getan haben , was ich jetzt erklären werde. Lass uns ganz klein werden. Denn was am Ende passiert, ist der Schlaganfall oder die Grenze immer noch 11. Der Typ ist 11 und der Typ ist 11, also fällt er nicht proportional ab. Es gibt eine Möglichkeit, das zu umgehen. Lass uns den Kerl da lassen, wo er war. Dieser Kerl hier, wir klicken mit der rechten Maustaste darauf und wir werden etwas sagen, das als Umrissstrich bezeichnet wird. Es wird aufhören, dass es sich um diese Anpassung handelt, wir können die Größe nicht wieder einfach anpassen, Sie werden es tun, sobald Sie alle abgeglichen haben . Aber wenn ich den Strich skizziere, scheint nichts anders zu passieren, aber außer dass man, wenn ich ihn skaliere, dort sehen kann, dass er proportional abnimmt, und das ist eine geeignetere Größe. Schwer zu klicken, aber das ist der Unterschied. Striche skalieren nicht, sie bleiben genau das, was du sie auslegst. Das trifft auch hier auf diese Buttons zu. Das ist standardmäßig sehr praktisch, weil es bedeutet, dass ich einen großen Knopf machen kann und er nicht proportional dicker ist als dieser Knopf, er hat die gleiche Größe. Das war ein Video, das mit einigen seltsamen Dingen gemacht werden musste , die passieren. Was waren sie? Wenn Sie kopieren und einfügen, kommen sie manchmal als Komponenten durch. Klicken Sie mit der rechten Maustaste darauf und heben Sie die Gruppierung auf, bis sie weg sind, und wenn Sie wirklich ordentlich sind, löschen Sie sie aus den Komponenten. Das musst du nicht, nur wenn du nett und ordentlich sein willst. Die andere Sache ist das Kunstbrett. Das ist diese Seite hier auf unserem Ebenenbedienfeld. Es gilt als eigenständige Seite, und dort leben diese Jungs, wenn sie nicht auf einer Seite sind und manchmal versehentlich auf einer Seite sein können und Sie merken es nicht und verschwinden, weg. Was haben wir sonst noch gelernt? Wir haben gelernt, dass wir die Gruppierung entweder aufheben oder einfach auf ein Symbol doppelklicken können Gruppierung entweder aufheben oder einfach auf ein Symbol doppelklicken , um in das Symbol zu gelangen, um Anpassungen vorzunehmen, und wenn wir weiter klicken, können wir schließlich mit dem Bearbeiten von Shapes beginnen. Der letzte war, dass die Striche nicht skaliert werden, sie bleiben gleich und wir können mit der rechten Maustaste klicken und den Strich skizzieren , wenn wir sie brauchen, um fest zu bleiben. Ich hoffe, das war hilfreich, wenn es ein bisschen düster ist und du so bist, habe ich es verstanden? Während wir diesen Kurs durchlaufen, wirst du so sein, und warum hatten wir dieses Video überhaupt früher? So klar wird es sein. Hoffentlich, wenn ich meinen Job richtig mache. Das ist es. Wir sehen uns im nächsten Video. 18. Kursprojekt 03 – Icons (Symbole): Hi, allerseits. Es ist Klassenprojektzeit. Dieser enthält auch einige Bonus-Tipps und Tricks, also überspringen Sie diesen nicht. Reden wir darüber , was Sie tun müssen. Wir brauchen vier Icons oben und drei unten unten. Sie werden diese wahrscheinlich am Ende zu Hause benutzen. Ein Benutzer kann sich einloggen und das Passwort ändern und so. Ein Einkaufswagen, der sie zur Kaufseite bringt oder was sie in ihrem Warenkorb haben , und ich werde das Menü öffnen, das wir bereits entworfen haben. Was ich möchte, dass Sie sie dazu bringen, sie zu jedem anzupassen, indem Sie die Techniken verwenden, die wir bisher gelernt haben, um die Striche richtig zu machen. Vielleicht holst du sie sogar alle vom selben Ort. Ich finde ein gutes Set. Ich bin damit einverstanden, genauso wie die Social-Media-Symbole. Wählen Sie die Social-Media-Symbole , die für Ihre Zielgruppe geeignet sind. Sie einen Blick auf Ihr Benutzerprofil und sagen Sie, sind sie eine Linkedln-Person, eine Twitter-Person oder sie werden sie auf Tiktok teilen oder was auch immer es sein wird? Fügen Sie ein wenig Text hinzu, über den sie ihren Kauf teilen können, und fügen Sie dann die entsprechenden Social-Media-Symbole hinzu. Dann möchte ich, dass Sie einen Screenshot machen und ihn in den Kommentarbereich oder die Aufgaben auf dieser Seite oder im nächsten Abschnitt hochladen den Kommentarbereich oder die Aufgaben auf dieser Seite oder im , je nachdem, wo Sie dies tun, und dies ist nur ein Beispiel. Es muss nicht so sein, aber so etwas. Ich hab dir ein paar abkürzende Bonus-Sachen versprochen. Schauen wir uns das an. Während du daran arbeitest, musst du ein Home-Icon finden. Es war nicht Teil dieser Gruppe, in der ich gefunden habe. Ich kann feststellen, dass es so ist, es von einem anderen zu bekommen. Ich musste draußen einen Schlaganfall hinzufügen. Ich bringe es in Command Shift I ist die Verknüpfung auf einem Mac und Control Shift ich auf einem PC zum Importieren oder du kannst hineinziehen, als hätte ich ein paar Hausaufgaben gemacht. Der Unterschied zwischen diesem ist , dass es nicht ganz dick genug war. Kannst du sehen, dass es ziemlich dünn war? Du weißt, wie ich sagte, skaliere es und fange an zu arbeiten. Ich wollte mich nicht darum kümmern, weil ich nur einen kleinen Schlag draußen machen musste nur einen kleinen Schlag draußen und ich wollte mit dir teilen, ich dachte, oh, das ist eigentlich praktisch. Wenn Sie einen Rahmen hinzufügen und die richtige Farbe auswählen, ist diese nicht die kleinste Größe. Sie können auf 0,5 runter gehen. Deshalb möchte ich darüber reden, du kannst auf 0,1 sinken. In diesem Fall denke ich, dass ich 0,25 ausgewählt habe, und versuche es zu skalieren und zu entsprechen, dass dies die Icons hier sind. Das ist nur der Punkt, den ich ansprechen wollte. Sie können winzig winzige Bruchgrößen für den Schlaganfall verwenden. Als nächstes auf meinen Tipps und Tricks ist, dass du wahrscheinlich Sachen gruppieren willst. Vor allem, wenn Sie diese nächsten Tricks von verwenden möchten, können Sie sehen, dass sie nicht ganz aufgereiht sind. Es ist schwer, sie optisch in eine Reihe zu bringen. Sie wählen sie alle aus und sagen, dass ich sie überall haben möchte , sind Ihre Ausrichtungswerkzeuge nach oben ausgerichtet, richten Sie sie in die Mitte. Sie können sehen, weil dies nicht gruppiert ist, es zertrümmert sie insgesamt. Ich sage, dass Sie die Navigation entweder mit der rechten Maustaste klicken und zur Gruppe gehen. Es ist eines dieser Dinge. Sie werden es wahrscheinlich genug verwenden, die Verknüpfung Command G auf einem Mac zu erhalten, Control G auf einem PC. Wenn sie nun gruppiert sind, kann ich sie alle auswählen. Ich benutze nur mein Auswahlwerkzeug und ziehe einfach eine Box über sie alle. Ich werde sagen, richten Sie sie bitte in der Mitte aus. Das stimmt nicht immer optisch. Manchmal mag es, dass es funktioniert, aber dieser Typ muss ein Paar hochgehen. Das ist auch absolut erlaubt. Es muss mathematisch nicht korrekt sein. Es muss nah genug visuell korrekt sein. Der andere ist, dass sie verteilt sind? Das sind sie nicht. Dieser ist ein bisschen näher als dieser. Auch hier können Sie dies tun, wenn sie alle einzeln gruppiert getrennt voneinander gruppiert sind. Ich kann sie auswählen, und es gibt diese Option hier. Dies wird eine horizontale Verteilung sein. Es gibt eine Abkürzung, die Sie nie lernen werden. Was ist das? Option Command H. Daran werde ich mich nie erinnern. Ich benutze nicht genug. Ich schaffe das und wir werden versuchen sie alle einzeln zu trennen. Aber weil es manchmal diese negativen Räume hier gibt, muss man manchmal nur ein bisschen so gehen. Das ist erlaubt. Ich gebe dir die Erlaubnis, Dinge zu schlagen, aber das muss wieder steigen. Das ist die Ausrichtung und Verteilung. Was Sie auch tun können ist, dass Sie sie alle auswählen und kopieren können. Denn was ich tun muss, ist, dass ich den ganzen Weg nach oben zoomen muss. Wer erinnert sich, was das ist? Kommando Z oder Control Z auf einem PC. Ich habe sie alle kopiert. Was du tun kannst, ist, dass du eigentlich sagen kannst, ich will dich loswerden, dieser Typ ist weg. Du gehst weiter ist ich kann sagen, du kannst auf den Namen klicken und Einfügen drücken. Es wird genau an der richtigen Stelle auf der Seite platziert, solange es sich um Seiten der gleichen Größe handelt. Das ist praktisch, um die Seiten zu aktualisieren , anstatt sie auszurichten. Die andere Sache, die Sie tun können, ist, dass Sie mehr als einen tun können . Das mache ich rückgängig. Ich kann sagen, dass Sie die Umschalttaste auf meiner Tastatur gedrückt halten und auf die Namen dieser drei klicken und dann auf Einfügen klicken. Das sind Ihre Boni. mach deine Hausaufgaben und hol dir diese Icons an. Wir sehen uns im nächsten Video. 19. So fügst du deine Interaktion zu deinem Prototyp in Adobe XD hinzu,: Hi, allerseits. In diesem Video werden wir uns hier ansehen, wie sie unsere kleine mobile Website und all diese kleinen Kabel prototyping unsere kleine mobile Website und , wenn sie alle so verbunden sind, wie sie sind. Ich kann durchgehen und sagen, mehr erfahren, zurück zur Homepage gehen, zur Warenkorbseite gehen. wenig Navigation hinzufügen Prototyp unseres Designs ein Wir werden dem Prototyp unseres Designs ein wenig Navigation hinzufügen. Lasst uns reinspringen. Um die Interaktion hinzuzufügen, wechseln wir vom Design, das der Moment zum Prototyp wäre. Nichts sieht wirklich so aus, als würde es sich ändern, außer dieses kleine Panel ein wenig ändert. Um alles zu aktivieren, klicken Sie auf den Namen einer der Zeichenflächen. Lass uns die erste Seite machen, die Homepage. Was wir tun werden, ist, wenn auf diese Seite geklickt wird, werden wir sie hier dazu bringen, auf diese Zeichenfläche zu gehen. Du klickst einfach gedrückt und ziehst das kleine blaue Ding und so kannst du sehen, dass es dieses sagt. Dann geben wir ihm eine Vorschau Lassen Sie uns eine Vorschau anzeigen, klicken Sie auf den kleinen „Play“ -Button und klicken Sie darauf und Ihre Zeichenfläche wird geladen. Cool. Was wir tun, ist im Moment einfach irgendwo zu klicken und es wird zur nächsten Zeichenfläche wechseln . Da drin. Einfach. Klicken Sie erneut und es geht nirgendwohin da wir nur eine Zeichenfläche manipuliert haben. Was wir tun können, ist, dass Sie dies nicht wirklich schließen müssen . Das kann offen bleiben. Für mich behalte es oft auf meinem anderen Bildschirm hier drüben, den du nicht sehen kannst, oder wir können es in diesem Fall einfach hier behalten und es schwebt einfach über allem. Sie können es wieder schließen und wieder öffnen, kein Problem, aber das war's. Die andere Sache, die zu beachten ist, ist, dass es möglicherweise auf der falschen Seite beginnt. Vielleicht meinst du, das ist nicht die Homepage. Es geht nicht davon aus, dass Sie ganz links anfangen möchten , weil Sie hier einen haben können. Es weiß nicht wirklich, mit welchem ich anfangen soll. Was Sie tun, ist es zu initiieren, wenn ich auf der Checkout-Seite beginnen möchte, um eine Vorschau anzuzeigen, lassen Sie diese Seite einfach auswählen oder die Zeichenfläche auswählen. Sie können dies offen lassen, Sie müssen es nicht zurücksetzen. Sie können einfach hier rüberklicken. [GELÄCHTER] Sie sehen, dass dies je nach ausgewählter Zeichenfläche angepasst wird, sodass dieses Ding nicht geschlossen werden muss. Was wir auf der Produktdetailseite tun werden, ist, dass Sie dorthin gehen, und dann werden Sie auf der Checkout-Seite dorthin gehen, also echtes Basic Rig. Um am Anfang wieder anzufangen, klicke ich auf diese „Homepage“ und sage Klick“. Sieh dir das an. Fancish. [GELÄCHTER] Aber im Moment, obwohl das das Ganze benutzt und irgendwo klickt. Was wir tun wollen, ist diese Knöpfe zu haben, um an Orte zu gelangen. Was wir tun werden, ist, dass wir das schließen , damit es nicht verwirrend ist. Um diese loszuwerden, gibt es ein paar Möglichkeiten. So wie ich es sowieso mache, klicke auf die Homepage. Um diese Verbindung zu entfernen, klicken Sie einfach gedrückt und ziehen Sie sie ins Nirgendwo. Nicht da, einfach hier. Du kannst wieder nach Hause gehen, überall hier drüben, loslassen, und es bricht diesen Link. Das ist eine Möglichkeit, dies zu tun. Der offizielle Weg ist, dass ich Checkout ausgewählt habe, und hier wurde ein Tipp-Trigger hinzugefügt. dieses kleine Ding hinüberziehen, gehen Sie von ein paar Dingen aus; dass Sie irgendwo klicken oder tippen, auf einem Telefon ist offensichtlich ein Tippen, um auf einen Desktop zu klicken. Es wird einen Übergang zur Bestätigungsseite hinzufügen , und es wird die Standardeinstellung für auflösen verwenden. Man kann sagen, geh nirgendwohin. Du kannst sehen, dass es jetzt einfach nirgendwohin geht. Da gehst du. Wir haben das alles aufgeschlüsselt, weil wir an tatsächlichen Objekten arbeiten wollen. Was wir tun möchten, ist, anstatt auf die ganze Seite zu klicken, um zur Produktdetailseite zu gelangen , wird meine Schaltfläche „Mehr erfahren“ sein, und was ich tun werde, ist, dass ich die Text ausgewählt, lassen Sie uns hineinzoomen. Drücken wir die ausgewählte Schaltfläche, nur damit es ein bisschen mehr anklickbarer Bereich und Sie ihn dann hierher ziehen können. Geh weiter. Marketing-Homepage, klicken wir auf „Play“ und außer diesem Kerl ist nichts anklickbar. Das sind die Grundlagen des Prototypenbaus. Was wir vielleicht tun könnten, ist, dass ich auf diese Homepage zurückkehren möchte, ich gehe zu dir, mein Freund geht hierher zurück. Da gehst du. Wir akzeptieren alle Standardeinstellungen, wir werden in einem zukünftigen Video über Lockerung und Dinge sprechen, aber im Moment tun Sie das am Ende; Homepage, Erfahren Sie mehr. Homepage und manipulieren Sie dieses Ding einfach mit all Ihren musikalischen Kabeln, und sie sind mit verschiedenen Seiten verbunden . Eine andere Sache, die Sie in dieser Vorschau tun können, ist, anstatt zu versuchen, alles nur für Ihre eigene Navigation zu verdrahten, Sie können die Pfeile nach links und rechts verwenden, um sich durch sie zu bewegen. Wenn Sie nur sehen möchten die Checkout-Seite aussieht, möchten Sie nicht alle Interaktionen verwenden, Sie können einfach links und rechts verwenden und es wird einfach alle durchlaufen. Das wirklich ordentliche daran ist, dass es immer offen ist, schau dir das an, das Design kann sich tatsächlich ändern. Sie können es prototypisieren, daran arbeiten und sehen, wie es bei diesem Design aussieht ohne es schließen und neu starten oder aktualisieren zu müssen. Es gibt keinen echten Aktualisierungs-Button, ich wünschte, es gäbe eine Rückkehr zur Homepage [LACHEN], aber das gibt es nicht. Du klickst darauf, um zum Anfang zurückzukehren, wir benutzen diese Pfeiltasten. Während ich arbeite, habe ich diesen Bildschirm immer geöffnet und ich habe ihn einfach hier auf meinem anderen Monitor und arbeite. Es zeigt mir nur, wie es da drüben immer aussieht . Ein letzter kleiner Tipp für das Prototyping ist, dass wir die Homepage gemacht haben, wo haben wir es gemacht? Nun, zwei kleine Tipps, jetzt wo ich darüber nachdenke, werde ich alles auswählen; also befehle A auf einem Mac, kontrolliere A auf einem PC, wo ist es? Wählen Sie alle aus, wenn Sie sich im Prototypmodus befinden, werden alle ausgewählt und Ihnen alle Drähte angezeigt , die praktisch sein können nur um zu wissen, was Sie getan haben und was nicht. Es wird so sein, als hätte ich das zu Hause gemacht, aber Sie können sehen, dass sich dieser nicht verbunden hat. Das passiert sehr bei der Navigation. Nehmen wir an, wir haben keine Kontoseite, also werden wir diese nicht verwenden. Es ist nicht Teil unseres Aufgabenflusses, aber dieser hier tut es. Wir sagen, du gehst zur Checkout-Seite. Du könntest einfach gehen, du gehst zur Homepage und das ist in Ordnung mit nur vier Zeichenflächen. Aber was Sie tun können, ist nur, wenn Sie sich im Prototypmodus befinden, wenn Sie alle diese vier auswählen und kopieren. Wir haben diesen Streifen früher gelöscht und wir löschen diese, klicken auf den Titel und fügen sie ein. Kannst du sehen, dass es die Links zurückbringt, es bringt diesen nicht zurück, weil wir bereits auf der Homepage sind. Wenn ich zu diesem gehe, lösche diese Typen, füge sie ein, dieser hat nicht bezahlt, weil wir auf der Checkout-Seite sind. Es kann offensichtlich nicht zeigen, dass der Draht in sich selbst geht, aber die Homepage funktioniert. Dieser wird mir Lasten zeigen. Hast du was ich meine? Siehe die Homepage und die Warenkorbseite ist da. Wenn Sie viele sich wiederholende Sachen machen, vergewissern Sie sich, dass Sie das Einfügen in den Prototyp kopieren. Der Grund, warum ich dir das zeige, ist, lass es uns anders machen , damit man es nicht hat. Wenn ich es in der Design-Ansicht mache und gehe hin und gehe hin, wo ist eins, diese hier, kopiere. Es wird nicht alle diese Drähte durchbringen. Wenn ich hierher gehe, lösche Einfügen. Wenn ich einen Prototyp-Modus habe, können Sie sehen, dass er diese Drähte nicht kopiert und eingefügt hat? Sie müssen sich im Prototypmodus befinden , um Drähte kopieren und einfügen zu können. Sie werden irgendwann erwischt und fragen sich warum die Interaktion nicht durchläuft, sondern sich beim Kopieren und Einfügen im Prototypmodus befinden müssen. In diesem Fall verspotten wir ein Mobiltelefon. Es spielt keine Rolle, ob Sie ein Mobiltelefon oder ein Website-Design oder ein Tablet-Design verspotten , dieses kleine Ding taucht genauso auf. Wir nehmen jetzt einfach das Handy auf, weil es für viele von besonders diesen E-Commerce-Sachen am beliebtesten wird . Am Ende fange ich viel mehr auf Mobilgeräten an, aber das heißt nicht, dass eine Desktop-Version oder eine rechteckige horizontale Version nicht dort ist, wo Sie starten und prototypisieren sollten. Die Tipps und Tricks wir hier lernen, funktionieren alle gleich. Alles klar, das war's, lass uns zum nächsten Video gehen. 20. Prototype und einfache Einfachung in Adobe XD: Hi, allerseits. In diesem Video werden wir das Prototyping ein wenig weiter gehen. Wir werden uns die verschiedenen Arten von Animationen ansehen, was Lockerung ist, und wir werden so etwas machen. Sieh zu, wie diese Dinge überqueren, anstatt nur aufzulösen, wenn ich mit meinen Pfeilen zurückgehe. Wir werden diese Monstrosität auch erschaffen. Bereit? [GELÄCHTER] Schlecht schlecht. Es ist cool, es ist schlimm. Lassen Sie mich Ihnen zeigen, wie das in Adobe XD geht. Um diese erstaunliche Animation zu erstellen, werden wir nur ein bisschen tiefer in das Prototyping einsteigen . Jetzt werden Sie feststellen, dass dieses Video Level 1 genannt wird, weil es später Level 2 gibt, weil wir jetzt die Küchenspüle dort hineinwerfen. Ich möchte Sie schon früh im Kurs zu etwas Kenntnissen bringen , und dann können wir uns auf einige dieser Dinge vertiefen, wie das Prototyping später. Es ist jetzt ein bisschen mehr. Das erste ist, dass dies eine ziemlich kleine Anzahl von Zeichenflächen ist , aber sagen wir, dass es mittlerweile 30 Seiten oder 50 Seiten sein könnte. Anstatt zu versuchen, sie zu ziehen und an die verschiedenen Orte zu gelangen, können Sie einfach auf den Button klicken und hier drüben klicken, nun, klicken wir darauf und sagen, ich möchte das Übergang , um zur Zeichenfläche zu gehen die die sehr gut benannte Seite Zeichenfläche genannt wird, auch auschecken und es wird dorthin gehen. Wenn Sie Ihre Seiten nicht benennen, heißt es Artboard 1-52, was passieren wird. Ich nenne meine hier hauptsächlich weil du zuschaust. Aber das macht es einfach. Wenn Sie sie nennen, können Sie sie tatsächlich vom Ziel auswählen . Das ist eine Sache. Die andere Sache, die ich in diesem erklären möchte , ist, dass hier der Standardwert ein Übergang von dissolve ist. Wechseln wir unsere zu Slide Left. Wir werden sie nicht alle durchgehen, aber schauen wir uns Slide Left versus Push Left an, weil sie sich sehr ähnlich erscheinen. Ich möchte, dass der Kauf-Button hierher geht. Du merkst, dass es sich an das Letzte erinnert, was du getan hast. Wenn du etwas änderst und es weiter hinzufügst, wird es weiter nach links rutschen . Das ist eigentlich gut. Wenn Sie etwas bekommen, das Ihnen gefällt, können Sie es weiter hinzufügen und es wird sich an das Letzte erinnern, was Sie angewendet haben. Ich ändere meins in „Push Left“. Schauen wir uns ein wenig denn sie scheinen dasselbe zu sein. Du spielst, schauen wir uns jetzt kaufen, Slide links an, wo bist du? Schieben Sie über die Spitze und der Kauf ist ein Push nach links, es gibt keine Überlappung, es drückt einfach nach links, damit Sie entscheiden, was Sie wollen. Überprüfen Sie auch, ob Sie nicht etwas entwerfen , das von Ihrem Entwickler zumindest nicht einfach erledigt werden kann . Wenn Sie es in Ihren Kunden-Bounce verkaufen und am Anfang gesehen haben und die Entwickler so sind, als könnten wir das nicht tun, und der Kunde ist sehr darauf eingestellt, dass er hereinspringt, werden Sie Probleme. Sprechen Sie mit Ihrem Entwickler. Führen Sie früh einen guten Dialog darüber, was Sie können und was nicht. Lass uns das hier lassen. Wir lassen es dort liegen. Schauen wir uns die andere Sache an, die man Lockerung nennt. Ich lasse dich mit den anderen Animationen herumspielen. Es ist nicht sehr aufregend. Dissolve oder None, keiner bedeutet nur, dass es wie ein Sprungschnitt darauf springt und du kannst mit diesen verschiedenen herumspielen. Schauen wir uns die Lockerung an, denn ohne zu lockern ist sie starr. Lass es uns in der Vorschau sehen. Schau dir das inzwischen an, es gibt keine Finesse. Lockerung verlangsamt es in diesem Fall, Verlangsamung der Lockerung bedeutet, dass es, wenn es nahe am Ende kommt , etwas langsamer wird , weil es ein natürliches Gefühl ist, sogar obwohl es digital ist. Wir können es übertreiben, lass uns bis zu zwei Sekunden gehen, was zu lang ist, aber es wird helfen, die Lockerung ein bisschen besser zu verstehen. Lass uns diesen Kerl spielen, lass uns jetzt kaufen. Kannst du sehen, dass es langsamer wird, wenn es dem Ende nahe kommt? So funktioniert die echte Schwerkraft [LACHEN], wenn die Schwerkraft sie seitwärts schieben könnte. Wie auch immer, das lockert und du kannst dich mit dem herumspielen, was du fühlst, es sieht gut aus. Eine Sache, die Ihnen jedoch verboten ist, ist, dass Sie es in diesem Kurs einmal ausprobieren können, und dann dürfen Sie es nicht mehr benutzen, ist der Bounce. [GELÄCHTER] Bounce ist der schlimmste. Zwei-Sekunden-Bounce ist noch schlimmer. Schauen wir uns mal an. Es sind die gebundenen Türen, wenn Sie meinen Premier Pro-Videobearbeitungskurs absolviert haben meinen Premier Pro-Videobearbeitungskurs absolviert oder welche Türen gebunden sind, ein weiterer schlechter Übergang? Seite schälen. Dies ist das Äquivalent für Adobe XD. Bereit? [GELÄCHTER] Es ist cool für etwa drei oder vier Klicks auf den Knopf und dann wird es anstrengend. Ich urteile nicht, du kannst Bounce benutzen . Andere da drin. Ich lasse dich sie alle durchgehen. Ich mache nur noch eins mit dir, interessante. Bereit? Das ist, wie nennt man das? Lass mich nachdenken. Ich hab darüber nachgedacht. [GELÄCHTER] Ich habe seit Ewigkeiten darüber nachgedacht. Ich musste die Vorfreude auf Google-Animationsregeln haben. Wenn Sie die Regeln der Animation nicht kennen, ist es praktisch, es als Designer zu kennen, insbesondere als UX-Designer. Schauen Sie sich Lucas Ridley an, er hat einen großartigen Kurs über die Grundlagen der Animation. Vorfreude ist , wenn Sie sich zurück auf die Fersen lehnen , bevor Sie vorwärts gehen, legen Sie Ihr Gewicht nach hinten, um vorwärts zu gehen. Es hilft den Menschen, vorherzusehen, was passieren wird, weil niemand gerade nach vorne startet. Du legst dein Gewicht in den hinteren Fuß, bevor du dich nach vorne drückst. Das ist es, was hier los ist. Schauen wir uns jetzt mal an, am Ende. Machen wir es eine Sekunde, und dann ist das inzwischen fertig, geht vorwärts, bevor es rückwärts geht oder umgekehrt. Siehst du das? Es ist nett. Das wird es für diesen sein, denke ich. Spielen Sie mit den verschiedenen Animationen herum, spielen Sie mit den verschiedenen Arten der Lockerung herum und wie lange sie dauern, finden Sie ein bisschen etwas, das Ihnen gefällt. Wir werden später im Kurs mehr Prototyping machen, noch ein paar Hardcore-Sachen. Aber im Moment denke ich, dass wir genug haben , um weiterzumachen. Lass uns das machen. Lasst uns weitermachen. 21. So siehst du dein Design in der XD auf dem iPhone und Android: Hi, allerseits. Ich bin es draußen in freier Wildbahn. Dieses Video zeigt Ihnen, wie Sie eine Statistik für einen Baum auf Ihrem Mobilgerät erhalten . Denn wir müssen sehen, wie es auf dem Gerät aussieht , Dinge wie Schriftarten auszuwählen und tatsächlich Tests durchzuführen anstatt zu versuchen, das Ding auf dem Bildschirm zu verwenden. Das ist mein Setup, so sieht es von der anderen Seite aus. Normalerweise ist das teilweise chaotisch, aber nicht zu chaotisch, es wird schlimmer. Was wir tun müssen, zeige ich Ihnen zwei verschiedene Möglichkeiten, dies zu tun. Diese Live-Update-Art mit dem USB-Kabel. Weißt du was das USB-Kabel ist? [GELÄCHTER] Wir machen das und dann zeige ich Ihnen eine Möglichkeit dies über die Cloud zu tun. Beide haben ihre Vor- und Nachteile. Dieser ist der aufregendste Weg. Ich zeige es dir. Es ist einfach. Unabhängig davon, wie wir es tun, müssen Sie die App für Ihr Telefon herunterladen. Wenn Sie auf Android oder Apple sind, egal, gehen Sie je nach Ihrem Geschmack Ihres Telefons in Ihren App Store oder Ihren Play Store und laden Sie die Adobe XD-App herunter. Um dies herunterzuladen, müssen Sie sich mit Ihrer Adobe ID und Ihrem Passwort anmelden , die Sie immer vergessen haben, und benötigen ein Reset-Passwort. Sobald du das getan hast, [LACHEN] und du bist tatsächlich angemeldet. Es ist ziemlich einfach. Sie müssen ein USB-Kabel finden. Du weißt was das sind, dann steckst du es ein. Eigentlich werde ich das einrichten, damit die Kamera hoffentlich beide sehen kann. Warte da. Für eine Sekunde zurück im Computer. Sobald Sie Ihr USB-Kabel an Ihr Telefon angeschlossen haben, gehen Sie hier oben nach oben, können Sie diese kleine Gerätesache sehen? Hoffentlich solltest du dein kleines Gerät hier sehen und darauf klicken. Das ist mein Pixel 4, klicke darauf und dann lass uns wieder zur anderen Kamera springen. Das ist mein kleines Setup hier. [GELÄCHTER] Ich habe die App auf meinem Handy geöffnet. Ich habe mein Adobe XD geöffnet, ich habe auf das kleine Icon geklickt, das du gerade in der oberen Ecke gesehen hast. Je nachdem, manchmal springt es einfach zu ihm, aber manchmal sehen Sie unten , hier gibt es dieses kleine Symbol. Es ist ein verbundenes Gerät. Sieh dir das an. Sie stimmen überein. Das tun sie, sie stimmen genau überein. Was wirklich schön daran ist, ist das zu sehen. Es ist Live-Aktualisierung. Coole Art und Weise. Sie können dies anschließen lassen und tatsächlich an Dingen wie Schriftgrößen arbeiten. Man kann sagen, das funktioniert nicht ganz richtig. Vielleicht ist die Schriftgröße hier zu groß, also gehe ich auf 30 zurück. Es ist jetzt viel einfacher, Icons zu entwerfen , weil man sie tatsächlich berühren und gehen kann, ist das groß genug, um sie zu berühren? Klicke drauf. Klicken wir auf den „Warenkorb“. Oh, bin zum Einkaufswagen gegangen. Wie cool ist das? Ich liebe es. Das ist, als hätte ich etwas gemacht und schaue, es funktioniert und es ist da draußen. Homepage, erfahren Sie mehr. [LACHEN] Sogar ein Bounce-Effekt. [GELÄCHTER] Das ist Prototyping live auf Ihrem Gerät. Sie können es offensichtlich aktualisieren und es springt auch zu den Seiten, an denen Sie arbeiten. Siehst du in den Seitennamen hier? Ich weiß nicht, warum ich so viel gemacht habe, aber es ist einfach etwas Magisches daran, dass es sich gut aktualisiert. Die andere Sache zu beachten ist, wir unser Label in Ordnung haben. Sie können Ihre Tablet-Version dort sitzen lassen, horizontal, vertikal. Sie können mehr als ein Gerät anschließen und eine Verbindung zu allen herstellen. Großartig. Eine Sache ist, dass es ein paar Dinge gibt. Einer ist, sagen wir, denn wofür wir das verwenden ist, dass Sie damit entwerfen können. Das ist wie diese Funktion hier. Sie könnten den Kunden bei sich sitzen lassen und ihn auch auf seinem Handy benutzen. Sie könnten dies mit Benutzertests tun, damit Ihre Leute es verwenden und an den Computer angeschlossen werden können . Ich zeige dir in einer Sekunde einen anderen Weg, das ist wahrscheinlich besser dafür. Aber es gibt Dinge wie Hinweise. Was ist, wenn ich irgendwo klicke, kannst du dort oben sehen? Es wird ein bisschen schwer werden. Ich bin mir nicht sicher, ob der Editor hereinzoomen kann. Aber es hat dort ein paar Highlights. Gehen wir tatsächlich zurück zur Homepage. Es ist etwas hoch, weil ich mein Handy nicht halte. Ich will den Schuss nicht ruinieren. Aber können Sie sehen, wenn ich überklicke, sehen Sie diese Dinge hervorheben, um einen visuellen Hinweis darauf zu geben , was Sie anklicken können , weil wir nicht alles manipulieren werden. Ich möchte keine Kontoseite erstellen . Wurde nicht gebeten, einen zu machen. Es wird den Leuten helfen zu wissen , wo sie in diesem Modell hingehen dürfen und wie sie da rauskommen können. Du meinst, Mein Handy war hier gefangen. Sie können dreifach klicken, bereit, eins, zwei, drei. Es gibt dir Sachen. Sie können diese Hotspot-Hinweise sagen, die ich Ihnen gerade gezeigt habe, dass Sie diese ausschalten können. Wischen Sie die Navigation, wir haben keine Swipe-Navigation erhalten. Das tun wir. Standardmäßig werden Sie feststellen , dass Sie von der nächsten Seite zur nächsten Seite wechseln , ohne dass Sie sie mit den Kabeln manipulieren müssen. Das ist eine Sache. Aber der Drei-Klick bringt dich dazu. Es gibt dir noch ein paar Kontrollen, wir werden sie nicht alle durchgehen. Sie sind relativ selbsterklärend, machen einen coolen Screenshot und einen Exit-Prototyp. So kommen Sie hier raus. Was ziemlich cool daran ist, ist, dass ich das jetzt ausstecken kann. Seltsamerweise kann ich es nicht live aktualisieren, obwohl wir jetzt kein Live-Update waren. Kannst du sehen, wie ich es bewege? Wahrscheinlich kann es nicht, aber es wird kein Live-Update sein, aber ich kann die Vorschau fortsetzen und es wird sie zwischenspeichern und mich daran erinnern. Ich kann das jetzt in mein Meeting aufnehmen und es wird immer noch da sein. Wenn es sich um ein sehr großes Dokument handelt, sagen wir, es sind viele Bilder und es sind 100 Seiten lang oder 100 Uploads lang. Stecken Sie es ein und warten Sie lange und fahren Sie durch die verschiedenen Seiten. Stellen Sie also sicher, dass alles geladen ist, bevor Sie es trennen. Es wird schließlich geladen. Denn weil es ganz einfach ist, es super schnell geladen. Aber ja, es funktioniert alles auch wenn es nicht angeschlossen ist. [GELÄCHTER] Das ist die eine Version, um es anzuschließen. Lass mich dir die andere Version zeigen. Wir sind wieder dabei. Lass mich dir in die andere Richtung zeigen. Es ist ziemlich ähnlich, aber du musst ein paar Dinge tun. Der Nachteil ist, dass es kein Live-Update gibt. Es bedeutet, dass Sie keine Dinge herumwackeln und es wird vollständig aktualisiert, aber das ist nützlich, wenn Sie entwerfen. Nehmen wir an, Sie bringen es zur Kundenbesprechung oder zu einem Ihrer potenziellen Benutzer, um einige Tests durchzuführen. Was Sie zuerst tun müssen, ist sicherzustellen, dass diese kleinen Symbole hier möglicherweise nicht wie meine aktualisiert werden , sie sind ein kleines Cloud-Icon. Sie könnten das entfernen. Aber ich bin gerade in der Cloud gespeichert. Dies ist der Standardwert für Adobe XD. Sie könnten einer der Personen sein , die dagegen kämpfen. Sie sind Datei speichern als mein lokales Dokument. Dieses spezielle Update wird nicht funktionieren. Sie müssen es in der Cloud speichern , da es dadurch in Ihre Creative Cloud-Bibliothek oder Ihr Assets-Panel in der Cloud hochgeladen wird Ihre Creative Cloud-Bibliothek oder Ihr Assets-Panel in der Cloud , magischerweise die Adobe XD-App, die wir gerade heruntergeladen haben. Sie müssen diese App immer noch herunterladen und haben Zugriff darauf, wo immer Sie sind. Wird einfach kein Live-Update geben. Werfen wir einen Blick darauf. Wenn Sie sie auf Ihrem Computer gespeichert haben. Werfen wir einen Blick darauf. Ich habe eine Desktop-Version, die ich erstellt habe. Schau, keine Wolke. Was Sie tun müssen, damit dies funktioniert, müssen Sie es in der Cloud speichern. Datei, Speichern unter. Auf diese Weise wird es standardmäßig zur Creative Cloud verwendet und es wird zu allen anderen Dokumenten passen. Es wird das tun. Das Coole beim Cloud-Speichern ist, dass es immer automatisch speichert. Ich spare nie in XD. Es rettet einfach magisch alles alleine, ohne es tun zu müssen. Du schaffst es. Nun, wenn es ausgegraut ist, bedeutet das, dass es es bereits für dich getan hat. Aber sieh dir das an, wenn ich das bewege, wirst du feststellen, dass es hin und wieder versucht wird, sich selbst zu aktualisieren. Es gibt immer ein Live-Update in der Adobe Cloud. Sie können „Manuell speichern“ drücken. Wenn du es immer noch angewöhnt hast, kannst du sehen, wie es dort geht. Es bedeutet jetzt, dass wir zur App und zur anderen Kamera springen. Wir sind draußen und weil das kein Live-Update mehr ist. Es ist wie eine Trennung. Was passiert ist, dass Sie es speichern, wie wir gerade in der Cloud getan haben und dann Ihre Adobe XD-App öffnen, dieselbe. Aber anstelle dieses dritten Symbols verwenden Sie dieses erste Symbol , nämlich Ihre Cloud-Dokumente. Da ist mein kleiner aktualisierter Typ. Sieh mal, er wurde vor zwei Minuten aktualisiert. Mach ihn auf. Hoffentlich gehen wir los. Wir haben unsere kleine Animation am Laufen. Wir haben unseren kleinen Prototyp am Laufen. Du kannst immer noch wie der andere damit interagieren. Da ist er da. [GELÄCHTER] Er ist immer noch da. Der einzige Unterschied besteht darin, dass es kein Live-Update gibt, aber es bedeutet auch, dass Sie kein USB-Kabel benötigen, entscheiden, was Sie tun möchten. Dies könnte sich in Zukunft ändern. Es kann die drahtlose Technologie verwenden, sobald es kabelgebundene USB-Verbindung verwendet, um dieses Live-Update durchzuführen. Aber hey, das ist total in Ordnung. Oft mache ich es einfach so, weil ich nicht entwerfe. Gleichzeitig möchte ich es nur einen Blick auf einen Test in Etappen werfen und nicht live. Dasselbe: Triple-Klick, um rauszukommen. Lasst es uns aktualisieren. Weil es nicht live aktualisiert wird, was machst du? Was Sie tun können, ist, selbst wenn Sie hier drin sind, was ich tun werde, ist , dass wir uns ändern wollen. Ich werde sagen, bis es offensichtlich ist, dass ich lesen werde , dass du hier zu meinem Computer gehst und ich werde die Farbe ändern. Du kannst nicht sehen, dass ich es mache, aber ich wähle diese abholende Farbe aus. Da sind wir los. Ich klicke auf meinem Computer auf „Speichern“, nur um es zu zwingen, auf die Cloud zu aktualisieren. Das hab ich jetzt gemacht. Ich habe es auf meinem Desktop geändert, dreifach klicke dann auf Beende und lade es einfach wieder hoch. Es wird nach dem richtigen suchen. Hey, es ist rosa. Ich finde, dass es ein guter Weg ist, es zu tun. Die andere Sache ist, dass es jedes Mal, es beginnt, auf dieser Seite beginnt. Warum? Lassen Sie mich jetzt wieder auf den Computer springen und ich zeige Ihnen, wie Sie ihn zwingen können, auf einer bestimmten Seite zu beginnen. Um es auf einer bestimmten Seite starten zu können, müssen Sie sich im Prototypmodus befinden. Wenn Sie dann auf diese Seiten klicken, was passiert ist, können Sie hier sehen? Sehen Sie sich dieses kleine Symbol hier an, das nur der App angezeigt wird, aber das ist der richtige Start. Ignoriere Flow, darüber reden wir später. Aber die Grundlagen sind, dass hier der Flow beginnt. Sie können mehrere Flows haben indem Sie zwei von ihnen angeklickt haben. Dann können Sie entscheiden , welchem Flow Sie folgen möchten. Das machen wir wahrscheinlich später. Aber jetzt hab nur einen Flow. Sie können ein- und ausschalten. Habe es einfach auf der Seite, die du zuerst in deinem Prototyp anzeigen möchtest . So stellen Sie sicher, dass dies passiert. richtig ist das Testen auf einem Gerät. Es muss kein Mobiltelefon sein, es könnte ein Tablet sein, offensichtlich auf einem Computer getestet wird, Sie können es einfach auf Ihrem Computer machen. Du betreibst Adobe XD weiter. Das ist es. Wir sehen uns im nächsten Video. 22. Kursprojekt 04 – Testen auf dem Handy: Hallo allerseits, Unterrichtsprojektzeit. Wir werden auf deinem Handy testen. Wir, du bist es. Schätze, ich möchte, dass Sie die App herunterladen und Ihren Prototyp darauf testen , und wenn Sie fertig sind, möchte ich, dass Sie ein Foto von Ihrem Telefon machen, damit es eingeschaltet ist. Es kann schwierig sein, weil Sie wahrscheinlich die einzige Kamera, die Sie haben, auf Ihrem Handy ist Leihen Sie sich also das Telefon eines anderen oder sehen ob Sie mit Ihrer Laptop-Kamera etwas Magie machen können. Wenn nichts davon funktioniert, können Sie einfach einen Screenshot machen, nur einen flachen Screenshot Ihres Bildschirms, der auch in Ordnung ist. Ich möchte, dass du es auf deinem Handy testest. Sie Ihre eigenen Tests, Machen Sie Ihre eigenen Tests, stellen Sie sicher, dass alles klickt und ich möchte, dass Sie von dem, was Sie auf einem Telefon gemacht haben, begeistert sind. Es ist so cool, wenn es aus dem Computer kommt und tatsächlich anfängt zu sein, ich weiß es nicht real. Ich bin sowieso aufgeregt. Jetzt gibt es ein paar Dinge, auf die Sie stoßen könnten , wenn Sie Ihre Tests durchführen , und wir werden diese jetzt behandeln. Schauen wir uns Adobe XD an. Sie haben vielleicht im letzten Video bemerkt , dass einige der Schaltflächen , auf die ich geklickt habe, ein paar Mal klicken musste, was nicht gut ist. [GELÄCHTER] Abhängig von deinem Icon gibt es ein paar Dinge , die du tun kannst. Dieser hier ist relativ einfach zu klicken, da es eine ziemlich große quadratische Sache ist, aber hier gibt es viel verschwendeten Platz. Was du tun kannst ist, dieses Ding hier, es heißt zu Hause. Es ist in einer Gruppe. Was ist in dieser Gruppe? Nichts, nicht viel. Was ich tun werde, ist das Rechteckwerkzeug und ich zeichne einfach einen größeren anklickbaren Bereich. Da ist das, ich kann die Grenze entfernen. Ich werde tatsächlich auch die Füllung entfernen , also gibt es keine Füllung, keinen Rahmen. Es ist immer noch da, ich kann es einfach nicht wirklich sehen. Das wird mein anklickbarer Bereich sein. Ich wähle beide aus, ich gruppiere sie, indem ich Command G oder Control G auf einem PC klicke, oder du kannst mit der rechten Maustaste darauf klicken. Nennen wir ihm einen Namen , denn warum nicht? Lass uns schick sein. Ich nenne meins Icon-Home. Ich habe zuerst den generischen Namen benutzt und dann die identifizierenderen Dinge, also ist dieser hier mein Icon-Cart. Es ist einfach eine schönere Art, dies zu tun. Sie können deutlich sehen, wo sich die Icons befinden und die gleichen wie meine Ansichtsschaltfläche oder die Schaltfläche primär oder so ähnlich. Wie auch immer, gehen Sie durch, fügen Sie den Schaltflächen etwas mehr hinzu, wenn Sie zuerst testen müssen, könnte perfekt funktionieren. Sie könnten auch entscheiden, dass sie, ich weiß nicht, zu nahe beieinander liegen oder Sie haben dicke, dicke Finger. [GELÄCHTER] Du kannst nicht anders, als auf zwei von ihnen zu klicken. Führen Sie selbst ein paar Tests auf Ihrem Handy durch. Jetzt ist eine App involviert und ich bin mir nicht sicher, ob das Telefon von jedem kann, also bekommst du einen ganzen Teil, als würde es einfach nicht funktionieren, aber ich möchte, dass du es ausprobierst. Die andere Sache, auf die Sie achten sollten, sind Schriftgrößen, denn ich werde Command 100% gehen. Ich weiß, dass das für meinen speziellen Bildschirm nicht die richtige Größe hat. Ich habe es in dieser Größe entworfen, du könntest auf deinem Handy schauen, zu groß, es ist wirklich leicht zu sehen und du bist wie „zu klein“. Es ist sehr üblich, 16 als Textkopiergröße zu haben, aber Sie könnten entscheiden, dass es für diese bestimmte Sache größer oder kleiner sein muss . Schauen Sie sich ein wenig auf Ihr Telefon an, testen Sie ein paar, passen Sie die Schriftgrößen an. Wir machen nicht zu viel in Bezug auf Styling, sondern testen es. Stellen Sie sicher, dass alle Tasten funktionieren. Gehen sie zu den Bits? Oft klickst du, du manipulierst es und dann fängst du mit dem Testen an und du merkst, dass du auf einer Seite gefangen sein kannst. Sie haben vergessen, die Kasse zu manipulieren, haben jede andere Seite gemacht, aber es gibt keinen Ausweg aus dieser Seite. Testen Sie es, machen Sie einen Screenshot, laden Sie ihn in die Kommentare oder die Aufgaben oder Projekte je nachdem, wo Sie dies tun. Die andere Sache, die Sie tun könnten, ist, dass ich die Größe für mein Handy gemacht habe , das ein generisches Android-Handy ist, Sie verwenden möglicherweise eine Übergröße oder ich weiß es nicht, die iPhones sind viel länger, also das darfst du. Machen Sie es perfekt für Ihr Handy. Sie können darauf klicken und die Höhe und Breite ändern. Sie können googeln, wie hoch die Pixelbreite und -höhe für Ihr Telefon ist. Sie können sich die Standardeinstellung ansehen. diese Option ausgewählt ist, können Sie zum Apple-Tool wechseln, und es wird tatsächlich nicht aktualisiert, aber Sie können hier nicht sehen. Wenn Sie wissen, dass Sie ein iPhone 13 haben , können Sie diese eintippen. Nun, du musst dich nicht erinnern, du kannst einfach anfangen, sie hier zu tippen. Was ist es? Größe es ein bisschen breiter, 390 und mach das einfach für jeden von ihnen. Stellen Sie es neu ein, damit es auf Ihrem Handy gut aussieht. Die einzige Sache, die Sie vielleicht tun müssen, ist, uns ein wenig hinschauen zu lassen. Wir werden es später richtig machen. Aber eine Sache, bei der Sie auf ein Problem stoßen könnten. Werfen wir einen Blick darauf, wie groß das ist, 844 ist viel länger. [GELÄCHTER] Wow, viel größer. Dieses Telefon. Ich bin mir nicht mal sicher, welches ich ausgesucht habe. iPhone 13. Das Ding hier, das ist dein Ansichtsfenster unten. Sie können hier sehen, dass Ihr Ansichtsfenster es mit der Höhe Ihres Telefons übereinstimmt . Wenn es 844 ist, mach es 844, sonst schneidet es es ein wenig ab. Machen Sie einfach was auch immer die Höhe ist und ich erkläre das Darstellungsfenster. Sie können einfach zum Ansichtsfenster springen, wenn Sie davon total verwirrt sind. Es wird ein Video angezeigt, aber das ist eine Sache, die Sie ändern könnten. Testen Sie auf Ihrem Handy. Seien Sie begeistert von Ihrem Design, sein Sie auf der Welt, testen Sie es, nehmen Sie Anpassungen vor, machen Sie einen Screenshot und wir sehen uns im nächsten Video. 23. Erste Schritte mit auto-animations in Adobe XD: Hallo Leute. Bist du bereit für deine erste Animation? Wir haben Animation gemacht. Mehr Übergänge, wir haben das gemacht. Der gesamte Seitenübergang ist vorbei. Was wir jetzt tun wollen; das ist die gesamte Seitenanimation, sind einzelne Objekte. Bist du bereit? Wie komme ich dorthin? [GELÄCHTER] Los geht's. Bist du jetzt bereit? Nun, sieh dir das an. Das fällt nach unten, der Pfeil bewegt sich über, verblasst. Das ist Animation in Adobe XD, und du und ich werden das jetzt tun . Lasst uns reinspringen. Lass uns diese Animation machen. Schauen wir uns diesen kleinen Pfeil hier an, also unsere Bestätigungsseite. So wie das funktioniert, ist seltsam, es ist nicht wie eine normale Animation, wenn Sie von Adobe Flash-Tagen oder Adobe Animate oder After Effects oder irgendetwas [LACHEN] stammen, das eine Animation hat. Dies ist eine Nicht-Zeitleisten-Animation, wir duplizieren Zeichenflächen und verbinden sie. Wenn es seltsam erscheint, ist es ein bisschen komisch; ein bisschen klobig, aber es funktioniert. Was wir tun werden, ist auf dieser ersten Seite werde ich diesen Pfeil haben. Meins ist in zwei Stücken. Ich werde es auf dieser Seite haben, halte es für den Moment auf der Zeichenfläche. Eine der Grundlagen in diesem Video und dann im nächsten Video werden wir ein bisschen extremer werden oder uns hauptsächlich zeigen, dass Sie vielleicht erwischt werden. Wir haben diesen Pfeil an der Seite und wir duplizieren diese Zeichenfläche. Sie können den Namen auswählen, rechten Maustaste darauf klicken und duplizieren, kopieren, einfügen. Ich benutze einfach den Befehl C oder Control Z auf einem PC und V. Copy, paste. Also die beiden von ihnen. Bindestrich 1, wir sollten es wahrscheinlich etwas Besseres nennen, aber hey Bindestrich funktioniert für mich. Was wir damit tun müssen, ob das funktioniert, es gibt ein paar Dinge , die passieren müssen. Hey, du brauchst mehr als eine Zeichenfläche und die andere ist das, was du animieren möchtest muss auf beiden Seiten gleich benannt werden. In unserem Fall möchte ich meinen gruppieren, weil ich den Pfeil nicht getrennt vom Stalking-Bit animieren möchte den Pfeil nicht getrennt vom Stalking-Bit animieren Das liegt an dir, also wähle ich beide aus, die „Umschalt“ halten. Nun, schlag. Ich drücke „Gruppe“ , damit du mit der rechten Maustaste darauf klicken kannst oder Command G, Control G auf einem PC gehen kannst, um sie zu gruppieren. Hier drüben heißt diese Gruppe 13 und diese heißt Polygon 1 und Pfad 1 und Pfad 2. Das wird nicht klappen. Es sucht nach den Namen, also macht es seine Magie, wenn Sie etwas namens Auto Animate verwenden etwas namens Auto Animate und ohne es funktioniert es nicht. Also gruppiere sie wieder hier drüben. Einer heißt 13 und dieser heißt 14, also wird das nicht funktionieren. Nennen wir sie beide 13. Es ist praktisch, wenn Sie sie benennen , bevor Sie die Zeichenfläche duplizieren, aber ich möchte Ihnen die harte Tour zeigen [LACHEN], damit Sie es später auf einfache Weise machen können. Die sind die gleichen. Etwas muss anders sein, ich bewege das rüber. Wenn Sie „Umschalt“ gedrückt halten, während Sie es ziehen, wird dies in einer geraden Linie geschehen. Jetzt wird nichts passieren, wir müssen die Animation hinzufügen. Klicken wir auf den Pfeil und wechseln wir in den Prototyp-Modus. Ich möchte nicht zu schwer zu Shortcuts sein, aber können Sie hier oben sehen, wenn ich auf meinem Mac darüber schwebe , ist es Option 1, Option 2. Es gibt eine Menge, wenn du Sachen machst. Auf einem PC ist es Alt 1 und 2, also 1, 2, 2, 1 , 2, 1, 1, 1, 2. Wechseln Sie zwischen Design und Prototyp oder klicken Sie einfach auf die Schaltfläche. Prototyp, ich sage, du gehst hier rüber. Standardmäßig ist es im Übergang, und genau das haben wir in den letzten Videos gemacht. Wir haben die ganze Seite umgestellt und aufgeteilt, und wir haben eine Lockerung hinzugefügt. In diesem Fall werden wir von Typ zu Order animate wechseln. Das sieht einfach gut nach dem gleichen Namen und füllt alle Lücken für uns. Es war in Gruppe 13 und sucht nach Gruppe 13, und versuche einfach, die beiden zu kombinieren. Lass es uns einfach in der Vorschau sehen. Klicken wir auf den Namen „Exterieur“ und klicken wir auf „Play“. Wir werden das ein paar Mal machen, also lasse ich das hier dauerhaft offen. Tippen wir darauf. Wir sind da, wir haben es geschafft [GELÄCHTER]. Erster Teil der Animation. Herzlichen Glückwunsch, du probierst es aus. Es gibt Animationen, das sind sowieso die Grundlagen. Ich gehe mit meinen Pfeiltasten zurück. Sie können hier runter gehen und kaufen. Klicken Sie, [NOISE] es bewegt sich hinüber. Es funktioniert. Es ist nicht das, was ich will, ich möchte, dass es automatisch rübergeht. Lass uns das Ding daneben machen. Im Moment haben wir das, wenn es angetippt wird, animiere das automatisch auf dieser anderen Seite namens „ Conformation“. Es ist nicht das, was ich will. Was ich tun werde, ist diese Verbindung zu brechen. Du erinnerst dich, dass du es wieder abziehst, und deswegen tue ich es. Was wir tun werden, ist die ganze Seite anstelle des Pfeils, weil ich darauf klicken möchte. Ich möchte, dass die ganze Seite hierher geht. Es sollte sich an das Letzte erinnern, was du getan hast. Es wird die ganze Seite Auto- Animate sagen wenn es angetippt wird, und es wird funktionieren. Gehen wir hier rüber, also klicken wir auf diese, um zur Kasse zu gehen. Wenn ich irgendwo klicke, bewegt es sich. Es ist immer noch nicht ganz richtig. Was ich auf dieser Seite machen möchte ist, dass ich automatisch animieren möchte, aber ich möchte nicht, dass es tippt. Ich möchte es nur nach einer gewissen Zeit und in meinem Fall nach null Sekunden einstellen . Von dieser Seite auf diese Seite nach Null Sekunden animiere automatisch auf diese andere Seite. Das macht Sinn, also zur Kasse gehen. Klicken Sie auf. Hey, sieh uns an. Wir haben es geschafft und animieren es automatisch. Wenn wir für den Benutzer ein paar Pfeile zurückgehen, sieht er nur einen Pfeil, der sich quer bewegt. Es ist kein Problem, es ist nur die Art und Weise , wie XD sich dafür entschieden hat Sie haben entschieden, dass jeder Schlüsselrahmen eine tatsächliche Zeichenfläche ist und so animiert man es. Komplexe Animationen innerhalb von XD sind mühsam. Ich habe Animationen gemacht , bei denen sie 10 oder 20 dieser Zeichenflächen sein können , und das ist nicht großartig. Es gibt andere Tools, um Animationen für das Web durchzuführen. Dinge wie Adobe Animate sind gut, aber haben Sie diesen Prototyp-Platz gehört? Außerdem sollte ich beachten, dass wir hier eine Animation machen. Wir sollten es nicht wirklich im Drahtrahmen machen, aber das ist ein Kurs und es macht Spaß. Ich würde zu diesem Zeitpunkt keine Animation machen, nur weil es nicht an der Zeit ist, Kunden zu begeistern. Diese Art von Animationen oder Mikrointeraktionen oder wenig Erfolg sollten später bei den endgültigen Entwicklungen geschehen. Es ist das i-Tüpfelchen nicht das Drahtgitter, aber wir müssen diese Dinge für diesen Kurs lernen. Also bewegender Pfeil ist es. Wir haben Bewegung gemacht, du kannst viele Dinge tun. Ich gehe zurück in den Entwurfsmodus und mache das kleiner. Nun, das hat nicht funktioniert, weil es versucht, unsere Strichgröße beizubehalten und alles auszurichten und schick zu sein. Standardmäßig werden wir uns das später noch einmal ansehen . Responsive Größe ändern, das ist schick. Es versucht ein paar Sachen zu machen , die wir gerade nicht machen wollen. Bei dieser Auswahl werde ich sagen, schalte das Ding aus, also sage ich dich dort. Es wird hier drüben größer sein, lasst uns das mal ausprobieren. Klicken wir hier auf diese Zeichenfläche. Klicken Sie auf „Kaufen“. Hurra. Es wird größer und bewegt sich rüber. Sie können andere Dinge tun, Sie können sich für die Rotation entscheiden. Ich entscheide mich dafür. Es wird 180 von dort aus beginnen, wo es ist, es wird sich umdrehen. Schauen wir uns ein bisschen an. Was würdest du dort sehen? Ich hab es verpasst. Sie klicken auf einen und klicken noch eins. Hurra. [GELÄCHTER] Du verstehst die Idee so. Denken Sie daran, Dinge zu drehen. Ich habe mein Auswahlwerkzeug bekommen. Bewegen Sie es direkt außerhalb von hier, Sie können es manuell machen. Ich schalte meine aus, weil es nicht wünschenswert aussah. Die anderen Dinge. Größe, du kannst es tun. Sie können eine Rotation durchführen und die Deckkraft ausführen. Was ich nicht tun kann ist, dass ich es von hier aus nicht löschen kann. Wenn ich es von der Seite lösche Hoffnung, dass es von hier weg ist und es hier erscheinen wird und vielleicht magisch verblassen wird, wird es das nicht tun. Lass uns kaufen gehen, und es erscheint einfach. Es weiß nicht, was ich tun soll, weil ich nicht weiß, wo das Original ist. Ich werde einfach als Standardeinstellung verblassen. Was wir tun müssen, ist das rückgängig zu machen, ist, dass wir es nicht löschen. Wir drehen einfach das Aussehen; diese Deckkraft hier, drehen Sie es nach unten oder so viel wie oder ein wenig, wie Sie möchten. Es wird dort anfangen und zu diesem übergehen. Lass uns das jetzt ausprobieren, zur Kasse gehen. Bereit. Verblasst ein und bewegt sich hinüber. Jetzt haben wir nicht mit Lockerung herumgespielt , also schauen wir uns ein wenig an. Die Bestätigungsseite wechselt zum Prototyp und wird das Ein- und Aussteigen erleichtern. Wie sieht das aus? Es sieht ganz nett aus, du kannst vielleicht entspannen. Lockern ist so, als würden Sie sich vorstellen, dass Sie etwas klebrigen Kleber entweder zum Ein- oder Ausziehen hinzufügen . Das Out ist diese Seite; Der fertige Teil der Animation und die Leichtigkeit ist die andere Seite. Wenn ich es lockere, wenn ich auf diesen klicke und einfach hierher gehe. Sieh es dir an. Es fängt schnell an und dann klebrig klebrig raus. Bereit? Es könnte schwierig sein, Ihre Lockerung zu erkennen, da die Dauer ziemlich kurz ist, also gehen wir bis zu einer Sekunde. Wir haben es gesehen, sie haben es nicht gehört. Sie können sehen, dass es schnell beginnt und am Ende langsamer wird. Ich hasse meine Animation, aber [LACHEN] die Größe bringt mich um. Gehen wir zu Design und machen diese Größe rückgängig. Es ist schwer zu erkennen, ich schätze nur, dass es die Größe hat. Ja, es sieht weniger aus. Spielen Sie alleine mit der Lockerung herum. Werfen wir einen Blick auf den Prototyp, damit wir uns entspannen. Spiel mit ihnen herum. Du weißt, was ein Bounce bewirkt. Sie einen Blick auf Schnappen und Aufziehen, und die meiste Zeit, wenn Sie sich nicht sicher sind , einfach ein- und auszusteigen. Es klebt an beiden Enden, also ist es an beiden Enden langsam und es geht schneller in der Mitte und oft sieht es wirklich gut aus. Das ist oft eine schöne natürliche und dann digitale [unhörbare] Bewegung. Die Regeln für die Animation benötigen Sie mindestens zwei Zeichenflächen. Auf diesen Zeichenflächen benötigen Sie etwas, das sich ändert, das denselben Namen hat. Machen wir einfach ein kleines Beispiel. Wir haben zwei Zeichenflächen. Das Ding hier heißt. Hier drüben heißt das Icon-Twitter. Großartig, also musste ich es nicht ändern. Wenn Sie Dinge tatsächlich manuell benannt haben, erinnert es sich daran und sagt : „Wahrscheinlich möchte es diesen Namen behalten.“ Während es sich um eine zufällige Gruppe oder eine Zufallslinie handelt, dupliziert es sie einfach und Sie enden mit Gruppe 10, 11, 12, diesen Dingen. Gleicher Name, das ist der Pfeil; zwei Zeichenflächen. Etwas zwischen den beiden. In unserem Fall lasst uns das Springen hier runter machen, also wird es einfach nach unten gehen. Das ist nur ein Unterschied. Bist du bereit dafür? Wir werden Sie beide begeistern und ein anderes Problem ansprechen , das ich unabsichtlich behandeln möchte. Balance, also bist du bereit? Cool. Sieh dir das an. Siehst du, du sagst : „Oh, das ist zwar gut dafür, aber der Pfeil ist komisch.“ Kann ich es separat machen? Nein. Es ist ziemlich rudimentär, da in der Animation oder die ganze Art Board ihr Ding machen muss. Sie können meistens keine einzelnen Teile von Lockerung und Animation auf einzelne Teile anwenden Animation auf einzelne Teile . Ich zeige es dir im nächsten Video. Wir werden ein bisschen tiefer tauchen, aber zwei Zeichenflächen müssen gleich benannt werden , etwas anderes. Sie können Farbe verwenden, Rotation verwenden, Sie können die Deckkraft verwenden und sie müssen gleich benannt werden. Sehe ich sie? Jedenfalls. Das ist es für dieses Video, lass uns in das nächste springen. 24. Mehr über die Animation in Adobe XD verstehen: Hi, allerseits. Wir bringen unsere Animation auf die nächste Stufe. Sei nicht zu aufgeregt. Aber lasst uns „Kaufen“ Folien von außerhalb des Bildschirms gehen und dann erscheint die Überprüfung. Es soll dir den nächsten Schritt zeigen. Wir haben im letzten Video etwas ganz Einfaches gemacht, und dies wird uns zeigen, wie man etwas anderes Timing macht, wie man es von der Zeichenfläche startet und ein paar Probleme, auf die Sie stoßen werden. Es ist vielleicht ein bisschen fortgeschritten für diese Phase des Kurses, aber wir müssen diese Dinge früh genug behandeln , damit wir sie ein paar Mal wiederholen können, und ich werde einige Klassenprojekte aufstellen und Sie werden wahrscheinlich auf ein paar der Probleme stoßen, die ich in diesem Video so gut ich kann klären werde . Wenn du bereit bist, bin ich bereit. Lass uns das machen. Um diese Animation zu machen und schauen wir uns das an. Wenn Sie also möchten, dass Dinge wie im Moment passieren, passiert alles gleichzeitig, was den Dingen entspricht, die passieren und sie alle gleichzeitig passieren; gleiche Lockerung, gleiches Timing. Was ich tun möchte ist, dass ich möchte, dass Dinge passieren. Ich möchte, dass dieses kleine Häkchen erst hereinkommt , nachdem der Pfeil weg ist. Was ich tun werde, ist die Dinge aufzuräumen und dir zu zeigen, wie du Dinge aufräumen kannst. Ich möchte nicht, dass das Bouncing für Twitter ist, weil es für dieses Tutorial nur ein bisschen ablenkt. Was ich tun werde, ist das auszuziehen, ich habe ihn gerade gelöscht, also wirst du bemerken, dass er jetzt weg ist. Lass uns eins zurückgehen. Es ist da und es weiß nicht was ich damit machen soll, also habe ich es gelöscht. Es verblasst einfach. Was ich tun werde, ist es tatsächlich zu greifen, kopieren, es hier einzufügen, zu überprüfen, ob es den gleichen Namen hat, manchmal wird es danach eine kleine Nummer hinzugefügt. Aber nein, nicht das Gleiche. Lass es uns noch einmal in der Vorschau sehen. Ja, geh. Nur die Pfeile funktionieren, aber was ich tun möchte ist, dass das Häkchen angezeigt wird. Was ich tun werde, ist nebenbei vorbei, ich werde wieder dem Design zukehren. Ich werde machen, wohingegen mein kleiner Pfeil? Der Pfeil wird umgekehrt sein. Ich möchte, dass es anfängt und dann ausblendet. Testen wir das. Testen Sie immer. Ich fühle mich, als wäre ich super gut in diesem Zeug. Wenn ich versuche, fünf Schritte zu machen und zu denken, dass es großartig wird, werde ich mir eine Vorschau ansehen und feststellen, dass etwas schief gelaufen ist. Testen Sie also einfach nach jeder kleinen Änderung, die Sie vorgenommen haben, nur um sicherzustellen, dass Sie nicht alles korrigiert haben. Weil es keinen Spaß macht , 10 Mal rückgängig zu machen, um wieder für etwas Einfaches zu beginnen , das Sie möglicherweise am Anfang korrigiert haben. Wir haben diese Animation. Als Nächstes möchten wir, dass das Kontrollkästchen angezeigt wird. Was wir am Ende tun, ist das Kopieren und Einfügen und ein anderes zu haben. Es geht hier, es verblasst. Es bleibt verblasst und ich möchte, dass das Häkchen erscheint. Was ich tun muss, ist ein Häkchen auf diesem und bei diesem zu haben . Bringen wir es in unseren Datei-Import, Command Shift I. Ich schätze, es ist Command Shift I und Ihre Übungsdateien, wo sind diese? Es gibt einen namens Icon Tick. Du kannst dir deinen eigenen besorgen. Ginormous Zecke. Halten Sie die Umschalttaste gedrückt, skalieren Sie es, also fängt es hier an. Ich kopiere es, füge es hier ein, also ist es in genau derselben Position, und diese möchte, dass die Deckkraft ausgefallen ist. Sieh dir das an. Lass es uns ausprobieren, also haben wir 1, 2, 3 davon. Mittlerweile das Kontrollkästchen und nichts passiert. Weißt du warum? [GELÄCHTER] Ich werde so tun, als hätte ich das absichtlich getan, um dir eine Lektion zu erteilen. Aber nein, ich hab's vergessen. Es gibt diese Seite hier. Wenn wir in den Prototyp-Modus gehen, heißt es nach einiger Zeit dorthin, genau null Sekunden gehen dorthin. Dieser wusste nicht dasselbe, kommt einfach hierher und geht, ich weiß nicht, was ich tun soll. [GELÄCHTER] Wir können tatsächlich hierher gehen nachdem es sich an das Letzte erinnert hat, was ich null Sekunden lang gemacht habe, und ich werde es nicht zum Springen bringen. Ich bringe es zum Anfangen. Wenn Dinge außer Bounce verblassen, spielt es keine Rolle, ob Sie sich entspannen, einfach einschalten oder nicht. Es ist so schwer, eine Lockerung mit nur Dingen zu sagen , die verblassen. Schwitzen Sie nicht, also fangen wir mit dieser Seite an. Lass uns spielen gehen. Lass uns das Ding kaufen, rutscht rüber, und dann verblasst das. Sieh dir das an. Wenn du wie alles bist, was passiert ist, wollte ich, dass der Pfeil für eine Weile weg ist , bevor das Häkchen auftauchte. Du kannst solche Kleinigkeiten machen. Also dieser hier, sagen wir, wenn es auf diese Seite kommt, fange sofort an zu gehen, du kannst sagen, warte nur zwei Sekunden, Mann, chill out. Warte da. Lass uns gehen. Mittlerweile spielt diese Seite die ersten beiden, wartet ein bisschen, spielt die zweite. Zwei Sekunden sind zu lang es fühlt sich an. [GELÄCHTER] Du hast das Gefühl, ich weiß es nicht. Wir haben es auf eine andere Ebene gebracht. Wir haben drei hinzugefügt. Sie können 15 haben, wenn Sie versuchen möchten, XD dazu zu bringen, Ihre Animation zu machen, beugen Sie sich Ihrem Willen zu. Es wird jedoch sehr kompliziert, aber machen Sie es Schritt für Schritt. Das ist in Ordnung. Das Letzte, was ich dir zeigen möchte , ist ziemlich kompliziert. Ich würde es lieben, später im Kurs zu sein, aber ich weiß, dass ich ein Klassenprojekt aufstellen werde und du wirst losgehen und auf dieses Problem stoßen. Also lasst es uns identifizieren und jetzt da reingehen. Auch wenn es sich anfühlt, als wäre es etwas zu schwer, ist es früher in diesem Kurs etwas zu schwer. Wir werden es später wieder machen und es wird einfacher und einfacher. Ich tue so, als wäre ich du, ich bin deine Hände selbst und ich gehe Design, ich gehe auf meine Zeichenfläche. Dann sagte ich, ich muss Animationen machen, ich gehe dieses Telefon aus. Ich werde es ohne triftigen Grund hierher bringen nur um es getrennt zu halten. Ich weiß, dass ich mir einen Kreis schnappen und ihn herausziehe. Ich wähle eine Füllfarbe aus und es wird meine Animation sein. Ich werde wählen, ich weiß es nicht. Wow, welche Farbe hat diese Farbe? Das ist die Farbe. Die Regeln lauteten, dass du zwei von ihnen brauchst. Ich werde zwei davon kopieren und einfügen und was ich tun werde, ist ich sicherstellen muss, dass es derselbe Name ist, also heißt dieser Elipse 6. Wir nennen das eine Animation 1 und ich nenne das eine Animation 2. Man muss sie nicht benennen, nur um es in diesem Kurs klarzustellen. Auf Animation 1 gibt es etwas namens Elipse 6. Das heißt Elipse 6, großartig. Das wird klappen. Was ich tun werde, ist, dass ich dich außerhalb des Bildschirms starten möchte und dort passiert das große Problem. Hier haben wir einen Fehler gemacht, weil es dir gefällt, ich starte sie außerhalb des Bildschirms und dann verschiebe ich sie. Fängt hier an, denken Sie daran, dass Dan sagte, ich möchte zum Prototyp wechseln. Ich möchte diese beiden Seiten verbinden. Ich möchte, dass der Auslöser kurz nach einiger Zeit ist, vielleicht nach null Sekunden, um hier zu animieren. Weil der Name derselbe ist, wird es funktionieren. Wenn ich auf „Play“ klicke, verblasst es einfach, anstatt einzuziehen. Das Problem ist, dass dies nicht wirklich auf Animation 1 liegt. Es ist an, erinnerst du dich an die Pasteboard? Denken Sie daran, dass ich alle meine Seiten habe und dann gibt es zufällige Pasteboard 1. Das ist das Problem. Wie repariert man es? Es dreht sich alles um Timing. Wenn ich das rückgängig mache, bin ich wieder hier. Ich habe meinen Trigger nicht hinzugefügt und ich habe diesen nicht außerhalb des Bildschirms verschoben. Bevor du irgendetwas machst, ist diese ganze Animation. Wenn ich jetzt sage, bevor ich es außerhalb des Bildschirms verschiebe, wenn ich diese Animation hinzufüge, die Triggerzeit sagt , habe ich all das getan, und wenn ich es jetzt abschiebe , heißt es : „Hey, es wird versuchen , das von der pasteboard, aber es wird meine automatische Animation brechen. Also lasse ich ihn nicht zu, es ist vom Bildschirm, aber es ist nicht mehr auf der Pasteboard. Es ist immer noch an. Meine Benennung ist zu sehr [unhörbar] geworden, aber Sie haben die Idee. Denken Sie daran, Bindestrich 1, Bindestrich 2. Es ist immer noch auf Bindestrich 1, obwohl ich das hier rübergeschoben habe. Stellen Sie also sicher, dass Sie die automatische Animate hinzufügen , bevor Sie sich bewegen , und es wird versuchen, es für Sie in Verbindung zu halten. Das einzige andere Problem ist, wie ist das, es ist hier in der Pasteboard verschwunden. Sie können es auswählen. Es ist ein bisschen knifflig. Hier drüben gibt es, wie gesagt, ein paar lustige Macken für das XD und die Animation, aber ich habe es ausgewählt. Lass es uns jetzt spielen. Es geht weiter. Es braucht etwas Lockerung. Lasst uns schnappen gehen. Das sehen wir uns an. Bereit? Spiel. Es hat diese schnelle Leichtigkeit. Es geht ein bisschen vorwärts und ein bisschen zurück, geht ein bisschen und ein bisschen zurück, es sieht ganz nett aus. Das ist es. Wenn Sie Animationen machen, bringen Sie zu Seiten und fügen Sie einfach frühzeitig automatische Animate hinzu. Dies bedeutet, dass es verbunden bleibt, wenn Sie am Ende etwas von der Kante in die Zwischenablage ziehen Ende etwas von der Kante in die Zwischenablage . Kannst du es danach auf die rechte Seite ziehen ? Ich kann keinen Weg finden. Vielleicht findest du einen Weg, aber du musst es auseinander brechen und neu anfangen, füge die Reihenfolge „animate“ früh hinzu. Jetzt wird diese Version hier oben völlig funktionieren, hauptsächlich weil ich zuerst die automatische Animate hinzugefügt habe, bevor ich es abziehen werde . Lass es mich dir einfach zeigen. Ich füge hier etwas Abstand damit ich ihn tatsächlich außerhalb des Bildschirms verschieben kann. Denken Sie daran, dass es hier beginnt und schauen Sie, es ist immer noch Teil dieser Bestätigungsseite, da automatische Animate bereits angewendet wurde bevor ich es abziehe. Ist das nützlich? Ich habe das Gefühl, dass das so weit im Kurs ziemlich kompliziert ist , aber wir kommen dorthin. Wo bist du wieder? Hey, es fängt außerhalb des Bildschirms an, springt ein wenig ab, verblasst und wir warten darauf, dass unser kleines Häkchen erscheint. Das dauert zu lange. Das ist Animation der nächsten Ebene. Wir haben eine zusätzliche Zeichenfläche um mit dem Timing herumzuspielen, weil wir wissen, dass wir die gleiche Lockerung und die gleiche Art von Animation zwischen der gesamten Zeichenfläche durchführen müssen , nicht einzelne, aber wir können fälschen Sie es vor, indem Sie mehr als eine Zeichenfläche haben, und Sie können Probleme haben, wenn Sie versuchen, etwas von der Seite zu entfernen und es hineinzuziehen Sie können Probleme haben, wenn Sie versuchen, etwas von der Seite zu entfernen und es hineinzuziehen , wenn Sie das automatische Animate nicht zuerst hinzufügen. Es landet auf der Pasteboard, was schlecht ist. Dies wird immer nützlicher , wenn wir Dinge wie die Navigation machen. Später im Kurs klicken wir darauf, und die gesamte Navigation wird hineinrutschen, nicht nur ein lahmer Pfeil, und wir müssen diesen Trick machen, sonst wird er auf der Pasteboard landen. Das ist es. Wir sehen uns im nächsten Video. 25. Kursprojekt 05 – Meine erste Animation: Okay, Unterrichtsprojektzeit. Du wirst deine erste Animation erstellen. Wenn Sie neu in der Animation sind und das wenig schwierig finden, erstellen Sie einfach neu, was wir im Video gemacht haben, und laden Sie es hoch. Wenn du dich mutig und selbstbewusst fühlst und etwas tun wirst, möchte ich, dass du etwas anderes machst. Die Pfeile rutschen zu lassen und es macht keinen Spaß. Denk darüber nach, was du tun könntest. Es könnte sein, dass es aus einer anderen Richtung kommt. Es könnte eine andere Form haben, vielleicht eine andere Ikone. Denken Sie ein wenig darüber nach, wie Sie die Idee der Bestellung vermitteln würden , und ich würde sie gerne sehen. Abhängig von Ihrem Computer, Mac und PC können Sie Ihre Animation tatsächlich aufnehmen und hochladen. Ich zeig dir, wie es geht. In XD können Sie eine Vorschau Ihrer Animation anzeigen, also gebe ich es Ihnen. Was du tun kannst. Siehst du diese kleine Aufzeichnungsschaltfläche auf einem PC, es ist über dieser linken Seite. Auf einem Mac ist es relativ einfach, du klickst darauf. Es wird mich darum bitten, meine Systemeinstellungen zu überprüfen. Lass es die Aufnahme machen, das ist in Ordnung. Du richtigst sie. Öffnen Sie die Einstellungen unter meinem einzigen XD, der die Berechtigung benötigt, beenden Sie und öffnen Sie sie später erneut. Es scheint einfach zu funktionieren , wenn du es später machst. Wenn ich jetzt auf die Aufnahme klicke, kannst du einen kleinen Timer einstellen? Ich gehe dazu und das ist meine Animation. Ich höre damit auf. Es wird mich fragen, wo ich es speichern soll. Lass mich meins für den Moment auf meinen Desktop legen. Mal sehen , was wir haben. Also Desktop, du hast ein kleines MP4, das mir meine kleine Animation zeigt, und das ist diejenige, die du beide auf deine [unhörbare] hochladen sollst. Es ist jetzt ein Kreis, weil er einen Finger mit Ihrem Touchpad darstellen soll oder zumindest Ihren Bildschirm berühren soll. Auf einem Mac ist das also relativ einfach. Auf einem PC ist es nicht so einfach. Ich denke, die Aufnahmetasten auf der linken Seite und könnten Sie bitten, die Software von jemandem zu benutzen. Ich denke, es verwendet Microsoft Xbox Records Software und sieht, wie weit Sie kommen. Wenn du so bist, muss ich Dinge installieren, die zu schwer sind. Wenn sich alle im zu harten Korb befinden, versuche ich es gerne, weil ich deine Animation gerne sehen würde. Aber was Sie tun können, ist, alle diese drei Ihrer oder zwei Animationen zu screenshot drei Ihrer oder zwei Animationen zu zu machen, wenn Sie bereits zwei gemacht haben. Wenn Sie Zeit haben und üben möchten, machen Sie 10 verschiedene Arten von Dingen. Aber wenn du nur die Grundlagen willst, mach einfach diese eine einfache Animation und einen Screenshot davon, lade sie hoch. Ich würde das gerne sehen. Bis jetzt haben Sie es in den Kommentaren und allen Zuweisungen auf der Website hochgeladen . Was Sie jetzt tun können, ist dass ich tatsächlich anfangen würde, Dinge in den sozialen Medien zu sehen. In Ihren Übungsdateien gibt es eine Gruppenseite namens Bring Your Own Laptop online. Es ist eine Facebook-Gruppe. Es gibt eine ähnlich benannte LinkedIn-Gruppe. Es heißt die LinkedIn-Gruppe „Bring Your Own Laptop“. All dies sind meine Handles für Instagram und Twitter, markiere mich darin und ich sehe es gerne. Sie können auch einen Blick darauf werfen, was andere Leute getan haben. Verwenden Sie den Hashtag XD, er hilft Ihnen, nach Dingen zu suchen und die Arbeit anderer Leute zu sehen. Aber ja, tu es, lade es an den regulären Ort hoch, aber schaut auch darauf, es in soziale Medien hochzuladen, und wenn du in soziale Medien hochlädst, stellst du dort auf wie: hey, das ist meine erste Animation . Ich würde gerne Feedback haben und wir sind ein wirklich freundlicher Haufen. Wenn Sie sich ein bisschen Sorgen machen, wissen wir nicht, dass Sie es aufgestellt haben. Wir sorgen dafür, dass wir unsere Gruppe moderieren. Ich weiß, dass wir dort einige großartige Werte gesetzt haben , dass dies für neue Leute ist. Wenn Sie eine neue Person sind, laden Sie es hoch, erhalten Sie Feedback. Sagen Sie uns, welche Probleme Sie hatten welche Dinge Sie tun möchten. Wie hat diese Person das gemacht? Kannst du es mir zeigen oder was kannst du mir sagen? Es ist diese Art von Facebook-Gruppe. Es ist weniger Instagram-Glamour-Show und mehr von, schau was ich gemacht habe. Ich bin gespannt, obwohl vielleicht in der großen Welt der Animation es vielleicht in der großen Welt der Animation nicht die beste der Welt ist, aber das ist okay. Wir sind hier, um zu lernen, um Kritik zu bitten, wenn Sie es wollen, sonst posten Sie es und sagen, dass ich das mit Daumen hoch gemacht habe. Lassen Sie uns wissen, wie Sie den Kurs finden. Eine Sache ist, wenn Sie es an die verschiedenen Orte hochladen , können Sie in einigen sozialen Medien das Video einfach direkt hineinlegen und es zum Laufen bringen. Aber einige der Kommentare und einige der Aufgaben Uploads müssen Sie sie zuerst auf etwas wie YouTube oder Behance oder Vimeo oder etwas anderes hochladen wie YouTube oder Behance oder und dann den Link einfügen. Es wird über den Link und nicht über das eigentliche Video selbst angesehen . Wenn das zu schwer für dich klingt, mach einfach Screenshots. Das ist in Ordnung. Aber ich würde es gerne sehen und es auf einem kostenlosen YouTube-Konto oder Vimeo-Konto oder in Behance veröffentlichen oder was auch immer Sie tun können, um es irgendwo zu hosten, Ihr Video und dann einfach den Link zu posten. Das war's also. Mache deine erste Animation, einfach oder fortgeschritten, lade sie hoch, ich würde sie gerne sehen. Das war's. Geh zu deinen Hausaufgaben und wir sehen uns im nächsten Video. 26. Teilen von Wireframes für Kommentare in Adobe XD: Hallo allerseits. In diesem Video werden wir in diesem Fall unser Drahtgitter mit unserem Kunden teilen . Wir werden es ihnen schicken. Sie werden in der Lage sein, seinen Namen auszudrücken, Neil und sie werden Kommentare und verschiedene Pins hinzufügen . Diese hier können sie Pins hinzufügen, um bestimmte Dinge zu verspotten, um mir zu sagen, ja, um mir Feedback zu geben. Als Designer zeige ich Ihnen, wie Sie den Link erstellen, an ihn senden und wie Sie mit diesen Kommentaren zwischen Ihnen und Ihrem Kunden arbeiten . Lasst uns reingehen, um loslegen zu können. Gehen wir hier zu diesem dritten Tab. Design-Bewertungen, Prototyp-Bewertungen, schauen wir uns jetzt an teilen. Share erlaubt uns auf dieser Seite hier einen Link zu senden, nennen wir ihn Neil. Neil ist eine fiktive Figur. Er ist eine einfache Kreatur. Ich benutze ihn als Beispiel , weil ich das für jeden einfach halten möchte , an den ich es schicke. Weil ich ihr Fachwissen auf einem Computer nicht kenne , so etwas, also ist das ein Neil. Das erste, was wir tun müssen, ist, dass wir seltsam werden müssen, dass diese Animation beginnt. hier im Prototyp darauf, Klicken Sie hier im Prototyp darauf, wohin das Ding gehen soll. Wenn du zwei hast, wie ich es gerade getan habe, schaltest du eins aus und hast einfach eins an. Sie können mehrere Flows haben. Das ist zu viel für das, was wir gerade machen, aber wir werden nur einen Flow haben, zumindest auf einer dieser Seiten. Hier wird es anfangen. Ich kann teilen, ich werde Flow 1 wählen, und der gebräuchlichste ist Design Review. Es wird ein Kommentieren ermöglichen , was das große Ding ist. Es liegt an Ihnen und wie sicher Sie sein müssen, ob es passwortgeschützt ist, Sie geben ihm nur ein Passwort Sie geben ihm nur ein Passwort oder Personen, die Sie per E-Mail gesendet haben, immer noch nicht passwortgeschützt, aber nicht jeder mit dem Link kann darauf zugreifen. Ich möchte, dass jeder mit einem Link zugreifen kann. Alles, was Sie tun, ist auf „Link erstellen “ zu klicken , es denkt eine Sekunde darüber nach und Sie sollten eine kleine URL erhalten. Das ist das, was du teilen möchtest. Sie können es an Behance senden, Sie können es auf einer Website einbetten, wenn Sie möchten. Wir schicken einfach einen Link. Wir werden den Link kopieren, und ich öffne ihn und tue so, als wäre ich Neil. Warte da, ich ziehe meinen Neil Hut an. Ich bin Neil und ich habe den Link in einer E-Mail oder DM oder so, du hast ihn ihm geschickt. Ich öffne es ihm und das sieht Neil. Das Schöne daran ist , dass Neil sich nicht einloggen muss, was wahrscheinlich einer der wirklich großen Vorteile hier ist. Es fällt ein wenig aus, wenn Sie sich für eine Adobe ID anmelden müssen, nur um Ihre Arbeit zu überprüfen. Diese hier können sie alles als Gast machen. Sie können anfangen, damit zu interagieren. Ich bin Neal, gehe durch und ich gehe so, das scheint gut zu sein. [GELÄCHTER] Gehen wir zurück. Ich habe keinen meiner Links aussortiert. Schlecht, schlecht, schlecht. Ich habe meine Links nicht funktionieren, was schlecht ist, ich sollte die für Neil reparieren, aber es gibt einige grundlegende Navigation. Möglicherweise müssen Sie Ihren Kunden ein wenig darüber informieren, wie das funktioniert. Homepage, radeln durch sie hindurch. Sie können die Pfeiltasten benutzen und wo es schön wird , ist , dass wir sagen, dass sie entscheiden, dass dies ist, lass uns mehr lernen, dieser Sprung, und ich mag den Mann, sie wollen einen Kommentar hinzufügen. Sie können zwei Arten von Kommentaren hinzufügen, nur generische Kommentare, klicken Sie auf „Senden“, und sie können entscheiden, ob sie sich mit Ihrer Adobe ID anmelden um etwas offizieller zu sein. Es ist kostenlos, sich für eine Adobe ID anzumelden. Sie müssen keine Creative Cloud-Lizenz haben, eine kostenpflichtige Lizenz, die Sie nur eine kostenlose ID verwenden können oder sie können dies tun. Das machen wir für Neil. Das Coole daran ist, Neil interagieren kann, Kommentare hinzufügen kann, ohne das Kaninchenloch der Anmeldung und Passwörter und das Zeug hinunterzugehen das Kaninchenloch der Anmeldung . Das ist echt cool. Sie können eine generische Seite für diese bestimmte Seite erstellen, aber Sie können auch eine spezifischere erstellen. Sehen Sie sich diese Seite an, platzieren Sie die PIN, hier muss die Ausbildung möglicherweise beim Kunden sein. Erklären Sie, dass Sie Pins und generische Kommentare machen können. Je hier können Sie sich hier für dieses entscheiden. Sie werden sagen, dass so etwas nicht unser Logo ist, oder? Absenden. Das ist ein bisschen spezifischer mit einer Pin. Es zeigt tatsächlich auf etwas, während dieses nur ein bisschen mehr überall ist , wie generisches Feedback. Wie greifen Sie als Designer auf Ihrer Website darauf zu? Nicht mehr Neil, auf Wiedersehen Neil. Ich werde Dan der Designer sein. Im Moment nicht. Wir sprechen immer wieder darüber, aber sie werden möglicherweise die Kommentare in der App einbringen die Kommentare in der App einbringen die Sie mögen würden, warum ist das da? Im Moment ist es einfach nicht. Was Sie als Designer tun, ist, Sie eine E-Mail erhalten, in der erklärt wird, dass jemand Ihrem Link einen Kommentar hinzugefügt hat. Sie erhalten eine E-Mail, in der Sie darüber informiert werden. Oder du gehst einfach zur webbasierten Version. Obwohl dieser Link hier für Neil gedacht ist, können Sie ihn tatsächlich einfach für sich selbst verwenden . Ich kopiere den Link. Da gehst du. Ich bin derselbe Link wie Neil, aber weil ich mit meiner Adobe ID angemeldet bin, kann ich ein paar zusätzliche Dinge tun. Ich sehe Neils Gastkommentare, was cool ist. Werfen wir einen Blick darauf. Dies ist in unserem Logo. Wenn ich darauf klicke, siehst du, dass es mich zur Seite gebracht und es hat wie ein kleiner Pin, der sich aufstellt. Mehr als eine Pin haben Sie verschiedene Zahlen. Cool. Ich kann zurückgehen und nein sagen. Reichen Sie es ein, und das wird hier zu dieser Geschichte beitragen. Jetzt kann Neil als Gast zurückkehren und auch weiterhin Kommentare hinzufügen und auch danach schauen. Nun, ich könnte entscheiden, dass ich alles getan habe und ich werde tatsächlich hier hineingehen und dieses lösen, also ist es von dieser Liste weggegangen. Vorbei, es ist fertig, ich habe das von meiner Liste abgehakt. So kommentiert man. Sie können sich entscheiden, dies als Gast zu tun oder die Person dazu zu bringen, sich anzumelden, ein bisschen mehr Details für sie, da sie benachrichtigt werden, wenn ein Update stattgefunden hat oder sich für Sie bewerben wird. Sagen wir, ich entscheide jedoch, dass alles, was hier springt, ich das reparieren werde. Da ich Dan der Designer bin, gehe ich hier rein und es ist diese Seite hier. Ich gehe zurück zum Prototyp. Diese Seite hier hat diesen Button hier, oder? Zoomen wir hinein. Es ist dieser Knopf hier. Es hat einen Sprung nach links gedrückt. Wir werden nur eine Lockerung machen und wir werden es retten. Wie aktualisieren wir es? Es wird nicht automatisch aktualisiert. Du musst ihm sagen, dass es aktualisiert werden soll. Du gehst zum Teilen und gehst zu diesem. Kannst du den Update-Link sehen? Alles, was es tut, ist, dass es sich Ihr Dokument ansieht und alles aktualisiert . Der Link ist immer noch derselbe. Du musst keinen neuen schicken und du kannst sagen: „Hey , Neil, sieh dir diesen Link noch einmal an“ oder schicke ihn ihm noch einmal und sagst: „Hey, sieh es dir an. Was hältst du davon?“ Ich bin wieder Neil, und ich bin wieder zum Link gegangen. Ich kann meinen Kommentar immer noch sehen, weil der Standarddesigner nicht darauf geantwortet hat, aber schauen wir uns ein wenig an. Homepage, klicken wir auf diese und ein bisschen wohler. Was halten wir davon? Ich sage: „Guter Job Dan.“ [GELÄCHTER] Das ist das Kommentieren oder die Grundlagen des Kommentars in Adobe XD. Das einzige, was man im Auge behalten muss, ist, dass sie es irgendwann in die App bringen können. Ich möchte wirklich, dass sie es tun, das tun sie im Moment aber nicht. Ich bin eher in Adobe XD als in einem Browser, ich möchte sie hier unten sehen können. Komm schon, Leute. Aber bis dahin benutze einfach diesen Weblink, um die Kommentare zu sehen. Sie werden jedoch per E-Mail benachrichtigt, wenn sie dort gepostet werden. Das ist das Teilen Ihrer Wireframes mit Neil. Auf Wiedersehen, du. Auf Wiedersehen Neil und auf Wiedersehen. Wir sehen uns im nächsten Video. 27. Moodboards und Ressourcen für Hi Fidelity UI Design in Adobe XD: Hallo allerseits. In diesem Video werden wir darüber sprechen, dass Sie sich von Ihrer High-Fidelity-Arbeit inspirieren lassen. Bisher haben wir in geringer Treue gesucht . Darüber haben wir vorhin gesprochen. Denken Sie daran, Wireframes mit niedriger Wiedergabetreue und High-Fidelity-Fancy Word für alle Bilder, Farben und Schriftarten, die aussehen und sich wie eine fertige App anfühlen. Bevor ich weitermache und anfange, etwas zu entwerfen, bekomme ich aus ein paar Gründen gerne ein bisschen Moodboard. Eine, um meine eigenen Vorstellungen davon zu bekommen , wie diese Dinge aussehen werden, das Gefühl dafür, aber auch an den Kunden zu senden. Bevor ich anfange zu entwerfen, teile ich gerne ein Moodboard, um sicherzustellen, dass ich auf dem richtigen Weg bin. Wir haben uns beide ausgerichtet und wir rudern beide in die gleiche Richtung. Teilen Sie frühzeitig ein Moodboard mit Ihrem Kunden oder Produktmanager, wer auch immer es ist, damit er sagen kann, ja, das fühle ich. Während Sie diesen ganzen Indie-Rock, Skater-Marken Teestil hinuntergehen könnten . Denn das ist es, was du fühlst, die Zoe Owl möchte, aber der Kunde steht völlig im Widerspruch dazu und es ist vielleicht nicht so, dass du Recht hast und er falsch liegt, es ist mehr als du muss wenigstens einander verstehen oder zumindest die Person zusammen verstehen. Wenn Sie ein Moodboard schnell und früh an den Kunden erstellen, werden Sie davon abhalten , 10 Versionen davon zu erstellen und sie an den Kunden zu senden , und hoffentlich ist [LACHEN] einer von ihnen gut . Inspiration bekommen, all das Moodboard, woher bekommt man es? Es gibt viele Orte. Jedes Mal, wenn ich eines dieser Videos vorschlage, schließen sie es oder fügen eine Paywall oder so hinzu. Ich bleibe bei den beiden großen großen. Wenn Sie einen haben, den Sie mögen , für den Sie sich inspirieren lassen, insbesondere in Bezug auf UX oder UI, geben Sie unten einen Kommentar mit einer URL dafür ein, damit andere Personen einen Blick darauf werfen können. Wenn du es bist, schau dir jetzt an und schau was da unten ist. Hier sind die beiden wichtigsten Lebensmittelgruppen Dribbble und Behance und ich werde Auszeichnungen vergeben weil es schon lange da ist. Vor allem Dribbble ist zu einem sehr UI-Stil geworden , in dem Menschen ihre Arbeit teilen. Du schaust einfach durch, findest Sachen, die du magst und magst, oh, das ist cool. Ich mag diesen Avatar, ich mag es, wie sich das hier biegt. Wir sind nicht hier, um Ideen zu stehlen, wir sind hier, um uns inspirieren zu lassen , und selbst wenn wir dieses biegsame Ding mögen, sind wir so, dass diese Person das Logo da drin sein wird. Das Logo bedeutet eine andere Farbe und Sie verwenden es am Ende als Startbeitrag. Aber was Sie tun könnten, ist darauf einzugehen und Screenshot zu sagen. Denken Sie daran, dass es auf meinem Mac Command, Shift 4 ist und trinken Sie einfach so viele Details wie möglich. Für mich persönlich, weil Sie zu dieser URL zurückkehren möchten. In diesem Fall möchte ich, dass mein Moodboard sehr hübsch ist, also werde ich diesen Chunk hier drin einfach einen Screenshot machen. Du sammelst einfach Screenshots für dein Moodboard. Wenn Sie auf einem PC sind, müssen Sie überprüfen, wie Sie einen Screenshot machen. Aber ja, so fängt man an. Jetzt sind diese alle sehr unterschiedlich, aber ähnlich. Wenn Sie bei beiden sind, haben sie einen anderen Geschmack und deshalb benutze ich beide. Was jedoch spannender wird , ist, wenn man etwas spezifischer wird. Sagen wir hier drin, ich suche Tee. Vielleicht Tee sogar in der Benutzeroberfläche, suchen Sie also speziell nach dem Ding, das Sie machen, und es reduziert es auf Dinge, die Ihnen gefallen. Oh ja, ich liebe diese Idee die Kaffeebohnen über den Typ verschüttet werden, aber vielleicht mache ich es mit Teeblättern. Dies ist eine andere Möglichkeit, ein bisschen spezifischere Moodboards zu bekommen , Screenshot sie. Im nächsten Video werden wir sie auf eine Moodboard aussehende Seite werfen. Genau das Gleiche für Behance, führe bestimmte Suchanfragen durch. Das haben wir in Dribbble gemacht , als wir uns die Kategorie in Bezug auf Essen und Tee anschauten . Dieser hier, in dem Sie Ihren Aufgabenablauf ausführen , ist viel rund um die Kasse, also was wir sagen könnten und die Warenkorb-Benutzeroberfläche sagen, nur um ein bisschen genauer zu sehen. Carts, wahrscheinlich das falsche Wort in diesem Fall, es ist ein bisschen Warenkorb los, aber wahrscheinlich schauen wir uns die Checkout-Benutzeroberfläche oder die Checkout-Seite an. Vielleicht musst du die richtige Sprache finden, um die richtige Sprache zu finden und dann durchzugehen und zu gehen, cool, das ist da. Vielleicht bemerken Sie einfach Dinge, die Sie vergessen haben hinzuzufügen, Sie sagen, oh ja, wir brauchen diese Rückeroberung oder die Zwischensumme. Sie können in diesen ganz genau und deshalb füge ich Auszeichnungen ein. Auszeichnungen sind mit drei Ws und das Coole daran ist dass es wirklich lustig ist, zu navigieren, aber sobald man sich darauf einlässt, ist es wirklich praktisch. In der Speisekarte hier schaue ich mir alle Nominierten an. Das ist eine Award-Sache. Nominierte, schauen wir uns mal und Sie können Kategorien gehen. Man kann sagen, ich will Dinge sehen, die es haben, man kann es sehen, ich kann es nicht sehen, Essen und Trinken. Das wird sich schleifen und es hat es genagelt. Habe es hier runter gebracht und das Coole daran ist, dass es sehr kuratiert ist, so schönes Zeug. Sie könnten auch weiter einsteigen und sich Tags ansehen und tatsächlich gehen, ich möchte Dinge finden, die eine Kontaktseite haben, weil ich daran arbeite. Vielleicht bekommst du ein paar Ideen über bestimmte Dinge. Wenn ich wieder auf eine Kopie klicke, nur um Ideen zu bekommen, lassen Sie unsere kreativen Säfte fließen. Viele Screenshots, werfen Sie sie in einen Ordner und dann sehen wir uns im nächsten Video. Oh, nein, das werden wir nicht. Eine Sache, die ich vergessen habe zu erwähnen, ist wir auf einer Website nach Dingen suchen und es ist sehr wichtig, auch auf Ihrem Handy zu schauen, denn was ich oft auf meinem Handy mache und Screenshots mache sucht nicht so sehr nach Inspiration, sondern schaut sich tatsächlich Konkurrenten an. Ich hab schon welche gemacht. Lass mich es dir zeigen. Ich habe diesen Ordner namens Mood Board erstellt, und ich ging einfach auf mein Handy und tippte grünen Tee kaufen. Ich habe Screenshots von Orten gemacht, an denen man grünen Tee kaufen kann. Jetzt ist der Ärger und schlimm. [GELÄCHTER] Einige von ihnen gut, einige von ihnen schlecht. Nur um einen Blick darauf zu werfen und sich davon inspirieren zu lassen. Was ich jedoch finde, ist, dass ich oft tun muss wenn ich grünen Tee online kaufe, es mir ein sehr lokalisiertes Ergebnis geben wird und ich nicht im angesagtesten und angesagtesten Teil lebe der Welt. Ich lebe in Limerick, Irland, was nicht angesagt und trendy ist, aber ich weiß es nicht. Einige der Entwürfe können sein, ich weiß es nicht. Nennen wir sie vorhersehbar, langweilig, vorhersehbar, obwohl es ein besseres Wort ist. Oft werde ich mit diesen anderen Screenshots diese hier sehen, ich weiß es nicht. Hast du das Gefühl , dass sie ein bisschen aufregender sind? Ich habe getippt New Yorker Grüntee online kaufen. Ich habe mich für New York entschieden. Ich weiß es nicht. Für mich, [GELÄCHTER] Paris, New York, wähle ich einfach Orte aus, die schick erscheinen, und ich werde wahrscheinlich die richtige Stimmung haben , die ich will. Zoe, die Person, für die ich aus meiner Person entwerfe, sie sucht nach diesem Stil. Suchen Sie nach Paris und Los Angeles und wenn Sie an einem Ort leben , der vielleicht ein bisschen nicht der Höhepunkt des internationalen Designs ist , sagen Sie es anders aus, machen Sie Screenshots, sogar wenn sie nicht gut sind, nur die Dinge, um Farben zu vermeiden, die Ihnen gefallen könnten , weil wir dieses Logo möglicherweise als Teil unseres Designs machen müssen . Vielleicht lieben wir diese Instagram-Walzen, die eingeklemmt sind, Pinterest-Sache, also bekommst du die Idee. Betrachten Sie auch Konkurrenten , weil sie sich mit vielen der gleichen Probleme wie Sie auseinandersetzen müssen , mit den gleichen Dingen. Gehe durch den Einkaufswagen, mach Screenshots, sieh dir das Menü an. Menü auf der linken Seite, ich bin mir nicht sicher. Das wird es sein. Ist es das? Nein. Es gibt noch eine letzte Sache. Das letzte, was ich verspreche, ist Instagram. Selbst wenn du keine Instagram-Person bist, meinst du, hey, ich mache kein Instagram. Du könntest es versuchen. Suchen Sie nach einigen Tags für UX, UI-Design, und es ist erstaunlich. Es wird anfangen, dir wirklich coole Sachen wie diese zu liefern. Das gute Zeug sprudelt in den Dienst, ich habe viele Screenshots für Jobs gemacht, die ich vielleicht nicht einmal mache. Ich schaue mir nur Instagram an, Mann ist eine coole Schriftart, muss herausfinden, was das ist. Screenshot, schick an mich selbst. Verbringen Sie einfach etwas Zeit an einem solchen Ort, auch wenn Sie bereits da sind, offensichtlich ist es perfekt. Aber es ist ein ziemlich visueller Ort. Guter Ort, finde schöne Designs, folge ein paar Hashtags wie UI-Design, UX-Design, tägliche UX-Inspiration, solche Dinge, und du wirst möglicherweise auf Dinge stoßen, die dich inspirieren lassen. In Ordnung, so lasse ich inspirieren, bevor ich mit meinen High-Fidelity-Mockups beginne. Ich werde es mit dem Kunden teilen, um sicherzustellen, dass wir gemeinsam auf dem richtigen Weg sind. In Ordnung, das war's. Lasst uns reinspringen und ein Moodboard bauen. 28. So erstellst du ein mood in Adobe XD: Hallo allerseits. Wir werden ein paar Moodboards in Adobe XD erstellen. Das erste hier, wirklich einfach, im Grunde nur Bilder, die für Ihre eigene Referenz auf eine Seite abgeladen wurden, und dann zeigen wir Ihnen, wie und warum Sie dieses kuratiertere Moodboard für Ihre eigene Referenz auf eine Seite abgeladen wurden, machen könnten , das an ein Kunde. Lasst uns reinspringen. Wie man ein Moodboard macht. Es gibt zwei Versionen, die ich mit dir teilen werde. Es wird der Höhlenmensch es für mich selbst tut, und dann werde ich einen etwas nachdenklicheren Weg tun , der an unsere Kunden oder Stakeholder geht. Ich habe meine Screenshots durchgemacht und gemacht. Ich lasse sie in meinen Übungsakten sitzen. Ich habe sie auch für dich da drin gelassen, nur für den Fall, dass du es wolltest. Sieh dir meine an, die den Übungsdateien zugewiesen sind. Es gibt einen, den sie Moodboard nennen. Das ist genau das, was ich durch das Internet gegangen bin und nach Dingen gesucht habe , bei denen ich ein gutes Gefühl hatte. Einige Konkurrenten sind auch da drin. Was ich tun will, zeige ich dir den Höhlenmenschen Weg. Wähle alles aus, nimm es, ziehe es auf XD, lass los. [GELÄCHTER] Das ist es, Moodboard fertig. Ich benutze das. Oft skaliere ich es nach unten, damit ich den ganzen Weg rauszoomen werde. Erinnern Sie sich an Command 0 und schnappen Sie sich all das, und dann verschiebe ich es und skaliere es nach unten. Das ist gut genug , wenn ich nur für mein eigenes persönliches Moodboard arbeite . Moodboard fertig. Command Plus oder Control Plus zum Vergrößern, und das verwende ich, wenn ich anfange, meine Entwürfe zu erstellen. Ich bin wie, ja, aber dabei aber so wie ich das gemacht habe. Es ist nirgendwohin gegangen, Moodboard fertig. Wenn du es auf diese Weise machst, bringst du all diese Bilder ein, es gibt ein kleines Problem. Hast du damals bemerkt, dass es bis zum Rand war? Es ist tatsächlich von der Pasteboard verschwunden . Die Pasteboard ist nicht unendlich. Wenn du so sagst: „Hey, da gibt es so viele, aber sieh dir all diese an .“ Ich habe sie alle ausgewählt. Kannst du sehen, dass sie auf meiner Pasteboard sind, sie sind nicht auf irgendeiner Kunsttafel, aber sie sind eine meiner Pasteboard. Aber es gibt all das , wo sind diese Typen hin. Sie waren gerade von der Seite, wussten nicht, was sie mit ihnen anfangen sollten. Du kannst eins von zwei Dingen machen. Wenn das nächste Stück wirklich schwierig ist, ziehen Sie einfach ein Paar nach dem anderen ein, dann werden sie nicht von der Seite erscheinen und los geht's. Ich weiß, dass all diese ausgewählt sind, also kann ich diese Schränke sehen. Ich klicke darauf, halte die Umschalttaste gedrückt, klicke auf diese obere und dann sollte ich in der Lage sein, auf O. [GELÄCHTER] Wie mache ich das? [GELÄCHTER] U, U, U. Kann ich noch weiter herauszoomen? Kannst du nicht, wie bringen wir dich rüber? [GELÄCHTER] Warte da. kann ich mir nicht denken. Ich habe diesen Weg, halte die Umschalttaste gedrückt und benutze den Pfeil nach links. Das hat echt gut funktioniert. [GELÄCHTER] Wie ich es in der Vergangenheit mache, kann ich mich nicht erinnern. Alles was ich getan habe, war rückgängig zu machen dass ich gerade den Pfeil nach links gedrückt habe und es ist einfach gegangen, ich bin den ganzen Weg hier drüben und ich werde den ganzen Weg hineinspringen. Das machst du genauso, also wähle sie einfach alle hier aus. Benutzen Sie eine Ihrer Pfeiltasten und sie starten sich hier einfach wieder auf das Pad. Skaliere diese und füge sie zu meinem Mix hinzu. Das mache ich, wenn ich mein eigenes persönliches Kunstbrett mache und es reicht, um loszulegen. Wenn ich das skaliere, ist ein guter Punkt, dass ich viele von ihnen ausgewählt habe und wenn ich die Kante ergreife, machen sie ein paar seltsame Größenänderungssachen. Was ich tun möchte, ist die Umschalttaste gedrückt zu halten und die Ecke zu greifen, und es wird sie alle zusammen so ändern, wie wir es wollen. Das ist Höhlenmenschen Moodboard. Sagen wir, dass ich das jetzt an meinen Kunden schicken möchte , weil es wichtig ist meine eigenen Ideen zu bekommen, ein Moodboard, aber es ist auch wirklich wichtig zu vermitteln, wohin Sie gehen Richtung zu Ihnen wie das Wort Stakeholder wird viel im UX-Design verwendet und Stakeholder ist jeder, der der Kunde ist, Kunden, jeder, der daran beteiligt ist. Es könnte Ihr Chef, Ihr Produktmanager sein, es könnten andere Teammitglieder sein, sie werden an diesem Projekt beteiligt sein. Das ist Stakeholder, ein Wort, das ich hasse. Aber ja, sagen wir , wir senden es in diesem Fall an den Kunden. Das wird nicht reichen, A weil wir sie in Rechnung stellen. [GELÄCHTER] Sie wollen besser sehen als nur Sachen, die auf unsere Seite geworfen wurden. Es muss auch mehr berücksichtigt werden, da dies hier für Stakeholder oder Kunden sehr verwirrend ist , weil sie so sind, dass ich nicht so aussehen möchte. Es ist schwer zu sagen, dass dies die Richtung ist , wenn sie diese beiden vergleichen. Wir müssen durchgehen und sagen, das ist eigentlich nur für mich und nicht für den Kunden. Was ich tun möchte, ist dem Kunden die Richtung zu geben, in die ich gehe , und in meinem Fall sind es hauptsächlich diese hier oben, und ich werde sie etwas schöner aussetzen. Wir werden Bilder abdecken und sie später im Kurs zuschneiden. Wir machen Moodboard, also zeige ich dir, was ich mache. Ich füge eine Seite hinzu. Ich gehe zu meinem neuen Seitentool. Ich füge nur diese Website Desktop hinzu, und ich nenne es Moodboard. Was ich tun werde, ist, dass ich ein paar Rechtecke erstelle und du wartest dort. Ich zeichne nur ein paar Rechtecke mit dem Rechteckwerkzeug. Du schreibst sie. Wofür ist der ganze Müll? Nur ein paar Rechtecke und was wir damit machen können, ich verwende diese Ziehmethode gerne. Es gibt Maskierung und Sachen in einem späteren Video, aber wenn Sie den schnellen und einfachen Weg machen möchten, finden Sie diejenigen, auf die Sie sich wirklich befinden, und ziehen Sie sie einfach aus Ihrem Finder auf Mac oder PC und ziehen Sie sie einfach direkt in eine Kiste. Es erlaubt uns, diejenigen auszuwählen, die wir wirklich mögen, und es lässt sie ein bisschen schöner aussehen. Ich ziehe ein paar davon rein. Was ich hier mache ist, dass ich sicherstelle, denn für mich mag ich diese, ich mag die Farben hier drin, aber es wird sehr schwer sein, dem Kunden mitzuteilen , dass dies eine Richtung ist wenn auch das Richtung ist. Ich werde ein bisschen klarer darüber sein , was ich hier reingesteckt habe, weil ich versuchen möchte, zusammen zu titeln, damit es sich anfühlt, als würde ich auf eine bestimmte Weise treffen. Was Sie tun möchten, ist diejenige zu finden , die der Richtung am nächsten ist , und es zum größten machen , ein paar kleinere Teile, kleinere unterstützende Mitarbeiter, nur um ein Gefühl für alles zu bekommen, versuchen Sie, Ihre durch Bilder der Richtung, die Sie treffen. Dafür können Sie diese kleinen Dinge hier durchgehen und das Pipettenwerkzeug benutzen und tatsächlich gehen. Ich möchte ein paar Farben daraus ziehen. Wir werden später auch wieder Farben machen, aber Sie könnten einige Beispielfarben daraus bekommen , nur um ein Gefühl für einen Geschmack von Farben zu bekommen , die Sie möglicherweise verwenden. Dieses Dokument würde es an den Kunden senden. Du hast vielleicht mehr als einen. Es könnte eine Richtung geben, in der Sie das Gefühl haben, dass der Kunde gefragt hat, und vielleicht eine andere, die Sie tun, ein anderes Moodboard mit etwas, das Sie möglicherweise besser für den Benutzer geeignet sind der Kunde gefragt hat und vielleicht eine andere, die Sie tun, ein anderes Moodboard mit etwas, das Sie , und schicken Sie ein paar verschiedene kreative Moodboard-Optionen. Nun, einige der Fähigkeiten hier in Bezug auf die Herstellung dieses Moodboards und mit Ihnen noch um Bilder zu beschneiden und sie zu bewegen , um an Farben zu arbeiten. Das machen wir, während wir den Kurs durchlaufen. Aber ich wollte Ihnen in dieser Phase meines Prozesses mein Höhlenmenschen Moodboard und das etwas kuratiertere Moodboard zeigen mein Höhlenmenschen Moodboard und das etwas kuratiertere Moodboard , das ich mit dem Kunden teilen werde, das zufällige Formen hat, aber [LACHEN] gut ausgerichtet ist . Das war's für meine Mood-Boards zu diesem Zeitpunkt. Lass uns zum nächsten Video gehen. 29. Kursprojekt – Moodboard: Hallo allerseits, es ist Klassenprojektzeit. Ich möchte, dass du ein Moodboard baust. Sie können ein schickes Beispiel wie dieses Stakeholder-Beispiel machen , das wir im letzten Video gemacht haben, aber wissen, dass uns einige der Fähigkeiten beim Beschneiden und Auswählen von Farben fehlen . Das machen wir später. In diesem Stadium könnten wir einfach den großen alten machen, der sie alle da drin hat. Jetzt habe ich meins ganz abgeladen. Sie können einfach zu Dateiimport gehen und sie auf sinnvollere Weise einbringen. Wenn Sie jedoch alle haben, machen Sie einen Screenshot und laden Sie ihn in machen Sie einen Screenshot und laden Sie ihn Kommentare oder die Aufgaben je nachdem, wo Sie dies tun. Das ist es. Erstelle ein Moodboard. Eine Sache, die ich nicht behandelt habe, ist mit diesem gesamten Aufgabenablauf in diesem gesamten Projekt, das wir machen . Wir gehen von einem neuen Unternehmen aus, das noch keine wirklich starke Marke hat. Wenn es eine bestehende Marke gibt, können Sie das Moodboard möglicherweise nicht überspringen, aber es könnte viel restriktiver sein. Es könnten Beispiele für vielleicht gedrucktes Material sein, das ich habe, ihre bestehende Website, mit der Sie eine Verbindung haben. Mood Board ist vielleicht nicht so aufregend oder so anders wie dies ist. Die andere Sache, die Sie vielleicht haben, sind Produktaufnahmen. Ich werde Bestandsbilder für einen grünen Tee verwenden, aber wenn dies ein echter Kunde ist, haben sie vielleicht schon die Fotos. Sie könnten auf eine bestimmte Weise aufgenommen werden , um das Design voranzutreiben. Sie haben vielleicht schon ein Logo, das wir nicht haben. ein Logo in Ihr Moodboard zu ziehen und wird ebenfalls hilfreich sein, ein Logo in Ihr Moodboard zu ziehen und Farben daraus zu ziehen. Aber im Moment haben wir ein brandneues Unternehmen. Es hat kein Logo, sodass wir mit unserem Moodboard ein bisschen aufregender und breiter werden können. Tu das und wir sehen uns im nächsten Video. 30. So funktioniert man mit Spalten und Gittern in Adobe XD: Hallo allerseits. In diesem Video werden wir über Kolumnen sprechen, diese tealy Dinge. Warum gibt es 12 von ihnen. Warum benutzt man manchmal sechs. Warum verwenden Sie anstelle von Spalten ein Raster? Es hat alles mit ansprechendem Webdesign und Dingen wie Haltepunkten zu tun . Nun, wenn das Zeug ist, wenn Sie möchten, bin ich Webdesigner, ich verstehe dass dieses Video schnell und einfach sein wird . Wenn Sie neu in Webdesign und UX-Design und noch kein ansprechendes Webdesign und diese Spalten erlebt haben, werde ich mein Bestes geben, um alles in einem Video zu erklären. Deshalb ist das ein bisschen länger als die anderen, weil es hier ein bisschen Theorie gibt. Ich werde mein Bestes geben , um alles zu erklären. Ich hoffe, ich mache gute Arbeit. Lasst uns anfangen. Hol dir eine Tasse Tee, lehn dich zurück. Das musst du dir vielleicht zweimal ansehen. Ich hoffe nicht. Lass uns loslegen. Sprechen wir über Kolumnen, und es ist einfacher zu beginnen. Wir sprechen über Spalten auf dem Desktop und arbeiten dann auf Mobilgeräten. Ich finde es sowieso einfacher zu verstehen. Wir werden hier drüben ein Aufwärtstool machen. Wir wählen die Größe für unsere Website aus. Dies sind wirklich übliche in Bezug auf die Größe einer Desktop-Website. Google gängigste Desktop - oder Webbrowsergröße, in dem Jahr, in dem Sie und es wird auftauchen, werde ich hier 1920 auswählen. Dieser ist auch eine andere übliche. 1920 wird mir genug Platz geben, um meine Website zu erstellen. Ich ziehe es hier runter, und ich nenne das meine Homepage. Wir müssen auch unsere Website oder unsere Desktop-Version unserer mobilen Website entwickeln unsere Desktop-Version unserer mobilen Website , da sie auf beiden angezeigt wird. Wir werden wahrscheinlich zuerst mit dem Handy beginnen und dafür entwerfen und danach nach einer Desktop-Version suchen. Aber was die Spalten angeht, fangen wir damit an. Ich hab meinen Desktop. Ich klicke hier auf den Namen. Wenn Sie sich nicht sicher sind, wie ich diese bewege, klicke ich auf den Namen und ziehe ihn nur mit dem Auswahlwerkzeug. Um nun die Spalten hinzuzufügen, die hier ausgewählt sind, gibt es dieses Ding namens Grid. Kannst du dieses kleine Häkchen einschalten? Es gibt entweder ein Quadrat oder ein Layout. Layout ist das, was wir wollen, und es verwendet Spalten. Es sollte standardmäßig 12 verwendet werden, wenn 12 nicht verwendet wird. Warum benutzen wir zunächst 12? Der erste Grund ist, dass jeder es benutzt und das aus einem bestimmten Grund gut genug ist. Wenn Sie sich entscheiden, Spalten von 13 zu machen , hätten Sie Probleme mit ein paar Leuten und hauptsächlich mit Ihrem Entwickler, denn 13 ist eine seltsame Zahl, durch die Sie Dinge teilen können. Es ist schwer in zwei Hälften zu teilen, wenn die Spalten gehen. Es ist auch nicht durch Lose teilbar. Es ist eine witzige alte Nummer. Der andere Grund ist, dass Ihr Entwickler verrückt sein wird. Hauptsächlich, weil ein Entwickler Ihre Website oder Ihre App oft nicht vollständig von Grund auf neu codiert . Sie werden einige Verknüpfungen oder Frameworks verwenden , die bereits vorhanden sind, um den Workflow zu beschleunigen. Bei vielen dieser Frameworks werden wir Dinge wie ein bereits vorhandenes Säulensystem verwenden , und es wird wahrscheinlich 12 sein. Sprechen Sie zuerst mit Ihrem Entwickler stellen Sie sicher, dass Sie auf dem richtigen Weg sind. Sag mal, ich bin neu darin. Wenn ich ein 12-Spaltenraster verwende, wird das in Ordnung sein? Wahrscheinlich ja. Der andere Grund, warum es wirklich gut ist, ist der gleiche Grund, dass es das Magazin-Layout ist , wenn Sie sagen. Es gibt Ihnen Konsistenz über Seiten hinweg. Es bedeutet, dass Dinge auf dieser Seite aufgestellt wurden, als ich zu meiner Kontaktseite sprang , alles neu gemischt wird. Es gibt ein bisschen Designkonsistenz, überhaupt ein bisschen Durchfluss. Ein anderer Grund ist, dass 12 gut und teilbar ist. Ich werde diese Seite etwas länger machen. Sagen wir, ich gehe zum Rechteckwerkzeug. Ich werde eine wirklich rudimentäre Website verspotten. Ich habe meine Navigationsleiste oben. Ich hab meine Heldenbox ganz oben. Wir haben Platz zum Arbeiten. Dies ist ein großer Call-to-Action, jetzt verkauft wird, schauen Sie sich unsere neueste Produkt-Hero-Box hier an. Dann unten haben wir unsere Feature-Box, und ich werde eine entwerfen, die es hat. Jetzt werden diese oft als Karten bezeichnet, wie wiederholbare kleine Einheiten , die Sie für verschiedene Produkte verwenden können , vielleicht für verschiedene Dienste. Was ich tun werde, ist, dass ich sie dupliziere, also habe ich 1, 2, 3. Sie können sehen, wie 12 eine handliche Größe ist , denn das bedeutet, dass ich die volle Breite erreichen kann. Ich kann hier unten drei haben. Sagen wir, wenn ich vier brauche, kann ich tatsächlich diese 12 teilen, und ich kann einen machen, indem ich beide auswähle und meine Alt- oder Optionstaste auf einem PC gedrückt halte . Eigentlich ist das Gegenteil. Alt auf einem PC und Option auf dem Mac. Sie können sehen, wie 12 dafür praktisch ist . Ich kann sagen, dass wir los geht's. Du könntest zwei machen, du kannst eins machen, du kannst keine fünf machen. Das ist einer der Nachteile hier. Als ob ich fünf Kisten will, dann kannst du es. Deshalb haben wir 12. Es wird noch besser, wenn wir das so genannte Responsive Webdesign machen. Weil wir herausfinden müssen, wie das auf dem Handy aussieht . Nehmen wir an, wir legen das auf dem Handy aus. Wir machen einfach ein neues. Lass uns ein neues machen. Geh weiter. Eine neue Zeichenfläche. Wir werden es zu der Größe machen für die Sie entwerfen. Bei diesem hier. Nehmen wir an, dass ich auch 12 verwende , weil es das gleiche Framework verwendet, egal ob es sich um ein Tablet oder ein Handy oder einen Desktop handelt. Es ist dieselbe Website , die nur auf die Größe des Geräts reagiert, ansprechendes Design. Schauen wir uns 12 an. Ich werde meine Margen los. Das ist das Zeug an den Rändern hier, Null und das gleiche Design dafür. Ich habe diese Seite entworfen. Wie sieht es aus? Ein Handy, im Grunde das Gleiche. Ich hab meine Navbar oben drauf. Ich habe meine Hero-Box etwas anders , weil wir so viel Platz auf der Desktop-Version haben , ich habe diese riesige, große weiße Polsterung, während ich voll sein muss an den Rändern, weil wir einfach nicht die Größe haben, mit der wir auf dem Handy herumspielen können. Wenn wir zu diesen Typen kommen, unten unten, kann ich auf keinen Fall vier unten legen. Das könnte ich. Das Problem ist , dass sie einfach zu klein und schwer zu lesen sind. Da sind wir los. Das wird nicht klappen. Was Sie oft tun werden, ist, dass Sie tatsächlich auf dem Handy gehen. Wir werden diese Box bekommen, Wir werden diese Box bekommen nur um etwas anderes zu machen, anstatt diese Box versucht, über die drei Spalten zu gehen, wir sagen es im Code, um zu sagen: Sie müssen sich darüber keine Sorgen machen, aber es ist ein Einblick für den Entwickler. Sie kennen vielleicht bereits eine bessere Codierung, also könnte dies für Sie einfach sein, aber wenn nicht, wird Ihr Entwickler in diese Box gehen, anstatt drei Spalten zu sein, tatsächlich, sagen wir sechs spalten. Sie müssen das nur im Code auf dem Gerät namens Mobile B6 anstelle von drei ändern . Dies bedeutet, dass es super einfach ist, verschiedene Designs über verschiedene Größen hinweg zu implementieren. Sie haben beschlossen, dass Sie anstelle von vier Gegenständen beschlossen haben, dies wie vier Boxen zu tun , die jedoch übereinander gestapelt sind. Oder Sie entscheiden sich, dass Sie tatsächlich das Massive auf einem mobilen Gerät wollen , wenn Sie sie einfach alle übereinander stapeln, vier davon. Der Programmierer kann durchgehen und tatsächlich diese erste Box sagen, Sie sind tatsächlich die volle Breite von 12. Was jedoch passiert, wo Sie entwerfen, wenn dieses 12-Säulenraster, obwohl es verwendet wird, ist es schwierig, darüber zu entwerfen , da diese Spalten wirklich klein sind und es ist kann wirklich üblich sein, einfach zu sagen, ich werde es fälschen und einfach sechs schreiben. Obwohl 12 verwendet werden kann, ist es immer noch sechs, die zweimal in 12 gehen, oder es kann manchmal vier sein, da es benutzt wird, wieder vier ist durch 12 teilbar. Vielleicht entwerfen Sie einfach für vier, nur um Dinge zu machen , weil Sie nicht so viele Details benötigen , wenn es darum geht. Ich mache es oft zu sechs. Es ist wirklich üblich, es auch zu vier zu machen, bis zu dir. Wir können nicht zu tief in das Responsive Design eingehen, aber lassen Sie mich Ihnen hier eine kleine kurze Demo geben. Diese Seite hier, HubSpot, haben hier einige wirklich gute Ressourcen für Webdesign und UX-Design. Aber das ist ihre große Website-Version. Sie werden feststellen, dass es hier an den Seiten diesen großen leeren Bereich gibt, sodass die Website tatsächlich nur dieses mittlere Stück einnimmt. Wenn wir auf einer Desktop-Version entwerfen, können Sie hier oft sehen , dass es mir hier diese zusätzlichen Margen gibt. Sie können entscheiden, dass Sie auch diese Margen haben, oder Sie entscheiden sich vielleicht, dass Sie für einen wirklich großen Bildschirm entwerfen. Ich werde das duplizieren, und ich werde sagen die Breite viel größer ist, also werde ich anstelle von 1.920 diese 2.000 machen. Das ist nicht wirklich größer. Dreihundert. Es ist ein schlechter Tag. Komm schon. Wir können das dann machen. Komm schon. Los geht's. Dreitausend. Sie könnten sich entscheiden, für diesen wirklich großen Bildschirm zu entwerfen , weil Sie einen wirklich großen Bildschirm haben und wissen, dass Ihr Kunde dies tut. Aber hier drinnen werden Sie auf beiden Seiten ein paar wirklich große Margen haben. Sie können diese Website tatsächlich hier gestalten. Es bleibt tatsächlich in diesem kleinen bisschen, und Sie passen alles in Ihre 12 Spalten. Aber du kannst hier tatsächlich ein paar Sachen im Hintergrund hinzufügen . In diesem Fall haben sie nicht viel. Dies erstreckt sich, es gibt Farbe, es gibt eine farbige Box, Sie können hier einige verschiedene Grafiken hinzufügen, aber wissen Sie, dass sie auf einigen Geräten nur diese Version sehen werden . Sie könnten für diese Version entwerfen aber behalten Sie diese Version hier bei. Deshalb hast du hier diese Ränder an den Rändern. Diese Ränder hier können Sie nur eine wirklich große Website erstellen, hier in Ihren Spalten entwerfen, aber seien Sie sich bewusst, dass hier etwas auf wirklich großen Bildschirmen erscheinen muss und vielleicht nur wahrscheinlich eine Erweiterung oder Hintergrundfarbe oder ein Wiederholungsmuster oder so. Das ist eine Sache. Wenn Sie entwerfen, entwerfen dort mit etwas Spielraum. Wenn Sie für Tablets entwerfen, der Designer für diese HubSpot-Homepage hier muss der Designer für diese HubSpot-Homepage hier in XD entwerfen, die Webseitenversion, die große Version, die kleine Version und dann schau was passiert , wenn wir hier unten sind. Sieh dir das an. Die Designversion , bei der auf diesem Bildschirm diese Grafik nur kleiner wird und nach rechts geschoben wird. Weiter unten, sieh dir das an. Es ging von einer Website zu der Annahme, dass Sie sich auf einem Tablet oder Mobilgerät befinden. Kannst du die große Veränderung sehen? Die Speisekarte war eine große Veränderung. Sieh dir das an. Wirklich üblich, um eine mobile Version, eine Tablet-Version und eine Desktop-Version zu entwerfen . Wenn Sie in einem größeren Unternehmen arbeiten, nennen sie Breakpoints. Sie könnten für fünf verschiedene Größen entworfen werden : Tinny Mobile, großes Handy, Tablet, kleiner Bildschirm, großer Bildschirm. Möglicherweise müssen Sie mit ihnen darüber sprechen , was der Entwickler von Ihnen will. Grundsätzlich ist es nur mobil und Desktop und lässt das Tablet aus und lassen Sie es einfach davon ausgehen, dass es sich um die Website-Version handelt, aber das ist für kleinere Jobs. Wenn Sie jedoch einen größeren Kunden mit einer anspruchsvolleren Website betreiben , müssen Sie möglicherweise fünf Haltepunkte, sieben, machen . Hoffentlich nicht bald. Aber nur damit du es weißt, wir entwerfen es in diesem Kurs. Wir werden nur Desktop und Handy machen, aber es könnte auch eine Erwartung für Tablets geben. Andere Dinge, die wir über diese Spalten wissen müssen , ist der Abstand zwischen ihnen. Dieser Raum zwischen hier liegt an dir, nur damit du einen wirklich gewöhnlichen kennst. Dies sind die Dachrinnen, das sind Ihre Ränder, und das sind Ihre Spalten. Die Spaltenbreite wird derzeit nur erweitert, um an den bereitgestellten Platz anzupassen. Sie steuern die Rinne und die Ränder, lassen Sie einfach die Spalte den zurückgelassenen Platz ausfüllen. Es wäre wirklich üblich, eine Rinnenbreite von 18 zu haben. Auf einem mobilen Gerät könnte es eher so sein, als hätte ich eine Breite von acht bekommen. Auf einem Desktop könnten es 16 sein, es könnten 24 sein. Du arbeitest in Schritten von acht. Sie werden nur sehen, dass es im Webdesign viele Inkremente von acht gibt. Also 8, 16, 24, also passiert es. Acht ist eine weitere leicht teilbare Zahl. Wenn wir eher auf das App-Design als auf das Design von mobilen Websites einsteigen , ist dies auch eine ziemlich übliche Rastergröße. Reden wir tatsächlich darüber. Bevor wir über App-Designgrößen sprechen, werde ich es einfach tun, ich weiß es nicht. Ich habe eine Homepage, es hat 12 Spalten. Ich verwende eine Rinnenbreite von 16 oder 24 oder acht, was auch immer Sie verwenden möchten, um es durch acht teilbar zu machen, um die Dinge zu erleichtern. In Bezug auf die Marge müssen Sie sich daran erinnern, ob Sie 140 von beiden Seiten verwenden, also sind 140 von beiden Seiten verwenden, das 280, Sie nehmen das ab, weil Sie tatsächlich entwerfen oder ich diese Mathematik nicht machen kann. 1.920 minus 280. In diesen Feldern können Sie tatsächlich Mathe machen. Sie entwerfen tatsächlich eine Website für 1.640. Ich mache es rückgängig. Das ist der Raum da drin, 1.640. Sagt es es irgendwo? Tut es nicht. Aber du hast minus den Rand beider Seiten, also ist das hier die Größe in der Mitte. Aber lassen Sie sich nicht zu sehr über die genaue Breite hängen, denn wir alle wissen, dass jeder Computerbildschirme, Laptop-Bildschirme und mobile Geräte in unterschiedlicher Größe hat Computerbildschirme, Laptop-Bildschirme und mobile Geräte in unterschiedlicher Größe , Sie können sie seitlich drehen, im Hochformat. Bringen Sie sie einfach generisch und Ihr Entwickler hilft bei der gesamten Reaktionsfähigkeit oder Sie tun es, wenn Sie grundlegende Responsive Webdesign verstehen. Aber es ist CSS. Wenn Sie daran interessiert sind, sind Sie vielleicht interessiert, und selbst wenn Sie kein Webentwickler werden, Front-End-Webdesign zu verstehen ist es als UX-Designer wirklich praktisch, ein insbesondere beim Entwerfen von Web und Mobile Web. Wenn Sie daran interessiert sind, sollten Sie sich meine anderen Kurse zum Thema Webdesign ansehen. Es gibt einen Responsive Webdesign-Kurs. Wahrscheinlich ist der beste Visual Studio Code. Es gibt einen Webdesigner Sie dazu bringt die Grundlagen des Webdesigns praktisch zu verstehen. Der letzte, über den ich sprechen möchte, ist das Entwerfen eines Mobiltelefons. Anstatt ein mobiles Website-Design zu finden, das wir haben, nämlich eine Website, die gerade auf Desktops, Tablets oder Mobilgeräten angezeigt wird , entwerfen wir tatsächlich eine App. Was wir hier tun wollen, ist, anstatt Spalten zu entwerfen, weil es nicht reagiert, es wird eine ziemlich feste Messung sein, entweder Android oder iPhone, und sie verwenden etwas anders anstatt Dinge zu reagieren, verwenden sie dieses sehr starre quadratische System, und sie verwenden acht Pixel als quadratische Größe. Nutze dies, um Dinge auszuspielen. Raum weg von den Seiten, halte die Dinge voneinander getrennt. Das wird Ihr Entwickler verwenden, wenn Sie die Frameworks verwenden, die er für sein mobiles App-Design verwenden wird . Spalten für Websites und dieses Rastersystem für Apps. Ein bisschen steifer und spezifischer für das App-Design. Heiliger Rauch, war das nützlich? Eine letzte Kleinigkeit ist, sagen wir, dass ich eine neue mache. Es hat diese Gabel und du meinst, ich will diese. Was Sie tun können, ist, dass Sie diese auswählen und tatsächlich sagen können , ich es zur Standardeinstellung machen möchte, und dann auf diesen klicken und sagen, verwenden Sie die Standardeinstellung. Dies ist eine Möglichkeit, es auf mehrere verschiedene Zeichenflächen zu bringen, um sicherzustellen, dass sie alle gleich sind. Das ist es. Das war ein langer und ein Gehirnbieger, ich weiß. Ich hoffe, es war nützlich. Lass uns zum nächsten Video gehen. 31. Port aka gepunkteter Linie auf der Seite in Adobe XD anzeigen: Hi, allerseits. Was ist diese gepunktete Linie in diesem Video , die manchmal erscheint, aber dann kein anderes Mal? Was macht es? Ich kann es bewegen, scheint nichts zu tun. Die kurze Version ist, es gibt eine längere Videoversion [LACHEN], aber die kurze Version ist, es ist genau wie eine Vorschau wenn ich diesen kleinen Vorschau-Button drücke, mein View-Port ist das, was es ist angerufen. Das ist eine meiner Bewertungen, und Leute können hier nach unten scrollen. Aber wenn du es hier runter bewegst, sieh dir an, was passiert. Ich kann sagen, geh mir aus dem Weg. Das bedeutet, dass wenn Sie es degradieren, Ihre Ansicht riesig ist und versucht, es Ihnen überhaupt zu zeigen, was ein bisschen seltsam ist. Das ist es, was es tut. Lassen Sie mich in diesem Video ein bisschen detaillierter eingehen. Schauen wir uns diese gepunkteten Linien an. Schalten wir zuerst die Spalten aus. Sie sind großartig, wenn Sie ein Layout erhalten, sobald Sie eine grundlegende Struktur haben und diese ausschalten möchten. Da ist dies [unhörbar], klicken Sie auf den Titel und Sie können dieses Häkchen einfach ausschalten. Es schaltet sie von allem ab. Es gab eine Verknüpfungsansicht, es ist diese hier, das Layout-Raster anzeigen und Sie werden sehen, dass es auf einem PC anders ist und es wird Control Shift sein. Auf einem Mac heißt es Command Shift'. Cool. Wir haben sie runter. Was ist diese seltsame gepunktete Linie? Wir haben vorhin angedeutet, dass es Viewport genannt wird. Denken Sie im Grunde daran, dass ich das runterziehe, es war hier oben und ich habe es nach unten gezogen. Es erscheint erst, wenn du etwas nach unten gezogen hast. Dieser hier wird es nicht haben . Wo ist meine gepunktete Linie? Da ist es da. Denn was passieren muss, ist, dass es zwei Dinge wissen muss. Wie lang ist Ihre Seite und was möchten Sie Ihrer Vorschau anzeigen? Ich zeig dir was ich meine. Wenn ich das hier oben habe und ich zur Vorschau gehe, bekomme den Namen, schau dir diese Seite an. Schau dir das an, es zeigt mir mein mobiles Design. Aber wenn ich das größer ziehe und etwas hier runterlege, das wir sehen können, mache ich einfach eine rote Schachtel. Das Gleiche. Sehen Sie sich das an. Es wird gut funktionieren, aber außer jetzt gibt es etwas Scrollen. Aber wenn ich so bin, Mann, diese gepunkteten Linien nerven uns, ich werde es hier einfach unten bewegen. Werde es los. Da gehst du, weg. Was wird passieren? Sieh dir das an. [GELÄCHTER] Hedge-Garne visueller Effekt. Sie sagen ihm, dass der View-Port wirklich groß ist, also werde ich versuchen, Ihnen alles zu zeigen. Das ist es, was das ist. Das mache ich rückgängig. Sie können es hier ändern, um es einzugeben. Können Sie die Porthöhe sehen? Sie können entscheiden , dass Sie an einer größeren Größe arbeiten und es 750 sein muss , oder Sie können sie einfach ziehen. Das ist es, was es tut. Lass mich die Vorschau ständig öffnen , also geh nicht weg, schau dir das an. Das ist es, was es macht. Es ist einfach komisch, wenn du nicht weißt, was es tut. Das Gleiche gilt für den Desktop. Wenn ich darauf klicke, zeigt es mir meinen ganzen Desktop auf diesem winzigen Bildschirm, also schließe ich ihn und öffne ihn erneut. Große Version. Da ist es, da. Sie könnten entscheiden Ihr View-Port etwas größer sein wird . Es ändert nicht die Ausgabe der Seite, es ist nur die Vorschau. Wenn Sie eine Vorschau erstellen, die Ihre Clients überprüfen können, haben sie dieselbe Ansicht-Portgröße. Stellen Sie einfach sicher, dass, wenn Sie damit herumgespielt haben , sehen Sie sich eine Vorschau an, überprüfen Sie, ob es tatsächlich ein paar gute Sachen macht und nicht vorkommt. Es wäre schwierig, wie ich es vorher getan habe , wo du eine wirklich lange Seite bekommst, du entwirfst Lasten, weil es viel Scrollen auf der Seite gibt und du gerade gegangen bist, hol das **** hier raus. Du schickst es dem Kunden und seinem Gesicht damit, wenn sie zur Vorschau gehen und sie sagen, Dan, was ist damit los? [GELÄCHTER] Du musst reingehen und sagen, was ist eine angemessene Größe für meinen View-Port? In diesem Fall wird es 1080 sein. Überprüfen Sie, was eine normale Standardgröße für die meisten gängigen Websites ist meisten gängigen Websites und Google wird Ihnen sagen, was es ist, ändert sich ständig, aber genau das macht diese kleine gepunktete Linie. Ich mag es nicht, weil es immer an ist , wenn du arbeitest. Ich möchte es loswerden. Derzeit gibt es keine Show-View-Portlinie. Es könnte sein, wenn du später in der Zukunft bist. Oft entwerfe ich es hier unten und verschiebe es einfach hier runter, weil ich die kleine gepunktete Linie in meinem Weg getroffen habe . Ich muss mir bewusst sein, dass ich, wenn ich es abschicke, um einen Link zu erstellen, ihren View-Port wieder nach oben ziehen, dann den Link erstellen und teilen muss. Ergibt das einen Sinn? Das macht der View-Port. Das war's, wir sehen uns im nächsten Video. 32. So fügst du Leitfaden zu Adobe XD add und löschen;: Hallo allerseits. Wenn du so bist, Mann, diese Kolumnen, möchte ich nicht, dass Spalten mir nur ein paar einfache alte grundlegende Leitfäden geben. Wie diese Anleitungen können Sie einfach herausziehen und sich bewegen und einfach tun, was Sie wollen. Wenn du keine Spalten machen willst, ist das völlig in Ordnung. Es gibt keine Regeln, die du für Spalten machen musst, besonders wenn du ein selbstgesteuertes Projekt machst oder es ein bisschen künstlerischer ist. Es gibt keine riesige, große strukturierte Website, die all diese starre Kontrolle mit Spalten benötigt , Sie benötigen einige Anleitungen, das ist das schwere Medium. Lass mich dir zeigen, wie man sie herstellt. Eigentlich Spoiler-Alarm, ziehen Sie sie einfach von der Kante ab. Da gehst du. Warum ist dieses Video so lang? Weil es ein paar Tipps und Tricks und andere Dinge gibt, aber so bekommt man sie. Lass mich dir zeigen wie. Um ein paar Anleitungen zu erstellen, habe ich eine leere Seite erstellt, nur um loszulegen. Es ist ein iPhone 13, zuerst müssen Sie auf Ihrem Move-Tool sein, funktioniert nicht, wenn Sie andere Tools verwenden, oder Auswahlwerkzeug, den kleinen Pfeil oben hinter diesem, Sie sind möglicherweise bereits gestolpert drüber hinweg. Sie sind gerade eines Tages in XD erschienen. Sieh dir das an, wenn du direkt außerhalb der Seite schwebst , sind sie da. Klicken Sie auf Halten, ziehen Sie es hinein, Sie haben eine Anleitung erstellt. Das war's. Sie können von oben weitermachen und von oben hineinziehen. Ich drücke Enter , um sie los zu werden. Wenn sie immer noch nicht erscheinen, Sie sich möglicherweise unter Ansicht unter Guides und Sie sind möglicherweise zu meinem Fall gegangen . Ich kann sie sehen, damit ich gehen kann um uns tatsächlich einen ziehen zu lassen. Ich kann also jemandem sagen, dass Sie versehentlich die Abkürzung für Höhe oder Führungen verwendet haben. Dann arbeiten sie also nicht, keine Guides. Geh hier rein und überprüfe einfach, ob es der richtige steht. Verstecken einblenden, du verstehst die Idee. Stellen Sie sicher, dass Sie sie sehen können. Lassen Sie uns ein bisschen genauer sein. Sagen wir, du willst sie loswerden. Wie wird man sie los? Klicken Sie darauf und klicken Sie auf Löschen, es funktioniert nicht. Du klickst Halten und ziehst sie einfach zurück in diesen Bereich hier drüben. Schau ein kleines Symbol, Mülleimer, los geht's, wie man sie los wird. Lasst uns ein bisschen genauer sein. Nehmen wir an, Sie möchten einen Rahmen von 24 Pixeln umlegen . Also klicke und ziehe es heraus, und du kannst sehen, dass ich sehr genau sein kann und 24 bekommen habe, perfekt. Ich schaffe es auch dort. Wenn Sie ein Touchpad haben, versuchen Sie Ihre Designarbeit zu erledigen? Ich mache die ganze Zeit, wenn ich fahre . So genau kannst du nicht sein. Was Sie also tun können, ist, dass Sie es sein könnten, es ist manchmal einfach, das quadratische Werkzeug zu greifen, etwas herauszuziehen, es dort einzugeben, 24 und wenn Sie eine Tabulatortaste ausführen, können Sie von Breite auf Höhe 24 heruntergehen. Das ist nicht wesentlich, nur ein praktischer Trick. Schnappen Sie sich das Auswahlwerkzeug, ziehen Sie es in die Ecke und schauen Sie sich das an. Angenommen, zoomen Sie ein bisschen hinein, es rastet auf mein Quadrat ein. Du hast die Idee, zieh, schnappst, oben eins, schnappst, schnappst den Kerl, schneide ihn hier runter, füge den Kerl ein, hol ihn in die Ecke. Es ist nur ein schneller Weg, jetzt kannst du sie nicht von unten oder oben ziehen. Es macht also ein bisschen Spaß beim Scrollen. Denken Sie daran, halten Sie die Leertaste gedrückt, klicken und halten und ziehen oder Sie verwenden eine Methode, die Sie bisher [LACHEN] in diesem Kurs verwenden. Du bist so weit gekommen, du hast daran gearbeitet, dich zu bewegen. Ich halte die Leertaste unten. Dies ist ein bisschen davon, wie zum Beispiel nach unten, ziehen Sie es ein wenig nach oben. Dann bist der Typ, tut mir leid Kumpel, du bist weg. Brauche dich nicht mehr. Befehl 0, um auszulößen, wählen Sie es aus, Befehl oder Steuerung 3 Klicks auf diesem App-Board. Damit haben wir Guides. Wenn Sie die Raster nicht wie im letzten oder in den Spalten verwenden möchten . Du willst nur ein paar kleine Hilfslinien, dann zieh sie raus, lösche sie und ziehe sie zurück. Sie können sie einfach ausschalten weil sie manchmal praktisch sind, um loszulegen , und Sie möchten sie dann ausschalten. Gehe zu Guides anzeigen und du hast Guides ausblenden. Sie können sie auch sperren , weil sie beweglich sind. Sie können sie anklicken und ziehen. Sie könnten entscheiden, dass Sie bitte damit aufhören. Gehe zu Ansicht und sperre sie vorerst einfach. Wenn Sie ein anderes Projekt haben und die Anleitungen kopieren müssen , haben Sie es wahrscheinlich dort gesehen. Lass uns zu dir gehen. Du kannst sehen, dass meine Guides nicht rübergekommen sind. Sie stoßen auf, wenn Sie offensichtlich die Zeichenfläche duplizieren, denken Sie daran, die Option auf einem Mac Alt auf dem PC gedrückt zu halten. Ich möchte diese nur kopieren, damit Sie auf der Zeichenfläche auswählen können, Sie möchten sie von zu Anleitungen anzeigen, Hilfslinien kopieren, auf diese klicken, Hilfslinien anzeigen, Hilfslinien einfügen. Guides, da gehst du. Sie könnten sie ausschalten, nur weil das ein Schmerz im Hintern ist. Sie ziehen versehentlich immer wieder Dinge von oben und unten heraus und los geht's. Das ist Guides in Adobe XD. 33. Farbinspiration und der Eyedropper in XD: Hallo allerseits. In diesem Video werden wir uns die Farbinspiration ansehen. Wir werden in diesem nächsten Abschnitt an Farbe arbeiten. Hier wo fängst du an? Wie wählt man Farben aus, die zusammenpassen? Ja, darum geht es hier. Sie können überall im Internet hingehen, Farbinspiration, tippen Sie es ein. Du wirst Lasten finden. Orte, an denen ich gehe, Color Hunt. Ich mag es für passende Farbmuster. Was Sie tun können, ist, dass Sie einen Blick darauf werfen und sagen können , dass dies für mich ist. Sie können diesen kleinen Code hier sehen. Es ist eine Hexadezimalzahl, ein kleiner Hash-Code dafür. Wenn ich darauf klicke, heißt es, dass es kopiert wurde. Nett. Wenn ich jetzt zurück in XD gehe und mir ein Rechteck schnapp und zeichne es heraus und klicke hier rüber meine Füllung. Sie werden hier unten sehen, wir verwenden HSB für Teile. Es gibt diese Hexadezimalzahl und ich kann sie dort einfügen, auf meiner Tastatur auf „Enter“ drücken und ich habe sie rübergebracht. Sie können einfach weiter kopieren und einfügen, und Sie werden diese Ihrem Dokument hinzufügen und damit beginnen, dies als Grundlage für Ihre Farben zu verwenden . Sie könnten sie natürlich ändern, aber es ist ein Ort, an dem Sie loslegen können. Ein anderer Ort, den ich ziemlich oft verwende, ist Adobe color oder color.adobe.com. Es ist kostenlos. Sie benötigen dafür keine bezahlte Lizenz. Was ich wirklich mag, sind Dinge wie Erkunden, oben bereisen sie diese Website herum, sodass Sie möglicherweise herausfinden müssen , wohin sich die Erkundungen bewegen, aber Sie können suchen. Sie können sich für Like entscheiden, schauen wir uns Tee an und lassen Sie sich von Teefarben inspirieren , die andere Leute entschieden haben. könntest du entscheiden, los geht's. Hier sind ein paar Teefarben und fragwürdige Teefarben. Es geht darum, die kreativen Säfte zum Fließen zu bringen. Dies sind Teefarbe und ja, einige Dinge , die fehlen. Sagen wir, du entscheidest dass es das ist, du meinst, ja, ich finde es ziemlich schwer, verschiedene Browns auszuwählen , die zusammenpassen, sieh dir das an [LACHEN]. Diese, ich mag es, ich tue es. Sie können „Enter“ gehen und die Hexadezimalzahlen kopieren und einfügen , wie wir es in der letzten getan haben. Klicken Sie einfach darauf und kopieren Sie es und fügen Sie es ein. Was Sie jedoch tun können, ist, dass Sie die Adobe-Bibliothek verwenden können. Ich kündige aus. Bevor ich „Zur Bibliothek hinzufügen“ sage müssen wir nur sicherstellen, dass Sie bei Ihrem Adobe-Konto adobe.com angemeldet sind . Du siehst mein kleines Gesicht oben oben. Da ist es. Was Sie tun müssen, ist sicherzustellen, dass Sie die richtigen Bibliotheken ausgewählt haben. Erstellen Sie eine Bibliothek, Sie können eine hinzufügen. Ich habe diese XD-Klasse eins hier, und das bedeutet, dass sie zu dieser Bibliothek hinzugefügt wird. Ansonsten gibt es ein bisschen Rätsel wissen, zu welcher Bibliothek hinzugefügt wird. Gehen wir „Zur Bibliothek hinzufügen “ und es gibt nicht viel, was passiert [LACHEN]. Es ist nur die Bibliothek. Wie greift man auf die Bibliothek in XD zu? Im Inneren haben wir diese anderen, wir haben zwischen Ebenen und unserem Asset-Panel gegangen, und wir haben noch keine Plug-Ins verwendet. Aber dieses Top hier, das normalerweise Vermögenswerte ist, können Sie tatsächlich eins davon zurückgehen. Es ist ein seltsamer Ort dafür. Wenn du denkst, das scheint ein seltsamer Ort dafür zu sein, dann ist es. Hier sind Ihre Dokument-Assets, zurück zu Bibliotheken. Dokumentieren Sie Assets, zurück zu Bibliotheken, nur damit Sie es wissen, es ist leicht, sich hier zu verlieren. Sie können alle Bibliotheken sehen und wenn Sie wie ich sind, haben Sie eine Million Bibliotheken. Hier ist mein XD-Kurs und es gibt diese Farbe, Tee , den ich gerade gemacht habe. Wie benutzt man es? Klicken wir auf ein Rechteck. Du kannst einfach über den Mauszeiger fahren und zu diesem gehen. Du gehst da rein. Vielleicht schnappen Sie sich ein paar verschiedene und experimentieren einfach mit der Verwendung dieser Farben. Die einzige Sache, die ich gesagt habe, war, dass Sie die Hexadezimalzahl kopieren und einfügen können. Lasst uns völlig zufällig auswählen, nichts mit dem Tee zu tun hat. Aber lassen Sie es uns kopieren und hier drüben, als ich sagte, fügen Sie es einfach ein wie zuvor. Du musst es ändern, ich habe dir das schon gesagt, oder? [GELÄCHTER] Mein Gehirn schmilzt. Ich habe dir schon gezeigt, wie man Hex macht. Ich zeig es dir zweimal. Da gehst du. Das ist, fünf Farbfelder aus dem Zusammenhang zu bringen. Was ich gerne mache, ist entweder unser Moodboard oder einfach nur eine Seite wie Dribble zu benutzen und du suchst nur nach Farben statt nach Stil. Du denkst vielleicht, ich liebe diese violetten schwarzen Farben wirklich , obwohl ihr Inhalt nicht ganz stimmt, könntest du entscheiden, dass die Farben für dich geeignet sind. Machen Sie einfach einen Screenshot und machen Sie, was wir mit dem Moodboard gemacht haben , und bringen Sie Ihren Screenshot in XD ein. Ich hab schon ein paar Sachen. Was ich für meinen gemacht habe, ist, dass wir wissen, was auf meinem Moodboard steht. Ich wurde von ein paar Farben fasziniert. Das gefällt mir. Dies ist eine blaugrüne Rauchfarbe und es gibt auch ein bisschen warme Kaffeetefarbe, also sind das die Farben, die ich stehlen wollte, ich meine, angemessen, leihen wollte. Kannst du eine Farbe stehlen? Was Sie tun können, ist, dass Sie Ihr Rechteckwerkzeug greifen und etwas herauszeichnen können. Dann hier drüben, siehst du, ich werde meine Grenze los. Sehen Sie sich die Füllung an, indem die Pipette auf das Werkzeug „Pipette“ klickt und dann können Sie es einfach bewegen und sagen: Ich will dich [LACHEN]. Sieht schwärze aus. Aber wenn du hier reingehst, kannst du sehen, dass es Teil dieses Farbtons ist und du entscheidest, dass ich ihn tatsächlich hierher verschieben möchte . Man sieht, dass das diese Farbe ist, nur gesättigter. Die Oberseite nach rechts ist gesättigter. Gleiche Breite. Lass uns noch eins machen. Lass mich ein paar Farben von hier schnappen. Ich entscheide mich für Pipettenwerkzeug. Ich hole mir das Braun hier drin. Du kannst es nach dem Pixel greifen, zwei, eins sieht gut aus. Oh, gib mir das Pixel [LACHEN]. Los geht's. Auch hier könntest du entscheiden, dass ich diese Farbe mag, aber ich möchte auch eine leichtere Version davon. Um ehrlich zu sein, so komme ich oft mit meinen Farbideen. Es ist nicht immer, aber oft bekomme ich, ich bin wie Mann, ich liebe, was sie hier gemacht haben und ich werde die Farben leihen und am Ende gehen, okay, ich mag diese Farbe, aber es ist zu warm. Ich möchte es so bewegen. Du kannst sehen, dass du es entsättigen kannst, indem du es nach links bewegst und einfach eins da drin gehst. Sie können mit dieser vollständig kostümierten Farbpalette enden , mit der Sie möglicherweise beginnen. Du kommst an einen Punkt, an dem du so bist, ich brauche eine dunklere Version, ich brauche eine hellere Version. weil Sie eine Schaltfläche benötigen oder der Kontrast nicht ausreicht für eine Schaltfläche oben oben oder der Text zu hell oder zu dunkel ist und Sie ihn am Ende anpassen, aber es ist ein guter Ort, um loszulegen. Adobe Color, Color Hunt und viele Screenshots und passende Farben von anderen Personen. Die andere Sache, die Sie beachten sollten, ist, dass Sie möglicherweise von vorhandener Produktfotografie und vorhandenen Markenfarben angetrieben werden, sodass Ihre Markenfarbe oder Ihre Reise zur Farbinspiration ziemlich verkümmert sein könnte. Möglicherweise müssen Sie hier die Farben auswählen, die das Unternehmen bereits verwendet. Möglicherweise können Sie sich in eine kostenlose Farbe oder eine sekundäre Farbe an ihre vorhandene Farbe schleichen eine kostenlose Farbe oder eine sekundäre Farbe . Wenn sie Rot verwenden, können Sie sich möglicherweise etwas anderes einschleichen, das dieses Rot unterstützt, um Ihnen ein bisschen Kontrast auf der Website zu geben , insbesondere wenn sie noch nicht viel Webby-Sachen gemacht haben. Es gibt einfach so viele Elemente, die unterschiedliche Farben benötigen, um eine Hierarchie von Bedürfnissen anzuzeigen , wie wichtig, was nicht wichtig ist, was der nächste Schritt sein könnte, Schaltflächen, oft in verschiedene Farben von anderen nicht anklickbaren Elementen, so dass Personen angezeigt werden, helfen ihnen, auf der Website zu navigieren. Ich plappere jetzt, das war's. Wir sehen uns im nächsten Video. 34. So erstellst du eine Farbpalette in Adobe XD: Hallo allerseits. In diesem Video erstellen wir dieses Farbmustersystem, die Primär -, Sekundär- und Akzentfarben, und wir bauen graue Farbfelder aus. Sie können wahrscheinlich sagen, dass dies ein kühlerer Satz von Grautönen ist , die ich benutzen werde, und Weiß. Lass mich dir zeigen, warum wir sie herstellen und wie man sie herstellt. Lass uns loslegen. Zu Beginn habe ich eine Menge Sachen, die wir in den letzten Videos verwenden , die Platzhalter sind und diesen Ort nur zu einem Chaos machen, noch unordentlicher als derzeit. Ich benutze nur mein Auswahlwerkzeug, ziehe ein Kästchen um sie alle herum klicke auf meiner Tastatur auf „Löschen“. Was wir tun werden, ist, dass ich diese Farbe mag , aus dem letzten Video habe ich sie von dort gestohlen, im Moment nicht in dieses Braun, also mag ich diese braune Farbe, die da drin ist. Lass mich das schnappen. Warte da. Er schnappt sich das Pipettenwerkzeug und ich hole mir etwas da drin. Ich mag diese kleine Kombination. Diese Folie ist auch da drin, aber ich grabe dieses Ding vielleicht. Wenn es sich um Farben für UI/UX-Projekte handelt, benötigen Sie oft eine Primär - und eine Sekundärfarbe, die ich hier habe. Oft brauchst du auch eine Akzentfarbe. Werfen wir einen Blick darauf. Nehmen wir an, die Primärfarbe ist hier diese dunkle Schiefertafel im Hintergrund, schwarz, nicht ganz und das ist die Sekundärfarbe. Es ist Grau, gewöhnt sich dort, es kommt da an, und dann ist die Akzentfarbe hier drin dieses Gelb. So brechen sie Informationen, Massensachen, wichtige Dinge, anklickbare Dinge oder kleine aktualisierbare Dinge aus. Es gibt andere, dieses Grün ist im Hintergrund grau , primär, sekundär. Haben sie eine Akzentfarbe zu diesem blauen? Die Akzentfarbe kann oft eine ziemlich starke Version eine ziemlich unverwechselbare Farbe sein und wird ganz verwendet, nur ein bisschen verwendet. Es hilft wirklich wichtigen Dingen, wenig Akzentfarbe. Jetzt gebe ich dir Hinweise , wie das geht. Es gibt keinen Grund, warum Sie keine Million Farben, zwei Farben, eine Farbe Schwarz und Weiß verwenden können. Es gibt keine Farbpolizei. Niemand hat mich bisher verhaftet [LACHEN] obwohl ich viele Verbrechen gegen Farbe begangen habe. Ich gebe dir nur meine Art, es zu tun. Wenn Sie die Farbtheorie etwas wissenschaftlicher und nachdenklicher machen möchten , schauen Sie sich Sarah Parkinson an, schauen Sie sich Sarah Parkinson an, sie hat einen Farbtheorie-Kurs, googeln Sie ihn dort, wo Sie ihn jetzt sehen und ihr werdet ihren Kurs dazu finden. Sie ist brillant darin und besser darin als ich. Ich gebe dir nur meine Tipps und Tricks, wie ich arbeite. Ich habe diese beiden Farben, ich will eine dritte Akzentfarbe. Ich weiß noch nicht was es ist. Ich habe hier mit diesem [LACHEN] schwachen Gelb herumgespielt , und du meinst, ja, das ist gut. Das gefällt mir auch. Es ist gelb, dass ich das wahrscheinlich nicht wie zitronengelbe Kanarienfarbe wählen würde. Ich mag Kiddish. Ich bin mir noch nicht sicher. Es gibt keinen Grund, warum Sie es auswählen und nicht ändern müssen. Es wird uns nur einen Ausgangspunkt geben. Mir gefällt es nicht schon. [GELÄCHTER] Es sind zwei in diesem Grün. Ich bringe es nur noch ein bisschen mehr auf die Gelbfärbung. Ich ziehe es sogar ein bisschen. Da gehst du. Ich bin mir einfach nicht sicher. Jedenfalls. Wenn Sie Ihre Farben haben, brauchen Sie oft eine dunklere und hellere wie wir es am Anfang gesehen haben. Was ich tun werde, ist, dass ich ein kleines neunspaltiges Raster erstellen werde. Dieser ist schon ziemlich leicht, also werde ich wahrscheinlich nur dunkler damit werden . Ich werde wahrscheinlich gehen, erinnere mich vor HSB, ich mag diese, Farbsättigungshelligkeit. In Bezug auf die Helligkeit verwende ich meinen Aufwärts- und Abwärtspfeil. Ich kann in diesem Fall nur meinen Abwärtspfeil benutzen, um ihn zu verdunkeln. Ich könnte feststellen, dass ich die Akzentfarbe nicht wirklich außer ihrer vollen Explosion verwende , weil das ein bisschen minky aussieht. Aber lassen Sie uns ein paar Optionen geben. Benutzen Sie erneut das Pipettenwerkzeug und gehen Sie dann davon und gehen Sie auch etwas dunkler. Was ich auch finden könnte, wenn es dunkel wird, ist, dass ich die Sättigung möglicherweise erhöhen muss , indem ich sie entweder auf diese Weise ziehe oder meine kleine Sättigung verwende, ein wenig nach oben gehen muss, nur um hinzuzufügen ein bisschen mehr Volumen zur Farbe. Mir gefällt es nicht. Schauen wir uns das hier an. Lass uns gehen. Du sättigst einfach meine Helligkeit so nach oben oder unten. Dieser ist wahrscheinlich zu dunkel, um vielleicht mit dem Mittelton zu beginnen, und dieser hier wird immer in die falsche Richtung gehen. Das gefällt mir. Gut. Das Gleiche gilt für diesen. Mal sehen, wie es aussieht, wenn es leichter ist. Ich denke, dieser ganze Haufen ist nah dran, aber es ist zu bluey. Ich möchte ein bisschen weiter in die Grüns gehen, indem ich das einfach ein wenig nach unten ziehe. Los geht's. Ich mochte diese Schiefertafel. Ich werde damit [LACHEN] in die falsche Richtung verdünnt. Deine Idee, ich werde etwas finden, das mir gefällt. Ich bin mit dem Gräben ein bisschen dran. Deshalb stehle ich Farben, und zwei Sekunden später hast du sie so angepasst, dass sie das sind und zwei Sekunden später hast du sie so angepasst, , was du willst. Eigentlich, warum zum Teufel macht er immer verschiedene Farbmuster. Es gibt nur Zeiten , in denen Sie diese Farbe verwenden möchten , und Sie können sie nicht verwenden weil der Kontrast nicht ausreicht. Sie müssen entweder zu einer dunkleren Version gehen, oder das funktioniert nicht oder eine hellere Version oder dies geht zu dieser Version für einen wirklich guten Kontrast, es ist eine Möglichkeit, einige Kombinationen zu machen. Primärfarbe, Sekundärfarbe, Akzentfarbe, in meinem Fall. Wieder keine Schriftpolizei , die Sie festnimmt. Tu einfach was du willst. Die andere Sache, über die wir sprechen werden , ist mit Schwarzen und Weißen zu tun. Schwarze und Weiße sind relativ einfach. Ich schätze, du gehst hierher und wenn du ein ausgewachsenes Weiß willst, ziehst du es einfach in das Eckmitglied hier rüber zum Rand. Aber was passiert hier? Offensichtlich ist ein Weiß, ich brauche kein Farbmuster. Warum? Weil es leicht zu finden ist. Aber was ich tun könnte, ist, dass du Off-White haben kannst. Es ist wie hier drin zu weit, aber nur ein bisschen. Ich habe dieses Weiß, das nur ein bisschen wärmer ist. Ich könnte ein kühles Weiß machen. Schauen wir uns das an. Anstelle eines warmen Weißes, das in meinen gelben Farbtönen liegt, gehe ich zu blau-grüner Farbe. Ich übertreibe ein bisschen, um es dir zu zeigen, aber du kannst sehen, wie das Weiß die gleiche Helligkeit hat, aber dieses ist wärmer und dieses ist kühler. Beide sind jedoch wahrscheinlich ein bisschen zu viel, also in Bezug auf die Helligkeit wahrscheinlich 98. Hundert ist Vollblastweiß, und das sind nur kleine Hinweise. Ich bin mir nicht sicher, was ich hier dafür machen möchte. Der andere Grund für ein cremefarbenes Weiß ist, sagen wir, Sie haben eine Schnittstelle, wir an, Sie haben Ihr iPhone und möchten ein Pop-up haben. Ich bringe es nach vorne. Denken Sie daran, mit der rechten Maustaste zu klicken, Sie können es zurücksenden, nach vorne bringen. Sie können all das sagen, und zumindest jetzt, wenn ich etwas wie einen Schlagschatten hinzufüge, machen wir wahrscheinlich keinen Schlagschatten in diesem Video, aber Sie können sehen, dass Sie dieses Pop-up haben, ist genug von einem Kontrast zu halte dich einfach am Laufen und der Schlagschatten hilft wirklich, ihn rauszuschieben. Du machst es andersherum. Dies kann das sein und das könnte Ihr Interface-Popup sein. Nur um es ein bisschen Kontrast zu geben, wenn es hier oben geht. Verstehst du was ich meine? Ich werde die etwas blauere Version runtergehen und den Rest der Farben machen. Lass uns hierher gehen, geh her. Ich hab fünf von ihnen. Fangen wir mit den Schwarzen an. Das Schwarze sagt das Gleiche. Sie können hier unten ganz schwarz oder sattes Schwarz werden. Sagen wir normales altes Schwarz und diese beiden hier. Dieser hier kannst du ein bisschen mehr coolen Charakter hinzufügen . Dasselbe gilt für Blues und Greens, es ist immer noch schwarz, aber es ist nur ein bisschen von etwas los. Ist es da? Nur ein bisschen. Gleich mit diesem kann man es in den Wärmen schaffen, los, ich will diesen nur ein bisschen wärmer. Es ist schwer dort zu sehen, aber wenn sie anfangen aufzuleuchten, wir an, wir gehen hierher, und wir gehen hier hin, wir ziehen die Leichtigkeit nach unten oder nach oben. Siehst du, dass es eher eine kobaltfarbene Nato-graue Farbe ist? Dann hier drüben, wenn ich das aufreihe, was Sie sehen können, erscheint es hier, besonders bei diesem Braun, da es leichter wird, ich werde es wahrscheinlich entfernen müssen, nicht nur leichter machen, aber entfernen Sie auch einen Teil der Sättigung, also ist es immer noch warm, aber nur auf weniger offensichtliche Weise. Sie können entscheiden, wohin Sie gehen möchten. Du könntest nur normales altes Schwarz-Weiß gehen. Oder in meinem Fall werde ich dieses blauige, stähle, stürmische Nato-Grau untergehen . Es gibt so viele Namen von Grau. Wenn Sie jemals versucht haben, Grau aus einem Farbmuster oder einer Tapete oder so zu pflücken , wissen Sie, dass Grautöne schwarz lackiert sind. Ich werde mich einfach zu niedrigeren Versionen hinunterarbeiten , indem ich hierher gehe und hier gehe und weiter nach oben gehe, bitte. Wahrscheinlich, da es leichter wird, auch ein Teil der Sättigung entfernt. Das ist Sättigung da drin, wir ziehen es einfach nach links. Ich zeige, warum ich gerne auf die [LACHEN] -Tastatur klicke. Da sind wir los. Es wird einfach mein Farbschema sein. Es gibt dir nur einen Anfang. Sie können dies nachträglich anpassen, aber später, wenn Sie 40 verschiedene Grauarten ausgewählt haben , da Sie keine Farbmuster zur Auswahl hatten , wird es schwierig sein, dies zu aktualisieren. Aber wenn Sie gerade genug haben , aus denen Sie mit etwas Variation auswählen können , können Sie sie später alle aktualisieren wenn wir auf Dinge wie Farbstile eingehen. Das sind meine Farbmuster, um loszulegen. Es ist nicht in Stein gemeißelt, das gefällt mir noch nicht. Sie werden wahrscheinlich sehen, dass es sich im nächsten Video geändert hat. Aber das war's im Moment, ich werde ein bisschen mehr daran basteln und wir sehen uns im nächsten Video. Das war's, ich entferne einfach etwas Sättigung. Das reicht. Lasst uns jetzt tatsächlich loslegen. 35. So erstellt man Farbverläufe in Adobe XD: Hallo allerseits, seine Farbverlaufszeit. Wir werden hier in Adobe XD ein paar süße Farbverläufe machen . Jetzt lass mich dir zeigen wie. Um einen Farbverlauf zu erstellen, fangen wir hier wählen ihn aus Befehl 3 oder Control 3 auf einem PC zum Vergrößern. Dann muss ich ein bisschen zurückziehen [LACHEN] Lasst uns einfach ein altes Quadrat schnappen. Es kann ein Kreis sein, es kann jede alte Form sein, die Sie gezeichnet haben. es ausgewählt ist, ändern Sie sie hier unter Ausfüllen. Klicken Sie auf Füllen, und oben haben wir Solid und Sie können diese verschiedenen Arten von Farbverläufen auswählen, also Angular Gradient. Wir fangen damit an weil du es nicht benutzen darfst. Ich weiß nicht [LACHEN] Warte, gesamte Farbverlauf ist entgangen. Linear ist wahrscheinlich am gebräuchlichsten. Um die Farben der Enden zu ändern, klicken Sie einfach auf beide hinein. Du kannst es hier Updates sehen, also oben, ich sage, du bist grün. Es ist länger voll. Lassen Sie uns meiner Meinung nach den schlimmsten Gradienten der Welt anstreben. Klicken Sie auf die untere, passen Sie den Farbton an, gehen Sie blau. Nein, rot, wo ist es? Das ist das Schlimmste. Das könnte der hässlichste Farbverlauf der Welt sein. Du könntest es lieben. Das ist okay. Ich ändere die Richtung. Du schnappst dir einfach einen dieser kleinen Griffe hier oder diese kleinen Punkte am Ende und ziehst sie heraus. Sie können entscheiden, in welche Richtung sie gehen möchten. Sie können es den Bildschirm passieren lassen. Du kannst es ziemlich eng in der Mitte haben. Abhängig davon, was Sie tun möchten. Es sieht gut aus. Wenn Sie nun eine dritte Farbe wünschen, können Sie dies ganz einfach tun, indem Sie entweder hier in der Mitte der Zeile klicken. Siehst du den Pfeil da? Es hat ein kleines Plus daneben steht Hue. Ich füge noch mehr außergewöhnliche Farbverläufe hinzu. Oh, es ist schlimm oder du kannst es hier oben in dieser Reihe machen, es spielt keine Rolle. Sie können darauf klicken, um ein zusätzliches kleines Farbfeld hinzuzufügen , für das Sie die Farbe anpassen können. Lasst uns das gut machen. Gelb Das brauchen wir. Sie können sie löschen, indem Sie hier auf einen von ihnen klicken. Nehmen wir an, wir wollen das Blau loswerden, klicken Sie einfach auf Ihrer Tastatur auf Löschen. Dies ist ein linearer Gradient. Der radiale Gradient funktioniert ähnlich. Sie sind ziemlich einfach selbst zu unterrichten. Mitte bewegt sich herum. Es gibt zwei davon, was seltsam ist. Dieser außerhalb ist das Ausmaß wie groß und wofty außerhalb der Ränder. Ich benutze das ziemlich oft für diesen Farbverlauf, der nicht ganz ein Farbverlauf ist. Kannst du sehen, dass es genau so ist, als wäre es da. Es verleiht der Farbe ein bisschen Fülle, ohne dass sie einen sehr starken Farbverlauf in Rot hat. Dieser hier unten verzerrt es. Kommt darauf an, was Sie tun möchten. hier können Sie weitere dieser kleinen Punkte hinzufügen, sie anpassen oder darauf klicken, um sie zu löschen. Um sich von Farbverläufen inspirieren zu lassen, gibt es eine coole Seite, die ich verwende. Ich komme immer wieder hierher. Grabient, grabient.com und Sie werden nur interessante Farbverläufe finden , die Sie vielleicht nicht erforscht haben. Sagen wir, du willst das hier haben. Du kannst auf diesen kleinen Punkt klicken und du siehst, dass es eine kleine Hexadezimalzahl gibt. Klicken Sie darauf. Sie können das kopieren und in Adobe XD das Anfangsfeld suchen. Dann unten anstelle von HSB, Farbtonsättigung und Helligkeit, geben Sie einfach die Hexadezimalzahl ein. Kehre zurück, kopiere, füge diesen ein und finde dieses Endmuster, ersetze sie und wir werden das zufällige in der Mitte hier los. Auf Wiedersehen. Dort hast du einen Gradienten. Natürlich können Sie genau dasselbe mit Ihrem Pipettenwerkzeug von jedem Ihrer Command 0 oder Control 0 aus tun, um alles zu erhalten, um diese Farben auszuwählen. Du könntest entscheiden , dass ich das will. Ich will das Innere, nämlich dass du diese andere Farbe hast. Du befehlierst 3, steuere 3 auf einem PC und Gradient. Eine letzte Sache, die ich Ihnen zeigen möchte, ist wir ziemlich bewusste Farbverläufe gemacht haben, was cool ist und ich werde sie in meinen Designs verwenden. Oft weiß ich nicht, dass man wirklich subtile Farbverläufe verwenden kann. Sagen wir, dass dies mein Modell meiner High Fidelity-Form sein wird. Ich werde alles ablegen, was drauf ist. Dieser wird meine Homepage sein und diese wird meine Hi-Fi für High-Fidelity sein. Ich möchte mit einem Hintergrund beginnen, einem wirklich leichten Farbverlauf, und Sie können es auch für Ihre Kunsttafel tun. Sie können Ihre Kunsttafel auswählen, indem Sie oben auf den Namen klicken und ihn im Grunde so behandeln wie wir es mit diesem Rechteck gemacht haben. Klicken Sie auf Füllen und gehen Sie einfach Linearer Verlauf. In diesem Fall möchte ich vielleicht nur ein leichtes cremefarbenes Weiß benutzen. Eigentlich möchte ich das nicht tun. Ich möchte hier rüber gehen und meine kleinen Farbmuster finden. Klicken Sie auf Sie, gehen Sie zurück, wählen Sie diese erste Farbe aus, benutzen Sie das Pipettenwerkzeug und ich werde mich wählen Sie diese erste Farbe aus, benutzen Sie das Pipettenwerkzeug und ich werde mich für so etwas entscheiden. Wie gut wird das sein? [GELÄCHTER] Wir werden es in einer Sekunde sehen? So etwas im Hintergrund oder vielleicht so etwas [LACHEN] Unentschlossen, aber Sie können der Rückseite Ihrer Kunsttafel einen Farbverlauf hinzufügen , nur damit Sie es wissen. Es könnte nur ein wenig weißer Farbverlauf in diesem Ding sein. Manchmal finde ich, anstatt ganz bewusst zu sein, wie beim Starten und Stoppen beider Seiten, dass ich diese Vergangenheit dort erweitern werde, wo ich sie brauche nur weil ich den Hinweis auf die Farbe haben will. Ich möchte, dass es es zusammenbindet, aber ohne dass es so offensichtlich ist. Wie auf den ersten Blick ist es nur eine milchige Version dieser beiden Farben. Aber wie auch immer, das sind Farbverläufe in Adobe XD. 36. So speicherst du und wiederverwendest du swatches Adobe XD: Hallo allerseits. Anstatt das Eye Dropper Tool immer wieder zu verwenden und Farben wiederzuverwenden, zeige ich Ihnen, wie Sie sie unten für gespeicherte Farbfelder hinzufügen können. Die einfache Version ist klicken und dann auf Plus drücken. [GELÄCHTER] Es gibt ein paar Kleinigkeiten, die ich dir zeigen werde, damit du die Farbfelder beherrschen kannst. Lass uns gehen. Anstatt dieses Eye Dropper Tool zu verwenden, werden wir sie an einem schönen, praktischen Ort hinzufügen Fügen wir dieses zuerst zu gespeicherten Mustern hinzu, das ist diese kleine Liste hier unten. Vielleicht haben Sie schon zufällig welche. Wenn es dir nicht gut geht, dann klicke auf Plus. dies ausgewählt ist, wird es heißen, dass Sie dies zu dieser Liste hinzufügen, genauso wie diese hier, und arbeiten Sie sich einfach durch und fügen Sie sie hinzu. Lass uns diese drei hinzufügen und dann gebe ich dir noch ein paar weitere Tipps, wir fügen sie alle hinzu. Wenn du die Bestellung durcheinander bringst. Als ob ich das eigentlich will, es ist alles. Du kannst das tun und es bedeutet jetzt einfach, anstatt, sagen wir, ich bin ganz hier unten, und ich brauche dieses Häkchen jetzt, um nicht so grün zu sein, ich brauche es, um das neue Grün zu sein, sieh dir das an oh, einfach praktisch zu benutze das Zeug wieder. Wenn du etwas drin hast, willst du es entfernen. Bei der Auswahl spielt es eigentlich keine Rolle, was Sie ausgewählt haben, um Sachen zu entfernen , Sie müssen es einfach in Niemandsland ziehen. Da gehst du. Ich werde es jetzt durchgehen, meine schnelle Schnellbearbeitungstechnik verwenden und alle meine Farbfelder hinzufügen, nur damit wir sie dort haben, also wartest du dort. Es war schmerzhaft zuzusehen und es war schmerzhaft zu tun. [GELÄCHTER] Klicken, klicken, klicken, klicken. Ich habe sie hinzugefügt und eine Sache zu beachten ist, dass der Farbverlauf, einige mischen diese zwischen einem Video, k ist, dass sie aus irgendeinem Grund im Moment keine Farbverläufe anwenden . Versuchen Sie es jetzt, Sie sind vielleicht in der Zukunft und es könnte funktionieren, aber wenn Sie bearbeiten, wirft einfach eine einfarbige Farbe ein und ich muss diese loswerden. [unhörbar]. Lass es mich nochmal versuchen. Das war interessant, das wusste ich nicht. Was es getan hat ist, kannst du sehen, wie der da unten spült? Es heißt, hey, ich habe diesen Farbverlauf bereits. Du bist wie ja du es tust. Es wird versuchen, als vollständiges Farbfeld zu bearbeiten und wenn Sie es bereits haben, wird es nicht wieder bearbeitet, was cool ist. Warte dort, ich verwechsle noch einen Gradienten. Mein Favorit auf der ganzen Welt, wenn du versuchst, einen Farbverlauf hinzuzufügen, wählt er nur eine der Farben aus. Kannst du es dort sehen? Richtig. Werden Sie es los ? Nett. Alles klar. Das ist praktisch, halten Sie Ihre Farben am Anfang bereit, nur damit Sie es wissen, mein Prozess ist nicht so systematisch, wenn ich im Scrappy bin, weiß nicht wirklich, was ich Tage des Designs mache , wo ich gerade bin Dinge durcharbeiten. Ich werde damit nicht so gut sein , weil ich nicht wirklich weiß, welche Farbe ich hier brauche, ich werde alle möglichen Arten ausprobieren, aber es dauert nicht lange, bis Sie in Ihren Prozess kommen. Wir haben eine feste Farbe oder Sie haben eine Kundenfarbe , die Sie nicht ändern können, sie ist Teil ihrer Markenrichtlinien. Es steckt da drin, du kannst sie hier hinzufügen , damit du nicht jedes Mal versuchst, es zu verwechseln oder eine Pipette, die es ausrüstet. Das sind gespeicherte Farbfelder in Adobe XD, lasst uns mit dem nächsten Video fortfahren. Sag auf Wiedersehen kleines Radio. 37. Kursprojekt 07 – Farben und Säulen: Hallo allerseits, es ist Zeit für ein Klassenprojekt kreativ. Wir werden alle Seiten und Spalten langweilig machen, dann mischen wir ein paar Farben. Als erstes möchte ich, dass Sie Ihre HiFiDelity-Seiten erstellen. Was wir in diesem Kurs machen werden, ist, weil wir nur ein paar Seiten haben, mit denen wir arbeiten können, wir werden unsere Wireframes hier oben lassen. Oft mache ich sie in einem separaten Dokument, aber dafür, weil wir eine ziemlich kleine Menge in diesem Aufgabenablauf haben , vier Seiten plus etwas mehr für Animation, lassen Sie uns die Hi-Fi eingeschaltet lassen Gleiche wie die Low-Fi-Verbindung mit Wireframes. Erstellen Sie einfach vier Seiten die exakt den gleichen Namen haben, außer dass ich am Ende Hi-Fi hinzugefügt habe . Homepage, Produkt, Kasse und Bestätigung Hi-Fi. Wählen Sie in diesem Fall das Telefon aus, an dem Sie testen möchten. heraus, welches Telefon Sie haben und welche Pixel, Höhe und Breite es ist, und Sie können das auswählen, wenn Sie Ihre neuen Seiten erstellen. Habe vier von denen in dasselbe für die Desktop-Version. mir nichts aus, welche Größe Sie verwenden, Sie entscheiden, was Sie sich wohl fühlen, und für die Website-Designseite. Ich verwende die 1920 Pixel, aber ich stecke sie am Rand und lege deine Spalten ein. Auch hier können Sie entscheiden, dass Sie 12 für den Desktop für mich und für das Telefon machen, entweder sechs oder vier, wo immer Sie sich wünschen. Was Sie finden werden, wenn Sie es tun [NOISE] ist, dass XD, weil es Pixel verwendet, manchmal nicht alles teilen kann, wie meine Telefongröße hier, was 375 ist [ LACHEN] Eine teilbare Zahl, die ziemlich hart ist, weil sie fünf Pixel oder eine ungerade Zahl ist, genau das ist es. Es macht einige quadratische Sachen an den Rändern , die dies alles zu konsistenten Dachrinnen machen dies alles zu konsistenten Dachrinnen , weil das für XD wirklich wichtig ist. Passen Sie die Kanten an , um alles fit zu machen. Wenn Sie feststellen, dass es in der Nähe ist aber ein bisschen abseits ist, machen Sie sich keine Sorgen. In diesem Fall geh einfach mit dem Flow. Es ist nur ein Teil davon, diese absolute Messung zu verwenden und für etwas zu entwerfen , das später reagieren wird . Es gibt eine kleine Trennung, also ignoriere einfach das Edge-Bit dort. Wenn du es kapierst. Hoffentlich werden Sie überall dort landen wo die Telefongröße, mit der Sie arbeiten , eine leicht teilbare Nummer und XD wird großartig aussehen, sobald Sie dies getan haben Vier Seiten, sowohl Desktop-, Handy- als auch die Spalten, entwerfen Sie Ihre Farbpalette. Es gibt vier Teile, die du brauchst. [NOISE] Wo ist es. Ich zoome raus. Das ist eine Abkürzung, die ich nicht gezeigt habe. Sie können dies verwenden oder Sie können die Befehls- und Leertaste gedrückt halten , einfach zufällig sagen, wenn Sie etwas tun, können Sie die Befehls - und Leertaste gedrückt halten und [NOISE] einfach eine Box herumziehen. Du hast gesehen, dass es Pop-up auf meinem Bildschirm gibt? Das heißt „Quick Launch Mission Control“ -Kameras. Auf einem PC, der die Leertaste steuern und Sie einfach herumziehen können, zoomen Sie hinein. Diese Abkürzung könnte auch auf dem PC übernommen werden . Wie auch immer, Exkurs. Ich möchte, dass du eine Primärfarbe, eine Sekundärfarbe, eine Akzentfarbe, deine Grautöne und mindestens einen Farbverlauf machst. Es macht mir nichts aus, was es ist. Jetzt verpflichten wir uns nicht zu viel , es ist Teil des Kurses. Wählen Sie ein paar Farben aus, schauen Sie sich diese Farbinspiration an, wählen Sie sie aus Ihren Moodboards und Sie können sie später ändern, keine Sorge. Machen Sie einen Screenshot und laden Sie Ihre Seiten, Ihre Farben hoch und dann möchte ich, dass Sie sie alle in Ihren gespeicherten Farbfeldern speichern, [NOISE], das sich unten befindet. Wenn Sie das also in eine gewisse Reihenfolge bringen können, machen Sie einen Screenshot dafür für Ihre Hausaufgaben und tun Sie das. Wir sehen uns im nächsten Video. 38. Welche Schriftarten kann ich in meinem web der App Design in Adobe XD verwenden: Hallo allerseits. In diesem Video schauen wir uns an, welche Schriftarten Sie in Ihrem Webdesign oder App-Design verwenden dürfen . Ich zeige dir ein paar gute Orte , von sie holen kannst und wie du sie vielleicht koppeln kannst, damit du ein paar schöne passende Schriftarten hast . Lass uns gehen. Warum kannst du keine alte Schriftart verwenden, die sich auf deinem Computer befindet? Weil es sich um eine spezielle Webversion oder App-Version handeln muss . Sie sind nicht alle gleich gebaut. Oft gibt es eine Version. Selbst wenn Sie es auf Ihrer Festplatte finden und es lieben oder vielleicht der Client es hat und er eine Schriftart hat, die er verwendet, können Sie möglicherweise eine Webversion davon finden. Wenn nicht, müssen Sie sich über etwas unterhalten, das dem, was sie verwenden, nahe genug ist was sie verwenden, nahe genug und das online verfügbar ist. einfach heraus, was es ist und sehen Sie ob eine Webversion verfügbar ist und ob sie sie lizenzieren muss oder ob sie kostenlos ist. Es ist eine seltsame Sache , die bei Webdesignern passiert ist , dass es eine Reihe kostenloser, fast kostenloser und preiswerter Schriftarten gibt. Adobe Fonts ist der Ort, an dem wir anfangen werden, da dies kostenlos ist. Sie zahlen eine Lizenz an Adobe, um diese Schriftarten in Ihren Designs zu verwenden. Sie zahlen nichts extra für sie, aber Sie bezahlen für diese Lizenz. Fonts.adobe.com ist ein großartiger Ort, um loszulegen. Es ist eine wirklich großartige Website. Dies ändert sich ständig, sodass Ihre Layouts nicht wie meine aussehen werden. Aber finde, dass alle Schriftarten oder durchsuche alle Schriftarten, du in so etwas endest. Was ich gerne mache, ist, dass ich gerne das Material einklebe , an dem ich gerade arbeite, nämlich wunderschöner grüner Tee. Das ist ihre Marketingbotschaft, die mitten hier sein wird . Dies ist meine Marketingbotschaft. Was ich gesucht habe war, dass ich diese Kombination hier wirklich liebe. Dieser wirklich große, schmale, dick, fett mit diesem handgezeichneteren oder etwas freundlicheren umgangssprachlichen Text. Das habe ich sowieso gesucht . Das ist es, was ich getan habe. Das Coole daran ist, dass Sie Ihre Marketingbotschaft eingeben können . Sie können mit den eigentlichen Buchstaben arbeiten, und dann können Sie hier entscheiden, dass es sauber ist, oder ich werde sie alle ansehen. Ich möchte, dass mein Mann keiner von denen ist. Es gibt zwei Teile. Es gibt diese Tags und dann gibt es wie offizielle Schriftklassifizierungen. Ich will San Serif, das ist eine Schrift, die nicht diese kleinen Füße hat , die von den Rändern abstechen. Dies sind Serifen. San Serif ist ohne diese Serifen, also will ich San Serif. Es wird all das loswerden. Großartig. Siehst du diese hier? Das will ich nicht. Ich will nur diejenigen, die in meinem Fall das Gewicht wirklich dick haben wollen. Ich möchte eine Schrift, die San Serif ist, die ein schönes, dickes Gewicht hat , im Grunde so fett ist, und ich möchte, dass sie schmal ist. Sie können sich hier entscheiden, ich möchte, dass es sich um eine schmale oder komprimierte Schriftart handelt, oder es gibt verschiedene Versionen davon. Aber du siehst hier drin, ich schränke es wenigstens schnell auf Sachen ein. Interessant, das gefällt mir. Dann arbeitest du dich einfach hier durch, wir entscheiden, welches du willst, und klickst dann auf Angenommen , wir wollen Interstate. Ich bin mir ziemlich sicher, dass ich das auf meinem Computer habe. Nein, tun wir nicht. Du siehst die Familie an. Sie sind ziemlich einfach zu installieren und dann klicken Sie auf „Schriften aktivieren“. Es gibt eine komprimierte Version und eine komprimierte Version. Es gibt nur verschiedene Ebenen , wie zerquetscht sie sind. Sie können dies teilweise zerquetscht, super zerquetscht und regelmäßig sehen. Sie können einen Teil von ihnen oder alle aktivieren und mit der Arbeit an Ihrem Design beginnen. Was Sie beim Herunterladen überprüfen müssen , ist , dass sie für die Weblizenzierung verfügbar sind. In meinem Fall können diese auf einer Website verwendet werden. Perfekt. Also überprüfe es einfach noch mal. Wenn Sie es von einer Website erhalten der einige dieser kostenlosen Websites wie 1001 Free Fonts oder DaFont oder einer dieser Font Squirrel sind, überprüfen Sie, ob sie tatsächlich auf einer Website verwendet werden können. Einige von ihnen sind es nicht. Eine Sache Sie tun können Ich denke darin ist, dass ich eins zurückgehen kann und ich kann sagen, dass ich dachte es gäbe eine Möglichkeit zu wählen zeige mir nur die Web, aber du kannst es hier unten sehen. Das zeigt mir, dass es für die Verwendung auf einer Website verfügbar ist und früher etwas war, auf das Sie achten mussten, aber so viel davon ist jetzt tatsächlich für den Online-Gebrauch verfügbar. Sieh sie dir an, aktiviere sie, sie hören einfach hier auf und am nächsten Tag ist es nur Magie. Sie verwenden die Adobe Creative Cloud und Sie können damit beginnen, mit ihnen zu arbeiten. Lassen Sie mich Ihnen eine andere Website zeigen, mit der Sie arbeiten können , ist Google Fonts. Fonts.google.com ist eine wirklich häufige Website, noch häufiger als die Adobe Fonts-Site. Diese sind alle kostenlos zu benutzen, Sie benötigen keine Lizenz. Sie sind einfach begrenzt. Adobe Fonts hat mehr Schriftarten, aber Google Fonts hat auch eine brillante Menge. Hier drin das Gleiche. Ich tippe meinen schönen grünen Tee ein und arbeite einfach genauso. Ihre Kategoriesuche macht nicht so viel Spaß. Sie haben gerade die grundlegenden Kategorien ohne alle Tags drin. Ein paar Optionen können Sie darauf eingehen. Ich werde darauf eingehen und nach Handschrift suchen und ich habe nach etwas gesucht , das nicht genau das war, was in diesem Modell war, sondern so etwas. Hier ist es ein bisschen anders als das Herunterladen. Sagen wir, du magst Pacifico. Du öffnest es, du lädst die Familie herunter. Alle diese Google Fonts werden über das Web oder die App verfügbar sein . Überprüfe die Lizenz, aber du wirst feststellen, dass sie funktionieren werden. Dann laden Sie die Familie herunter, Sie werden diese ZIP-Datei erhalten, die herunterkommt. Wenn Sie auf Mac und PC sind, sind sie ziemlich einfach, doppelklicken Sie einfach darauf. Doppelklicken Sie weiter darauf, bis sie installiert sind. Die Installation von Schriftarten ist ziemlich einfach. Wenn nicht, googeln Sie es und finden heraus, wie Sie Schriftarten auf Ihrem Computer installieren, aber Sie sollten kein Problem haben. Irgendwie kostenlos, völlig kostenlos und dann für Schriftarten bezahlen. keine Angst, für eine Schrift zu bezahlen. Es gibt nur einige Jobs, bei denen Sie nicht über die Ressourcen verfügen können und haben und dann gibt es Jobs, bei denen Sie ein bisschen mehr Zeit und ein bisschen mehr Nachdenken haben . Ich möchte Leute nicht davon abhalten, Schriftarten zu kaufen. Ich mache die ganze Zeit für Projekte. Schauen wir uns das mal an. Es spielt keine Rolle, um welche Gießerei es sich handelt. Ich schaue mir klim.co.nz an. Es ist eine erstaunliche Gießerei. Sie erstellen ihre eigenen Schriften. Sie haben ihren Sitz in Neuseeland, wo ich herkomme. Ich mag sie einfach. Ich fühle mich gut mit der Schriftart verbunden, wenn ich sie herunterlade. Anstatt nur zu sagen, dass ich eine Schriftart ausgewählt habe, kann ich besprechen, wie die Schriftart inspiriert wurde, was es für mich persönlich bedeutet, was es für den Kunden bedeutet. Aber du musst für sie bezahlen. Scheuen Sie sich also nicht, für Schriftarten zu bezahlen . Ich habe das neulich gekauft. Wenn es um den Kauf von Schriftarten geht, möchten wir diese kaufen. Du musst entscheiden, wofür du es brauchst. Desktop ist ein traditionelles Grafikdesign und dafür habe ich es gekauft. Ja, das hab ich dort gekauft. Werfen wir einen Blick auf unsere Webversion. Wenn Sie eine Webversion kaufen, müssen Sie ihnen sagen, als würde sie auf einer Website gehen. Was sind die monatlichen einzigartigen Besucher? Auf meiner Seite bin ich ungefähr 10.000 Jahre alt, also kostet es das je nachdem, wie viele einzigartige Besucher es gibt und Sie können sich für diese Webversion entscheiden. Bringt es euch alle oder nur einen von ihnen? Die Webversion, wenn Sie nur eine wollen, verwenden Sie einfach ein Thin und Medium. Es wird mich 100 Dollar kosten. Arbeiten Sie das in Ihr Budget ein, wenn Sie Konzepte verkaufen. Wenn Ihr Unternehmen, für das Sie arbeiten, bereits eine Schriftart hat und es eine Webversion gibt, müssen Sie herausfinden, ob es sich um eine kostenlose Schriftart handelt, die es verwendet? Verwenden sie Roboto, das kostenlos genutzt werden kann, oder verwenden sie etwas anderes , das lizenziert werden muss? Überprüfe das einfach noch mal. Wenn sie es nicht wollen, müssen sie etwas anderes freies finden , das ähnlich ist. Wie ich am Ende Schriftarten aussuche, sagt man hier auf Adobe Fonts, es ist wirklich toll, sie im Beispieltext zu sehen. Sie können einfach ziemlich nah dran sein und dann eine Reihe von Sachen herunterladen , die Sie nicht verwenden werden. Du wirst einen von ihnen benutzen und dann verbringe ich meine Zeit in XD. Wo sind wir? Los geht's. Am Ende habe ich Kopie für Kopie, alles in verschiedenen Schriftarten, spiele mit verschiedenen und du sagst, Gott, er hat es einen halben Tag gemacht. Wenn du das auch bist, mach dir keine Sorgen. Es passiert uns allen. Das andere nette und nützliche Bit ist das Pairing der Schrift. Wenn Sie bei etwas wie Adobe Fonts sind und so sind, muss ich diesen für meine Überschriften verwenden, aber was werde ich für meine Textkopie verwenden? Font-Pairing ist ein wirklich gutes Wort. Das hab ich hier eingetippt. Ich habe Adobe Fonts oder Schriftpaarung von Google Fonts gemacht. Ich habe ein paar davon zufällig geöffnet, um einen Blick darauf zu und ich habe andere Leute gefunden , die Font-Pairing gemacht haben. Man kann sagen, das gefällt mir. Sie können sich dafür entscheiden, und diese sind auf Adobe Fonts verfügbar. Man kann sagen, ich bin verkauft. Ich versuche mir eins auszudenken. Ich mag keine dieser Kombinationen. [GELÄCHTER] Das Gleiche hier, ich habe es gerade gegoogelt. Adobe Fonts erschien aus dem Adobe-Blog und es gibt einige coole Ressourcen für die Auswahl. Es ist schön, sie im Kontext zu sehen, denn manchmal nicht sehr hilfreich, sie hier alle einsam zu sehen. Einige von ihnen haben es. Sagen wir , wir wollen uns die Interstate ansehen. Wenn wir uns diese Familie ansehen, manchmal nicht alle von ihnen, haben sie einen Anwendungsfall. Hier ist nicht viel los, aber sie können eine Menge dieser Dinge hier drin haben. Ich wünschte, Adobe würde dort mehr anziehen. Aber ja, sieh dich um, sieh was funktionieren könnte. Es könnte so sein, dass ich diese beiden zusammen liebe. Pairing der Schrift, Herunterladen von Schriftarten. Ich denke, selbst Adobe interstate hat interstate Empfehlungen zum Abgleichen von Paaren. Jemand hat es geschafft, aber es ist ein bisschen zu viel los. Ich nehme es zurück, aber ich sehe sie gerne in etwas mehr Kontexten als auf einer Website. Welche Schriftarten habe ich ausgewählt? Lass mich es dir zeigen. Ich lade sie schnell herunter und lasse sie installieren. Das sind die. Dies ist sowieso mein erstes Konzept. Das hat mir gefallen, diese Bernina Sans. Ich mag es, weil es als Überschrift funktioniert weil es wie eine volle Fett und Enge ist. Schmal ist auch auf Handys sehr praktisch. Sieh dir das an, die nicht schmale Version. Sieh mal, es wurde breiter. Es ist breiter. Es bedeutet nur, dass Sie mehr Sachen in größerer Größe auf ein Telefon montieren können , das ziemlich schmal ist. Das kann also praktisch sein. Auch wenn es eine wirklich schöne, einfache, leicht lesbare Körperkopiergröße hat , kann ich auf etwas wie 16 hinausgehen. Es ist nett und lesbar. Ich werde das Führende loswerden, nur ein Leerzeichen zwischen den Zeilen, und das wird auch gut als Körperkopie funktionieren. Ich kann diese Version und diese Version benutzen. Gleiche Schriftart, Textkopie, Überschrift, und das wird meine kleine Akzentschrift sein. Mein einziges Problem damit ist, dass es zuallererst zu leicht war, aber zum Glück gibt es eine dickere Version und das andere Problem ist, dass es nur Kappen sind. Wenn Sie dabei stecken bleiben, wird der Kunde sagen, können wir es auf andere Weise tun? Können wir Kleinbuchstaben machen? Du bist wie, nicht mit dieser Schrift. Weil Ametic kein Kleinbuchstaben hat. Ich mag es genug, ich mache es. Aber das sind meine Schriften. Bevor wir gehen, wollte ich das eigentlich hier reinwerfen. Ich möchte nicht, dass du am nächsten Tag denkst wie Mann, er geht einfach rein und wählt eine Schriftart aus, wählt eine Unterkopfschrift aus, und dann ist er los. Nein. Wenn du wie ich bist und lachst, weil dein XD-Dokument mehr so aussieht, ist das Illustrator, ich weiß. Aber ich stelle später ein schnelles T-Shirt und 100 Revisionen zusammen . Alle Variationen der gleichen Sache, viele verschiedene Schriftarten. Wenn du so bist, mach dir keine Sorgen, ich bin auch so. Meine XD-Dateien werden alles unordentlich, bevor sie aufgeräumt werden. Ich wollte das aufgeben, falls du das Gefühl hast, dass du es falsch machst. Ja, die Dinge werden chaotisch. Das ist die Schriftauswahl in Adobe XD. Wir sehen uns im nächsten Video. Schau dir das an, ich habe ewig damit verbracht, diesen Blick zu bekommen. Dort bin ich gelandet, aber ich habe mich so sehr bemüht wie Indie, Japanesey, Skateboardy Ding. Ich liebe XD, du verstehst es. Das ist es. Wir sehen uns im nächsten Video. 39. Überprüfe, was andere Schriftarten für andere Schriftarten genutzt wurde,: Hi, allerseits. In diesem Video möchte ich Ihnen zeigen, wie Sie überprüfen können, welche Schriftarten anderer Personen sind. Sagen wir auf dieser Seite, potenzieller Konkurrent, Sie möchten wissen, welche Schriftart sie verwenden. Ich mag diesen, weil es klar ist und leicht verdichtet ist , so dass es viel in diese Kategorien passt. Sagen wir, du willst wissen, was es ist. Ich verwende Chrome, möglicherweise den gebräuchlichsten Browser. Sie verwenden es möglicherweise nicht, also müssen Sie es für Ihr eigenes herausfinden oder Chrome installieren. Sagen wir das hier, Sie klicken einfach mit der rechten Maustaste darauf und Sie können zu diesem namens Inspect gehen. Auf einem Mac müssen Sie möglicherweise bei gedrückter Wahltaste darauf klicken. Dieses Ding erscheint und du musst es vielleicht herumziehen und etwas bewegen. Was Sie suchen, ist auf dieser Seite hier dieses Ding namens Computed. Berechnet würde Ihnen sagen, dass Sie irgendwann etwas nach unten scrollen, was die Schriftfamilie ist, und Sie können sehen , dass es Roboto Condensed ist und Sie : „Awesome“, also weiß ich, um welche Schriftart es sich handelt. Dann können Sie zu etwas wie Adobe Fonts oder Google Fonts gehen oder im Internet suchen und einfach : „Ich möchte Roboto finden“. Super gebräuchliche Textkopierschrift. Du siehst, dass es ein Paar gibt. Es gibt eine Roboto-Platte. Das sieht eher so aus. Hier drin gibt es eine Menge verschiedener Gewichte und was ist. Das sieht so aus, als gäbe es Roboto Condensed. Das sieht so aus. Sie können es dann bereits aktivieren. Ich benutze Roboto für ein anderes Projekt, aber los geht's. Es ist eine Google-Schriftart, also findest du sie auch dort drin. Ja, so können Sie es möglicherweise von Websites aus tun. Nehmen wir an, Sie haben nur einen Screengrab oder eine PDF-Datei oder so. Was Sie tun können, ist dass Sie eine JPEG- oder eine PNG-Version davon benötigen. Diese sind von unseren Moodboards und mir hat diese Schrift dort sehr gut gefallen. Ich frage mich, was es ist. Was Sie tun können, ist seltsam bei Adobe, es spielt keine Rolle, wo Sie sind, es scheint, dass Sie einfach etwas hineinziehen können. Es gibt einen offiziellen Weg und es heißt nicht sicher [LACHEN] warte darauf, dass es geladen wird. Visuelle Suche. Ich habe erwähnt, dass es unter Schriften steht und es ist irgendwo da drin. Du wirst es finden. Ich hab es gerade da reingeworfen. Es heißt, ist das die Schriftart, die Sie wollen? Du kannst das zu den Dingen bewegen, die du willst. Ich bin wie, nein, ich war gut. Ich werde es aufrichten. Im nächsten Schritt wird es versuchen, den Text zu erraten. [GELÄCHTER] Ich habe es verlegt. Es findet es schwierig mit diesen wirklich dünnen Teilen dieser Serifen. Ich tippe ein, TEA STORE. Los geht's. Es macht es normal. Dann wird es mir ein paar Schriftarten geben. Sieh dir das an. Es ist ziemlich nah dran. Es ist nicht genau. Siehst du dieses kleine Ohr hier und den kleinen Pokey ein bisschen raus? Das ist anders. Kann ich einen von ihnen sehen, der das hat ? Es hängt auch davon ab. Du könntest so sein, dass mir dieses Ohr gefallen hat, es geht besser. Das hat das kleine flache Ende oder gefällt dir das, das ein bisschen hat ? Es bringt dich einfach in die Nähe und dann kannst du sie aktivieren und anfangen, daran zu arbeiten. Es wird sie nicht immer dazu bringen, dass sie es machen können. Es gibt andere Dienste. WhatTheFont! Ist ein cooles, das ich früher benutzt habe, aber ich habe angefangen, Adobe-Schriftarten zu verwenden weil es schön ist, etwas nahe genug zu finden und es zu aktivieren und mit meinen Designkonzepten zu arbeiten. Das ist, Schriften zu erkunden , die bereits online oder in Tonhöhen vorhanden sind online oder in Tonhöhen und greifen sie und verwenden sie in Ihrem Design. Eine kleine Randnotiz: Adobe hat eine App namens Adobe Capture. Es ist auf Android und iPhone. Das kannst du tatsächlich im Handumdrehen machen , während du dich bewegst. Es ist cool. Wenn du draußen bist und so bist, oh, das ist cool, kannst du tatsächlich versuchen, die Schriftart live auf deinem Handy zu erfassen und sie wird heruntergeladen und für dich installiert. Das ist es. Lasst uns mit dem nächsten Video fortfahren. 40. Welche üblichen Font Sizes (Schriftgrößen) du im Webdesign wählen solltest: Hallo du. In diesem Video werden wir untersuchen, welche Schriftgrößen Sie verwenden sollten. Die kurze Antwort ist, dass du alles benutzen kannst, was du willst. Aber es gibt einige Regeln für die Verwendung von Schriftarten auf Geräten und Websites, die ich untersuchen werde, und gebe Ihnen einige der Standardeinstellungen, um loszulegen , damit Sie gegen die Regeln verstoßen können, aber Sie müssen die Regeln, um die Regeln zu brechen. [GELÄCHTER] Lasst uns anfangen. Schriftgrößen können Sie also alles machen. Es gibt keine offiziellen Regeln, es gibt nur einige Standardwerte die Sie beachten sollten, weil Sie sehen werden, dass sie geladen werden, und eine Menge Webentwicklung basiert auf Frameworks, im Grunde genommen vorliegen Dinge, und sie haben einige Größen, die Standard sind und sie gewöhnen sich oft, also was sind sie? Schauen wir uns das an, rufen wir an, diese eine Überschrift. Für eine Überschrift ist die größte Größenüberschrift, die Sie wahrscheinlich verwenden können, naja, die größte ist normalerweise 72, 72 eine massive Überschrift. Sie gehen da runter, von dort unten, also sind 48 die Nächsten. Lasst uns diese linke Ausrichtung machen, sie stellen sich alle ein bisschen besser auf und lassen mich sie durchgehen. Das sind sie 72, dann fällt es auf 48 ab, dann gehen wir auf 32, dann gibt es 24 und dann sind es 18, und das sind Ihre normalen Überschriften. Lassen Sie mich diese hier schreiben , damit Sie sie besser sehen können. Dies sind die Größen, die normalerweise für Überschriften gelten. Sie nennen dies auch eine Überschrift 0, weil es massiv ist und diese Überschrift 1 ist. Im Webdesign ist dies eine ziemlich übliche Art, Dinge aufzurufen, und die Standardgröße, Sie können sie verwenden oder nicht verwenden, es liegt an Ihnen. Die andere Sache ist, dass du sie Heading 0 nennst. Ihr Programmierer oder Entwickler wird es wahrscheinlich H0 nennen und hier werden sie es H1 nennen und so weiter und so weiter. Wenn ich mit meinem Entwickler spreche oder ein bisschen Webdesign mache, arbeite ich oft oder ein bisschen Webdesign mache, mit H1 anstelle von Überschrift 1 gleich 48, der Standardwert ist H1 und es wird standardmäßig 48 sein, wenn Ich codiere es ein, wenn ich es nicht ändere, und das ist ein guter Punkt, du kannst es ändern. Es bedeutet nur, dass der Entwickler es durchgehen und vielleicht 1,5 der ursprünglichen Größe machen muss es durchgehen und vielleicht 1,5 der ursprünglichen Größe machen , also sind dies die Standardwerte, zumindest für Überschriften. Der nächste ist Ihr Absatz für Ihren Text zur Textkopie. Dies wird als Ihr Absatztext oder Ihr P-Text bezeichnet , und oft ist das 16 und oft ist es nicht fett. Es ist eine normale Schriftart und das werde ich in diesem Fall verwenden. Aber auch hier hängt es von Ihrem Schrifttyp ab, da einige Schriftarten einfach kleiner aussehen , obwohl sie 16 Punkte haben. Sie haben vielleicht ihre Grundlinie am selben Punkt und die x-Höhe gleich, aber sie könnte sehr dünn sein, daher muss sie größer sein, um gesehen zu werden. Sie können also diese Regeln brechen, nur ein guter Ausgangspunkt. Die andere Sache, die Sie tun müssen, ist, dass Sie, wenn Sie einen Absatztext auswählen, 16 Punkte sind, ist das groß genug? Sie müssen sicherstellen , dass Sie, wenn wir so etwas wie eine Körpertext-Shuffle , wenn Sie es tun, eine Größe betrachten. Jetzt wissen wir, dass meine 100 Prozent auf meinem Bildschirm eigentlich nicht für mein Gerät geeignet sind. Ich kann entweder ein paar hinterhältige Sachen machen, 75 scheint wieder gut zu sein, ich halte mein Telefon hoch, das ungefähr die richtige Größe meines Bildschirms hat, deins könnte zu 100 Prozent perfekt sein. Probieren Sie es zu 100 Prozent aus, probieren Sie es niedriger aus, es ist ein guter Messgerät, aber vergessen Sie nicht , auf Ihren Geräten zu testen, insbesondere wenn Sie zuerst ein Handy oder eine App erstellen, bringen Sie es mit dieser Adobe XD-App dorthin und sehen Sie es dort in der Vorschau, damit Sie wirklich mögen können, dass das tatsächlich machbar ist, weil Sie auf , damit Sie wirklich mögen können, dass das tatsächlich machbar ist Probleme stoßen , wenn Sie so sein wollen, ich wäre nicht super cool und bringe es auf 12 herunter. Es mag interessant aussehen, aber Dinge wie Suchmaschinen sind es nicht 100 Prozent, aber sie werden sich Ihre Website ansehen und sagen: Hey, diese Seite ist für jemanden auf einem Handy nicht zugänglich telefon. Wenn jemand auf einem Mobiltelefon sucht, wird Ihre Website möglicherweise nicht vollständig schwarz gekennzeichnet, aber sie wird niedriger eingestuft als eine Website von gleicher Qualität, die Schriftart verwendet Größen, die als zugänglich oder die richtige Größe gelten. Um ein wenig durchschauen zu können, ist es eine Ihrer Aufgaben nach diesem Kurs, einen Blick auf den Begriff der Barrierefreiheit und Schriftgrößen zu werfen. Für mich sind es zwei Dinge, die Sie brauchen, dass es die richtige Größe hat, also ist 16 perfekt, kann damit nicht wirklich schief gehen und es muss einen hohen Kontrast haben. Google wird es auch nicht mögen, wenn Sie dies versuchen , da es spammy ist, es fügt viele Keywords hinzu und Leute versuchen, es zu tun, um Google auszutricksen. Aber Google findet das als sehr niedrigen Kontrast heraus, also werden wir Ihre Rankings verletzen , weil es für Leute, die es sehen , nicht so nützlich ist . Warum sollten Sie es den Leuten zeigen ? Google ist so klug. Habe ich meinen Absatztext, ist er die richtige Größe? Es ist 18, da sind wir los. Testen Sie auf Ihrem Gerät, Sie können damit beginnen. Das musst du nicht, denn ich habe eine andere Schriftart, die ich mir all diese Typen schnappen werde. Ich werde sie duplizieren und ich werde richtig ausrichten und ich werde sie hier ausrichten. Das sind also Ihre Ausrichtungstools. Haben wir das schon gemacht? Ich weiß es nicht. So heiß ist es nicht. Dreh die Linie um, rote Linie. Ich gehe zu der anderen Schriftart, die ich habe , an den ich mich nicht erinnern kann. Es heißt irgendwas, und ich glaube, das war's. Das sind meine Schriftarten, meine verspieltere, umgangssprachliche Marketing-Schriftart. Nicht so einfach zu lesen, nicht gut für die Körperkopie, weil es zu klein aussieht, also werde ich das loswerden, wahrscheinlich auch das und das ist wahrscheinlich das kleinste, was ich brauche, um dies in einer Überschrift zu verwenden auch. Aber können Sie die Berechtigung von Heading 2 in dieser Schriftart sehen? Ich habe mir Bernina ausgesucht. Bernina ist nicht gegen diesen hier. Dieser muss ziemlich groß und für die Verwendung Ihrer Folien nicht wesentlich sein. Also würde ich das nicht als Navigation verwenden , weil es zu schwer zu lesen ist. Aber für unsere coolen kleinen Marketing-Messaging-Dinge , solange wir es schön und groß verwenden, denke ich, dass es gut wird. Das ist mein Font 101, du kannst es völlig ignorieren oder mit an Bord nehmen, aber jetzt weißt du es . Lasst uns ins nächste Video gehen. 41. So machst du Zeichenstile in Adobe XD: Hallo allerseits. In diesem Video dreht sich alles um Charakterstile, wiederverwendbare Dinge, die wir auf Bits klicken und gehen können, hey du bist jetzt das und das, naja, das ist ein Weiß. [GELÄCHTER] Verwenden wir die schwarze Version. Sie können durchgehen, einige vordefinierte Stile haben , die Sie verwenden und wiederverwenden können. Ich zeige dir, wie man die herstellt. Wir werden auch ein paar weiße Versionen des Textes erstellen. Am Ende machen wir einen kleinen Produktionsteil des Videos, in dem nicht so viel mehr lernen müssen, nur ein paar Sachen machen zu müssen, und ich zeige Ihnen einige der Probleme, auf die ich während meiner Arbeit stoße. Deshalb ist dieses Video ein bisschen besonders lang. Ja. Lassen Sie uns darauf eingehen, Charakterstile. Um unsere Charakterstile zu erstellen , lasse ich das da drin. [GELÄCHTER] Ich habe das geschlossen. Ich schließe das oft, um Screenshots für verschiedene Dinge für die Kurse zu machen. Du kannst sie einfach anklicken. Möglicherweise schließen Sie versehentlich an, klicken Sie einfach erneut darauf, öffnet sich wieder. Wir haben uns hauptsächlich Schichten angeschaut. Wir haben uns ein bisschen von diesem Asset-Panel angeschaut. Wir haben im Grunde [LACHEN] alles daraus gelöscht. Aber Sie können hier einige unserer vordefinierten Stile sehen. Es gibt unseren Charakterstil. Nehmen wir an, wir haben beschlossen , dass dies unsere Überschriften sind und Dinge, die wir einfach alle mit unserem Auswahlwerkzeug auswählen und einfach loslegen können , boom. Es bedeutet nur später , wenn wir tippen, und ich tippe, können Sie sagen, dass ich tatsächlich möchte, dass es dieses oder jenes oder dieser ist. Das sind Ihre Absatzstile. Du kannst sie einzeln oder als große Gruppe hinzufügen , wie ich es gerade getan habe. Vielleicht möchtest du dich summieren. Sie könnten entscheiden, dass Überschrift, was war dieser wir es tatsächlich nennen werden, anstatt es so zu nennen, vielleicht eine, Null, Bindestrich [LACHEN] Überschrift Null, Sie könnten durchgehen und nenne alle diese. Ich lasse meins so wie sie waren. Das Coole an der Verwendung von Styles ist offensichtlich, dass wir sie einfach anklicken und eingeben, sie hier berühren und eine andere Größe auswählen können . Es bedeutet auch, dass es später großartig wird , wenn wir aktualisieren. Der Kunde kommt zurück und sagt auf keinen Fall, Mann. Ich stehe absolut nicht auf Bernina. Ich brauche es, um etwas anderes hier zu sein. Sie senden eine E-Mail an dich und du gehst, okay. Was Sie tun, ist, dass Sie mit der rechten Maustaste darauf klicken und Bearbeiten sagen. Sie können sagen, der Kunde es will, wir werden es ihnen geben. Los geht's. Klassischer Witz, Dad Witz. Das Coole daran ist, dass es hier aktualisiert wurde und die ganze Zeit aktualisiert wurde, in der es benutzt wurde. Ich hätte das ein bisschen aufregender machen sollen. Wir machen rückgängig. Wenn Sie alle verschiedenen Apps auf allen möglichen Seiten haben, aktualisieren Sie sie. [unhörbar] Witz oder zumindest der aufregende Teil von allem. Stile können einfach aktualisiert, einfach hinzugefügt und einfach umbenannt werden. Ich mache das Gleiche für diese Typen und füge diese drei hinzu. Es liegt an dir, wie chaotisch du darauf eingehen willst. Sie könnten entscheiden, dass ich tatsächlich eine andere separate Gruppe davon habe eine andere separate Gruppe davon und sie werden alle weiß sein. Weil es viele dieser App geben wird, die tatsächlich auf weißer Version sein wird. Das Gleiche ist damit. Es wird eine weiße Version geben. Je nachdem, ob du denkst, dass es hier drin mächtig oder einfach nur chaotisch sein wird . Je nachdem, wie neu Sie sind und wie Sie es schließen können, geraten Sie in die Unordnung. Das Seltsame daran ist, dass wir, wenn Sie von anderen Adobe-Produkten stammen, wenn Sie von anderen Adobe-Produkten stammen, Zeichenstile verwenden und Sie diese anwenden müssen , nicht anwenden, das wird nicht angewendet InDesign, Illustrator, Photoshop. So ist es in diesem Fall nicht. Sagen wir, das ist Amatic bold 48. Wenn ich es einfach hier eintippe, sind sie nicht mit dem Stil verbunden und ich tippe [NOISE] ein und ich mache es Amatic, und ich mache es 48 und ich mache es fett und es ist wahrscheinlich weniger, diese schwarze Farbe zu sein, obwohl es nicht mit einem Stil verbunden ist, ist nicht so, was ich tat. Ich dachte, wie wende ich den Stil jetzt an, wo ich gemacht habe? Es geht einfach, wenn Sie etwas in diesem Dokument ändern möchten etwas in diesem Dokument , das zufällig die richtige Schriftart, die richtige Farbe oder die richtige Größe ist, kann ich gehen und einfach bearbeiten sagen und Sie sehen, es wird sie alle anpassen. Du siehst nur die Farbe dieses und dieses, es gibt keine erneute Verbindung. Es durchsucht nur das Dokument allem, was zufällig die richtige Schriftgröße und die richtige Schriftfarbe hat usw. Sie können sehen, dass es diese dort oben nicht berührt hat, weil es die falsche Farbe hat. Hat keinen Sinn ergeben. Nur für diejenigen, die Zeichenstile in anderen Anwendungen verwenden , suchen Sie vielleicht nach einigen, ich weiß nicht, detaillierteren Details, bei denen es keine gibt. Es ist klug. Die andere Sache, für die wir noch keinen Stil gemacht haben , ist dieser Absatzstil hier unten. Wir waren hier in dieser Box, diese hat nur die Breite erweitert. Denken Sie daran, dass wir uns das früher in der Klasse angesehen haben. Für einen Absatz möchte ich wahrscheinlich diese Box hier, möchte ich wahrscheinlich diese Box denn was ich tun möchte, ist, dass wir das einfach ein paar Mal einfügen , ist die Zeilenhöhe. Schau, das ist nicht das, was ich will. Mein Stil hat momentan eine Linienhöhe von 45, gigantisch. Ihr könnte auf etwas Passenderes eingestellt sein. Ich habe mich irgendwann mit meinem angelegt. Du kannst das zurückdrehen. Bezug auf die Größe es sein sollte, gibt es wieder keine genaue Größe, aber etwa die Hälfte der Schriftgröße, die kleineren Größen funktionieren gut [LACHEN] 1.5 dann sagen wir 20. Es ist keine wissenschaftliche Regel. [GELÄCHTER] Ich nehme es zurück. [GELÄCHTER] Diese Regel funktioniert gut, wenn Sie mit 8, 9, 10 Punktgrößen arbeiten . Es scheint mit 16 nicht so gut zu funktionieren. Entscheiden Sie sich für eine Schriftgröße. Denken Sie daran, ich benutze nur meinen Auf- und Abwärtspfeil, bekomme so etwas wie mein Zeilenabstand ist perfekt. Worüber Sie sich auch entscheiden müssen, die Absatzumbrüche. Wir haben uns das nicht wirklich angeschaut. Wenn ich eine Rückkehr eingebe, gibt es im Moment eine Rückkehr. Ich drücke einfach die Eingabetaste auf meiner Tastatur, aber es gibt kein Leerzeichen, keinen Absatzabstand. Was ich tun werde, wähle alles aus und das ist hier Option. Im Moment gibt es keine Leerzeichen zwischen unseren Absätzen. Du müsstest das tun, der alte Trick mit doppelter Rückkehr. Das ist zu groß. Dann versuchst du diesen Text hervorzuheben und du meinst, wenn ich das bis zu einem gewissen Punkt erreiche, wird das funktionieren? Nein. [GELÄCHTER] Was wir tun werden, ist alles auszuwählen und dies zu verwenden, um Absätze auszuspielen. Wir werden das halb so groß wie die Schriftgröße machen. Das ist meine kleine Regel. Es ist die halbe Größe [LACHEN] der Schrift ist gut für den Abstand zwischen den Absätzen, nicht für den Abstand zwischen den Zeilen. Ich werde so tun, als wäre es sowieso das, was es war. [GELÄCHTER] Was wir jetzt tun müssen, ist, dass wir unseren Absatzstil aktualisieren müssen. Wir müssen es wahrscheinlich löschen und erneut starten. Ich glaube nicht, dass wir das nicht einschränken konnten. Lasst uns gemeinsam nachsehen. Du könntest es einfach bearbeiten und so machen, aber was ich mache, ist es einfach zu löschen und es dann wieder hinzuzufügen. Das bringt einen guten Punkt hervor. Es ist wieder bearbeiten. Statt dessen nenne ich diese eine Hauptkopie. Sie können sie in der Reihenfolge verschieben, abhängig von Ihrem OCD-Niveau , wo sie sein müssen. Es wird wirklich verwirrend, wenn sie alle durcheinander sind, es gibt Ihnen eine kleine Vorschau , die Sie nahe bringt. Sie könnten entscheiden, dass es einfacher ist , anstatt das alles zu lesen, Sie können dies H1 nennen. Wir haben vorhin darüber gesprochen. Eigentlich ist das H-Theorem. Du nennst das H2. Es kann zählen. [GELÄCHTER] Dieser hier wird h sein. Was war das? Vier ist der niedrigste. Ich teile den nächsten auf. könntest du entscheiden [LACHEN]. Ich bin mir nicht sicher, warum ich sie alle eingeweicht hatte, um es zu beweisen. Aber es ist fertig. Auch hier keine genauen Regeln, aber das ist praktisch, besonders wenn Sie es später aktualisieren müssen, auch wenn Sie das alles nicht offiziell hier einsetzen und nur eine Reihe von Schriftarten aktualisieren müssen um diesen zu speichern, muss man aktualisiert werden. Du könntest einfach bearbeiten. Sie fügen nur hinzu, um hier reinzugehen, um es zu bearbeiten. Sie können sehen , dass alle Dinge, die Sie verwenden, aktualisiert werden. Sie könnten es dafür verwenden und Sie können Ihre Sachen sicherlich löschen und die eigentliche Schriftart nicht löschen, den tatsächlichen Stil löschen. Jetzt verwenden Sie es einfach, um Ihre gesamte Hauptkopie in einem Dokument durchzugehen und zu ändern , ohne Stile zu verwenden. Alles klar. Eine andere Sache, die Sie tun könnten, ist, dass Sie auch eine Textkopie für fett hinzufügen. Diese hier füge ich eine Version hinzu. Dieser Typ hier ist eine Körperkopie. Ich werde eine andere Version erstellen, die die fett gedruckte Version meiner ist. Anstatt eng, unregelmäßig, werde ich fett schmal werden, und ich füge diesen hinzu, und ich gebe ihm den Namen Body Copy Bold. Es ist sehr üblich, es auch Absatz zu nennen. Diese Textkopie weiß ich nicht. Body Copy Body, sogar Fett, weiß [LACHEN]. Alles klar. Ich hab diese beiden Versionen. Sonst noch was ich teilen möchte? Ja, das gibt es, ich habe meine Notizen überprüft. Ich möchte dich wissen lassen, dass du es nicht zweimal hinzufügen kannst. Dieser ist bereits diese Body Copy Bold [LACHEN]. Wenn ich noch einmal bearbeite, schau, wenig Warnung wäre hilfreich, aber es bedeutet nur, dass ich schon da drin bin , füge mich nicht wieder hinzu. Wenn ich durchgehe und das zu einer seltsamen Zahl wie 17 mache und ich jetzt bearbeiten kann , schau mir [NOISE] an, da ist er da. Anbetende Soundeffekte. Kannst du sie rausziehen? Das kannst du nicht. Rechtsklick, lösche sie. Ich mache das tatsächlich rückgängig, also gehe ich zurück zu meinem normalen. Eine andere Sache, die ich mit Ihnen teilen wollte, ist, dass Sie, wenn Sie aus anderen Adobe-Programmen stammen, Teil des Adobe-Landes sind, Teil des Adobe-Landes sind, vielleicht sind Sie etwas von Illustrator oder InDesign, Premiere Pro, irgendeiner von ihnen. Das Coole an Adobe und ihrem Bibliothekssystem ist, dass Sie bereits einige Schriftarten in einem anderen haben, dies ist Adobe Illustrator. Es könnte alles sein, was Charakterstile hat, InDesign, Photoshop, diese Art von Dingen. Was Sie tun können, ist, Ihre Bibliotheken in jedem Programm zu öffnen , das Sie verwenden. Wähle das Ding aus, klicke unten auf das kleine „Plus“ und sag, ja, lass uns diesen Charakterstil meiner Bibliothek hinzufügen. Ich füge es dieser XD-Klasse hinzu, und es funktioniert im Moment nicht mit Absatzstilen, XD, ich weiß nicht, ich denke, es gibt zu viel Komplexität darin. Das ist sowieso meine Vermutung. Das könnte sich in Zukunft ändern, aber im Moment kommen Charakterstile durch. Es gibt da, es heißt neuer Charakterstil. Wenn ich in XD gehe und wer erinnert sich, was die Bibliothek ist? Es ist an einem wirklich seltsamen Ort. Wird verwendet, um in einem eigenen kleinen Panel zu öffnen. Jetzt erinnern Sie sich jedoch, dass Sie hier auf diesen kleinen Pfeil klicken und wieder in Ihrer Bibliothek landen. Es gibt meine Bibliotheken, es gibt mein Vermögen. Fügen Sie Assets in meine Bibliotheken und ich werde meine XD1, XD-Klasse finden. Das sind Charakterstil, du, jetzt werden wir jeden Stil sein , der zufällig Museo Sans Abgerundete Größe 10 war , keine angemessene Größe, aber es könnte dir etwas Zeit sparen wenn Sie bereits Bibliotheken haben, haben Sie bereits einige Markenrichtlinien über einige gute CC-Bibliotheken. Dieses Zeug kann zugänglich sein, anstatt es neu zu erstellen. Jetzt fragen Sie sich vielleicht, macht er das jedes Mal, wenn er einen neuen Job anfängt? Ruft die offiziellen Farben und alle Schriftarten ab und fügt Stile hinzu? Nein, tun wir nicht. Es kann praktisch sein, Dinge zu aktualisieren, während Sie weitermachen. Möglicherweise haben Sie bereits einige Markenrichtlinien , denen Sie folgen müssen, also ja, warum nicht? Aber oft passiert dies nachdem Sie ein bisschen Gefühl für das Design bekommen haben. Sie erstellen diese rückwirkend so, dass Sie konsequent sind , aber die reine Konzeptphase, in der alles durcheinander ist, nein, ich verwende nicht zu viele Charakterstile, aber es dauert nicht lange du meinst, oh, ich kann einen Charakterstil benutzen und das wird dir auch irgendwann passieren. Dieses nächste bisschen ist mehr davon, ich muss nur etwas für diesen Kurs arbeiten, damit wir weitermachen können, weil im Moment viel Theorie war. Ich muss ein paar Dinge auf der Seite durchstehen. Du darfst es überspringen. Diese Dinge können praktisch sein. Das sage ich auch, überspringe es ständig und es gibt immer einige negative Informationen wenn du rumhängen willst. Ich fange an, eine so genannte Karte auszulegen. Sie haben am Anfang gesehen, dass sie nur ein vernünftiges Teil meiner Produktdetails sind. Ich werde etwas von dem Gelernten in die Praxis umsetzen . Das werde ich tun. Ich möchte meine Kolumnen einschalten. Ich schalte meine Spalten ein, indem ich oben auf der Pfeiltaste auf den Namen klicke. Gehen wir zum Layout-Raster. Nun, je nachdem, womit du angefangen hast, habe ich mir mein Design angeschaut und möchte ein bisschen Polsterung auf der Außenseite. Ich habe beschlossen, dass ich nicht viele Informationen in mein Design einfügen muss. Ich wechsle zu dieser Option mit vier Spalten. Was ich tun werde ist, ich schätze, ich möchte das hier behalten und dir nicht nur zeigen, dass du betteln solltest. Dass es fließend ist in Bezug wie groß das Bewachte sein sollte, welche Marge willst du? Es kommt auf dein Design an. Ich wollte diese Spalten, weil ich sie wirklich nützlich finde , um die Konsistenz über Seiten hinweg zu gewährleisten. Du könntest entscheiden, dass ich es einfach überall hinlegen werde , wo ich [LACHEN] mag. Das ist in Ordnung. Es wird ein bisschen schwierig für Ihren Entwickler. Was ich in die Vier-Kolumne gehe . Ich will wie viel von der Seite. Als ich mit diesem Kurs oder diesem Design begann, wollte ich alles an die Ränder schieben. Deshalb kann ich am Rand an den Kanten eine Null-Polsterung hinzufügen . Aber jetzt denke ich eigentlich, dass ich links und rechts etwas Spielraum will . Ich benutze das. Ich habe es nicht abgedeckt, weil ich es nicht getan habe, aber du legst den Rand oben, unten oder nur links und rechts, es liegt an dir oder du willst es tun. Es gibt diese negativen Informationen , für die Sie rumhängen. Auch hier ist ein Vielfaches von acht wirklich praktisch, also 16 wie viel ich tatsächlich mache, 22 Vielfache von acht, 24 an den Rändern und ich könnte die Breite öffnen, die Rinne auch, um 16 zu sagen. Ich schaue mir nur noch mal an. Können wir mit 24 leben? Wir versuchen es mal. Denken Sie daran, dass ich es zu meinem Standard machen kann. Wähle all diese Jungs aus und benutze den Standard und ändere es wahrscheinlich noch 20 Mal, während wir weitermachen. Es ist okay. Was ich will ist, dass ich ein Rechteck möchte, das mein Produkt zeigt und wie weit möchte ich es haben? Ich werde jetzt jede Sekunde total gegen meine Regeln verstoßen. Ich weiß es [LACHEN]. Es wird ein Platzhalter für das Bild sein. Ich hole mir mein Typwerkzeug. Ich tippe das Produkt ein. Dies werden meine verschiedenen Eigenschaften dieses grünen Tees sein. Klicken Sie einmal. Auf was bin ich? Ich war aus irgendeinem Grund auf einem Kreiswerkzeug. Schnappen wir uns das Typwerkzeug. Klicken Sie einmal, und das wird Tencha Mimoto [LACHEN] sein. Etwas mit grünem Tee zu tun. Da sind wir los. Wir haben eine süße Größe da drin. Auch hier funktioniert das für mich. Kopie des Hauptteils. Ich hole mir mein Typwerkzeug. Ich klicke und ziehe eine Box heraus. Ich lege es in eine Textkopie ein. Ich wiederhole das vielleicht ein paar Mal. Eigentlich könnte ich es den ganzen Weg hinweg schaffen, dies dazu bringen, sich auszurichten und in die Textkopie zu gehen, wo Sie , in Ordnung, Stile dazu bringen unsere Spalten zu verwenden. Wir erhalten eine gewisse Konsistenz in der Polsterung. Dies beginnt im richtigen Raum mit einigen unserer Farbmuster. Lasst mich gehen. Los geht's. Schalten Sie die Spalten jetzt aus. Denken Sie daran, dass es Verknüpfungen dafür gibt, dass Spalten ein- und ausgeschaltet sind. Ich nenne es Kolumnen. Es nennt sich das Layout-Raster. Wir haben die Quadrate oder die Spalten gemacht. Das ist diese verrückte Abkürzung dort. Ihre wird auf einem PC anders sein. Shift, Kommando, Apostroph. Da sind wir los. Was ich tun möchte, ist ein Vielfaches davon zu haben , los geht's. Wir schauen uns den Abstand an. Ich passe das einfach an. Lass es uns im superschnellen Modus machen. Alles klar, stießen Sie auf mein erstes Problem. Es passt einfach, aber ich werde wahrscheinlich etwas länger finden. Ich werde dieses Problem im Moment ignorieren. Vielleicht muss ich in dieser speziellen Schriftart zu etwas anderem wie 44 oder etwas später gehen, aber wir werden sehen, worauf wir dann stoßen. Im Moment bin ich glücklich. Ich kann mich nicht erinnern, warum wir dieses Video angefangen haben. Was haben wir gemacht? Wir haben Charakterstile gemacht. Deshalb hat es [GELÄCHTER] eine Weile gedauert. Am Ende haben wir ein bisschen Produktionsvideo-Sachen gemacht , bei denen wir tatsächlich einige Dinge machen und Ihnen hoffentlich einige Einblicke in die Dinge zeigen müssen, während Sie arbeiten kann sich anpassen und ändern , während Sie weitermachen. In Ordnung, das ist es für dieses sehr lange Video, und wir sehen uns im nächsten. 42. Plugin - Hinzufügen unseres ersten Lorem Ipsum zu Adobe XD: Hallo allerseits. In diesem Video werden wir unser allererstes Plugin in Adobe XD installieren . Was sind Plugins? Plugins sind Dinge, die Adobe XD nicht alleine macht, jemand anderes als Adobe hat sie erstellt, und sie tun Dinge wie in diesem Fall, indem sie Symbole bringen, UI-Gesichter und Platzhaltertext bringen. Es gibt viele verschiedene Plugins, um Adobe XD über das hinaus zu erweitern , was sich im System befindet. Ich zeige dir, wie man sie installiert. Wir werden mit diesem Lorem ipsum One arbeiten, dem es sich um Platzhaltertext handelt. Für uns werden wir in diesem Fall immer wieder eine Kopie des Schreibens festlegen . Wir werden ein paar verwechselte lateinische Wörter einsetzen, die wie gute Sätze aussehen, ohne dass es sich tatsächlich um tatsächliche Sätze handelt. Installieren wir unser erstes Plugin. Um Plugins in Adobe XD zum Laufen zu bringen, haben wir uns hier unten Ebenen angeschaut, wir haben uns unsere Assets angeschaut, Panel mit anderen Zeichenstilen. Sieh dir das letzte hier unten an, Plugins. Es passiert wirklich nichts. Drücken Sie entweder „Plus“ oder klicken Sie auf „Plugins entdecken“. Es wird dieses Ding öffnen. Dies ist die Creative Cloud-App. Wenn Sie es noch nicht installiert haben oder es nicht geöffnet ist, geben Sie es eine Sekunde. Du denkst vielleicht, macht es irgendetwas? Es dauert nur eine Weile, bis es geladen wurde. Dieses Ding ändert sich. Sie organisieren das ziemlich viel neu. Also bin ich an dieser Börse und Marktplatz und Plugins gelandet . Sie können danach suchen. Im Moment hat es vorgestellte. Ich möchte mir alle Plugins ansehen. Wenn Sie den Bildschirm für Creative Cloud nicht finden können, haben Sie die App nicht installiert, Sie müssen die Creative Cloud-App installiert haben, aber Sie können dies über den Webbrowser erreichen. Gehe zu exchange.adobe.com und wir haben es mit Creative Cloud zu tun. Hier findest du Dinge wie hier unten, lass uns Dinge für XD finden. Hier findest du verschiedene Erweiterungen oder Plugins dafür. Wir werden über die Creative Cloud App den richtigen Weg gehen . Es bestellt es nach den beliebtesten, was praktisch ist. Diejenigen, die gute Sterne haben und dann geladen werden, sind oft die besseren. Aber es gibt Hunderte von verschiedenen, die man durchmachen muss. Also, verbringe etwas Zeit, schau dir ein wenig an und du könntest so sein, ich benutze das oder ich benutze das. Sie können andere Workflows, die Sie tun, mit dem verbinden , was Sie hier in XD tun , um etwas Zeit zu sparen, als gäbe es einen Spiegel. Ich benutze die Spiegelboards ziemlich oft für die Arbeit. Die, die wir benutzen werden, ist dieses Lorem ipsum. Lorem ipsum ist, wenn Sie noch nie davon gehört haben, nur Platzhaltertext. Da gehst du. Klicken Sie auf „Installieren“, stimmen Sie den Allgemeinen Geschäftsbedingungen zu und sagen Ihnen schließlich , schauen Sie sich das an. Das ist jetzt installiert. Wenn du zurück in XD gehst, gibt es ihn. Da ist er. Damit es funktioniert, müssen Sie tatsächlich zuerst Text setzen und schreiben, weil ich die Textkopie verwendet habe, Textkopie. Das macht keinen Spaß. Wenn Sie das treffen und einfach diesen hier treffen, heißt „Quick Lorem ipsum“, und es wird nur ein paar grundlegende Sachen einwerfen. Stimmen Sie dem zu? Du stimmst zu. Du hast keine Wahl [LACHEN]. Also, es wird hinzugefügt. Dies sind lateinische Wörter, tatsächliche Wörter, die einfach durcheinander gebracht sind, also ergeben sie keinen Sinn. Es ist einfach, wenn Sie entwerfen, diese als Platzhalter und nicht als tatsächlichen Text zu diese als Platzhalter nicht als tatsächlichen Text haben, da Sie möglicherweise keinen Text vom Kunden haben oder mit dem Kunden diskutiert werden, Du kannst das hier nicht schreiben und du meinst , mach dir keine Sorgen um die Texte, es ist nur Platzhaltertext, der nur da um dir eine Designidee zu geben. Du gehst vielleicht durch und gehst dich, werde einfach das. Du siehst, dass es meinen Stil benutzt. Es muss nicht einmal ein Stil sein. Es benutzt nur das, was in dieser Box war, damit es funktioniert. Wenn Sie nichts ausgewählt haben, erhalten Sie dieses oder jenes. Ja, kein Text ausgewählt. Lassen Sie zuerst etwas auswählen. Ich werde das alles nicht durchmachen. Nun, ich werde nur ein kleines bisschen davon durchmachen. Dieses „Quick“ wird einfach alles abgeben, was es ist und versuchen, es zu kombinieren. Es gibt diesen ersten hier. Du kannst ein paar schickere Sachen machen wie, willst du, dass es Lorem Ipsum ist? Es gibt andere verschiedene Platzhaltertexte und Sie können entscheiden, ich möchte es mit der Interpunktion des vollständigen Stopps beenden. Willst du auch ein paar Zeilenumbrüche da drin? Möchten Sie den Textbereich so beschneiden, dass er passt? Denken Sie daran, dass wir diese automatische Höhe haben. Es könnte es so schneiden , dass es perfekt passt. Habe gerade einen vollständigen Stopp hinzugefügt. Sie werden verschiedene Plugins wie dieses hier kennenlernen , wenn Sie dies überprüfen möchten, oder es könnte eine wenn Sie dies überprüfen möchten, andere großartige Platzhalter-Text-App sein , die Sie auswählen, oder ist es die oben auf dem beliebten? Es gibt hier drin, sie arbeiten alle etwas anders. Dieser hat sogar eine Abkürzung. Sieh dir das an. Das ist es für dieses spezielle Plugin. Wir machen während des gesamten Kurses noch ein paar mehr. Wenn Sie sie loswerden müssen, können Sie mit der rechten Maustaste darauf klicken und sie verwalten, und es öffnet Ihre Creative Cloud. In meinem Fall ist es da. Ich kann es entweder deaktivieren oder deinstallieren und/oder entfernen. So fügt man einen hinzu und so kann man es entfernen. Aber sie machen Spaß. Sie werden Dinge finden, die eine Verbindung zu anderen Apps haben und Dinge tun, die Adobe XD selbst noch nicht macht. Einige davon habe ich am Anfang gehabt, es gab viele Plugins, die ich benutzt habe, die ich einfach nicht mehr brauche, weil Adobe XD, ich vermute, einige dieser Plugins anschaut und geht, Mann, das ist wird eine Millionenmal heruntergeladen. Leute mögen es, wir sollten das wahrscheinlich in die App bringen und das passiert. Aber wir werden während des gesamten Kurses noch ein paar mehr machen. Aber im Moment ist es das. Das ist die Installation unseres allerersten Plug-Ins. Nächstes Video. 43. Kursprojekt 08 – Text: Es ist Projektzeit. Ich bringe dich dazu , zu diesem Zeitpunkt zu kommen. In Ihren Unterrichtsprojekten sehen Sie das Klassenprojekt 8. Ich muss ein Logo erstellen. Bis zu dir. Du kannst es ganz einfach machen wie ich. Ich habe gerade meine Schriftart benutzt und verwende eine fette Version und eine leichte Version. Das ist das ausgefallenste, das ich gehe. Aber wenn Sie etwas mehr Zeit damit verbringen möchten ein cooles Logo für Ihre Marke zu erstellen, tun Sie dies bitte. Dann möchte ich, dass du auf deiner Homepage erstellst. Ich möchte, dass Ihre Homepage nur Ihre Marketingbotschaft hat. müssen Sie für Ihr Unternehmen nachdenken . Derjenige, den Sie früher von diesem zufälligen Projektgenerator erhalten haben , geben Sie ihm eine Marketingbotschaft. Du kannst die von jemand anderem kopieren. Es ist nur ein Füller. Im Moment wirst du es nicht glauben. Ich habe meinen eigenen mit einem schönen grünen Tee an deiner Tür gemacht. Einzigartig für mich, ich weiß. Erschaffe etwas hier drin. Versuchen Sie, ein paar verschiedene Schriftarten zu verwenden denn was Sie tun möchten ist ein Teil davon, mir diesen Stapel hierher zu schicken. Obwohl Sie diese Phase des Projekts nicht tun müssen , möchte ich Sie nur dazu bringen, diese Dinge zu machen , und ich möchte, dass Sie beide sicherstellen , dass sie sich in Ihrer Asset-Bibliothek befinden und Ihre Styles auch. Übe das, füge sie da hinzu. Machen Sie einen Screenshot davon und einen Screenshot dieser beiden Seiten. Diese Seite hier ist etwas anders. Wir werden es ein bisschen Hausaufgaben außerhalb dieser Hausaufgaben sehen , einem Forschungsprojekt. Ich habe schon mal über Karten gesprochen. Ich möchte, dass Sie recherchieren , was ist eine UI-Karte? Schau dir nur ein bisschen an und deine Hausaufgaben sind 10 Minuten. Geh aus und lies ein bisschen darüber nach. Es wird viele Begriffe geben, die ich in diesem Kurs verwendet habe , die Sie machen werden , die neu für mich sind, neues x, und es liegt außerhalb dieses Kurses, jeden einzelnen Begriff zu durchlaufen. Also geh raus und recherchiere es. Ich möchte, dass du herausfindest, was eine Karte ist und wofür sie verwendet wird. Die kurze Version ist es diese wiederverwendbaren Nuggets von Informationen. Ich habe ein paar Beispiele in deinen Übungsdateien. Sie sind da. Beispiele für die UI-Karte. Ich hab mir ein paar geschnappt. Man bekommt ein Gefühl dafür , was sie sind. Diese wiederholbar und Sie können sie einzigartig machen. Heißt nur, dass sie auf eine Website passen. Sie können für verschiedene Geräte strukturiert und reaktionsschnell aufgeschlüsselt werden. Aber recherchiere ein wenig darüber, wofür eine UI-Karte ist. Werfen Sie einen Blick auf einige meiner Beispiele. Ich möchte, dass Sie sich Ihre eigene Marke einfallen lassen. Ich habe mich für etwas Einfaches entschieden. Ich habe den Blick gezogen, nicht meinen Führungen gefolgt, das von den Rändern dort hineingezogen. Ich habe einen Schlagschatten hinzugefügt. Ich will nicht, dass du noch zu viel Designarbeit machst. Schlagschatten lässt sich jedoch einfach ein- und ausschalten. Wir werden uns später im Kurs weitere Effekte ansehen , haben aber etwas, haben mindestens drei verschiedene Dinge für Ihr Produkt. Daran musst du dir nicht auch denken . Ich habe mir diese von einem Konkurrenten geliehen , nur um etwas zu benutzen. Dies werden Bilder sein, wenn wir in diesen Teil des Kurses einsteigen. Sie machen dasselbe bei Platzhalterkreisen oder Quadraten. Ich möchte, dass Sie auch Ihr allererstes Plug-In installieren . Dafür gibt es viel zu tun. Homepage am Platzhalter für Marketingnachrichten, erstellen Sie Ihre eigenen Textstile, über die wir gesprochen haben , installieren Sie ein Plugin. Der Platzhalter von Loren Ipsum. Es muss nicht der Gewinn sein, den ich verwende, sondern etwas, mit dem Sie diese Lücken schließen können . Sogar diese Produkttitel haben diese Produkttitel als bestimmte verwendet, wie zum Beispiel gehen und einige Funktionen gefunden , die Ihr Produkt hat, nur damit Sie Inhalte haben und die UI-Karten recherchieren Erstellen Sie diese kleinen Featurekarten und Screenshot davon, Screenshot davon. Das ist es, was Sie wirklich tun müssen, um sie einzuschicken. Wir gehen endlich davon ab , dass all dieses Zeug bis jetzt nur Forschungsprojekte ist und optisch nicht sehr anregend ist. Jetzt sind wir visuell anregend und ich möchte, dass Sie es jetzt über soziale Medien teilen. Es gibt ein Instagram-Konto, einen Twitter-Account, eine Facebook-Gruppe und LinkedIn. Überlassen Sie, wie Sie es machen wollen und mich auf Instagram oder Twitter markieren. Die Facebook-Gruppe ist ziemlich erstaunlich, ebenso wie die LinkedIn-Gruppe über das Teilen Ihrer Designs und bat um Feedback , wenn Sie bezahlen möchten Dies ist meine allererste Sache und jemals in UX oder Adobe XD was denkt ihr? Seien Sie bereit, hier bequem wie diese Orte kritisiert zu werden, ich habe das Gefühl, dass wir ein wirklich nettes Gefühl haben, ja, es ist kein rücksichtsloser Reddit-Stil, Rücksichtslosigkeit. Es ist eine nette Gruppe voller Leute wie dir, die anfangen. Während Sie dort sind, stellen Sie sicher, dass Sie sich zu einer anderen Person äußern , da der UX-Designer ein guter Designer wird, in der Lage ist , die Arbeit anderer Personen zu identifizieren Dinge, die Sie daran wirklich mögen, die Sie vielleicht für Ihr eigenes Ding mitnehmen oder Kritik auf eine Weise aussprechen können Kritik auf eine Weise , die die Leute nicht zum Weinen bringt. Das kann man auch dort üben. Darüber, sich an andere Menschen zu ernähren wie das, was Sie gehört haben. Wenn ich es wäre, würde ich mir wahrscheinlich ansehen, X, Y und Z zu machen. Das ist die Stimmung, die wir bei diesen Gruppen haben. Probieren Sie es also aus, sowohl Ihre Arbeit hochzuladen als auch an andere zu liefern, denn das ist ein großer Teil davon, ein Designer zu sein. Es ist in der Lage zu sprechen und Kritik anzunehmen , ohne zu viel zu weinen. Ich weine immer noch, mach dir keine Sorgen. Geh deine Hausaufgaben machen, ziemlich viel zu tun. Wir sehen uns im nächsten Video. 44. Formen zeichnen und Bearbeiten von Formen in Adobe XD: Hallo allerseits. In diesem Video werden wir einige einfache Formen mit den Formwerkzeugen in Adobe XD erstellen. Ich zeige Ihnen einige der Geheimnisse im Polygon-Werkzeug und wie Sie in einen sogenannten Objektbearbeitungsmodus gelangen , um einige dieser Formen anzupassen. Lasst uns reinspringen. Lasst uns ein bisschen zeichnen. Ich arbeite hier nur an dieser leeren Zeichenfläche. Wir beginnen mit dem Rechteckwerkzeug. Wir haben damit schon ein bisschen gemacht, also habe ich dieses Rechteck. Wer erinnert sich, was ich auf meiner Tastatur gedrückt halte , um es direkt zu was zumindest das Quadrat zu schaffen. Du hast es „Umschalt“ gedrückt halten, bevor ich anfange zu ziehen, ziehe es raus und du bekommst ein perfektes Quadrat. Ich will kein Quadrat [LACHEN]. Ich will etwas, das so aussieht, es wird dieses kleine Preis-Taggy Ding Icon sein. Eines der coolen Dinge an Formen in Adobe XD ist, dass Sie Dinge wie die abgerundeten Ecken tun können , sie einfach herausziehen. Aber wenn Sie in einem sogenannten Objektbearbeitungsmodus landen , weiß ich nicht einmal, ob es einen Namen hat. So nenne ich es sowieso. Wenn ich mein Auswahlwerkzeug greife und darauf doppelklicke, du möglicherweise zufällig hier , weil du ein Doppelklicker bist. Du liebst es, auf Sachen zu doppelklicken, du bist so geändert, klickst wieder heraus, kommst aus dem Objektbearbeitungsmodus, geh wieder rein. Während ich draußen bin. Ich habe all diese schöne Kontrolle, weil sie eine primitive Form genannt wird, weiß es. Der Computer weiß das, das ist ein Rechteck, und als solches kann ich coole Sachen mit abgerundeten Ecken machen. Aber wenn du hier reingehst und das editierst, schau dir das an. Wenn ich mich in diesem Objektbearbeitungsmodus befinde, werden diese Dinge Ankerpunkte und ich kann mich bewegen. Hey, ziehe diese kleinen Griffe , um den Kurventyp zu ändern. Sie können in jede beliebige Form gehen, darauf doppelklicken und anfangen, sich hier zu verarschen und damit völlig zu rechnen. Das Problem ist, wenn ich rauskomme, indem ich einfach in den Hintergrund klicke und jetzt darauf klicke, diese abgerundeten Ecken, weißt du, dass ich diese nicht verpasst habe. Das XD geht, ich weiß nicht mehr was du bist. [GELÄCHTER] Ist das? Ich weiß, wir nennen es einen Teebeutel. Sieht aus wie Teebeutel, aber ich habe diese Kontrolle nicht mehr. Das ist also der einzige Nachteil, in den Objektbearbeitungsmodus zu gehen und zu fehlen, aber wir müssen unsere eigenen benutzerdefinierten Symbole und Formen erstellen, und ich werde dies rückgängig machen, bis es zurück ist. Ich weiß, dass es zurück ist, weil diese Dinge wieder erscheinen. Ich werde diese los, denn was ich tun möchte, ist, darauf zu doppelklicken und hierher zu gehen und einen Punkt hinzuzufügen. Ich bin dabei, ich kann es bearbeiten, vorhandene Punkte bearbeiten, aber schau dir das an. Wenn ich den Mauszeiger über dieses kleine Symbol fahre, ist es das Stiftwerkzeug, auf das ich einmal klicken kann, und es gibt mir einen Punkt, schau dir an, dass ich es nach oben ziehen kann. Los geht's. Meine kleine Haus-Slash-Preisschild-Sache. Das ist der Objektbearbeitungsmodus, um wieder herauszukommen, klicken Sie einfach an eine beliebige Stelle im Hintergrund und jetzt ist es nur eine normale alte Form , die schwerer zu zerstören ist. Ein kleiner Kreis hier drin, was halten wir fest, um es perfekt zu runden? Das stimmt, „Shift“. Ich gehe zum Auswahlwerkzeug, welches die V-Taste ist. Wählen Sie „V“ aus, wählen Sie beide aus, ich sage, stellen Sie sicher, dass Sie vertikal ausgerichtet sind. Ich habe es perfekt gezeichnet, nett. Die andere Sache, die Sie über Objekte wissen sollten, da Sie sie drehen können. Ich habe beide wieder ausgewählt, denken Sie daran, es wird die Größe ändern und etwas außerhalb von hier, da ist es da, es ist wie Niemandsland, nicht da, nicht da, für das wie eine kleine Runde eins, können Sie klicken und zieh es. Ich verkleinere meine , indem ich „Umschalt“ halte und ziehe. Denken Sie an den Schlaganfall? Das ist okay. Ich bin mit dieser Größe einverstanden. Das nächste, was ich tun wollte, ist, dass ich mir einige dieser anderen Tools ansehen möchte. Also quadratisch, Kreis, dieser hier hat einige Spezialfähigkeiten. Wir haben früher im Kurs eine Pfeilspitze gezeichnet. Dasselbe gilt: Halten Sie „Umschalt“ gedrückt, um ein perfektes gleichseitiges zu erhalten. Ich weiß nicht, wie es heißt. [GELÄCHTER] gleiche Größe. Man bekommt ein Dreieck, das Dreieck hat jedoch einige geheime Fähigkeiten. Es ist so wie eine kleine Gruppe hier. Oder wenn du darüber schwebst, kannst du das sehen, siehst du ein kleines Symbol? Es ist ein Star. Schauen wir uns mal an, also Seiten gehen wir 14, dekagon. Ich werde diese [LACHEN] nicht mal erraten . Ich bin so schlecht darin. Ich habe Mathe genossen, nicht sehr gut darin, fünf ist mein Sechseck, Pentagon. Ich höre auf zu raten. Aber du tippst einfach hinein und du kannst verschiedene Seiten bekommen. Die andere Sache, die Sie tun können, ist dieser Sterneinsatz hier, dieser hier. Wenn du es eintippst, lass uns ein 10-prozentiges stacheliges Stern-Ding machen. Ich werde gehen, sagen wir fünf, und ich werde gehen 50 Prozent geben Ihnen, fünf Seiten, 50 Prozent Sterneinsatz gibt Ihnen traditionellen Stern , den wir für unser kleines Abstimmungsding verwenden werden Sternbewertungen, die Sie übrigens auf diesem Kurs verlassen sollten. Werfen wir einen Blick darauf. Eine der Optionen, die es hat, ist diese abgerundete Ecke, also lege ich ihre Pixel ein, es ist wahrscheinlich ein bisschen viel, viele dieser Steuerelemente sind tatsächlich drauf. Kannst du sehen, ob ich hereinzoome? Es gibt diesen Teil hier , der der Sterneinsatz ist, siehst du und das hier, wie spitz es ist. Du gehst, du, also willst du nur ein bisschen davon und fängst an, so auszusehen. Ich geh da hin. Los geht's. Das sind also die Geheimnisse des Dreiecks, oder ich denke, es heißt das Polygonwerkzeug. Es liegt daran, dass es alles Polygone sind. letzten paar Dinge mit Formen. Nun, ich denke noch , dass es ausgewählt ist, du kannst zum Objekt gehen und unter Transformieren kannst du horizontal, vertikal kippen oder es tut nichts für einen Stern, weil er dann symmetrisch ist, [GELÄCHTER] Es ist wie dieses, und es ist nicht gruppiert, und so ist es Objekt, Horizontal umwandeln. Da sind wir los. Es gibt einen vertikalen Flip, aber du verstehst die Idee. So machen Sie das, wenn nötig. Das ist die Grundlagen zum Erstellen von Formen. Sie können darauf doppelklicken, um in sie hineinzugehen und sie anzupassen. Aber du verlierst etwas von dieser Kontrolle, wie wir solchen Dingen mit dem Stern haben. Das ist das Erstellen einfacher Sachen mit einigen Zeichnungsformen. Auf das nächste Video. 45. Strangeness mit Formen in Adobe XD: Hallo allerseits. Dieses Video ist seltsames Zeug in Adobe XD. Es wird im Grunde darum gehen wenn ich das verkleinere, wird es zu diesem Blob. Zu Beginn des Kurses zeigte uns Dan eine Möglichkeit , mit der rechten Maustaste auf „Gliederungsschlag“ zu klicken, das wird Ihnen noch seltsamere Ergebnisse liefern. Ich zeige Ihnen, wie Sie sie umgehen können, Alternativen für Outline Stroke, und geben Sie mein Bestes, um es zu erklären. Es ist schwierig, aber lasst uns anfangen . Nimm Nummer 5. [GELÄCHTER] Ich habe das so oft aufgenommen. Es ist schwierig zu erklären; es stellt sich heraus, weil es seltsames Zeug ist , also ist es seltsam zu erklären. Du weißt nicht, dass ich es fünfmal gemacht habe, aber [LACHEN] du wirst wahrscheinlich von meinem wahnsinnigen Verhalten bekommen , dass ich es schon ein paar Mal gemacht habe. Konzentrieren wir uns darauf, lass uns da reingehen. Was ist das Problem? Lasst uns dich vergessen. Die Dinge geben mir ein Problem, [LACHEN] also hoffen wir, dass dies es behebt. Ich habe einen Stern, er muss eine Grenze ausfüllen. Ich habe abgerundete Ecken, du siehst. Wo ist meine kleine abgerundete Ecke? Es ist da. Da ist es da. Es hat fünf Kanten, und es hat einen Standardsatz von 47 Prozent und es hat abgerundete Ecken von zwei. Ich möchte es kleiner machen, also dupliziere ich es, mach es kleiner. Was passiert? Wir sind früher im Kurs darauf gestoßen. Erinnerst du dich, als wir versuchten Sachen zu skalieren und der Schlaganfall nicht damit einherkam? Wir verwenden die Methode, die gerade nicht funktioniert, aber diese Standardeinstellung der Skalierung ist sehr nützlich, wenn wir Dinge wie das Rechteckwerkzeug verwenden . Rechteckwerkzeug, wir fügen ein paar abgerundete Ecken hinzu, und dann verwenden wir es für unsere Karten, Boxen oder Knöpfe und dann machen wir später eine andere Größe. Unterschiedliche Größe; eine wirklich große, und Sie können sehen, dass es die abgerundeten Eckgrößen beibehält. Es passiert auch mit unserem Star. Es passiert mit ein paar verschiedenen Formen in XD, und das kann ein bisschen seltsam sein. Was wir nicht bestanden haben, um es zu sperren, und es funktioniert jetzt, ist, dass wir mit der rechten Maustaste darauf geklickt haben und gesagt haben, dass wir den Schlaganfall skizzieren, und was wir getan haben, war , dass wir ihn verkleinert haben. Das war großartig, solange es keine Füllung hatte. Was ist los? Das ist etwas von der Verrücktheit. Was passiert ist, wenn Sie einen Strich skizzieren, der eine Füllung hat , trennt er ihn im Grunde nur aus, also habe ich meine Füllung in diesem Fall von dem Strich um die Außenseite oder den Rand gelöst von dem Strich um . Das ist eine Sache, du sagst : „Das kann ich loswerden.“ Stecken Sie ihn einfach fest und skalieren ihn, und du sagst: „Großartig“. Jetzt fülle ich ihn einfach. Warum füllt er sich nicht? Er wurde in eine Füllung umgewandelt. ganze Prozess, den Strich zu skizzieren, im Grunde genommen was er tut, ist , dass er Ihren Strich in zwei Teile verwandelt; diese Füllung und dann dieses Ding, und das ist auch eine Füllung. Wenn ich darauf doppelklicke, um in den Bearbeitungsmodus zu wechseln , ist es schwer zu beschreiben, aber das sieht jetzt wie ein Strich aus, aber es ist tatsächlich eine Füllung. Es ist nur eine schöne dünne Füllung hier. Ich kann keine Füllung hinzufügen, ich kann einen Boarder hinzufügen. Sieh dir das an. Ich kann eine seltsame Seitengrenze hinzufügen. Lass es uns noch kleiner machen, damit du es sehen kannst. Ich kann meiner Füllung einen Rahmen an der Außenseite hinzufügen, wie ich mit all den anderen Formen kann aber es ist nicht das, was ich hier wollte, also wie kommt man damit um? Ich zeige Ihnen eine andere Art, sich dem zu nähern. Wenn das nicht funktioniert und Outlines Stroke dir ein seltsames Verhalten beschert, mache ich das Gleiche noch einmal. Anstatt mit der rechten Maustaste auf „ Umrissstrich “ zu klicken, verwenden wir einen anderen Weg. Gehen Sie bei Auswahl zu Objekt und gehen Sie zu Pfad. Es gibt einen namens „In Pfad konvertieren“. Lasst uns darauf klicken. Was am Ende passiert, ist, dass dieses Ding hier im Grunde genommen die ganze abgerundete Eckigkeit gebrochen hat. Wenn ich rückgängig mache, [NOISE] habe ich all das schöne Zeug , das besagt, dass ich fünf Seiten habe, ich habe abgerundete Ecken, ich habe Standardset. Wenn ich zu Object gehe und zu Pfad gehe und in Pfad konvertieren sage, bricht es einfach all das, was wir getan haben, als wir den Objektbearbeitungsmodus gemacht haben, als wir das Tag im letzten Video gemacht haben. Klicken Sie darauf, es sieht genauso aus. Es hat immer noch eine Plattengröße, aber es bedeutet, wenn ich es in den abgerundeten Ecken skaliere , werde ich den richtigen Weg finden. Ich habe immer noch das Problem mit der Größe davon, also muss ich eine angemessene Grenze machen, aber zumindest werden meine abgerundeten Ecken nicht betroffen sein. Das funktioniert genauso, wenn Sie ein Quadrat haben , das eine abgerundete Ecke hat. Es hat immer noch diese abgerundeten Ecken , die willst du kaputt machen. Gehe zu Objekt, und du gehst zu Pfad, und du sagst „In Pfad konvertieren “ statt dieser schönen Sache, die als Primitiv bezeichnet wird, das einstellbar ist. Wenn ich es jetzt anpasse, schau, es ist nicht ganz das, was ich mit einem Rechteck will, aber hoffentlich besonders weil wir immer mehr Icons zeichnen werden, wird es Zeiten geben, in denen du bist, „Oh, warum machst du nicht das , was ich machen wollte?“ kann schön sein, es zuerst in einen Pfad umzuwandeln. Manchmal kann es gut sein, den Strich zu skizzieren, wenn Sie die Füllung von außen trennen möchten, und dann ist der Rand um die Außenseite bearbeitbar und Sie können ihn wie eine Füllung behandeln. Ich höre dort auf. Ich habe das Gefühl, dass ich das vielleicht gemacht habe. Ich habe das Gefühl, dass es es vielleicht erklärt hat, ich gehe nicht [LACHEN] , um weiter zu reden. Wir machen es im Kurs noch einmal, keine Sorge. Aber wisse, dass es mehr als nur Gliederungsstrich gibt, es gibt auch in Pfad konvertieren . Ein oder zwei von denen werden für dich arbeiten. Das ist ein Take, das ist ein Rap People. Ich brauchte eine Pause. Seltsamkeit in Adobe XD, im Moment erledigt. Das könnte ich für den Tag erledigt sein. Wir sehen uns im nächsten Video. 46. Lerne, dich mit dem Stift Tool in Adobe XD zu zeichnen: Halten Sie alle Ihre Hüte fest, wir werden einige erstaunliche Formen mit dem Stift-Werkzeug zeichnen . Wir werden mit diesem unten etwas besser werden, aber ich denke, ich möchte das Stift-Tool vorstellen, weil es eines der Tools ist und in Adobe XD wirklich nützlich ist. Es wird kein vollständiges Tutorial zu allem sein, was das Stift-Werkzeug kann, oder eine Einführung, um Ihnen den Einstieg zu erleichtern. Es ist ein praktisches Tool, wenn Sie nicht wissen, wie man es benutzt. Lass mich dir zeigen wie. Wir fangen mit dem Stiftwerkzeug an. Es ist so wie ein kleines Füllfederhalter-Ding hier. Du hast zwei Modi. Es wird einmal geklickt, gibt Ihnen einen Eckpunkt. Schließlich möchten Sie es beenden, indem Sie es abschließen und sich das ansehen. Du kommst nah an den Rand und es geht Pop [LACHEN] Ich bin mir nicht sicher, woher dieser Soundeffekt kommt, das ist neu für diesen Kurs. [GELÄCHTER] Aber du kannst dort sehen, es verbindet sich und du klickst einmal und es wird alles anschließen. Dann können Sie eine Füllung hinzufügen. Ich streichle. Sie können einfach überall klicken. Nun, das Problem damit ist, dass es gerade Linien gibt , aber sie sind nicht sehr parallel, also lasst uns das hier verschieben. Schnappen wir uns noch einmal das Stift-Werkzeug. Wenn ich „Umschalt“ gedrückt halte, während ich klicke, also die „Umschalttaste“ gedrückt halte, kann ich einmal klicken und du kannst sehen, dass es in 45-Grad-Winkeln einrastet , also bedeutet das, dass ich dich gehen kann, du. Ich ziehe ein kleines Haus, 45 Grad. Das ist mein kleines Haus. Da gehst du. Da ist mein kleines Haus, wähle eine andere Farbe. Ein paar großartige Farbauswahl hier. Wenn Sie einmal klicken, erhalten Sie eine Ecke. Die andere Sache, die es tut, ist dich Kurven machen zu lassen, also werde ich versuchen , einen Kreis zu zeichnen. Das Seltsame am Stift-Werkzeug: Denken Sie daran, wenn Sie mit diesem Stift-Werkzeug weiter gehen möchten, dies ist wie ein schnelles grundlegendes Intro, und das Tool wird hauptsächlich in etwas wie Adobe Illustrator verwendet. Vielleicht möchten Sie sich meinen Kurs dazu ansehen, Adobe Illustrator Essentials oder den Kurs einer anderen Person oder online lernen, oder den Kurs einer anderen Person oder online lernen wie Sie das Stift-Werkzeug verwenden, aber das sind die Grundlagen. Ich zeichne einen Kreis. klicke , halte und ziehe. Wenn Sie einmal klicken, erhalten Sie eine Ecke. Wenn Sie gedrückt halten und ziehen klicken, erhalten Sie diese Kurvenfahrt. Klicken Sie gedrückt halten und ziehen, wackeliger Kreis kommt. Klicken Sie gedrückt halten und ziehen, und Sie können es versehentlich in die falsche Richtung ziehen und es macht seltsame Sachen. Manchmal muss man es rausziehen und einfach weiter herumwackeln. Da sind wir los. Dann hier zurück, was du wirklich machen willst, ist einfach einmal darauf zu klicken. Aber was passiert , wenn du einmal klickst? Du bekommst diesen Eckpunkt und das wollen wir nicht. Kannst du sehen, dass es hässlich wird. erneut, selbst mit dem fertigen, Klicken Sie erneut, selbst mit dem fertigen, gedrückt halten und ziehen. Los geht's, ein wackeliger Kreis. [GELÄCHTER] Was haben wir sonst noch? Habe es nicht ausgewählt. Wählen Sie alles aus und füllen Sie es aus. Wenn Sie einen dieser Punkte bearbeiten möchten , funktioniert nichts. Warum hast du keine Füllung? Füllen Sie bitte, jetzt haben Sie eine Füllung und los geht's. Oh, es ist da drüben. Sieh mal, es hatte eine Füllung Weiß. [GELÄCHTER]. Zieh es einfach dorthin, dann schreist du wahrscheinlich auf den Bildschirm, er macht es falsch und los geht's. Es ist wieder alles gut auf der Welt. Wenn Sie eines davon bearbeiten möchten, müssen wir sie hineingehen und bearbeiten, denn mit dem schwarzen Pfeil, wenn ich im Hintergrund abklicke , einmal darauf klicken, können wir einfach die Größe ändern. Halten Sie „Umschalt“ gedrückt, um Höhe und Breite proportional zu skalieren Höhe und Breite , sodass sie nach oben und unten skaliert werden. Aber wer erinnert sich, wie ich da reinkomme und an diesen Ankerpunkten arbeite? Wir haben es früher gemacht, also doppelklicke ich einfach darauf. Können Sie in diesen Objektbearbeitungsmodus wechseln? Du kannst dann hier rein und das machen. Es ist ein bisschen so und das muss wahrscheinlich ein bisschen da unten sein. Wenn Sie möchten, dass es gebogen, aber scharf gekrümmt ist, bringen Sie sie näher an den Ankerpunkt. Immer noch gebogen, klick aus aber [LACHEN] Ich bin nicht so gut. Das sind drei hässliche Formen. Machen wir etwas Schöneres. In meinem Fall wird es ein Teeblatt sein. Wenn Sie Ihre eigenen Symbole zeichnen, wird es relativ zu Ihrem Unternehmen sein , für das Sie arbeiten. Aber wir werden die beiden kombinieren, aber es kurvt einige Endecken. Schon wieder Stift-Werkzeug. Ich mache es einfach und dann machen wir es ein zweites Mal. Ich klicke alle einmal für eine Ecke, weil ich oben ein spitzes Teeblatt haben wollte . Dann klicke ich auf „Halten“ und ziehe für ein rundes Stück. Dann hier unten, obwohl es nicht perfekt ist, denke ich, das ist nicht perfekt. Ich klicke einmal für eine Ecke. Oft bekommt man einfach die Punkte rein und bearbeitet sie später. Hier drüben möchte ich, dass es eine andere Kurve ist. Klicke, halte und ziehe, und dann zurück, ich möchte, dass es eine schöne kleine spitze Ecke ist. Klicken und ziehen Sie für eine Ecke oder klicken Sie einmal für eine Ecke? Du hast es verstanden. Du klickst einmal. Da sind wir los. Es gibt ein wackeliges Teeblatt. Ich gehe zu meinem Auswahlwerkzeug und befinde mich bereits im Objektbearbeitungsmodus. Wenn Sie jedoch abklicken und wieder anklicken, doppelklicken Sie darauf. Da sind wir los. Dann ist dieser Typ unten hier, lass uns hier gehen. Ich kann es kleiner bewegen. Haben Sie keine Angst, den eigentlichen Ankerpunkt auch hier zu bewegen . Das ist mein kleines Tee-Blatt-Ding. Was ich vielleicht tun könnte, ist ein Duplikat von ihnen zu haben , also kopiere, also die beiden. Dieser wird grün sein, weil es ein Teeblatt ist. Aber ich werde meine nicht sehr Teeblatt-Farbe verwenden. [GELÄCHTER] Mehr Tee-Leafy. Es wird besser. Dieser wird mit Weiß ohne Rahmen gefüllt sein. Du wirst keine Grenze haben. Wo ist der Typ hin? Da ist er da. Machen wir ihn kleiner. Ich halte in diesem Fall keine Verschiebung weil ich sie verzerren möchte, also ziehe ich es einfach herum. Ich halte keine Shift- und Rotations-Mitglieder nur draußen, also ist das mein kleines Tee-Leafy Ding. Könntest du es auf einmal machen? Sie können, wenn es Ihnen besser geht, nur damit Sie es wissen, dass das Stiftwerkzeug wahrscheinlich am schwierigsten im Internet zu lernen ist . Es ist schwierig für diejenigen unter euch , die es wissen und benutzen können, du wirst schmuggelig da sitzen. Ich weiß, wie man es benutzt [LACHEN] aber es hat ewig gedauert , weil es klar ist. Wenn du neu bist und es dir schwer fällt. Das ist nur ein Teil des Stift-Werkzeugs. Es braucht viel Erfahrung. aus diesem Umfang dieses Kurses viel Übung, Machen Sie aus diesem Umfang dieses Kurses viel Übung, aber ich wollte Ihnen einige Grundlagen geben , damit Sie es zumindest ausprobieren können. Ich wollte das jetzt machen, ich klicke einmal für eine Ecke, klicke und ziehe heraus, geh hier runter, klicke einmal. Ich mache hier eine Kurve , klicke einmal, geh hier rein, also anstatt zwei separate Formen zu haben, kannst du sehen, dass ich jetzt damit anfangen kann. Es ist nicht perfekt. Klicken und ziehen Sie nicht, klicken Sie einmal. Wenn sich die Leitung nicht verbindet und du so bist, wie bringe ich dich dorthin? Sie wählen auf diesem einen aus, dem Sie beitreten möchten, und greifen Sie auf das Stift-Werkzeug, da ist er , und klicken Sie auf dieses erste. Sie müssen eigentlich nicht zuerst darauf klicken. Schnappen Sie sich einfach das Stift-Werkzeug, klicken Sie auf den Punkt, mit dem Sie beginnen möchten , und damit wird er wieder verbunden. Da ist er. Die Grundlagen sind da. Ich gehe zu dir, ich gehe hier hin. Das ist ein besseres Teeblatt. Es gibt andere Möglichkeiten, dies zu tun. Ich möchte damit nicht ins Unkraut geraten , nur damit du weißt, dass es ausgefallene Möglichkeiten gibt, das Stift-Werkzeug zu benutzen. Das ist nah genug für das, was ich brauche. Das ist die kurze Berichterstattung des Stift-Werkzeugs. Klicken Sie einmal für eine Ecke, klicken und ziehen Sie für eine Kurve und seien Sie darauf vorbereitet, sie danach anzupassen, und bereiten Sie sich darauf vor, ein wenig frustriert zu sein. Es ist schwierig zu lernen. Das sollte das Ende des Videos sein. Es war das Ende des Videos. Ich bin aus der Zukunft zurückgekommen , weil es ein paar Dinge gibt , die ich bisher nicht über das Stift-Werkzeug erwähnt habe. Es ist nützlich und es geht um jede Form, die Sie in XD erstellt haben. Wir alle wissen, wie wir hineinkommen und dieses Ding bearbeiten können, also doppelklicken Sie darauf. Wenn Sie einen zusätzlichen Punkt hinzufügen möchten, schweben Sie einfach auf der Kante, los geht's. Klicken Sie einfach einmal und Sie erhalten einen zusätzlichen Punkt, dann können Sie ihn ziehen. Sie können weitere Ankerpunkte hinzufügen, wenn Sie sie benötigen. die gleiche Weise können Sie sie entfernen und sagen, dass es zu viel gibt. Ein einmaliges Klicken klingt so, dass ich das nicht mehr will. Ich will diesen nicht oder klicke einfach darauf und klicke auf deiner Tastatur auf „Löschen“. So fügen Sie Ankerpunkte hinzu und entfernen Sie sie. Eine andere Sache, die ich dir zeigen wollte , war sie zu konvertieren. Sagen wir, dieser hier begann das Leben als Ecke. Kann es dir gefallen? Das war gut. Ich will nicht, dass es eine Ecke mehr ist. Ich möchte, dass du kurvig bist. Alles, was Sie tun müssen, ist sich daran zu erinnern, dass Sie doppelklicken, um in das Objekt zu gelangen doppelklicken, um in das Objekt , und es konvertiert es aus Kurve, Ecke, Kurve und Ecke. Diese werden ein bisschen sein, oh, doppelklicken Sie einfach darauf, Kurvenecke. Die Punkte danach zu konvertieren, spielt es keine Rolle, ob Sie sie mit dem Stift-Werkzeug gezeichnet oder einige dieser regulären Formen zerstört haben dem Stift-Werkzeug gezeichnet oder einige dieser regulären Formen zerstört die wir früher im Kurs gemacht haben. Aber ja, das sind die Extras ich diesem Video hinzufügen wollte, um Ihnen ein bisschen vollständigeres Verständnis einige dieser Wege und deren Funktionsweise zu vermitteln. Das ist es definitiv für dieses Video, wir sehen uns im nächsten. 47. Arbeiten mit Strichen und Linien in Adobe XD: Hi, allerseits. Willkommen in der Border Extravaganza. Wir werden uns Linien, Grenzen, Striche ansehen , wie auch immer Sie sie nennen möchten. Wir schauen uns gepunktete Linien an, wir schauen uns diese Typen an, die einige flache Enden haben, abgerundete Enden. Dann schauen wir uns einige Formen an und etwas von der Verrücktheit, die es macht, wo einige von ihnen herumlaufen, und einige von ihnen werden abgeschlagen und einige von ihnen sind darauf hingewiesen. All das werden wir in diesem Video untersuchen. Lasst uns reingehen. Ich nenne sie dauernd Schlaganfälle. XD nennt sie Grenzen. Nur damit du es weißt. Wir werden diese Linie durch die Mitte dieser beiden schaffen , um sie ein wenig zu trennen. Es spielt keine Rolle , ob Sie das Linienwerkzeug oder das Stiftwerkzeug verwenden , in diesem Fall erhalten Sie genau das gleiche Endergebnis. Ich benutze das Linienwerkzeug und ziehe es heraus. Wie bringe ich es dazu, geradeaus zu gehen? Halten Sie „Umschalt“ gedrückt. In diesem Fall will es sowieso wirklich, ich muss nichts gedrückt halten, aber halte „Umschalt“, nur um sicherzugehen. Ich bekomme meinen Grenzschrägstrich. Jetzt könnte ich , das lösche ich. Benutze das Stift-Werkzeug. Klicken Sie einmal, halten Sie „Umschalt“ gedrückt und klicken Sie zweimal. Am Ende habe ich das Gleiche. Zurück zu meinem Auswahl-Tool. Es spielt keine Rolle, wie Sie diese Dinge erstellen möchten . Zuallererst möchte ich es zu meinem cremefarbenen Weiß machen. Zoomen wir ein bisschen hinein. Leertaste, ziehe sie rüber. Ich habe meine kleinen Zeilen ausgewählt. Schauen wir uns das einfache an. Schauen wir uns hier unten an. Sie müssen die Grenze anlegen lassen. Ansonsten wird es nicht funktionieren. Sie werden hier unten keine dieser Informationen sehen und haben etwas ausgewählt, in unserem Fall unsere Linie. Bezug auf die Größe werde ich es auf zwei setzen, damit Sie es einfacher sehen können, und die gepunktete Linie oder die gestrichelte Linie ist nur diese hier. Du entscheidest, wie groß du die Bindestriche haben willst. Ich habe fünf Pixel eingegeben, es wird davon ausgegangen, dass die Lücke die gleiche Größe haben soll. Aber Sie können das anpassen, vielleicht möchten Sie eine 10-Lücke. Sie können entscheiden, wie groß die Bindestriche sind und wie groß die Lücke dazwischen ist. Dies veranschaulicht ein paar dieser anderen Punkte. Hauptsächlich dieser hier. Standardmäßig hast du das erste namens Butt Cap. Ich glaube, ich mache in jedem Kurs, in dem ich [LACHEN] darüber mache, einen Witz . Ich will es wirklich, aber ich versuche es nicht zu tun. Gehen wir weiter zum passenderen Namen, Rounded Cap. Werfen wir einen Blick auf den Unterschied. So bekommt man Striche , die dieses kleine abgerundete Ende haben. Es spielt keine Rolle, ob Sie einen gestrichen haben oder nicht. Wenn ich den Strich wieder auf 0 und die Lücke auf 0 drehe , kannst du es trotzdem sehen? Es hat dort die abgerundeten Enden. Es spielt keine Rolle, ob es eine gestrichelte Linie ist, aber du hast die Butt Cap, du hast die Round Cap. Lasst uns unser geknacktes wieder reinbringen , um dir den nächsten zu zeigen. Diese hier können Sie an der kleinen Ikone sehen , was sie tun. Die Butt Cap liegt direkt an der Kante dort, abgerundet, geht um das Ende dieses Winkelpunkts. Dieser hier heißt Projecting Cap. Projekte aus der Vergangenheit. Gehen wir von Butt Cap zu Projected Cap. Dieser hier ist es. Kannst du sehen, was es macht? Es ist immer noch dieselbe Linie , aber es geht raus und herum. Möglicherweise stellen Sie fest, dass Sie zwei Icons haben und den gleichen Strich haben. Du meinst, warum sieht das anders aus? Möglicherweise haben Sie es aus dem XD-Dokument einer anderen Person importiert und eines erstellt, einfach nicht übereinstimmt. Es ist vielleicht, dass man auf Butt Cap eingestellt ist, und einer ist auf Projecting Cap eingestellt. Das lasse ich dort liegen, meine kleine gepunktete Linie. Befehl 0 ist nicht wirklich das, was ich wollte, aber [LACHEN] wir haben den ganzen Weg hinausgezoomt. Ich klicke auf diesen und gehe auf Befehl 3. Sie können jede Form verwenden, die Sie möglicherweise erstellt haben, oder Sie können einfach ein Rechteck zeichnen, es spielt keine Rolle. Ich werde diesen benutzen, weil es ein gutes Beispiel für das nächste ist, was ich dir zeigen möchte. Ich füge eine Grenze hinzu. Jetzt füge ich einen Rand von vielleicht vier Pixeln hinzu, nur um unser Problem hier zu veranschaulichen. Diese drei hier sind ziemlich wichtig. Standardmäßig kann ich mich nicht einmal erinnern, wie der Standardwert ist. Ich kann mich nicht erinnern, was du zuletzt tust, aber der erste ist die Art und Weise, wie der Schlaganfall darauf angewendet wird. Das hier, wir werden versuchen , das Innere anzudrücken. Lassen Sie uns zwei Versionen davon haben, eine ohne Schlaganfall. Du wirst keinen Schlaganfall haben. Dieser hier, obwohl genau die gleiche Größe. Kannst du sehen? Ich bringe ihn nach vorne. Er hat genau die gleiche Größe. Der Schlaganfall versucht, im Inneren davon zu sein. Wenn du das andere machst, versucht es draußen zu sein. Es ist ein bisschen breiter. Es wird Zeiten geben , in denen du beides brauchst. Kannst du sehen, dass das Innere hier ein paar seltsame Sachen mit dem Schlaganfall macht ? Möglicherweise stellen Sie fest, dass Sie, wenn Sie versuchen, Striche anzuwenden , nicht ganz das tut, was Sie wollen. Sie können diese außerhalb oder diese Standardeinstellung anpassen , die versucht, die Mitte hier zu überspannen. Du siehst, da ist meine kleine blaue Linie, sie ist ein bisschen drin , ein bisschen draußen. Eine andere Sache, die wir uns ansehen ist die Art und Weise, wie die Kanten behandelt werden. Dies ist Miter Join, was der Standardwert ist, der auf einen Punkt kommt. Wenn der Winkel nicht zu scharf ist, hat er diese spitz zulaufende Kante. Ich schätze, du musst dir ansehen. Lass mich versuchen, es näher zu kommen, damit wir hineinzoomen können. Sie können sehen, das sind die verschiedenen. Klicke es einfach durch und du bekommst eine Idee. Dies ist die wichtigste, die Sie vielleicht tun möchten, sind die abgerundeten Ecken. Wenn Sie versuchen möchten, Symbole abzugleichen, runden Sie die Ränder dieses Rahmens ab. Das hier benutze ich nie. Es schneidet die Ecken ab. Kann praktisch sein, wenn man manchmal wirklich stachelige Dinge macht . Es ist wahrscheinlich das erste oder das zweite. Du siehst hier drin, was macht es? Im Grunde genommen ist es so ein enger Winkel, man nicht den kleinen Punkt darauf setzen kann, weil der Punkt am Ende sein würde, kannst du meinem Pfeil folgen? Es wäre so raus hier, also hat der Miter Join ein Limit , wo er zu spitz geht. [GELÄCHTER] Dieser wird langsam sehr lang. Dieser hier ist einfach zu lang, also schnappt er ihn ab. Wenn du Teile hast , die abgeschnitten wurden und du sagst : „Hey, warum machst du das?“ Es liegt daran, dass es zu scharf ist, weshalb, wie man sehen kann, das passiert. Da gehst du. Das ist der Download von Strichen. Es kann nützlich sein, wenn Sie versuchen, einige andere Symbole, die Sie möglicherweise von anderen Orten erhalten haben, mit Ihren eigenen benutzerdefinierten Symbolen zu mischen einige andere Symbole, die Sie möglicherweise von anderen Orten erhalten haben und zu versuchen, dass sie identisch sind, verwenden Sie denselben Strich Stil so dass sie übereinstimmen. Das ist es für Strich und Linien, in XD auch Grenzen genannt werden. Lass uns mit dem nächsten Video fortfahren. 48. Kursprojekt 09 – Symbole und Buttons: Hallo allerseits. Zeit des Klassenprojekts. Du bist wie Boo, keine Klassenprojekte mehr. Komm schon, es gefällt dir. Ich kann es sehen, du bist es. Dieser hier muss man ein paar Dinge tun. Der erste ist das Erstellen von zwei Schaltflächen mit Texten, wie du bist, Buttons. Vielleicht haben wir Knöpfe gemacht. Wir werden Lust haben, es später zu verbinden. Aber im Moment werden wir im Grunde nur tun, welcher Button ein Rechteck ist. [GELÄCHTER] Du wirst zwei von ihnen zeichnen. Ich habe mehr gelernt und inzwischen habe ich meine Farben benutzt. Sie müssen keine abgerundeten Ecken verwenden, nur zwei Knöpfe , alles ist Text. Ich habe einen mit grünem Text, auf meiner Akzentfarbe. Dieser hier hat gerade einen Umriss, der eine Grenze und keine Füllung hat. Dieser hier mit weißem Text. Zwei Knöpfe und zwei Rechtecke mit Text in der Mitte, einfach. Das hier ist nicht so einfach. Dieser hier wird eine nette Herausforderung sein. A ist, Sie müssen mindestens drei Symbole erstellen. Du kannst sie alle machen, wenn du bereit für die Herausforderung bist. Es gibt drei wesentliche, die benötigt werden. Das benutzerdefinierte Logo, ich möchte, dass Sie einige Zeit damit verbringen , etwas zu zeichnen, das relativ mit Ihrem Produkt verbunden ist . Wenn es Kaffee ist, versuche eine Kaffeetasse zu ziehen. Wenn es Honig ist, versuche eine Biene oder ein Honigglas zu zeichnen oder was auch immer es ist. Ein Icon hier oben über Ihrer Marketingbotschaft, dass Sie sehen, ob Sie es zeichnen können. Das Ziel hier ist es nicht, etwas Schönes zu tun, das Ziel ist es, einfach etwas beim Üben zu tun. Hier bist du gerade und teilst. Ich würde gerne sehen, was ihr tut, insbesondere über Social-Media-Feedback, wenn ihr es wollt. Es ist nur, ja, manche Leute werden wirklich gut haben. Du wirst andere Leute sehen, dann bist du so, als hätte ich großartige gemacht, ich werde meine nicht posten. Weil einige Leute Erfahrung mit anderen Programmen mit dem Stiftwerkzeug in verschiedenen Formen haben Erfahrung mit anderen Programmen mit dem und erstaunliche Dinge tun, aber keine Sorge, bringen Sie Ihren Laptop mit. Was wir hier machen, dreht sich alles um das Lernen und den Einstieg. keine Angst, deine Sachen zu teilen. Selbst wenn Sie denken, dass es nicht großartig ist, wird es in zwei Jahren ein großer Meilenstein sein , wenn Sie zurückgehen und [LACHEN] auf die Ikone schauen, die ich gemacht habe, aber es rausbringen, fühlt sich gut an. Zeichne ein Icon. Es kann einfach sein. Sie müssen das Stiftwerkzeug nicht benutzen. Sie können beliebige Formen verwenden, die Sie mögen, so habe ich dieses Icon hier für mein Suchsymbol gezeichnet. Es ist ein Kreis und dann habe ich ein Rechteck gezeichnet. Dann bin ich bloop gegangen. [GELÄCHTER] Da war mein kleiner Stock. Du wirst kreativ werden, wie du diese Dinge zeichnen wirst . Gleiches gilt für dieses Rechteck. Es gab ein Dreieck und ein paar Rechtecke. Ich mag mein Haus nicht wirklich, werde aber trotzdem kreativ. Das, was ich tun muss, ist das benutzerdefinierte Symbol. Ich möchte, dass du das Burger-Menü machst, wenn du es noch nicht getan hast. Das ist Line. Stellen Sie einfach sicher , dass Sie sich des Grenzstils bewusst sind , wenn Sie ein Linienwerkzeug ausgewählt haben, es sind diese Typen hier unten. Wie sitzt es auf dem Schlaganfall? Welches Capping hat es? Ich möchte, dass du einfach bei Bewusstsein bist , wenn du das tust. Ich habe mich für eine schöne abgerundete Mütze entschieden. Größere Speisekarte, relativ einfach. Ein Home-Icon, weil wir es für diesen Kurs brauchen werden. Versuche ein besseres Haus zu zeichnen als ich. [GELÄCHTER] Google-Haus-Symbole und finde etwas, das, A, du denkst, ein gutes Haussymbol darstellt, und es ist etwas, das du tatsächlich zeichnen kannst . Der Rest von ihnen ist optional. Ich habe sie in die Reihenfolge gebracht, in der ich mich persönlich als Lehrer fühle, was ist am einfachsten zu zeichnen? Nun, [GELÄCHTER] eigentlich werde ich diesen nach unten bewegen. Dieser könnte möglicherweise der schwierigste sein. Das weiß ich nicht. Das Bugger-Menü besteht aus nur drei Zeilen. Konto-Symbol, Sie haben dort ein Kontosymbol gesehen, das dort ist. Es hängt davon ab, für welche Sie sich entscheiden. Sie können knifflig sein. Ich habe sie in die Reihenfolge gebracht, was meiner Meinung nach am schwersten ist. Tu die drei, mach fünf, wenn du König fühlst, versuche sie alle zu tun. Wenn du das Gefühl hast , dass du ein bisschen Zeit hast, willst du üben. Das, woran Sie sich erinnern möchten , ist , dass es tatsächlich praktisch sein kann , mit einem Quadrat als Leitfaden zu beginnen. Als ich anfing, meins zu zeichnen, habe ich sie in Quadrate gelegt, damit sie zumindest proportional gleich waren. Am Ende habe ich sie ziemlich verändert, aber zumindest gibt es dir einige Dimensionen. Ansonsten machst du sie vielleicht alle seltsamen Größen. Ich habe mit einer Größe angefangen , die 48 mal 48 Pixel beträgt. Es ist gut genug Größe, es ist groß genug, dass Sie dort ein paar Details bekommen können , ohne zu groß zu sein, und ein bisschen verrückt werden, weil es eine Ikone sein wird. Lass mich aufschreiben. Nur ein paar Rechtecke , in die ich angefangen habe zu zeichnen , sind tatsächlich Quadrate , die 48 mal 48 sind. Es ist ein guter Ausgangspunkt. Andere Dinge können Sie die Funktion „abgerundete Ecke“ verwenden. Denk daran, wenn du etwas zeichnest und du bist, als würde das Stiftwerkzeug mich umbringen. Du kannst die runden Ecken benutzen oder wer sich daran erinnert, wie du nur eine Ecke dazu bringen kannst mit deinem Gehirn zu arbeiten, wie du meinst, Oh, ich erinnere mich. Halten Sie die Wahltaste gedrückt. Oder Alt-Taste auf einem PC und Sie können einen von ihnen ziehen. Dies könnte der Anfang der Form sein, die Sie benötigen. Du könntest so sein, in Ordnung hier ist es. Jetzt kann ich darauf doppelklicken und meine Anpassungen vornehmen. Denn das ist einfacher als das Stiftwerkzeug oder einige der anderen Werkzeuge zu verwenden . [GELÄCHTER] Du verstehst die Idee. Sie auch daran, dass Sie den Schlaganfall skizzieren, wenn Sie es nach oben und unten skalieren . Ich musste es mit diesen machen, denn denken Sie daran, wenn sie dort nach unten skalieren , behalten Sie die Randgröße bei. wollte ich nicht, als es kleiner wurde. Das siehst du. Ich habe mit der rechten Maustaste geklickt und bin zum Umrissstrich gegangen. Denken Sie daran, früher im Kurs, manchmal funktioniert das nicht für Sie, versuchen Sie es zuerst. Wenn das für Sie nicht funktioniert, gibt es die andere Möglichkeit, den Objektpfad zu konvertieren und in Pfad zu konvertieren. Sie könnten Probleme mit denen haben, die Sie vielleicht nicht haben. Sie können auch das Aussehen kopieren und einfügen. Jedes Mal, wenn du etwas in Adobe XD zeichnest , ist es Schmerzen im Hintern. Du bist wie langweilig graue Linie einen Strich weiße Füllung. Denken Sie daran, Sie können sagen, dass Sie es drücken, kopieren , bearbeiten, das Aussehen einfügen zumindest in der richtigen Zone loslegen. Die andere Sache ist, ich möchte, dass Sie es in Ihrer XD-App auf Ihrem Telefon testen Ihrer XD-App auf Ihrem Telefon denn wenn Sie diese Dinge auslegen, fühlen sie sich möglicherweise die richtige Größe an, aber wenn Sie sie tatsächlich auf Ihrem sehen telefoniere und versuche sie zu klicken, und du kannst es nicht, weil sie zu nah beieinander sind oder einfach nur riesig sind und du bist wie das sind einige große Knöpfe. Testen Sie immer auf Ihrem Telefon, nur um zu sehen, was funktioniert. Ich weiß, dass dieser Typ ein bisschen kleiner ist. Ich schaue mir hier mein Handy an. Er ist ein bisschen klein für das, was ich brauche. Das ist es. Sobald Sie es geschafft haben, machen einen Screenshot der Icons , die Sie erstellt haben, legen Sie ein paar davon hier auf. Wenn du nur ein Paar machst, wie 1, 2 und 3, mach einfach einen Screenshot deiner Seite. Wahrscheinlich ist die Homepage die beste, denn sie ist zusammen mit deinen Buttons. Ich werde das alles sehen. Wenn Sie mehr getan haben, legen Sie sie einfach auf einen Seiten-Screenshot und legen Sie sie auf. Ich würde gerne alle sehen, die du erschaffst. Ich freue mich darauf zu sehen , was Sie sich dafür einfallen lassen . Es wird interessant sein. Teilen Sie es hier und laden Sie es dann auch in die sozialen Medien hoch, ich liebe es, es zu sehen. Instagram, Twitter, Facebook-Gruppe, LinkedIn, Gruppe, was auch immer Ihr Geschmack ist, und ich würde es gerne sehen. Das ist es, auf das nächste Video. Eigentlich machst du deine Hausaufgaben. Wir sehen uns im nächsten Video, sobald du fertig bist. Wir sehen uns dann. 49. Muss ich Illustrator mit Adobe XD wissen müssen, muss ich Illustrator mit Adobe XD kennen: Weil ich es Ihnen zeigen werde, beginnt es mit einigen einfachen Dingen über die Unterschiede zwischen Verwendung und Zeichnung in Adobe XD und Adobe Illustrator. Gegen Ende zeige ich Ihnen einige der Probleme, die auftreten, wenn Sie von einem zum anderen wechseln. Wenn Sie keine Ahnung haben, was Adobe Illustrator ist, ist es nur ein anderes Programm, das Adobe macht. Es ist spezialisiert auf Zeichnen und Illustrationen und wirklich gut in Typografie. Wir werden einige Formen wie diese zeichnen sie von Illustrator zu XD bringen. Aber ja, lass uns anfangen. Um die erste Frage zu beantworten, müssen Sie Adobe Illustrator kennen , um ein UX-Designer zu sein? Die Antwort lautet „Nein“. Es ist ein nützliches Tool und wahrscheinlich eine nächste Stufe für Sie nach diesem Kurs, wenn Sie diesen Teil des UX-Prozesses wirklich genießen. Das eigentliche UI-Design, die eigentlichen Dinge, Zeichnungsschaltflächen und Symbole gibt es bisher alles, was Sie mit Adobe XD bekommen können. Es hat genug und du kannst gut darin werden, aber es wird nur Zeiten geben, in denen du keine Dinge tun kannst. XD ist für das schnelle Prototyping gedacht, nicht zur vollständigen Illustration. Dort könnte Illustrator für Sie nützlich sein. Ich benutze es ständig in meinem Prozess. Lassen Sie mich Ihnen zum Beispiel ein paar Schnell geben. Ich bin in Adobe Illustrator, Sie werden sehen, dass es einige der Werkzeuge gibt, wie es ein Stiftwerkzeug gibt. Es gibt ein Rechteckwerkzeug. Ich ziehe die Kaffeetasse, wie du es am Anfang gesehen hast. Es gibt viele Ähnlichkeiten, was nett ist. Ich hab dieses Rechteck. Sieh mal, die gleichen kleinen Punkte. Vieles davon ist das Gleiche. Ich entwerfe meine kleine Kaffeetasse, oben abgerundet und umschalt, klicke auf diese unteren und ziehe diese nach oben. Da gehst du. Es gibt eine Kaffeetasse. Wo es anders wird, ist, wo es das Gleiche ist, das Stiftwerkzeug. Ich klicke und ziehe Kurven für einen Handle heraus. [GELÄCHTER] Es gibt einen Griff. Ich möchte, dass es eine Füllung hat und keinen Schlaganfall. Ich kann den Schlaganfall schnappen, ihn nach oben bewegen. Dies ist kein Illustrator-Kurs. Wenn du einen Illustrator-Kurs willst, weiß ich, dass ein Typ ein Essentials und einen Fortgeschrittenenkurs bekommen hat. Aber wo es sich unterscheidet, ist sagen wir, dass ich diesen Strich auf eine variable Breite ändern möchte , das können Sie in Adobe XD nicht tun. Sie können das Breitenwerkzeug hier in Illustrator greifen und mit den Soundeffekten erneut [NOISE] gehen . Sie können sehen, dass ich jetzt eine variable Breite erstellen kann. Wir können es uns vorstellen. Ich zeige Ihnen ein paar Gründe warum Sie herausspringen und Illustrator lernen könnten. Wenn Sie bereits Kenntnisse dazu haben, könnten Sie so sein, dass ich eine Kaffeetasse zeichnen kann. [GELÄCHTER] Du kannst für dieses Video rumhängen , wenn du Master of Illustrator bist. Es gibt ein paar kleine Verbindungen zwischen XD und Illustrator. Ich schnappe mir wieder mein Stiftwerkzeug. Ich zeichne mein kleines kurviges Ding. Es soll Dampf sein, der von meinem grünen Tee kommt. Also nochmal, das Breitenwerkzeug, ich kann das kleine bisschen winzig da drin machen. Wenn Sie das Breitenwerkzeug nicht verwendet haben und Sie eine Illustrator-Person sind. Oh so cool. Ich liebe es. Ich werde meinen Schlag auf nicht von der ersten , der zweiten runden Kappe umstellen auf nicht von der ersten , der . Breiten-Tool ist also eines von denen, das ich an Illustrator mag. Es gibt viele. Dies ist zum Beispiel nur ein wenig, wo es wirklich cool wird, sind verschiedene Striche. Also zeichne ich einen Waft, klicke und ziehe für eine Kurve. Wahrscheinlich ein bisschen zu groß und wieder mit den Soundeffekten. Also so etwas. Was wir tun können, ist, anstatt nur mit Strichen zu spielen, es gibt eine ganze Teilmenge von Dingen wie Pinseln. Ich benutze nur einen künstlerischen Kreide-Kohlenstift. Nun, sieh dir das an. Sieht aus wie ein Kreidekohlestift. Dies sind also einige der Vorteile der Verwendung von Illustrator. Ein weiterer Vorteil ist, wenn Sie es mit Schriftarten zu tun haben. Lassen Sie mich Ihnen zum Beispiel schnell geben, wenn ich darauf klicke, wenn ich ein zum Beispiel schnell geben, wenn ich darauf klicke, Café tippe, benutze ich meinen Amatic. Ich habe eine Schrift namens, du hast sie gesehen, Amatic. Ich hab diese Schriftart. Aber ich will, dass das Café ein wenig hat , ich kann mich nicht erinnern, wie es heißt. Das Ding von der Spitze des E. Das lässt es schick und französisch erscheinen . Die Glyphen. Sie werden Glyphen genannt. Sie sind unter dem Typ. Viele Schriftarten haben sie, nicht alle von ihnen. tut dies, aber wir können nicht auf all diese Glyphen in XD zugreifen . Es ist nicht für eine große Menge an Typografie gebaut. Illustrator liebt Topographie. Wie Sie hier sehen können, schauen Sie sich diese zusätzlichen Charaktere an , die Sie verpassen. In meinem Fall, wenn ich den Mauszeiger auswähle E, hier ist es da. Eigentlich will ich das andere E, das E mit dem Bit. Werfen wir einen Blick darauf. Wo ist das E mit dem Bit? Warte da. ihn gesehen. Doppelklick auf ihn und ich habe das E mit einem kleinen Strich drauf bekommen. Glyphen sind also eine andere praktische Sache, es wird sogar schick Ich liebe Glyphen. Glyphen sind großartig. Sie werden noch schicker, wenn wir uns verschiedene Schriftarten ansehen. Schauen wir uns eine andere Schriftart an. Schauen wir uns das hier an. Alicia, dieser hier hat einen Haufen Glyphen, also werde ich sie schließen. Kannst du das sehen? Sieh dir all diese saftigen an. Sieh dir das an. Ich will das am Ende. Also lasst uns dort hervorheben. Aber sieh mal, ich kann das Ende ändern, wie dieser Typ. Schau dir all die Wirbel und Kleinigkeiten an und du könntest entscheiden, oh ich will ein anderes ein. Ich mag das nicht a. Ich werde mich dafür entscheiden es verbindet sich mit einem C. Vielleicht das. Du kannst ein paar lustige Sachen machen. Nun, das ist der Grund warum Illustrator möglicherweise Teil Ihres Toolsets ist, wenn Sie in Adobe XD entwerfen , weil Sie Zugriff auf all diese zusätzlichen Dinge erhalten. Um sie von einem zum anderen zu bringen, werde ich es tun, okay nicht so hübsch, wie ich es mir erhofft hatte. [GELÄCHTER] Meine Tasse sieht nicht so zierlich aus, wie ich dachte. Es ist ein bisschen zerquetscht. Wie auch immer, wähle sie alle aus und kopiere sie und wenn du sie in XD bringst, werden einige Dinge immer noch editierbar sein und manche Dinge nicht. Nun, bringen wir es rein. Ich füge es ein und ich hab's verstanden. Ich fülle es mit einer meiner Farben. Ja, das hier. Was Sie finden werden ist, dass ich doppelklicken kann, um noch hineinzugehen . Ich bin in diesem Ding drin. Ich kann es nochmal doppelklicken und schauen, es gibt einen Teil von meinem Mann. Du kannst sie immer noch trennen. Du könntest immer noch an ihnen arbeiten. Aber sagen wir diesen Schlaganfall hier, schauen Sie sich an, was damit passiert ist. Es ist hier drin und ich kann mich damit anlegen. Es besteht nur aus all diesen kleinen Stücken, während es in Illustrator diese eine kleine Zeile ist, die ich in meinem Fall dieses Direktauswahl-Tool verwenden kann , das Ende auswählen, gehen Sie [NOISE]. Sie können also einen Großteil Ihrer Bearbeitung in Illustrator vornehmen und dann einfach das Endergebnis in XD kopieren und einfügen. Sie können es anpassen und damit herumspielen. Aber das wäre der Vorgang, einfach nur kopieren und einfügen. Du kannst schicker sein und hier drin gehe zu meinen Bibliotheken, finde deine XD-Klasse und gehe [unhörbar] Nun, ich kopiere einfach die Schriftart und füge sie ein. Ist das alles reingegangen? Werfen wir einen Blick darauf. Lass uns reingehen. Ziehen wir es tatsächlich noch einmal raus. Ich hab einen Teil von meinem Mann da drin. Habe ich mir alles geholt? Ich gruppiere es und lege sie dann rein. Das ist besser. Jetzt in Adobe XD. Ich gehe hin, denk daran, wer weiß, wo die Bibliotheken an diesem seltsamen Ort befinden. Vermögenswerte, hier. Sie könnten sich bewegen. Wo ist mein XD-Kurs? Es gibt es. Cool und ich kann sagen, los geht's. Das ist die offizielle Art, es einzubringen. Sieh dir das an. Es hat meinen kleinen Schlaganfall verloren. [GELÄCHTER] Das passiert dir, wir gehen ein bisschen zu tief in Illustrator ein. Möglicherweise stoßen Sie auf dieses Problem. Kopieren Sie es und fügen Sie es ein, dann ist es in Ordnung. Es ist die gleiche Lösung, die wir in XD hatten , wenn wir auf Probleme stoßen. Hier ist es jedoch unter Objekt, Pfad und es gibt einen, der Gliederungsstrich genannt wird. Es behebt alle Probleme. Jetzt springt da rein. [NOISE] Komm jetzt zurück in XD, gehe auf eine Tangente und Artwork 3, aber es funktioniert. Hey, wir stoßen auf Probleme. Wir reparieren sie. Schauen wir uns eine letzte Sache an. Es kopiert und fügt Schriftarten ein. Ich kann mich nicht erinnern, was es tut. Bringen Sie es rüber , fügen Sie ein, ich denke, es wird es einfach in eine Form umreißen. Das hat es. Doppelklicken Sie darauf. Ist eine SMS? Es ist bearbeitbarer Text außer weiß er, was der letzte zu tun ist? Tut es nicht. Was endet sonst noch in E? Ich kann mir kein einziges Wort vorstellen. (GELÄCHTER) Ich weiß es nicht, Tee? [GELÄCHTER] Du hast mich auf die Stelle gebracht, und du kannst in diesem Fall die Teile sehen, die in Ordnung waren, nur normale alte Texte. Sie sind gut durchgekommen. Dieses Ding, das als Form durchgekommen ist. Sieh dir das an. Es geht damit um und es funktioniert genauso mit diesem, wette ich. Kommt das E durch? Nein, dieses E ist editierbar. Sieh dir das an. Das ist einer deiner regulären E. Also kann ich das löschen und weitermachen. Sie werden also intermittierende Probleme finden. Dieser hier ist, denken Sie daran, dass Sie sich kein Wort vorstellen können. Dann komm schon. Hab eins. [GELÄCHTER] Es ist also die Glyphen vom normalen alten Text getrennt , aber das ist okay. Ich kann damit arbeiten. Das Coole an ihnen, auch wenn es eine Form ist, ist es immer noch skalierbar und es ist reizend Victor. Güte. Das wird es sein. Sie müssen Adobe Illustrator nicht kennen um ein UX-Designer und Adobe XD zu sein, aber es ist praktisch und ich kenne einen Typen, der Ihnen beibringen kann. Wenn Sie ein erfahrener Illustrator-Benutzer sind, sollten Sie sich meinen Advanced Illustrator-Kurs ansehen. Wenn Sie gerade erst anfangen, schauen Sie sich das Wesentliche an. Es muss nicht meins sein, aber es ist eine Fähigkeit, die Sie wahrscheinlich auf Ihrer Reise fördern möchten . Das ist es. Wir sehen uns im nächsten Video. 50. Maskieren und & in Adobe XD: Hallo du. In diesem Video werden wir Maskierung in Adobe XD durchführen. Die kurze Version wird eine Form auf ein Bild gelegt, beide auswählen und Objektmaske mit Form gehen. Es gibt noch ein paar andere Dinge , um sowohl die Form als auch das Bild zu bearbeiten , das ich mit Ihnen teilen möchte . Aber wenn das alles ist, wofür du gekommen bist, bist du fertig. Aber wenn alle anderen, lass uns loslegen. Bringen wir ein Bild ein. Es spielt keine Rolle beim Dateiimport oder ziehe sie aus dem Finder hinein, wie ich es normalerweise tue. Ich bringe das zuerst mit. Bei Bildern passiert dies oft, kommentierten sie diese gigantische Größe. Wenn Sie die Umschalttaste an einer der Ecken und die Option auf einem Mac gedrückt halten , skalieren Sie sie auf einem PC auf Angemessenheit. Nur damit Sie wissen, ob Sie ein Webdesigner oder Entwickler sind, ist es nicht wichtig, diese Bilder vor XD die richtige Größe und entweder die richtige Auflösung oder die richtige chronische Qualität zu erhalten die richtige Größe und entweder die vor XD die richtige Größe und entweder die richtige Auflösung oder die richtige chronische Qualität . XD, was wir später im Kurs machen werden. Es bringt sie in ihr vollkommen glorreiches Selbst und Sie können sie später auf eine geeignetere Webdesign-Größe exportieren . Dann mach dich an die Maskierung. Der offizielle Weg besteht darin , ein Bild zu haben und dann eine Form davon zu zeichnen. Es kann jede Form sein, wird ein Rechteck zeichnen. Ich werde ein paar Duplikate darüber machen , nur damit ich dir verschiedene Wege zeigen kann. Wählen Sie beide aus. Das Ding oben, das Sie darin maskieren möchten , muss oben sein. Möglicherweise müssen Sie mit der rechten Maustaste darauf klicken und bringen nach vorne sagen. Wählen Sie beide aus, und sagen Sie dann, der lange Weg ist Objekt und gehen Sie mit Form zu machen. Nein, das ist eine Maske mit Form sogar. Klicken Sie darauf und los geht's, unser erster Schritt. Jeder auf Shape funktioniert. Es spielt keine Rolle, solange es oben ist. Die Verknüpfung ist Befehl shift m je nachdem, wie viele Bilder Sie am Ende machen. Shortcut Ich erinnere mich irgendwie und das ist Befehl shift m auf einem Mac und steuere Shift m auf einem PC. Sie können jede Form haben, die Sie nicht einmal zeichnen mussten, kann etwas sein, das jemand anderes gezeichnet hat, das Sie importiert haben. Lasst uns etwas Verrücktes machen oder wir sind dort nicht gezeichnet. Ich habe dieses Twitter-Logo nicht gezeichnet. Solange es oben ist. Welche meins ist zufällig. Sie können es auswählen und Befehl shift m sagen . Sie können auch mit dem Stiftwerkzeug Ihre eigene benutzerdefinierte verwenden. Du könntest entscheiden, dass ich alles auswähle, schnappe mir das Stiftwerkzeug. Ich klicke dort und erinnere mich daran, dass ich für eine Kurve geklickt und gezogen habe, einmal für eine Ecke klicke und klicke darauf, sie zu klicken und zu ziehen, ist die schlechteste Maske der Welt. Wählen Sie beide aus und verwenden Sie dann Ihre Verknüpfung. Meins hat nicht funktioniert. Warum hat meins nicht funktioniert? Ich dachte nicht, dass ich sie beide ausgewählt habe. Nun, das war's. Stellen Sie sicher, dass sie beide ausgewählt sind und die Form oben ist und Sie maskieren können. Das ist eine Art zu maskieren. Du hast zwei separate Formen und zertrümmert sie zusammen. Oft werde ich tun, dass Sie vorhandene Formen haben , die Sie ausfüllen möchten. Sagen wir hier unten, ich habe diese Platzhalterfarben und du kannst einfach direkt hineinziehen. Erfordert, dass Sie in der Lage sein, das Finder-Fenster entweder Mac oder PC zu erhalten und einfach oben auf dem XD Edge zu haben , das für einige Leute schwierig ist. Sie können hier einfach direkt in den Raum ziehen und es wird entsprechend dimensioniert und skaliert und in der richtigen Form sein. Sie können Bilder ganz einfach aktualisieren , indem Sie einfach über die Oberseite ziehen. Sag, du bist so, das ist großartig, aber ich muss das für etwas anderes ändern. Sie klicken einfach gedrückt halten und ziehen einfach über die Oberseite und es wird ausgeschaltet. Anpassen von Masken. Lasst uns das machen. [GELÄCHTER] Anfang. Sagen Sie, Sie wollten die Positionierung davon anpassen. Sie doppelklicken darauf, um hineinzugehen und Sie haben Zugriff auf dieses Bild. Sie können in der Mitte hier einfach gedrückt halten und ziehen. Sie können entscheiden, dass dies der Teil ist, den ich will, und klicken Sie dann heraus , wenn Sie fertig sind. Genauso wie unser Objektbearbeitungsmodus wenn wir diese Symbole ausführen und das nächste, was Sie vielleicht tun möchten ist, dass Sie die Kante anpassen möchten. Doppelklicken Sie also darauf, um hineinzugehen , Sie können, wenn Sie den Rand greifen, die Kante anpassen oder zerquetschen oder darauf doppelklicken und in den Objektbearbeitungsmodus wechseln und einige seltsame Dinge tun. [unhörbar] glücklicher kleiner Tee, Smiley-Gesicht [LACHEN]. Nicht so Smiley. Das ist das Bearbeiten Ihrer Masken. Es ist das Gleiche mit diesen, wo ist es? Du scrollst. Dieser Typ hier, doppelklicken Sie darauf. Du könntest entscheiden, dass es das ist. Du willst es skalieren, benutze einfach deine Umschalttaste, nimm eine der Ecken und entscheide, ob du das tun willst. Doppelklick auf und los geht's, wir maskieren und bearbeiten unsere Maske. Das bedeutet, dass Masken sie entweder in vorhandene Shapes ziehen oder beide auswählen und in die Objektmaske mit Form wechseln. Wir sehen uns im nächsten Video. 51. Kostenlose Bilder zur Verwendung in deinen XD-Mockups – Unsplash Pexels Freeimage: Hallo allerseits. Wir werden über kostenlose Archivbilder sprechen, die wir innerhalb unserer XD-Modelle kommerziell verwenden können, ich werde einige der kostenpflichtigen Websites besprechen, die ich verwende. Lasst uns reinspringen. Kostenlose Bilder, Sie suchen nach Bildern, die kommerziell verwendet werden können , kommerzielle freie Bilder. Meine Favoriten sind unsplash.com, pixels.com, free images.com. Das sind die wichtigsten kostenlosen, die ich auf der Suche nach Bildern gehe, vielleicht entweder für meine Mockups oder vielleicht habe ich einen Kunden, der nicht das Geld hat, um Bilder zu kaufen. keine Angst davor , Bilder zu kaufen. Es gibt Börsenbibliotheksseiten, die wichtigsten, die ich verwende und bezahle, sind stock.adobe.com. Das kostet ungefähr 20 Pfund und ich bekomme 10 Bilder pro Monat. Oder ich habe auch zusätzlich ein Abonnement Envato Elements, das eine sehr ähnliche, wahrscheinlich keine Bildtiefe hat , deshalb habe ich beide, aber es hat auch andere Dinge, die ich habe verwende viele Vorlagen und Soundeffekte in der Musik. Am Ende habe ich beides. Aber es gibt viele Gelegenheiten, bei denen kostenlos gut ist. Die eine Sache, auf die du nur vorsichtig sein musst, nicht vorsichtig, aber wenn du es bist, ob ich grünen Tee will, wirst du das finden. Siehst du das Ding hier? Dieses erste Bit ist eine Anzeige, iStock. Das ist eine andere Aktienbibliotheksseite. Nicht besser oder schlechter als die, die ich erklärt habe, aber so verdienen sie ihr Geld mit Unsplash. Sie erhalten Provisionen, die auf diesen basieren. Du könntest so sein, oh, das ist der, den ich will, und du kannst es nicht benutzen, weil es bezahlt ist, also gehst du hier runter und es gibt einige großartige. Sie können diejenigen sehen, die ich hier habe , weil ich sie im Kurs teilen kann. Sie sind cool, aber es gibt einfach viele [GELÄCHTER]. Die Qualität derjenigen in der Börsenbibliothek ist professionell, da sie wissen, dass sie in Anzeigen und Websites und so professionell, da sie wissen, dass sie verwendet werden, so dass es oft wirklich gut sein kann. Aber es gibt auch schöne kostenlose Sachen in der Nähe. Halte Ausschau nach den Anzeigen. [ÜBERLAPPEND] Für diese gibt es nichts wirklich zu viel an ihnen. Vielleicht möchten Sie die Lizenzen noch einmal überprüfen. Sagen wir, dass ich es benutzen möchte, ich will das wirklich, aber ich benutze grünen Tee. Das ist kein grüner Tee. Das ist ein, wie nennt man die? Chai Latte. Will ich das? Sagen wir, ich möchte das benutzen. Überprüfen Sie einfach noch einmal, ob Sie unter der Unsplash-Lizenz frei verwenden können. Machen Sie einen kleinen Scheck, stellen Sie sicher alles vorhanden ist, was Sie brauchen, für das, was ich tun muss, aber überprüfen Sie es auch noch einmal, bevor Sie es an den Kunden verkaufen. Wenn Sie mit der Verwendung von Archivbildern beginnen, stellen Sie sicher, dass der Kunde weiß, dass es zusätzliche Kosten gibt , auf die Sie für Bilder aufbauen werden , was nicht viel sein muss. Als ob ich 20 Pfund für meine 10 Bilder zahle, wenn ich fünf oder sechs davon verwende, kein großer Preis. Aber los geht's, das sind meine Lieblings-Gratis-Zeug und meine Lieblingsbibliotheken für bezahlte Lagerbilder. Das ist es. Mach weiter. 52. Hintergrundbilder mit Deckkraft in XD dunkeln; Dunkelheit, Hintergrundbilder mit Deckkraft in XD: Hallo allerseits, in diesem Video werden wir dieses Bild im Hintergrund so machen, dunkel und launisch, damit wir Text im Hintergrund vorlesen können . Spoiler-Alarm, es ist nur ein Rechteck oben, auf das eine gewisse Deckkraft angewendet wurde. Wie immer rumhängen und ich zeige dir noch ein paar andere Tipps und Tricks während wir weitermachen. Lasst uns loslegen. In Ordnung, um loszulegen, werde ich diese Homepage duplizieren. Ein paar Dinge sind, dass Sie nicht einfach die Seite auswählen und ein Hintergrundbild hinzufügen können. Es ist eigentlich nur ein Bild, wie wir es in den letzten Videos gemacht haben , das zufällig hinten ist, hier gibt es im Moment keine Option. Das andere Interessante ist, dass ich ein Rechteck zeichnen und den Hintergrund abdecken möchte . Aber wenn Sie die Seite ausgewählt haben und dann das Rechteckwerkzeug haben und Sie so gehen, als würde ich hier anfangen und darüber zeichnen , wird es das tun. Es geht wieder auf das Tool zum Hinzufügen von Seiten. Manchmal muss man entweder ein oder zwei Dinge tun. Klicken Sie im Hintergrund auf aus und zeichnen Sie dann ein Rechteck. Schön oder oft, während ich manchmal dabei bin, gehe ich zum Rechteckwerkzeug und zeichne es einfach ein bisschen kleiner. Gehe zu meinem Auswahlwerkzeug und erweitere es. Das wird dir passieren. Ich lasse es da drin. Wir haben unser Rechteck, wir werden unser Bild hinzufügen. Was werden wir benutzen? Wir werden das benutzen, nein. Okay, das werde ich benutzen. Ich bin mir nicht mal sicher , ob das grüner Tee ist. Wie auch immer, wir haben dieses Bild und wir schicken es einfach nach hinten. Aber du verdunkelst das eigentliche Bild nicht. Es gibt keine Möglichkeit, das zu tun. Wenn Sie die Füllung in Schwarz ändern, wird das eigentliche Feld schwarz, da ist kein Bild mehr drin. Was wir tun wollen, ist, dass wir tatsächlich zwei Rechtecke haben. Ich ziehe eine zweite. Nochmal, einfach kleiner, schnappen Sie sich mein Auswahlwerkzeug und machen Sie es einfach größer. Ich habe zwei Boxen, eine weiße, eine mit einem Bild und diese hier oben, ich werde sagen, du bist schwarz und ich werde die Deckkraft ein wenig senken. Dann los geht's , so macht man es. Ich habe diese beiden, ich schicke sie beide nach hinten. Wie mache ich das? Ich drücke „Command Shift eckige Klammer“, die die schwarze nach hinten schickt. Dann mache ich es auch für die zweite und das ist „Control Shift eckige Klammer“ auf einem PC. Sie sind beide hinten und ich kann sie so auswählen. Sie können auf dieses Top klicken und dann entscheiden, wie dunkel sie für den Kontrast sein muss. Sie können kleine Tastenkombinationen verwenden, wobei nur das schwarze Rechteck ausgewählt ist. Sie können alle Zahlentasten direkt über Ihren Buchstaben drücken. Nicht die Zahlentasten an der Seite, nur die über den Buchstaben. Wenn ich zwei treffe, sind es 20 Prozent. Du siehst, dass es da drüben ist. Lasst uns so nah dran sein. Zwei sind 20 Prozent, wenn ich fünf tippe ist 50 Prozent, wenn ich zweimal richtig schnell sieben tippe, beobachtest du, was passiert, es sind 77 Prozent. Am Ende mache ich eine Menge davon, etwa ihre 60% sehen gut aus für mich. So verdunkelt man einen Hintergrund, es ist nur eine Blackbox oben , die leicht transparent ist. Sie können den Hintergrund auch tönen, indem Sie nicht schwarz werden, aber ich kann Rot oder mein Grün oder mein Dunkelgrün verwenden. Ich könnte es auswählen und tatsächlich mit der Deckkraft meiner Shortcuts spielen und du würdest sagen, das ist cool, aber ich möchte, dass es tatsächlich dunkler wird. kannst du es tönen. So oder so sind es zwei verschiedene Formen übereinander. Die oberste ist nur ein bisschen transparent oder die Deckkraft ist geringer. Das war's, wir sehen uns im nächsten Video. 53. Blurring Hintergründe und Objekte in Adobe XD: Hi, allerseits. Wir nehmen unser Dokument und unseren Hintergrund und verwischen den Hintergrund und das Dokument. Wir zeigen Ihnen, wie Sie Objekte tatsächlich verwischen können, und wir werden etwas Schickes tun, wo diese Benutzeroberfläche oben oben ist und es den Hintergrund verwischen lässt, um abzustehen, cool. Alles klar, also verwischen Sie Sachen und Hintergründe in diesem Video, lasst uns loslegen. Alles klar, womit fangen wir an? Fangen wir mit der Map One an, weil es cool ist und es tatsächlich am einfachsten ist. Ich werde das beschleunigen. Ich importiere nur ein Hintergrundbild. Alles klar, also lege ich es einfach in ein Bild, zeichnete ein weißes Rechteck und bearbeite dann etwas Text, und um diesen Hintergrund verschwommen zu machen, wähle nur das Objekt oben aus. Du sagst, ich möchte, dass der Hintergrund verschwommen wird. Im Moment ist es wahrscheinlich ein bisschen zu verschwommen, ich möchte, dass es nur auf den Hintergrund hindeutet, das immer noch lesbar macht, man kann damit herumspielen, wie hell oder dunkel es ist, je nachdem, was du bist tut. Ich werde nur ein bisschen weißer als nötig. Dieser letzte hier ist wie viel von der ursprünglichen Form Sie sehen können. Wenn deine Form zufällig wie im Moment rot war, kannst du nichts sehen, aber sieh dir diese Datei an. Wenn ich das anhebe, kannst du dieses rote Rechteck sehen. Vielleicht Gelegenheiten, bei denen Sie beides brauchen, sowohl ein bisschen vom ursprünglichen Objekt sehen als auch vom ursprünglichen Objekt es vielleicht aufhellen und verdunkeln. So macht man das. Schauen wir uns die Hintergrundunschärfe an. Wir haben dieses Ding gemacht und sagen wir, es ist immer noch zu viel Detail. Ich wähle das aus. Schauen wir uns zuerst die Objektglyphe an, also bleibst du dort drüben. Ich kann auf ein Objekt klicken, sagen wir, es ist schon dunkel, ist es nicht, aber sagen wir, es ist dunkel genug und wir können das alles lesen. Wir wollen einfach nur verschwommen, unscharf. Du kannst dir sagen, mein Freund, statt Hintergrundunschärfe, sagst du, du bist Objektunschärfe, da gehst du. Das einzige Problem mit der Objektunschärfe ist, dass Sie diese unscharfe Kante erhalten. könnte dir gefallen. Es könnte perfekt sein. Wenn Ihnen die unscharfe Kante nicht gefällt, haben Sie ein paar Dinge zu tun und Sie können sicherstellen, dass der Hintergrund keine kontrastreiche Farbe hat, also kann ich sagen, dass Sie weiß sind, damit wenn dieser Typ hier ist, es einfach nicht so auffällig. Aber du hast dieses Ghosting und magst es nicht wirklich. Was ich mache ist, dass du es tatsächlich wieder maskieren kannst. Sieh dir das an, ich habe diese Form hier. Ich werde es nach vorne bringen, nur um klar zu sein, ich werde das Rechteckwerkzeug greifen. Ich zeichne ein Rechteck darin. Wählen Sie sowohl das verschwommene Ding als auch dieses neue Quadrat aus, und genau wie zuvor verwenden wir die Objektmaske mit Form. Dann dieses verschwommene Objekt, kannst du es da drin sehen? Du bist einfach von außen getrimmt. Das ist eine Möglichkeit, dies zu tun , und so mache ich es oft, um die verschwommene Kante loszuwerden, indem ich sie danach maskiere. Dann kannst du das wieder an die Spitze stecken und damit steuern, wie dunkel es ist, wenn nötig. Weil Sie feststellen werden, dass das Objekt im Moment verwischen wird, wenn ich hineingehe, um darauf zu klicken weil ich auf die Maske klicke , denken Sie daran, Sie sehen können, dass es, obwohl es eine Objektunschärfe hat, keine gibt von dem zusätzlichen Zeug , das die Hintergrundunschärfe hatte, konnten wir es senken und verdunkeln. Vielleicht kommt das vorbei. Wir haben diese beiden und ich schicke ihn nach hinten, du nach hinten. Ich benutze meine Abkürzungen denken Sie daran, dass es hier ist. Senden Sie an zurück Shift Command eckige Klammer oder Control Shift eckige Klammer auf einem PC. So verwischen Sie es im Hintergrund und spielen Sie mit der Deckkraft. Die andere Sache, die Sie tun könnten, ist, was wir hier oben gemacht haben, aber es funktioniert nicht immer. Ich werde es Ihnen zeigen , falls es in Zukunft besser funktioniert, oder es funktioniert perfekt für das , was Sie brauchen. Was werden wir tun? Lass uns den Kerl loswerden. Eigentlich lasst uns das Ganze loswerden . Wir fangen damit an. Die Alternative ist, weil Sie vielleicht sein könnten, warum verwenden wir nicht einfach die Hintergrundunschärfe wie wir? Du kannst es. Sieh dir das an. Wenn ich Hintergrundunschärfe sage, ist das Problem damit, dass es nicht verschwommen genug wird und es eine seltsame Unschärfe verursacht. Sie scheinen zwei verschiedene Unschärfe zu sein. Sieh dir das an, das ist volle Unschärfe. Das ist auch in voller Unschärfe. Das ist so anders. Deshalb benutze ich das nicht oft. Das könnte sich ändern. Es könnte mehr Kontrolle geben hier drin. Weil es perfekt wäre, weil du die Leichtigkeit und die Dunkelheit kontrollieren kannst . Aber ich weiß es nicht, denn sieh dir das an, wie ein engelhaftes himmlisches Leuchten für alles. Ich mag einfach nicht, welche Methode sie verwenden, um den Hintergrund dahinter zu verwischen. Ich verwende diese Methode, bei der ich das Objekt verwische, es möglicherweise abschneiden muss, weil die Kanten etwas verschwommen werden und es dann einfach oben legen. Ja, einfach und schmerzhaft, je nachdem, was Sie tun möchten, können Sie auf jedes alte Objekt klicken und einfach sagen, dass Sie verschwommen sind. Da gehst du. Das könnte das sein, was du willst [LACHEN] von diesem ganzen Video. Habe gerade damit angefangen. Ich weiß es nicht. Ich wollte die Hintergrundunschärfe, also haben wir das getan. Ja. Alles klar. Ich hoffe, dir hat das Video gefallen. Wir sehen uns im nächsten. Aber es wird eine Weile nicht dauern, denn es ist Freitag. Hurra. Es ist vielleicht nicht dein Freitag, aber es ist mein Freitag und es ist das letzte Video des Tages. Ich habe heute meine Ziele erreicht, und wir sehen uns im nächsten Video wieder und es wird Montag sein. Ich frage mich, ob du den Unterschied in meiner Stimme erkennen kannst. Werde ich aufgeregter sein? [GELÄCHTER] Wahrscheinlich weniger aufgeregt, es wird Montag [GELÄCHTER] Morgen sein. Alles klar, aber das ist das Ende dieses Videos, das verschwommen ist. Fantastik. Wir sehen uns nach dem Wochenende. 54. Muss ich Photoshop mit Adobe XD kennen müssen.: Hallo allerseits. In diesem Video werden wir uns ansehen, ob Sie Photoshop-Fähigkeiten als UX-Designer benötigen . Ich werde Ihnen auch die Interaktion zwischen der Verwendung von Photoshop zeigen , dafür gibt es einige Vor- und Nachteile, indem Sie Photoshop mit Adobe XD verwenden. Am Ende des Kurses zeige ich Ihnen auch, wie Sie dieses Bild aufnehmen können, was, ich weiß nicht, eine mittlere Saison ist . Stellen Sie sich vor, es wäre Winter, [NOISE] schauen Sie sich an , dass es Winter ist. Was ist mit einem Sonnenuntergang? [GELÄCHTER] Es ist eine sehr schonende Verbindung zum Kurs, außer dass ich dir die Verbindung zu Photoshop zeige dir die Verbindung zu Photoshop und weil ich der Chef dieses Videos bin und dir gerne ein cooles Zeug zeige. Das wird gegen Ende des Videos sein. Aber jetzt bauen wir die Spannung auf, brauche ich Photoshop, um ein UX-Designer zu sein? Trommeln Sie bitte alle? Ja ist die kurze Antwort. Sie benötigen wahrscheinlich einige Photoshop-Fähigkeiten die hauptsächlich mit Maskierung zu tun haben. Sie können ohne Adobe Illustrator auskommen, was auf diese Zeichnung von Formen zurückzuführen ist, Sie können die Grundlagen in XD erledigen, aber in Bezug auf jede gute Maskierung können Sie es in XD nicht tun und Sie benötigen Photoshop. Jetzt werden wir offensichtlich nicht darüber sprechen, wie Photoshop in diesem Kurs verwendet wird, aber wenn Sie über Photoshop-Fähigkeiten verfügen oder wahrscheinlich irgendwann mit Photoshop-Dokumenten arbeiten werden, Ich zeige Ihnen die Vor- und Nachteile der Arbeit mit PSDs und wie, wenn Sie über Photoshop-Fähigkeiten verfügen, am besten mit XD interagieren. Lassen Sie uns zuerst etwas verpflichten, PSDs zu importieren. Wenn es jemand anderes geschafft hat, hätten Sie es vielleicht geschafft. Es gibt ein paar Tricks und etwas Verrücktheit. Dies könnte sich in Zukunft selbst auslösen. XD ist ein relativ neues Produkt und die Interaktion mit PSDs beträgt derzeit keine 100 Prozent, nur Sie wissen es. Bringen wir eine PSD ein, gehen wir zum Dateiimport und lassen Sie uns etwas einbringen, das funktioniert. Ich habe in Ihren Übungsunterlagen Photoshop 01, 02, 03, 04. Bringen wir 01 ein, bringen es rein und hier ist ein riesiger PSD. Du bist wie [NOISE], also bringt es PSD-Dokumente ein. Das Coole daran, und einer der Profis ist, dass wenn man sich meine PSD anschaut, hier in Photoshop ist, du siehst, dass ich das für dich maskiert habe. Es gibt diese Ebene hier und den Hintergrund , der sie ausfüllt. Was in XD passiert ist , ist , dass es in beiden Schichten gebracht wird und ich sie beide sehen kann. Aber sieh dir das an, ich kann hineingehen, erinnere dich daran, doppelklicken und schauen, sie sind getrennt. Ich kann zu dieser Hintergrundebene gehen und sie entweder löschen, weil sie sie einbringt. Werfen wir einen Blick darauf, lasst es uns in unser Ebenenbedienfeld bringen , Sie können hier sehen, dass es meine PSD gibt, ich habe den Laptop, und ich kann entweder diese Ebene hier oder hier drüben klicken und auf Löschen klicken, damit das funktioniert. Ich habe nur meinen Laptop oder ich kann hier rüber gehen, du siehst diese kleinen Augäpfel, ich kann sagen, dass Hintergrund Augen versteckt oder versteckt ist. Das ist das Coole an der Verwendung von PSD, ist, dass Sie ein Dokument anzeigen und die Dinge nach Bedarf ein- und ausschalten. Bringen wir ihn hierher oder dorthin, er ist ziemlich groß. Bringen wir eine andere Datei mit , die einige Probleme hat. Ich gehe zur Verknüpfung Command Shift I auf einem Mac, Control Shift I auf dem PC. Lasst uns diesen 02 einbringen. Schauen wir uns das in Photoshop an. Ich öffne es hier in Photoshop. Hier ist es in Photoshop, ich habe diese oberste Ebene maskiert, und ich habe gerade diese rote Box ohne triftigen Grund im Hintergrund. [GELÄCHTER] Nur um dir zu zeigen, dass es maskiert ist. Wände auf diesem Hintergrund hier und ich habe es sehr schnell maskiert. Was in XD am Ende passiert, ist, schauen Sie sich das derzeit an. Wenn ich es reinbringe und raus gehe, los geht's. Was ist passiert? Es ist nicht mehr maskiert. Aus irgendeinem Grund weiß ich nicht, warum diese Ebenenmaske ignoriert wird. Ich kann es in ein intelligentes Objekt umwandeln wenn Sie wissen, wo das ist, das repariert es nicht. Was Sie tun können, wenn Sie diesen Punkt verstehen, sind Sie so, als wären Teile davon nicht maskiert, aber es gibt eindeutig eine Maske hier in Photoshop. Was Sie tun können, ist, dass Sie mit der rechten Maustaste auf die Maske klicken und einfach sagen, dass Sie sie anwenden. Das ist schlecht und sehr zerstörerisch, aber es wird es beheben. Ich speichere es jetzt, es nicht automatisch aktualisiert. Es ist eine Einbahnstraße, also importiere ich sie wieder. Wenn Sie Photoshop nicht kennen , müssen Sie das möglicherweise tun. Geh rein und schau, ob du die Schichten zerquetschen und alle ausgefallenen zerstörungsfreien Masken loswerden alle ausgefallenen zerstörungsfreien kannst, weil das funktioniert. Auch hier kann ich in den Hintergrund gehen und mir das anschauen, das hat tatsächlich durch die Füllung geführt. Wo ist es da, ich kann [NOISE] oder [NOISE] gehen. Manche Dinge sind echt cool und dann ist manches nur ein bisschen kaputt. Diese Dinge werden in Zukunft aktualisiert, sodass einige Ebenenmasken nicht durchkommen. Eine andere Art, mit Photoshop zu arbeiten, ist nur reines altes Kopieren und Einfügen. Ich bin jetzt in Photoshop, ich kann eine Auswahl treffen. Ich benutze nur mein Rechteck-Festzelt-Werkzeug zum Auswahlwinkel, kopiere und verwende bearbeiten, kopiere als Verknüpfung heraus, gehe zu XD und du kannst es einfügen. Solange es nicht zu komplex ist, mit kleinen Masken und Einstellungsebenen und so, kopiert und fügt es einfach ein. Das ist ein guter einfacher Weg, wenn wir Sachen von Photoshop in XD bekommen können . Nun lasst uns den offiziellen Weg machen, zumindest was meiner Meinung nach der offizielle Weg sein sollte , ist die Verwendung von Bibliotheken. Ich mache hier eine schnelle Maske. Auch hier erwarte ich nicht, dass Sie dies tun oder dies tun können, wenn Sie von dem, was wir hier tun, begeistert sind. Checkout, entweder meinen oder Photoshop-Kurs eines anderen, ich habe ein Essentials und einen Fortgeschrittenenkurs, wenn er kommt, aber ich gehe zu Select Subject , was ein süßes cooles Feature ist. und treffen Sie eine Auswahl um ihn herum. Ich füge hier unten eine Ebenenmaske hinzu. Denken Sie daran, dass wir darüber gesprochen haben dass dies ein kleines Problem ist, wenn wir uns für die Bibliotheken entscheiden , die es zu beheben scheinen. Die Bibliotheken sind eine Möglichkeit, zwischen Adobe-Anwendungen zu teilen , es ist wie Shared Libraries. Ich gehe zu Meine Bibliotheken. Es gibt meine Bibliothek für die Adobe XD-Klasse. Ich werde das schließen, um es für alle ein bisschen größer zu machen . Was ich tun werde, ist mein Auswahlwerkzeug zu greifen und einfach auf Halten zu klicken und es irgendwohin zu ziehen und hier zu enden. Da geht er, geben wir ihm einen Namen, Telefon. Wo ist er, er ist da. Denken Sie jetzt in XD daran, dass sich unsere Bibliotheken unter dem Assets-Panel oben befinden . Das ist unter, Sie müssen sich vielleicht an ein paar an der Spitze erinnern , bis Sie die XD-Klasse gefunden haben. Hier ist mein Handy, hier ist Kumpel, ich stelle sie hier hin, vielleicht ist es ein bisschen groß. [NOISE] Er ist hier, der offizielle Weg. Wir haben CC-Bibliotheken ein wenig angesprochen, wenn Sie sie noch nicht benutzt haben, sind sie großartig. Sie sind eine Möglichkeit, eine Verbindung herzustellen, weil ich das gleiche Telefon benutzen und es einfach in meine Premiere Pro Videodatei für Social-Media-Sachen werfen und es für ein Magazin-Layout in InDesign einfügen kann das gleiche Telefon benutzen und es einfach in meine Premiere Pro Videodatei für Social-Media-Sachen werfen und es für und ein Magazin-Layout in InDesign einfügen alle geteilten Vermögenswerte , die mit den Farben sagen. Das ist eine einfache Art, dies zu tun, und es behebt das Problem, dass unsere Ebene so ist. Jetzt sind ein paar Vorteile, es auf diese Weise zu verwenden, man sehen kann, wie verbunden, was kurzsichtig sein könnte, in Photoshop ist, in den ich hier hineingehen kann und es ist eine Einbahnstraße. Wenn Sie etwas aus Ihrem Photoshop hinzufügen, ist dies ein eigenes separates Element. Wenn ich das jetzt anpasse, wird das Bibliothekselement nicht angepasst. Ich werde damit fertig sein, ich bin fertig mit dir sage nicht [NOISE] Sparen Sie nicht. Aber ich kann dieses Ding öffnen, es ist mein Telefon, PSD, sie sind nicht mit dem Original verbunden und wenn ich etwas mache, werde ich es einfach umkehren, befehle ich, es ist wirklich einfach und Deaktivieren Control I auf einem PC und klicken Sie auf Speichern. Es war optisch sehr klar. Ich kann in das eingehen. Ich möchte diesen kleinen Link hier sehen, ich kann darauf doppelklicken, hier in XD, es dauert eine Weile, es hat nichts gemacht. Etwas langsam beim Update, aber es ging einfach und hat sich geändert. Das ist einer der Vorteile und wenn Sie ein InDesign oder Illustrator oder etwas anderes, Premiere Pro, verwenden, wird es natürlich ein InDesign oder Illustrator oder etwas anderes, Premiere Pro, auch aktualisiert. Der letzte, den ich Ihnen zeigen möchte, hat nicht viel [LACHEN] mit dem Design der Benutzererfahrung zu tun. Es ist nur einige der, ich denke, ich möchte einschlagen , warum Photoshop ist, ich bin ein bisschen ein Photoshop-Fan, also gibt es Alternativen für Photoshop. GIMP ist leider ein benannter und was ist der andere? Nicht Canva [NOISE] kann sich nicht an die anderen erinnern. Aber es gibt nur einige Dinge, die Photoshop spektakulär macht, ist eines der neuen. Sie können dies öffnen, wenn Sie es selbst testen möchten , weil es ziemlich cool ist. Photoshop 04. Wir werden zum Filtern gehen, und wir gehen zu Neural Filters, sie könnten den Namen ändern. Sie haben es früher geändert. Ich werde diesen namens Landscape Mixer benutzen. Es hat einen lahmen Namen, schalte ihn ein. Möglicherweise müssen Sie es herunterladen, es kann eine Weile dauern , bis Sie diese Funktion heruntergeladen haben. Es könnte hier ausgezogen sein, derzeit ist es in Beta. Es ist erstaunlich, aber es kann irgendwo im Filter landen, aber achten Sie auf Landschaftsmischer. Hier drin werde ich sagen, dass du das einfach machst, weil ich es jetzt brauche, um Winter zu sein. Ziehen Sie einfach den Winterschieber heraus, Kickback, schauen Sie sich das an, hier geht es bereit. [NOISE] Komm schon, lass uns gehen. Es lohnt sich, auf mehr Stocken zu warten. Schnitt bearbeitet, um fertig zu werden. Es wurde getan, das ist sofort. Aber sieh dir das an [NOISE]. Es hat es einfach überwintert. Ich bin mir nicht einmal sicher, ob das Teeblätter sind, aber es gab eine vage Verbindung zum Kurs. Aber sieh dir das an, kann nicht glauben, wie cool das Ding ist. Lass uns noch eins machen und dann lasse ich dich gehen. Lass uns den Sonnenuntergang machen. Ziehen wir den Sonnenuntergang nicht auf das volle Maximum nur ich möchte ein paar anpassende Bilder sehen, wie Sie versuchen, sie miteinander zu verbinden, es ist so ein Sonnenuntergang. Sieh es dir an und ich schaue mir diesen Baum an. Es wurde sommerlich und sonnenliegend. Sieh es dir an, es gibt mehr Laub auf den Bäumen. Ich habe ein Spiel mit einigen davon, öffne diesen Ordner, gehe zu den Bildern, kostenlose Bildseiten, die ich dir gezeigt habe, Unsplash und Pixel und schau es dir an. Es ist wirklich gut in Landschaften, es ist nicht so gut mit Meeresdingen wie Bio, oder es ist wirklich gut mit Bio-Sachen, nicht gut für künstliche Dinge, sondern Männer. Deshalb werden Sie wahrscheinlich immer Photoshop als Option benötigen , wenn Sie ein UX-Designer werden, insbesondere wenn Sie wirklich an dem Design auf der UI-Seite beteiligt sein möchten . Ich war super aufgeregt und ich möchte, dass du Photoshop machst. Denken Sie daran, dass ich einen Essentials- und Fortgeschrittenenkurs habe, wenn Sie sich diese ansehen möchten, aber das wird es für dieses Video sein. Wir sehen uns im nächsten. 55. Snackbar Toast mit maskierten Bildern in Adobe XD: Hallo allerseits. In diesem Video möchte ich Ihnen dieses Ding vorstellen , das ist eine Snackbar. Ich möchte Ihnen den Begriff vorstellen und Ihnen auch zeigen, wenn Sie mit maskierten Bildern arbeiten, wie Sie Hintergründe in sie bringen können und solche Dinge. Lasst uns mit diesem Video fortfahren. Erster Schritt, Snackbar. Wovon redet er? Snackbars sind die kleinen Nachrichten, die unten auf einem Telefon erscheinen , um Ihnen ein paar Informationen zu geben. hast du schon mal gesehen. Vielleicht ist diese hier eine Android-Version, die einfach unten erscheint und erklärt einfach, was los ist, wie ein kleiner Snack. Sie werden auch Toast genannt, weil sie auftauchen und wie Toast zurückgehen. Sie sind da, um Ihnen Informationen zu geben ohne den Fluss von wie Ihrem zu unterbrechen, wissen Sie. Die primäre Operation, was auch immer Sie tun, die Sache, in der Sie sich mitten darin befinden, gibt Ihnen kleine Snacks und zusätzliche Kleinigkeiten. Wir werden einen von denen erschaffen, das machen wir. Ich mache meine direkt unter der Produktdetailseite. Jetzt werden wir die Photoshop-Datei einbringen, die wir zuvor erstellt haben. Wenn Sie dazu bereit sind, können Sie Photoshop O3 durchgehen und verwenden, es maskieren, es über Ihre Bibliothek einbringen oder wenn Sie betrügen möchten, wenn Sie nicht viel Photoshop-Fähigkeiten haben, bringen Sie es einfach ein Photoshop O5 , das habe ich bereits für uns maskiert. Es ist sehr groß. Ich zögere diese in die richtige Größe zu bringen, denn ich weiß nicht, werden die, die Sie mitbringen ich weiß nicht, werden die, die Sie mitbringen, auch die falsche Größe haben. Ich bringe es rein, bringe es auf eine vernünftige Größe die du am Anfang gesehen hast. Ich schneide es in die kleine Snackbox. Meine Snackbox wird in diesem Fall wie ein Kundensupport sein. Es wird um diese Größen etwas länger gehen. Was ich jetzt machen möchte, ist, dass wir uns zuerst den Text holen, bist du genau da? Das werde ich tun. Ich werde es ein bisschen aufschlüsseln. Ein Informationstext muss nicht anklickbar sein. Meins wird es sein. Kleiner Trick für all das. Dort gibt es einen Basiswert. Aber Befehl U auf einem Mac oder Control U auf einem PC, wird unterstreichen und Befehl B, fett Control B, dort einige Grundlagen. Eigentlich funktionieren diese in jedem Programm, das jemals gemacht wurde. Ich mache das hier , ich möchte das nicht in den Hintergrund schneiden. Seltsame Dinge, die passieren, ich habe eine Maske. Zuallererst möchte ich, dass es an der Spitze ist, also klicke ich mit der rechten Maustaste darauf und bringe es nach vorne. Ich bekomme es in die richtige Größe. Denken Sie daran, dass die Rotation gerade draußen schwebt , das äußere Ding. So etwas will ich und ändere die Hintergrundfarbe. Ich mag das farblos weniger als das. [GELÄCHTER] Wie auch immer, was ich tun möchte, ist es darin zu maskieren. Ich brauche zwei Kisten. Sie könnten einfach dieses und dieses verwenden und die Make-Maske, Command Shift M oder Control Shift M oder Objekt verwenden , oder ist es eine Maske mit Form zu machen? Das Problem ist, dass die gelbe Kiste verschwunden ist, sie ist hohl. Ich kann es jetzt nicht färben, wenn ich versuche es zu färben, wird es nichts tun, [LACHEN] färben es. Was wir brauchen, sind nur zwei Kisten. Ich werde rückgängig machen und zeige Ihnen, was zu tun ist, ich kopiere diesen Befehl C, Control C auf einen PC mache dann meine Maske. Lass mich meine Abkürzung benutzen. Dann füge ich es einfach noch einmal ein. Wenn ich gerade auf einem PC auf „Command V, Control V“ klicke , stoppe ich die Verknüpfungen für die einfachen Dinge wie Bearbeiten und Kopieren von Einfügen, Deal. Ich hab das hier, es ist nur an der Spitze. Wenn ich es jetzt nach hinten verschiebe, es nur kopiert werden und weil es dort einfügt, wo es es hat , sitzt eine Schachtel nur auf der anderen. Es ist nicht ideal, aber hey **, das funktioniert. Ich ziehe sehr schnell eine geschlossene Box. Eigentlich wollte ich es beschleunigen. Ich beschleunigte es nicht. Nur ein paar Dinge. Ich füge das hinzu. Denken Sie daran, einen Kreis zu zeichnen, nur eine Erinnerung, halten Sie die Umschalttaste gedrückt, während Sie ihn herausziehen, gibt Ihnen ein völlig proportional, ich denke, ist das Wort, die Höhe und die Breite sind Ihnen ein völlig proportional, ich denke, ist das Wort, gleich. Was ich mache ein Kreuz. Versuche nicht mit dem Stiftwerkzeug zu zeichnen, dauert ewig. Verwenden Sie das Typ-Tool. Triff dein „Plus“. Ich benutze einen weißen. Ich wähle die richtige Größe und das richtige Gewicht aus. Meins hat bereits die richtige Größe und das richtige Gewicht. So etwas. Was ich gerne mache, ist es tatsächlich aus Text zu konvertieren, es ist einfach einfacher, wenn es nur eine Form ist. Denk daran, wie wir das gemacht haben. Wir gehen zu Object und gehen zu Path, konvertieren in Pfad und das haben wir getan. Ich bin mir nicht sicher, ob wir es getan haben. Da sind wir los. So wandelt man Text in eine Form um. Ich nehme beides, bringe sie genau in die Mitte und dann schaffe ich es rüber. Ich gehe zu dir, denk daran, wenn du die Umschalttaste gedrückt hältst, wird es schnappen. Mach meins ein bisschen größer. Wenn Sie feststellen, dass das nicht absolut perfekt in der Mitte liegt, ist das nur ein Problem mit wirklich kleinen Pixelgrößen in XD, dies wird im Code auf andere Weise generiert. Los geht's, das ist gut. Ich gruppiere meins. Lasst uns da oben schauen , damit wir es schließen können. Ich werde es wahrscheinlich hier zusammenfassen. Ich füge wahrscheinlich einen Schlagschatten hinzu. Da sind wir los. Schlagschatten. Ein größerer, 3 mal 3 mal 10, und macht es ein bisschen dunkler, geht einfach. Los geht's, es wird ein kleines Pop-up sein, ein kleines Toast-Ding, das auftaucht und dann wieder runter geht, aber Sie können es bei Bedarf ausschalten . Wir brauchen das für später. Wir werden ein bisschen mehr ausgefallenes Prototyping machen und ich wollte euch Masken in Masken mit dem Hintergrund zeigen . Da gehst du. Das ist es. Sie werden entlassen. Wir sehen uns im nächsten Video. 56. Kursprojekt - Bilder hinzufügen: Es ist wieder soweit. Es ist Klassenprojektzeit. Das hat mit Bildern zu tun. Ich möchte, dass Sie Bilder zum Dokument oder zumindest zu Ihrem mobilen Design hinzufügen . Ich mache mir keine Sorgen darüber , wo und wie und wie viele, es geht mehr darum, dass ich dein Design hier kontrollieren möchte. Aber wenn Sie nach Bildern suchen, entweder über kostenpflichtige Aktienbibliotheken, wenn Sie Zugriff darauf haben, oder einige der kostenlosen Dinge wie auf speziellen Pixeln, aber behalten Sie Ihre Person im Hinterkopf, wenn du wählst Bilder aus. Ist das das Richtige für diese Person, erfüllt sie meinen Auftrag? Dann möchte ich, dass du Bilder hinzufügst , als wäre hier ein guter Ort für die Bilder. Ich möchte, dass du vielleicht auch hier mit dem Hintergrundbild experimentierst . Selbst wenn Sie sich für eine Option 1 und eine Option 2 entscheiden, möchte ich, dass Sie die Bilder verwischen und ich möchte auch, dass Sie zwei Seiten für mich erstellen, die Bestätigungsseite, die nur eine Karte ist im Hintergrund kannst du deinen eigenen Screenshot machen. Das ist in der Nähe, wo ich wohne. Sie können jedoch entscheiden, dass Sie eine Karte davon erstellen, wo Sie oder zumindest Ihr Brief eingestellt sind, und dann diese verschwommene Bestätigung des oberen Teils hinzufügen. Genau wie du es machst, es ist nicht wichtig. Es ist eher nur damit zu üben. Ich möchte auch, dass du diese Snackbar hinzufügst. Ich möchte, dass du es entweder mit den Bildern machst ich dir gegeben habe, oder wenn du es füllst, dein eigenes Bild findest, es ausmaskiere lege es hier unten ab. muss keine Frage gestellt werden, so etwas wie eine Popup-Benachrichtigung, vielleicht ein wussten Sie, oder ein Verkauf, der läuft, so etwas, weil wir dazu führen werden animiere das später. Fügen Sie alle Bilder hinzu, erstellen Sie die Snackbar und fügen Sie die Karte und das Dialogfeld Ihrer Bestätigungsseite hinzu und laden Sie sie dann hoch. Es fängt an, an einen Punkt zu kommen, an dem ich es kaum erwarten kann zu sehen, was du getan hast. Ich möchte es auf Instagram, Twitter und unserer Facebook-Gruppe oder unserer LinkedIn-Gruppe sehen . Laden Sie es auch in den Aufgabenbereich dieser Website hoch. Das sind deine Hausaufgaben. Machen Sie es, um ein paar Bilder zu finden und lassen Sie Ihr Design zum Leben erwecken. Das ist es. Wir sehen uns im nächsten Video. 57. So machst und verwendest du Komponenten in Adobe XD: Hallo allerseits. In diesem Video werden wir uns ansehen, wie man Komponenten in Adobe XD erstellt. Lass mich dir schnell zeigen, was sie tun. Ich kann diesen anpassen, der als Hauptkomponente bezeichnet wird, und alle seine Kumpels hier sehen zu. Sie sind alle verbunden, also können Sie eine Sache einmal machen und alle kommen zur Fahrt mit. Das bedeutet, dass Sie an vielen verschiedenen Art-Boards arbeiten können , die perfekt für dieses Top-Navigationsgerät sind, eines anpassen und alle fließen zusammen und passen sich auch an. Das ist im Grunde das, was eine Komponente tut. Lass mich dir zeigen, wie man einen macht. Lasst uns eine Komponente erstellen. Lassen Sie uns zunächst alle Komponenten klären , die Sie haben. Gehen wir zu unserem Assets-Panel und vielleicht haben Sie Charakterstile nach unten gedreht. Ich möchte, dass du einfach auf den Chevron klickst, um ihn aufzuräumen. Unter Komponenten haben Sie möglicherweise bereits einen Haufen Müll. Wenn Sie kopieren und einfügen, haben wir dies früher im Kurs gemacht. Denk daran, dass ich gesagt habe, wenn du Sachen kopierst und einfügst, könnte es diese Komponenten hier durchbringen. Wir heben die Gruppierung einfach auf und machten weiter. Jetzt werden wir tatsächlich richtig verstehen , was sie sind, und wenn Sie bereits Sachen drin haben, bedeutet das nur, dass Sie sie aus anderen Dokumenten kopiert und eingefügt haben , also löschen Sie diese raus. Sie klicken einfach mit der rechten Maustaste darauf und löschen sie alle. Wählen Sie sie aus und klicken Sie auf Ihrer Tastatur auf Löschen, löschen Sie die Komponenten. Wenn Ihre Ansicht anders aussieht als meine, war ich den ganzen Kurs auf der Listenansicht . Sie könnten einige Charakterstile durchgehen. Sie waren vielleicht dieser Ansicht und sie sah ganz anders aus als meine. Ich bin aus irgendeinem Grund gerne in der Listenansicht. Überlassen Sie, aber ich werde in der Listenansicht sein, macht es einfacher, sie umzubenennen. Lassen Sie uns die Komponenten verstehen, indem Sie eine erstellen, wählen Sie das gesamte Top-Navigationsgerät aus. Ich mache es auf dieser anderen Seite. Es spielt keine Rolle, was Sie in eine Komponente verwandeln. Ich werde all diese kleinen Dinge hier auswählen, und Sie können entweder mit der rechten Maustaste darauf klicken und Komponente erstellen sagen, die Verknüpfung Command K oder Control K auf einem PC verwenden. Es ist wirklich üblich, also hat es eine wirklich übliche Abkürzung. Unter Object ist das gleiche Sprichwort, wo ist es? Da ist es da, Bauteil erstellen. Woher weiß ich das? Wenn ich es rückgängig mache, kannst du sehen, dass es diesen blauen Rand hat und wenn ich meinen Command K oder Control K auf einem PC drücke , wird es grün? Deshalb weiß ich, dass es eine Komponente ist. Das ist einer der visuellen Hinweise. Es erschien in meiner Komponentenbibliothek. Es erscheint auch in Ihren Ebenen. Sie können es dort sehen, Komponente, also erscheint es auf verschiedene Arten. Benennen wir es um. Es ist viel einfacher, wenn Sie diese kleine Option hier oben auf der Liste ansehen, und Sie doppelklicken einfach auf das Wort, und wir werden dieses Top Nav nennen. Sie können es als Komponente 1 belassen. Es ist nichts falsch daran, außer dass Sie von anderen Designern beurteilt werden , dass Sie schlampige Layer-Benennung haben. Aber wenn ich ehrlich bin und wir alle ehrlich sind, hat jeder Komponente 57 in seiner Liste. Aber für heute heißen wir sehr schön Top Nav. Was ist an Komponenten so nützlich? Lass mich es dir zeigen. Ich habe das hier, ich kopiere es und füge es in diesen ein und füge es vielleicht auch in diesen ein. Der Unterschied zwischen diesem ersten besteht vor allem darin, dass Sie sehen können, dass Sie hier die Hauptkomponente oder unsere erste oder das Elternteil oder die primäre Komponente genannt Hauptkomponente oder unsere erste oder werden. Das technische Wort ist die Hauptkomponente. Was ist der Unterschied zwischen ihm und diesem? Sind die visuellen Unterschiede. Kannst du den dicken grünen Diamanten sehen? Siehst du den Kerl? Er hat einen leeren Diamanten, also ist dies der Hauptdiamant, der Instanz bezeichnet wird. Du bist der Boss, du folgst dem, was der Chef sagt, Eltern-Kind. Was cool daran ist, ist, dass ich mir das erste schnappen kann und herauszoomen werde , damit wir alle drei sehen können. Ich kann drauf eingehen. Weißt du noch, wie ich in diese Dinge hineingehe ? Ich kann darauf doppelklicken. Los geht's und schnappen uns das und schauen uns das an und los geht's. Kannst du sehen, wie sie sich alle bewegen? Hey, komm schon, das ist der Grund, warum Komponenten wirklich gut sind, dass du eine Sache tun kannst, es kann über 100 verschiedene Kunsttafeln gehen und du kannst es steuern, indem du die Hauptkomponente. Hier geht's, was viele Leute tun werden , ist, dass sie das Hauptteil hier drüben auf der Pasteboard oder auf einer anderen Kunsttafel behalten , nur etwas aus dem eigentlichen Fluss, und behalten alle ihre Hauptkomponenten zusammen, und dann kopieren sie die Instanz und fügen sie ein. Wenn du eine andere Instanz von diesen Jungs kopierst, wird es einfach weiterhin Duplikate dieser Hauptinstanz erstellen. Es bedeutet nur, dass Sie nicht versuchen herauszufinden, wo zum Teufel der Hauptteil [LACHEN] war auf welcher Kunsttafel Sie es erstellt haben. Du hast einen zentralen Ort. Es bedeutet, dass man hier oben sagen kann, dass ich das durchziehen möchte . Sieh dir das an. So erstellt man eine Komponente. Es kann manchmal ein bisschen schmerzhaft sein, wenn Sie es lösen möchten. Sie können einfach mit der rechten Maustaste klicken und sagen, Sie sind Gruppierungskomponente aufheben, und es wird sie jetzt einfach auseinander brechen. Wenn ich das jetzt anpasse, ist der Typ wieder so, als wäre er wieder sein eigener Boss, er ist ein einsamer Ranger. Er kann tun, was er will. So wird eine Komponente erstellt. Ich komme aus der Zukunft zurück. Später im Kurs denke ich, hey, das sollte ich wahrscheinlich früher erwähnen. Ich werde Ihnen eine Kleinigkeit über Komponenten zeigen , ist , dass wir später im Kurs einen Kippschalter zeichnen, und hier denke ich, hey, ich sollte es ihnen wahrscheinlich sagen. Wir machen diesen kleinen Kippschalter. Es ist Rechteck, abgerundete Ecken. Du klickst darauf und es bewegt sich hierher. Es wird Spaß machen, bleib dran. Aber was passiert ist, sagen wir, ich habe das, ich bekomme meine Farbe in deiner Farbe. Wenn ich beide auswähle und die Umschalttaste gedrückt halte und skaliere, skaliert es gut. Wenn ich jedoch ein Duplikat erstelle und es gruppiere und skaliere, funktioniert es einwandfrei. Aber wenn ich es zu einer Komponente mache und genau das Gleiche [LACHEN], so dass es dieses Ding anwendet, das Responsive Design genannt wird , und es versucht, alles sehr clever zu sein. Weil es clever ist, wenn du das machst, sieh zu, das ist wirklich cool, wenn du einen Knopf machst, du willst es länger machen, aber wenn du etwas ändern willst, bist du wie ich einfach will es kleiner machen , kann es dir nicht immer Ärger bereiten. Was Sie tun können, ist einfach die reaktionsschnelle Größenänderung zu deaktivieren und dann Ihre Magie zu bearbeiten. werde das Ganze einfach nicht so machen wie zuvor. Gerade von alleine erweitert. Sie können es jedoch ein- und ausschalten, schauen Sie sich das an. Ich schaffe es sehr klein. Schalte das wieder an und mach das ausgefallene Ding. Das ist ein Wort aus dem zukünftigen Dan. Lass mich dir zeigen, was wir machen, es hat sich hier unten versteckt, ich dachte, lass uns es dir zeigen. Sieh dir diesen Kippschalter an. Schau, wie weit wir haben [GELÄCHTER] Es ist später im Kurs, also bleib hier. Sieh dir diesen Kippschalter an. Sieh dir das an. Es ist in der Mikro-Interaktion im Kurs. Das ist der zukünftige Dan, der zurückkommt, um Ihnen bei der reaktionsschnellen Größenänderung zu helfen . Im Moment kommen wir jedoch wieder zur Komponentenerstellung zurück. gibt es noch mehr zu zeigen Im nächsten Video gibt es noch mehr zu zeigen , wir sehen uns dort. PS, sag der nächsten Version von Dan im nächsten Video nicht , dass ich hier war. Deal. Mach weiter. 58. Differenz zwischen Haupt- und & in Adobe XD: Hi, allerseits. In diesem Video werden wir unsere Komponenten auf die nächste Stufe bringen. Offensichtlich ist die nächste Stufe Brush Script [LAUGHTER] als Schriftart, bedeutet aber auch, dass ich diese einzigartigen Instanzen mit sogenannten Overrides haben kann . Das bedeutet, dass sie verschiedene Farben haben können, verschiedene Größen haben, unterschiedlichen Text darin haben, und ich kann hier reingehen und sagen, dass ich immer noch etwas davon mit meiner Hauptkomponente steuern möchte . Du bist bereit für eine entzückende Schrift. Da sind wir los. Sie werden alle aktualisiert, aber Sie können sehen, dass der Text immer noch eindeutig ist. Dieser sagt „Jetzt kaufen“, diesem steht immer noch Learn More, aber sie werden von dieser Hauptkomponente etwas kontrolliert. Lasst uns für unsere Comic Sans Extravaganz einsteigen. Wir fangen hier mit diesem Button an. Ich kopiere sie einfach und füge sie ein und verschiebe sie dann nur weil hierher. Da geht es. Ich möchte nur einen einfachen Knopf machen, los geht's. Ich fange damit an. [GELÄCHTER] Es ist jetzt perfekt. Ich hab diesen Knopf. Es wäre ein großartiger Anwärter auf eine Komponente. Ja, weil ich das mehrmals benutzen möchte. Ich werde sowohl den Text als auch den Hintergrund auswählen, nun, mein kleines Schaltflächenrechteck. Ich wähle beide aus. Vielleicht ein Command K oder Control K, und jetzt ist es eine Komponente. Jetzt sollte ich es nennen. Wenn du Dinge wie Buttons benennst, wäre es sehr üblich. Sie möchten es nicht „Jetzt kaufen“ [NOISE] nennen da wir diesen Button tatsächlich für viele verschiedene Wörter verwenden werden. Es wäre die Schaltfläche „Jetzt kaufen“, es wird die Schaltfläche „Mehr erfahren“ sein, es wird die Schaltfläche „ Mein Konto löschen“ sein. Was ich tun würde, ist, dass ich sagen würde, dass es ein Knopf ist, und das wird mein mittlerer sein , weil ich später einen kleinen und einen großen Knopf haben möchte. Das war's. Das wirst du oft sehen. Es wird ein BTN Unterstrich von MED vielleicht Primär, weil es Ihre Grundfarbe sein könnte. Es gibt keine offizielle Regel. Ich weiß nicht warum. Ich mag Button und ich mag Bindestriche, und ich mag es, dass es Medium genannt wird. [NOISE] Aber du kannst alles cody Sprache machen, wenn du das vorziehst, und du wirst beides sehen. Ich werde es im Moment ziemlich vage halten und wir werden über einige der anderen Dinge sprechen , die Sie tun können. Wir haben einen Namen, wir haben einen Knopf. Machen wir zwei davon. Denken Sie daran, dass die oberste hier unser Haupt genannt wird und dies ist eine Instanz des Hauptbestandes. Machen wir tatsächlich drei davon. Jeder hat drei für mich. Diesen hier wissen wir, dass wir sie alle anpassen können, wenn ich diesen oberen Teil durch Doppelklick darauf anpasse. Wenn ich den Text auf dem Master anpasse, ist dies jetzt meine Schaltfläche „Mehr erfahren“. Ich sollte meinen Text wahrscheinlich zentrieren und in die Mitte verschieben . Wenn ich Textänderungen für mein Löschen vornehme, passt es sich zumindest links und rechts perfekt an. Das ist die zentrale Option für den Text. Was wir tun können, ist, dass wir dies als „Jetzt kaufen“ belassen können. Jetzt lasse ich es als Learn More zentriert. Was wir tun können, sind diese Instanzen wir tatsächlich ändern möchten. Du sagst: „Nun, ich möchte nicht, dass sie alle mehr lernen, weil du am Ende einen Button namens Button „Mehr erfahren“, Button Jetzt kaufen, alles knöpfen, Ts & Cs.“ Was Sie tun können, ist, dass diese Instanzen angepasst werden können. Der Code überschreibt. Das bedeutet, dass ich sagen kann, dass dies mein Buy Now ist. Dies kann mein Clear Button oder mein Lösch-Button oder etwas anderes sein. Das Coole daran ist, sieh dir das an, dieser Meister, er kann alles kontrollieren, was hier unten nicht angepasst wurde. Sieh dir das an. Lassen Sie uns noch eine davon erstellen. Da sind wir los. Wird das Sinn ergeben? Hoffentlich tut es das. Sie können die Texte in diesen Instanzen anpassen , um sie einzigartig zu machen. Sie können dort unsere kleine Option sehen, anpassen, das kleine Ding sehen? Er hat ein paar Überschreibungen. Alles, was Sie geändert haben, gilt als Überschreibung für den Master. Dinge, die Sie nicht geändert haben, wie die Position oder die Hintergrundfarbe, das haben wir in allen nicht geändert. Sieh dir das an. Wenn ich die Hintergrundfarbe ändere indem ich darauf doppelklicke, um reinzugehen, kannst du sagen, dass du tatsächlich diese andere Farbe bist und sie alle ändern sich. Aber wenn ich rückgängig mache, wenn ich diesen „Jetzt kaufen “ -Button sage, gehe ich hinein und überschreibe es und sage : „Hey, du bist nicht der Chef von mir, ich werde diese Farbe haben. Nein diese Farbe, ich werde diese Farbe haben.“ [GELÄCHTER] Dieser Typ, unser kleiner einsamer Ranger, wurde übersteuert. Wenn ich jetzt zu diesem Meister gehe und sage: „Hey, ich möchte, dass alle grün sind.“ Es gibt Grün. Siehst du? Alles passt sich an. Es wurde nicht geändert. Wir haben den Hintergrund bei diesem oder jenem nicht geändert , aber dieser Typ, wir sagten: „Hey, sei etwas anderes“, haben wir nicht übersteuert. Das sind einige der mächtigen Teile davon. Wir können eine Reihe von Schaltflächen haben, die anders aussehen, aber von dieser einen Primär- oder Hauptschaltfläche gesteuert werden . Ergibt das einen Sinn? Dieser Text begann als „Mehr erfahren“, dann haben wir ihn in „Jetzt kaufen“ geändert, und wir haben diesen in Clear geändert. Das sind Überschreibungen. Aber dieser Typ sogenannte Learn More, was ist, wenn ich das in Button ändere? Verstehst du was ich meine? Alles, was nicht geändert wurde, wird immer noch außer Kraft gesetzt. Alles, was Sie geändert haben, wie diese beiden Jungs, wird versuchen für immer und ihren neuen Stil festzuhalten. Sie können am Ende alles überschreiben, aber es ist eine großartige Möglichkeit, einen generischen Button zu haben, der herauskommt. Sie können sie tatsächlich hier rausziehen anstatt nur ihren Meister zu duplizieren , anstatt nur ihren Meister zu duplizieren und zu sagen: „Eigentlich möchte ich, dass dieser Typ diese andere Farbe hat, und ich möchte, dass der Text etwas sichtbareres ist.“ Aber hab etwas Kontrolle. Ich kann darauf eingehen und sagen : „Du wirst jetzt 10 Pixel um die Ecken haben.“ Alles, was in Bezug auf die Kurven nicht geändert wurde in Bezug auf die Kurven nicht geändert , kommt zur Fahrt. Das ist der Unterschied zwischen Haupt- und Instanzen. Sie können leicht angepasst werden, um sie individuell zu gestalten , haben jedoch eine allgemeine Hauptkontrolle. Hat das funktioniert? Wenn das funktioniert hat, okay. [GELÄCHTER] Lass uns noch eins machen. auch im Moment Wenn ich auch im Moment [NOISE] gehe, schau dir das an. Wenn ich Option auf meinem Mac oder auf einem PC gedrückt halte, ergreife ich nur den Rand davon, es heraus, schau dir das an, wir können die Größe anpassen. [NOISE] Aber was ist, wenn ich zu diesem Kerl gehe? Das ist unser Rebell. Das ist der Typ, der alles alleine machen will. Wenn ich sage: „Ich werde eigentlich dieser riesige Knopf sein , bist du nicht der Chef von mir.“ Aber dieser eine Meister sagt : „Hey, sei eine andere Größe.“ Sieh mal? Overrides arbeiten an allen möglichen Dingen. Alles, was Sie sich vorstellen können, können Sie überschreiben und es ignoriert die Änderungen, die mit dem Master geschehen. Nur um den Punkt zu beweisen, gehe ich zu diesem und sage, du bist Comic Sans und lebst das Leben am Rande. Dieser hier geht zu diesem, und ich werde sagen: „Auf keinen Fall, ich werde Impact sein.“ [GELÄCHTER] Zwei meiner verhassten Schriften. Dies wird sich ändern, mit Ausnahme derjenigen , der die Überschreibung hat, aber es wird praktisch. Dies ist ein großes Beispiel für all die verschiedenen Bits. Wo es ziemlich praktisch wird, ist hier oben. Sieh dir das an. Ich hab diese Navigation. Das war die Navigation , die ich gemacht habe. Denken Sie daran, wenn ich rückgängig mache oder verkleinere, wenn ich den Master ändere , den ich hier oben habe, haben Sie ihn vielleicht woanders. Denken Sie daran, wenn ich den Master ändere, ändern sich alle. Aber dieser ändert sich nicht. Du sagst: „Nun, muss ich zwei Navigationen haben?“ Nein, weil du denkst : „Wir könnten das machen, was du mit dem Knopf gemacht hast “, wo wir es einfach anpassen. Diese hier werde ich löschen , du gehst weg. Ich benutze eine Instanz. Es spielt keine Rolle, ob Sie diesen duplizieren, dieses duplizieren oder hier rausziehen. Nicht das, wo ist es? Top Nav, es spielt keine Rolle. Es ist ein Beispiel und nichts hat sich daran geändert, weil es den langweiligen, alten, weißen Diamanten hat , aber es hat die falsche Farbe. Was ich jetzt tun kann, ist , sich damit zu befassen und tatsächlich darauf einzugehen und zu sagen : „Du bist jetzt eine Schriftfarbe von Weiß, : „Du bist jetzt eine Schriftfarbe von Weiß, und du wirst eine Füllfarbe von Weiß haben.“ Warte da. Ich werde das beschleunigen. Da gehst du. Hier ist ein Beispiel davon. Es bedeutet nur, dass ich dort immer noch in unseren Master gehen und Anpassungen vornehmen kann und viele verschiedene Versionen davon habe, einen Lichtmodus und einen dunklen Modus. Es ist nur eine einfache Änderung, aber Sie können jetzt hoffentlich die Macht sehen. Komponenten sind großartig. Ein paar Dinge, wie du vielleicht meinst, dieser Typ hier unten hat ein bisschen zu viel Macht. Er glaubt, er kann von niemandem kontrolliert werden und wir müssen ihn wieder einholen. Ich bin mir nicht sicher wo [LACHEN] ich hier mit meinem Chef und der untergeordneten Analogie hingehe , aber hey, wir sind so weit gekommen. Was Sie tun können, ist, dass Sie mit der rechten Maustaste darauf klicken und sagen können : „Lassen Sie uns Sie einfach wieder in den Hauptzustand zurücksetzen.“ Jetzt schau wer ist der Boss? Du kannst zurückgehen, wenn nötig. Mach vielleicht etwas Seltsames und du sagst : „Warum passt es sich nicht im Vergleich zum Hauptteil an?“ Du könntest das machen und es wieder neu einstellen. Du entscheidest vielleicht das Gegenteil und du sagst: „Ich will nicht“. Da sich in dem Moment, in dem sich die Positionierung ändert, sagen Sie : „Nein, ich möchte nicht mehr, dass dies eine Instanz ist. Ich möchte überhaupt nicht, dass es verbunden ist.“ Vielleicht ist es der Anfang eines neuen Buttons oder etwas anderes. Sie können hier mit der rechten Maustaste darauf klicken und sagen, es heißt nicht trennen oder irgendetwas, es heißt nur Gruppierungskomponente aufheben. Erinnern Sie sich an den Kurs, an dem ich Sie dazu gebracht habe, es zu tun, als wir die UI-Kits anderer Leute kopiert und eingefügt haben? Wir haben das gerade gemacht. Deswegen. Wir haben es gerade kaputt gemacht, also ist es nicht mit dem Dokument eines anderen verbunden , dem Knopf eines anderen. Dies ist jetzt nur ein regulärer Rollenknopf allein, der sein eigenes Ding macht. Er könnte jetzt seine eigene Komponente werden. Wir können ihn zu einer Komponente machen und er könnte [NOISE] Button Large sein und er könnte seine eigenen Instanzen oder Kinder haben. Da gehst du. Er ist jetzt der Boss seines eigenen kleinen Clans. Andere Dinge, die nützlich sind, haben im Moment eine ziemlich kleine Gruppe von Komponenten. Später haben Sie vielleicht Hunderte hier, wenn es sich um ein großes UI-Projekt handelt, an dem Sie arbeiten. Aber es wird Zeiten geben, in denen wir eigentlich sagen : „Dieser Knopf, wo ist das?“ Du kannst darüber schweben. Siehst du, dass es drei Fälle davon gibt? Es gibt vier Fälle von diesem? Davon gibt es fünf? Du sagst : „Wo wird dieser Button benutzt?“ Du bist dir nicht mal sicher. Lass uns hier rüber gehen. Rechtsklick darauf. Sie können Highlight auf Leinwand sagen. Das funktioniert nicht [LACHEN] es sei denn, du bist den ganzen Weg rausgezoomt. Es hat es hervorgehoben. Wer erinnert sich an die Abkürzung zum Verkleinern, um alle Kunsttafeln zu sehen, alles, was vor sich geht? Das stimmt. Befehl 0 auf einem Mac, steuere 0 auf einem PC. Da gehst du. Du kannst ihn sehen, er ist da unten hervorgehoben. Es ist nicht sehr nützlich, aber wir haben uns entschieden, den Button Large zu machen und Ausschau zu halten. Es ist da drüben. Gehen wir zu Highlight on canvas, es ist dort drüben hervorgehoben. Aber du sagst : „Das ist nicht nützlich.“ Aber denken Sie daran, dass Sie die Dinge vergrößern können , die Sie ausgewählt haben. Du sagst: „Das stimmt. Befehl oder Steuerung 3.“ Nein, zwei, nein, drei. [GELÄCHTER] Das funktioniert nicht wenn Sie mehr als einen ausgewählt haben. Wo ist es? Da gehst du. Es wählt sie nicht wirklich so aus. Ich lüge. Das nehme ich zurück. Sie können 3 nicht zum Vergrößern befehlen. Du hast mich wie einen Narren aussehen lassen, XD. Das nächste, was ich dir zeigen wollte, ist diese hier, Hauptkomponente bearbeiten. Es könnte eine Zeit geben, in der Sie sagen : „Ich habe dieses Ding hier gemacht“, und Sie haben keine Ahnung, wo die Hauptkomponente ist. Ich weiß, dass es da ist. Mit dem kleinen Diamanten würdest du sagen: „Ich weiß, dass es da oben ist.“ Aber hier unten, wochenlang an dem Projekt eines anderen arbeitest, sagst du: „Es ist die Instanz. Aber wo ist der wichtigste?“ Ich kann sagen, entweder klicken Sie hier und gehen Sie entweder Hauptkomponente bearbeiten oder hier drüben, dasselbe, Hauptkomponente bearbeiten und was es tun wird, es sollte darauf springen. He. Was passiert, wenn ich es lösche? Wow, [LACHEN] was würde passieren, wenn du es löschst? Das scheint unwiederbringlich zu sein. Aber XD macht etwas Ausgefallenes, wo Sie mit der rechten Maustaste klicken, auch wenn es weg ist und es überhaupt nicht in Ihrem Dokument enthalten ist. Das ist eine großartige Möglichkeit, die Dinge ordentlich zu halten. Sie können die Komponente weiterhin bearbeiten. Was es tun wird, ist es einfach zu öffnen und es für dich auf die Seite zu legen. [NOISE] Es war vorher nicht da unten, es ging einfach hier ist der Raum und öffnete ihn und warf ihn einfach da drauf. Sie haben jetzt eine Hauptkomponente. Wenn Sie mit Dokumenten anderer Personen arbeiten, stellen Sie möglicherweise fest, dass es keine Hauptkomponente gibt. Dieser hier wird gelöscht. Du würdest sagen: „Wo ist dieses Ding?“ Gehen Sie zu Hauptkomponente bearbeiten und es wird sie einfach irgendwo in Ihr Dokument werfen und Sie dorthin bringen. Du würdest sagen : „Ja, da ist er.“ Jetzt kann ich meine Anpassungen durchmachen und vornehmen. Aber er muss nicht da sein, nur damit du es weißt. Eine letzte Sache ist, dass Sie vielleicht sagen : „Welches ist das eigentlich in meinem Komponenten-Panel?“ Ich werde es schließen, während es ziemlich einfach ist , weil es optisch ganz anders ist , aber Sie werden am Ende viele Knöpfe haben, aus der Ferne gleich aussehen und es ist schwer zu sagen Größe von ihnen in den winzig winzigen Komponenten für dich. Du kannst mit der rechten Maustaste auf einen dieser Typen klicken. Manchmal klickst du im Hintergrund mit deinem Auswahlwerkzeug aus. Wählen Sie es einmal aus und klicken Sie mit der rechten Maustaste Es gibt eine, die im Assets-Panel „ Komponente anzeigen“ sagt. Es wird es enthüllen , sieh es dir an. Es öffnete es und hob es hervor. Du weißt, dass dies die Person ist , die diese kontrolliert. Wir sind mit den Komponenten ein bisschen weiter gekommen die Haupt - und Instanzen angesehen. Der wirklich große Vorteil ist , dass Sie Überschreibungen vornehmen oder kleine Änderungen an den Instanzen vornehmen können Überschreibungen vornehmen oder kleine Änderungen an den Instanzen während Sie immer noch einen Großteil der Kontrolle von der Hauptkomponente behalten . Das ist es. Wir sehen uns im nächsten Video. 59. So erstellst du component in XD: Hallo mein Freund, sieh dir das an. Die Schaltfläche hat einen Hover-Status. Sieh dir das an. Ich mache nichts, rollt einfach um. Es ist einer der anderen Vorteile für Komponenten. Lassen Sie mich Ihnen eine langweiligere Option zeigen. Los geht's, schau dir meine Optionsfelder an. Schau dir das an, aufregend ein Kontinuum in einer Vorschau ein- und ausschalten. Sie werden Komponentenzustände genannt, und ich zeige Ihnen, wie Sie diese jetzt in XD erstellen können. Bevor wir anfangen, nur damit du es weißt, bin ich gegangen und habe all die Knöpfe aufgeräumt, die ich hatte. Überall Knöpfe. Was ich getan habe, ist, dass ich nur einen neuen Button erstellt habe. Es ist keine Komponente, es ist nichts. Es ist nur ein Rechteck mit etwas Text in der Mitte und ich wähle meine Unternehmensschrift bringe sie, aber auch die Schriftpolizei kam und es waren harte Worte. Wir haben uns ein bisschen Schriftart ausgesucht. Um unseren Staat zu erstellen, müssen wir ihn zuerst auswählen und wie zuvor zu einer Komponente machen . Ein Befehl K auf Mac, Steuerung K auf einem PC. In diesem Fall werden wir an unserem Meister arbeiten. Es funktioniert nicht, wenn Sie versuchen, Status in der Instanz zu erstellen. Denken Sie daran, wenn Sie an der Instanz gearbeitet haben, müssen Sie mit der rechten Maustaste darauf klicken und sagen : „Lassen Sie uns die Hauptkomponente bearbeiten“ sagen, und sie sollte Sie zu dieser Hauptkomponente führen. lösche ich. Ich bin in den wichtigsten, es hat den Diamanten. Hier drüben gibt es dieses Ding. Sobald Sie es zu einer Komponente erstellt haben, gibt es diese. Ich bin in der Hauptkomponente. Dies ist der Standardstatus. Was wir tun können, ist, dass wir einen Status hinzufügen können , und wir werden diesen Hover von Anfang an hinzufügen. Schweben Sie. Wir werden nichts anderes tun und nichts wird funktionieren. Wir haben Standardstatus, Hover-Status. Möglicherweise müssen Sie abklicken und auf „Zurück“ klicken. Das muss nur anders sein. Wenn ich auf „Hover State“ klicke, damit es hervorgehoben ist, kann ich Doppelklick sagen, um hineinzugehen. Ich kann sagen, dass du meine dunklere Version davon sein wirst. Klicken Sie auf der Außenseite wieder heraus und klicken Sie wieder darauf. Jetzt sieh dir das an. Ich habe einen Standardstatus und einen Hover-Status. Ich muss sonst nichts tun. Fangen wir an, uns in einem Standardstatus zu befinden, und lassen Sie uns dann eine Vorschau anzeigen. Eigentlich muss das auf einer meiner Zeichenflächen liegen. Ich setze sie auf welche? Lasst uns auf meiner Homepage sein. Ich bringe sie hier runter. Ich klicke auf den Namen. Lassen Sie uns eine Vorschau dieses sehen und da ist es da. Bist du bereit? Ich habe eine Farbe ausgesucht , die du nicht sehen kannst, sie funktioniert. Um es als Status zu erreichen, klicken Sie einfach einmal darauf. Hier drüben kann man sagen : „Wähle diese Farbe nicht aus, weil du sie nicht sehen kannst.“ Ich doppelklicke darauf, um in diese kleine Gruppe zu gelangen , und ich sage: „Wähle diese Farbe nicht aus. Das benutzen wir. Lass uns ein Superschwarz machen.“ Gehen wir nun zurück zu unserer Vorschau. Denken Sie daran , dass es standardmäßig auf die oberste Version in meinem Flow verwendet wird, es sei denn, Sie klicken hier auf den Namen oben. Lass es uns spielen und schauen uns das an. Nichts passiert. Weitere Probleme. Dies ist ein Problem, auf das Sie stoßen werden. Ich schließe das ab. Was passiert ist, dass es sich an das Letzte erinnern wird , was ich hier geklickt habe. Sie müssen sich im Standardstatus befinden. Was auch immer Sie ausgewählt haben, wird derjenige sein, zu dem es wechselt oder in der Vorschau angezeigt wird. Ich werde im Standardzustand sein, dann eine Vorschau anzeigen, und jetzt funktioniert der Hover. Wow. Ich habe es schwieriger gemacht, als es sein sollte. Aber so macht man einen Schwebezustand. Es ist wirklich einfach. Hover-Status ist einer der Standardstatus. Denken Sie nur daran, dass Sie, wenn Sie mit der Arbeit am Hover-Status fertig sind, zur Standardeinstellung zurückkehren und dann abklicken , damit er sich an diesen Zustand dort erinnert. Der andere wirklich verbreitete Zustand ist der Umschaltstatus. Ich mache es für diese Seite hier, klicke auf den Namen Command oder Control 3, um zu vergrößern. Es werden diese kleinen Optionsfelder hier sein. Ich zoome hinein. Wenn Sie keinen davon gemacht haben, müssen Sie nur zwei Kreise zeichnen. Ich wähle beides und ich mache meine hier drüben. Dies hier ist nur ein Kreis mit einer Füllung auf einem Kreis mit einem Strich um die Außenseite. Ich wähle beide aus. Wir können unseren Befehl K oder Control K verwenden, oder manchmal klicke ich zufällig auf diesen Button, macht das Gleiche. Komponenten-plus. Es hat mir das Gleiche gegeben, habe meine kleine Hauptkomponente bekommen. Was ich tun möchte, ist, dass ich einen anderen Status will, und dies ist der andere Standardstatus namens Toggle. Anstatt es Toggle zu nennen, werde ich es abschalten, weil Toggle nicht viel Sinn ergibt. Was ich will, ist der Standardstatus, damit es vielleicht - und dann auf dem Aus-Schalter ist. Ich möchte hier reingehen und du kannst es löschen und es wird in diesem Fall funktionieren aber es ist tatsächlich auch ein bisschen Übung. Anstatt es zu löschen, drehen Sie einfach die Deckkraft für das, was Sie verschwinden möchten. Es bedeutet nur, dass später, wenn Sie komplexere Zustände geraten, Löschen zu zukünftigen Problemen führt, während das Verringern der Deckkraft später bedeutet , dass Sie sie bei Bedarf wieder aufdrehen können. Vertrauen Sie mir, es ist einfacher, die Deckkraft zu senken. Ich habe zwei Staaten. Ich habe den Default und den Off-State. Sie entscheiden, auf welche Weise es sich erinnern soll, indem Sie welche auswählen, wie im Hover-Status der Schaltfläche. Dies ist der Zustand, auf den ich möchte, dass er standardmäßig ist. Ich werde das los und ersetze ihn. Lassen Sie uns eine Vorschau geben. Es ist auf der Seite. Sie müssen auf die Seite klicken um die Seite auszuwählen, oder nur ein Objekt auf der Seite, und klicken „Play“ und es wird wissen , welche Seite Sie meinen. Du siehst das. Sieh dir das an. Der Standardwert ist dies. Da gehst du. Standardmäßig umschalten, können Sie das Fade sehen? Es ist nicht wirklich das, was ich will. Das werden wir auch anpassen. Bevor wir das tun, können Sie dies eigentlich einfach dafür verwenden, es ist möglicherweise nicht für Prototyping oder Animation, Sie haben nur einen Knopf und Sie haben ihn benutzt. Es könnte ein Häkchen wie ein Häkchen sein. Du benutzt einen Haufen von ihnen. Dann anstatt zu animieren oder so, gehst du einfach, ich möchte, dass dieser aus ist und dieser ausgeschaltet ist und dieser wird eingeschaltet sein. Das ist alles, was du benutzt, um nur eine Einheit zu haben. Sie können kopieren und einfügen und dann - und ausschalten und zurückschalten. Zurück zur Animation gefällt uns das kleine Fade nicht. Der Grund dafür, dass Sie, wenn wir den Toggle-Zustand hinzugefügt haben, im Grunde genommen das Richten selbst einstellen und es war ein bisschen schmerzhaft in der Schaltfläche. Aber was es jetzt macht ist es tatsächlich eine Reihe von Animationen für dich. Sie können das nachträglich anpassen, wenn Sie möchten. Du kannst darauf eingehen und dir einen Prototyp sagen. Es hat dieses Ding hier bearbeitet. Geht nirgendwohin, aber es heißt dieser Standardstatus. Wenn es angetippt wird, animiert es automatisch mit einer Lockerung von 0,3 Sekunden , und das ist das Verblassen. Es wird sich entspannen. Was ich tun möchte, ist darauf zu tippen. Ich möchte nicht, dass du automatisch animierst, ich möchte, dass du einen Übergang machst und ich möchte, dass die Animation keine ist und sage, dass du sie loswirst. Jetzt wird es wechseln, aber es wird keine Animation machen. Lassen Sie uns jetzt eine Vorschau geben, gehen Sie zu ausgewählt, klicken Sie auf „Play“ und jetzt ist es nur ein langweiliges altes Optionsfeld. Ist es in eine Richtung, aber sieh dir das an, es verblasst wieder ein. Du musst es auf beiden Seiten machen. Ich habe es für den Standardstatus gemacht. Machen wir es für den Off-State. Dasselbe, kein automatisches Animieren. Übergang. Ich möchte das No Dissolve jetzt beide Seiten machen sollte. Lass es uns ein Stück geben. Langweilige Animationen, aber mehr wie unser Optionsfeld funktioniert. In diesem Fall erinnern sich alle Animationen, diese Instanzen an die Fades. Haben sie alle aktualisiert? Werfen wir einen Blick darauf. Vielleicht haben sie das getan. Ich scheine, dass sie sich das nicht angeschaut haben. Sie werden alle aktualisiert. Die Animation, wenn Sie den Master anpassen, werden alle aktualisiert. Es sieht jedoch nicht wie ein normales Optionsfeld aus. Wenn du normalerweise davon wüsstest, kannst du nur einen auswählen. Sie können das nicht schaffen und es liegt außerhalb des Umfangs von XD, aber Sie haben die Idee. Das ist der Toggle-Status. Es wird hin und her gehen. Hover ist der Hovery. Du weißt was ich meine. Dort lasse ich das hier zurück. Es gibt ein bisschen mehr, das ich dir im nächsten Video zeigen möchte . Aber hey, wir brauchen eine Pause. Ich brauche eine Pause. Hol dir eine Tasse Tee. Wollen Sie und ich sehen im nächsten Video und wir werden ein bisschen mehr von einigen Zuständen in Adobe XD behandeln . In einer Sekunde zurück. 60. Kursprojekt 11 – Buttons (Schaltflächen): Hi, allerseits. Es ist Klassenprojektzeit. Wir werden ein paar Knöpfe erstellen, auch bekannt als Komponenten. Es gibt zwei zu machen. Nur um die Grundregeln aufzustellen, wird diese die heißeste Klassenaufgabe sein, die Sie je gemacht haben. [NOISE] Es wird schwierig werden. Sei also vorbereitet. [GELÄCHTER] Ich bin mir nicht sicher warum ich hereingezoomt habe. [GELÄCHTER] Du wirst zwei Knöpfe machen. Die Verwendung von Komponenten und Zuständen kann schwierig sein, Sie werden dorthin gelangen. Ich habe diese beiden Beispiele. Sie werden einen normalen alten Button erstellen wie wir es hier haben, die Schaltfläche Jetzt kaufen und mehr erfahren, dann ein Häkchen, das im Grunde dem Optionsfeld entspricht , den wir zuvor erstellt haben. Also der Knopf, lass uns zuerst darüber reden. Was ich möchte, dass du es machst, ist, es uns in der Vorschau anzusehen. Das will ich. Ich möchte, dass du den Mauszeiger bewegen und dich dann ändern kannst. Meiner verändert sich nur geringfügig, also ist das eine Sache. Eine Sache, auf die ich jetzt hinweisen sollte, denkst du vielleicht schon, weiß er es vielleicht schon? Ich weiß, dass du nicht auf einem Handy schweben kannst. Du kannst mit dem Finger darüber winken, aber es ändert sich nicht wirklich. Ich denke, in diesem Kurs lernen wir sowohl Desktop-Buttons als auch Sachen für mobile Geräte, konzentrieren uns aber nur darauf, die eigentliche mobile Version zu erstellen. Mach die Schwebe, obwohl es auf einem mobilen Gerät etwas komisch ist. Was ich möchte, dass Sie tun, die Regel ist, dass diese beiden dieselbe Hauptkomponente teilen müssen. Sieh dir das an, sie teilen sich alle, obwohl sie optisch ganz anders sind, ich möchte, dass du siehst, ob du es kannst. In meinem Asset-Panel. Lasst uns das schließen. Da ist mein Knopf. Hier ist mein Hauptteil, und es ist nur ein Knopf, den ich anders gestylt habe. Das ist ziemlich schwierig, obwohl die Videos, die ich gemacht habe, die Leute für Trickiness bezahlen. Wenn Sie es weniger knifflig halten möchten, wenn Sie diesen Kurs schwierig finden, machen Sie keine Linie um die Außenseite mit verschiedenen Füllungen und Sachen, machen Sie einfach eine leichte Farbvariation wenn Sie diesen Kurs schwierig finden, machen Sie keine Linie um die Außenseite mit verschiedenen Füllungen und Sachen, machen Sie einfach eine leichte Farbvariation . Schaltfläche „Jetzt kaufen“ für mehr erfahren. Das spart Zeit und um es interessanter zu machen, wenn Sie es spielen, möchte ich, dass Sie es verbinden. Wenn ich also auf den Mauszeiger klicke, funktioniert es aber wenn ich darauf klicke, springt es zur Checkout-Seite und mache das. Es gibt etwas, das wir noch nicht getan haben. Wir haben viel entworfen, wenn wir eine Prototyp-Seite wollen, wird diese Animation automatisch hinzugefügt und wir lernen vorher, dass wir sie ausschalten können. Lass uns gehen. Wir wollen das Fade nicht, wir wollten nur springen. Man kann sagen, geh zum Übergang und ich will keine Auflösung, wollte nur geradeaus springen. Das ist es, was dieses Ding ist. Das sagt es, geht nirgendwohin. Geht einfach zu diesem elektrischen Ding. Dies besagt nur, dass die Animation, die hier stattfindet , zu keiner wird. Aber ich möchte auch, dass es woanders hingeht. Sie können zwei Aktionen für eine Komponente haben. In diesem Fall sage ich, dass du zu diesem Ding gehst. Siehst du, dass du mehr als einen haben kannst? Sie können jetzt sehen, wenn ich auf dieses tippe, geht zur Standardeinstellung. Es geht um zu tippen, zu dieser Seitenanimation zu wechseln, aufzulösen oder keine, lass mich keine gehen. Es wird auch, wenn es schwebt, einen Übergang von keinem machen. Du kannst mehr als einen haben, du kannst drei haben. Ich bin mir nicht sicher, warum du drei hast? Es wird ausflippen, weil es versuchen wird, auf beide Seiten zu gehen. Ich bin mir nicht sicher, zu welchem es tatsächlich gehen wird, aber ich weiß nur, dass du einen Knopf bekommen kannst , um mehr als eine Sache zu tun. Spielen Sie in unserem Fall unsere Hover-Animation ab. N, gehe zu einer Seite, speichere für mehr erfahren. Es gibt die Schaltfläche „Mehr erfahren“. Ich wollte zu diesem Thema gehen, die Produktdetails, mehr über dieses Produkt erfahren . Gehe zur Vorschau. Inzwischen wird es uns zu unserem zweiten Teil unseres Klassenprojekts führen und mehr. Es gibt das. Es ist wie das Optionsfeld. Ich möchte sehen, ob du das schaffst. Es ist wie ein Kippschalter. Das ist der Schwebeweg, das ist der Toggle. In Bezug auf das Häkchen habe ich das gerade gezeichnet. Ich habe es mit einem Pin-Werkzeug gezeichnet. Auch Sie können es zeichnen oder etwas aus dem Icon Finder oder einem SVG irgendwo finden, das UI-Kit eines anderen. Was Sie finden, wenn Sie es zeichnen, wird Ihr Häkchen wie kein anderes Häkchen aussehen. [GELÄCHTER] Es ist wirklich schwer wie das Häkchen zu zeichnen, ich habe das Gefühl, irgendwann dorthin gekommen zu sein, aber ich habe das Ticket ein paar Mal neu gezogen. Lasst uns nachsehen. Schaltfläche „Jetzt kaufen“ müssen sie bei dieser zweiten Prototyp-Interaktion dieselbe Hauptkomponente und den Mauszeiger aufweisen. Wenn Sie darauf klicken und zu dieser Seite wechseln, schalten Sie das Häkchen wie ein Optionsfeld ein und aus. Wenn Sie fertig sind, nehmen ein Video auf, in dem Sie damit interagieren. Denken Sie daran, dass es hier oben ist, PC, es ist da drüben. Denken Sie auch daran, dass einige der Orte, an denen Sie es hochladen können , insbesondere soziale Medien, das Video einfach dort ablegen und es verarbeitet und es ist in Ordnung. Oft müssen Sie mit den Aufgaben und ihren Kommentaren dieses Video, das Sie erstellen, auf etwas wie YouTube oder Vimeo oder Behance oder ein anderes Video-Hosting hochladen das Sie erstellen, auf etwas wie YouTube oder Vimeo oder Behance oder und einfach den Link teilen. Wenn du es im letzten früheren Video ausprobierst und einfach nicht für das Leben ein Video aufnehmen könntest , ist das okay. Mach einfach einen Screenshot und lade den hoch. Zwei Screenshots eins an, eins aus. Das sind es meine Freunde. Ich würde gerne sehen, was Sie auch in den sozialen Medien teilen. Wir fangen an irgendwohin zu kommen. Wir sehen uns im nächsten Video. 61. So verwendest du das the in Adobe XD: Hey allerseits. In diesem Video werde ich Ihnen wahrscheinlich das aufregendste Feature in Adobe XD zeigen. Sie können auf Dinge klicken und kleine Nachnahme auswählen. Du musst auch wissen, stell dir vor, du könntest einfach gehen, sieh dir das an, es gibt viele von ihnen. Aber was wäre, wenn wir ein paar Bilder brauchen? Schau, ich kann einfach ein paar Bilder hineinziehen und sie werden alle aktualisiert. Ich kann mit dem Abstand spielen und sie alle im Wiederholungsraster trennen lassen. Lassen Sie mich Ihnen zeigen, wie es in Adobe XD funktioniert. Um loszulegen, auf der Produktdetailseite, habe ich es länger gemacht und bin da unten eine kleine Snackbar ausgezogen . Ich baue all diese harte Arbeit auf, die wir geleistet haben , und vielleicht werde ich das Bild los und schalte es einfach für eine Füllung aus , genau wie zurück zu Quadrat eins. Wenn ich das getan habe und es ein Vielfaches davon gibt, ist es wirklich einfach, das Wiederholungsraster dafür zu verwenden. Ich wähle alles aus , was ich dabei sein möchte. Ich wackle es oft , um sicherzustellen, dass ich alles habe und nichts habe, was ich nicht hätte haben sollen. Sie müssen es gruppieren, aber Sie können hier auf diesen klicken, Repeat Grid [LACHEN] Das ist übrigens ein neues wissenschaftliches für diesen Kurs. Alles was du tust ist es nach unten zu ziehen. Du bist ein Wiederholungsraster-Master, sieh dir das an. Dinge, die du tun kannst, lass uns ein paar davon holen. Los geht's. Er würde sagen, ich brauche das, um ein bisschen zu kommen, die Lücke ist zu groß. Sehen Sie sich an, wie Sie schweben, schweben, und ich mache einfach nichts, ich klicke, halte und ziehe einfach. Du kannst es überlappen, du kannst das tun [LACHEN] Das ist nicht was ich will, aber ich werde meine dazu bringen, da drin ziemlich eng zu sein, vielleicht sogar ein bisschen so. Los geht's. Jetzt gehe ich auf und ab, weil wir das haben, aber du kannst definitiv auch diesen Weg gehen , es spielt keine Rolle. Wenn Sie die Desktop-Version machen, können Sie nach links und rechts gehen , Sie können auf und ab gehen. Ich gehe in diesem Fall einfach runter. Was es cool macht, ist, dass es kontinuierlich einstellbar ist. Sobald Sie damit fertig sind, klicken Sie einfach auf Zurück. Kannst du sagen, kannst du das Zeug draußen sehen und diese kleinen Kerle? Die verschwinden nicht. Sie bleiben dort, damit Sie später immer mehr hinzufügen können, wenn nötig. Was macht das schön ist, dass du durchgehen kannst und wo ist mein Exemplar? Ich kann für diese Dinge individuelle Texte hinzufügen. Fügen wir diese hinzu und fügen wir diese hinzu . Ich doppelklicke sie einfach. Du kannst sie bearbeiten und es gibt immer noch so schön. Wenn ich abklicke, während ich darauf doppelklicke, gehe in das Mitglied und unseren Objektbearbeitungsmodus, klicke aus klicke wieder ein, und ich habe das immer noch und es bedeutet, dass ich immer noch mit dem gesamten Abstand spielen kann obwohl sie mit diesen Boxen hier für Bilder ganz individuell gleich sind. Jetzt können Sie mit den Bildern einfach einzeln ziehen. Schnappen wir uns unsere Übungsakten, da sind sie. Schnappen wir uns Bild eins und ziehen es einfach hinein. Dann kannst du dich dabei ansprechen. Ich möchte, dass das so ist. Es geht davon aus, dass Sie alles andere machen. Du bist wie, nein. Ich mache einfach jeden Einzelnen, lass uns das machen. Du gehst dorthin und fügst sie einfach weiter hinzu, während du durchgehst wie du es willst. Oft können Sie es tun, dass wir das rückgängig machen [NOISE] Du kannst einfach greifen, ich habe vier davon da. Ich kann vier davon schnappen und mir sogar vier schnappen. Ziehen Sie einfach einen rein und es wird davon ausgegangen, dass Sie dieses schöne kleine Wiederholungsraster machen werden. Es ist großartig für dich. Sie können sie individuell gestalten, aber Sie können sie alle zusammen steuern. Der Abstand ist eine Sache, was ich nützlich finde, ist, dass Sie hier entscheiden, dass wir diese Schriftart später nicht verwenden. Wir werden benutzen, habe ich Trajan Pro? Noch eine schöne Schrift. Sie können sehen, dass ich diese Dinge anpassen kann oder vielleicht ist es nur die Größe und tatsächlich muss das ein bisschen größer sein und ich kann es dort bewegen, oder es ist nicht ganz passend, also muss ich es kleiner machen. Du hast das, sage ich, sehr schön im Wiederholungsraster. Es ist einer der wirklich großen Vorteile von XD gegenüber den Konkurrenten. Sie können Schriftarten ändern, Farben ändern, Abstand zusammen ändern, aber einige Bits können individuell sein, wie der eigentliche Text und die darin enthaltenen Bilder. Auch um die Ecken kannst du gehen, ich werde bitte fünf haben und sie alle gehen und ändern sich. Los geht's. Es wird einen Punkt geben, an dem Sie denken, könnten Sie eigentlich mit den ganzen aktualisierenden Maulwürfen aufhören , die sie auseinanderschlagen wollen , weil ich etwas Individuelleres mit ihnen machen werde . Ich möchte sie getrennt herummischen. Was Sie tun können, ist, dass Sie einmal darauf klicken, abklicken und einmal darauf klicken können . Hier drüben gibt es ein nicht gruppiertes Raster und du klickst einfach darauf und es zertrümmert sie einfach in einzelne Objekte. Welches Individuum? Los geht's. Ich kann darauf eingehen und sagen , dass du tatsächlich ein richtig ausgerichtetes Bild sein wirst, als würdest du dorthin gehen, du gehst dorthin und gehst dorthin. Sie möchten dies in eine bestimmte andere Schriftart ändern , hier geht's. Du kannst sie auseinanderbrechen. Du kannst sie nicht wieder zusammenstecken, wenn sie auseinandergebrochen sind, ich bin gerade dort gelandet. Sie können hören, wie meine laute Tastatur auf Befehl Z tippt oder Z in einem PC steuert, um sie wieder zusammenzubringen. Großartig für diese Kartentypen , alles , was sich wiederholt. Es könnte ein Listenelement sein, siehe diese hier. Es könnte eine große lange Liste oder Aufzählungspunkte sein, so etwas. Sie benutzen es auch für die Navigation. Wir werden später im Video nav machen, aber die Navigationsleiste an der Seite eines mobilen Navigationssystems, in dem Heim und Konto steht und das. Man macht einen und dupliziert sie dann einfach mit. Ein weiterer Anwendungsfall, für den ich es verwende , sind diese Moodboards, großes hässliches Moodboard. Was du tun kannst, ist einfach ein Rechteck zu gehen und dir etwas repräsentativ Größtes zu gehen [LACHEN] und nicht so groß. letzte Mal schleppten wir sie hinein und sie schlugen in die Ferne nach rechts und sie waren ziemlich groß. Was du tun kannst, ist ein Moodboard ein bisschen mehr zu machen , ich weiß nicht, weniger so. Ich schaffe das. Hol dir ungefähr die Nummer, die ich brauche. Schnapp dir mein Moodboard wo war das Moodboard? Werfen Sie einfach all diese rein. Schau, wie großartig wir sein werden, bist du bereit? Schau, wie großartig wir sind und du kannst den Abstand wie zuvor steuern . [GELÄCHTER] Mit Abstand können sie sich überlappen. Das ist nicht gut [LACHEN] mach einfach weiter , dann ist das Ende des Videos. Ein Wiederholungsraster, super nützlich und praktisch dafür. Sie könnten feststellen, dass es sich auch tatsächlich wiederholt. Wenn du sehen kannst, dass ich das habe ich nicht genug, nur damit du es weißt. Ich hab das und du kannst sehen, wie sich dieser Kerl zweimal wiederholt. Nun, es gibt den ersten und es wiederholt das, also brauche ich nicht wirklich, was habe ich getan? [GELÄCHTER] Zufällig Rechtsklick und ich habe es gesperrt. Du kannst Sachen sperren, wussten Sie es? Du kannst es sperren, damit es sich nicht bewegt. Da gehst du. Ich habe das sowieso nicht viel in XD gemacht, außer zufällig. Ich gehe hin, brauche das nicht wirklich. Los geht's. Das ist mein Moodboard. Das war's für dieses Video, wir sehen uns im nächsten. 62. Kursprojekt 12 – Repeat: Man kann dem Videotitel entnehmen, dass es sich um ein anderes Klassenprojekt handelt. Dieser hier ist Repeat Grids. Wir werden diese Überprüfungsseite machen. Nun, wir werden es nicht schaffen, du bist es. In Ihrem Unterrichtsprojekt ist das Projekt 12 hier. Das erste ist, ich möchte, dass du recherchierst wie eine Überprüfungskarte aussieht. Ich wette, du hast vorher noch keinen gemacht oder vielleicht hast du es getan. Aber gehen Sie einfach zu Google und geben Sie Review Card.Ui oder in Dribble oder in Behance ein, wovon auch immer Sie sich inspirieren lassen möchten. Google, wir wechseln zu Bildern und fügen das Wort UI zum Ende hinzu, damit die Überprüfungskarte zu breit sein könnte. Machen Sie das, holen Sie sich ein paar Beispiele, machen Sie ein paar Screenshots. Sie können ein Moodboard für Ihre Bewertungskarte haben. Das ist okay. Ich möchte , dass du eine neue Zeichenfläche erstellst. Ich weiß, dass es außerhalb des Umfangs unseres Aufgabenflusses liegt, wir wurden nur gebeten, diese ganzen Seiten zu erstellen, aber hey, das ist ein Kurs. Vielleicht können wir die Regeln brechen. [NOISE] Wir werden eine neue Zeichenflächencode-Überprüfungen erstellen, und ich möchte, dass Sie Ihre eigene Überprüfungskarte [NOISE] erstellen und sie dann [NOISE] mit dem Wiederholungsraster wiederholen. Machen Sie eins, wiederholen Sie es und dann werde ich Sie dazu bringen, und dann werde ich Sie dazu bringen mit mindestens zwei Plug-Ins zu experimentieren , um Ihre Gruppe zu füllen. Benutze nicht die, die ich benutze, nicht gut. Ich werde dir nicht zeigen, wie du sie benutzt, weil ich denke, ich möchte, dass du erforschst, wie Plug-Ins funktionieren. Sie sind nicht alle gleich und ich möchte, dass Sie die Frustration finden und sie dann überwinden und dann erkennen, okay, Plug-Ins werden alle von verschiedenen Leuten erstellt und alle funktionieren anders. Diejenigen, die ich für dieses spezielle Beispiel benutzt habe, können Sie verschiedene verwenden. Am Ende habe ich einige gelernt, die wir früher installiert haben, Faker XD und UI Faces. Ich bin nicht wie Befürworter für diese beiden, sie haben gearbeitet, sie waren gut, aber es gibt viele drin. Sie einen Blick durch die Plug-Ins. Denken Sie daran, zu Plug-Ins zu gelangen, ist hier unten diese letzte Option und Sie müssen möglicherweise auf „Plus“ klicken und Ihre Creative Cloud-App öffnen. Wenn Sie suchen müssen, können Sie hier suchen und müssen nur sicherstellen, dass XD angekreuzt ist und ich werde gehen, ich weiß nicht, [LACHEN] stellen und Sie können sehen, dass es eine Reihe verschiedener gibt . Schau es dir mal an. [NOISE] In diesem Fall steht die Benutzeroberfläche vor einem, es ist ziemlich cool. Sie können darauf klicken und aus der Quelle auswählen. Erinnern Sie sich an Unsplash und Pixel? Da gehst du. Sie sind sehr verbreitet. Diese Person existiert nicht. [GELÄCHTER] Interessant. Es ist kompliziert , aber nicht zu kompliziert. Der Trick ist, dass Sie bei den meisten dieser Plug-Ins zuerst etwas auswählen lassen müssen. Wenn ich auf diesem Text auswähle, wird er nicht unterstützt, während ich darauf klicke und es heißt: hey, ich weiß was zu tun ist, und Sie könnten in diesem Fall feststellen , Sie auf „Fotos auswählen“ klicken und Sie können auswählen verschiedene und es gibt viel zu tun. Nur um es ein bisschen zu erforschen , es herauszufinden, es auszuprobieren. Versuchen Sie es mit einem anderen als diesem. Das ist ziemlich genial. Es hat viele verschiedene Filter und nur glückliche Leute und auch verschiedene Funktionen. Dieser spezielle erkennt an, dass es sich um Repeat Grid handelt und geht den ganzen Weg durch und füllt sie alle aus. Dieser andere, Faker, bei dem ich diesen Text auswählen lassen wollte , dieser ist seltsam. Ich werde Ihnen nur eine kurze Demo von diesem zeigen , denn wenn Sie neu mit Plug-Ins sind, funktionieren sie alle so anders. Dieser hier ist ein bisschen witzig. Lass es dort, ich habe meinen Text ausgewählt, du kannst so viel durchgehen. Du kannst sagen, in Ordnung, ich muss ein Date bekommen, das ich eintragen muss, und du kannst Termine eingeben und es wird sie zufällig für dich hineinlegen. Aber dieser hier ist nicht so zufällig. Nun, lass mich dir zeigen, wie es funktioniert. Ich sagte, ich möchte, dass du sie erforschst, [LACHEN], aber dann dachte ich dieser spezielle auf seltsame Weise funktioniert. Hab das. Ich sage „Name“. Es gibt einen, der besagt, dass alle Namen für mich generieren und wenn ich darauf doppelklicke, würdest du sagen, was passiert? Siehst du oben, was es gemacht hat? Wenn ich darauf klicke, fügt es nur eine weitere variable Zeichenfolge hinzu, ich bin mir nicht sicher. Aber es hat hier einen Code oben. [NOISE] Was ich tun werde ist, ich möchte, dass es Vorname und dann ein Nachname ist, und es bringt es in die falsche Reihenfolge Sieh dir das an, wenn ich auf „Generieren“ klicke, jetzt ist es dort Cara Little. Da gehst du. Es ist falsch ausgedrückt , also kann ich das greifen, schneiden, [NOISE] darüber legen, und weil ich eine Rückkehr gebe, was passiert? Die Rückkehr geht rein. Hier oben kannst du das noch breiter machen, nur damit du es weißt. Ich kann das löschen. Will ich einen Platz da drin? Ich will ein wenig Platz, generiere. Sie können sehen, dass es sehr anpassbar ist, was großartig ist. Montserrat. [GELÄCHTER] Oberbrunner. Los geht's. Oberbrunner? Dieser wird jedoch nicht durchgehen und alles tun. Du musst gehen, was kein großes Drama ist, aber zumindest ein zufälliges Zeug gibt , während das andere Plug-In automatisch durchläuft und sie alle aktualisiert. Du könntest die beiden gebrauchen. Ich möchte, dass du einige deiner eigenen erforschst , nur um den Dreh raus zu bekommen. Du könntest so sein, Mann, das ist [LACHEN] nicht sehr gut. Es ist etwas, das Sie erforschen müssen, da all dies nicht von Adobe erstellt wurde. Sie funktionieren nicht alle sehr gut, und ihre Bewertungen können gut sein und es ist schrecklich zu benutzen, aber geh und erforsche es, finde es heraus. Du kannst es für Loren ipsum tun, für die Namen. Dafür haben Sie möglicherweise einen anderen Teil Ihrer Bewertungen, möglicherweise haben Sie etwas ganz anderes. Aber es macht Spaß, diese Plug-Ins zu erkunden. Die andere Sache, die ich erwähnen wollte ist, dass ich in diesem Fall hier zum Ende bin. Kannst du sehen? Wenn ich das spiele, siehst du es auf meinem Prototyp? Nun, du kannst es nicht sehen, aber ich kann nicht nach unten scrollen. Was ich tun werde, ist, ich möchte es nur wiederholen, wir haben früher im Kurs behandelt aber ich denke, es ist lange her. Ich werde das länger machen, als ich brauche. Denken Sie an dieses Ding? Solange wir das nicht bewegen, wird es dort abgeschnitten und hier nach unten scrollen . Lass es uns spielen. Jetzt kann ich scrollen und viele dieser verschiedenen haben. Denken Sie daran, wenn ich das am Ende verschiebe, versucht es alles auf diese eine Seite zu drücken, es wird nicht mehr scrollen und es ist ein bisschen komisch. Ich gehe zu dir, das mache ich rückgängig. Sie können es ziehen oder Sie können es hier anpassen. Wo war ich? Ich glaube, ich muss vielleicht auf die Seite klicken. Ich klicke auf die Seite, los geht's. Höhe des Ansichtsfensters, das ist es da. Sie können die Größe Ihres Telefons eingeben, was bedeutet, wie hoch es ist. [NOISE] Das letzte, was Sie tun müssen, ist, dass Sie auf der Homepage einen Reviews Button erstellen. [NOISE] Auf der Homepage nur der Link zu dieser Seite, sonst hat es eine Möglichkeit, darauf zu gelangen und auf der Homepage habe ich eine gefälschte Rezension hinzugefügt, mehr Reviews Button , mit der ich und mein Prototyp, um zu dieser Seite zu springen und nach oben und unten zu scrollen. sollte ich auch hinzufügen. [NOISE] Sie müssen den Code nicht wirklich hier haben. Möglicherweise haben Sie nur einen Reviews Button. Es muss kein Button sein, es kann Text sein. Es liegt an Ihnen, nur eine Möglichkeit, die Homepage mit der Bewertungsseite zu verknüpfen . Dann mach einen Screenshot, lade ihn in die Kursaufgaben hoch und teile es auch in sozialen Medien und markiere ihn mit dem Hashtag XD in den sozialen Medien, nur damit du es dir ansehen kannst selbst um zu sehen, was andere Leute für die Bewertungen getan haben. Es ist interessant zu sehen, wie eine Überprüfungskarte von verschiedenen Menschen, verschiedenen Kulturen und Ihrer Branche aussieht . Es ist nerdy, ich weiß, aber du bist jetzt ein Nerd; du bist ein UI-Nerd, du interessierst dich für dieses Zeug, also ist es interessant zu sehen, was andere Leute machen. Wer hätte gedacht, dass eine Überprüfungskarte so interessant wäre? Das ist es. Wir sehen uns im nächsten Video. 63. Aktualisierung und Probleme mit wiederholten Gittern der Kante: Hallo allerseits. In diesem Video zeige ich Ihnen, wie Sie unser Wiederholungsraster hinzufügen können, nachdem Sie es erstellt haben, und auch einige der Probleme, die auftreten, wenn Sie möchten, hey ich möchte es größer machen, aber es ist alles Cutoff. Warum ist es abgeschnitten? Ich möchte, dass es größer wird. Das zeige ich dir als Nächstes in Adobe XD. Der erste ist einfach. Sagen wir, ich möchte diese kleine Zahl nach diesen Sternen hinzufügen. Es ist derzeit nicht da drin. Was Sie also tun können, ist, dass Sie in Position kommen können. Es muss nicht in der Lage sein. [GELÄCHTER] Aber ich werde es tun. Ich schneide es ab. Es wird zum Bearbeiten, Schneiden gehen. Ich doppelklicke, um reinzugehen. Habe hier einfach etwas ausgewählt, egal was es ist und klicke dann einfach auf „Einfügen“. Dann geht es rein. Du siehst, es ist auf allen von ihnen. fügt man etwas anderes hinzu. Ich benutze meine Pfeiltaste, um einfach darauf zu tippen. Nun, das Problem, auf das Sie stoßen könnten ist, dass Sie dies erweitern möchten, der weiße Hintergrund, der es kleiner macht, ist einfacher, aber ich möchte es größer machen. Wenn du es größer machst und du so bist, möchte ich es nur ein bisschen größer machen. Ich möchte es dorthin verschieben. Kannst du sehen, dass es hier vom Rand abgeschnitten ist? Eigentlich wird es nicht helfen, es zu färben . Aber du verstehst die Idee. Sie können sehen, es wird von dieser Seite abgeschnitten, wenn ich es auf dieser Seite größer mache, steckt es hier in dieser Wiederholungsrastertafel fest. Wenn ich es ausdehne, denke ich, okay, ich klicke drauf. Wo gehen wir hin? Klicken Sie einmal darauf. Hier ist mein Vorteil. Ich ziehe es einfach größer. Du meinst, es ist nicht ganz das, was ich wollte. Was du am Ende machst und ich mache es rückgängig, bevor ich es zerstört habe. [NOISE] Es spielt keine Rolle, ob Sie dies vorher oder nachher tun. Strecken Sie es vorher oder nachher aus. Ich mach es danach. Alles, was du tun musst, ist es zu schaffen , meins ist lang und du wirst diesen Griff sehen können, wo ist er? Klicken Sie einmal darauf, klicken Sie darauf. Da gehst du. Es gibt den Griff. Wenn ich diesen Griff größer mache, musst du das nur zuerst strecken. Gib dir ein bisschen Platz, mach es dann größer und ziehe es dann zurück. Vielleicht klicke auf „Off“, klicke wieder darauf und du wirst das wieder los. Es gibt dir ein bisschen mehr Platz. Passiert viel für mich, wenn ich von Desktop zu Handy gehe. Kopieren Sie dies und ich gehe zu meiner Desktop-Ansicht und ich habe mehr Speicherplatz, damit ich die Dinge in einer anderen Größe machen kann. Mach es einfach größer. Gib dir selbst eine Lücke. Dann ziehe das aus. Dann können wir das ausdehnen und dann wieder hierher kommen und es wieder verkleinern. Da gehst du. Aktualisieren und auch einige kleine Updates, nun, Fixieren der Kante, wenn Sie sie größer machen müssen. Manchmal kann es manchmal, anstatt etwas davon zu tun, manchmal schwierig sein, dieses Ding danach anzupassen manchmal schwierig sein, dieses Ding danach , je nachdem, was Sie haben. Manchmal wähle es aus und geh, nimm die Gruppierung auf und geh einfach, ihr seid alle weg und fang neu an und starte einfach Raster mit der neuen Größe und du bist wieder weg. Sie müssen diese Dinge aktualisieren, aber manchmal heben Sie die Gruppierung auf und beginnen Sie möglicherweise einfacher. Das war's für das Video, mein Freund, wir sehen uns im nächsten. 64. So verwendest du Stacks in XD für ein Formular: Halten Sie Ihre Hüte Leute fest, es ist das zweitaufregendste Feature in Adobe XD, das Stacks genannt wird. Was machen sie? Sieh dir das an. Der Name auf der Karte muss unten angegeben werden und unsere E-Mail muss oben sein. Sieh dir das an. Ich bringe sie zum Mischen. Ich kann mit diesem Abstand von allen oder nur einem herumspielen . Es wird besser. Sieh dir das an. Hab diese Karten, ich kann so gehen. Ich muss sie mischen, weil der Kunde seine Meinung ändert. Sieh dir das an, noch besser. Lass uns dieses Menü oben machen. Du musst jetzt hier sein. Eigentlich, die Suche, komm schon, Dan, es muss über diese rechte Seite sein. Sieh sie dir alle an, alles automatisch. Es ist eines dieser schönen metrischen Tools in Adobe XD. Lass uns reingehen und ich zeige dir, wie sie funktionieren. Zuerst brauchen wir etwas zu stapeln. Ihr wartet da. Du bist zurück, ich hab ein paar Sachen gemacht. Dies ist ein Formular und du hast vielleicht in der Geschwindigkeitsversion gesehen, ich habe es mit dem Wiederholungsraster geschafft weil es sich viel wiederholt. Um Stacks zu verwenden, heben wir die Gruppierung in diesem Fall auf. Repeat Grid war großartig, um es zu erstellen, aber für Stapel können sie nicht so sein oder sie können kein Wiederholungsraster sein. Das sind alles Einheiten, die genau das, was Repeat Grid für mich getan hat. Aber wenn nicht, müssen sie in Gruppen sein. Das wissen die Stacks, wie sie sich anpassen können. Du siehst diese, nicht in Gruppen. Was ich also tun möchte, ist dies auszuwählen und zu gruppieren, und etwas zu gruppieren ist Command G oder Strg+G. Dieser hier ist auch einfach muss also nicht gruppiert werden. Sie können sehen, dass ich es aus meinem Vermögen wiederverwendet habe. Ich muss meine Charakterstile benutzen. Sieh mich an, ganz schick. Jetzt müssen wir sie einfach alle auswählen. Hier drüben sagen wir, du bist ein Stapel. Wo ist es? So wird es nicht sein. [GELÄCHTER] Diese Dinge müssen also gruppiert werden, aber das Ganze muss auch eine Gruppe sein, wie eine universelle Gruppe. Einzelne Gruppen, großartig. Ich gruppiere es noch einmal. Wir werden einen langen Weg benutzen. Benutze dies, um es zu gruppieren. Sie können in meinem Ebenenbedienfeld sehen, da ist es da. Das ist meine Gruppe. Ich nenne es Form, weil ich es nicht weiß, lass uns schick sein. Hab mein Formular. Jetzt kann ich einen Stapel machen. Wo ist es? Da ist es da. Schalten Sie es ein. Es sollte standardmäßig auf den rechten Wert gesetzt werden, egal ob es sich um einen vertikalen Stapel handelt oder auf einem Stapel gehalten wird. Bereit, klicken wir hinein. Nun, sieh zu, sieh dir an, sieh dir das an, geht der Name zuerst? Geht nicht ein anderer zuerst? Geht das zuerst? So gut. Du kannst es neu starten und du kannst sie auch horizontal machen , sonst mache ich das rückgängig. Sie können die Umschalttaste gedrückt halten, während Sie es ziehen, und es wird gerade nach oben und unten verschoben. Sieh dir das an, du könntest entscheiden, dass das zuerst geht oder das geht zuerst. Was geht zuerst? E-Mail. Lasst uns das machen. Lasst uns das machen. Wenn du noch einen hinzufügen musst, brauchst du den Monat, ich weiß nicht, den Monat. Sie können einfach einen von ihnen auswählen und kopieren und einfügen gehen, Sie haben einen anderen. Man kann sehen, dass es es niederschlägt, was wirklich cool ist. Also könntest du so gehen. Man könnte „Ablauf“ sagen. [GELÄCHTER] So schlimm bin ich ein Zauberer. Ich weiß nicht, es geht einfach nicht rein. Jedenfalls. Sie können auch sehen und es ruft all dies auf. Mann, sie müssen dann gleich sein , buchstabiere es richtig. [GELÄCHTER] Du kopierst sie und fügst sie ein, fügst sie hinzu und schiebst sie heraus. Sie können einen löschen. Sie könnten entscheiden, dass Sie tatsächlich zurückgekommen sind und ich diesen nicht mehr brauche, also doppelklicken Sie darauf, um hineinzugehen. Klicken Sie darauf, löschen Sie es und alle bewegen sich nach oben und unten. Sie können weiterhin einzeln mit ihnen arbeiten, da dies keine Wiederholraster mehr sind. Also kann ich mir das schnappen und darauf doppelklicken. Ich habe am Ende einmal darauf geklickt, klicke einfach auf den ganzen Stapel. Doppelklicken Sie darauf, um in diese Gruppe zu gelangen. Ich möchte wieder in die Gruppe gehen und erneut doppelklicken. Du kannst ein bisschen davon machen und es passiert ein bisschen. Ich mache das und hole mir diese Einheit , doppelklicke darauf, um hineinzugehen, kopiere und füge sie ein. Sieh dir das an und was ist es? CVV. Ist es CVV? Es ist einer von denen. Es ist nicht so, dass es ein CVC ist. [GELÄCHTER] Einer von denen. Ja. So macht man einen Stapel. Sie gruppieren die Dinge , die gemischt werden sollen , und dann muss das ganze Stück in einer Gruppe sein, dann klicken Sie hier einfach auf „Stack“. Sie können den Abstand anpassen. Sieh dir das an. Du kannst einmal darauf klicken, das Ganze, doppelklicken und du wirst zwischen deinen Gruppen schweben und dir das ansehen, sie kommen alle vorbei. Sie können sie individuell so machen , indem Sie einfach über ihnen schweben. Ich mache es rückgängig. Sie können sie ganz rückgängig machen. Du hältst etwas fest, schätze ich Shift. Ich schätze richtig, yay. Halten Sie also die Umschalttaste gedrückt, und sie werden sich alle bewegen. Du könntest entscheiden , dass das perfekt ist. Das da, das dort. Wie ich schon sagte, Stacks ist super praktisch. Eine andere Sache, die Sie tun können, ist, dass Sie Dinge hineinquetschen können. Also haben wir kopiert und eingefügt, oder? Wenn ich noch eine davon haben möchte, wähle ich es einfach aus, kopiere und füge ein. Aber nehmen wir an, Sie gehen zum Rechteckwerkzeug und möchten etwas hinzufügen, ich bin mir nicht sicher, was es ist. Nehmen wir an, es muss eine Upload-Image-Sache sein. Du wirst sehen, dass ich nur mein Rechteckwerkzeug verwende. Wenn ich es einfach hochziehe, macht es sich nur ein kleines Geschenk und macht dort ohne Grund ein Rechteck . Das Gleiche gilt für das Typenwerkzeug. Schnappen Sie sich das Typwerkzeug und gehen Sie, eigentlich möchte ich dort tippen, und jetzt kann ich tippen. Mein Typ ist zufällig weiß. [GELÄCHTER] Nicht nützlich. Aber du verstehst die Idee, sie sind ziemlich belastbar. Ich mache es rückgängig, um die loszuwerden. Aber es gibt Zeiten, in denen du eigentlich so bist , dass ich nicht mehr möchte, dass es ein Stapel ist. Ich möchte diese hierher verschieben, denn wenn ich es versuche, geht es einfach [NOISE]. Das mache ich rückgängig. Sie können Stapel aufheben, indem Sie einfach dieses kleine Häkchen ausschalten. Also habe ich es ausgewählt. Schalt das aus. Es ist immer noch in einer Gruppe, was in Ordnung ist. Sie können mit der rechten Maustaste darauf klicken und bei Bedarf die Gruppierung aufheben. Es sind jetzt alles kleine Stücke. Aber was ich mache, ist dass ich dir etwas Cooles zeige. Ich sagte vorher belastbar, es ist einfach wirklich robust, ist wahrscheinlich das Wort, das ich will. Es ist ein Stapel, ich werde ihn entstapeln . Nein, das ist Polsterung. [GELÄCHTER] Ich habe es bereits entstapelt. Ich gehe in die Gruppe. Ich bin in Form und ich werde es hierher verschieben , weil ich das wollte und dann raus komme. Wählen Sie es erneut aus. Denken Sie daran, es muss eine Gruppe sein. Ich kann den Stapel einfach wieder einschalten und etwas Magisches passiert, wo er diese Zeile gruppiert hat. Kannst du das oben sehen? Das hier, das hier. Jetzt kann ich das alles durchziehen. Ich weiß es nicht, es ist ziemlich cool. Irgendwie wusste es, dass es sich auf derselben horizontalen Ebene befand und es funktionierte. Wenn ich die Umschalttaste halte, nimm sie alle gleich hoch. Du kannst es hier eintippen. Wenn Sie doppelklicken, bis Sie die rosa Dinge sehen, können Sie auf diese kleine rosa Lücke klicken. Sie können hier sehen, dass Sie oben und unten damit anfangen können , wenn Sie möchten, dass alles sehr genau ist. Sie verwenden ein Raster mit acht Pixeln oder 16 Pixel oben und unten oder acht oben und 16 unten, Sie können sehr spezifisch sein und ihm tatsächlich sagen, was zu tun ist. Das Letzte ist, ist hier drüben, wir haben unsere Formulargruppe. Nennen wir all diese. Das erste hier können Sie sehen, dass es E-Mail heißt. Doppelklicken Sie auf den Namen und nennen Sie ihn E-Mail. Denken Sie daran, wenn Sie es nicht können, wenn ich wieder da raus gehe, [LACHEN] ist es nicht das, was ich wollte. Klicken Sie auf diesen Namen, gehen Sie auf Befehl 3, um alles zu sehen, klicken Sie darauf. Ich habe die Ebenennamen, und das, was ich Ihnen zeigen wollte, war die Eingabe dieser E-Mail, dann geben wir den nächsten ein, und Sie können darauf doppelklicken und Name eingeben. Eine kleine Verknüpfung, es ist nicht das Wort Name, die Verknüpfung ist Tab. Es blinkt also immer noch, Tab nach unten, damit ich meine Hände nicht von der Tastatur nehmen muss. Ist das eine lustige Abkürzung? Es ist sowieso für mich. Das ist der Ablauf und CVC oder CVV, was auch immer es ist. Da gehst du. Sie können nach unten fahren, um Dinge umzubenennen, die praktisch sind, wenn Sie Ihre Arbeit jemandem übergeben möchten, und Sie wollten aussehen, als wären Sie kein Verrückter mit unbenannten Ebenen wie eine Zillion unbenannte Ebene wie ich. Gruppe 32, [LACHEN] das ist kein gutes Zeichen. Das sind die Stacks. Eigentlich möchte ich Ihnen ein paar andere Beispiele zeigen. Hier ist diese Website hier und es hat eine Navigation oben. Was ich tun werde, ist, dass ich auf beide klicke. Ich halte nur die Umschalttaste gedrückt und klicke auf den ersten und dann auf den zweiten. Ich gruppiere sie so , dass diese Typen zusammenziehen. letzten beiden sind bereits gruppiert. Was ich tun kann ist, dass ich sagen werde, ich will dich verschieben, du , du, du und du kannst ein Stapel werden. Warum ist es nicht als Stack hier drüben? Sie wissen, dass das Ganze gruppiert werden muss, Befehl G oder Strg+G. Sie können in diesem Fall sehen, XD irgendwie magisch ist und weiß, ob Sie einen horizontalen oder vertikalen Stapel haben möchten . Cool. Dann kannst du sagen, dass du hineingehst, darauf doppelklickst und sagst, dass du dorthin gehst. Sie können sehen, wie praktisch es für diese Art von Dingen ist, diese Navigationen. Man kann sagen, dass das der Erste sein muss, COVID-Informationen werden dorthin gehen. Bewegen Sie die Suchleiste geht hier. Machen wir das Gleiche hier drüben. Ich habe diese Seite für mobile Ereignisse und das werde ich nur sicherstellen. Sie müssen nicht gruppiert werden, diese beiden Bits. Du kannst, um die Dinge ein bisschen einfach zu machen , musst du es nicht sein. Das Ding hier werde ich tun. Nun, mal sehen, was die Stacks machen. Mal sehen, ob viel, wie klug es ist, weil es ziemlich komplex ist. Ich schnappe mir das alles, brauche nicht das obere Navigationsgerät und zoome noch mehr heraus. Schnapp dir alles. Lass es uns machen. Sagen wir, mach es zu einem Stapel. Wird kein Stapel sein, bis wir ihn gruppieren. Dann sagen wir, mach es zu einem Stapel und es geht auf und ab oder vertikal an, und lass es uns ausprobieren. Doppelklicken Sie also darauf, um hineinzugehen. Du wirst dir sagen, ich kann bei beiden Umschalttaste+Klicken und sagen, du gehst dorthin. Sieh dir das an. Wenn Sie die Umschalttaste gedrückt halten, während Sie es ziehen, geht es direkt nach unten. Sieh dir das an, es wird sich stapeln und darüber. Da gehst du. Lass uns versuchen, das unten zu bringen. Oh, es ist zu gut. Gute Arbeit, XD. Dieser untere Brocken ist zu viel von einer ganzen Einheit. Darunter endet es also. Das einzige, was ich vielleicht tun muss, ist, dies vorher eine große Einheitengruppe war, die ich möglicherweise trennen muss, bevor ich meinen Stack mache. Probieren Sie es also aus. Werfen Sie den Stapel darauf, sehen Sie, ob er tut, was Sie wollen, und machen Sie ihn dann rückgängig, und vielleicht müssen Sie vorher etwas ausgefallenes Gruppieren machen. letzte, ein Schrotflintenstapel hier bereit. Ich hab all diese Einzelteile. Der Kunde wird mich dazu bringen, sie zu bewegen. Ich gruppiere sie zusammen, mache es zu einem Stapel, doppelklicke darauf und sage, dass einer da drüben ist, der da ist, und dann muss man dorthin gehen. Halten Sie die Umschalttaste gedrückt, während Sie sie ziehen, Leute. [GELÄCHTER] Ansonsten landen sie an allen möglichen Orten. Dann schau, raus, klick, stapel aus, hands-off, fertig. Gut gemacht, XD. Das ist so gut. Ich liebe Stacks. Das ist es. Wir sehen uns im nächsten Video. 65. Kursprojekt 13 – Stacks und Stacks für die Seite: Hallo, jetzt ist es Klassenprojektzeit. In diesem Fall werde ich Sie dazu bringen, Ihre Checkout-Seite zu erstellen. Ich möchte, dass Sie beide recherchieren, wie eine Checkout-Seite und ein Kreditkartenformular aussehen, die verschiedenen Optionen. Es gibt einfach verschiedene Möglichkeiten, dies zu tun. Sie entscheiden für Ihr Benutzerprofil, welches besser sein könnte. Ich werde alle meine auf eine Seite legen, was davon ausgeht , dass es schwieriger ist und alles auf einer Seite abgeladen wird. Möglicherweise entscheiden Sie sich, es auf drei Checkout-Seiten zu trennen . Möglicherweise haben Sie sich für eine neue Menge entschieden , den Versand in Kreditkartendaten auswählen und dann kaufen. Möglicherweise haben Sie drei verschiedene Checkout-Seiten. Das liegt ganz bei dir. Aber sieh dir ein bisschen an. Werfen Sie einen Blick auf die Checkout-Seiten für ein mobiles Beispiel und erkunden Sie nur ein wenig Erkundung, um zu entscheiden, wie Ihre aussehen sollen. Der andere Grund ist, dass ich möchte, dass du Stacks erforschst. Auch wenn Sie alles perfekt angelegt haben , spielen Sie mit Stacks herum , nur damit Sie ein Gefühl dafür bekommen, was sie tun, was sie kaputt macht, was sie zum Laufen bringt. Es ist großartig für Dinge wie diese Listen. Das ist der Zeitpunkt, an dem es wirklich schön wird. Werfen wir einen kurzen Blick darauf. Recherche-, Kreditkarten - und Checkout-Seiten. Verbringen Sie einfach fünf Minuten damit, sich umzuschauen, sich eine Idee für das, was Sie wollen, und füllen Sie dann Ihr Formular auf Ihrer Checkout-Seite aus. Vergewissern Sie sich, dass Sie mit Stacks experimentieren, erstellen Sie eine Kaufschaltfläche und verknüpfen Sie diese mit der Bestätigungsseite. Mein Prototyp hier, wenn du dorthin gehst und runtergehst und kaufst, geht es auf die Bestätigungsseite. Mach das und schicke mir einen Screenshot, lade ihn an die üblichen Orte hoch, und das war's. Wir sehen uns im nächsten Video. 66. Der Unterschied zwischen Animation und Micro Interactions (Mikrointeraktionen): Hi, allerseits. In diesem Video werden wir über den Unterschied zwischen Animation und Mikrointeraktionen sprechen. Sie sind sich ziemlich ähnlich. Sie sind in der Art, wie Sie sie erstellen, anders gleich. Es geht nur um ihren Zweck und den Begriff Mikrointeraktionen, ich weiß es nicht. Wenn Sie UX kennen, kennen Sie wahrscheinlich den Begriff. Für diejenigen unter Ihnen , die neu bei UX sind, die wahrscheinlich viele Leute sind, die sich dieses Video ansehen, haben Sie wahrscheinlich noch nie von dem Begriff gehört. Lassen Sie uns schnell die Unterschiede zwischen Animation und Mikrointeraktionen beschreiben . Was du jetzt auf dem Bildschirm siehst, hier sind im Grunde alle Animationen. Sie sind da, um den Besucher Ihrer Website zu begeistern, vielleicht um eine Idee umfassender zu kommunizieren. Möglicherweise handelt es sich um eine kleine Animation vom Typ Informationsdiagramm, etwas, das Sie nicht mit einem einzelnen Bild kommunizieren können, können Sie sich entscheiden, es zu animieren. Der Unterschied zwischen Mikrointeraktion und Animation besteht darin, dass Mikrointeraktionen, schauen wir uns ein Beispiel an. Diese kleinen Animationen im Benachrichtigungsstil der Benutzeroberfläche. Diese [LACHEN] auf dem Bildschirm gehen gleichzeitig ab, es lenkt einen anderen ein bisschen ab. Eine Mikrointeraktion wird im Allgemeinen als Reaktion auf Benutzereingaben durchgeführt. Das heißt, wenn du auf das kleine Herz klickst, springt es auf und ab, um dir mitzuteilen, dass du etwas getan hast. Hast du jemals auf etwas geklickt und es reicht nicht genug und du klickst weiter darauf? Es ist wie Ihre Digitalkamera auf Ihrem Telefon, das seltsame Klickgeräusch macht. Es braucht kein [LACHEN] ein seltsames Klickgeräusch, aber wir, dumme Menschen brauchen diesen kleinen Klick um zu wissen, dass etwas passiert ist [LACHEN], damit wir unseren Tag weitermachen können. Es ist das Gleiche bei der Mikrointeraktion. Jetzt werden die Linien zwischen Animationen und Mikrointeraktionen etwas verschwommen . Das hier würde ich sagen, keine Mikrointeraktion, sondern nur eine Animation. Es zeigt dir nur Sachen. Es ist cool dort, sieht gut aus, aber es kommuniziert eigentlich nichts. So etwas ist es. Es ist eine kleine kleine Animation. Aber wenn ich darauf klicke und darauf klicke, zeigt mir das, dass ich dieselbe Immobilie auf meiner Seite verwenden kann . Anstatt zwei Knöpfe plus und Minus zu haben, kann dieses Ding wechseln und diese kleine Animation hilft mir. Dinge, die sich bewegen, die Augen anziehen, und es hilft so zu gehen, dieses und jenes Ding dort. Es ist einfach klein. Es ist nur ein bisschen extra. Es ist eine Mikrointeraktion. Werfen wir einen Blick auf ein paar andere. Animation. Das ist auch meine bescheidene Meinung. Ich bin nicht der Chef dessen, was eine Mikrointeraktion [LACHEN] ist. Du darfst nicht zustimmen, aber ich gebe dir nur mein Feedback. Das ist gut . Wenn Sie auf die Suchschaltfläche klicken und diese geöffnet wird, können Sie darauf klicken, um sie zu schließen. Es ist definitiv entzückend, nette kleine Interaktion, aber es hilft tatsächlich zu kommunizieren, was los ist, dass Sie tatsächlich etwas getan haben. Werfen wir einen Blick auf ein paar andere. Ich will diese Seiten. Dieser heißt lottiefiles.com. Es ist praktisch für Animationen , die online sind. Wir werden nicht zu viel mehr Informationen darüber behandeln . Gleiche gilt für dieses, heißt codemyui.com, und dies befindet sich unter dem Tag namens microinteractions. Jetzt, wann immer ich eine Seite in meinen Kursen vorschlage, ist es wie der Todesfall. [GELÄCHTER] Ich wette, du das, ich wäre nicht hier, wenn du kommst, also sind das nur Beispiele Seiten. Wenn ich mal hier nachschaue, siehst du das Ding hier? Das ist keine Mikrointeraktion obwohl diese bezeichnet wird, es ist nur Animation. Eigentlich ist es ein Spiel. Werfen wir einen Blick darauf, ein paar gute Mikrointeraktionen. Dieser hier ist ein netter. Wenn Sie das Ding jemals auf Ihrem iPhone gemacht haben, wenn Sie versuchen den Fingerabdruck für die Sicherheitssachen zu bekommen, dieses kleine Wackel-Linien-Zeug reicht dieses kleine Wackel-Linien-Zeug aus, um zu wissen, dass Sie etwas tun. Denn sonst, wenn es nur heißt mach es und wackeln, weißt du nicht, ob du so sagst: „Ich komme näher oder funktioniert es?“ Diese kleinen Linien um den Daumen bewirken nichts. Der Computer sagt nicht : „Oh schau, ich sehe eine Zeile.“ Es ist nur eine kleine Animation, die uns hilft da die Menschen wissen, dass Sie ein Foto gemacht haben, Sie können das Klicken hören. Andere. Beachten Sie, dass das Spaß macht, aber eine Animation. Hilft nicht. Es ist da, um beeindruckend zu sein, kein Feedback zu kommunizieren. Im Allgemeinen ist eine Mikrointeraktion UI-Feedback. Werfen wir einen Blick darauf und das ist Seitenübergang. Das hier weiß ich nicht. Sie werden ein bisschen verschwommen. Manchmal wartest du, also ist das gut. Dieser kleine Ladebildschirm und das kleine [LACHEN] Konfetti am Ende. Ich werde das in die Mikrointeraktionen einbinden, aber es ist ein bisschen an der Grenze. Schauen wir uns eine weitere Seite an. Anzeigen werden dir überall auf dieser Seite folgen. Du kannst sagen, was ich in letzter Zeit gekauft habe. [GELÄCHTER] UX-Designer/Auto wirra brauchen Bits. Werfen wir einen Blick darauf. Animation. Ein bisschen von beidem. Ich habe Mikrointeraktion. Mal sehen. Das ist gut. Sieh dir das an. Sieh es dir an. Grün, alles bedeutet, dass du es fertiggestellt hast. Schauen wir uns das nächste an. Es hat einen guten. Es wird rot. Sieh es dir an. Kannst du sehen, dass es zittert? Bedeutet nein. Es sagt nichts, es kommuniziert nur visuell das Nein mit dir. Du verstehst die Idee. Irgendwelche anderen? Animation. Das ist cool. Los geht's, Mikrointeraktion, hilfreich. Das wird es sein, versprochen. Irgendwelche letzten? [GELÄCHTER] Ein letzter Ort ist, gehen Sie einfach zu etwas wie Dribbble oder Behance und tippen Sie Mikrointeraktion ein und Sie werden wieder eine Mischung aus beidem finden . Aber dieser hier ist gut, solange du amerikanische Dollars benutzt. Es gab einen. Ich werde sie nicht alle durchgehen. Du verstehst die Idee. Sieh mal. Downloaden und etwas passiert. Diese kleine Linie, kleine Mikrointeraktionen. Letztes, versprich es. Wenig Last, Wolken fliegen meiner Meinung nach auf der Mikrointeraktionsseite vorbei. Das, meine Freunde, ist eine kleine kurze Einführung in Mikrointeraktionen. Lass uns im nächsten Video eins machen. 67. Dan Zeichenmaterial in Adobe XD: Hallo allerseits. Willkommen zum langweiligsten Video, das ich je gemacht habe. Ich dachte, ich mache dieses Video als ich es abgespielt habe, ich dachte, ja, ich mache ein Video, in dem ich dieses Zeug zeichnen werde und es muss gezeichnet werden, anstatt einfach zu überspringen, dass es gezeichnet wird. Ich dachte, ich mache es und du könntest mitkommen und super interessant sein. war es nicht, aber es ist immer noch hier [GELÄCHTER], also kannst du mitspringen, weil nichts wirklich Aufregendes passiert, außer einer sehr durchschnittlichen, aussehenden Lkw-Iconbox-Sache. Ratet mal, was das ist? Ich hoffe du denkst, dass es eine Schachtel ist, denn in der Zwischenzeit musst du entscheiden , wie du ein Paket als Icon machst , aber trotzdem werde ich diese zeichnen, ich werde im Grunde Dinge behandeln, die wir habe bereits im Kurs behandelt, es ist eine Weile her, seit wir etwas gezeichnet haben , also werden wir sie alle hier hineinwerfen, du wirst sehen, wie ich diese hässlichen Dinge mache und das war's, sonst nichts geht einfach um auf der Seite gelandet zu sein. Aber ja, wir werden sie im nächsten Video animieren. Da gehst du, genieße oder überspringst du voraus, es macht mir nichts aus. Das Zeichnen beginnt. Jetzt könnten Sie versucht sein hier auf der Pasteboard zu zeichnen. Das Problem dabei ist, dass Sie die Referenz skalieren und sie am Ende wirklich groß oder zu klein zeichnen und dann skalieren müssen, aber am Ende haben Sie wackelig aussehende Häuser wie dieses [LACHEN] weil Sie die Größe ändern und neue Grenzen auswählen und Dinge ausrichten müssen. Es ist am besten, einfach nur auf Ihre eigentliche Kunsttafel zu zeichnen , damit Sie einige Vergleiche erhalten. Mit dieser Art Board gibt es zwar viel drauf, und ich möchte es nicht bewegen, denn es ist alles nur Stücke. Sie können alles auf der Kunsttafel auswählen, mit der rechten Maustaste darauf klicken und sperren sagen, damit es nicht verschoben werden kann. Sie können das Ganze auswählen, es auswählen, alles auswählen, mit der rechten Maustaste darauf klicken und auch „Entsperren“ sagen , oder wir können es einfach ausblenden. Es liegt an dir. Ich zeichne das. Wir beginnen mit einem Rechteckwerkzeug, und ich werde etwas herauszeichnen, mein Prozess war, nur damit du es weißt, ich habe das LKW-Symbol gegoogelt und das Paketsymbol gegoogelt und ich habe gerade angeschaut Dinge, die ich mag und einige von ihnen sind in der Nähe und einige von ihnen waren es nicht und sie hatten einfach ein bisschen ein Netz. Ja. Ich werde eine Füllfarbe auswählen, ich werde keinen Strich haben, um die Ecken, einige von ihnen halten Option oder Alt auf einem PC, holen Sie sich die untere Ecke. Jetzt pin für das Fahrerhaus an. Ich zeichne einfach mit geraden Linien. Lass es mich wie ein kleiner Ausschnitt für das Fenster machen. Wenn es nicht aufgestellt wird, ja, ist es gut aufgereiht. Ich hole mir das Auswahlwerkzeug, welches die V-Taste ist. Wir doppelklicken zuerst darauf. Was auch immer wir versucht haben, zu Illustrator zu gehen, um dies zu tun, wahrscheinlich nicht zu sagen, dass Sie etwas wie Icons und Sachen wissen , wofür Xd perfekt ist. Lassen Sie uns das ausfüllen. Eigentlich nein, ich bin mir nicht sicher, was ich dort sagen würde. [GELÄCHTER] Wenn du Dinge wie Striche machen willst, kannst du Dinge sehen, die sich aufstellen? Du musst dich daran erinnern, dass wir es früher im Kurs gemacht haben, es gab eine Möglichkeit, B zu sagen, lass mich es größer machen, damit du sehen kannst. Halbes Tutorial, halb schau mir zu, wie ich es mache. Sie können sehen, dass Sie es innen legen können, es könnte Zeiten geben, in denen das notwendig ist, brauchen Sie es in meinem Fall nicht. Ich muss ein paar Räder zeichnen. Ich dachte, das könnte interessant sein, aber [LACHEN] ist es nicht dankbar. Ja. [GELÄCHTER] Ich dachte nicht wirklich, dass das schwer sein würde, es ist nicht gut für die Leute. [GELÄCHTER] Das ist es definitiv nicht. Alles klar, also das wird mein Truck sein. Zeichnen wir die Kiste. Ich bringe es dazu, in das Ding zu fallen. Die Sache ist dabei, als ich nach Ikonen von Boxen suchte, sind sie alle dreidimensionale und sie arbeiten nicht mit meinem kleinen eindimensionalen LKW, also musste ich versuchen, einen Weg zu finden . Zunächst einmal eine Art Strich und ich will abgerundete Kanten, lass uns rundum die Grenze gehen, drei. Jetzt können Sie sehen die abgerundeten Ränder nicht funktionieren, Sie sind wie, äh, warum macht es nicht mehr abgerundete Ecken? Es hat die abgerundeten Ecken, drei sind nicht viel, aber man kann auch sehen alles versucht, es innen zu stopfen, also wenn es nach innen kommt, gewinnt es scharf. Was meine ich damit ist, draußen ausgeprägter in der Mitte. Ich weiß nicht, wonach ich gesucht habe, so etwas. Wir müssen Band haben. für das Rechteckwerkzeug Lassen Sie uns für das Rechteckwerkzeug eine Füllung davon geben, zwei davon bitte, sieht das wie Band aus? Zwei von denen bitte, halten Sie die Umschalttaste gedrückt, wählen Sie alle aus, gehen Sie in die Mitte, sprechen Sie Dan [unhörbar]. Du [LACHEN] bekommst einen kleinen Pfeil dafür ist das Einzige, was es wie eine Schachtel aussehen lässt Wenn du ein wenig auf Arrow hast, würde ich das Glas nicht zerbrochen zeichnen, zerbrechliches Ding, aber ich benutze das Pin-Tool, mache einen kleinen Pfeil oben, ich schüren unten. Ich spiele mit mir herum, stelle sicher, dass ich die richtige Farbe bekomme, stelle sicher, dass ich die richtige Größe bekomme. Das ist mein Pfeil nach oben, etwas Angemessenes. Ich möchte, dass sie die kleinen Bloby-Enden haben und ich werde es gruppieren und ich will zwei von ihnen, dann werde ich sagen, dass du da gehst. Sieht das jetzt aus wie eine Schachtel oder irgendwie wie eine Schachtel? Wählen Sie beide aus, halten Sie die Umschalttaste gedrückt, sonst machen sie ein paar seltsame Sachen. Halten Sie die Umschalttaste gedrückt, schnörkel sie rein, los geht's. Sehen Sie sich diese kleinen Punkte oben an, ich werde die Gruppierung aufheben, also habe ich die Grenze ausgewählt und statt der kleinen Gehrungskante werde ich mit dieser Rundung herumgehen. Alles klar, ich wähle alles aus, ich gruppiere es, ich gebe ihm einen Namen, ich nenne diese eine Box. Dieser hier wird mein Truck sein. Gefällt mir der Truck? [GELÄCHTER] Das tue ich nicht wirklich. Doppelklicken Sie darauf, um reinzugehen. Ich lösche diesen Ankerpunkt, indem ich ihn einfach auswähle und lösche, und ich mache ein größeres Fenster. Ich will das Schrägdach nicht mehr, ich will Mack Truck. Da sind wir los. Alles klar. Das reicht. Sie sind es nicht mit Truck, also wähle ich alles aus, gruppiere es, kontrolliere G und gehe Truck. Dass mein Freund, diese aufregende Episode [LACHEN] war, dass ich eine Kiste und alle fragwürdigen Trucks zeichnete. Alles klar, lasst uns gehen und es im nächsten Video animieren. 68. Mehr Animation in Adobe XD: Hallo allerseits. Es ist Zeit , ein paar Animationen zu machen. Wir haben schon einmal Animationen gemacht. Wir haben gerade früh im Kurs einen wirklich grundlegenden gemacht. Ich wollte es damals vorstellen, aber jetzt haben wir viele Zeichenfähigkeiten und andere Fähigkeiten , Computer-Hacking-Fähigkeiten. Wir wollen das jetzt nehmen und das, was wir in der Animation gelernt haben, nehmen und einfach etwas komplexeres oder zumindest Schöneres machen . Ich gehe und kaufe jetzt Button, ich habe fertig gekauft. Das werden wir machen. Schau dir an, wie sie reinkommen, sieh es dir an, wie es springt. Er macht ein bisschen Wheelie und geht. Wir werden dies gemeinsam mit vielen Techniken aufbauen , die wir bereits kennen. Ich weiß, ich habe versprochen, dass wir Mikrointeraktionen in [LACHEN] einem der vorherigen Videos durchführen werden. Das sind wir nicht, wir machen momentan nur eine vollständige Animation , um unsere Fähigkeiten zu verbessern. Dann habe ich das Gefühl, dass es besser ist, das zu tun und dann in den nächsten Dish Videos in die Mikrointeraktionen einzusteigen . [GELÄCHTER] Das ist es. Fangen wir noch einmal mit unserem Sweet Truck an. Lass uns loslegen. Fangen wir an zu animieren. Im ersten Schritt wähle ich alles aus, weil Teile davon gesperrt waren. Ich klicke mit der rechten Maustaste darauf. Seltsamerweise kannst du es nicht freischalten. Sie können überhaupt sperren und dann mit der rechten Maustaste klicken und entsperren, damit das funktioniert. Oder wenn ich rückgängig mache, kannst du hier sehen, mach das rückgängig. Sie können sehen, dass ein Haufen von ihnen gesperrt sind. [NOISE] Ich bin in meinem Ebenen-Panel, ganz bei dir. Was ich tun möchte, ist das loszuwerden. Ich kann nicht mit der Karte leben. Du kannst die Karte behalten. Sie mögen die Karte mögen, aber ich finde sie für diese zu ablenkend. Ich mache einfach so etwas. Ich bin im Prototyp-Modus, sollte im Entwurfsmodus sein. Los geht's. Gute Praxis für Animation ist, dass ich genug Platz habe , weil du am Anfang gesehen hast , dass der Bildschirm startet, also brauche ich hier etwas Platz. Ich halte die Verschiebung, damit sich diese Art Board bewegt. Ich dupliziere diese Kunsttafel, indem ich die Optionstaste gedrückt halte und die Alt-Taste auf einem PC ziehe, kopiere Einfügen. Es gibt dir noch einen. Das große Problem beim Animieren, und ich vergesse jedes Mal, wenn ich es mache, dass ich so bin, ich hier drüben vom Bildschirm starten und dann hierher gehen wollte . Aber es wird nicht funktionieren, weil es in dieser riesigen Pasteboard gelandet ist . Es spielt keine Rolle, was ich jetzt mache, es wird nicht animiert weil es nicht mehr weiß, dass es auf dieser Kunsttafel ist. Der Trick bei der Animation ist vor allem die Gruppe, die alles genau der gleichen Geschwindigkeit arbeiten wird, nicht getrennt. Diese Dinge sind separate Objekte. Sie werden das animieren, das ich versuche zu sagen. Ich habe sie Truck und Box genannt und gruppiert. Das ist gute Praxis und der Name hier drüben. Der Trick, etwas zu tun, besteht darin, zuerst die Animation oder zumindest den Übergang hinzuzufügen . Wenn ich einen Prototyp habe. Spielt es überhaupt eine Rolle, was ich hinzufüge? mir egal, was hier drüben ist. Das heißt nur, wenn ich das abziehe und Entwurfsansicht oder den Prototypmodus, kannst du es trotzdem sehen? [GELÄCHTER] Das hat nicht funktioniert. Prototyp-Modus, er ist hier verbunden . Brauche keine zwei von ihnen. Warum arbeitest du nicht? Gebt mir eine Sekunde. Ich bin zurück. Sie können wahrscheinlich die Uhrzeit dort oben sehen. [GELÄCHTER] [unhörbar]. Es war eine gute Minute oder so, dass ich ging, ich habe mich daran erinnert, wie es geht. Ich kann mich nicht erinnern. Ich mache es rückgängig. passiert den Besten von uns. Ich hab's rausgefunden. Was passiert ist, dass Sie Ihre Animation hinzufügen müssen, aber sie muss automatisch animiert werden, wenn sie gerade im Übergang ist. Ich kann es von der Uhr ziehen. Sieh mal, es geht zur Fußleiste. Aber wenn ich meine Animation hinzufüge, so Prototyp und meine Animation. Aber diese Animation wird zufällig automatisch animiert dann sperrt sie diese Jungs und Sie können sie sehen und abziehen. Er ist nicht auf die Pinnwand, jetzt ist er immer noch auf dem Bestätigungs-HIFI. Wir haben alle etwas gelernt. Ich starte sie außerhalb des Bildschirms. Er wird dort in der Mitte landen. Lassen Sie uns eine Vorschau geben. Klicken Sie hier auf die Überschrift. Vorschau. Deiner macht vielleicht nicht genau das Gleiche. Denkweise darauf, es könnte tippen. Deiner ist auf eingestellt. Ich will meins nach einiger Zeit und ich möchte, dass es null Zeit hat, um dann automatisch zu diesem anderen Ziel zu animieren. Sie können entscheiden, dass Sie sich entspannen möchten. Ease out ist wahrscheinlich der schönste und dieses. Es wird am Anfang schneller gehen und langsam nach draußen gehen. Ich werde mich damit herumspielen. Ich mache eine Sekunde. Schauen wir uns ein bisschen an. Es gibt viel zu spielen mit dem Lockern und einfach gehen. Da gehst du. Ich fühle mich wie er, ich fühle mich gut. [GELÄCHTER] Jetzt wird dieser in den Truck fallen. Nun, ich zeige dir einen weiteren Trick dass ich diesen hier löschen werde. Ich gehe zu meiner Design-Ansicht. Ich möchte, dass es hier landet. Los geht's, da. Ich kopiere es und gehe dann hier rüber. Es heißt Box. In diesem Fall werde ich einfügen, es geht an genau derselben Stelle zurück, was großartig ist. Es ist immer noch Go Box , die funktionieren wird und ich werde es mit der Umschalttaste nach oben verschieben. Das ist es, was ich tun möchte. Eigentlich möchte ich das nicht tun. Was ich tun möchte, ist ihn von diesem ersten runter zu bringen. Ich wollte eine Progression sein. Was ich nicht tun möchte, ist alles gleichzeitig passiert, denn sieh dir das an, sie werden die gleiche Lockerung benutzen, die heißt, sieh das. Es funktioniert. Aber ich werde sie am Ende in einer Progression machen. Was ich tun möchte, ist nicht zu diesem zu sagen. Tu das nicht, nur minus es raus. Habt euch das an. Lassen Sie uns das duplizieren. Stellen Sie sicher, dass es unter dem Prototyp eine Verbindung hat, die sich daran erinnert, was ich animiert habe. Vergiss das nicht. Was ich will ist, dass ich wach sein wollte. Dann möchte ich das hier sein, schauen wir uns an, prallen endlich. Es ist Sprungzeit, jeder könnte tatsächlich arbeiten. Lass es uns mal ausprobieren. Geh zurück und klicke auf „Play“. Es hat es geschafft. Gibt es eine Pause bei diesem? Die Zeitverzögerung beträgt 0 Sekunden. Bounce braucht nur ein wenig Zeit, um auf den fröhlichen Weg zu kommen. Es war aber ziemlich gut. Ich bin glücklich mit mir selbst. [GELÄCHTER] Lasst uns jetzt den Truck zum Abheben bringen. Dupliziere es. Machen Sie es sich zur Gewohnheit, auf Prototyp-Mitglied zu gehen. Überprüfen Sie, ob es automatisch animiert wird, weil ich möchte, dass es aus dem Bildschirm geht und mein in den Entwurfsmodus zurückkehrt. Es wird ein bisschen Wheelie machen. Beide Masken, ich nehme beide [LACHEN] und treffe ab. Hoffentlich landet es nicht in der Pasteboard. Abgesehen von der Lockerung schauen wir uns mal an. Es prallt ab. [GELÄCHTER] Es sieht nicht gut aus. Sieht aus, als hätte es einen kleinen Absturz. Lass es uns mal ausprobieren. Fällt rein. [GELÄCHTER] Köpfe von allen. Ich benutze einfach den Prototyp. Dieser hier werde ich gehen statt Bounce zu springen, es ist ziemlich gut, wie benutzt die Vorfreude, dass das ganze zurückgeht, bevor es vorwärts geht. Lassen Sie uns eine Vorschau geben. Zuschauen. Nett und eine kleine Verzögerung zwischen diesen beiden. Du hast nach null Sekunden vielleicht 1,5 Sekunden. Noch eine Vorschau. Zu lang. Vielleicht nur eine halbe Sekunde Pause, 0,5 Sekunden. Die andere Sache ist diese Kiste. Ich möchte, dass es hier im Entwurfsmodus startet, ich möchte, dass es die Deckkraft Null ist, also erscheint es aus dem Nichts. Vielleicht werden wir es dazu bringen, dass es dahinter herausfällt . Bist du bereit? Kannst du sehen, dass es viel mehr Kraft hat? Das ist interessant, denn was am Ende passiert, ist zwischen diesem und diesem, ein Prototyp-Modus dazwischen, ich gebe ihm eine Sekunde für den Bounce. Je weiter es sich bewegen muss, schau dir das hier oben an. Ich habe noch eine Sekunde Zeit, um den ganzen Weg hierher zu kommen. Es wird viel schneller gehen, muss in einer Sekunde hierher kommen und es springt. Sieh mal, es ist viel schneller. Das ist das Timing, mit dem du herumspielen musst. Von hier aus möchte ich, dass es wahrscheinlich etwa zwei Sekunden dauert. Spiel einfach weiter damit. Sie können sehen, dass ich ein grundlegendes Design machen kann, zumindest Dinge bewegen kann, während ich im Prototypmodus bin. Das musst du nicht. Sie können zwischen Design und Prototyp wechseln. Ich wette, es ist Option eins , zwischen die beiden zu kommen. Auf einem PC ist es Alt eins und zwei. Wenn es nicht Alt ist weil ich keinen PC mehr vor mir habe, einfach den Mauszeiger darüber und es wird Ihnen sagen, welcher es ist. Ich wurde von der PC-Verknüpfung abgelenkt. Lassen Sie uns eine Vorschau geben. Letztes verspreche ich es. Es kommt rein, springt in warum dauert viel zu lange und dann aus. Schau dir unsere kleine Animation an, braucht wahrscheinlich jetzt ein kleines Bestätigungs-Tick. Oder fahren Sie mit dem Einkauf oder kehren Sie den Home-Button oder vielleicht kurz nach einer gewissen Zeit. Es geht nach dir, benutze eine Abkürzung. Nach einiger Zeit können Sie es einfach ziehen, Sie können einfach darauf klicken. Sag eigentlich nach einiger Zeit möchte ich, dass es auf die Homepage geht. Jetzt schau, wie chaotisch das ist. Ich will Homepage-Marketing, HIFI. Ich glaube. Nennen Sie Ihre Seiten, Leute. Bounce nicht und ich möchte nicht, dass es automatisch animiert wird. Ich wollte nur auf diese Seite wechseln. Löse dich auf. Ich will nicht, dass es springt. Selbst mit einem Bounce wirst du es nicht wirklich mit einem Übergang sehen, es spielt keine Rolle, was du benutzt. Du darfst es nicht wirklich sagen. Ich sagte beim letzten Mal, das ist das letzte Mal. Ich möchte diesen Raum nicht wechseln. 2.5 bereit, stabil. Wir sind wieder auf der Homepage. Schön. Meine Freunde, das ist eine Animation, eine Zusammenfassung einiger von diesem Zeug, das wir kennen. Wenn Sie irgendwann etwas außerhalb des Bildschirms haben, denken Sie daran, zuerst die Animation hinzuzufügen . Was musst du tun? Welche Prototyp-Animation müssen Sie dazu hinzufügen? Automatisch animieren, sonst geht es in die Pasteboard. letzte. Jetzt kaufen. Schaltfläche „Kauf“. Sieh dir das an, das ist der Go, den wir gemacht haben. [GELÄCHTER] Das ist es definitiv. Es ist fertig. 69. Kursprojekt – Meine zweite Animation: Dieses Unterrichtsprojekt ist Ihre zweite Animation. Denken Sie daran, dass wir einen Weg zurück mit dem kleinen Pfeil gemacht haben. Ich möchte, dass Sie etwas anderes und Einzigartiges für Ihr aktuelles Projekt tun. Ich habe dieses Van-Ding gemacht. Du kannst etwas Ähnliches machen. Recherchiere ein bisschen. Suchen Sie nach Bestätigungsseite oder Checkout-Animation. Suchen Sie nach solchen Dingen, die Sie möglicherweise Ihr tatsächliches Produkt integrieren können. Ich habe gerade diese normale alte Kiste gemacht. Je nachdem, was Ihnen gehört, könnten Teeblätter sein oder was auch immer Sie in diesem Kurs stecken geblieben sind. Sei kreativ, sei einfach. Es liegt an dir. Du kannst aufwendig sein. Das Minimum beträgt drei. Etwas, irgendwas, irgendwas, aber du wirst vielleicht verrückt. Sie könnten 20 von ihnen sein. Spielen Sie mit den verschiedenen automatischen Animate-Vereinfachungen herum. Wenn du fertig bist, nimm ein Video davon auf. Denken Sie daran, dass es auf einem Mac einfach ist, es ist da oben. Auf einem PC ist es dort drüben schwieriger. Möglicherweise verwenden Sie eine andere Bildschirmaufzeichnungssoftware. Das ist in Ordnung, solange Sie Ihre Animation aufnehmen und entweder das Video oder den Link hochladen können. Lade es auf YouTube oder Vimeo oder Behance oder so hoch und sende uns den Link. Wenn Sie den Videocode nicht knacken konnten , können Sie einfach einen Screenshot all dieser Seiten wie diese erstellen, damit wir sehen können, was los ist, all diese Seiten und das hochladen. Stellen Sie sicher, dass Sie es sowohl in den Aufgaben als auch in den sozialen Medien teilen . Es ist eines der aufregendsten Dinge, die man sehen kann, sind jedermanns Animationen. So einfach sie auch sein mögen, keine Sorge, es muss nicht erstaunlich sein. Ihre Zeichenfähigkeiten dürfen schrecklich sein. Wir lernen, wir fangen an, es ist total okay. Teilen Sie sie sowieso. Ich glaube, das war's. Zeichne deine eigenen Elemente, mindestens drei Frames, erstelle deine eigene Animation, und das war's. Wir sehen uns im nächsten Video alle. 70. toggle Switch in Adobe XD: Hallo allerseits. Willkommen bei Kippschaltern. Wir werden ein wenig Mikrointeraktion machen. Wir werden unsere Fähigkeiten aus Animation und einige Dinge wie Staaten kombinieren . Erinnerst du dich an den Toggle-Zustand, den wir für diesen gemacht haben Wir werden die Animation kombinieren und einen coolen kleinen Kippschalter machen. Es ist ein Übergangsritus als UX-Designer, also lehnen Sie sich zurück, entspannen Sie sich und lassen Sie uns alles umschalten. Jetzt kombinieren wir im Grunde zwei verschiedene Dinge, die wir getan haben. Wir haben die Umschaltoption gemacht, wie diesen kleinen Button hier. Denken Sie daran, dass wir einen Status erstellt haben und er hat eine Umschaltoption und wir werden einige unserer von uns gelernten Animationen hinzufügen. Der Unterschied zwischen dieser Animation und Animation, die wir machen werden , besteht darin, dass sie innerhalb der Komponente passiert. Es geht nicht von der Kunsttafel zur Kunsttafel. Sie brauchen dies, weil wir das Timing benötigen , während die Mikrointeraktion nur eine kleine Animation ist , die innerhalb einer Komponente stattfindet . Lass es uns bauen. Lasst uns einfach etwas ganz schnell bauen und damit nicht gut anfangen. Wir werden uns keine Sorgen um die Entwurfspunkte machen. Wir bringen die Mechaniker in Schwung und dann lassen wir es am Ende hübsch aussehen. Rechteck-Werkzeug. Machen Sie die Außenecken rund. Etwas Pillenform, Kreiswerkzeug, halten Sie die Umschalttaste gedrückt, geben Sie ihm eine Füllfarbe. Das ist alles was wir brauchen. Ich wähle beide aus, wandle sie in eine Komponente um , Befehl K oder klicke auf diese Schaltfläche. Was wir hier brauchen, ist, dass wir einen Staat brauchen, wir brauchen einen anderen Staat, genau wie zuvor. Wir haben den Umschalter gemacht, wie das kleine Optionsfeld, das wir gerade gesehen haben, und wir werden im Status haben. Alles was wir tun ist, dass wir gehen, sicherstellen, dass wir dran sind, doppelklicken, um hineinzugehen und etwas anderes zu machen. Was passieren wird, ist, dass die automatische Animationsanimation standardmäßig aktiviert wird und es uns ausprobieren. Eigentlich lassen Sie uns zuerst eine Vorschau anzeigen. Ich kann nicht wirklich eine Vorschau anzeigen, weil es nicht auf einer Kunsttafel ist. Lasst uns sie auf etwas stecken. Ich werde das größer machen. Wir bauen auf Menschen aus Kunsttafeln auf. Los geht's. Mein riesiger Kippschalter, mein Riese. Lass uns gehen und eine Vorschau ansehen. Es ist hier, sieh zu. Cool. Es ist so ein cooles Gefühl, solche Dinge zu machen . [GELÄCHTER] arbeiten. Es waren einfach zu langweilige alte Formen und schau dir an, was wir getan haben. So macht man den Kippschalter. Das ist ein Übergangsritus. Sie müssen diesen Kippschalter als UX-Designer erstellen. Du brauchst es nicht mal. Es ist sehr selten, als ich einen Kippschalter brauche, außer neuen UX-Designern beizubringen , wie man einen Kippschalter baut. Aber es ist eine wirklich gute Mikrointeraktion, es ist wirklich gut klar, was passiert. Wir können es klarer machen. Machen wir es also mikrointeraktionischer. Wir werden reingehen und es stylen. Nun, was einfacher ist ist, dass Sie es stylen, bevor Sie es in eine Komponente verwandeln. Wir machen jetzt etwas, solange es eine Komponente ist, passen Sie es einfach an und dann zeige ich Ihnen einfach die normale Vorgehensweise. Lass uns drin gehen. Lassen Sie uns entscheiden, in welchem Zustand wir uns befinden wollen, Wollen wir diesen Zustand oder diesen Zustand anpassen. Lasst uns das zuerst machen. Was wir tun werden, ist es vielleicht langweilig zu machen. Machen wir es aus und verwenden Sie die internationale Off-Farbe, die rot deaktiviert sein wird, so etwas. Es ist im Allgemeinen entweder grau oder rot. Wir benutzen Rot, weil es schick aussieht. Ich mag eindeutig kein Rot. Ich geh auf eine Art nicht Rot. Wir haben das zuerst und dann im On-State hier drüben, denken Sie daran, dass es auf beiden Seiten unserer automatischen Animate dasselbe sein wird , wenn wir es nicht ändern. Im Moment haben wir unseren Standardstatus aktualisiert und es ist nicht anders also wird er hier drüben rot bleiben. Wir werden jetzt sagen, dass du grün sein wirst. Lass uns ein helles Grün machen, zu hell. Jetzt sehen wir es uns in der Vorschau an. Du wirst es tun, Play Button wo bist du? An, aus, an, aus. Warum hat es grün angefangen? Weißt du es? Das tust du. Weißt du noch, weil wir es verlassen haben. Wo auch immer Sie das lassen, denken Sie daran, das ist der Ausgangspunkt. Wir gehen davon aus, dass es ausgeschaltet ist und schalten es ein, um grün zu sein. Cool. Lassen Sie uns mit der Animation noch schicker werden. Es hat ein paar Standardsachen hinzugefügt und es gefällt dir vielleicht nicht. Wo passt man die Lockerung an? Erinnerst du dich? Wo würdest du hingehen? Denk mal nach. Wo würdest du jetzt hingehen , wenn du es überlassen würdest? Ich wähle es aus. Du gehst zum Prototyp. Du kannst das kleine sehen, ich gehe nirgendwohin. Es hat den Standardstatus, hat einen Tap, was ich will. Es ist automatisch animiert, was perfekt ist. Ziel, es geht in den On-State und welche Art von Lockerung? Es lockert sich. Ich gehe rein und raus und lass es uns in der Vorschau sehen. Schauen wir uns mal an, rein und raus. Meinung nach sieht es einfach schöner aus. Es bedeutet, dass es langsam beginnt und langsam endet und in der Mitte schnell geht. Jetzt ist das eine Sache, dass es in diesem schwer zu bemerken ist, machen wir es zum verrückten Bounce und sehen Sie es in der Vorschau an. Was am Ende passiert ist, das zu beobachten, und dann die hintere, warum geht es nicht in die andere Richtung zurück? Du musst dich nur daran erinnern, dass du diese beiden Staaten hast. Im Moment haben wir den Standardstatus und seine automatische Animation mit Balance aber wenn ich darauf klicke, kannst du sehen? Es ändert sich alles. Es nutzt die Leichtigkeit aus. Wenn du es bei beiden machen willst, dann gehst du los. [LACHEN] alter mechanischer Schalter, es fühlt sich an wie. In Bezug auf den Stil gebe ich dir jetzt nur ein paar Grundlagen, weil ich etwas vorstellen möchte. Ich möchte dir auch zeigen, wie ich es normal mache. Was ich im Allgemeinen tun würde, ist nicht all diese Dinge im Staat zu machen. Sie können einen Bundesstaat löschen. Geh einfach zu diesem ersten zurück, ich sollte zu Design gehen. Ich hab immer noch meinen Staat. Es ist immer noch eine Komponente und es ist immer noch schlecht benannt. Wir werden einen Button Toggle haben. Es spielt keine Rolle, ob Sie es stylen, bevor Sie eine Komponente erstellen, sondern kurz bevor Sie alle Zustände hinzufügen weil es schwierig macht, sie alle zu bearbeiten, damit sie übereinstimmen weil ich viele Änderungen vornehmen werde. Ich doppelklicke , um hineinzugehen. Ich halte Shift gedrückt und skaliere es. Ich werde es tun, was ich dir zeigen möchte ist, dass du Bonuspunkte bekommst, wenn du einen inneren Schatten machst. Ich habe meinen inneren Schatten hier und tatsächlich gebe ich ihm eine Füllfarbe von was, dann die Schnittstellenfarbe, eine alte Windows-Farbe, die dort hineingeht. Es gibt keine Regeln, was Sie dafür tun können. Wenn Sie beispielsweise für Android- oder Apple-Handys entwerfen , verwenden Sie das Betriebssystem. Oft können Sie diese Kippschalter nicht standardmäßig ändern , sodass Sie einfach eines der UI-Kits von Apple kopieren und einfügen, iOS, das sie nennen, oder Google nennt es Google-Material. Du wirst sie einfach hier einfügen. Wir möchten jedoch unsere eigenen benutzerdefinierten Buttons machen , weil wir großartig sind. Ich mache einen inneren Schatten, den du dort sehen kannst. Dies ist X und Y ist wie weit unten von oben und wie von rechts es ist, und B ist das Blau. Diese kleine Option hier ist, wie dunkel es ist. Also werde ich das Schwarz benutzen, das ist die Transparenz. Du kannst einen inneren Schatten von Rot haben. Das will ich nicht. Du kannst entscheiden, wie dunkel dieses Ding ist. Ich werde es so kriegen und dann werde ich gehen wie verschwommen. Benutze meine Pfeiltasten, um nach oben und unten zu gehen , so etwas und werde die Grenze los. Ich brauche irgendwie die Grenze. Das hier, wir werden auch einen Schlagschatten hinzufügen , weil, warum? Nur weil. Verschwommen auch, vielleicht zwei und vielleicht muss das nur eins und eins sein. Vielleicht ein bisschen dunkler. Sie können sehen, dass Sie lange herumspielen können , bevor Sie die nächste Stufe machen , um es schöner zu machen. Ich könnte meine einfach so alt machen. Jetzt kann ich meinen zusätzlichen Status hinzufügen. Ist das hübsch? Wir werden unseren eigenen Zustand haben, und dieser wird die Mikrointeraktionen haben, um hierher zu gehen. Es wird grün werden. Anstatt grün zu werden, können wir den Hintergrund tatsächlich grün machen. Die Hintergrundfarbe wird also wie eine positive Farbe aussehen. Finde ein gutes Grün und vielleicht lassen wir das weiß werden. Los geht's. Denken Sie daran, unser Ausgangszustand wird ausgeschaltet sein. Lassen Sie uns eine Vorschau geben. Ist es gut? Es sieht cool aus. Sie können sehen, dass das innere Schatten-Ding von weit hinten anders funktioniert. Es ist gut, dieses Ding geöffnet zu haben. Ich habe es auf einem anderen Bildschirm geöffnet. Du kannst diesen Bildschirm nicht sehen, aber einfach so wenn ich ganz nah dran entwerfe. Sieh dir das an, naja, du tust so, als wäre es auf einem anderen Bildschirm. Ich kann hier reingehen und ich kann anfangen, mich mit dem Schatten zu beschäftigen und eine wirklich weit entfernte Version zu sehen. Noch besser, wenn Sie es auf Ihrem Handy haben, denn dann können Sie es anfassen, während Sie gehen. Die andere Sache, die ich mit Ihnen teilen möchte , als wir es viel früher im Kurs angesehen haben , war Responsive Resize. Es passiert nicht, wenn es eine unregelmäßige Form hat, aber wenn es sich um eine solche Komponente handelt, schau dir das an, wenn ich gehe, es tatsächlich zu groß und ich mache es kleiner, halte die Umschalttaste gedrückt und skaliere es nach unten. Was machst du? Es macht ein paar seltsame Sachen. Es liegt daran, dass das eingeschaltet wird, wenn es sich um eine Komponente handelt. Es versucht schick zu sein , wo du das machen kannst. Das ist ein toller Knopf zum Nachjustieren. Wir haben es bisher geliebt, aber für dieses Ding wollen wir alles proportional skalieren. Es macht ein paar seltsame Sachen. Sie können es ausschalten, dann die Umschalttaste gedrückt halten und regelmäßig nach unten skalieren . Du wirst bemerken, dass der innere Schatten du sehen kannst? Bleibt gleich, also müssen Sie das anpassen, und Sie können Responsive Resize wieder aktivieren, sobald es klein ist , und Ihre Anpassungen wie zuvor vornehmen. Aber das ist nur eine Erinnerung, wenn Sie Komponenten erstellen, diese Responsive Resize aktiviert ist. Alles klar, Suite umschalten. Gehen Sie zum Umschalten, seien Sie Teil der UX Design Community. Es gibt Überprüfungen auf Designkonferenzen um sicherzustellen, dass Sie Ihren Kippschalter gemacht haben Sie überprüfen ihn an der Tür Stellen Sie also sicher, dass Sie Ihre Kippschalter herstellen. Ich werde dich dazu bringen, in ein paar Lektionen einen Kippschalter für deine Unterrichtspraxis zu machen. übe jetzt und du wirst Sicherheit einen machen. Alles klar. Das ist es. Kippschalter ist vorbei. 71. Die Micro: Hallo du. Fühlst du dich schon wie ein UX-Designer? Wir sind diesem Kurs ziemlich fremd . Du solltest anfangen, dich sehr uXY zu fühlen. Wenn du nicht uXY fühlst, gehst du danach hin. Sieh dir das an. Es ist ein weiterer Ritus der Passage Animation. Es ist das Kreuz, das sich in das Burger-Menü verwandelt oder umgekehrt. Wie der Kippschalter ist es ein Übergangsritus. Das Gleiche wie das Erlernen der Linsenflare in Photoshop. Weißt du noch, als du das gelernt hast Wie auch immer, lass mich dir zeigen, wie man das in Adobe XD macht. Lasst uns das machen. Brauche nur drei Zeilen, 1, 2, 3. Ich werde nicht zu viel Zeit damit verbringen, sie zu entwerfen. Ich lasse sie einfach gut genug aussehen. Verwenden Sie den Größenpfeil nach oben und unten und machen Sie kleine abgerundete Enden. Das sieht angemessen aus. Cool. Verwandeln wir es in eine Komponente. Drücken Sie „Command“ -Taste „Strg“ -Taste auf einem PC und klicken Sie einfach auf die Schaltfläche. Wir werden zwei Staaten haben. Standardstatus wird das große Menü sein und dann wird dieser Umschaltstatus das Kreuz sein, wir nennen es. Was wir tun werden , ist, dass wir den Standardstatus so belassen , wie er ist, und das Kreuz, wir werden doppelklicken, um hineinzugehen. Dieser mittlere, denk dran, lösche ihn nicht. Drehen Sie einfach die Deckkraft nach unten, damit sie verschwindet und verblasst. Dieser Top-Wert wird 45 Grad sein. Dieser untere hier wird minus 45 Grad sein . Wählen Sie beide aus. Dann hier oben werden wir die Mitte ausrichten und einfach nachsehen. Ich klicke aus, klicke wieder auf. Ich werde nur prüfen, ob sie sich aufstellen , und sie stellen sich auf. Perfekt. Beginnen wir mit dem Standardstatus. Lass uns das ein Theaterstück geben. Lass uns hier runter gehen. Bist du bereit? [GELÄCHTER]. Das liebe ich. Lass uns gehen. Ich habe das eine Millionenmal gemacht, aber es ist immer noch aufregend. Du machst es, du wirst aufgeregt sein. Gib es einen Klick. Es ist schwer aufzuhören zu klicken. Es bewirkt nicht mal etwas. Etwas später im Kurs erstellen wir ein Menü, das tatsächlich in einem kleinen Navigationsgerät erscheint, das auf dem Mobilgerät angezeigt wird. [GELÄCHTER]. Ich höre auf, darauf zu klicken und wir fahren mit dem nächsten Video fort. Wir werden eigentlich nur eine Kleinigkeit machen , nur um es zu wiederholen. Wenn Sie das Timing ändern möchten, denken Sie daran, dass Sie Ihren Status ausgewählt haben, Burger-Menü ausgewählt haben, wechseln Sie dann zum Prototyp und Sie können auf die verschiedenen Bundesstaaten klicken. Standardstatus, wenn Sie möchten, dass es ein- und ausgeht , ist das mein Favorit. Wie schnell? 0.5, werde nicht üben, ich bin mir eigentlich nicht sicher. Ich mag auf jeden Fall Leichtigkeit ein- und aussteigen. Ich mache es beides, also machen sie beide das Gleiche. Wir machen 0,5. Mal sehen, wie es läuft. Vorschau. Ich weiß nicht, vielleicht ein bisschen langsam, vielleicht zurück 2.3, aber los geht's. Menü umschalten. Klicke sie alle an. Das war's. Wir sehen uns im nächsten Video. 72. Kursprojekt 15 – Mikrointeraktion: Es ist an der Zeit, Ihre eigenen Mikrointeraktionen zu machen. Es wird zwei geben , die wir bereits gemacht haben. Wenn Sie sie noch nicht gemacht haben, stellen Sie sicher, dass Sie diese tun. Das ist der Kippschalter und das Burger-Menü, das sich in ein Kreuz verwandelt. Dann deine eigene Gewohnheit. Kippschalter kann echt, einfach und einfach sein. Sie können alle real, einfach und einfach sein. Vielleicht versuchen Sie nur, diesen Kurs zu durchlaufen , um damit weiterzukommen, aber wenn Sie etwas mehr Zeit haben , recherchieren Sie ein wenig. Es gibt ein paar wirklich coole Dinge, die Sie mit einem Kippschalter machen können. In diesem Fall, weil dies ein Kurs ist, können Sie ihn so schick machen, wie Sie möchten. In der realen Welt möchten Sie wahrscheinlich, dass es wirklich einfach und klar ist und keine ausgewachsene Animation ist, aber Sie haben die volle Erlaubnis, damit verrückt zu werden einfach und klar ist und keine ausgewachsene Animation ist, aber Sie haben die volle Erlaubnis, damit verrückt zu , wenn Sie Zeit und Lust haben. Sieh dir Kippschalter an, sie sind ein paar wirklich coole Sachen . Burger-Menü. Es gibt nicht viel, was du damit machen kannst. [GELÄCHTER] Zieht tendenziell ein Kreuz. Es gibt verschiedene Möglichkeiten, es in ein Kreuz zu verwandeln. Da gehst du. Die eigene Gewohnheit. Auch hier, wenn Sie Zeit haben, möchte ich, dass Sie ein wenig mit etwas wie , Dribbble ist ein besserer Ort und hat diese wirklich einfachen Miniaturansichten, die Sie in der Vorschau anzeigen können. es dir einfach mal an. Sie könnten sich für etwas ziemlich Extravagantes entscheiden. Das ist fast Animation und nicht wirklich so nützlich als Mikrointeraktion. Oder du gehst vielleicht etwas Einfaches, wie das sieht ein Kippschalter aus. Sieh dir diesen Bloby an. Wie würdest du das machen? Es gibt ein paar tolle Dinge. Es hängt von Ihrem Können und Ihrer Animation und Ihren Fähigkeiten ab. Aber schauen Sie sich ein wenig an, finden Sie einen , den Sie mögen und den Sie möglicherweise reproduzieren, anpassen und versuchen können, es in Ihrer App zum Laufen zu bringen. Sieh dir dein Dokument an und los, was hier? Kann ich als kleine Interaktion aktualisieren oder animieren? Es könnte einfach sein, es könnte ziemlich extravagant sein. Es liegt an dir. Drei von ihnen, Lieferbestandteile, zeichnen Sie das Video auf, wenn möglich, laden Sie es auf eine Video-Hosting-Site hoch, teilen Sie es mit uns und teilen Sie es in sozialen Medien. Wenn du das Video nicht wie zuvor machen kannst, mach einfach einen Screenshot. Das ist es. Klassenprojekt, Mikrointeraktionen. Viel Spaß. Es ist ziemlich aufregend. Nun, ich denke gerne, dass es so ist. [GELÄCHTER] Ich mache gerne Mikrointeraktionen. Hoffentlich tust du es auch. Geh, mach es. Wir sehen uns im nächsten Video. 73. So pinst du die Navigation oben auf Adobe XD: Hallo allerseits. Wie steckt man Sachen fest , damit es nicht mit dem Rest der Seite scrollt? Sehen Sie sich die Navigation oben an, auf wir die Schriftrollen darunter treffen, damit wir immer auf meine Navigation zugreifen können. Wir machen das Gleiche für unsere kleine Snackbar unten hier und ich zeige Ihnen am Ende, wie Sie das auch ausschalten können. Es sieht ziemlich vollständig aus. Lass mich dir zeigen wie. Das erste ist, dass Sie eine Seite benötigen, die tatsächlich scrollt. Dieser hier ist nicht lang genug, um zu scrollen, damit ich es zum Laufen bringen kann, aber ich kann es nicht visuell testen. Diese Seite ist lang genug. Wenn ich eine Vorschau ansehe, ist das Scrollen beteiligt. Während ich auf dieser ersten Seite nicht nach oben und unten scrollen kann. Ich benutze mein Scrollrad, es funktioniert nicht, also musst du deine Seite entweder länger machen. Ich habe bereits eine , die länger ist, aber gehe zur Entwurfsansicht mit dem ausgewählten Seitennamen. Stellen Sie einfach sicher, dass es lang genug ist. Du siehst diese gepunktete Linie und zumindest läuft etwas Scrollen. Ich arbeite an dieser Seite und arbeite an dieser Navigation. Alles, was Sie brauchen, um zu tun, was Sie anheften möchten , es auswählen lassen, zum Prototyp wechseln und dann hierher gehen und „Feste Position beim Scrollen“ sagen , und Sie sind fertig. Lass es uns spielen und schauen uns das an. Es ist nach oben fixiert. Mein Problem ist, dass meine Ebenenreihenfolge nicht ganz stimmt. Je nachdem, wer zuletzt gemacht wurde oder wer oben in der Ebenenreihenfolge steht, müssen Sie diese möglicherweise nach vorne bringen. Lass uns das machen. Wenn es ausgewählt ist, verwende ich die Tastenkombination Command Shift eckige Klammer ständig. Die eckigen Klammern sind diejenigen, die mit Ihrer P-Taste überwunden sind. Es ist Control Shift und eckige Klammern Ich werde es vor und zurück bringen. Wenn wir mit der rechten Maustaste klicken, schicken Sie es zurück. Jetzt möchte ich, dass es mit der rechten Maustaste klickt und es nach vorne bringt. Lassen Sie es uns jetzt in der Vorschau sehen. Lass es uns hier drüben behalten, schau dir das an. Jetzt geht es alles über die Spitze. Es ist jedoch nicht sehr brauchbar. Es ist sehr üblich, eine kleine Hintergrundfarbe hinzuzufügen . Zurück zur Entwurfsansicht. Ich könnte in meine Komponente gehen und hier bearbeiten und es erscheint auf allen von ihnen oder es könnte getrennt sein, wo ich sie einfach kopieren und einfügen muss, nicht Teil der Komponente nur im Hintergrund, aber ich muss es kopieren und auf jede Seite einfügen. Versuchen wir es unter die Komponenten zu schlagen. Es wird dies jedoch ein bisschen mehr Rückenschmerzen machen , weil wir vorher auf dieses Problem gestoßen sind. Denken Sie daran, wenn wir versuchen, hier Sachen hinzuzufügen wird es Rückenschmerzen geben, aber wir werden sehen. In meiner Top Nav-Komponente von früher, wenn Sie zu diesem Video springen und den Kurs nicht durchlaufen oder einfach nur zurückspringen haben oder einfach nur zurückspringen und es nicht in der Komponente enthalten sein muss. Wir machen es nur , weil Sie wahrscheinlich irgendwann müssen. Ich schicke es nach hinten. Ich werde die Grenze los. Im Moment ist es nur weiß, es liegt an dir. Lassen Sie uns eine Vorschau anzeigen, also werde ich eine Vorschau dieser Seite anzeigen. Es ist da und es bleibt oben. Es gibt ein paar Dinge, die Leute tun ist, dass du hineingehst, das weiße Rechteck im Hintergrund schnappst und einen Schlagschatten hinzufügst. Ich belasse es als Standardeinstellung. Lassen Sie uns das in der Vorschau sehen. Lassen Sie uns das in der Vorschau sehen. Los geht's, haben einen Schlagschatten darüber oder darunter. Oder, und so entweder oder Sie können es auswählen und tatsächlich die Füllung platzieren, nur die Deckkraft ein wenig verringert , so dass sie da ist, aber Sie können sie durchschauen. Weißt du, dass ich meine? Wahrscheinlich fängt an, etwas undurchsichtiger zu sein, aber los geht's. Stecken Sie es nach oben. Jetzt kannst du alles anheften. Wo ist das kleine Ding hier? Es ist ein bisschen hier. Erinnerst du dich an unsere kleine Snackbar , unser kleines toasty Ding? Könnte es hier unten behalten. Oh, eigentlich wenn es ausgewählt wurde, wer erinnert sich, wo du hingehst, um es zu reparieren oder anzuheften ? Erinnerst du dich? Oh, das tust du. Das ist unter dem Prototyp. Sieh mal, Prototyp. Sie sind das, super einfach. Lassen Sie uns eine Vorschau anzeigen und schauen, dass alles bleibt. Kann ich es momentan schließen? Sieht so aus, als könnte ich es oder du wirst wissen wollen, wie du es schließen kannst, oder? bist du. Wir machen das auch, aber lassen Sie uns das Pinning unterstreichen. Wir haben oben und unten festgesteckt , weil mehr für mich und dich arbeiten. Sie müssen sich daran erinnern , dass die Seite lang genug sein muss, um zu scrollen, und Sie müssen möglicherweise mit Ihrer Ebenenreihenfolge spielen. Dann könnten Sie eine Schlagschatten-Hintergrund-Transparenz hinzufügen Schlagschatten-Hintergrund-Transparenz um es beim Scrollen etwas lesbarer zu machen . Das ist das halbe Ende. Lasst uns nun herausfinden , wie wir das schließen können. Lass uns das abschalten. Werfen wir einen Blick darauf. Ich hatte geplant, dies später im Kurs zu tun. Nun, ich wollte es anders machen. Aber wir sind hier, es ist interessant und ich zeige Ihnen meinen Prozess. Ich zoome heraus, schnappe mir all diese Dinge, es wird unordentlich und wähle es aus. Was Sie am Ende tun, ist, dass Sie am Ende zwei Seiten haben. Eigentlich nein, wir machen es so. Dieser Weg ist noch klüger, glaube ich. Wir gehen zur Entwurfsansicht und lassen dies angeklickt werden. Wir werden einen Toggle haben. Ist das alles Teil des Gleichen? Das ist es. Es ist eine Gruppe. Was wir tun werden, ist, dass wir ein paar Mal umschalten und die Deckkraft verringern. Verstehst du, was wir tun werden? Ich werde sagen, dass Sie eine Komponente mit einem Umschaltzustand sind. Sobald es umgeschaltet ist, wird es ausgeschaltet sein. dann der Off-State hier drin Können wir dann der Off-State hier drin das Ganze abweisen? Es ist an. Nein, du kannst nicht das Ganze machen, dachte ich schon, also musst du die einzelnen Bits machen. Aus irgendeinem Grund, wenn Sie das Aussehen der Komponente ausführen, wird dies sowohl in diesem Zustand als auch in diesem Zustand tun . Du da. Wenn ich es wieder einschalte, ist mein Elternteil wieder eingeschaltet. Kannst du sehen, dass es beide betrifft? Wir müssen in den Off-State gehen. Gehe hinein, wähle alles aus. Jetzt habe ich doppelt geklickt, um in die Komponente zu gelangen. Ich drücke „Command A“ auf meiner Tastatur, weil es die Verknüpfung ist, an die ich mich erinnere und du kannst zu „Alles auswählen“ gehen. Es ist Control A, auf einem PC oder drücken Sie einfach „Alles auswählen“. Ich bin in meine Komponente eingedrungen, ich habe alles ausgewählt und werde nur die Deckkraft von allem darin verringern . Seltsam. Sie verringern nicht die Deckkraft der tatsächlichen externen Wrapper-Komponente. Du bist hineingedrungen und senkst die Deckkraft. Wir bekommen ein bisschen, ich weiß nicht, wie es heißt, Inception. Kennen Sie diesen neuen Film? Das tust du. Da sind wir los. Lass es uns mal ausprobieren. Ich wähle dieses unsichtbare Ding jetzt aus und gehe zurück zum Standardstatus, und wenn es sich um einen Prototyp handelt, wird es automatisch animiert, wenn es angetippt wird. Eigentlich werden wir es einfach zum automatischen Animieren bringen. Es wird einfach verblassen, oder? Ziel. Gehen wir in den Off-State und es wird langsam nachlassen. könntest du beschleunigen. Lassen Sie uns das Fliegentraining ausprobieren. Ich hatte nicht vor, das hier zu machen, aber hey, wir sind hier. Sieh dir das an, scrolle rein. Wie hast du es zurückbekommen? [GELÄCHTER] Es ist nicht absolut [LACHEN] narrensicher. Nein, das war's. Xd macht keine vollständige tatsächliche Version davon, es gibt eine Menge Fälschungen, was es schnell und einfach macht. Keine große Menge an Einstellungen, nicht sehr komplex. Aber es gibt einige Dinge, die man in Bezug auf die Modelle nur grinsen und ertragen muss in Bezug auf die Modelle nur grinsen und ertragen , bei denen man es nicht absolut wie eine App machen kann , sondern nahe genug zum Testen und Demoing. Das ist Pinning und wie man das kleine Ding ausschaltet. Auf das nächste Video. 74. So fügst du ein a in Adobe XD hinzu,: Hallo allerseits. In diesem Video werden wir das machen. Wir werden auf diesen „Button“ klicken, und es wird wie ein kleines Popup-Overlay haben. Können wir es schließen, wieder öffnen, wieder schließen. Lassen Sie mich Ihnen zeigen, wie Sie das in Adobe XD machen können. Um loszulegen, habe ich ein paar Dinge gemacht. Ich bearbeite einen Button zu unserer Produktdetailseite, ich verschiebe dieses Ding, weil es gerade im Weg war, und ich habe das erstellt. Dies wird das Pop-up sein, das Sie am Anfang gesehen haben, ist nur ein Haufen Rechtecke, Kreise und Text. Es kann alles sein, und du brauchst also etwas, das auftaucht und du brauchst einen Button, der es aktiviert. Das sind die beiden Dinge, die anfangen müssen. So funktioniert das, dieser Button oder sendet mir alles, was es aktiviert, es eine Zeichenfläche nennen und es überlagern, also wird dieses Ding hier nicht funktionieren. Es ist nur in der Pasteboard, hängt einfach alleine ab. Was wir tun müssen, ist es in eine Zeichenfläche umzuwandeln, und wir konvertieren es nicht wirklich in eine Zeichenfläche Wir klicken einfach im Hintergrund aus, wenn Sie nichts ausgewählt haben, greifen Sie das Zeichenflächenwerkzeug wie wir es zuvor getan haben, haben wir Zeichenfläche hinzugefügt. Ich klicke einfach einmal rein. Ich kann tatsächlich eine benutzerdefinierte Zeichenfläche oben ziehen, da sie auf die richtige Größe einrastet. Wir haben unsere kleine Grafik hier in eine Zeichenfläche verwandelt. Ich nenne es, ich nenne das einen Modalwagen, und jetzt kann ich sie verbinden. So wie sie sie verbinden, klicken Sie auf Ihren „Button“. Dies ist keine Komponente, es ist nichts, es ist einfach alles, was sie auslösen kann. Ich werde beide auswählen und sagen, dass wir tatsächlich unter Prototyp, wenn dieses Ding angeklickt wird, was wir getan haben, ist, dass wir unter dem Prototyp waren, dass wir Dinge geschleppt haben. Sie können darauf klicken, einfach auf einen von ihnen klicken oder diese beiden gruppieren, also klicke ich einfach auf das „Grüne Feld“. Wir haben sie gezogen, um eine Verbindung zu Seiten herzustellen. Du kannst oder mach es andersherum. es ausgewählt ist, fügen wir eine Interaktion hinzu, es wird ein Tippen sein, und standardmäßig möchte es zu automatisch animieren oder wechseln, je nachdem , was Sie getan haben. Die Magie passiert hier unter Overlay. Wenn das auf Overlay getippt wird, welche Zeichenfläche? Der Modalwagen, bitte, und das ist die große Veränderung. Kannst du sehen, dass das erschien? Gab es nicht vor einer Sekunde? Jetzt ist es da. Lassen Sie uns einen Testlauf machen, wie es ist, und schauen wir uns an, was es tut. Ich scrolle meinen Knopf runter. Hey, sieh dir das an und ich kann drauf klicken, schließe es dir an. Das Coole daran ist, dass Sie das Schließen nicht wirklich ausführen müssen, sondern nur standardmäßig zurückkehren möchten. Obwohl es ein Kreuz auf meinem Mock-up gibt, ist es nur ein Kreis mit einem Kreuz darin. Ich habe es nicht manipuliert, du kannst tatsächlich irgendwo klicken und es geht einfach weg. Es funktioniert einfach, aber ich musste nichts tun. Das sind die Grundlagen davon. Es wird ein paar Dinge geben, die du magst. Hey, hattest du einen Schlagschatten? Du hättest wahrscheinlich nicht einmal den Schlagschatten gesehen. Ich habe ewig damit verbracht, meinen Schlagschatten herzustellen, aber er ist weg, und es ist wirklich schwer, weil man den Hintergrund nicht wirklich sehen kann. Ein paar Kleinigkeiten, die passieren, ist, dass es hier drüben ist. Ich gehe zurück in den Entwurfsmodus, Option eins auf einem PC. Ich glaube, es ist alles eins, tut mir leid, PC-Leute. Was ich tun möchte, ist, dass die Zeichenfläche und das weiße Feld im Hintergrund tatsächlich mehrere Dinge sind. Es gibt Zeichenfläche, weiße Box. Um die Idee zu bekommen, White Box. Sehen Sie sich das weiße Feld und die Zeichenfläche getrennt an. Das Problem damit, kannst du sehen dass es meinen schönen kleinen Schlagschatten gibt, aber weil er über dem Rand der weißen Box liegt, wird herausgeschnitten, also kannst du eines von zwei Dingen tun. Sie können Ihre weiße Box klein machen, damit Sie sie sehen können, oder Sie können Ihre Zeichenfläche greifen und diese größer machen, damit Sie sie sehen können. Jetzt lass uns eine Vorschau geben, lass uns zu diesem Kerl zurückkehren, lass uns zu dir gehen, hier und es hat jetzt einen Schlagschatten. Ja, funktioniert. Ich denke, meine weiße Box ist ein bisschen zu groß, um den Bildschirm zu füllen. Aber ja, wir brauchen wahrscheinlich einen langweiligeren Hintergrund. Das machen wir auch. Wir kriegen ein bisschen voraus, aber hey. Eine Sache ist, dass Sie sehen können, indem Sie diese Overlay-Funktion hinzufügen, was es mit dieser Zeichenfläche gemacht hat, war tatsächlich das Erscheinungsbild des Hintergrunds zu deaktivieren. Sie können das manuell tun, aber es tut es automatisch, damit Sie den Schlagschatten sehen können, aber den Rest dieser Seite darunter sehen, anstatt ein großes weißes Feld zu sein. Was ich machen wollte ist, dass du am Anfang dort gesehen hast , dass ich das wie dunkles Verblassen im Hintergrund hatte. Bevor wir das tun, gibt es eigentlich ein bisschen, das meine Schüler oft verwirrt, also was lässt dich verwirren? Lass es mich versuchen, es zu verwechseln. Ist es ausgewählt, wechsle ich zurück in meinen Prototyp-Modus, und ich klicke darauf, wo das erscheint. Sagen wir, ich lege es direkt über reich. Das würde dort erreichen. Es ist direkt darüber. Wenn ich spielen muss und ich gehe hier runter und ich sage, sollte es direkt über Rich erscheinen. Boom. Es erschien mitten in meinem Ding. Das ist merkwürdig. Was passiert? Im Grunde genommen bezieht sich dieses Ding hier, diese Übersicht, ich sage immer wieder Übersicht, Overlay ich sage immer wieder Übersicht, Overlay auf das, was als Ansichtsfenster bezeichnet wird. Das Ansichtsfenster ist oben im Dokument zu dieser kleinen Zeile hier. Denken Sie daran, dass wir während des gesamten Kurses darüber gesprochen haben, also schaut es unten, nicht das , was sich im Inhalt befindet. Es ist eine feste Positionierung. Wenn ich es hier nach unten verschiebe, nicht über organisch, aber ganz nah am Ende der Seite, wird es am Ende der Seite sein und wahrscheinlich im Weg sein, du klickst einfach darauf und du geh. Das ist es, was diese Referenz ist. Kannst du es dazu bringen, sich an tatsächliche Dinge anzuheften? Nicht dass ich gerade wüsste. Sie versuchen, eine feste Positionierung darauf zu verwenden, es endet zu einer festen Positionierung, der Knopf, nicht das Overlay. Lassen Sie uns in das etwas mehr Inception-Bit eingehen, wo wir den Hintergrund dämpfen werden. Es ist ein Trick, ist derzeit keine Option, um den Hintergrund auszublenden. Was wir tun, ist, dass wir dies einfach auf eine Zeichenfläche anderer Größe legen , die das Ganze abdeckt. Im Moment hat meine Zeichenfläche diese Größe. Was ich tun möchte, ist es hierher zu verschieben, ich möchte es dafür genauso groß machen wie das Ansichtsfenster. Es ist wie breit, aber geh zu meiner Design-Ansicht. Ich habe auf meine Zeichenfläche geklickt. Ich weiß, dass es 375 ist, also sage ich, dass du jetzt 375 Paste bist. Wie hoch sollte es sein? Klicken Sie darauf, also ist mein Ansichtsfenster damit fertig, also 667 oder sie sind alle 667. Es spielt keine Rolle, von welchem ich es rauskriege. Du gibst mir eine Höhe von 667, und dann sage ich, du wirst in der Mitte sein. Kannst du kriegen, was ich mache? Benutze meine Pfeiltasten , um es einfach über die Spitze zu legen. Ich muss es kleiner machen. Es ist eines dieser Zeiten, in denen wir reagieren, Größenänderung ist tatsächlich brillant. Die meiste Zeit ist es brillant. Du hast ein paar Mal gesehen, dass du es ausschalten musst, aber das war großartig. Was ich getan habe, war da, also schnappe ich mir die Kante, und wenn ich es einfach schnappe, funktioniert es, aber wenn ich die „Optionstaste“ gedrückt halte, macht es das von beiden Seiten gleichzeitig, das ist Alt auf einem PC. Ich habe das, ich möchte, dass es in der Mitte ist, und jetzt möchte ich einfach einen schwarzen Hintergrund ohne Rahmen hinzufügen . Ich möchte die Deckkraft der Füllung verringern, und ich möchte, dass sie hinten ist. Wir haben eine Zeichenfläche, die jetzt einen schwarzen verblassten Hintergrund hat , der dem Ansichtsfenster entspricht. Wenn du so wärst, hattest du mich im Überblick, aber jetzt hast du mich verloren. Es ist okay. Das ist fortgeschrittenes Zeug. Wenn du es dir High-Five bekommst. Bist du bereit? Ich hoffe, das funktioniert. [GELÄCHTER]. Ein gutes Spiel zu sprechen, dann komm schon, es hat nicht funktioniert [LACHEN]. Ich weiß jetzt warum, aber es war ziemlich zuversichtlich, dass das gerade funktionieren würde. Was ist los? Die Positionierung. Wir haben es positioniert, als es nur ein kleines kleines Rechteck war , als es nur ein kleines kleines Rechteck Wenn wir also jetzt zur Prototypansicht gehen, wenn wir darauf klicken, tut es genau das, was wir in Bezug auf das Ansichtsfenster gesagt haben . Kannst du sehen, dass es sich unten überlappt. Ich möchte sagen, dass du an die Spitze kommst. Jetzt lass uns das machen. Bereit? Obwohl Sie nicht auf das „X“ klicken müssen, müssen Sie auf „X“ klicken. Das ist cool. Ich liebe kleine Pop-ups, und so macht man sie in Adobe XD. Alles klar, Kumpel, wir sehen uns im nächsten Video. 75. Slide in der mobilen Nav Menü-Overlay in Adobe XD: Hallo allerseits. In diesem Video werden wir dieses kleine mobile Navigationsgerät machen , das von der Seite auftaucht das wir schließen können. Es funktioniert. Du kannst auf Dinge klicken, zu verschiedenen Seiten gehen , zurückspringen, also werden wir das in diesem Video machen. Bereit, set, los. Du kennst bereits alle Fähigkeiten , damit das funktioniert. Es gibt nur eine kleine Einstellung wir ändern müssen, damit dies möglich ist. Was ich tun werde, ist einfach eine ganz einfache Version davon zu machen , echte grobe, hässliche Sache. Dann machen wir es am Ende hübsch, weil du hier bist, um herauszufinden, wie dieses Ding ein- und ausgeht. Was wir tun ist, dass wir ein Menü entwerfen müssen. Das geht ungefähr so weit ich gehe. Sie entscheiden, wie sehr Sie das einschieben möchten. weit gehe ich weiter. Du kannst den ganzen Weg rüber gehen. Ich zeichne zuerst mit einem Rechteck. Aber wie in einem früheren Video, in dem es eine Zeichenfläche sein muss, muss es eine Zeichenfläche sein. Du könntest anfangen , hier einen Außenborder zu zeichnen, und sie werden ein bisschen zerschlagen und Dinge springen Ebenen. Es ist ein Schmerz im Hintern, also zeichne es zuerst mit einem Rechteck und wähle es dann im Hintergrund auf, also wurde nichts ausgewählt. Nehmen Sie dann das Zeichenflächenwerkzeug und zeichnen Sie es dann in der richtigen Größe über die Oberseite. Jetzt, das weiße Feld, kannst du es dort behalten, du kannst es löschen. Ich lasse es dort liegen, weil ich das ganze Schlagschatten-Ding in einer Sekunde machen möchte . Ich hab dir gesagt, dass ich es nicht entwerfen werde. Entwerfen Sie es dann nicht. Jetzt müssen wir nur noch etwas finden, das es aktiviert. Ich werde dies verwenden, offensichtlich das größere Menü, also klicke ich einmal, klicke zweimal, um das auszuwählen, gehe zu meinem Prototyp. Dieses Ding hier füge ich eine Interaktion hinzu, oder ich ziehe sie hierher und sage, wenn dieses Ding angetippt wird, gehe zum Overlay. dem letzten, was Sie getan haben, kann es beim Übergang oder beim automatischen Animieren Je nach dem letzten, was Sie getan haben, kann es beim Übergang oder beim automatischen Animieren sein. Das ist es im Grunde, und das haben wir für unser Pop-up im letzten gemacht und dann wird es Popup-Modal. Der einzige Unterschied besteht darin, dass die Animation sich auflöst, wir werden es einfach richtig schieben lassen. Kannst du dich erinnern? Gleitet es von rechts ein oder gleitet es nach rechts? Kann es versuchen, versuchen Sie es mit dem anderen. Ich bin mir ziemlich sicher, dass das stimmt. und raus und das sieht gut aus für mich. Lassen Sie uns eine Vorschau geben und schauen uns das an, wir haben es geschafft. Das sind die Grundlagen Ihres Menüs. Ich werde es jetzt stylen und Dinge hinzufügen. Aber das ist es im Grunde. Du kannst jetzt gehen, ich entwerfe mein Menü und du kannst rumhängen, wenn du willst. Entwurfsmodus, Option eins oder was auch immer Sie überprüfen müssen. Es ist wahrscheinlich alt. Ich kenne sie alle auswendig, aber ich bin mir ziemlich sicher, dass einer auf einem PC ein anderer ist meine ich. Was mache ich? Ich werde eine andere Version des Logos haben , doppelklicken. Ich leihe mir das aus. Leih dir das aus und leih dir beides aus. Siehst du meine kleine Auswahltechnik? Wie ich das möchte, ist es wirklich klein, „Umschalttaste“ zu klicken und gedrückt zu halten, und alles ist im Weg. Oft mache ich, dass ich einfach nichts auswähle. Ich habe gerade mein Auswahlwerkzeug und ziehe einfach eine Box darum herum. Es wählt alles aus, was sich unter der kleinen blauen Box befindet. Dann halte ich „Umschalt“ gedrückt, um die Auswahl aufzuheben. Sie können dies nacheinander tun, indem Sie die Umschalttaste gedrückt halten und einfach auf die Dinge klicken, die Sie nicht möchten. Oder was ich mache, ist, dass ich „Umschalt“ halte und eine Kiste herumziehe, all das Zeug. Es bedeutet, dass nichts festhält. Ich möchte das alles und halte dann „Umschalt“ gedrückt , um die Auswahl aufzuheben. Tust du das? Nein, das tue ich. Ich gehe zu „Alt“ ziehe es hier rüber oder ziehe es mit der Option auf einen PC. Ich beende mein Menü neue Elemente. In diesem Fall, weil ich möchte, dass sie anklickbar sind, möchte ich nicht wie ein großes langes Menü verwenden, Return, Return Menu. Was ich tun möchte, ist sie alle als ihre eigene kleine Einheit zu haben . Dieser erste wird richtige Details sein. Ich gehe zu meinen süßen Charakterstilen. Wahrscheinlich die kühne Version. Jetzt bin ich mir ziemlich sicher, dass Sie in Adobe XD immer noch keine Aufzählungszeichen machen können, oder? Kugel, nein, und das könnte in Zukunft hier erscheinen. Es könnte das Jetzt sein, nicht da. Sie können ein paar verschiedene Arten von Dingen machen. Was ich oft mache, ist auf einem Mac, zumindest ist es „Option, 8". Es ist nicht was ist auf dieser Tastatur? „Option, Shift, 8" gibt dir einen kleinen Aufzählungspunkt. Auf einem PC müssen Sie möglicherweise googeln, was die Verknüpfung ist, um einen Aufzählungspunkt zu machen , und ich benutze das, weil es hier keine Option gibt. Ich glaube nicht. Ich habe das und ich werde mein Wiederholungsraster nur für so etwas Einfaches verwenden. Wie viele Optionen habe ich? Wahrscheinlich ungefähr vier. Machen Sie sie groß genug, damit sie anklickbar sind und das Schöne daran ist, dass ich darauf doppelklicken und sie an verschiedene Orte bringen kann , damit ein Teil der Details dorthin gelangen kann. Denken Sie daran, es wird sich an das Letzte erinnern , was Sie entschieden haben. Ich möchte nicht, dass es jetzt ein Overlay macht, ich möchte, dass es mit Folie auf diese Seite wechselt, oder? Wahrscheinlich nicht einfach auflösen oder keiner, bringen Sie es einfach dorthin zu springen. Jetzt werde ich den Namen ändern und dieser wird eigentlich der erste sein, der muss zu Hause sein, nicht wahr? Großartig. Ich sage die Checkout-Seite? Ich rufe die Checkout-Seite an. Es wird wahrscheinlich eher der Einkaufswagen genannt . Ich hab eine Kontoseite. Ich habe diese Seite nicht wirklich erstellt, aber Sie können sehen, wie einfach es ist, das Underdesign zu verwenden, um das zu verwenden, was ist es? Das Ding da, das Wiederholungsraster. Ich sage, werd dich los. Sie müssen es nicht kaputt machen, um damit zu arbeiten. Du kannst es hier lassen. Ich brauche dort ein Zuhause oben. Wenn ich auf dieses obere klicke und kopieren-Paste gehe, funktioniert es nicht, es kopiert und fügt einzelne Element ein und dies sind nur Spiegelkopie, also funktioniert es nicht so, wie wir es wollen, also wie reparieren wir das? Ich werde die Gruppierung aufheben und in was können wir es verwandeln? Nun, wir können damit beginnen, die Bestellung zu wechseln und neue hinzuzufügen. Wir erinnern uns, dass es ein Stapel ist. Wie verwandelt man sich in einen Stapel? Stellen Sie sicher, dass seine Komponente ist. Dann heißt es Stack. Jetzt kann ich oben auswählen und eine andere kopieren und einfügen. Jetzt sind wir zu Hause. Was hat es mit dem Prototyp gemacht? Ich weiß es nicht. Wir haben die beste beibehalten. Um das neu zu gestalten, hole ich und breche es dort ab und sage, dass du dorthin gehst. Jetzt wirst du, mein Freund, dorthin gehen und weil es sich an das Letzte erinnert, was du getan hast, sollte es jetzt alles sehr nett sein. Da ich diesen anderen nicht sehen kann, , anstatt ihn rüber zu ziehen werde ich einfach Interaktion hinzufügen sagen, anstatt ihn rüber zu ziehen. Erinnert sich alles außer der Zeichenfläche. Ich sage, gehe zu meiner Checkout-Seite. Welches? Ich habe viel zu viele. Ich würde mir Hi-Fi ansehen, ich glaube nicht, dass ich gehen will. Jetzt habe ich in diesem Kurs die Wireframes als Teil dieses Dokuments beibehalten , nur um das Leben schwer zu machen. Das habe ich getan. Ich würde diese jetzt eher in einem anderen Dokument haben , nur weil sie mehr Ärger verursachen, als sie im Moment wert sind. Es sollte anfangen, weil es einfach ist, das Layout zu kopieren. Aber jetzt speichere ich einfach unter, Datei, Speichern unter, mache eine weitere Kopie, eine namens Wireframe und eine namens High Fidelity. Darauf hast du gewartet. Sieh mal, wie schön es ist. Manchmal weiß ich, dass ich diese überlasse, weil es manchmal nützlich ist , die Funktionsweise anderer Leute zu sehen. Andererseits, wie das Wiederholungsraster, bedeutet es, dass der Stapel ein paar von diesen netten Sachen machen kann. Wer erinnert sich, was ich festhalte, um diesen Abstand zu erledigen? Das war's nicht. Erinnert sich jemand? Du musst hineingehen und du schwebst einfach darüber, aber ich wollte alles gleichzeitig machen. Was hältst du fest? Hast du dich erinnert? Du schaust auf die Tastatur, es ist Shift. Du hast es verstanden. Lassen Sie uns dies eine Vorschau geben. Du, mein Freund, ich werde spielen und wir werden es anklicken und es ist viel schöner. Wie bekomme ich es auf jeder Seite? Das ist ein sehr guter Punkt. Was ich tun werde, ist sagen wir , dass ich es auf diese Seite stellen werde. Lassen Sie uns ignorieren, die Farbe für den Moment zu ändern. Ich gehe einfach rein und mache es dunkler. Ich gehe hierher und lösche das. Nun, lasst uns das einfach löschen. Ich werde diesen rüberziehen, weil es hier meinen Prototyp enthält, der hineingeht , der darauf zurückführt. Solange ich diese Navigation im Prototyp-Modus kopiere und einfüge , wird dieser Link rübergehen. Ich sage, du kopierst, gehst zu diesem und fügst ein. Sie benötigen nicht für jeden eine andere Zeichenfläche. Nennen wir es richtig zu einem. Ich muss hier etwas wie ein Rechteck im Hintergrund hinzufügen , also muss „R“ für Rechteck in der Designansicht sein, sonst weiß R nicht, ich weiß nicht, was sie getan haben. Ich habe nichts getan. Ziehen wir das raus. Lassen Sie uns ein paar neue sagen, wählen wir diese Farbe aus, diese Farbe ist Farbdeckkraft. Schick es nach hinten, also sollte das jetzt funktionieren. Lass es uns mal ausprobieren. Details zum Produkt Großartig. Du scheinst, ich kann es schließen. Nun, du scheinst, ich möchte zu den Produktdetails gehen, aber es ist immer noch das Menü verfügbar. Das haben wir. Jetzt kann ich gehen, du verbindest dich nach Hause, geht nach Hause. Das haben wir heute am Laufen. Ich habe ihm eine Vorschau gegeben. Du würdest testen, viele Tests. Zurück nach Hause. Diese Produktdetails. Das ist ein Slide-In-Menü. Es ist ziemlich einfach loszulegen. Nur Ihre Übersicht, stellen Sie einfach sicher, dass es sich auf eigenen Zeichenfläche befindet, die der gleichen Größe wie Ihr Ansichtsfenster entspricht , und Sie können mehrere Dinge verknüpfen oder damit zurückkehren. Sobald Sie Ihre Komponente hier ganz oben manipuliert haben , was ich sage, rig up, aber ich meine, wie der Prototyp zu verbinden, all diese kleinen gepunkteten Linien sind hier, sobald Sie ihn haben, stellen Sie sicher, dass Sie kopieren und fügen Sie es in den Prototyp-Modus ein, nicht im Entwurfsmodus, da der Entwurfsmodus alle diese Parteien abnimmt. Das ist es, Schiebe-Seitenmenü. Ich werde die Deckkraft davon ein wenig senken. Sie können jetzt Ihrem Geschäft nachgehen. Werfen wir einen Blick darauf. Du hast ein Geschäft in der Nähe. Spektakulär, nicht wirklich lesbar. Das reicht für dieses Video. Wir sehen uns im nächsten. 76. Kursprojekt 16 – Popup & Navigation: Hallo allerseits, Unterrichtsprojektzeit. Ich bringe dich dazu, ein Pop-up und eine Navigation zu machen. Die Navigation ist einfach. Es ist das hier. Es muss nicht genau wie meins sein. Ich habe ein bisschen recherchiert. einen Blick auf Ihr Telefon, nur Websites, die Sie häufig besuchen, und sehen Sie, wie sie Navigation gemacht haben, Dinge, die Sie mögen, Dinge, die Sie nicht mögen, und schauen Sie sich vielleicht Dinge wie Dribbble oder Behance an oder sogar einfach Google und suche mobilen Nav UI, nur um verschiedene Stile zu sehen und wie sie tatsächlich interagieren und wie sie tatsächlich funktionieren oder wie sie auf die Seite gekommen sind und dies gestaltet haben auch wenig Panel. Schöner als meine, langweilige alte Aufzählungspunkte. Der andere Teil sind Pop-ups. Es wird zwei geben. Ich möchte, dass du ein Pop-up machst, wie wir es getan haben. Wir haben das gemacht. Wir haben diese „In den Einkaufswagen“ -Bestätigung verwendet. kannst du machen, das ist in Ordnung. Aber das haben wir auch gemacht. Vielleicht haben Sie es während des Kurses gemacht, also schauen Sie sich an, vielleicht etwas anderes als Pop-up zu machen. Werfen Sie einen Blick auf Ihr Design. Was könnte sonst noch etwas sein, das auftaucht, Sie aber auf dieselbe Seite zurückbringt. Es könnte so etwas wie ein Tooltip sein. Es gibt entweder ein I zur Information oder ein kleines Fragezeichen, auf dem Sie darauf klicken können und es gibt Ihnen weitere Informationen. Genau das gleiche Prinzip. Wir haben auf die Schaltfläche „Kaufen“ geklickt, um die Warenkorbbestätigung anzuzeigen, aber Sie könnten dies auch für einen Tooltip tun. Klick es nicht rein. [GELÄCHTER] Anklickbar. Sie können sich auch alles andere vorstellen, solange es dann ein anklickbares Pop-up gibt. Er wird uns dazu bringen, unsere modale Newsletter-Anmeldung durchzuführen. Modal, wenn Sie es noch nicht gewusst haben, ist es ihr Wort, das für eine kleine Einheit verwendet wird, besonders das auftaucht. Etwas, das auftaucht, ist ein Modal. Bringt dich nicht auf eine andere Seite, um etwas zu tun. Es ist dieser kleine Informationsbildschirm, auf dem Sie etwas tun und möglicherweise dorthin zurückkehren können , wo Sie sind. Es ist keine separate Seite. Es erscheint oben auf einer vorhandenen Seite, also modal. Ich möchte, dass Sie sich eine Newsletter-Anmeldung machen. Sie tauchen auf Seiten auf oder wenn du versuchst zu gehen, sagen sie, hey, würdest du es mögen, dass es weg ist? Melden Sie sich also an Newsletter-Modal oder ähnliches, 10 Prozent Rabatt, wenn Sie sich für unseren E-Mail-Newsletter anmelden. Jetzt ist der Unterschied zwischen diesem und dem Tooltip oder dem „In den Einkaufswagen“ zu sagen und dem Tooltip oder dem „In den Einkaufswagen“ zu sagen , dass ich möchte, dass es sich um ein zeitlich gepasstes Popup handelt, und du meinst, er hat uns nicht gezeigt, wie wir das absichtlich machen sollen. Was ich tun möchte, ist, dass ich denke, anstatt mir nur durch diese Sache zu folgen, habe ich das Gefühl, dass Sie an dieser Stelle unserer Klasse oder unseres Unterrichts die Möglichkeit haben, zu sehen, ob Sie das können oder auch nicht. Was ich damit meine, nur für den Fall, dass Sie sich nicht sicher sind, ist, dass ich nichts anklicke. Es ist nicht auf dem Fass. Es ist nur einige Zeit nach einer gewissen Zeit, ein Popup-Modal erscheint und es ist die Newsletter-Anmeldung, und dann können Sie darauf klicken, um es zu schließen. Anstatt auf Hahn zu tippen, werden Sie versuchen, es auf einen Timer zu laden. Das wird schwierig sein. Wenn du es nicht kannst, sieh dir die Kommentare an. [GELÄCHTER] Hoffentlich kann dir jemand anderes helfen, aber ich schätze, ich möchte dir das Fischen beibringen, anstatt dir Fisch zu geben. Wie läuft das? Du verstehst die Idee. Mal sehen, ob du es zum Laufen bringen kannst. Wenn du nicht kannst, kein Drama. Du musst etwas googeln. Fragen Sie in den Kommentaren, fragen Sie in den Gruppen, ob es Ihnen schwer fällt, aber versuchen Sie es zuerst selbst, wenn Sie es herausfinden können. Zeitgesteuerte Popup-Modal. [NOISE] Wenn Sie sie aufnehmen können, wenn Sie keinen Screenshot machen und sie an den normalen Orten teilen können , würde ich gerne sehen, was Sie tun. Kumpels, glückliche Navigation und Pop-up-Making. Viel Glück mit dem zeitgesteuerten Popup. Auf das nächste Video. 77. Was sind Flows in Adobe XD: Hallo allerseits. In diesem Video werden wir uns diese Dinge ansehen, die Flows sind. Wir haben uns früher im Kurs etwas angeschaut. Wir hatten Flow 1, aber jetzt werden wir verschiedene Ströme haben , die wir teilen können. Lass mich dir zeigen, wie man sie herstellt. Um einen Flow zu machen, dein erster, schauen wir uns das an, ist meine Homepage für meine erste, ich habe früher einen Flow erstellt. Wir klicken auf dieses kleine Home-Icon und Flow 1 ist erschienen und wir haben es früher im Kurs ignoriert. Das heißt, wenn Sie nichts ausgewählt haben, absolut nichts in Ihrem Spiel, deshalb haben wir hier studiert. [GELÄCHTER] Ich habe es bis hier mit diesem ignorierenden Teil zu tun , weil dies etwas weiter ist, in dem wir die Leerstelle haben, um herauszufinden, welche Flüsse sind. Ich hab ein Drahtgitter. Anstatt Flow 1 aufzurufen, werde ich sicherstellen, dass wir in den Prototypmodus wechseln, eigentlich kein Freigabemodus. Denken Sie daran, dass es die Befehlsoption 1, 2 oder 3 ist , zwischen diesen zu wechseln, und Sie tun das nicht viel, 1, 2, 3 und denken Sie daran, es ist PC, es ist Alt 1, 2, 3, und überprüfen Sie das noch einmal. Das ist Flow 1. Wir können es umbenennen. Man kann es hier oder hier drüben benennen , es spielt keine Rolle. Das wird mein Drahtgitter sein. Das bedeutet, dass ich dasselbe Dokument haben kann und einen Link erstellen kann, den ich mit Menschen teilen kann. Ich verlinke zur Überprüfung. Wir haben das schon früher im Kurs gemacht, denken Sie daran, ich habe einen Link warten. Da gehst du. Es hat einen eigenen, einzigartigen Link. Was wir tun können, ist , dafür einen anderen zu erstellen, wir können zum Prototyp zurückkehren. Darauf können wir klicken. Ich kann dies zu einem weiteren Ausgangspunkt machen, indem ich auf den kleinen Home-Button und dann den Prototypmodus klicke und dann teile. Ich denke, du kannst auf den Home-Button klicken und auch teilen. Dieser kann meine High Fidelity sein. Ich kann einen zweiten Link erstellen. Ich werde gleich dort noch einen erstellen. Magic, High Fidelity eines der Bilder dauerte etwa ein Viertel der Zeit , um den Link herzustellen. Jetzt können wir diesen Link mit jemandem teilen. Wir haben das gleiche Dokument , um unser Gehirn der gleichen Stelle wie ein Designer zu halten. Aber für die Leute, die es überprüfen, können wir es mit separaten Links teilen. Ganz oben können Sie jetzt entscheiden, sagen wir, dass wir es ändern, anstatt alle werden wir nur bestimmte Personen einladen. Wir können entscheiden, ob wir das für den Wireframe oder die HiFi-Version tun den Wireframe oder , die wir versenden. Jetzt haben wir nur noch zwei hier. Du könntest so viele haben, wie du willst. Wie wir uns bei Wireframe, High Fidelity, getrennt haben, könnten Sie am Ende eines haben, das Konzept 1, Konzept 2 oder Colorway 1, Colorway 2 verschiedene Farben entspricht. Oder in diesem Fall haben Sie vielleicht noch eine Freigabe, Sie können es nicht tun. Du musst es auf dem Prototyp machen. Los geht's. Selbst wenn du es nicht sehen kannst, weiß ich, dass dieses kleine Home-Icon dort sehen kann, nur es hat nicht genug Platz, um angesehen zu werden. Tu das. Wenn du da reinkommst, ist es da, wenn du herauszoomst, verschwindet es. Lass uns noch eins gehen. Es ist zu winzig, aber du kannst immer noch darauf klicken. Dieser könnte meine Desktop-Ansicht sein. Ich kann diese Verbindung mit Menschen teilen. Aber weil mein Vermögen dasselbe hat, all das Logo und alle Farben und Fehler und so, ist es manchmal einfacher, sie in einem Dokument zu behalten. Manchmal müssen Sie sie in zwei verschiedene Dokumente aufteilen , weil sie versteckt sind weil einfach zu viel los ist. Das sind Flows in Adobe XD. 78. So kannst du dein Dokument mit Kunden und Stakeholder und stakeholders teilen: Hallo allerseits. In diesem Video werden wir uns mit der Weitergabe unseres Dokuments an unsere Stakeholder, unsere Kunden oder an Benutzertester befassen unseres Dokuments an unsere Stakeholder, unsere Kunden . Im Grunde genommen haben wir die Registerkarte „Teilen“ hier etwas früher im Kurs behandelt, aber wir werden ein bisschen mehr in einen tiefen Tauchgang gehen und wir werden die verschiedenen Optionen durchgehen , die XD produzieren können und wofür sie gut sind. Lasst uns reinspringen. Wir haben gleich zu Beginn ein bisschen geteilt. Denken Sie daran, dass wir unser Design für Kommentare geteilt haben und lasst uns einige der Dinge wiederherstellen, an die wir uns erinnern müssen. Zunächst müssen Sie, wenn Sie einen Link teilen, XD mitteilen, welches Ihre Homepage ist, was die erste Seite ist, die jemand sehen wird. Du machst es, indem du im Prototypenmodus bist und auf dieses kleine Haus klickst. Manchmal kann man das Haus nicht sehen. Sieh dir das an und zoomt heraus. Es zoomt heraus. Manchmal dreht es sich nur um einen kleinen Tab. Was Sie tun können, ist, dass dies tatsächlich meine Homepage ist , oder klicken Sie auf den Namen dieser. Das wird es sein. Wenn Sie darauf klicken, haben wir dies bereits früher gemacht, denken Sie daran, wann wir Flows gemacht haben. Aber hier könnte man sagen, dass es das ist. Es wird ihm einen Flow-Namen geben und das ist vielleicht meine Bestätigungsanimation. Dies könnte ein guter Punkt sein, an dem ich nur diesen Link teilen werde nur diesen Link teilen , weil wir darüber sprechen. Das ist das einzige, was noch zu tun ist, ist wie, hey, hast du diese Änderungen an der Bestätigungsanimation vorgenommen ? Was wir tun könnten, ist einfach diesen Link zu teilen, und um diesen Link zu teilen, klicken Sie auf den gewünschten Link. Gehen Sie zum Teilen auf die Registerkarte Teilen und entscheiden Sie, welche dieser Ansichtseinstellungen Sie erstellen möchten , erstellen Sie einen Link und das werden Sie teilen. Sie können sich für den Linkzugriff entscheiden. Kann jemand mit dem Link? Offensichtlich ist das weniger sicher, aber niemand wird darüber stolpern. Es ist eine verrückte Verbindung, die niemand erraten wird. Wenn Sie jedoch sicherer sein möchten, können Sie Personen mit E-Mails einladen. Wenn Sie ihre E-Mail-Adresse kennen, können Sie sie gezielt einladen. Oder die dritte Option ist für jeden, der das Passwort hat, nicht nur für die Personen mit der richtigen E-Mail-Adresse, für jeden, der den Link hat und das Passwort kennt. Sie können entscheiden, welche davon Sie benötigen. Du erstellst den Link und teilst ihn. Eine andere interessante Sache ist, sagen wir, dass diese Hi-Fi diejenige sein wird, die ich teilen möchte, und Sie werden feststellen, dass die Hi-Fi dies plus die Bestätigung enthält . Es ist wie eine Ergänzung zu, aber es wird von dieser Seite aus beginnen. Obwohl diese Jungs die ersten in der Reihe sind, erinnert sich derjenige, der diese benutzt, nur Overlays. Das Haus ist also wirklich wichtig. Die andere Sache ist, es wird mir zeigen, was nicht enthalten ist. Es gibt keine Verbindung zwischen diesen bis zu meinen Wireframes, also werden diese nicht Teil dieser Verbindung sein. Gleiche gilt für diese kleinen Optionen für die Homepage, verschiedene Versionen, die wir gemacht haben. Man muss nur achtsam sein. Schauen Sie sich an, was enthalten ist, was nicht ist. Also nichts von diesem Desktop-Zeug, nichts von diesem Zeug hier drüben. Was passiert, ist der Prototyp, er sucht nach einer dieser Verbindungen. Können Sie sehen, dass Bewertungen nur eine kleine Verbindung zu ihnen haben? Wenn ich diesen Chunk schnappe und ihn versehentlich lösche und dann zurück zu Teilen gehe und auf „Hi-Fi“ klicke , kannst du sehen, dass er ausgegraut ist? Es bedeutet nur, dass das nicht enthalten ist. Ich drücke „Rückgängig“ auf meiner Tastatur, also ist er wieder im Spiel. Wir haben früher einen Link erstellt. Seitdem haben wir viele Änderungen vorgenommen klicken daher auf „Link aktualisieren“. Ich kann diesen Link kopieren und per E-Mail absenden. Es sagt mir, wann es zuletzt aktualisiert wurde. Mir ist wirklich klar, dass dies der aktualisierte Link ist und ich kann ihn in eine E-Mail schreiben und absenden. Wenn ich jetzt meine Wireframes senden möchte, wenn ich darauf klicke, ist es ein ganz anderer Link. Obwohl sie sich im selben Dokument befinden, gibt es keine Möglichkeit, eine Verbindung zwischen diesen herzustellen, daher müssen wir ein Update erstellen. Kannst du sehen, dass das vor einiger Zeit am 11. Februar gemacht wurde ? Ich muss diesen Link aktualisieren und sie laufen separat für die Leute, die ihn auf der anderen Seite sehen. Es gibt eine Wireframe-Version und eine High-Fidelity-Version, und Sie können diese für verschiedene Teams, verschiedene Teile des Flow, verwenden . Möglicherweise schicken Sie einen Teil davon an legal. Ein Teil davon geht möglicherweise an Urheberrechte, es könnte Ihr Studiomanager sein. Sie können verschiedene Flows erstellen und wissen einfach, dass es sich um verschiedene Links handelt. Schauen wir uns die verschiedenen Ansichtseinstellungen an. Wir haben früher die Design-Ansicht gemacht und ich zeig's dir. Ich habe sie alle geöffnet, weil ich schnell durchmachen werde , was all diese verschiedenen tun, aber im Grunde dasselbe mit verschiedenen Arten, es anzusehen. Designüberprüfung ist, wenn wir zur Designüberprüfung gehen. Dies wäre großartig für Ihren Kunden oder einen Ihrer Stakeholder, bei denen es sich um Personen handelt, die an diesem Projekt beteiligt sind. Es könnte dein größeres Team sein. Es geht vielleicht an Kunden. Es könnte nur an einen Kumpel gehen, um es zu überprüfen, und es ist der, den ich am meisten benutze. Werfen wir einen Blick darauf. Dieser erste Tab hier gibt dir fast alles. Es gibt dir eine grundlegende Navigation hier unten. Wenn Ihr Kunde also nicht sehr versiert ist und nicht weiß, wie er es benutzt und einfach durcharbeiten kann, kann er die Pfeiltasten auf seiner Tastatur verwenden. Es ist ziemlich robust. Außerdem hat es das Kommentieren. Denken Sie daran, dass Sie diese Kommentare an bestimmten Stellen anheften können. [NOISE] Ich kann es einreichen. Die andere Sache, die Ihnen die Design-Ansicht gibt, sind diese Hinweise. Du könntest dir das ansehen. Wenn ich irgendwo klicke, kannst du die Highlights sehen, hey, du meinst, dass du auf diese Dinge klickst. Das sind einige der Unterschiede zwischen den anderen. Lassen Sie uns einen Blick auf die Designbewertung werfen. Entwicklung werden wir in einem anderen Video durchführen, weil es ganz spezifisch ist , an Ihren Webentwickler, Webdesigner, zu gehen. Wenn Sie es programmieren, ist das ganz spezifisch. Der einzig wirkliche Unterschied ist jedoch visuell , dass Sie Kommentare sehen können. Wenn ich dort keinen eigenen Kommentar hatte, besteht der einzige Unterschied darin, dass Sie diese Option hier sehen können? Wir können auf einen Teil des Codes eingehen, also kein großer Unterschied. Wenn Sie einem Designer die Entwicklung geben, wird das in Ordnung sein. Sie können immer noch alles machen. Es gibt ein bisschen mehr, und vielleicht ist das nur ein gutes Allround-Gerät. Obwohl es Entwickler sagt, muss es kein Entwickler sein, der es erhält. [NOISE] Werfen wir einen Blick auf ein anderes. Dieser hier kann eine großartige Präsentation sein. Grundsätzlich wird es es einfach in den Vollbildmodus stecken . Wenn Sie den Link an jemanden senden, wird er im Vollbildmodus sein und es hat den Hinweis. Es wird all diesen Müll los. Es ist sehr klar. Auch wenn Sie es vielleicht präsentieren, können Sie dies einfach verwenden, um Kunden zu senden, von denen Sie wissen, dass sie es nur sehen möchten. Sie müssen sich nicht äußern und von allem verwirrt werden. Es ist eine nette, saubere Version. Aber es hat den Hinweis, ihnen zu helfen. Stellen Sie sicher, dass Sie alle Ihre Schaltflächen verknüpfen. [GELÄCHTER] Ich glaube, ich habe uns auf eine Seite gebracht, auf der nichts funktioniert, also teste es selbst weil es kein Entkommen auf dieser Seite gibt. All diese Hinweise sind nur für Optionsfelder hier drin. Jetzt gehe ich zurück zu XD und gehe Hi-Fi. Ich komme auf diese Seite. Wenn ich mir meinen Prototyp ansehe, ist mir aufgefallen, dass keines dieser Navigationstools funktioniert. Der Kauf hat funktioniert. Warum klicke ich nicht auf altes Scrollen? Da gehst du. Das bringt auch einen guten Punkt hervor. Dieser Präsentationsmodus ist wie alle diese Links, die ich dir zeige, dass sie auf meinem Desktop sind. Wir sollten, wenn Sie sich für ein mobiles Gerät entscheiden, diese freigeben, insbesondere für Benutzertests auf einem Telefon. Wir würden diese Links hier überspringen. Denken Sie daran, als wir früher an einem Telefon getestet haben, das würden Sie tun. Sie würden den Link teilen, sich in der XD-App öffnen und sich mit jemandem treffen, um Benutzertests durchzuführen und nur zu sehen, wie er mit der App interagiert, jemand, der Ihrem Benutzer nahe steht profil. Auch wenn es nur Kollegen oder Freunde oder Familie sind, die grundlegende Benutzertests durchführen, sollten Sie sie am Telefon machen, weil dies seltsam ist, wenn Sie versuchen, sich für die dies seltsam ist, wenn Sie versuchen, sich Größe zu entscheiden, weil ich weiß, dass es so ist ein bisschen groß. Mein Monitor macht es nur ein bisschen groß und ich benutze meine Maus und nicht meinen kleinen Finger. Dies müssen vielleicht große oder kleine Ziele sein, um sie zu treffen, und ich weiß, dass ich hier oben keine Navigation habe , aber ich habe einen Knopf. Ich würde sicherstellen, dass ich hier reingehe und einen finde, der die Navigation drauf hat. Dieser hat es. Ich habe diese beiden Dinge noch nicht manipuliert, aber ich erinnere mich, dass ich sie kopieren kann, solange wir uns im Prototyp-Modus befinden und loslegen. Du löschst. Eigentlich will ich, dass die ganze Sache erledigt wird. Ich kopiere und füge ein. Die Navigation kommt voran. Jetzt wo ich das gemacht habe, was mache ich? Unter Teilen müssen Sie sicherstellen, dass Sie den Link aktualisieren. Selbst wenn du nur in den Drähten steckst, ist physisch nichts anderes daran, meins war es. Aber selbst wenn Sie nur die minimale Liste der Optionen ändern, müssen Sie den Link aktualisieren und ihnen einen neuen senden. Wenn ich sage, schick ihnen einen neuen, musst du ihnen kein neues schicken. Sie aktualisieren den Link und er wird auf ihrer Seite aktualisiert. Ein Link muss nicht sein. Du musst sie nicht schicken und sagen: Hey, hier ist ein neuer Link. Sie müssen nur ihre Seite aktualisieren oder erneut öffnen und es wird anfangen zu funktionieren. Lass mich es dir zeigen. Wenn ich zu Design gehe und hier hineingehe und ich entscheide, dass dieser Button hier ist, haben wir uns aus irgendeinem Grund entschieden, dass es die falsche Farbe ist und wir ändern sie in etwas wirklich Offensichtliches. Ich hebe es auf. Ich gehe zu Teilen und alles, was ich tun muss, ist den Link zu aktualisieren, vergewissern Sie sich, dass ich auf dem richtigen bin. Siehst du, dass es standardmäßig auf Wireframe Hi-Fi ist? Aktualisieren Sie den Link und warten Sie dann in diesen Mockups hier, bis er sein Ding macht. Es hat es geschafft. Wenn ich jetzt auf „Aktualisieren“ klicke, wenn die Person den Link erneut öffnet, sollte dieser Button aktualisiert werden. Los geht's. Derselbe Link muss nicht erneut geteilt werden. Wir haben über die Entwicklung von Design-Reviews gesprochen. Wir präsentieren uns ein bisschen. Benutzertests sind im Grunde dasselbe, außer dass es keine Hinweise gibt. Diese beiden sind genau gleich, außer dass dieser nicht den Hinweis hat. Sie möchten Ihre Benutzertester nicht zu sehr leiten , weil Sie herausfinden möchten , ob sie dies alleine tun können. Präsentation, diese hier, das Gleiche, aber die Hinweise sind aus. Während dieser hier das Gleiche ist, aber ich habe diese schönen Hinweise. Dieser hier ist kein Hinweis. Großartig. Andere Optionen sind benutzerdefiniert. Grundsätzlich kannst du entscheiden , welches dieser Dinge dir gefällt. Ein Vollbildmodus passiert, wenn Sie Benutzertests und Präsentationen durchführen. Zeigen Sie Hotspots an. Denken Sie daran, dass dies der einzige Unterschied zwischen Benutzertests und Präsentation war , das kleine fleischige Ding, das Menschen dabei hilft, weiterzukommen. Sie können sich einfach entscheiden, Navigationssteuerelemente anzeigen. Werfen wir einen Blick darauf. Das sind diese Dinge unten hier. Können sie sich bewegen? Es fügt dies hinzu oder entfernt es. Sie können entscheiden , ob das nützlich ist oder nicht, und kommentieren zulassen ist kommentiert. Jetzt ist es praktisch, die Links zu aktualisieren, aber es gibt Zeiten, in denen ich einfach einen neuen Link erstelle, weil ich diese alte Version beibehalten möchte, wie eine Version 1, Version 2. Sie haben vielleicht während des Kurses bemerkt, dass ich Version 1, 2, 3, 4 gemacht habe . Obwohl es brillant gespeichert ist, habe ich verschiedene Versionen für mich, weil ich es nicht aufhalten kann. [GELÄCHTER] Du wolltest einfach dasselbe Dokument behalten. Was ich gerne mache, ist sagen wir, ich schicke das von Kommentaren ab. Was ich gerne mache, besonders wenn ich der Rezensent bin, ich liebe es zu sehen, welche Kommentare ich gemacht habe, denn manchmal markiere ich etwas und sage: hey, kannst du das und das ändern, und meine UX Designer schickt mir eine aktualisierte Version. Ich kann mich nicht erinnern, womit ich beim letzten Mal Probleme hatte, also ist es schwer zu ändern. Der Weg, das zu umgehen , ist sagen wir, dass wir dies mit Kommentaren abgeschickt haben. Wir haben unseren Link aktualisiert und abgeschickt und ich möchte diese Version beibehalten. Was ich tun kann, ist einfach das Dokument zu speichern. Wenn ich also „Datei“, „Speichern unter“ gehe und eine neue Version erstellen werde, speichere ich sie immer noch in der Cloud. Version 5, siehst du hier? Update-Link ist verschwunden. Wenn ich die alte Version, Version 4, öffne, wird es immer noch so sein, dass wir erst vor einer Minute waren, du könntest zu Teilen und dem Aktualisierungslink gehen . Diese Links bleiben da und ich kann zurückgehen und diesen Link überprüfen und gehen, das waren die Kommentare. Während diese neue Version, müssen Sie neue generieren. Sie haben Ihre Flows immer noch wie alle abgebildet, aber die Links werden neu sein. Ergibt das Sinn? Das Letzte, worauf Sie achten müssen, ist Ihr Ansichtsfenster. Wir haben ein paar Mal darüber gesprochen. Wenn Sie es auswählen, Command 3, Control 3 auf einem PC, um alles auszuwählen, ist das Ding hier. Denken Sie daran, wenn Sie eine kurze Seite haben, werden Sie sie nicht sehen. Aber sobald du eine längere Seite hast , erscheint dieses Ding. Stellen Sie einfach sicher, dass es in der richtigen Position ist. Es entspricht allem anderen, entspricht Ihrem Testdokument, sogar in der Desktop-Ansicht. Wenn Sie eine Desktop-Ansicht erstellen, wenn Sie diese nach unten ziehen, ist sie da. Das sollten wir wollen, dass es so ist. Denn wenn du es vergisst und du bewegst dich einfach , weil ich mich darüber ärgere. [GELÄCHTER] Ich wünschte, es gäbe ein Nicht-View-Viewport. Moment gibt es nicht. Ich werde es einfach so oder so bewegen. Wenn du es so oder so entfernst, schiebe ich es einfach dorthin , damit ich das entwerfen kann. Wenn Sie dies dann exportieren, werden Sie damit enden. [GELÄCHTER] Du wirst so sein, als wäre es ein bisschen klein. Stellen Sie einfach sicher, dass es am richtigen Ort ist. In meinem Fall möchte ich, dass es ist, wo ist es? 667 weil ich deswegen teste. Ich teste auf meinem Handy, das ich habe. Das ist die richtige Größe. Das ist es. Wir werden im nächsten Video mehr an einen Entwickler senden . Lasst uns da rüberspringen und alles darüber erfahren. 79. Im to sprechen: Hey, alle zusammen. Ich bin raus. Wir sind zu lange auf dem Laptop-Computerbildschirm eingeklemmt , also bin ich draußen. Ich wollte mit dir darüber reden, mit deinem Entwickler zu sprechen. Es wird Zeiten geben, in denen es einige von Ihnen gibt, die UX-Designer sein und selbst der Web-App-Builder sein werden. Es wird viele Entwickler geben, die sich diesen Kurs ansehen um Ihnen Adobe XD-Kenntnisse zu vermitteln. Aber die Mehrheit von Ihnen wird Designer oder Schöpfer sein , die UX-Design machen möchten, und Sie müssen anfangen, mit dem Entwickler zu arbeiten. Einige von Ihnen könnten neu darin sein. Es ist wie ein Pip-Vortrag, wie man es macht, denn anfangs habe ich es getan, als ich angefangen habe, es ist beängstigend, mit einem Entwickler oder Ingenieur zu arbeiten, je nachdem, wie sie sich selbst nennen, Web Designer, Webentwickler-Ingenieur. Du hast dein Design gemacht, du hast es testen lassen, und jetzt werden sie es bauen. Was Sie nicht tun möchten, ist, dass Sie nicht möchten, dass dies das erste Mal , dass Sie mit ihnen chatten. Sie möchten die ganze Zeit über eine Diskussion geführt haben. Es kann einschüchternd und beängstigend sein, ich weiß, weil ich eingeschüchtert war und Angst hatte zu arbeiten. Wenn Sie es an Entwickler weitergeben, senden Sie ihnen eine E-Mail, wenn ich das erste Mal mit Sally chatte, schicken Sie es an sie und hoffen auf das Beste. Das heißt, zweifellos sind alle Arbeitsplätze, die wirklich schlecht gelaufen sind, Arbeitsplätze, die dieser Prozesslinie gefolgt sind. Die Jobs, die sehr gut laufen, sind diejenigen bei denen ich herausfinden werde, wer der Entwickler ist, wenn es jemand ist, mit dem ich ständig arbeite, wie Entwickler, mit denen ich ständig arbeite , also habe ich wirklich gute Beziehung zu ihnen. Aber sagen wir, es ist für einen anderen Kunden und den Kunden organisiert den Entwickler, Sie sind sich nicht einmal sicher. Es geht darum, diese Person frühzeitig herauszufinden und sie zu involvieren. Denn was Sie nicht tun möchten, ist Sie gegen Entwickler zu sein , was passieren kann. Der Designer hat mir dieses Ding gegeben und ich versuche es zu bauen, und sie wissen nichts. Du hast Angst vor dem Entwickler. Es ist nur eine schlechte Art , dieses Produkt an den Entwickler zu liefern , dieses Produkt an den Entwickler zu , weil es zu Ihnen gegen sie wird, warum haben sie das getan? Wo, wenn es früh ist, gibt es so oft in einem Projekt, bei dem ich davon ausgegangen bin , dass die Dinge zu schwer sind, und das werden wir später tun. Ich habe mit meinem Entwickler geplaudert, es muss kein offizielles Treffen sein, es ist genau wie, hey, das sind meine ersten Wireframes, hey, das ist der Brief und rede nur darüber, was du willst tue. Es ist einfach großartig, weil Sie so sind, dass das Ding, von dem Sie dachten, dass es wirklich schwer ist und Sie später, vielleicht in Phase zwei, tun werden, wirklich einfach ist und sie sind, auf keinen Fall, das Ding ist passiert schon auf dieser Seite, nenne einfach etwas anderes, oder ist das etwas anderes, oder es ist in das Framework integriert, das ich verwende. Sie können das Zeug früh bei der Arbeit mit dem Kunden bekommen . Der entgegengesetzte Weg ist manchmal, man denkt, das wäre wirklich gut. Großartig. Das scheint einfach zu sein. Dann ist der Entwickler so, das ist nicht einfach. Scheint Ihnen einfach zu sein, aber die Art und Weise, wie die Logik oder die Plattform oder die Codebasis, die sie bereits verwenden ist einfach nicht fähig und es ist eine große Aufgabe, sie zu bekommen. Möglicherweise müssen Sie dann einfach mehr Zeit für den Job einlassen oder ihn auf Phase zwei verschieben. Phase zwei ist eine nette Art sagen, dass es in Zukunft erledigt werden wird, aber wahrscheinlich nie. Du willst es dem Kunden nicht sagen, dass das niemals passieren kann. Du machst es in Phase zwei, was nie so ist, aber es klingt besser. Es kann formell sein, ich finde es nur gesprächig, finde heraus wer es ist, treffe mich mit ihnen, weil es keinen offiziellen Weg gibt. Ich werde Ihnen zeigen, wie Sie dem Entwickler Sachen geben können, aber es gibt keine wie x, y und z. es einem Drucker geben, wenn Sie Grafikdesigner sind, gibt es einen bestimmten Weg, den Sie herausfinden können. Bluten, Zuschneiden , Auflösung und diese Dinge, mit dem Entwickler wird es von ihnen abhängen, sie werden bestimmte Dinge wollen, definitiv. Dann ist viel davon die Art und Weise, wie sie arbeiten wollen und wie sie es bauen. Wenn es sich um ein Update für eine neue Website oder das Erstellen einer neuen Website handelt, werden sie viel mehr von Ihnen benötigen. Wenn es sich um ein Update einer bestehenden Website handelt, verwenden sie Ihre Designs im Grunde nur als visuellen Leitfaden und machen einfach alles getrennt von Ihnen. Alles, was Sie brauchen, um sie zu liefern, sind wahrscheinlich Bilder. Das wollte ich sagen , dass Entwickler Angst vor UX-Designern haben, wenn Sie Angst vor Entwicklern haben. Es ist das Gleiche aber auf der anderen Seite. Ein frühzeitiges Gespräch macht das Projekt nur zehnmal besser, vertrau mir dabei. Sie haben mit Ihrem Entwickler gesprochen und jetzt ist es an der Zeit, ihnen ein paar Sachen zu geben. Lasst uns jetzt in XD springen und ihnen Sachen geben. 80. Exportiere die richtigen image von Adobe XD: Hallo allerseits. In diesem Video exportieren wir Bilder aus Adobe XD, die bereit sind, sie an unseren Entwickler zu übergeben. Wir werden uns sowohl die Mechanik des tatsächlichen Exportierens einiger Tricks als auch einige der Formate ansehen. Deshalb ist das ein bisschen länger. Wir behandeln, wann Sie ein JPEG im Vergleich zu PNG gegen SVG verwenden sollten . Lasst uns alles Imaging holen. Das erste, was Sie wahrscheinlich tun sollten , wenn Sie Bilder exportieren , ist, einen Überblick über Bilder zu geben, eine PDF-Datei mit nur zwei Seiten. Sie können einfach zu Datei, Export, Alle Zeichenflächen gehen. Das Problem dabei ist, dass es alles exportieren wird , was eine Zeichenfläche ist. Wenn ich nur ein Referenzdokument habe, werde ich es für alles andere verwenden, als die Bilder zu platzieren, da Sie ihnen 400 Bilder senden , und sie sagen: „Wohin gehen die hin?“ Sie können eine PDF-Datei erstellen , damit sie sehen können, wohin alles geht. Sie könnten offensichtlich auch den Link benutzen. Um dies zu tun, können Sie nur die gewünschten Seiten auswählen. Klicken Sie auf den Namen, halten Sie die Umschalttaste gedrückt und klicken Sie auf die, die Sie verlassen möchten. Ich exportiere nur diese vier und gehe zu Datei, Export, und dann gehe ich zu Auswahl exportieren, dann machen wir die gesamte Kunsttafel. Aus dem Format ist PDF wirklich gut, mehrere Seiten, gute Auflösung, und wir können auf Exportieren klicken. Ich habe schon eins gemacht, weil ich dies zum zweiten Mal aufgenommen habe. meinen Weg dorthin verloren. Los geht's. Wir haben ein PDF und wir können das einfach senden, indem das in unsere Dinge einbeziehen, die ausgehen. Das dient nur als Referenz, Dinge, die sie vielleicht tatsächlich verwenden. Wir können die gleiche Technik anwenden. Dieses Bild hier muss ich für den Entwickler rausholen. Warum wird das Export bekommen und nicht diesen Text. Sie werden den Text in HTML neu erstellen, oder es hängt davon ab, wie sie erstellen, ob es sich um eine App im Vergleich zu einer Website handelt. Sie werden keine Tonhöhen Ihres Textes wollen. Sie werden nichts wollen, was Sie gezeichnet haben , Dinge wie Knöpfe. Sie werden dieses Feld nicht für Ihr Formular benötigen, da sie Code verwenden, um es zu erstellen. Mit deinen Knöpfen hier gibt es einen Knopf. Seltsamerweise, obwohl Sie sich viel Mühe in Ihren Schlagschatten gesteckt haben , werden sie ihn mit Code, sogar dem Schlagschatten, wieder erstellen . Die Dinge, die exportiert werden, die als Bilder betrachtet werden, sind Dinge, die wie klare Bilder aussehen. Wir haben überall einen Haufen davon. Die Dinge, die du gezeichnet hast, wie diese Icons. Diese Icons hier werden wir als „Bilder“ exportiert . Die machen wir. Dieses Bild wird ausgehen. Um ein Bild herauszuholen, können Sie einfach „Datei exportieren“ auswählen gehen. Ich möchte es dir so zeigen, nur weil ich wirklich kurz Formate durchgehen möchte . Sie müssen das vielleicht ein bisschen mehr recherchieren, aber Sie werden es mit einer dieser vier zu tun haben. PDF, von dem Sie wahrscheinlich schon wissen. Das war nur ein gutes Übersichtsdokumentformat. werden wir nicht mehr benutzen. JPEG gegen PNG gegen SVG. Wenn es um Bilder geht, die wir jetzt ausnutzen ist es entweder PNG oder JPEG. Der Unterschied besteht darin, dass ein PNG eine gewisse Transparenz ermöglicht. Lass mich das mal ansehen. Mal sehen, dieser muss ein PNG sein. Ich wäre lieber, dass es ein JPEG ist. Warum? Weil JPEGs oder kleiner. Bei sehr kleinen Dateigrößen erhalten Sie eine hervorragende Qualität. Dateigröße ist ziemlich wichtig , wenn es darum geht, dass Websites geladen werden. Kannst du sehen, warum dieser im Vergleich zu diesem ein PNG sein muss ? Abgerundete Ecken Dieser hier hat abgerundete Ecken. Es muss wie einige transparente Ecken geben. JPEGs lassen keine Transparenz durch. Vergleichen wir diese beiden. Ich exportiere es zweimal. Datei Exportieren wie ausgewählt. Wir machen es beides als JPEG. Die Qualität, wir werden auch in einer Sekunde darüber sprechen, aber lasst uns diese exportieren und dann noch einmal als PNG exportieren. Wir haben es exportiert. Ich bringe es einfach zurück, um dir den Unterschied zu zeigen. Wir machen es vielleicht vorbei. Wir erstellen hier drüben eine Kunsttafel. Ich habe ein großes Dokument mit Kontrast drauf. Ich benutze den Import. Ich werde sagen, hier sind diese beiden. Importiere sie zwei gleichzeitig. Siehst du den Unterschied an den Rändern? Ich kenne die Qualität. Wir werden in einer Sekunde darüber sprechen. Sie können jedoch sehen, dass ein PNG diese Transparenz zulässt, während JPEGs, obwohl sie sich hervorragend für Bilder eignen, nicht gut für Bilder geeignet sind, bei denen Sie Transparenz benötigen. Wenn du eine lustige ausgefallene Maske gemacht hast, muss es ein PNG sein. Wenn es nur ein volles Quadrat oder Rechteck ist, wo sind wir? Dieser hier, weil er schöne scharfe Kanten hat, keine Transparenz erforderlich ist, er wird ein JPEG sein. Sprechen wir darüber, welche Größe er haben sollte. Datei Export Ausgewählt. Wir haben beschlossen, dass dieser ein JPEG sein muss. Qualität hängt jetzt davon ab, wie viel Sie darüber wissen. Gute sichere Zone liegt bei 80 Prozent, 60 Prozent werden wahrscheinlich auch gut gehen. Alles, was niedriger ist, wird die Dateigröße schön und klein machen, aber es wird die Qualität nicht sehr gut machen. 100 Prozent sind zu hoch, um in unserem Fall auf eine Website zu gehen . Einer von diesen beiden. Hängt davon ab, wie kostbar es ist. Unser Produkt ist das Produkt, es ist das, was Sie verkaufen möchten, also ist die beste Qualität, die Sie tun können, 80 Prozent dafür wahrscheinlich wichtig. Wenn es nur unterstützende Hintergrundsachen sind, sagen Sie dieses Hintergrundbild hier zurück. Dieser hier muss nicht schön sein und es ist riesig. Dass es mit 40 oder 60 Prozent gut wäre, weil er im Hintergrund verblasst ist. Niemand wird die Qualität bemerken, während das Produkt, das Sie kaufen möchten wahrscheinlich so gut wie möglich sein muss. Werfen wir auch einen Blick auf JPEG versus PNG. Siehst du den Größenunterschied? JPEG, sie sind beide die gleiche fertige Version mit Ausnahme der Transparenz. Wir benutzen JPEGs, weil sie kleiner sind. Sie können die gleiche Qualität erhalten, aber in unserem Fall fast die Hälfte oder etwas mehr als die Hälfte der Dateigröße und Dateigröße wichtig. PNGs sind erstaunlich, aber groß. JPEGs sind winzig, haben aber keine Transparenz. Wir ignorieren derzeit SVGs . Wenn ich hier ankomme und ich gehe zum Exportieren ausgewählt. Wir werden unser JPEG machen. Wir haben über die Qualität und die Exportgröße gesprochen. Das ist wichtig. Was am Ende passiert, ist wenn Sie es in der Größe exportieren, die es hat, machen wir eine Größe, die es hat. Ich habe schon eine gemacht , die um zwei war. Lass uns noch eins machen. Ich beschleunige das. Ich habe das dreimal exportiert, in einer Größe, in zwei Größen und in voller Größe. Warum brauchst du volle Größen? Sie benötigen keine vier Größen. Oft sind zwei erforderlich. Der Grund, warum Sie eins und zwei und eine Vier oder so viele haben , wie Sie möchten, ist, dass bei dieser Größe die Qualität in Ordnung ist, aber wenn Sie auf ein etwas größeres Telefon steigen, denken Sie daran, dass wir uns für verschiedene anpassen müssen Handys. Wenn ich das mache, für dieses Telefon und dann geht es weiter zu einem größeren Telefon mit einem anderen Display, wird es nicht sehr schön aussehen. Was Leute tun, ist, dass sie manchmal zwei Größen machen. Das ist das bei zwei Symbolen. Wir fügen das hinzu, nur um herauszufinden, welches welches ist, weil sie alle denselben Dateinamen haben. Wir haben geopfert, mehr als doppelt so groß wie die erste zu sein , aber es ermöglicht uns eine gewisse Flexibilität, wenn es an verschiedene Geräte in verschiedenen Größen geht . Es ist sehr üblich, manchmal zwei zu tun. Manchmal steht vier mehr im App-Design. Sie werden noch größere Größen wünschen nur weil die Auflösungen auf Bildschirmen im Vergleich zu Desktop-Geräten und Websites außergewöhnlich sein können, wie Sie es in Zukunft sein könnten. Es kann manchmal 20 sein, weil die Auflösung auf Telefonen später oder in virtuellen Realität oder in Zukunft möglicherweise unterschiedliche Größen benötigt, aber deshalb exportieren Sie vielleicht etwas das ist doppelt so groß. Weil es etwas zerquetscht hat, es gibt ein bisschen davon, dass es groß sein kann, kleiner sein und immer noch gut genug Qualität hat. Wenn Sie exportieren, insbesondere für Web, entweder mobiles Web oder Desktop-Web, ist die Erwartung doppelt groß Sprechen Sie mit dem Entwickler, vielleicht wie groß Sie möchten? Sie werden so sein, es ist mir egal. Ich bin ein Entwickler, der manchmal auch dabei ist. Wenn Sie ihnen nur eine Art schicken, müssen Sie es nicht hinzufügen. Ich habe immer Lust, dass ein Add Two oder bei 2x eine andere gängige Art ist, es zu schreiben. Davon musst du nichts schreiben. Geh einfach, hier sind alle deine Bilder. Ich bin das, ich brauche die nicht. Da gehst du. Ergibt das einen Sinn? JPEGs: geringe Dateigröße, hohe Qualität, keine Transparenz, und im Allgemeinen exportieren Sie sie einfach mit der doppelten Größe, die Sie benötigen. Sie werden auch feststellen, dass sie den Namen dessen angenommen haben , was hier aufgeführt ist. Sie haben es vielleicht nicht bemerkt, aber das hat seinen Namen von meinem Bild , das ich importiert habe. dort hat es seinen Namen bekommen. Sie können den Namen hier anpassen, Sie können entscheiden, dass es kein sehr guter Name ist. Sie könnten ein Öko-Mensch sein und vielleicht sagen : „Okay, es muss Tee-Grün-billig genannt werden. Schreckliches Öko, aber da wird es seinen Namen bekommen. Wenn ich das jetzt exportiere, Datei, Export, Ausgewählt, nimmt es diesen Namen an. Los geht's, Tee-Grün-billig. Sie können es offensichtlich im laufenden Betrieb ändern , während Sie durchgehen. Von dort erhält es seinen Namen, und das passiert immer mehr , wenn Sie anfangen Dinge wie den nächsten Schritt zu tun. Nehmen wir an, ich möchte dieses Bild exportieren. Sie müssen sich entscheiden oder vielleicht mit Ihrem Entwickler chatten, wollen sie nur dieses Bild und sie färben es daran, weil er es im Code tun kann oder möchten, dass Sie es einfach zusammenkleben, damit sie es haben Hast du diese eine Einheit, die sie benutzen können? Finde das heraus oder schick ihnen beide. Wir schicken ihnen einen mit dem Wissen, dass sie wiederkommen und nach einer anderen Art fragen könnten . Was wir jetzt machen werden, ist es aus zwei Teilen. Wenn ich zwei Teile exportiere: Datei, Export, Ausgewählt, werden sie in separate Dateien exportiert. Wenn ich sage: „Los geht's“ und diesen exportiere, habe ich schon eins da drin , nur weil ich damit herumgespielt habe. Wo ist das hin? Ich bin mit diesem Bild getrennt vom Rechteck gelandet . Das Rechteck ist für niemanden gut und das ist vielleicht genau das, was Sie brauchen, aber wenn Sie es verbinden möchten müssen sie gruppiert werden. Ein Feld, ein Bild, ich wähle sie beide aus und gruppiere sie. Ich verwende Command G oder Control G, und hier kommt die Benennung ins Spiel. Man könnte diesen einen Hintergrund nennen und es -homepage nennen. Jetzt können Sie Bindestriche oder Unterstriche verwenden. Es wäre im Webdesign sehr üblich, keine tatsächlichen Leerzeichen zu verwenden. Sie können jetzt mit Leerzeichen davonkommen, also spielt es keine Rolle, aber Sie könnten einfach an das halten, was jeder weiß und liebt, und verwenden entweder Bindestriche oder Unterstriche oder vielleicht wieder ein Gespräch für den Entwickler. Was bevorzugst du? Ich bevorzuge Bindestriche. Die meisten Entwickler mögen Unterstriche, aber los geht's. Wenn Sie Dinge exportieren müssen , die zwei separate Teile sind, gruppieren Sie sie zuerst. Wir nutzen Einzelbilder in diesem Video und Sie können mehrere Einzelbilder exportieren. Wir werden den Batch-Export in einer SQL durchführen , was für größere Jobs etwas robuster ist, aber sagen wir mal, Sie brauchen nur dieses Image. Was haben wir sonst noch? Diese Lady hier. Was Sie tun können, ist, dass Sie dies auswählen können, „Umschalt“ gedrückt halten und auf diese klicken. Es kann schwierig sein, sie alle auszuwählen, und ich kann die Umschalttaste klicken. Wenn ich meinen „Command O“, „Control O“ drücke, habe ich tatsächlich drei Dinge ausgewählt und kann sie exportieren, und deshalb werden drei separate Bilder exportiert. Sie müssen die Umschalttaste auf ein paar Dinge klicken, und Sie erhalten die drei separaten Bilder. Das letzte Dateiformat, über das ich mit dir sprechen möchte, ist SVGs. Wir haben vorhin über SVGs gesprochen. Denken Sie an skalierbare Vektorgrafi Wenn Sie Old School sind, drucken Sie die EPS- oder KI-Datei aus. Schauen wir uns das an. Ich doppelklicke darauf; es hat einen schrecklichen Namen, also nenne ich es icon-Suche. Ich mache das Gleiche für mein kleines Zuhause. Da gehst du. Auch hier nenne ich sie so rückwärts, um sie einfach in Ihrem Dateimenü zu bestellen und es den Leuten leicht zu finden. Ich hab diese beiden. Ich wähle beide aus, halte „Umschalt“ gedrückt, weil ich weiß, dass ich Datei, Export und Ausgewählt machen kann , und ich bekomme beide Dinge. Jetzt werden wir SVG benutzen. SVG; Skalierbare Vektorgrafik. Es bedeutet, dass es nach oben und unten skaliert werden kann. All das Drama, das wir vorher hatten , als wir gingen, wie groß sollte es sein? Es sollte nicht 2x sein. Welche Qualität sollte es sein? All das geht mit SVG weg. Warum kannst du keine SVGs benutzen, um zu sagen, dass diese Teeblätter hier drüben? Weil SVGs nur mit diesen Ankerpunkten oder Vektorgrafiken umgehen . Was ich damit meine ist, wenn ich irgendwann darauf doppelklicke, besteht es aus diesen kleinen Koordinaten. Hier ist mein eigenes. Es besteht aus nichts. Wo sind meine Teeblätter? Das ist ein großes. Wählen Sie es aus, Befehl 3. Wenn ich darauf doppelklicke, besteht es tatsächlich aus diesen Koordinaten. Es ist Mathematik, die es macht, also macht es die beiden Dinge erstaunlich gut. Es bedeutet, dass es skalierbar ist, denn wenn ich etwas skaliere, ist es ein SVG oder ein Vektor. Es skaliert für immer, sei die Größe eines Planeten. Es ist eine wirklich kleine Dateigröße , weil das die andere Hälfte davon ist. SVG ist super klein. Sie Datei, Exportieren, Auswählen, und Sie werden ein SVG sein und die Standardeinstellungen für hier belassen. Wenn Sie sich nicht sicher sind, wird dies ziemlich hart darüber, was Sie wahrscheinlich jemals über SVGs wissen müssen. Ich werde nicht in diese Klasse gehen, sondern alles in der Standardeinstellung belassen. Eine Sache, die Sie tun könnten, ist dieser Umrissstrich. Wir haben es schon einmal gemacht, wo wir dieses Ding hier sagen, wenn wir einen Strich hinzugefügt haben, und Sie können entscheiden, was es tun soll. Sie können es zwingen, es zu skizzieren. Sie können jetzt Gliederungsstrich sagen, und dann spielt es keine Rolle, was Sie bei der nächsten Option beim Exportieren ankreuzen der nächsten Option beim , da er bereits skizziert ist. Aber denken Sie daran, wenn ich das nicht tue , bedeutet das, dass es, wenn es skaliert wird, eine Größe von vier hat, wenn ich es jetzt skaliere. Selbst es ist wirklich groß, es ist immer noch vier, und vielleicht ist es das, was Sie wollen, weil es mit anderen Elementen auf der Seite übereinstimmt oder wenn Sie möchten, dass es proportional skaliert wird, wie in Sie den Strich umreißen und wann es wird größer ebenso wie der Schlag um die Außenseite. Sie merken, dass sie es beim Export als Strich bezeichnen, aber Grenze hier drin ist , um Sie zu testen. Ich gehe zu Datei, ich gehe zu Exportieren, Ausgewählte exportieren und SVGs. Lassen Sie alles und klicken Sie einfach auf „Exportieren“. Ich hätte zuerst meine Ebene nennen sollen, aber ich schaffe es hier im Handumdrehen. Dies ist kein Icon mehr. Es wird meine Grafik sein und es wird Teeblätter sein. Hoffentlich haben wir hier etwas wie eine SVG. Denken Sie daran, dass wir diese früher als Icons bekommen haben. Du siehst, es ist winzig, 900 Bytes. Es ist nicht einmal ein Kilobyte und es ist riesig. Es kann riesig sein, Sie können das nach Belieben skalieren. Es wird hier ein paar seltsame Bälle wie diesen geben. Wir haben ein bisschen Lust, hier unten zu schneiden. Ich doppelklicke darauf. Sie können hier sehen, dass ich diese Maskengruppe habe, also exportieren wir das. Gehen wir zu Datei, Exportieren, Ausgewählt. Wir wissen, dass wir es als JPEG gegen PNG schaffen könnten . Warte da. Hier sind meine schlecht benannten Optionen. Du siehst hier drin, dass ich das maskiert habe. JPEG, nett und klein. PNG; wirklich groß, aber es hat die Transparenz, die ich brauche. Aber es gibt all das Zeug und du sagst: „Ich brauche das Zeug nicht wirklich.“ Manchmal gibt es einige Dinge , wo du hingehen musst: "Nun, ich bin in einer Komponente“, also kopiere ich sie, lege es im Hintergrund ab, komme aus allem heraus und füge es einfach ein, doppelklicke darauf. und finde meine kleine Maske und bearbeite das nur so, dass es beim Exportieren einfach kein so großes Bild ist. Es kann viel kleiner sein. Lass uns File, exportiere es. Los geht's. Es gibt das PNG , das wirklich groß ist, und es gibt das zweite, das ich exportiert habe. Sie werden feststellen, dass die Dateigröße deutlich kleiner ist und Sie drei Kilobyte haben. Hey, es zählt alles. Das ist Ihr All-in-One-Dateiformat/wie man einzelne Bilder aus Adobe XD exportiert. Da ist ein langer drauf. Da gehst du. Wir sehen uns im nächsten Video. 81. : Hallo allerseits. Wir werden uns etwas ansehen, das Stapelexportieren oder Markieren für den Export bezeichnet wird . Was es uns ermöglicht, ist Entwickler, der Person, die die App oder Website erstellt, die Macht zu geben . Sie können den Link verwenden , den wir zuvor erstellt haben, diesen gemeinsamen Entwicklungslink, und sie können auf Sachen klicken und sie können sagen, dass es sich um eine SVG oder PNG oder JPEG handelt. Du kannst sie wählen lassen. Es ist super praktisch. Lassen Sie mich Ihnen zeigen, wie es jetzt in Adobe XD geht. Als erstes müssen Sie sie für diesen Batch-Export markieren . Sie tun dies, indem Sie das Ding auswählen, das exportiert werden soll , und sagen, dass entweder den Export markieren, dort ein kleines Häkchen vorhanden ist, oder ich mache das rückgängig. Sie können mit der rechten Maustaste darauf klicken und Markieren für den Export oder in Ihrem Ebenenbedienfeld sagen , dass dieses kleine Symbol neben dieser Ebene es exportiert. Stellen Sie sicher, dass sie so gruppiert sind, wie Sie möchten und dass sie so benannt werden , wie Sie es möchten, denn denken Sie daran, dass sie diesen Namen behalten und sich einfach durcharbeiten. Sagen wir, dieses Logo muss hier exportiert werden, also mache ich das. Ich sollte diese richtig gut nennen. wir sicher, dass die richtigen Gruppen angeht. Ich bin in diese Komponente eingetaucht weil ich nicht das Ganze exportieren möchte , weil es nur eine große Einheit wäre. Ich gehe rein, schnapp mir das und sage, dass du exportiert wirst. Geh rein, schnapp dir nicht nur das Dach, das Teil. Ich ignoriere die Namen im Moment. Du ignorierst sie bei mir. Sobald Sie das getan haben, können Sie zum Dateiexport-Stapel wechseln. Das ist es, was das Ding macht. Es wird alles als Charge exportieren und das ist in Ordnung. Es hängt davon ab, wie Ihr Entwickler es machen möchte. Manchmal wollen sie einfach nur die Bilder. Das Problem damit ist, dass ich all diese entscheiden muss , die als PNGs exportiert werden. Lasst uns das machen. Ich klebe es auf meinen Desktop und erstelle einen neuen Ordner. Ich muss sie alle als PNGs exportieren, alle als SVGs und alle als JPEGs, und alle als JPEGs, in drei separaten Ges und löschen Sie diejenigen, die ich nicht möchte, in Formaten, also macht das keinen Spaß. Der wahre Grund, warum wir dies tun, ist, dass Sie entscheiden müssen, welchen Entwicklungsprozess läuft, wenn wir jetzt teilen und zu dieser Entwicklung gehen, die wir früher ignoriert haben . Wird es eine Website sein, auf der sich eine mobile Website befindet oder geht es für iPhone oder geht es auf das Google Android? Es wird die richtigen Namenskonventionen für Sie verwenden. Nun, das geht für das Web hoch und dann sollte das anklickbar sein. Warum ist das nicht anklickbar, Dan? Weil ich den falschen Flow habe. Mehrere Flows sind praktisch , aber auch problematisch. Hier drin kann ich jetzt zur Entwicklung gehen und jetzt kann ich ins Web gehen. Sieh mal. Jetzt gibt es vier Vermögenswerte , die ich tatsächlich markiert habe. Jetzt kann ich das anklicken. Das ist jetzt wirklich praktisch, denn sobald sie angekreuzt sind, selbst wenn ich Änderungen an diesen Blättern vornehme, wird es immer noch Teil davon sein, also kann ich es einfach erneut exportieren. Lasst uns das machen. Klicken wir auf „Link erstellen“. Was dieses herunterladbare Assets macht, ist, wenn der Entwickler darauf geht, also lass es mich öffnen, jetzt haben wir diese [unhörbaren] hier drüben, wie die Design-Ansicht. Was ich aber tun kann ist, dass du diese Option hier hast. Was es mir zeigen wird, wir haben es mit Bildern zu tun, also ignoriere alles, was nicht dieser Assets-Ordner ist. Wir schauen uns diese anderen in einer Minute an. Aber du kannst all diese schönen Bilder sehen. Es gibt meinen Grafik-Tee1 , den ich genannt habe, da ist mein Logo und es gibt meine unbenannten Icons. Das Coole, was sie tun können, ist, dass sie es auswählen können und unten können sie sich für SVG, PDF, JPEG entscheiden. Sie können ausflippen , weil sie nicht wissen , welches Dateiformat sie verwenden sollten. Es gibt einen [unhörbaren] Job, der vom Entwickler abhängt. Es könnte eine gewisse Ausbildung von dir erfordern. Sie sollten damit einverstanden sein, abhängig von ihrem Hintergrund, wie neu sie sind, aber es gibt ihnen die Flexibilität, erfordert jedoch, dass sie hierher kommen und darauf klicken und sie herunterladen. Sie erwarten vielleicht nur einen großen alten Bilderordner, also chatten Sie mit ihnen. Zeig ihnen das und sag hey, du kannst auf Dinge klicken und schauen, ich kann es herunterladen, oder ich klicke auf nichts und gehe hier durch die Ordner. Dieser hier hier. Es gibt ihnen Informationen darüber. Aber habe ich sie überhaupt für den Export markiert? Hab ich nicht. Welchen habe ich für den Export markiert? Ich habe gerade eins auf dieser Seite gemacht. Nein, ich habe gerade diese Icons gemacht. Stellen Sie sicher, dass Sie alle diese für den Export markieren , damit sie sie durchgehen können, klicken Sie einfach darauf und laden Sie sie hier herunter. Wenn du es nicht tust, können sie es nicht. Interessant, um uns fertig zu stellen, ist, dass in XD, wenn Sie das erste tun, weil es sich in einem Wiederholungsraster befindet, tut mir leid, in der Entwurfsansicht darauf doppelklicken. Wenn ich diesen für den Export markiere, werden sie alle für den Export markiert. Wenn Sie nicht möchten, dass dies geschieht, müssen Sie die Gruppierung des Wiederholungsrasters aufheben und sie dann alle einzeln markieren, wie Sie möchten. Aber es ist eine ziemlich coole Art mit einem Entwickler wie dem zu arbeiten , den Sie vom Export wünschen. Stellen Sie sicher, dass Sie es zuerst testen, bevor Sie es senden. Frag mich, wie ich es weiß, denn ich habe ständig Sachen an Entwickler geschickt, du hast sie nicht für den Export markiert. Du wirst diese Dinge überprüfen. Ja, das war's. Das ist Batch-Export oder Markierung für den Export und die beste Möglichkeit, es wie über die Freigabe und über diese Entwicklung zu verwenden . Stellen Sie sicher, dass Sie den richtigen Flow auswählen. Das war's. Lasst uns zum nächsten Video gehen. 82. So exportiert man für Ingenieur:innen Code in XD mit Design Specs: Hallo allerseits. Ich zeige Ihnen, wie Sie den Code aus Adobe XD für Ihren Entwickler vorbereiten können, damit er auf Dinge klicken, den Abstand, den Abstand, die Polsterung, die Größe davon, die CSS-Elemente herausfinden Polsterung, die Größe davon, können, was Farben werden verwendet, welche Schriftarten, tatsächlicher Text, der sich in den Dingen befindet, es ist eigentlich sehr einfach zu machen, also lasst es uns tun. Erstens, wenn es nicht viel ist, diese Arbeit zu machen, können Sie es schnell schlecht machen, sagen wir es so. Ich gehe zu meinem Share, wir müssen nur sicherstellen, dass wir auf den richtigen Flow klicken und Entwicklung gehen, dann entweder den Link generieren oder in unserem Fall den Link aktualisieren. Du schickst diesen Link an einen Entwickler und das bekommen er. Die große Sache, die Ausbildung, die Sie ihnen möglicherweise geben müssen, ist, dass sie nur wissen müssen, um auf dieses Symbol für die kleinen Ansichtsspezifikationen zu klicken dieses Symbol für die kleinen Ansichtsspezifikationen , das ihnen alles gibt, was sie brauchen es wird Standardkommentare geben, aber für einen Entwickler wollen sie wahrscheinlich all das. Von dort aus sollten sie sich durcheinander bringen und alles bekommen können, was sie brauchen. Da es Dinge wie diese mit meiner Designgröße, meinem Ansichtsfenster, automatisch einfügt diese mit meiner Designgröße, meinem Ansichtsfenster, , gibt es diese Bilder, die wir im letzten Video markiert haben, alle Farben, die sie benötigen. Leider werden sie es nicht kopieren, einfügen, codieren und einfach in ihren Code-Editor kopieren, einfügen, codieren und einfach in ihren Code-Editor stecken und es wird funktionieren, sie werden es mit Bits und Teilen von dem, was Sie erstellt haben, neu erstellen . Wie die Farben werden sie etwas CSS haben, das die verschiedenen Farben definiert, und was sie jetzt tun können, ist einfach hier reinzugehen und zu sagen, dass sie diese Farbe brauchen, sie klicken einfach darauf und Sie können sehen Dort unten hieß es, es sei kopiert, und sie gehen in den Code-Editor und gehen einfach einfügen, und sie werden einfach kleine Teile wie diese ziehen, sie können sich einige deiner Charakterstile ansehen. Wenn Sie jetzt Ihre Charakterstile benennen, heben wir sie standardmäßig in Adobe XD an. Denken Sie daran, dass wir das Ding gemacht haben, war es Design View, wir haben das gemacht. Wir haben diese erstellt, wo es H0s, H1s, H2s gab, und dann haben wir einfach zu Charakterstilen hinzugefügt, vielleicht gefällt uns das und wir klicken einfach auf diesen Button. Es ist weg, und geben Sie standardmäßig den Namen der Schriftart oder die Größe der Schriftart ein, die praktisch und lesbar ist, aber für den Entwickler sind sie wahrscheinlich eher daran gewöhnt, etwas zu bekommen siehe ihre H0, H1, 2, 3, 4. Dies wird oft nur als P-Tag bezeichnet, also hängt es von Ihrer Codierungsfähigkeit ab und wie hilfreich Sie für sie sein möchten Sie können diese also durchgehen und umbenennen, bevor Sie ausgehen, gleich mit der Benennung der Bilder , die Sie exportieren werden. Hier hat es einen guten Namen, denke ich, unter meinem Ebenenbedienfeld heißt es Grafik-Tee, also benenne deine Benennung zusammen mit deinen Charakterstilen und das kann helfen. Andere Dinge, die für sie nützlich sind. Sie könnten hingehen, großartig, wo eigentlich der H1 ist. Eigentlich zeigt es mir nur die Dinge auf dieser Seite, nicht meine gesamten Charakterstile. Sie werden feststellen, dass sich die Farben ändern und die verwendeten Zeichenstile geändert werden, wenn ich die Seiten Farben ändern und die durchgehe. Diese Textkopie, und was sie tun werden, ist großartig zu sagen, dies ist die Hauptkopie, und sie können hier basierend auf Ihrem Stil neu aufbauen. Was sie auch tun können, ist, können Sie die Highlights hier sehen ? Sie können ein bisschen tiefer werden, und sie können sagen, dass Sie sich das ansehen. Sie können darauf auswählen und es gibt ihnen das CSS. Auch hier ist es unwahrscheinlich , dass sie es wörtlich von hier heraus kopieren , weil es für die meisten Leute wahrscheinlich zu viele Details ist, aber es gibt ihnen eine Menge der richtigen Syntax, die sie verwenden können vor allem für Dinge wie die Schrift. Sie können auch entscheiden, wenn ich hier raus klicke, sie können entscheiden, ob sie mit Pixeln zu tun haben oder mit Punkten oder DPS zu tun haben, je nachdem, wie sie funktionieren. Andere wirklich nützliche Dinge sind mit Größe und Layout zu tun. Nehmen wir noch einmal an, dass dies hier meine Schriftart ist, sie haben herausgefunden, sie wissen, was die eigentliche Schriftart ist. Diese hier können sie darauf klicken, es kopiert es, sie können es in die Code-Version einfügen, aber sie können auch damit ausgewählt werden, um zu sehen, wie weit es ist. Kannst du sehen, wie es herumschwebt? Es sagt mir, dass es 22 Pixel unten auf dieser Box Wenn sie es also bauen und die Polsterung machen, werden sie sagen, dass die Polsterung 22 ist. Wenn ich zuerst auf dieses Kästchen klicke und dort schwebe, ist es eine Marge von sechs beiden Seiten. Schau dir das super hilfreiche Zeug an, oh und es hat einen Schlagschatten, sieh dir das an, und es sagt ihnen genau, welche Art von Schlagschatten, wie verschwommen es ist, alles super nützliche Sachen, anstatt sie versuchen es nur zu erraten. Da ist es da, das ist die eigentliche Syntax, ich würde das Ganze greifen und in meine CSS-Datei einfügen, weil alles fertig ist und es im richtigen Format ist, super praktisch. Andere nützliche Dinge , für die wir es verwenden ist das Kopieren Ihres Textes. Sie haben wahrscheinlich viel Zeit mit dem Kunden verbracht und die richtige Sprache verstanden, und sie werden dies viel auswählen und beschreiben und den Text kopieren und in ihre Datei einfügen. Außerdem können sie feststellen, dass die Interaktion ist, also gehen wir zu einer anderen Seite. Sie werden hier sehen, wenn ich Charakterstile schließe , werden sie in der Lage sein, denn sagen wir, wenn Sie einen finden, der etwas aufregender ist . Dieser hier erinnere dich, ist eine Interaktion, wenn ich unter Interaktionen auf „Off“ klicke, werden sie sehen können, dass ich hinzugefügt habe, es gibt einen Button hier und es geht zu etwas, es sagt ihnen welche -Seite, auf die es geht, und wenn sie darauf klicken, [LACHEN] bringt es sie zur nächsten Seite, das ist nicht was ich tun möchte. Gehen wir zurück zu meinem Kleinen, ich möchte eines dieser beiden Dinge sehen, ist, dass Sie all diese verschiedenen Auslöser hier sehen können, und wenn Sie über ihnen drüben, können Sie sehen, dass es sie hervorhebt? Was es macht ist, wenn du darauf klickst, siehst du? Es gibt ihnen beide Staaten, damit sie zwischen den verschiedenen Zuständen wechseln und dann gehen können. Was ist eigentlich die Hintergrundfarbe davon? Wechseln Sie zurück in den Standardstatus, der die Hintergrundfarbe dafür ist. Obwohl Sie vielleicht lange Zeit damit verbracht haben , diese verschiedenen Zustände zu erstellen, aber sie können sie nicht sehen, wenn Sie ihnen nur eine PDF-Datei oder ein JPEG geben, können sie nicht sehen, was dies bedeutet hat, aber sie können sie nicht sehen, wenn Sie ihnen nur eine PDF-Datei oder ein JPEG geben, können sie nicht sehen, was dies bedeutet hat, das Gleiche mit diesem. Sie werden die Interaktion hier nicht wie animiert sehen , aber wenn sie den gesamten Code abrufen, können sie zwischen dem Standardstatus und dem aktiven Status wechseln . Sie können damit interagieren, sie müssen nur aus diesem Entwicklungsmodus kommen und wieder in den Kommentarmodus wechseln, dann können sie hoch gehen und steigen. ist das Ding funktioniert, geh hinein, klicke darauf und entscheide die Farben, schau dich um, Kappe, Mittelstrich, all das gute Zeug, also gab es ein bisschen Bildung, mit der man arbeiten der Entwickler, der vielleicht mit jemandem gearbeitet hat, der so gut ist wie Sie in Adobe XD. Du bist gut, jetzt stehen wir durch diesen Kurs und ich verspreche Ihnen dass so viele Designer Autodidakt sind und sie genug von XD wissen, sie werden schöne Arbeit leisten, aber sie werden keine kennen den Super-Funktionen wie diesen, aber Sie tun es, chatten Sie also mit Ihrem Entwickler, sehen Sie, wie viel er weiß, und verbringen Sie vielleicht nur ein bisschen Zeit damit, diese verschiedenen Optionen zu durcharbeiten. Das ist es, so erhalten Sie alle Codey-Bits an Ihren Entwickler oder wenn Sie sich selbst erstellen, wie Sie alle Daten extrahieren , die für die Programmierung bereit sind. Das war's, wir sehen uns im nächsten Video. 83. Was ist ein Style-Leitfaden in Adobe XD: Jeder, in diesem Video werden wir uns ansehen, was unser Design-Styleguide ist, im Vergleich zu einem Stickerbogen und einem Designsystem. Wir werden etwas Einfaches für die Arbeit schaffen , die wir bisher geleistet haben, und ich werde Ihnen die verschiedenen Levels erklären, die Sie treffen können, wenn Sie einige dieser Styleguides machen. Wir beginnen mit einem Styleguide. Ein Styleguide oft ist es nur eine einfache Markenrichtlinien wenn Sie von Branding oder Design stammen. In meinem Fall ist es nur ein One-Pager, den ich dem Unternehmen geben kann , um einige der Designentscheidungen zu zeigen , die ich getroffen habe, um es klar zu machen. Nehmen wir an, Sie sind ein Auftragnehmer für einen größeren arbeitet firma. Ihre Designer werden auch einige Regeln benötigen, um zu funktionieren. Je nachdem, was Sie getan haben, können Sie entscheiden, was hier drin ist. Ich habe ein echtes Basic gemacht. Es hat ein paar Schriftarten, die Schriftgewichte, die ich benutzt habe. Ich wäre jetzt versucht zu gehen und jetzt wo ich das sehe, um meine H1s, H2s, H3s einzulegen . Wo sind sie? Nun, diese. Vielleicht in einer hübscheren Version, nur um zu sehen, was ich für die verschiedenen Hierarchie der Überschriften entschieden habe . Die Farben, die verwendeten Farbcodes. Wenn es um Farben geht, sehen Sie Dinge wie primären sekundären Akzent, vielleicht nur primär sekundär vielleicht wird es Farbe eins, Farbe 20 je nach Unternehmen und Marke, wie viele Farben, die du benutzt hast. Aber Sie werden diesen primären, sekundären Akzent ziemlich sehen . Ich habe sie auf dieser Seite als eins zwei drei bezeichnet. Hier drüben wirst du sehen, dass ich 100, 300, 500, 700 gekennzeichnet habe . Das ist auch im Design üblich, es kommt von der Programmierung ein wenig. Aber es bedeutet nur, dass ich fünf davon habe, der höchste ist 1.000, was ist mein solides Schwarz und Grau 100 ist meine niedrigste Farbe, die ich erreichen kann. Ich habe die 200 und 400 übersprungen. Warum? Weil ich mich entschieden habe, keine große Menge von ihnen zu verwenden, aber es gibt mir eine gewisse Flexibilität. Wenn ich entscheide, dass ich hier etwas brauche. Ich brauche etwas , das nicht ganz so ist, aber nicht ganz das, ich habe 800, die ich gebrauchen könnte. Das wirst du sehen. Es ist nichts Besonderes daran, außer dass es eine übliche Namenskonvention ist, mit Sie es vielleicht in Schriftarten gesehen haben, insbesondere in den Weißen. Möglicherweise haben Sie Futura 100, das ist die leichte Version, und die 900, die die schwarze Version ist. Sie werden beide sehen. Ich würde sie nicht verwechseln. Ich habe sie gerade hier reingebracht [LACHEN] um dir zu helfen. Dieser könnte 300, 500, 700 sein , mir Platz für etwas Helleres und möglicherweise etwas Dunkleres gibt, aber 1,2,3 ist auch in Ordnung. Hier können Sie entscheiden, als wären wir für das Logo verantwortlich und wenn ich Logo sage , bitten sie , dass wir es einfach getippt haben. Aber vielleicht entscheiden Sie Dinge wie die Mindestbreite, den freien Raum um ihn herum. Wie nah können diese anderen Schaltflächen kommen, Entscheidungen, die Sie getroffen haben? Auf welchen Farben wird es verwendet, wie sieht es gegen Weiß gegen Dunkel aus. Wenn du die Light-Version fertig hast. Wie sieht es gegen die Dunkelheit aus? Muss es größer sein? Diese Art von Designentscheidungen. Ich habe auch den Brief aufgenommen und meinen Benutzerfluss eingegeben , damit er schick aussieht. Leg es in Kisten. [GELÄCHTER] Ich habe es orange gemacht. Aber schauen wir uns einige andere Ebenen an. Es gibt keine Regel, wie viel Sie tun müssen. Es hängt von dem Job, dem Budget ab, das sie haben, wie viel Arbeit Sie in ihn investiert und welche Rolle Sie haben. Wenn Ihre Rolle nur dieser Aufgabenablauf hier unten war, haben Sie möglicherweise kein Design erstellt, daher ist kein Styleguide erforderlich. Möglicherweise haben Sie nur ein Dokument, das Ihre Gedanken zum Flow erklärt . Wie gehen wir zu diesen Orten und ob Sie weitere Entscheidungen über die Benutzeroberfläche getroffen haben , wie Farben oder wann Sie die Bolds in diesem speziellen Setup verwenden möchten. Ihr Styleguide ist möglicherweise sehr beschreibend für die von Ihnen erstellten Modelle oder die Reihenfolge , in der sie an den Benutzer geliefert werden. Ich plappere. Werfen wir einen Blick auf einige der anderen. Ich bin gerade in Schwierigkeiten geraten und habe Styleguide eingegeben. Du siehst, dass es nur einige gibt, siehst du das? Das ist wunderschön, hinter dem, was ich habe. Dieser Hintergrund, Grafiken, es ist weiter verblasst. Es ist einfach ein wirklich schönes, es ist ein Designprodukt für sich. Wenn es sich um ein großes Projekt handelt und Sie auch einen Großteil der Designarbeit erledigen, ist so etwas möglicherweise sehr wichtig, um es an den Kunden zu liefern. Es zeigt eine Verpflichtung zu dem Design, das Sie gemacht haben nicht dem, was genau wie hier ist. Hier ist ein bisschen auf einer Seite. Sie können sehen, schauen wir uns ein paar andere an. Einige davon nennen Sie Markenrichtlinien , mehr zum Drucken. Das hier. Wir sind nah dran, sieh es dir an. Siehst du, das ist das Gleiche aber sie haben die Seite herausgefunden. Es sieht cool aus. Hier ist es auf einem Laptop. Ich werde Sie dazu bringen, eines davon zu machen, weil Sie nichts Technisches darüber lernen müssen. Es ist mehr, alle Ihre Informationen auf einer Seite zu erhalten. In Bezug auf diesen Kurs geht es jedoch darum, etwas für Ihr Portfolio aufzubauen. Tu das, aber verspotte es auch auf einem Laptop. Mach etwas Nettes damit. Sie können hier sehen, dass dieser hier keine große Menge an Inhalten ist , aber schauen Sie, wie hübsch es ist. Ich liebe es. Sie können entscheiden, auf welches Level Sie gehen möchten. Aber schauen Sie sich ein wenig durch und genau wie es keine absolute Regel gibt , wie viel in Ihre Styleguides einfließen sollte. Wo gehst du vom Styleguide aus? Tut mir leid, noch eins, um es gemeinsam anzuschauen. Sagen wir, es ist interessant , wie Farben so werden, als ob ich es übertrieben habe und Dinge blendet, weil ich das immer mache, aber sie haben ihre Farben anders ausgelegt. Sie haben hier die volle Graustufen unten gemacht , sie haben sie. Wisse, dass du es dort nicht ganz lesen kannst, aber es sind 100, 200, 300 mit allen grauen Farben. Verrückte Leute. Hier drüben sieht man, dass sie sich dort angelegt haben und 1,2,3,4,5 erreicht haben. Eine andere Sache, die Sie tun können, ist sagen wir, dass diese Schriftart Sie wissen, wo sie ist, aber Sie wissen, dass der Kunde es nicht tun wird und er Ihnen zu diesem Zeitpunkt eine E-Mail senden wird. Was Sie tun können, ist, dass Sie diese Dinge verknüpfen können. Dies ist ein bisschen technisches Zeug, das wir nicht behandelt haben, ist, wir werden hierher gehen, wir werden zum Prototyp gehen . Dies ist ein seltsamer Prototyp. Wir werden Interaktion hinzufügen, wenn sie angezapft wird. Nicht für den Übergang, nicht animate bestellen. Wir werden gehen, nicht überlagern, das haben wir auch gemacht. Wir gehen zum Hyperlink und dann können Sie ihn hier eingeben und Sie können dorthin gehen, wo immer Sie diese Schriftart haben. Wir haben unsere von erinneren, Google Fonts und Adobe-Schriftarten erhalten, damit Sie sie überall verlinken können sie überall , damit die Leute sie verknüpfen damit sie darauf klicken und herunterladen können. Möglicherweise müssen Sie dort ein wenig Notation hinzufügen , dass sie es herunterladen können, aber das ist eine Sache, die Sie tun können, um einige dieser Teile zu verbinden. Es können Bilder sein, die Sie verwendet haben, oder vielleicht Repository für all die verschiedenen Logogrößen, die Sie erstellt haben. Sie können einen Link dazu hinzufügen. Es gibt verschiedene Niveaus. Styleguide Es gibt keine spezifischen Regeln, aber es ist oft informativ, während ein Stickerbogen ein anderer Begriff ist , den Sie wahrscheinlich sollten, naja, ich stelle Ihnen jetzt vor und es ist weniger Designstück, um allen zu zeigen was los ist, und es gibt einfach alles auf eine Seite. Das Stickerbogen, das ist ein gutes Beispiel für ein Aufkleberbogen. Es ist einfach alles angelegt. Es gibt keine Erklärungen. Es ist nur ein großes altes, oft kann ein Stickerbogen nur ein XD-Dokument sein. Sie können einfach alles werfen, weil im Moment viele unserer Schaltflächen in einer Komponente versteckt sind , die jemand, der XD nicht kennt oder vielleicht ein anderes UI-Designsystem verwendet. Ich kann das greifen und ich kann all die verschiedenen Knöpfe, all die verschiedenen Farben, auslegen , beschriften und das beschriften. Das ist primär, das ist die sekundäre, das ist meine Abbrechen-Button. Ziehe einfach all diese Teile raus und fange an, sie zu beschriften. Selbst dann musst du sie nicht beschriften. Es geht mehr darum, einfach alle verschiedenen Optionen aufzudecken , die jemand sehen kann. Das wäre ein Aufkleberbogen. Ein bisschen wie ein Styleguide, aber eher wie sie alle auf die Seite werfen. Sie verwischen die Linien ein wenig. Einige von ihnen, die ich mir hier ansehe, sind ein bisschen klebrig. Das ist meiner Meinung nach definitiv ein gutes Stickerbogen. Dieser hier fängt an, etwas von beidem zu bekommen, ein bisschen wie ein Styleguide, sehr schön, groß gebrandmarkt, aber alles ist auch dort angelegt . Also ein bisschen wie ein Hybrid. Nun, wo gehst du von hier aus? Nach einem Styleguide und einem Stickerbogen landen Sie bei einem sogenannten Designsystem. Was ich dir jetzt gezeigt habe, ist kein Designsystem. Ein Designsystem ist riesig. Es ist ein Weg, wo jemand, viele Menschen alles können. Ich bleibe bei diesem hier. Dieser hat eine Animation. Das sind all die Designsysteme, die ich rausgezogen habe. Grundsätzlich ist das, was sie sind wie eine gigantische Markenrichtlinien, die nicht nur Dinge erklären wie der Button aussehen sollte, sondern auch warum wir Dinge tun. Es kommuniziert Dinge wie Vision und Mission. Es wird Informationen über Barrierefreiheit haben, es gibt Dinge, die Sie früher getan haben, und das tun wir nicht mehr. Es ist ein riesiges Projekt. Ich habe noch nie ein vollständiges Designsystem gemacht. Ich habe in ihnen gearbeitet und warum sie gut sind, wenn ich anfing, etwas für Shopify für eine Aufgabe zu arbeiten , als sie sagten : „Hey, kannst du das machen?“ Ich könnte mich das durcharbeiten, verstehen, was wir tun, welche Farben verwendet werden und alle Elemente finden , die ich dafür brauche. Es wird nichts geben, worüber ich tatsächlich treffen oder versuchen muss treffen oder versuchen eine Entscheidung zu treffen, weil es hier drin ein Verständnis dafür geben wird . Dies sind riesige, große Projekte für Shopify. Shopify macht diese, sie geben mir einen Namen wie Polaris. Es bedeutet nur, dass es Zehntausende von Mitarbeitern in allen verschiedenen Ländern gibt Zehntausende von Mitarbeitern in , die alle das gleiche Designsystem teilen können . [GELÄCHTER] Eigentlich habe ich einen Knopf zu tun und ich bin mir nicht sicher welche Art. Ich kann durchgehen und sagen, hier sind einige Beispiele für ihre Knöpfe. Ich kann sehen, wie sie arbeiten. Werfen wir einen Blick darauf. Was sind die Slim Buttons? Schau, es gibt eine schlanke Variante. Ich kann es finden. Sie haben mir sogar gezeigt, dass dies die Webversion im Vergleich zu Android im Vergleich zu iOS ist. Es sind riesige große Dinge. Werfen wir einen Blick darauf, was sie für Formulare tun. Wenn ich ein Formular entwerfen muss, gehe ich nicht in XD und ziehe es einfach nach dem Zufallsprinzip heraus wo vielleicht abgerundete Ecken, vielleicht nicht abgerundete Ecken. Es wird sehr klare und spezifische Regeln für die tatsächlichen Dinge geben, aber es gab auch viel damit zu tun zu verstehen, wer ihr Kunde ist, was ihre Werte sind warum wir sind diese Dinge entwerfen. Materialdesign verwendet Google für das Android-System. Es ist ein bisschen schwierig zu navigieren, aber ich finde das sehr nützlich beim Entwerfen von Apps. Du kannst viele Sachen hier drin haben. Sie haben keine XD-Dokumente, die Sie herunterladen können, aber schauen wir uns ihre Icons an. Ich frage mich jetzt nur, aber sie werden erklären, wie sie viele ihrer Designentscheidungen bekommen haben. Sieh dir das an. Man kann sogar sehen, wie sie dazu gekommen sind. Sieh dir das an. Schau dir die Navigation an. Du verstehst die Idee. Dies sind große, große, große Projekte. Wir machen einen Styleguide. Wissen Sie, dass Sie irgendwo dazwischen Styleguides, ein Stickerbogen erstellen können, und Sie könnten entweder von einem Designsystem aus arbeiten, wenn ein Unternehmen eines hat oder Sie eines erstellen, was Sie möglicherweise tun eines Tages sehr bald. Die andere, die ich rausgezogen habe, war Salesforce. Ich weiß nicht warum. Nur wenn Sie ein Diagramm in Salesforce entwerfen möchten, sind dies die Regeln, dies sind Dinge, die Sie nicht tun müssen. Da gehst du. Ich hoffe , das war interessant. Wir haben ein paar kleine Begriffe eingeführt, aber das war's. Auf das nächste Video. 84. Kursprojekt 17 – Endentwurf: Holy Moly, es ist das letzte Klassenprojekt. Es heißt endgültiges Design, einigermaßen groß. Es geht hauptsächlich darum, Ihr mobiles Design fertigzustellen , eine Desktop-Version davon und einen Styleguide zu erstellen. Testen Sie mit Ihrem mobilen Design und finden Sie einfach heraus, was Sie aufgehört haben. Dies ist ein Kurs. Wir haben gerade Teile ignoriert und ein paar Kleinigkeiten hinterlassen. Gehen Sie durch ED, spielen Sie damit auf Ihrem Handy und sehen Sie einfach, ob etwas fehlt. Dinge, die nicht funktionieren, wir haben keine Suchleiste. Vielleicht entwirfst du etwas das auftaucht, es gibt eine kleine Suchoption. Vielleicht werde die Suche los und du fügst etwas anderes hinzu. Vielleicht setzen Sie die Kontoschaltfläche ein, gehen Sie durch und fügen Sie einfach alles hinzu, was fehlt, und prüfen Sie dann, ob Sie es in eine Desktop-Version übersetzen können. Sie sollten viele der gleichen Designelemente verwenden, aber es gab ein anderes Format. Das ist ein lustiges Projekt und ein kniffliges Projekt. Ich finde es einfacher, mit dem Desktop zu beginnen und danach ins Handy zu wechseln. Aber in unserem Projekt hier wussten wir von unserem Kunden und von unserer Person, dass es hauptsächlich auf Mobilgeräten verwendet wird. Wir haben angefangen, mit Mobile zu entwerfen. Wenn Sie wissen, dass es das Gegenteil ist und der größte Teil des Geschäfts für das Unternehmen über die Website erledigt wird, entwerfen Sie dies zuerst und übersetzen es dann hier in dieses. Ich möchte, dass Sie drei Seiten erstellen, die Homepage, die Produktseite und die Checkout-Seite. Sie können relativ einfach sein. Ich möchte nicht, dass Sie das gesamte Design neu erstellen, die Elemente der mobilen Version verwenden und sie für den Desktop vorbereiten. Möglicherweise müssen Sie zurückgehen und sich das Video ansehen, sich daran erinnern, wann wir Dinge wie das Layout gemacht und das wieder in Gang bringen , damit Sie hier eine gewisse Konsistenz haben. Entscheiden Sie, wie breit Sie es schaffen möchten, und Sie können nicht damit davonkommen , es zu einer schmaleren Website zu machen, wenn es Ihnen schwer fällt, zu dehnen was ein ganz einfaches Design ist? Schränken Sie die Website ein, falls sie nicht versucht, sie zu verschmieren und sie sieht nur ein bisschen einsam und verloren aus, und dann möchte ich, dass Sie einen Styleguide machen. Es kann super einfach, einfacher als meins sein, wenn es möglich ist, und diese ausschalten. Wo ist mein, Command 0, Control 0, so etwas. Es kann auch so etwas wie ein Aufkleberbogen sein. Zieh ein paar Knöpfe heraus. Ich freue mich, dass es entweder ein Stickerbogen oder ein Styleguide oder etwas dazwischen ist. Denn denken Sie daran, dass dies etwas ist für Ihr Portfolio wirklich großartig sein kann. Sie haben Ihr eigenes Unternehmen, es hat seine eigenen Farben und Themen, haben Ihren eigenen, einzigartigen Benutzer. Es kann das erste Stück für Ihr UX-Projekt sein, wenn Sie brandneu sind. Wenn Sie es geschafft haben, sehe ich gerne Screenshots von Ihrem fertigen Handy, Ihrem fertigen Desktop und Ihrem Styleguide. Machen Sie sie in separaten Schnappschüssen, damit wir sie gut sehen, sie in die Aufgaben hochladen, aber auch in sozialen Medien teilen können. Ich liebe es zu sehen, wo du fertig bist. Bitten Sie um Feedback, wenn Sie möchten, von der Gruppe, insbesondere diese Gruppen hier sind für dieses Feedback nützlicher. Dies ist ein bisschen mehr eine Möglichkeit, Dinge zu posten, zu mögen und zu teilen. Das ist Ihr abschließendes Klassenprojekt für den Kurs. Machen Sie sich ein, erledigen Sie das und springen wir in den nächsten Abschnitt, den letzten Abschnitt. 85. Die nächsten Schritte nach Adobe XD Essentials: Whoa, wo, wo ist das Ende? Ich meine, du warst hier, du hast es geschafft. Ich hoffe du sitzt da ziemlich stolz auf dich, ziemlich selbstgefällig. Alle anderen schauen sich Netflix an und Sie haben gerade Omega-Long-Kurs abgeschlossen, aufregende Inhalte. Also ja, du solltest wirklich stolz auf dich sein. Lassen Sie die Leute nicht mit Kursen beginnen und noch weniger haben sie so gut gemacht, dass Sie als nächstes etwas zu tun haben. Und was als nächstes zu tun ist, wäre möglicherweise, mich an einem anderen Kurs zu beteiligen. Was wäre für dich nach XD Essentials nützlich , was machst du? Jetzt. Der nächste Schritt könnte sein, wenn Sie den Code ein bisschen besser verstehen möchten. Auch wenn Sie vielleicht Ihre eigenen Websites erstellen oder einfach die Rolle des Entwicklers verstehen möchten. Es wird dir wirklich helfen, okay? Responsive Web Essentials könnten dafür ein guter nächster Schritt sein. Und wir beenden diesen Kurs sowohl danach als auch danach. Xd Essentials, wenn Sie tatsächlich anfangen möchten, es in die Praxis umzusetzen , ohne Code zu verwenden. Also nicht programmieren, mach so etwas wie Webflow oder Elementor, was wie ein WordPress-Website-Builder ist. Ich mache bald Kurse über diese beiden Schnecken. Was ich gerade nach diesem Layout mache, weiß ich nicht, vielleicht ist es ein Mädchen, aber ansonsten verantwortungsvolle Art des Wesentlichen. Und entweder Webflow oder Elemental, was irgendwie wie ein No-Code-Kurs ist. Und ich werde irgendwann auch in XD Advanced arbeiten. Okay, ich werde als nächstes diese Windströmung in Elementor machen , und ich werde zurück zu XD zurückkehren, um den fortgeschrittenen zu machen. Halten Sie also Ausschau nach den anderen Kursen, die Sie machen könnten. Und ich habe einen Photoshop-Kurs, Photoshop, Illustrator-Essentials und Fortgeschrittene. Ich bin mir nicht sicher, wo ich gesagt habe, dass es lange gibt , weil ich glaube , ich habe Photoshop Illustrator Essenti Es ist nicht das, was ich meine. Es gibt ein Photoshop, Illustrator, InDesign, After Effects, Premier Pro. Und ich habe viele Kurse und es gibt oft ein Wesentliches und Fortgeschrittenes in all diesen Kursen. Es gibt also noch andere Kurse, die möglicherweise für Ihre Besichtigung bereit sind. Vergnügen. Ich möchte meinen Redakteuren Just Animals und Taylor Coleman danken . Sie machen eine Menge Arbeit und zeichnen sie irgendwie nach MI auf. Also danke für diese Leute. Und ein großes Dankeschön an Stephen Butler und seine Lehrassistenten. Möglicherweise haben Sie ihn oder einen getroffen und sein Team kann Ihnen während dieses Kurses bei Antworten und Fragen helfen. Und vielen Dank für diese Leute, für die Hilfe. Wenn Ihnen dieser Kurs gefallen hat, stellen Sie außerdem sicher, dass Sie eine Bewertung hinterlassen. Und auch, wenn Sie sich vorstellen können , es auf andere Menschen zu verweisen und ihnen zu erzählen, wie großartig es war. Wie auch immer du weißt wie, das würde ich auch schätzen. Je mehr Leute meine Kurse sehen können, desto mehr Kurse kann ich machen. Vergewissern Sie sich auch, dass Sie mir in den sozialen Medien folgen. Es hat den ganzen Kurs durchlaufen, aber hier sind sie wieder, stell sicher, dass du dich mir und all denen anschließt. Und zum Schluss lassen Sie uns noch über unseren UI-UX-Designer sprechen, denn es kann ziemlich beängstigend sein , die Schindel aufzuhängen die Abmeldung aufzuhängen, um zu sagen: Ja, ich bin ein UX-Designer, ich bin verfügbar für die Arbeit. Es gibt keinen offiziellen Papierkram. Ich mache mir immer noch Sorgen, dass jemand an meine Tür klopft und sagt: Hey, du nennst dich UX-Designer. Zeig mir, zeig mir das Zertifikat. Sie haben den ganzen Abschluss , dass Sie das offizielle Gütesiegel haben . Es gibt keine. Es ist eher eine Änderung der Denkweise zu sagen, dass ja, ich nenne mich jetzt UX-Designer und es kann schwierig sein. Aber wisse einfach, dass es Level gibt. Sie können ein Junior-UX-Designer sein. Du kannst ein schrecklicher, schlechter UX-Designer sein, der gerade erst anfängt, was auch immer dir in deinem Kopf hilft, es irgendwie umarmen. Es geht darum, es wirklich zu genießen mehr wissen zu wollen. Und jetzt ist der Beginn unserer Reise. Du nennst dich vielleicht schon UX-Designer, das ist cool. Aber viele von uns leiden unter dem Imposter-Syndrom. Wann ist es okay? Viele Leute warten bis sie ihren ersten Auftritt bekommen und nennen sich dann UX-Designer. Aber ich gebe dir die Erlaubnis , dich von nun an als UX-Designer zu bezeichnen , weil es eine Einstellung ist du noch nicht alles weißt, aber das ist okay. Du bist auf deiner Reise als UX-Designer. Dass meine Freunde es sein werden. Ich hoffe dir hat der Kurs gefallen. Ich liebe es wirklich und mache es. Okay, ich mache jetzt eine schöne lange Pause. Sie sollten tatsächlich an Ihren verschiedenen Projekten arbeiten , wenn Sie sie noch nicht eingereicht haben. Ja, das ist das Ende des Kurses. Wie hast du mit dem Winken aufgehört? Und dann werden wir schwarz. Also, was wir in diesem sowieso machen werden, weil mir nichts anderes einfällt , was ich tun könnte. Es ist das Ende des Kurses. Nein, zurück, ich hoffe, dich in einem anderen Kurs zu sehen. Ordnung, winkt von Fade zu Schwarz, Datenbank. Sind sie gegangen?