Erste Schritte mit Adobe XD: Erstelle interaktive Website-Prototypen

1. Kurs-Einführung: Hallo Kreative. Adobe XD ist ein äußerst hilfreiches Tool für Website-Designer , die interaktive Prototypen erstellen möchten , mit denen sie mit anderen Kreativen zusammenarbeiten, Feedback von ihren Kunden einholen und schließlich das Artwork für einen Webentwickler vorbereiten können , damit es von einem Webentwickler verwendet Das bedeutet, dass sich alle Beteiligten vorstellen können, wie die Website aussehen und funktionieren wird bevor Sie mit der Erstellung beginnen Das spart eine Menge, hilft, Verwirrung zwischen Ihnen, dem Kunden und den Entwicklern zu vermeiden , und ermöglicht es Ihnen sogar , Assets direkt vom Prototyp selbst herunterzuladen. Hi, mein Name ist Malin und ich arbeite seit 2015 als Marken- und Webdesignerin Ich leite zusammen mit meinem Mann Jeremy ein Designstudio, und wir haben uns darauf konzentriert, nachhaltigen Unternehmen bei ihrer Kommunikation zu helfen . Ich habe mit einer Reihe von Marken und verschiedenen Branchen zusammengearbeitet, von Wohltätigkeitsorganisationen über Universitäten bis hin zu privaten Unternehmen In diesem Test werde ich Ihnen zeigen, wie Sie als Designer das Beste aus Adobe XD herausholen Designer das Beste aus Adobe XD und Ihnen zeigen, wie Sie effizienter arbeiten und ansprechendere Designs erstellen können, die Ihre Kunden lieben werden. Wir beginnen mit den Grundlagen von Adobe XD, wie dem Einrichten von Zeichenflächen und der Verwendung der verschiedenen Bedienfelder Anschließend gehen wir zu tieferen Themen wie Stilen, Zuständen und Komponenten über, die Ihnen helfen schnellere und bessere Prototypen zu erstellen. Abschließend behandeln wir die Zusammenarbeit und wie Sie Ihre Designs mit Partnern, Kunden und Entwicklern teilen können, um Kommentare zur Entwicklung gemeinsam Wir werden auch hilfreiche Plugins und andere Profi-Tipps behandeln , mit denen Sie Adobe XD noch weiter voranbringen können . Dieser Kurs richtet sich an alle , die mit Adobe XD beginnen möchten oder einfach nur einige Tipps und Tricks lernen möchten, die Sie möglicherweise bisher verpasst haben. Ich hoffe, dass dieser Kurs Ihnen hilft bei der Arbeit mit Adobe XD sicherer zu fühlen und dass er Ihnen zu einem effizienten und unterhaltsamen kreativen Prozess verhilft . Ich kann es kaum erwarten zu sehen, was du kreierst. Lass uns in die Klasse springen 2. Warum Prototypen erstellen?: Bevor wir loslegen Mit all den großartigen Funktionen von Adobe XD möchte ich nur kurz erläutern, möchte ich nur kurz erläutern warum ich es für so ein großartiges Tool halte und warum es wirklich wichtig ist, ein Prototyping-Tool zu haben , wenn Sie Websites entwerfen Wenn Sie Websites entwerfen und Designs erstellen , indem Sie einfach Bilder erstellen , die Sie mit Ihren Kunden teilen. Das kann ziemlich schwierig werden, wenn es um Feedback-Iterationen geht Und wir wollen wirklich einen Prozess in dem sich der Kunde wirklich begeistert und engagiert fühlt und Teil Ihres Projekts ist. Hier kommen also diese verschiedenen Tools ins Spiel. Der erste Grund, warum ich Adobe XD mag , ist , dass es Teil des Adobe-Pakets ist. Wenn Sie bereits eine Lizenz für Adobe haben, können Sie Adobe XD ohne zusätzliche Kosten verwenden. Es funktioniert auch mit all den verschiedenen Abkürzungen und Integrationen Und Sie werden sich mit der Benutzeroberfläche sehr vertraut fühlen, was meiner Meinung nach am Anfang bei der Lernkurve helfen kann . Der zweite Grund, warum ich Adobe XD wirklich mag , ist, dass unsere Kunden und Mitarbeiter eigentlich kein Konto benötigen, um Dinge wie Kommentieren und Herunterladen von Dateien zu tun Das macht es wirklich einfach, weil Sie nicht das zusätzliche Hindernis haben , zu erklären, warum sie für etwas ein Konto erstellen müssen . Mit Adobe XD können Sie auch direkt Feedback zu Ihrem Prototyp erhalten. Und es kann eine wirklich gute Möglichkeit für Sie sein, Feedback zu erhalten , das auf bestimmte Bereiche Es ist also viel einfacher, herauszufinden, was Sie in bestimmten Bereichen tun müssen , als eine lange E-Mail mit vielen Informationen zu eine lange E-Mail mit vielen Erstellung eines interaktiven Prototyps ist auch eine sehr gute Möglichkeit, um sicherzustellen , dass Sie jegliche Reibung zwischen der Idee des Kunden, Ihrem Design und der tatsächlichen Umsetzung durch Ihre Entwickler minimieren zwischen der Idee des Kunden, Ihrem Design und der tatsächlichen Umsetzung durch Ihre Entwickler Weil eigentlich jeder sehen kann wie es praktisch funktionieren würde, anstatt Bilder oder Texte einzufügen und zu sagen, nun, das würde sich bewegen oder das würde so funktionieren. Das ist also eine Möglichkeit, diese Lücke wirklich gut zu überbrücken. Schließlich ist Adobe XD ein Industriestandard. Nicht der einzige, aber er ist einer der großen. Und das bedeutet, dass, sagen wir, ein anderer Kreativer die Arbeit an Ihrem Projekt fortsetzen möchte , es für ihn sehr einfach wäre, es in das Projekt zu integrieren , da er höchstwahrscheinlich bereits damit vertraut ist. wir nun wissen, warum Adobe XD ein nützliches Tool ist, wollen wir uns damit befassen, wie es tatsächlich funktioniert. 3. Adobe Xd-Tour: Wenn Sie Adobe XD zum ersten Mal verwenden, kann es sehr hilfreich sein, sich mit den verschiedenen Bedienfeldern und der Einrichtung Ihrer Dokumente vertraut zu machen den verschiedenen Bedienfeldern und der Einrichtung Ihrer Dokumente vertraut zu Das erste, was Sie tun müssen, wenn Sie ein neues Dokument erstellen , ist eine Zeichenfläche zu erstellen Zeichenflächen können entweder die Breite eines bestimmten Geräts haben, z. B. ein Standard-Desktop oder ein bestimmtes Telefonmodell Oder Sie können eine benutzerdefinierte Größe erstellen. Jedes Projekt kann viele verschiedene Zeichenflächen oder verschiedene Größen haben verschiedene Zeichenflächen oder verschiedene Größen Also beginne ich normalerweise mit einem Format, entweder Desktop oder Telefon. Und sobald das Design für dieses Format bereit ist, füge ich für jede Seite eine zweite Größe hinzu, um zu zeigen wie das Design in einem responsiven Format funktioniert. Verwenden wir nun ein Desktop-Format und speichern wir es in der Cloud , da wir so später Mitarbeiter einladen können wir so später Mitarbeiter einladen Jetzt, wo wir uns im Dokument befinden, werden Sie sehen, dass Sie sich auf Ihrer Zeichenfläche bewegen können, indem Sie nach den drei kleinen Punkten oben greifen Wenn wir die Höhe der Zeichenfläche vergrößern oder verkleinern möchten , doppelklicken wir einfach auf die Zeichenfläche selbst und verschieben dann die Linie hierher nach unten Und wir können auch den Namen der Zeichenfläche ändern. Das hilft uns, ein bisschen besser organisiert zu bleiben und das Projekt, sobald wir anfangen, viele verschiedene Seiten zu haben, haben Sie diese Zeile vielleicht bemerkt. Diese Zeile ist sehr hilfreich, weil sie uns zeigt, wo sich der Breakpoint befindet, was bedeutet, dass alles, was über diesem Punkt liegt , ohne Scrollen sichtbar Das ist sehr hilfreich, weil wir sicherstellen wollen, dass wir die wichtigsten Informationen immer „above the fold“ hinzufügen, aber auch auf klare Weise zeigen, dass es noch mehr zu sehen gibt , um die Leute zum Scrollen zu animieren Wenn Sie eine weitere Zeichenfläche hinzufügen möchten, klicken Sie einfach auf dieses kleine Symbol, das wie ein Quadrat auf der linken Seite aussieht Und dann erhalten Sie Vorschläge mit verschiedenen Zeichenflächengrößen Sie haben vielleicht bemerkt , dass wir oben drei Tabs mit den Aufschriften Design, Prototyp und Teilen haben . Wenn wir unsere Designs erstellen, befinden wir uns immer im Tab Design. Wenn wir das Design jedoch interaktiv gestalten möchten, sollten wir uns im Prototyp-Tab befinden. Hier können Sie Schaltflächen und andere Elemente verlinken , um beim Klicken auf eine andere Seite zu gelangen. Andere interaktive Elemente, wie das Arbeiten mit der Statusänderung beim Hover zum Beispiel das Arbeiten mit der Statusänderung beim Hover, sind eigentlich Teil der Registerkarte Design der Registerkarte „Prototyp“ können Sie also Elemente anklickbar machen Wir werden uns das später in der Klasse viel genauer ansehen. der Registerkarte „Teilen“ können Sie Ihr Design mit Kunden, Entwicklern und anderen Personen teilen, die das Design entweder überprüfen oder implementieren möchten . Es gibt aber auch eine Möglichkeit, die Designdatei für die Zusammenarbeit zu teilen . Dafür hast du oben rechts einen Button. Du wirst eine kleine Person mit einem Plus-Symbol sehen. Hier. Sie können jemanden per E-Mail einladen, das Dokument dann mit Ihnen bearbeiten kann. Das ist sehr hilfreich, wenn Sie ein mehrköpfiges Team haben und sogar gleichzeitig am Design arbeiten können Als nächstes folgt das Share-Symbol. Wir haben tatsächlich zwei weitere nützliche Optionen. Der erste ist dieser kleine Ordner. Hier. Dies ist eine Art von Vorschau können bei der Sie Ihr Telefon anschließen und sich den Designprototyp über ein Gerät zur Vorschau ansehen . Wir haben auch diese kleine Play-Schaltfläche, Wir haben auch diese kleine Play-Schaltfläche, Sie eine Vorschau des Designs direkt auf Ihrem Desktop anzeigen können Kehren wir zur Registerkarte Design zurück und schauen uns an, was wir auf dem Panel auf der linken Seite finden können Dies ist ein wirklich vergessener Teil von Adobe XD, aber es enthält so viele hilfreiche Tools. Oben finden Sie grundlegende Formen, die Option zum Hinzufügen von Texten und das Stiftwerkzeug , das sehr ähnlich funktioniert wie in Adobe Illustrator Für die Optionen Quadrat und Kreis. Sie sind ziemlich begrenzt, da Sie mit dem Dreieck tatsächlich die Anzahl der Punkte festlegen können. Wenn Sie abgerundete Kanten haben möchten. Andere wirklich nette Optionen , mit denen sich Hintergründe und andere Designelemente ganz einfach erstellen lassen. Wenn Sie sich hier oben ansehen, können Sie auch das Pathfinder-Tool in Adobe XD sehen, dem Sie Formen verbinden können Aber in Adobe XD hat es mir tatsächlich besser geholfen. liegt daran, dass Sie die Formen unabhängig voneinander verschieben können , wenn Sie auf die Formen doppelklicken. Es ist also nicht destruktiv , wie es in einigen anderen Adobe-Tools der Fall ist. Es gibt auch eine großartige Option, die sehr hilfreich sein kann , wenn Sie ein Design mit sich wiederholenden Elementen erstellen , wie zum Beispiel ein Bildraster Sie müssen lediglich die Form auswählen , die Sie wiederholen möchten. Klicken Sie auf das Raster und ziehen Sie dann die Kanten heraus, um weitere Elemente zu erstellen. Etwas weiter unten haben wir drei Icons. Und ich werde jetzt über den mittleren sprechen, weil wir die anderen beiden in anderen Kapiteln behandeln werden. Aber der mittlere ist im Wesentlichen Ihr Ebenen-Tab. Hier kannst du all deine Zeichenflächen sehen. Und wenn Sie eine Zeichenfläche verwenden, werden Sie sehen, dass sie im Arbeitsbereich hervorgehoben Das kann sehr hilfreich sein, wenn Sie ein wirklich großes Projekt mit vielen verschiedenen Seiten haben . Nun, da wir unsere Wartezeit etwas genauer kennen, gehen wir noch einmal zum Tab Design und schauen uns an, wie wir einige Texte und Bilder hinzufügen 4. Bilder und Text: Toll, also fangen wir an, mit dem Text und den Bildern in Adobe XD zu arbeiten . Sie können Text hinzufügen, indem Sie auf das kleine Textsymbol und das linke Bedienfeld Und dann können Sie einfach klicken und ziehen, um die gewünschte Textbuchgröße zu erhalten . Viele unserer Optionen finden Sie Viele unserer Optionen hier im rechten Bereich Das erste, was ich Ihnen zeigen möchte, sind nur die grundlegenden Dinge, mit denen Sie beginnen, nämlich wo Sie Ihre Schrift ändern. Zum Beispiel Ihre Schriftgrößen, Ihr Abstand, Ihre Unterschneidung und der Abstand zwischen den Sätzen, z. B. den verschiedenen Zeilen Sie haben aber auch viele andere großartige Optionen, z. B. wie Sie in Großbuchstaben wechseln und Ihre Texte stilisieren und auf andere Weise Ich möchte Ihre Aufmerksamkeit hier wirklich auf diese drei kleinen Schachteln lenken . Weil sie tatsächlich wirklich bestimmen können wie Sie mit Text in Adobe XD arbeiten. Wenn wir jetzt hier nachschauen, ist es auf dieses normale Textfeld eingestellt, was bedeutet, dass der Text hier auf dieses Feld beschränkt ist Wenn ich also, sagen wir, ganzen Text kopieren würde und ich würde immer mehr hinzufügen. Du wirst sehen, dass es da ist, aber wenn ich wegklicke, ist es versteckt. Das wären also Texte, die in Ihrem Design nicht sichtbar wären , es sei denn, Sie erweitern die Box tatsächlich. Und das kann einige Probleme verursachen wenn wir es tatsächlich entwerfen und einem Entwickler übergeben , weil dieser möglicherweise nicht merkt, dass Text da ist Sie werden also nicht wirklich auf der endgültigen Entwickler-Website angezeigt. Was wir stattdessen tun können, ist, hier zu dieser Option zu wechseln, was bedeutet, dass sie auf die Höhe Ihrer Texte reagiert . Wenn Sie also weiterhin Text hinzufügen, wird das Textfeld in Ihrer Option hier immer größer Sie haben dasselbe, aber es reagiert auf die Breite. Wenn wir also früher immer wieder Dinge hinzugefügt hätten und wir es so gemacht hätten, würde es eigentlich nicht breiter werden. Aber wenn wir es so ändern, dass es horizontal ist, können wir tatsächlich Dinge zur Breite hinzufügen. Großartig. Als Nächstes werden Sie über diese grundlegenden Dinge rund um Farben sprechen diese grundlegenden Dinge rund um , damit Sie die Füllung festlegen können. Du könntest eine Grenze machen , wenn du möchtest. Und Sie können auch mit der Opazität Ihres Textes arbeiten . Wenn du möchtest. Du kannst auch Dinge wie innere Schatten, Schlagschatten oder Hintergrundunschärfe Eine Sache, die auch gut sein kann , ist, dass Sie Dinge direkt in Ihrem Text, in Ihrem Prototyp, verknüpfen können . Nehmen wir zum Beispiel an, Sie haben Texte, die auf der Website verlinkt werden. Anstatt deinen Entwickler mit diesen verschiedenen Dingen zu verlinken, kannst du es einfach hier verlinken und er wird genau wissen, wo er es platzieren muss. Gehen wir nun zu den Bildern über. Wenn wir Bilder hinzufügen, gibt es verschiedene Möglichkeiten, dies zu tun. Eine Möglichkeit besteht darin, das Bild einfach auf Ihre Zeichenfläche zu ziehen Bild einfach auf Ihre Zeichenfläche Und es wird in der Größe angezeigt, die es tatsächlich hat. Und wenn Sie die Größe tatsächlich ändern, behält es die Proportionen bei, die es hat. Aber wie Sie sehen, ist es ein bisschen schwierig, es tatsächlich zu kopieren oder so stark zu ändern . Ich bevorzuge es also, einen tatsächlichen Container für dieses Bild zu erstellen . Sie könnten es also entweder tun, indem Sie die Formen verwenden. Nehmen wir zum Beispiel eine Kiste an. Und dann nehmen wir das Bild und ziehen es direkt in das Feld, und dann erben wir diese Eigenschaften Sie könnten genau den gleichen Namen wenn Sie eine andere Form verwenden möchten. Wenn wir zum Beispiel diese Dreiecksform machen würden , dann würden wir sie auf fünf Ecken ändern. Und dann machen wir genau dasselbe, indem wir ein Bild hineinziehen Eine Sache, die hier zu beachten ist, ist, dass Adobe XD normalerweise als Umriss oder Rahmen dargestellt wird. Das ist etwas, das Sie sich vielleicht ansehen und das Häkchen entfernen sollten, wenn Sie es nicht verwenden möchten. Wenn Sie auf die Bilddaten klicken, wird auch dieser kleine Kreis in den Ecken angezeigt , und diese helfen Ihnen die Bildecken zu verschieben, wenn Sie möchten Wenn Sie etwas erstellen möchten , das eine ganz andere Form hat, schlage ich vor, das Stiftwerkzeug zu verwenden und damit einfach den Bereich nachzuzeichnen, den Sie als Bildcontainer haben möchten . Dann machst du einfach genau den gleichen Namen indem du das Bild in diese Form Es gibt ein paar wirklich interessante Funktionen , die Sie tatsächlich mit Bildern verwenden können, um Ihren Prototyp viel interaktiver zu gestalten . Das erste ist das Scrollen. Nehmen wir diesen Abschnitt hier an, in dem wir eigentlich möchten dass jemand durchblättern kann , um das vollständige Bild zu sehen. Aber wir können die Bilder auswählen und dann zu diesem kleinen Bereich hier gehen. Hier können wir tatsächlich diese verschiedenen Scrolloptionen erstellen Sie könnten also eine horizontale, eine vertikale oder beides machen. Nehmen wir an, wir möchten horizontal scrollen. Klicken Sie hier und wir können sehen, dass diese Abschnitte markiert werden. Wenn wir jetzt auf die Schaltfläche „Abspielen“ klicken, können wir nach unten scrollen und sehen, dass wir tatsächlich durchblättern können , um das Bild anzuzeigen, das zuvor außerhalb der Zeichenfläche befand Eine weitere großartige Funktion kann darin bestehen, Text und Bilder aneinander auszurichten. Nehmen wir zum Beispiel an, dass dieser Abschnitt ein bisschen falsch ist und ich sichergehen wollte , dass alle Bilder dieselbe Höhe haben, wir können zu den Ausrichtungswerkzeugen ganz oben gehen. Und in diesem Fall würden wir uns für eine Ausrichtung nach oben entscheiden. Wenn Sie auf dieses klicken, werden sie automatisch aneinander ausgerichtet. Wenn Sie ein Bild haben , das fast perfekt ist, Sie es aber tatsächlich umdrehen möchten. Sagen wir also vertikal oder horizontal. Sie können einfach zu diesen kleinen Symbolen hier gehen und sie einfach anklicken, um sie entweder vertikal oder horizontal zu drehen. Das Letzte, was Sie in diesem Kapitel mit Ihnen teilen möchten , ist, wie etwas tatsächlich reparieren können, damit es beim Scrollen in der Sitzposition bleibt. Und das kann nützlich sein für Dinge wie, sagen wir, eine Navigation. Nehmen wir an, in diesem Fall möchten wir , dass die Navigation stickig ist. In diesem Fall möchten wir vielleicht diesen Hintergrund erstellen, um sicherzustellen, dass er auf verschiedenen Hintergründen sichtbar ist. Und dann wählen wir das Menü selbst aus. Wir können sie alle gruppieren. Und dann wählen wir beim Scrollen einfach eine feste Position. wir nun auf die Play-Schaltfläche geklickt haben, können wir sehen, wie Algebra scrollt Das Menü wird oben Und das ist etwas , das Sie auf viele verschiedene Arten tun können auf viele verschiedene Arten tun um mit Bildern und Text herumzuspielen, beispielsweise für Blog-Funktionen oder andere Elemente , die Sie hervorheben möchten 5. Stil: Wenn wir Websites erstellen, möchten wir, dass all die verschiedenen Elemente auf verschiedenen Seiten konsistent sind. Sie könnten zum Beispiel eine Schriftgröße für jeden Titel und eine für H2-Titel und eine für den Fließtext Möglicherweise haben Sie sogar eine andere Schriftart für Testimonials. Wie stellen wir also sicher, dass es wirklich konsistent ist, ohne dass wir all die verschiedenen einzelnen Assets ändern müssen all die verschiedenen einzelnen Assets ändern , wenn sich etwas ändert Hier kommen Stile ins Spiel. Stile helfen Ihnen im Wesentlichen dabei, Regeln zu erstellen, sodass wir wissen, dass alles, was diesen einen Stil hat, auf die gleiche Weise formatiert wird Nehmen wir zum Beispiel an , Ihr Kunde kommt zurück und möchte die Farbe der Schaltflächen aktualisieren, dann müssen Sie nicht jeden einzelnen Button manuell aktualisieren. Sie können die Styles einfach aktualisieren. Um Ihre Stile zu erstellen, müssen Sie lediglich den Text oder die Farbe auswählen , die Sie stilisieren möchten. Dann gehst du hier auf der linken Seite zum Tab deiner Bibliothek Und dann müssen wir nur noch auf das kleine Plus klicken , um einen Charakterstil zu erstellen. Dies wird automatisch nach dem Schriftnamen und der Schriftgröße benannt. Du kannst es aber auch umbenennen indem du einfach doppelklickst und zum Beispiel Titel, Alter eins sagst zum Beispiel Titel, Alter Auf diese Weise können Sie den Überblick über alles behalten , falls Sie beispielsweise verschiedene Exemplare derselben Schrift, aber unterschiedlicher Größe haben . Wenn Sie dasselbe für Farben tun möchten, müssen Sie nur den Farbblock auswählen, zu Farben gehen und auf das Plus klicken. Und wir werden hier genau dasselbe tun. Wir können das zum Beispiel Fußzeile und Hintergrund nennen. Nun, wenn ich zu diesem Farbblock gehen und in meinen Styles tatsächlich auf meine Farben klicken würde. Sie können sehen, dass es in diese Farbe geändert wird. Genau das Gleiche gilt für Text. Wenn wir ein Textstück auswählen, das nicht der Titel ist , und klicken wir hier auf den Titel. Sie werden sehen, dass es automatisch geändert wird. Dies geht einher mit all den verschiedenen Stilen, die Sie hier haben. Aber wenn Sie Ihre Meinung ändern möchten, können Sie sie jederzeit ändern, ohne die Stile hier tatsächlich zu aktualisieren. Schauen wir uns an, wie das praktisch funktioniert. Nehmen wir zum Beispiel an , wir machen all diese verschiedenen Titel, dieses Zeitalter. Nun, wenn ich das ändern möchte, muss ich als Markt eingeben, rechten Maustaste klicken und bearbeiten. Jetzt kann ich das auf eine größere Größe ändern, sagen wir bei, damit wir es sehen können und Sie werden sehen, dass all diese verschiedenen Instanzen alle aktualisiert wurden. Sie können auch Dinge wie die Farbe und andere Eigenschaften aktualisieren . Sie können auch sehen, dass Sie es auf Canvas hervorheben können, wenn Sie mit der rechten Maustaste darauf klicken. Das zeigt Ihnen all die verschiedenen Stellen, an denen dieser Stil angewendet wird. 6. Komponenten: Genau wie bei Stilen helfen Ihnen Komponenten dabei, Regeln festzulegen, sodass das Design wiederholt werden kann ohne dass Sie Dinge manuell ändern müssen. Aber bei Komponenten gehen wir über Schriften und Farben hinaus. Hier können Sie eine ganze Reihe verschiedener Elemente zusammen erstellen , die zu einer Komponente werden. Bei Komponenten können ganze Abschnitte wiederkehrende Elemente sein. Aber mit dieser wirklich intelligenten Sache namens Overrides können wir trotzdem einzelne Assets anpassen, ohne den Master bearbeiten zu müssen, um neue Komponenten zu erstellen Oder Sie müssen die verschiedenen Elemente auswählen , an denen Sie teilnehmen möchten. In diesem Fall haben wir also diese Grafik mit den Eröffnungstypen. Und ich werde sie nur der Einfachheit halber gruppieren. Also, was wir jetzt tun werden, ist, dass wir hier auf die kleine Komponente Plus klicken. Sie können auch mit der rechten Maustaste klicken und auf Komponenten erstellen klicken. Oder du könntest Hockey mit K machen Lass uns diese Komponente machen. Jetzt wirst du sehen, dass es diesen kleinen grünen Rand mit diesem kleinen Diamanten hat diesen kleinen grünen Rand . Jetzt heißt das, dass es sich um die Master-Komponenten handelt. Und wenn Sie hier auf der Seite sehen , stehen Komponente und Hauptteil. Und das bedeutet, dass dies der Meister ist. Das ist also ein super einfacher Weg, das zu tun. Jetzt werden alle Änderungen , die wir an diesem vornehmen , alle anderen Änderungen übernehmen. Nehmen wir zum Beispiel an, dass wir genau diese Komponenten woanders haben möchten . Sagen wir zum Beispiel in der Fußzeile. Also lass uns diesen loswerden und hinzufügen. Also können wir einfach hier klicken. Wir können diese Öffnung in Öffnungszeiten umbenennen. Und wir können das einfach anklicken und hierher ziehen, um es an dieser Stelle zu haben. Jetzt werden alle Änderungen , die wir am Master vornehmen , auch in diesen übernommen. Manchmal kann es ein bisschen schwierig sein , wenn man viele Zeichenflächen hat , um zu wissen, wo der Master ist Was Sie tun können, ist , mit der rechten Maustaste hier zu klicken und es einfach auf der Leinwand zu markieren , um zu sehen, wo sich das befindet. In diesem Fall wird es also hier hervorgehoben. Aber wenn Sie hier unten auf diesen klicken, können Sie einfach auf Hauptkomponenten bearbeiten klicken. Und das bringt Sie zur MainComponent. Das ist also eine großartige Möglichkeit, sich zurechtzufinden , wenn Sie ein bisschen mehr Komplexität haben. Nehmen wir an, wir werden die Farbe dieses Titels tatsächlich ändern. Zum Beispiel doppelklicke ich hier. Ich werde das in eine andere Farbe ändern, damit wir uns darüber im Klaren sind, was wir tun. Machen wir es wirklich hellgrün , damit wir sehen können, was passiert. Wenn Sie nun zu unseren anderen Instanzen nach unten scrollen, werden wir feststellen, dass sich die Farbe auch hier geändert hat. Wenn wir auf diesen klicken, wirst du sehen , dass es vorher Main heißt. Und hier steht Instanz, weil diese nicht die Hauptkomponente ist, was bedeutet, dass wir tatsächlich Overrides vornehmen können Was heißt das? Wenn Sie also Änderungen an tatsächlichen Instanzen vornehmen, können Sie dies im Grunde unabhängig vom Master tun, und es gilt nur für diese eine Instanz. Das sind zwei stilistische Dinge. Nehmen wir an, wir wollen das etwas größer machen. Wir können die Daten sehen, etwas, das hier oben nicht beeinflusst wurde Das Gleiche gilt, wenn wir Farbe ändern oder andere Dinge tun. Nehmen wir an, für diesen würde ich das gerne auf eine andere Schrift ändern . Das können wir tun und wir können sehen, dass sich daran nichts geändert hat. Derjenige, der der Meister ist. Das nennt man Overrides, und das macht es super einfach, wenn wir etwas ändern wollen Das Tolle ist, dass es immer noch alle Charaktere erben wird , die wir nicht angepasst haben Nehmen wir zum Beispiel an, in diesem Fall haben wir den Titel hier geändert. Also haben wir die Schrift geändert und wir haben Höhe von Boxen geändert, aber wir haben die Farbe des Hintergrunds nicht geändert. Also lass uns gehen und die Farbe des Masters ändern. Sie können sehen , dass die Elemente , die wir nicht wirklich geändert haben tatsächlich immer noch mit dem Master selbst verknüpft sind. Nun könnt ihr sehen, dass wir das immer noch grau gemacht haben , weil dieses spezielle Styling in diesem Fall nicht überschrieben wurde 7. Arbeiten mit Staaten: Damit sich Ihr Design viel realistischer anfühlt, können wir sogar Schwebezustände direkt in Ihrem Prototyp hinzufügen direkt in Ihrem Prototyp Das kann eine ganz einfache Änderung sein, wie zum Beispiel das Ändern der Farbe einer Schaltfläche, wenn Sie den Mauszeiger darüber bewegen Oder komplexere Änderungen. Es gibt also zwei verschiedene Staaten, mit denen wir arbeiten können. Wir haben den Hover-Status und den Toggle-Status. Und der erste, den ich Ihnen zeigen möchte, ist der Schwebezustand. Wir wollen also sicherstellen , dass diese Schaltfläche zu einer Kontur wird , anstatt eine durchgehende Füllung zu haben. Schauen wir uns also an , dass das nicht das allererste war. Wie Sie sehen, handelt es sich bei dieser Schaltfläche um eine Komponente. Alles, was Sie einem Zustand T2 hinzufügen möchten, muss also zuerst eine Komponente sein. Sie können also sehen, dass Adhere einen Standardstatus und einen Hover-Status hat Fangen wir also von vorne an, damit ich Ihnen zeigen kann, wie es funktioniert. Es ist also eine Komponente. Was wir tun werden, ist auf dieses kleine Plus zu klicken und den Hover-Status auszuwählen Alles, was wir mit dem Hover-Status tun, wird sichtbar sein , wenn Sie den Mauszeiger über die Und alles, was sich im Standardzustand befindet, wird angezeigt, bevor Sie den Mauszeiger bewegen Wir wollen sicherstellen, dass wir uns im Schwebezustand befinden. Und dann gehe ich runter und stelle sicher, dass ich auf die Füllung doppelklicke. Ich möchte sicherstellen, dass ich das Häkchen entferne und stattdessen Rand wähle Ich wähle diese dunkelgrüne Farbe. Ich werde es um etwa zwei weitere erhöhen. Dann doppelklicke ich auf den Text, scrolle nach unten zur Füllung, verwende erneut die Pipette und wähle dieselbe grüne Farbe Jetzt können wir sehen , dass die Schaltfläche das Aussehen hat , das wir als Tabulator verwenden möchten, wenn Sie den Mauszeiger bewegen Und wenn wir jetzt auf die gesamte Komponente und dann auf den Standardstatus klicken, können wir das gewünschte Zeichen sehen. Bevor du schwebst. Sie können zwischen diesen beiden wechseln, um sicherzustellen , dass Ihr Design so aussieht, wie Sie es möchten Lass uns eine Vorschau ansehen und sehen, ob wir diesen Effekt erzielen. Ja, es funktioniert also perfekt. Jetzt möchte ich Ihnen den Umschaltzustand zeigen. Der Umschaltstatus eignet sich also hervorragend für Dinge, bei denen eine Aktion ausgeführt werden soll, wenn Sie beispielsweise klicken, wenn Sie einen typischen Umschalter haben und möchten , dass dieser von links nach rechts verschoben Aber in diesem Fall möchte ich, dass die Leute abstimmen können , welche Veranstaltung sie im August haben sollen , indem sie auf das kleine Herz bei den verschiedenen Kursen klicken , die sie sehen möchten. Ich möchte, dass, wenn jemand auf dieses Herz klickt, es von einem schwarzen Umriss zu einer roten Füllung wechselt. Also werde ich auf einen neuen Toggle States klicken auf einen neuen Toggle States Ich werde sicherstellen, dass ich auf Toggle States bin. Nimm den Rand, klicke auf die Füllung und wähle eine schöne rote Farbe. Wenn Sie jetzt auf dieses kleine Herz klicken, können Sie sehen, dass es rot wird. Es funktioniert also genau so , wie wir es uns auch wünschen. Da die Komponenten alle gleich funktionieren. Nehmen wir an, Sie wollten ein rotes Herz in ein grünes Herz ändern ein rotes Herz in ein grünes Herz weil es kein urbaner Garten ist. Vergewissern Sie sich noch einmal, dass Sie sich in den Wechselstaaten befinden. Ändere die Farbe und wähle eine schöne grüne Farbe. Wenn wir jetzt noch einmal nachschauen, können wir sehen, dass Aspirin auf die anderen klickt , die ebenfalls grün werden Und es hat auch den umgekehrten Effekt, was großartig ist. So können Sie zwischen Ihren verschiedenen Staaten hin und her wechseln. 8. Videos hinzufügen: Videos direkt hinzufügen Sie Ihrem Prototyp Videos direkt hinzufügen, fühlt er sich viel interaktiver und lebendiger an. Dies war etwas , das Sie bisher in Adobe XD nicht tun konnten. Es ist also wirklich aufregend , dass du das kannst. Nehmen wir nun zum Beispiel an, dass wir diesem Abschnitt einen Videohintergrund hinzufügen möchten , um ein bisschen mehr Engagement auf der Website zu erzielen. Sie müssen lediglich Art Begrenzungsrahmen erstellen Also habe ich hier gerade ein Quadrat erstellt. Ich kann tatsächlich zu unserem Ebenen-Tab gehen damit wir sehen können, was wir tun. Wir stellen nur sicher, dass unsere Ebenen-Tabs geöffnet sind , und dann können wir hier auf dieses Quadrat klicken , damit wir sehen können, was wir tun. Dann musst du nur noch auf dein Video klicken und es in dieses Begrenzungsfeld ziehen Und anfangs passiert nichts, wenn Sie eine Vorschau ansehen, da es erst abgespielt wird, wenn Sie darauf klicken. Und das wollen wir nicht. Wir möchten, dass es Autoplay ist. Nun, zumindest in diesem Fall werden wir zurückgehen und uns die Einstellungen für dieses Video ansehen. Etwas anderes, an das Sie sich erinnern sollten , ist, dass Ihr Video derzeit maximal 25 MB groß sein muss. Wenn es also größer ist , müssen Sie es möglicherweise mit einer niedrigeren Auflösung exportieren. Wenn wir also darauf doppelklicken und erneut doppelklicken, können Sie jetzt sehen, dass wir tatsächlich in das Rechteck der Massengruppe eins gegangen sind, wo unser Bounding Box mit der Maus ist, und dann haben wir das Video zur Stadtgartenbewässerung Jetzt haben wir all diese verschiedenen Optionen. Wenn wir also hier klicken, können wir sehen, dass es gerade oben abgespielt wird. Du könntest aber auch automatisch spielen, was ich gerne hätte. Dann können wir auch hier auf dieses kleine Symbol klicken , wo wir die Anpassung tatsächlich haben. Als erstes können Sie Ihr Video ansehen, indem Sie auf diese kleine Play-Schaltfläche klicken. Und du kannst es auch stummschalten. Wenn es Audio gibt. In diesem Fall ist dies nicht der Fall, aber Sie können es trotzdem tun, wenn Sie nur sicherstellen möchten, dass Sie es auch zuschneiden können. Wenn Sie es also zuschneiden möchten, nehmen wir an, dass es etwas kürzer ist. Das ist in Ordnung. Du kannst es einfach genehmigen. Dann kannst du auch etwas machen , was ich immer gerne mache, nämlich Loop-Wiedergabe. Schauen wir uns jetzt an, was das Ergebnis ist. Jetzt haben wir gesagt, dass es Autoplay und Loop ist. Lass uns eine Vorschau unseres Designs ansehen. Wir können sehen, dass es automatisch abgespielt wird. Und wenn wir ein bisschen warten, werden wir auch sehen, dass es in einer Schleife läuft. Perfekt. Das ist alles, was wir wissen müssen, um unserer XD-Datei einfach ein einfaches Video hinzuzufügen unserer XD-Datei einfach ein einfaches Video hinzuzufügen 9. Plug-ins: Adobe XD bietet viel Flexibilität, aber manchmal gibt es einfach Dinge , die Sie mit der App selbst tun können. Hier kommen Plugins ins Spiel. Obwohl Adobe XD so viele verschiedene Dinge kann. Es gibt eine Reihe von Plugins, die uns das tägliche Leben erheblich erleichtern. Deshalb wollte ich euch ein paar meiner Favoriten zeigen. Schauen wir uns also zuerst an, wie wir Plugins tatsächlich installieren können. Plugins sind also der langsame Tab ganz unten. Aber wenn wir noch keine Plugins installiert klicken Sie einfach auf dieses und sobald Sie hier sind, können Sie nach verschiedenen Plugins suchen, oder Sie können einfach suchen, um zu sehen, ob Sie etwas finden , das genau zu dem passt , was Sie möchten. Sie können einfach auf die Schaltfläche Get klicken und das wird automatisch auf Ihr Adobe XD heruntergeladen, sobald es installiert ist Ich möchte Ihnen nur diese zeigen , die meine absoluten Favoriten sind. Der erste, den ich Ihnen zeigen werde, heißt Colour In SPO Und der Grund, warum ich es mag ist nicht nur, dass man Dinge wie Farbpaletten hat, mit denen man tatsächlich verschiedene Farbpaletten ausprobieren kann , was sehr hilfreich ist wenn man etwas Neues kreiert Aber meine Lieblingsfunktion ist der Kontrastprüfer. Wenn Sie also einer meiner anderen Arbeiten oder meinem YouTube-Kanal gefolgt sind, wissen Sie, dass ich mich sehr darauf freue , sicherzustellen, dass Designs zugänglich sind. Nehmen wir zum Beispiel an , wir möchten überprüfen, ob dieser Text, den wir hier auf diesem farbigen Hintergrund haben auf diesem farbigen Hintergrund sichtbar und zugänglich sein wird. Nun, wir können nur den Farbcode hier kopieren. Das mache ich einfach. Dann wähle ich meinen Text aus, den wähle ich hier aus. Und ich füge das einfach für die Hintergrundfarbe und es wird hier angezeigt, damit wir sehen können, wie es aussieht. Dann werden wir auch das Verhältnis sehen und wir werden sehen, ob es passt. Nehmen wir zum Beispiel an, wir würden dies in eine andere Farbe ändern. Nehmen wir an, wir würden es in etwas viel Dunkleres ändern . Siehst du, vielleicht erhöhen wir das und dann die Opazität ein bisschen, damit wir dunkelgrünen Farbe viel näher kommen Also lass uns jetzt die Füllung kopieren und sie einfügen. Stattdessen. Wähle unser Cover. Also wählen wir dort unsere Farbe. Jetzt fügen wir das ein. Jetzt werden Sie sehen, dass all diese verschiedenen Prüfungen fehlschlagen , weil der Kontrast sehr niedrig ist. Es wird also für jemanden sehr schwierig zu lesen. Dies ist für alle Websites sehr wichtig , da wir sicherstellen möchten, dass alles inklusiv ist Aber natürlich besonders wichtig, wenn Sie beispielsweise mit einer Website für ältere Menschen oder Menschen mit verschiedenen Formen von Sehbehinderung arbeiten einer Website für ältere Menschen oder Menschen . Das nächste Plugin, das ich dir zeigen möchte heißt Lorem Ipsum, das einfach super einfach ist weil ich nichts über dich weiß, aber wenn ich etwas entwerfe, nimmt es viel zu viel Zeit in Anspruch, einfach zu einer Website zu gehen, die Laura finanziert, oder meinen eigenen Text einzutippen Also, wenn wir etwas Lorem wollen , können wir einfach gehen und eine Form erstellen , in die wir möchten, dass sie gefüllt wird Und dann können wir den Text mit Platzhaltertext füllen. Es gibt viele verschiedene Optionen, aber mit dieser ersten können Sie beispielsweise wählen, ob Sie eine andere Sprache möchten. Also werde ich mich einfach für die englische Version entscheiden. Sie können wählen, ob es am Ende ein Punkt, Punkt, Punkt oder Punkt sein soll oder einfach nichts. Ich werde den Zeitraum wählen, weil ich einen Punkt haben möchte . Und dann gehen wir einfach Text einfügen. Ist das wirklich klein? Also alles, was ich jetzt hier tun werde, ist dass ich das tatsächlich anpassen kann. Ich kann es tatsächlich an meine tatsächliche Formatierung anpassen, was großartig ist. Also können wir einfach hergehen und so weitermachen. Und plötzlich können wir tatsächlich ein wirklich schönes Lorem in unserem Design haben ein wirklich schönes Lorem in unserem Design Das nächste Plugin, das sehr hilfreich ist, heißt Quick Mock-up Und dieser hat so viele verschiedene Dinge in einem. Die erste, die ich Ihnen zeigen wollte, ist, wenn wir mit der Registerkarte Elemente beginnen Hier haben Sie all Ihre tollen kleinen Icons, all Ihre kleinen Labels. Und mir hat gefallen, dass dieser nicht nur die Symbole hat, sondern auch Dinge wie zum Beispiel einen Schalter Nehmen wir an, wir möchten diesen verwenden. Nachdem wir es eingebaut haben, können wir es tatsächlich in XD anpassen. Nehmen wir an, wir möchten die Farbe ändern. Alles, was wir tun müssen, ist doppelklicken und alle Eigenschaften werden hier editierbar Wir können dies sogar in, sagen wir, eine grüne Farbe ändern sagen wir, eine grüne Farbe Das alles ist also tatsächlich in XD sichtbar, was die Sache viel einfacher macht. Eine andere Sache, die ich liebe, ist, wenn man Wireframes macht und sie einfach wie einen Platzhalter für ein Anstatt also zu versuchen etwas wie ein Bild aussehen zu lassen, wird ein Kunde verstehen , dass es besser ist als ein Bild. Sie können zum Beispiel einfach eine Grafik wie diese verwenden. Sie haben auch Vermögen. Das ist also ein bisschen komplexer. Illustrationen für Beispiele oder Fotos oder sogar Grafiken und Diagramme. Diese sind also sehr nützlich, wenn Sie ein etwas komplexeres Design erstellen. Alles, was wir tun müssen, ist, dass wir uns zum Beispiel Zahlen oder in Aktion ansehen können dass wir uns zum Beispiel Zahlen oder in Aktion ansehen . Und das ist mit den Websites von Menschen verknüpft , die Sie vielleicht schon einmal gesehen haben. Und das hat mir sehr gut gefallen. Sie haben auch viele umfassendere Illustrationen , die wir verwenden können. Viele verschiedene Optionen. Und du kannst auch einfach mehr ähnliche Szenen und andere Optionen machen . Wenn du zum ersten Mal mit Quick Mockup anfängst, wirst du in der Lage sein, ein Thema auszuwählen Das ist sehr hilfreich, wenn Sie, sagen wir, ein dunkles Thema machen und Sie wirklich möchten , dass wir für dieses spezielle Thema arbeiten können jederzeit zurückgehen und ein anderes Thema auswählen Und du wirst all deine verschiedenen Säuren hier bekommen. Der nächste, den ich Ihnen zeigen möchte, heißt Globular und passt tatsächlich perfekt, weil ich kürzlich ein Projekt gemacht habe , bei dem wir viele organische Formen hatten Und so kam ich dazu, für dieses Tutorial darüber nachzudenken. Im Grunde wann immer Sie wollen, z. B. eine Hintergrundform oder etwas anderes, das Sie gerne in einer organischen Form hätten. Du kannst in dieses Plugin gehen und es so anpassen , wie du es ändern kannst, die Komplexität wird mehr abgerundete, weniger unterschiedliche Kanten haben. Und wenn du darin aufstehst, wird es mehr verschiedene Seiten haben. Du kannst auch Einzigartigkeit schaffen. Es wird also wieder mehr Blobby auf der linken Seite sein. Und wenn du es hochschraubst, wird es viel eckiger und hat unterschiedliche Formen. Sie können damit herumspielen und einzigartige Blobs erstellen. Und wenn Sie damit zufrieden sind, müssen Sie auf diese kleinen Kleckse klicken. Sie können einen Blob erstellen, auf einen Blob klicken und dann müssen Sie ihn nur noch suchen, was normalerweise von der Außenseite Ihrer Zeichenfläche abgespielt wird Manchmal muss man einfach ein bisschen rauszoomen. Auch hier, genau wie bei den anderen. Dieser ist hier vollständig editierbar. Du kannst also gehen und sagen wir, ich lasse die Farben fallen. Nehmen wir an, wir möchten diese Hintergrundfarbe verwenden, die wir haben. Das ist wirklich nett. Jetzt sind wir tatsächlich in der Lage, das hier zu platzieren und es hinter uns zu lassen und hier ein kleines Designelement zu haben . Ich denke, das ist sehr nützlich, wenn Sie Ihrem Design etwas mehr Ebenen hinzufügen möchten. Die letzte, die ich zeigen möchte, heißt Anima. Und dieser ist sehr hilfreich, wenn Sie bestimmte Animationen erstellen und auch in Code exportieren möchten , um Prototypen als Live-Website Sie können also verschiedene Dinge erstellen , die Sie zuvor in Adobe XD nicht tun konnten, aber in letzter Zeit mit dem, was wir lösen, zum Beispiel mit Zuständen und Komponenten, jetzt tatsächlich möglich sind. Einige davon sind also nicht mehr so nützlich wie früher. Was wirklich nützlich ist, ist die Funktion zum Abrufen von Code. Sie können sogar den vollständigen HTML-Code des von Ihnen erstellten Designs herunterladen vollständigen HTML-Code des von Ihnen erstellten Designs , um ihn an einen Entwickler zu senden oder selbst zu verwenden. Dies ist eine wirklich praktische Funktion wenn Sie etwas suchen , das superschnell ist und Ihrem Entwickler das Leben ein bisschen einfacher macht . Ich kann nur empfehlen, einfach in den Plugin-Bereich zu gehen und ein wenig herumzustöbern da Sie wahrscheinlich etwas finden , das für Ihre Projekte wirklich hilfreich ist. Also geh und sieh dich um 10. Tabulatur verwenden: Jetzt haben wir ein Design mit ein paar verschiedenen Zeichenflächen und sind mit den verschiedenen grundlegenden Tools zufrieden Wir wollen damit beginnen, diese verschiedenen Zeichenflächen mit dem Prototyping-Tool zu verbinden diese verschiedenen Zeichenflächen mit dem Prototyping-Tool Gehen wir also zum Tab Prototyping. Jetzt helfen wir im Prototyp-Tab und schauen uns einige verschiedene Dinge an, die mit der Prototyping-Fähigkeit möglich sind mit der Prototyping-Fähigkeit möglich Und das ist wirklich super aufregend. Im Grunde wird die Registerkarte Prototyping der Registerkarte Design sehr ähnlich aussehen Und wenn Sie eine Kunstwand auswählen oder wenn Sie beispielsweise ein anderes Element auswählen, können Sie eine Verbindung zwischen dieser und einer anderen Kunstfläche herstellen . Auf diese Weise erstellen wir verschiedene Übersetzungen und wechseln zwischen den Zeichenflächen, wenn Sie beispielsweise auf eine Schaltfläche klicken Nehmen wir zum Beispiel an, dass ich möchte, dass dieser Kontakt-Button uns zu unserer Kontaktseite führt. Ich muss nur die Schaltfläche auswählen und dann diesen kleinen blauen Pfeil bis zur Grafik auf der Kunsttafel ziehen diesen kleinen blauen Pfeil , die es haben soll. Jetzt können wir sehen, dass wir auf der rechten Seite ein paar verschiedene Optionen haben ein paar verschiedene Optionen mit denen wir herumspielen können Als erstes können wir uns den Auslöser ansehen. In diesem Fall möchte ich, dass es ein Fingertipp ist, weil ich möchte, dass jemand auf die Schaltfläche klickt und dann zur Kontaktseite kommt. Wir können uns dann ansehen, wie wir das gerne hätten. Später schauen wir uns Auto Animate an. Aber im Moment werden wir uns nur für den Übergang entscheiden weil wir von einer Position zur anderen gehen möchten. Wir möchten sicherstellen, dass das Ziel korrekt ist. Und wir können sehen, ob wir eine Animation haben möchten. Schauen wir uns also an, wie das aussieht , wenn wir es in der Vorschau ansehen. Wenn wir jetzt auf die Schaltfläche Kontakt klicken, gelangen wir direkt zur Kontaktseite, was genau das ist, was wir möchten. Das ist also eine sehr einfache Frage. Aber zum Beispiel, wenn wir einige Animationen erstellen möchten. Also, was ich tun werde, ist, Ihnen zu zeigen , wenn wir diese Kunsttafel duplizieren, werden wir wieder mit dem Design beginnen. Ich würde mir wünschen, dass ein paar Dinge passieren, wenn Sie auf der Kontaktseite landen. Das erste, was ich tun möchte, ist, dass diese kleine Schachtel enthüllt wird. Also wähle ich es aus und ziehe es dann direkt heraus, damit wir uns ein bisschen davon so ansehen können. Dann werde ich es ändern. Ich möchte also, dass sich dieses Bild tatsächlich nach unten bewegt. Ich möchte also, dass wir viel mehr von den Menschen auf dem Bild sehen können . Und dann möchte ich, dass der Text viel kleiner ist, damit wir die Leute tatsächlich viel besser sehen können wenn wir dieses andere Layout haben. Nehmen wir zum Beispiel 63 an und ändern Sie den Text ein wenig , damit er ein bisschen besser aussieht. Jetzt können wir diese beiden vergleichen und möchten von diesem Grün zu diesem Grün übergehen. Alles was Sie tun müssen, ist zum Prototyp zurückzukehren. Wir klicken auf die gesamte Kunsttafel, also den Namen hier oben. Und dann fahren wir zum nächsten, dem Endziel. Jetzt wählen wir stattdessen die Zeit, was eine Option ist, die wir haben wenn wir eine ganze Kunsttafel haben. Ich werde das mit einer sehr kurzen Außenzeit von 0,4 s platzieren . Dann wählen wir Auto Animate, weil wir möchten, dass es animiert Wir können so etwas wie Ease Out haben, was eine wirklich nette, reibungslose Option ist. Wir können auch verschiedene haben, wie Snap. Aber ich bleibe bei diesem. Ich werde es auf 3 s setzen nur damit es ein wenig Dauer hat. Also machen wir es sehr schnell. Wir können 1 s angeben, wenn wir wirklich lang sein wollen, um es länger zu sagen, damit wir dort experimentieren können. Schauen wir uns jetzt an, was passiert, wenn wir spielen gehen. Erstaunlich, dass Animationen passieren. Also wurden die Texte größer, das Bild nach unten verschoben und es kamen ein paar Öffnungszeiten heraus. Das Letzte, was ich dir jetzt zeigen möchte, ist ein Overlay. Das ist super praktisch für Dinge, die Sie gerne als Pop-up haben möchten. Zum Beispiel wie ein Newsletter oder sagen wir eine Tastatur. In diesem Fall möchte ich also einen Newsletter erstellen. Und was wir tun werden, ist, dass ich einfach eine neue Kunsttafel erstelle. Es kann wirklich jede Größe haben, solange es zu unserem Pop-up passt, werde ich diesen Newsletter umbenennen Großartig. Also, was ich jetzt tun werde, ist einfach das eigentliche Design für das Pop-up zu erstellen. Ich werde dafür eine Hintergrundfarbe wählen, damit ich sehen kann, woran ich gerade arbeite. Ich möchte, dass dieses Design einen Rand hat, nur weil ich nicht weiß, auf welchem Hintergrund das jedes Mal auftauchen wird . Also werde ich diesen Rand als grüne Farbe wählen und für den Umriss ein paar Nummern größer hinzufügen . Toll, also jetzt werde ich all diese Gruppen zusammenfassen. Als Nächstes wollen wir sicherstellen, dass unsere Kunsttafel im Grunde genommen die Größe des eigentlichen Objekts , das wir überlagern möchten Es muss also nicht exakt sein, aber ich möchte es ziemlich nahe bringen. Großartig. Jetzt haben wir hier ein Newsletter-Popup und wir können es für jeden Fall wiederverwenden in dem wir möchten, dass er erscheint. Und dann gehe ich zum Prototyp über. Also ich möchte hier im Newsletter-Link hier, dass dieses Pop-up tatsächlich erscheint. Also werde ich einfach hier klicken und ziehen. Wir werden den Trigger als Wasserhahn verwenden. Und wir werden Overlay wählen. Wir werden sicherstellen, dass das Ziel korrekt ist. Und ich glaube nicht, dass ich dafür irgendwelche Animationen haben möchte. Schauen wir uns jetzt an, was passiert. Lass uns diesen wählen und dann lass uns spielen gehen. Wenn wir also hier runter gehen, klicken wir auf Newsletter. Wir können jetzt sehen, dass dieses Pop-up auf dem Bildschirm erscheint. Mir hat sehr gut gefallen, dass es als Hintergrund tatsächlich transparent ist. Es zeigt nur die Dinge, die wir gerne hätten. Wenn wir irgendwo außerhalb davon klicken, wird es verschwinden. Das sind also einige wirklich hilfreiche Interaktionen , die Sie für Ihr Prototyping verwenden können 11. Feedback erhalten: Unglaublich. Jetzt ist Ihr Design fertig und Sie möchten es mit Ihren Kunden teilen, deren Feedback Hier gehen wir zum Tab Teilen über. Um dein Design zu teilen. Alles was Sie tun müssen, ist auf den Tab Teilen zu klicken. Und dann werden wir uns diese verschiedenen Optionen hier ansehen . Wir haben also verschiedene Optionen für die Art und Weise, wie wir unser Design tatsächlich teilen. In diesem Fall, wenn wir Feedback von unseren Kunden erhalten möchten , bleiben wir bei diesem Test namens Design Review. Und wir können hier wählen. Also entweder nur eingeladene Personen, was bedeutet, dass wir ihre E-Mail hinzufügen müssen. Jeder mit einem Passwort, was bedeutet, dass Brocade ein Passwort hat, oder jeder, der den Link Welches Sie wählen, hängt also wirklich von der Einrichtung des Projekts ab. Nehmen wir an, Sie arbeiten persönlich mit einer Person zusammen und möchten, dass nur diese Person Zugriff hat Und du willst sicherstellen, dass andere Leute im Team nicht darauf zugreifen können. Sie können die einzige eingeladene Achse oder die Achse mit einem Passwort auswählen . Aber schauen wir uns an, was passiert, wenn viele unserer Projekte darin bestehen, dass wir ein Team haben, mit dem wir zusammenarbeiten. Wir könnten das also an einen Kunden senden und er teilt es dann mit seinem Texter um alles zu überprüfen, vielleicht mit seinem Vermarkter, um sicherzustellen, dass alles online ist Deshalb möchten sie in der Lage sein dies an eine andere Person weiterzuleiten. Also tendiere ich dazu, mich an jeden zu wenden, der einen Link hat, es sei denn , es besteht ein hohes Risiko , dass etwas herauskommt, das sehr privat sein muss. Also mache ich weiter und klicke dann einfach auf Link erstellen. Sobald dieser Link erstellt ist, müssen wir nur noch auf dieses kleine Symbol hier klicken und den Link kopieren. Und genau das sieht der Kunde, wenn er auf den Link klickt, den Sie ihm beispielsweise in einer E-Mail senden. Was wir hier sehen werden, ist die Zeichenfläche auf der linken Seite Und dann sehen wir auf der rechten Seite ein gemeinsames Feld. Wenn wir wie in diesem Fall verschiedene Zeichenflächen haben, werden Sie auch eine von sechs sehen Und wenn, sagen wir, Sie haben diese verschiedenen Dinge im Menü oder verschiedene Elemente verknüpft , sind sie anklickbar Wie Sie hier sehen können, werden wir, wenn wir auf diese Kontakt-Schaltfläche klicken, zu der Website hier weitergeleitet, die Kontaktseite. Sie können diese Pfeile auch verwenden , um durch die verschiedenen Seiten zu navigieren. Auf diese Weise kann Ihr Kunde ganz einfach all die verschiedenen Seiten sehen, die Sie entworfen haben. Das Tolle daran ist, dass sie das Design direkt kommentieren können . Denn wenn wir Feedback von Kunden erhalten, schreiben sie oft eine lange E-Mail mit vielen verschiedenen Knoten und Sie versuchen zu entziffern, welches Feedback verschiedene Bereiche einer Website gilt, sogar Wenn Sie also große Projekte haben, ist dies besonders hilfreich. Was wir also tun können, ist, dass unser Kunde diese Pin-Funktion haben und sie für jeden Abschnitt platzieren kann , für den dieser Kommentar relevant ist. Nehmen wir zum Beispiel an, dass wir es auf diesem Foto platzieren. Und sie würden Kommentare abgeben. Könnten wir zum Beispiel stattdessen ein Bild von einem Thermal haben ? Sie haben eingereicht und dann können Sie direkt reingehen und direkt antworten, sodass Sie hier auf Antworten klicken können. Und das macht es wirklich einfach, Diskussionen über die verschiedenen Kommentare und Rückmeldungen zu führen, ohne entweder einen Anruf tätigen oder versuchen zu müssen, dies per E-Mail hin und her zu Diese Funktion hat mir also sehr gut gefallen. Wenn wir also zu unserer eigentlichen XD-Datei zurückkehren und sagen wir, dass wir jetzt beginnen, einige dieser Rückmeldungen zu implementieren. Wir möchten vielleicht nicht, dass unser Kunde live sieht, was wir tun. Und hier kommt diese Update Link-Funktion ins Spiel. Adobe XD zeigt nur dann neue Dinge an, die mit dem Design passiert sind , wenn Sie auf Link aktualisieren klicken. Sie müssen sich also keine Sorgen machen Ihr Kunde auf den Link geht und halbwegs Fortschritte sieht , da er nur aktualisiert wird , wenn Sie auf Link aktualisieren klicken. Schauen wir uns als Nächstes an, wie man mit einem Entwickler zusammenarbeitet 12. Teilen mit einem Entwickler: Okay, großartig. Ihr Kunde hat Ihr Design also genehmigt und es ist an der Zeit Sie es mit Ihrem Entwickler teilen. Hier kehren wir zum Share-Tab zurück, aber stattdessen gehen wir zur Entwicklung über. Diese Optionen machen es unserem Entwickler wirklich einfach unserem Entwickler alle von Ihnen eingerichteten Farbcodes, Schriftgrößen und Stile abzurufen. Sie können aber auch all die verschiedenen Assets herunterladen , die Sie direkt aus dem Prototyp erstellt haben . Wir sind also wieder im Share-Tab. Und jetzt möchten wir dies mit unserem Entwickler teilen, weil unser Kunde alles genehmigt hat und wir bereit sind, mit dem Bau zu beginnen. Was wir tun werden, ist , das von der Designüberprüfung zur Entwicklung zu ändern . Und hier können wir auch den Export für das Web wählen. Und das ist wirklich wichtig, weil wir sicherstellen möchten , dass alle Assets, die wir für den Export markiert haben, direkt von unserem Entwickler heruntergeladen werden können. Aber dafür müssen wir sie tatsächlich für den Export bereit machen. Wir werden das tun, indem wir zum Tab Design zurückkehren und auf eines der Assets klicken. Nehmen wir zum Beispiel dieses Bild an, alles was Sie tun müssen, ist bis zu diesem kleinen Abschnitt hier zu scrollen und auf Für Export markieren zu klicken. Lassen Sie mich nun zu unserem Share-Tab zurückkehren. Wir werden sehen, dass dies jetzt verfügbar ist und es wird ein Vermögenswert sein. Wenn wir das also nehmen, werden herunterladbare Assets stehen. Dadurch kann jemand mit dieser Funktion die Assets direkt herunterladen. Was wir jetzt tun werden, ist einfach auf Link aktualisieren zu klicken , damit wir diese Assets und all unsere neuen Einstellungen dort haben . Wir können sehen, dass, obwohl wir den Link aktualisiert haben, die Kommentare, die wir zuvor hatten, immer noch da sind, was sehr hilfreich ist Aber jetzt gibt es tatsächlich eine andere Funktion. Wenn wir also zu diesem kleinen Entwicklungs-Tab auf der rechten Seite gehen, werden wir sehen, dass wir eine Liste der verfügbaren Assets haben , die verschiedenen Farben, einschließlich der Farbcodes, was sehr hilfreich ist. Wir haben auch die verschiedenen Charakterstile , die wir auf dieser Seite verwenden, festgelegt. Und wir haben auch unterschiedliche Interaktionen. Also verschiedene Auslöser, verschiedene Ziele. Das gesamte Xd ist also sehr hilfreich für jemanden, der die Seite entwickelt. Wenn wir zu den Assets hier oben zurückkehren, könnte jetzt jemand auf dieses Bild hier klicken und wir können es tatsächlich herunterladen. Dadurch wird das Asset direkt heruntergeladen. Wenn Sie viele davon haben, können sie sie alle markieren und sie dann alle auf einmal herunterladen. Sobald wir das öffnen, werden wir tatsächlich sehen, dass sich zwar um ein von XD erstelltes Asset handelt, aber zwei heruntergeladene Dateien erstellt es sich zwar um ein von XD erstelltes Asset handelt, aber zwei heruntergeladene Dateien erstellt werden. Es wird immer eins nach dem anderen der Größe und eins nach dem Zweifachen der Größe erstellt . Und das ist so, dass Ihr Entwickler Optionen hat weil Sie offensichtlich eine Datei wollen , die qualitativ genug ist. Sie möchten jedoch nicht, dass Ihre Website verlangsamt wird oder dass das Laden zu viel Energie beansprucht. Wenn Sie möchten , dass verschiedene Assets , die in Ihrem Design tatsächlich getrennt sind , das genaue Layout beibehalten. Und Sie möchten, dass sie tatsächlich als ein Bild exportiert werden. Alles was Sie tun müssen, ist sie anzuklicken und zu gruppieren und dann gemeinsam für den Export zu markieren. Auf diese Weise aktualisieren Sie unseren Link, wenn wir wieder teilen. Und jetzt können wir sehen, dass wir diesen Vermögenswert hier haben , nämlich eine Gruppe. Beim Herunterladen werden also diese beiden Assets heruntergeladen, werden die zu einem Bild zusammengefasst Und das ist sehr hilfreich, wenn Sie versuchen , die Zusammensetzung des Designs zu kontrollieren. Wenn Sie eine Situation haben, in der Sie nicht möchten, dass sie beispielsweise unabhängig animieren oder etwas anderes tun Manchmal brauchen wir einfach , dass die Dinge in einer festen Position sind. Und das ist ein wirklich großartiges Feature 13. Nachhaltige und inklusive Websites: Ein Thema, das mir sehr am Herzen liegt, ist Nachhaltigkeit und Barrierefreiheit für Websites. Da Websites rein digital sind, denken viele von uns nicht über den ökologischen Fußabdruck nach, aber wir können tatsächlich viel tun, um eine wirklich gute Wirkung zu erzielen, wenn wir Dinge wie Videoinhalte, Animationen und Parallax Scrolling integrieren , Animationen und Parallax Viele dieser Dinge nehmen viel mehr Energie in Anspruch, als wenn wir eine statische einzelne Seite hätten. Wenn wir zum Beispiel eine Website entwerfen, wollen wir immer mit dem Grundgedanken beginnen und nur dann Dinge hinzufügen, wenn sie der tatsächlichen Benutzererfahrung etwas hinzufügen der tatsächlichen Benutzererfahrung etwas Und es fühlt sich für die User Journey wirklich wichtig an. Wo wir können, können wir sicherstellen, dass unsere Dateigrößen so klein wie möglich sind. Anstatt ein Video hochzuladen, können wir beispielsweise einen YouTube-Link verwenden Es gibt also viele Möglichkeiten, darüber nachzudenken , wie wir die tatsächliche Energie minimieren können , die zum Laden dieser Seite benötigt wird, wenn es um Barrierefreiheit geht Wir wollen natürlich auch über Dinge wie alle Tags, den Farbkontrast, die Schriftarten und Größen, die wir verwenden, nachdenken wie alle Tags, den Farbkontrast, die Schriftarten und Größen, die wir , damit Menschen mit unterschiedlichen Fähigkeiten und unterschiedlichen Erfahrungen mit dem Web Selbst Kleinigkeiten wie die Platzierung der Beschreibung beim Ausfüllen eines Formulars außerhalb des Feldes und nicht als Platzhalter bedeuten, dass ein Text-to-Speech sie tatsächlich jemandem vorlesen kann dass ein Text-to-Speech sie tatsächlich jemandem vorlesen , sodass dieser versteht, was vor sich geht Es gibt viele verschiedene Dinge, die wir lernen können. Deshalb ermutige ich Sie wirklich, sich das anzusehen. Und ich denke, es gibt auch einige großartige Kurse auf Skillshare, die Sie erkunden können Ich werde auch sicherstellen , dass ich unten in der Beschreibung ein paar wirklich tolle Tools und Apps verlinke. So können Sie Ihre Reise beginnen, mehr über nachhaltige und integrative Websites zu erfahren mehr über nachhaltige und integrative Websites 14. Bonustipps: Bevor wir uns also mit dem Klassenprojekt befassen, wollte ich nur ein paar verschiedene Tipps und Tricks mit Ihnen teilen , die ich dabei geholfen habe . Dinge, die ich als Webdesigner gelernt habe. Die allererste besteht darin, in Ihren Projekten wirklich klare Erwartungen zu formulieren. Immer wenn Sie an einer Website oder vielen beweglichen Teilen arbeiten . Wenn wir darüber nachdenken, muss jedes Projekt zuerst die Ziele haben , die wir uns setzen müssen. Wir müssen sicherstellen, dass wir über all die verschiedenen Ressourcen verfügen , die von verschiedenen Personen bereitgestellt werden könnten . Nehmen wir an, die Website kopiert die Bilder, die Fotos für die About-Seite. Sie können also all diese verschiedenen Vermögenswerte sein , die wir berücksichtigen müssen. Und wir müssen sicherstellen, dass alle Beteiligten, die Vermögenswerte bereitstellen müssen, genau wissen, wann das geschehen muss, genau wissen, wie diese Vermögenswerte bereitgestellt werden müssen , was sie sein sollen. Deshalb müssen wir sicherstellen , dass das ganz klar ist. diesem Grund möchte ich immer einen wirklich klaren Zeitplan haben Aus diesem Grund möchte ich immer einen wirklich klaren Zeitplan haben und dann ein Kundenportal einrichten , in dem dieser immer angezeigt wird. Sie können Ihr Kundenportal auf viele verschiedene Arten einrichten , darunter Orte wie Trello, Asana, Base Camp, Notion Milano. Es gibt so viele verschiedene Orte , die Sie sich ansehen können. Sie könnten also auch ein Tool wählen, mit dem Sie bereits gearbeitet haben und mit dem Sie wirklich zufrieden sind und mit dem Sie sich auskennen. Eine Möglichkeit, sicherzustellen, dass das Projekt wirklich reibungslos läuft, besteht darin, alle während des Projekts an den nächsten Schritt zu erinnern. Nehmen wir zum Beispiel an, wir hatten das Treffen über die Ziele der Website und wir stehen kurz davor, mit Wireframes zu Wir wissen, dass wir nach den Wireframes all die verschiedenen Assets wie Bilder und Texte benötigen , damit wir vom Wireframe zum fertigen Design übergehen können. Wir wollen also nicht in eine Situation geraten , in der die Wireframes fertig sind und wir auf alle Assets warten Wir könnten unseren Kunden oder den beteiligten Personen sagen: Hey, wir sind jetzt in der Phase, wir sind dabei, Wireframes zu entwickeln Wenn diese Wireframes in, sagen wir , in zwei Wochen fertig sein sollen, müssen wir alle anderen Ressourcen bereit haben wir mit der Implementierung des Designs beginnen So können Sie das machen. Vielleicht teilst du ihnen einen Link, damit sie ihn hochladen können, oder eine andere Methode, die deiner Meinung nach für alle Beteiligten der einfachste Weg wäre . Eine weitere gute Sache , über die man nachdenken sollte, ist, wer in diesem Projekt die Entscheidungsbefugnis hat und wer in der Lage ist , Kommentare abzugeben und Ideen einzubringen. Was wir also sicherstellen wollen, ist, dass wir nicht in einer Situation landen, in der, sagen wir, 510 verschiedene Personen von Begleitung kommentieren und unterschiedliche Gedanken haben Aber die vielleicht nicht immer an jedem Treffen teilgenommen haben. Nehmen wir an, jemand kommt zu einem Zeitpunkt dem er noch nicht Teil der Strategie war, aber jetzt sieht er die fertige Website. Zu diesem Zeitpunkt. Wir suchen nicht wirklich nach Kommentaren zur Struktur der Website. Vielleicht suchen wir nur nach kleinen Kommentaren zu Dingen , die wir im Laufe der Zeit repariert haben. Wir wollen sichergehen, dass wir wissen , wer die bestimmte Macht hat, und sicherstellen , dass sie in jeder Phase des Prozesses die richtige Art von Feedback geben. All dies läuft wieder darauf hinaus , dies zu kommunizieren. Eine unserer größten Aufgaben als Webdesigner besteht also darin, sicherzustellen, dass wir in unserer Kommunikation und unseren Erwartungen an uns und andere Menschen wirklich klar sind in unserer Kommunikation und unseren Erwartungen an uns und andere Menschen wirklich klar . Zusammenarbeit macht so viel Spaß jedem Projekt und ich kann nur empfehlen , mit anderen Fachleuten in Ihrem Bereich zusammenzuarbeiten , die Ihre Fähigkeiten ergänzen. Und ich denke, das stärkt einfach den gesamten Prozess des Website-Designs. Andere Kreative können Texter, Webentwickler, Strategen, Vermarkter und alle sein, von denen Sie glauben, dass sie eine Stärke des Projekts sein und Ich denke auch, dass es eine wirklich gute Idee ist, Leute in sehr kritischen Phasen einzubeziehen . Noch bevor Sie dem Kunden etwas zeigen, können Sie mit diesen Personen hinter den Kulissen zusammenarbeiten. Nehmen wir zum Beispiel an, Sie erstellen Wireframes und möchten dieses wirklich nette Feature erstellen Aber du bist dir nicht sicher, ob es schwierig sein wird , es zu bauen. Sie können mit Ihrem Entwickler besprechen und herausfinden , wie das am besten geht , damit wir diese Überlegungen haben, bevor wir unserem Kunden etwas präsentieren , das möglicherweise ziemlich schwierig zu erstellen sein könnte. Gehen wir nun zu den Klassenprojekten über. 15. Kursprojekt: Jetzt bist du dran. Ich möchte sehen, welche Art von Website Sie erstellen lassen. Wenn Sie auch eine Website für einen Stadtgarten erstellen möchten, so wie ich es hier getan habe. Ich habe den Brief im Abschnitt mit den Klassenprojekten hinzugefügt. Wenn Sie es vorziehen, an einem Kundenprojekt oder einem persönlichen Projekt zu arbeiten , wäre das auch toll und ich würde mich Ihre Arbeit auf der Registerkarte Projekte zu sehen. Falls du einmal nicht weiterkommst, lass es mich einfach in den Kommentaren wissen und ich helfe dir gerne weiter. Vergiss nicht, deine Projekte zu teilen und die Projekte anderer Leute zu kommentieren , damit wir uns in dieser kreativen Community gegenseitig helfen können . Vielen Dank, dass Sie mit mir an diesem Website-Designprojekt zusammengearbeitet und sich gegenseitig unterstützt Ich hoffe, Sie fühlen sich sicherer und freuen sich über die Verwendung von Adobe XD und dass es Ihnen bei Ihrer täglichen Arbeit helfen kann. Vielen Dank und wir sehen uns in den Diskussionen.