Adobe Xd Meisterkurs – UI/UX-Design von Grund auf

1. Kurs-Einführung: Hey Designer und mein Name ist Alex und willkommen zu dieser Skill Share-Klasse. Ich bin der Gründer von Webspendern, sehr kreative Design-Produkte für Kreative wie Sie, ich bin auch Lehrer und bisher über 30 Tausend Studenten haben meine Kurse abgeschlossen. In dieser 20 plus Stunden protokolliert Meisterklasse, werden Sie lernen Grundlagen von Adobe XD und was es tun kann, wie Sie großartiges Design erstellen, kurz. Erstellen Sie eine Website-Architektur. Zeichnen Sie Ihre Drahtmodelle auf Papier, importieren Sie sie dann und erstellen Sie sie in Adobe XD. Erstellen Sie komplexe Designs, indem Sie Farben, Bilder und Animationen hinzufügen. Teilen Sie diese Entwürfe mit Kunden, um Feedback zu erhalten. Erstellen Sie ein reaktionsfähiges Design mit mehreren Größen. Präsentieren Sie Ihre Entwürfe in einem Portfolio. Und schließlich, wie Sie Ihre Assets für Entwickler unter Verwendung von Industriestandards exportieren. Diese Klasse umfasst alles, was Sie wissen müssen, um mit UI-UX-Design zu beginnen, oder um Ihre Fähigkeiten zu verbessern, unabhängig von der Ebene, die Sie gerade sind. Sie benötigen keine Vorkenntnisse über UI, UX oder Adobe XD, wir werden alles in diesem Kurs behandeln. Ihr Klassenprojekt besteht darin, eine Website zu erstellen, die mit den Tipps und Techniken entwickelt wird, die Sie aus dieser Klasse lernen. Also, wenn Sie Ihre Fähigkeiten und Produktivität einsetzen möchten, sparen Sie eine Menge Zeit und Geld für V Iterationen und Änderungen und erstellen Designs Pflege, die ich sehen Sie in der Klasse. 2. Kursübersicht: Hey Designerin Alice hier und willkommen zum Kurs. Ich hoffe wirklich, dass Sie Wert darin finden und ich hoffe wirklich, dass Sie etwas Neues lernen oder dass Sie Ihr Wissen über Adobe XD oder über den Designprozess und die Erstellung von Website-Design verbessern werden. In diesem ersten Video dieses Kurses möchte ich, dass Sie Ihnen den Kurs vorstellen, was wir tun werden und wie wir anfangen werden. Und das erste, was ich Ihnen zeigen werde, ist der Überblick über unser Projekt. Und ich werde Sie schnell durch das führen was wir in diesem Kurs tun werden. Warum ist es so lang und warum ich mir die Zeit genommen habe, es zu kreieren? Zunächst einmal werden wir unsere Designbeschreibung erkunden. Ich werde Ihnen den Designbrief nach der Einführung in Adobe XD Teil des Diskurses zeigen . Wenn Sie also mit dx, dy vertraut sind, wenn wir wissen, wie man es benutzt, können Sie diese Lektionen einfach überspringen. Aber wenn dies nicht der Fall ist, ermutige ich Sie wirklich, durch diese Lektionen zu gehen und sich einfach mit Adobe XD als Werkzeug vertraut zu machen, was es tun kann und wie es Ihnen helfen kann, Ihr UI- und UX-Design-Spiel zu verbessern. Was wir dann tun werden, ist die Designbeschreibung zu lesen, die Sie vom Kunden betrachten. Ich zeige Ihnen auch eine Vorlage, die Sie für Ihre eigenen Projekte verwenden können. Ich werde es Ihnen sagen und Ihnen erklären, wie wir all diese Informationen erhalten haben? Und dann führen wir Sie durch, wie können Sie eine andere Person erkunden? Wie können Sie verschiedene Anwendungsfälle untersucht und verschiedene Zielgruppen und Schulden werden Ihr Produkt verwenden, in diesem Fall Website-Design. Und dann werden wir mit Papier-Drahtmodellen beginnen , und wir werden Dinge wie diese erstellen. Also werden wir mit nur einfachem Stück Papier beginnen und wir werden darauf mit einem einfachen Stift oder Bleistift zeichnen. Wir können auch diese farbigen Marker verwenden, wie Sie hier sehen können. Und dann werde ich Ihnen zeigen, wie Sie alle Türen bezahlen Rahmen in Adobe XD bringen können . Jetzt fragen Sie sich vielleicht, warum sollte ich Papierdrahtmodelle fallen lassen und dann alles in Adobe XD tun , es ist ziemlich einfach. Vielleicht müssen Sie diese Datei mit einigen anderen Designern teilen. Vielleicht müssen Sie diese Datei mit Ihren Kunden teilen und es ist alles gut und gut, diese Stücke Papier wie diese Zeile neben Ihnen zu haben. Aber zum Beispiel, wenn Sie dies mit einigen Teamkollegen mit den Kunden teilen müssen , auf jeden Fall, vielleicht sogar mit den Entwicklern, nur damit sie es in dieser frühen Phase des Projekts überprüfen können, dann brauchen Sie etwas, um sie Breite zu teilen, damit Sie entweder ein Foto mit Ihrem Telefon machen und dann diese Bilder in Ihren Computer bringen können, ziehen Sie sie in Adobe XD. Oder noch besser, wenn Sie einen Scanner haben, ist es nicht obligatorisch, aber wenn Sie es haben, ist es großartig. Sie können es scannen und es einfach in Adobe XD bringen. Ich werde nur ein wenig in unserer Adobe XD-Datei hineinzoomen, was das ist und was Sie hier sehen können. Also werde ich Sie durch die Schritte führen und wir werden den gesamten Diskurs nehmen, um das Endergebnis zu erreichen. Zuerst werden wir also mit Papier-Drahtmodellen beginnen , und Sie können sie hier sehen, wie ich schon sagte. Das sind also alle unsere Papier-Drahtmodelle. Und wir werden all diese Drahtbilder auf ein Stück Papier zeichnen. Ich werde Ihnen alle meine Entscheidungen erklären, warum ich mich entschieden habe, diese Dinge zu tun. Ich werde Ihnen zeigen, wie Sie Notizen aufschreiben können nur um sich selbst zu erinnern oder um ihren Teamkollegen oder um Kunden einige Ihrer Entscheidungen zu erklären und warum haben Sie diese Entscheidung über Song anders gewählt, etwas anderes, für -Beispiel. Dann werden wir diese Website-Architektur erstellen. Wir werden alle Seiten miteinander verbinden. Und ich werde Ihnen den Fluss der Website erklären , wo die Benutzer auf reiche Seiten klicken, sie gehen, um zu besuchen, wo sie von dort gehen und so weiter. Nachdem das abgeschlossen ist, werden wir zu Wireframes in Adobe XD übergehen. Jetzt fragen Sie sich vielleicht selbst, warum sollte ich Wireframes zweimal erstellen? Nun, es ist viel einfacher, Ideen nur auf ein Stück Papier zu setzen und sie einfach schnell nach unten zu ziehen, nur Sukh und bekommen den Gesamtsinn, ein Gesamtbild Ihres Projekts und bieten eine Designrichtung, zum Beispiel. Und dann, wenn Sie Schulden haben, sobald Sie das Ihrem Kunden entweder in JPEG gezeigt haben, wie diese hier sind, oder als PDF zum Beispiel. So können Sie all diese innerhalb von Adobe XD oder jeder anderen Software zu einem großen PDF kombinieren. Und Sie können diese PDF an Ihren Kunden senden , damit sie es auschecken und selbst sehen können, ob das etwas ist , das sie mit diesem Projekt fortfahren möchten, nachdem all das abgeschlossen ist und Ihr Fourier-Beispiel eine grüne Licht von Ihrem Kunden. Dann gehen Sie in Adobe XD weiter und beginnen dann mit der Erstellung von Drahtmodellen. Wie Sie sehen können, werden wir alle diese Wireframes in Adobe XD erstellen. Ich werde Ihnen zeigen, wie Sie bestimmte Symbole verwenden und wiederverwenden können. Wie Sie Schriftarten erstellen, benutzerdefinierte Farben erstellen, als Komponente erstellen und diese Farben dann im gesamten Design anwenden können. Ich werde Ihnen auch einige Plug-Ins zeigen, um diese Flags direkt hier zu erstellen, zum Beispiel, ich werde nicht in zeigen, einige verschiedene Plugins später für einige andere Dinge. Und nachdem wir das Website-Design abgeschlossen haben, werden wir auch einen Dashboard-Bildschirm erstellen, da Benutzer sich von dieser Website anmelden und innerhalb des Dashboards gehenmüssen von dieser Website anmelden und innerhalb des Dashboards gehen , wo sie alle ihre persönlichen Informationen haben. Und weil dies ein Bankprojekt ist, haben sie Zugang zu ihren Konten, sie haben Zugriff auf ihre Karten, Kredite und so weiter. Also werden wir Schulden schaffen. Bedeutung dieser Wireframes in Adobe XD liegt nun darin, dass Sie sie für Feedback mit Ihrem Kunden freigeben können. Wenn sie Ihnen Feedback zu diesen Drahtmodellen geben, können Sie bestimmte Änderungen an diesen Drahtmodellen vornehmen. Dicht Sand sie, dass zurück zur Revision. Sie können Ihnen entweder mehr Feedback geben und Sie können mit Feedback zu diesen Wireframes fortfahren. Oder Sie können das Feedback anwenden, das Sie erhalten haben, und beginnen Sie mit der Erstellung von Entwürfen. Jetzt, wenn Sie anfangen, Designs zu erstellen, wie Sie hier sehen können, werden Sie beginnen, verschiedene Farben einzubeziehen, denn wenn Sie hier schauen, können Sie sehen, dass es nur grau auf Weiß ist, vielleicht sogar dunklere Grau . Das sind also nur Ihre Grundfarbe, um Ihre Ideen zu Ihrem Kunden und vielleicht sogar zu den Entwicklern, vielleicht Teamkollegen, zu bringen, so dass Sie all das Feedback sammeln können. Ich erzähle Ihnen alles über Feedback im Teilungsteil dieses Kurses. Also ermutige ich Sie wirklich, zurück zu Schulden Teil des Kurses zu springen. So können Sie den ganzen Kurs beobachten oder Sie können direkt zu diesem Teil springen , nur um sich mit Schulden vertraut zu machen. Es liegt also wirklich alles an dir. Wie möchten Sie sich diesen Kurs ansehen? Endlich werden wir anfangen zu entwerfen. Wir werden alle diese Seiten entwerfen, und wir werden auch einige nette und benutzerdefinierte Animationen hinzufügen. Wir werden sie in Ströme aufteilen. Das ist, was Sie hier sehen, wo es sagt Website-Design, Dashboard-Design, und so weiter. Wir werden alle diese Seiten verbinden. Und wie Sie hier sehen können, haben wir nur einen Dashboard-Bildschirm innerhalb unseres Wireframes, weil wir von dort an weiter bauen werden. Und wir werden alle diese anderen Dashboard-Bildschirme erstellen. Wenn ich Sie hierher bringe und diesen Vorschau-Button hier drücke, wird er sich im externen Fenster öffnen. Und dann kann ich Ihnen zeigen, was wir hier mit diesem Design gemacht haben bereichert die Animation. Also haben wir einige benutzerdefinierte Animationen und einige wirklich vorsichtig eine Pflanze Platzierung dieser Animationen. Wenn ich also den Mauszeiger zeige, können Sie diese Hover-Effekte auf diesen Schaltflächen sehen. Sie können sehen, dass dieses Menü uns folgt. Wie wir entlang scrollen. Sie können diese Horroreffekte sehen. Diese Karten, zum Beispiel, können Sie sehen, wie das funktioniert. Wir haben später auch einige Effekte mit diesem Teil aufgenommen. Es gibt einen Horroreffekt hier und diese Navigation funktioniert. Also, wenn ich auf meine Konten klicken, zum Beispiel, wird mich auf die Kontoseite nehmen, wo ich alle diese Symbole, zum Beispiel, die, wenn Sie auf sie klicken, werden sich ändern. Und all diese Informationen werden sich auch ändern, um besser mit all diesen Informationen hier an der Spitze zu entsprechen , sagen die Auswahl, die Sie gewählt haben. Wir haben auch unsere Wirkung auf diese Tasten. Wir haben auch Q und a. Wir haben diese schöne kleine Ordner und so weiter. Danach werde ich zeigen, wie wir diese Login- und Anmeldeseiten erstellen können, die Sie hier sehen können. Und nachdem Sie sich eingeloggt haben, gelangen Sie zu Ihrem Dashboard, wo Sie alle diese Paginierungseffekte auf diese Karten haben. Zum Beispiel haben Sie diese Effekte direkt hier an der Spitze. Und ich kann Sie auch auf Seiten wie diese bringen , wo ich zeigen werde, wie wir diese animierten Diagramme erstellen können. Wie Sie diese Schaltflächen erstellen können, wie können Sie diese scrollbaren Gruppen erstellen und vieles, viel mehr, nachdem das Design abgeschlossen ist, nachdem Sie genug Feedback gesammelt haben, nachdem Sie all diese und Emissionen getan haben, , die ich Sie Schritt für Schritt durchführe, wie wir sie auf intelligente Weise mit Komponenten erstellen können und wie Sie diese Komponenten später wiederverwenden können, gehen Sie zum responsiven Design über. Ich werde mit Ihnen teilen, was das responsive Design ist. Ich werde Ihnen all diese verschiedenen Raster- und Rastertypen zeigen, wie sie innerhalb unseres Designs funktionieren werden. Und ich werde zeigen, wie wir diese Homepage erstellen können, die diese Seite ist und in vier verschiedenen Größen angepasst ist. Und Dan, ich werde das Gleiche tun und Ihnen zeigen, wie Sie genau das Gleiche tun können indem Sie die gleichen Prinzipien auch auf dem Dashboard-Design-Bildschirm verwenden. Wir werden nicht nur um der Zeit willen ein ansprechendes Design für alle Seiten erstellen. Aber wenn Sie wollen, ermutige ich Sie wirklich, es zu testen, um selbst mit all diesen Seiten, die wir in diesem Kurs erstellen werden, zu versuchen , denn das ist der beste Weg, um zu lernen. Sie werden diese Prinzipien trotzdem anwenden, wenn Sie anfangen, mit Ihren Kunden zu arbeiten oder wenn Sie bereits mit Ihren Kunden arbeiten, ist dies eine gute Möglichkeit, nur Ihr Wissen aufzubürsten oder einige neue Techniken aufzugreifen , die Adobe XD kann Ihnen zur Verfügung stellen. Schließlich, nachdem wir dieses responsive Design abgeschlossen haben, werden wir zum Projekt Styleguide übergehen. Ich werde Ihnen zeigen, wie Sie Ihre Entwürfe mit Ihrem Kunden teilen können. Wie wir Feedback sammeln, Cola und Entwürfe mit Entwicklern teilen können , indem wir ihnen Assets geben, die sie dann herunterladen und im Code verwenden können. Wie kann angepassten CSS-Code freigegeben werden? Wie Sie alle diese Dokument-Assets direkt hier verwenden und erstellen können. Also, wenn die Last, können Sie sehen, dass wir diese Farb-Token erstellt haben. Wir erstellen eine andere Charakterstile. Wir haben eine Reihe von diesen verschiedenen Komponenten erstellt. Also werde ich Ihnen zeigen, wie Sie all diese Dinge mit Ihren Kunden und mit Ihren Entwicklern teilen können . Wir werden besprechen, wie wir Feedback sammeln können und wie Sie dieses Feedback in jedem Teil Ihres Projekts aufnehmen können. Also, ob das in diesem Teil, in diesem Teil, in Design Barth und responsive Teil. Oder schließlich, wenn Sie mit der Projektstilhilfe beginnen. Schließlich, es, wir werden dieses Projekt zu einem Ende zu schließen. Wir werden den Projektstileguide erstellen. Und ich werde Ihnen zeigen, wie Sie alle Assets aus diesem Projekt manuell exportieren können , um sie Ihren Entwicklern und Kunden zu zeigen, ich werde Ihnen die Ordnerstruktur zeigen. Ich zeige Ihnen verschiedene Asset-Export-Techniken, verschiedene Dateiformate, wie sie miteinander korrespondieren, für das, was Sie verwenden können, welches Dateiformat und vieles mehr. Ich werde Ihnen auch verschiedene Größen zeigen und wie Sie mit verschiedenen Größen arbeiten können. So zum Beispiel für all diese und wie können Sie Assets schnell exportieren? Wie können Sie den Asset-Export nicht wiederholen? Und wie können Sie diesen Prozess noch mehr verbessern, die Dinge ein wenig beschleunigen. Also im Grunde ist das unser Projekt und Sie können sehen, wie viel es in Weiß gibt. Der Kurs dauert so lange. Ich hoffe wirklich, dass Sie etwas Neues aus dem Diskurs lernen werden. Und ich hoffe wirklich, dass Sie das Wissen aus dem Diskurs in Ihre zukünftige Arbeit anwenden werden. Wie gesagt, das erste Video nach diesem Video ist nur führen Sie durch das Projekt selbst. Also, wenn Sie wollen, können Sie sehen, dass nach diesem Video kommt der Einführungsteil oder für Adobe XD. Wenn Sie also noch einmal mit Adobe XD nicht vertraut sind, gibt es UCSD, wenn Sie nicht wissen, was möglich ist. Ich ermutige Sie wirklich, diesen Teil des Kurses zu sehen, bevor Sie tatsächlich zu diesem Teil des Kurses gehen, wenn wir mit dem Projektdesign beginnen . Also sehe ich dich dort. 3. Einführung in Adobe Xd: In diesem Abschnitt des Kurses werden wir Adobe X, diese grundlegenden Tools und Funktionen, erkunden . Und ich werde wirklich jedem empfehlen, der gerade erst mit dem UI-UX-Design oder mit Adobe XD selbst begonnen hat , diesen Teil des Kurses zu überprüfen , weil er wirklich einige der wertvollsten Informationen über alle Tools enthält , die Adobe XD hat zu bieten. Tools über Design, weil Prototyping-Tools, werden wir sie ein wenig später im Kurs erkunden, sobald wir tatsächlich mit dem Prototyping unserer Entwürfe beginnen und einige Animationen und etwas Gewürz hinzufügen. Aber vor all dem, noch einmal, wenn Sie gerade erst anfangen, wenn Sie nicht wissen, was Adobe XD ist, wenn Sie nicht wissen, was Sie im UX-Design sind. Und dann werde ich Ihnen wirklich empfehlen, diesen Teil des Kurses zu überprüfen , um sich einige dieser Abkürzungen kennenzulernen. Denn es wird wirklich wertvolle Werkzeuge zu verstehen geben, vor allem, wenn Sie anfangen, weiterzumachen und weiter durch diesen Kurs. Und wir werden einige zu einigen extrem komplexen Sachen später in den Kurs-Bug bekommen. Vor all dem würde ich Ihnen wirklich empfehlen, diesen Abschnitt des Kurses zu überprüfen, denn wie gesagt, enthält er einige der wichtigsten Tipps und Techniken von Adobe XD und über alle grundlegenden Tools für das Design. Im nächsten Abschnitt des Kurses werden wir anfangen, tatsächlich zu entwerfen, gehen zu planen. Wir werden alles aus dem Entwurfsprozess selbst verarbeiten. Also noch einmal, wenn wir wissen, wie man all diese Dinge macht, können Sie diesen Teil des Kurses einfach überspringen. Aber wenn Sie es nicht tun, empfehle ich Ihnen wirklich, zu überprüfen und sich mit all diesen Tools und Funktionen vertraut zu machen. Also sehe ich dich im Kurs. 4. Adobe Xd: In diesem ersten Video dieser Serie, wo ich Sie durch die Adobe XD, seine Funktionen und alle seine Funktionen. Wir werden kreative Cloud-Desktop-App erkunden. So können Sie auf die offizielle Website von Adobe gehen, Adobe.com, Wenn Sie diese Creative Cloud-Desktop-App nicht haben. Und es wird im Grunde für alle Updates und alle Installationen jeder Software verwendet , die Adobe zu bieten hat, einschließlich eines Adobe be x D. So wird es aussehen. So können Sie Ihr kostenloses Konto erstellen und von hier aus darauf zugreifen. Sie können auch Ihr Behance Konto verbinden, wenn Sie eines haben, und es wird direkt hier angezeigt. Und diejenigen Ihrer Benachrichtigungen hier, genau hier haben Sie Desktop-Apps, Sie haben mobile Apps und Sie haben auch Web-Apps. So haben die meisten dieser Desktop-Apps mindestens mobile Version. Und wenn nicht, können einige von ihnen auch auf einem Web arbeiten. Zum Beispiel, Adobe-Schriftarten, wo Sie Schriftarten herunterladen können, Offensichtlich, Adobe Stock, wo Sie Stockfotos erhalten können, Portfolio, Acrobat, und so weiter. Wir interessieren uns für Desktop-Apps und Adobe XD. Also hier habe ich es installiert, wie Sie sehen können, und es ist auf dem neuesten Stand, wenn es nicht auf dem neuesten Stand ist, können Sie einfach, wie es sagt, hier, klicken Sie auf Update. Hier sehen Sie den Fortschrittsbalken Aktualisieren. Es wird sich auf die neueste Version aktualisieren und dann wird es diese Nachricht Besucher auf dem neuesten Stand angezeigt. Wie kann man es tatsächlich installieren? Wo es ganz einfach aus dieser Liste ist, genau hier, Sie haben diese Installationsschaltfläche neben Adobe XD, wie gesagt, haben Sie es bereits installiert, so dass Sie es nicht sehen können, sondern klicken Sie einfach auf Installieren. Es wird Sie auffordern, es wie jede andere Software auf Ihrem Computer zu installieren. Es funktioniert sowohl auf Mac als auch auf PC. Und sobald es auf Ihrem Computer installiert ist, wird es sagen, installiert ein aktuelles. Und im Grunde, um es zu öffnen, können Sie einfach hier klicken. Und wenn Sie dies tun, erscheint der Bildschirm und lassen Sie sie schnell Disziplin aus der Ansicht verbergen. Und im nächsten Video werden wir dieses Grün erkunden, das heißt Home-Screen. Und das ist im Grunde das erste, was Sie sehen, wenn Sie Adobe XD von dieser Creative Cloud-Desktop-App laden, müssen Sie es nicht von dort laden. Es gibt auch eine Desktop-Verknüpfung, um es wie jede andere Software zu öffnen. Aber ich empfehle wirklich, dass Sie von Zeit zu Zeit überprüfen, ob es Updates gibt , da dies der einfachste Weg ist, es zu starten und auf alle seine Funktionen zuzugreifen. 5. Home: Also hier haben wir den Home-Bildschirm, wie ich im vorherigen Video erwähnt. Und hier auf dem Startbildschirm können Sie auf alle diese mittleren Funktionen zugreifen , bevor Sie tatsächlich mit Adobe XD arbeiten. Unter dem Startbildschirm haben wir also die Registerkarte Lernen. Und sobald Sie darauf klicken, wird es diese Tutorials von Adobe XD Steam bringen. Und Sie können sehen, wie unsere Behälter Q0, die im Grunde ihr Evangelist bei Adobe Steam ist, Sie können über die ersten Schritte, über Design, Prototyp, Zusammenarbeit Designsysteme, all diese verschiedenen Tutorials, um Ihnen zu helfen aus, sobald Sie beginnen oder wenn Sie stecken bleiben, zum Beispiel, ist es der einfache Weg, um auf alle diese Tutorials zuzugreifen, aber alles, was wir Cloud-Dokumente haben, und diese Dokumente werden offensichtlich in die Cloud hochgeladen. Und da Adobe XD hauptsächlich Cloud-basiert ist, können Sie es nur als Desktop-App verwenden. Wenn Sie beispielsweise keinen Zugang zum Internet haben oder Ihre Dateien nicht in die Cloud hochladen möchten. Aber wenn Sie dies tun und wenn Sie dies tun, können Sie Ihre Cloud-Dokumente direkt hier sehen. Und wie Sie sehen können, bin ich auf einem Starter, ein Plan für einen Diskurs, weil ich Ihnen alle seine Funktionen zeigen möchte , sobald Sie auf einem Starterplan sind. Sie haben also nicht die Creative Cloud von Adobe bezahlt oder Sie haben die App für ein Jahr nicht selbst gekauft. Also im Grunde ist das, was er sagt, Upgrade. Also, das wirst du sehen. Wenn Sie die kostenlose Version von Adobe XD verwenden, können Sie auf diese Schaltfläche klicken. Wagen Sie sich zu aktualisieren, wenn Sie möchten, aber wenn Sie dies nicht tun, können Sie einfach weiter mit dieser kostenlosen Version. Also innerhalb einer kostenlosen Version, haben Sie einige begrenzte Cloud-Speicher. Und wenn ich hier klicke, können Sie sehen, wie Sie mit Ihren Cloud-Dokumenten arbeiten können. Und Sie können hier klicken, um zusätzliche Cloud-Dokumente hinzuzufügen, wenn Sie es mit Ihnen teilen möchten, sind die Dokumente, die mit Ihnen über die Cloud geteilt werden und gelöscht sind offensichtlich die gelöschten Dokumente, die Sie gegangen voraus und gelöscht, da Sie diesen zusätzlichen Speicherplatz in Ihrem Cloud-Speicher benötigen. Darunter können Sie verwaltete Links sehen. Und das sind die Links für die gemeinsam nutzbaren Prototypen. Also nehmen sie auch Platz ein. Und weil auf einem freien Plan, das ist das Startup Land, offensichtlich genau hier, Sie haben nur einen gemeinsamen Link. Wenn Sie sich dann in einem anderen Projekt befinden, möchten Sie diesen freigegebenen Link möglicherweise löschen, wenn er nicht mehr erforderlich ist. Zum Beispiel haben Sie das Projekt mit Ihrem Kunden abgeschlossen , und dieser muss diesen freigegebenen Link nicht mehr sehen. So können Sie fortfahren und löschen, wenn Sie möchten. Gehen wir zurück nach Hause, indem wir hier klicken. Und was Sie hier sehen können, ist ihr Slogan. So entwerfen Sie Prototypenfreigabe, das ist alles, was Adobe XD nicht tun kann. Darunter. Wir haben einige sind mehr Größen und unsere Boards sind im Grunde, wenn Sie noch nie mit einer Vektordatei und Vektorprogramm gearbeitet haben, bevor. Grundsätzlich handelt es sich hierbei um Ihre Dateidimensionen innerhalb von Adobe XD. Also hier haben sie einige dieser Verknüpfungen eingeführt. Also im Grunde ist dies für das Handy und Tablet, ist für das Web, und das ist für die sozialen Medien, und das ist Ihre benutzerdefinierte Größe. Und wenn Sie auf diese Pfeile klicken, haben Sie dieses Drop-down-Menü mit einigen großen Größen, die verwendet werden. In der ganzen Branche. Und das sind im Grunde Industriestandards, wenn Sie mit diesen Größen arbeiten. So wie Sie sehen können, haben wir mobile und Tablet-Versionen hier, wir haben eine Website-Versionen Hier, wir haben Social-Media-Versionen hier. Und wenn wir darauf klicken, wird es Sie tatsächlich zu einem neuen Dokument bringen. Also lassen Sie mich schnell zurückgehen und Ihnen alles zeigen. Und schließlich haben wir sie Größe besprochen, die Sie öffnen können und Sie können Ihre Werte eingeben. Also, lassen Sie uns zum Beispiel 1920 mal 1080 verwenden, so können Sie einfach Ihre Nummern auf Ihrer Tastatur eingeben. Drücken Sie einfach die Eingabetaste oder klicken Sie hier. Bevor wir das tun, laden wir, dass Sie Ihre letzten Dateien haben und dies sind im Grunde Ihre Dateien, die Sie zuvor geöffnet haben. Diese sind also von hier aus zugänglich. Außerdem können Sie Ihre Adobe XD öffnen und von dort aus öffnen. Und das werde ich auch zeigen. Aber im Grunde sind dies nur einige Ihrer neuesten Dateien. Und es ist praktisch, sie hier zu haben, denn zum Beispiel sind dies meine Mockups, die ich in Adobe XD verwende. Und ich kann einfach hier klicken und es wird diese Datei ohne mich ein Surfen für sie auf meinem Computer öffnen . Endlich, bevor wir zu den eigentlichen Kunsttafeln gehen, und ich zeige Ihnen die XD von innen. Dies sind nur einige im Grunde Newsletter, die sie hier enthalten sind. Also einige hilfreiche Ratschläge oder Ressourcen und so weiter. So können Sie hier klicken, um einige ihrer Tutorials zu erkunden. Und das kannst du tun, indem du hier klickst und dir bereits gesagt hast. Hier haben wir einige Klammern, die offensichtlich hilfreich sind, wenn Sie einige Ihrer Kinder herunterladen und erkunden möchten , die andere Leute erstellt haben. Und wir werden sie auch ein wenig später erwähnen. Und schließlich, was wir hier haben, ist tägliche kreative Herausforderung, die ich wirklich empfehlen, dass Sie beitreten, vor allem, wenn Sie denken, dass dieser Karriereweg ist für Sie gibt tägliche kreative Herausforderungen sind genial und Sie kann auf sie zugreifen, indem Sie direkt dort klicken. Und sie sind vielseitig. Sie schließen also ständig neue Herausforderungen mit ein. Also empfehle ich wirklich, dass ihr sie überprüft. Und haben Sie Ihr Glück bei einigen ihrer täglichen Herausforderungen versucht? Lassen Sie uns schließlich unsere benutzerdefinierte Größe öffnen, die wir erstellt haben. Sie können aber auch von hier aus auf diese exakten Abmessungen zugreifen. So können Sie 1920 mal 1080 sehen. Es liegt also wirklich an dir, was du tun willst. Aber weil ich das bereits erstellt habe, lassen Sie mich schnell dorthin klicken. Und wie Sie sehen können, wird es dieses neue rpart öffnen, wie ich es skaliere. Sie hatte die Kontrolle über den Befehl ist 0, um in Position zu schnappen. Und so wird es im Grunde aussehen. Das ist also Ihr Flughafen, das ist Ihr Arbeitsraum. Und innerhalb dieses Leerraums, innerhalb dieses Kunsttafels, können Sie zeichnen, Sie können Text einfügen, Sie können Grafiken erstellen. Sie können alle Arten von verschiedenen Sachen machen, die wir in diesem Kurs behandeln werden. Aber im Grunde ist dies Ihr Arbeitsraum. Überall. Dieser Arbeitsraum ist im Grunde dieser leere Raum, den man nach oben und unten gehen kann. Wie Sie sehen können, gibt es viel Platz für all Ihre zusätzlichen Flughafen, die Sie erstellen werden. Und ich werde Ihnen in diesem Kurs zeigen, wie Sie das tun können. Und wir werden den gesamten Designprozess durchlaufen. Und ich werde Ihnen viele verschiedene Details in diesem Kurs zeigen. Aber bevor wir es tun, möchte ich diese Grundlagen nur für alle Menschen abdecken , die Adobe XD noch nie verwendet haben. Sie können also direkt hier klicken, um dieses Dokument umzubenennen. Wie Sie standardmäßig sehen können, ist es bis heute, Volumenkörper benennen es schnell in mein erstes Projekt um. Und klicken Sie auf Speichern. Und wie Sie sehen können, dieses Cloud-Symbol direkt hier, weil es auf die Cloud aktualisiert wird und Sie sehen können, dass es gespeichert wird. Was ist es gerettet? Du. Sie haben diesen Fortschritt nicht mehr und Sie können immer Control oder Befehl S drücken, um ihn zu speichern, wenn Sie möchten. Schließlich können unsere Boardnamen von hier aus geändert werden, so dass Sie hier doppelklicken können. Zum Beispiel, nennen Sie diese eine Homepage. Sagen wir mal, wenn das etwas ist, das du willst. In der nächsten Reihe von Videos werden wir alle drei Registerkarten, die Adobe XD hat, erkunden. Also hat es diese linke Registerkarte, es hat die Stopp-Registerkarte, und er hat diese rechte Registerkarte. Und all diese Registerkarten machen verschiedene Dinge und ich werde sie in den nächsten Videos erklären. Also sehe ich dich dort. 6. Adobe Xd: Lassen Sie mich Sie also schnell durch diese Registerkarten von Adobe XD führen. Also auf der linken Seite haben Sie die Registerkarte Werkzeuge. Genau hier. Sie haben den Eigenschafteninspektor. Und genau hier haben Sie diese Haupt-Registerkarte. Der Unterschied zwischen Windows- und Mac-Versionen von Adobe ist die ziemlich einfach, eigentlich nur der Mittelwert. Und der einzige Differenzierungsfaktor ist die Navigation. Also auf einem Mac haben Sie Navigation genau hier an der Spitze, wie Sie normalerweise auf jeder anderen App, auf Ihrem Mac oder unter Windows haben , haben Sie diese Optionen hier, und Sie haben auch dieses Hamburger-Menü hier. Also, sobald Sie dort klicken, haben Sie alle Ihre Optionen hier. Und Sie können auch mit der rechten Maustaste auf die meisten dieser Werkzeuge und diese Optionen klicken. Und Sie werden einige zusätzliche Funktionen bekommen, was auch immer Sie tun. Das ist also der Haupt- und Hauptunterscheidungsfaktor zwischen Mac- und PC-Versionen. Jetzt rechts hier auf der linken Seite, sobald Sie schweben, haben Sie alle diese verschiedenen Werkzeuge, die Sie verwenden können, um verschiedene Designs zu erstellen. Und fangen wir von oben nach unten an. Dies ist also Ihr Auswahlwerkzeug und Sie verwenden es normalerweise , um jedes Objekt auszuwählen, das Sie in Ihrem Arboreal haben könnten. Darunter haben wir einige Formobjekte. Sie haben also Rechteck, Ellipse, Polygon und eine Linienform. Und Sie können feststellen, wenn ich den Mauszeiger über jede von ihnen führe, haben Sie eine Tastenkombination. Und ich werde euch auch ein PDF mit allen Verknüpfungen zur Verfügung stellen. Oder Sie können einfach auf die Adobe XD-Website gehen, Verknüpfungen in die Suchleiste eingeben und Sie können sie dort finden, oder einfach Google, Adobe XD-Verknüpfungen, je nachdem, was für Sie einfacher ist. Alternativ können Sie auch direkt hier klicken und zur Hilfe gehen. Und von hier aus können Sie darauf zugreifen, zum Beispiel XD-Hilfe. Sie können dort klicken und Sie können alle diese Verknüpfungen finden. Im Folgenden haben wir die Bleistift und Stift-Werkzeug verwendet wird, um komplexe Formen zu erstellen. Und das wirst du im nächsten Video sehen. Und darunter haben wir natürlich textuelle für die Erstellung und Verwaltung von Text. Darunter haben wir unser Board Tool. Wenn Sie also schnell mehrere R-Boards hinzufügen möchten, ohne auf den Startbildschirm zu gehen, können Sie einfach dort klicken. Und innerhalb Ihres Eigenschafteninspektors können Sie alles sehen, was auf dem Startbildschirm ist, aber von hier aus zugänglich, so dass Sie leicht , zum Beispiel, ich möchte diese erstellen. Sie können darauf klicken und es wird es direkt hier auf der rechten Seite hinzufügen, wie Sie genau dort sehen können. So kann ich voran gehen und löschen, indem ich einfach mein Löschtasten-Steuerelement 0 drücke, um in Position zu rasten. Und schließlich haben wir das Zoomwerkzeug. So wie jedes andere Werkzeug darunter, haben wir Assets Panel. Und wenn ich darauf klicke, wird es nach rechts erweitert. Und Sie können Ihre verschiedenen Säuren hinzufügen. So können Sie verschiedene Farben hinzufügen, mit denen Sie arbeiten innerhalb Ihres Designs. Und einfach, indem Sie auf diese Farben klicken, die Sie zuvor dort hinzugefügt haben. Sie gilt für das, was Sie ausgewählt haben. Wenn Sie zum Beispiel Text bearbeiten, ist er ganz schwarz und Sie möchten ihn erstellen, zum Beispiel blau und Sie haben hier blaue Farbe. Sie können den Text direkt dort auswählen, und es wird angewendet. Ich werde Ihnen das alles später in diesem Kurs zeigen. Darunter haben wir Zeichenstile. Zum Beispiel erstellen Sie. H man lasst c und h man es sein, zum Beispiel 36 fett. Sie können einfach auf dieses Plus klicken und es wird es dort als Zeichenstil hinzufügen. Später haben Sie eine andere, die 18 unregelmäßig ist. Sie können direkt dort klicken und es wird es dort hinzufügen. Wenn Sie später Zeichenstile ändern möchten, die Sie möglicherweise innerhalb Ihres Flughafens haben, können Sie es einfach auswählen, hier navigieren, darauf klicken, und es wird auf diesen Zeichenstil aktualisiert. Schließlich haben wir Komponenten, und Komponenten sind ein wenig komplexes Thema zu besprechen, aber wir werden es während dieses Kurses diskutieren weil Sie sehen werden, dass wir viele verschiedene Komponenten verwenden werden. Und sagen wir, Sie haben eine Schaltfläche, die Sie in Ihrem Design verwenden möchten. Vielleicht ist es ein blauer Knopf. Nehmen wir an, dass die Breite 76 Pixel beträgt, so etwas. Und es heißt, zum Beispiel, erfahren Sie mehr. Sie können Kontrolle oder Befehl K drücken, um es als Komponente hinzuzufügen, oder Sie können direkt hier zu unserer Säurenschlacht navigieren. Klicken Sie hier auf dieses Plus-Symbol, und es wird diese Komponente hier hinzufügen. Dann können Sie einfach auf Ihre Komponente klicken, ziehen und ablegen. Und es ist viel einfacher, schneller und optimierter Weg, um Ihre Designs zu erstellen , dann um diese Schaltfläche neu zu erstellen oder zu kopieren und einzufügen. Die ganze Zeit. Sie müssen Komponenten nicht nur für Schaltflächen verwenden. Sie können sie für alle Arten von verschiedenen Dingen verwenden. Zum Beispiel Bilder. Sie können sie für verschiedene Formen verwenden, Sie können sie für Symbole verwenden und so weiter. Aber wie er sagte, werde ich das in diesem Kurs viel detaillierter erklären. Darunter haben wir Ebenenbedienfeld. Und offensichtlich, wenn Sie diese verwenden, werden Sie sehen, dass es mit Ihren Ebenen genau hier gefüllt wird. Sie können sie neu anordnen und sie neu organisieren, Empfänger anklicken und sie ziehen. Und Sie haben auch zweischichtige Gruppen. Bevor ich Ihnen zeige, dass Sie hier einige Möglichkeiten haben. So können Sie für den Export jede Ebene markieren, und dann können Sie einfach Control oder Befehl E drücken. Und es wird beginnen, alle diese Ebenen zu exportieren, die wir für den Export markiert haben. Oder Sie können sie einfach manuell so auswählen, drücken Sie Steuerbefehl E und sie werden so exportieren. Sie können Ihre Layer sperren, damit sie sich nicht bewegen können. Und Sie können bestimmte Ebenen auch ausblenden, indem Sie einfach hier klicken und es wird nicht angezeigt. Also lassen Sie mich die Farbe ändern. Und wenn ich hier klicke, kann man es nicht mehr sehen, weil es versteckt ist. Schließlich können Sie Ihre Ebenen durch Gruppe hinzufügen und Sie können mehrere Ebenen, Bucketing, Klicken und eine Verschiebung auswählen . Also, wenn ich hier rechts klicken Halle meine Shift-Taste, klicken Sie auf diese, Ich werde alle von ihnen auswählen. Er würde Controller Befehl G, um sie zu gruppieren. Und Sie können doppelklicken und umbenennen der Gruppe Solidarität Gruppe. Und Sie können auch mit der rechten Maustaste klicken und Sie können alle diese verschiedenen Verknüpfungen direkt hier sehen. Es ist also wirklich wichtig, zumindest einige grundlegende Verknüpfungen zu lernen. Wenn nicht, können Sie einfach mit der rechten Maustaste auf die Gruppe klicken und diese Layer auch umbenennen. Also würde ich sagen, zuerst, zweitens, und so weiter. Also, das sind im Grunde Ihre Ebenen. Und um die einfach ausgewählte Ebene zu löschen, drücken Sie auf der Tastatur Löschen und es wird sie von dort löschen. Sie können das auch neu positionieren. Das habe ich dir schon gesagt. Und das geht es im Grunde um Schichten. Und wir werden sie während dieses Kurses in vielen weiteren Details erkunden. Ich wollte dir nur schnell zeigen, was die beiden. Endlich ist es hier unten haben wir Plugins, Panel. Und Plugins werden verwendet, um Ihnen zu helfen, eine effizientere und schnellere Art und Weise zu entwerfen. So zum Beispiel, wie Sie hier sehen, habe ich mein Winkel-Plugin, das meine Mockups gebildet wird. Ich habe mein Arranger-Plugin und alle diese Plugins sind unterschiedlich. Sobald Sie auf Installieren klicken, machen sie verschiedene Dinge sortieren. Lassen Sie uns dieses Lorem ipsum sehen, ich kann den Text auswählen, den Textbereich auswählen und etwas eingeben. Mal sehen, vielleicht Decks. Klicken Sie irgendwo außerhalb. Klicken Sie auf lorem ipsum, füllen Sie den Platzhaltertext aus. Fügen Sie Text ein, wie Sie sehen können, anstatt mich auf eine Website zu hören kopieren und einfügen und so weiter, in nur wenigen Klicks innerhalb von Adobe XD, habe ich es geschafft, einige Dummy-Text direkt hier aufzunehmen. So wie Sie sehen können, wie viele von ihnen, und um mehr hinzuzufügen, können Sie auf dieses Plus-Symbol klicken und Sie können entdecken, durchsuchen und verwalten. Also hier haben wir Editor's Choice und was sie denken, die wichtigsten Plugins sind. Und Sie können sie nach Kategorien sehen. Wenn Sie zum Beispiel für Wiederverwendbarkeit und Tests singen möchten, können Sie direkt dort klicken und sie werden Ihnen die relevantesten und wichtigsten Plug-Ins für diese bestimmte Kategorie versichern . Sie können auch auf Verwalten klicken, und das sind alle meine installierten Plugins hier. Ich weiß also, dass diese generierten Karten leider nicht mehr funktionieren. So kann ich von hier auf Installieren klicken, auf Installieren klicken, und Sie können sehen, dass es von hier als auch von hier verschwunden ist. Wenn Sie ein Update für Ihre Plugins haben, können Sie auf Alle aktualisieren klicken. Und wie Sie sehen können, können Sie je nachdem, wie schnell Ihre Internetverbindung ist, sehen, dass es wirklich schnell aktualisiert wird. Das sind also deine Plugins und das ist deine Leiste hier auf der linken Seite. Also unter der Spitze haben wir Prototypen und Share-Optionen entwickelt. Also, was sind das? Und im Grunde auf der Registerkarte Design, tun Sie, alle Ihre Entwürfe, möchte auf Prototyp Registerkarte klicken. Sie können alle Arten von verschiedenen Animationen zu Ihren Objekten, unserem Board oder dem Flughafen selbst hinzufügen. Sie können mehrere Flows erstellen und wir gehen auf alle diese Details zu gehen. Und Sie können feststellen, einmal ein Klick einige dieser Dinge, diese Eigenschaften Inspektoren sind auf der rechten Seite ändern. So können Sie für diese beiden sehen, es ist völlig anders, wenn ich zwischen ihnen wechseln. Und das ist wirklich mit Absicht, denn vor allem in Design und Prototyping Tabs, gibt es völlig andere Dinge zu tun. Und schließlich haben wir die Registerkarte „Teilen“, die tatsächlich verwendet werden, sobald Sie Ihr Projekt abgeschlossen haben und Sie es mit Stakeholdern teilen möchten, mit Kunden, mit Entwicklern, mit Ihren Teamkollegen. Und Sie können hier alles aufstellen. So können Sie Design Review wählen, die tatsächlich Ihr Kunde wird überprüfen und Ihr Feedback hinterlassen. Sie können das gleiche für eine Entwicklung tun. So können Entwickler CSS-Schnipsel sehen. Sie können alle verschiedenen Assets sehen, die Sie verwenden. Sie können verschiedene Ränder, Polsterungen und so weiter sehen. Präsentation, Benutzer-Tests, Name sagt alles. Und schließlich, Kostüm. Wenn Sie einige dieser Dinge anpassen möchten, wenn Ihre Zielgruppe benutzerdefinierte Zielgruppe ist, die hier nicht dargestellt wird. Und wie Sie sehen können, wird ein Link My First Project genannt, weil unser Projekt My First Project heißt. Aber Sie können es offensichtlich von hier aus umbenennen. Und lassen Sie uns geben, dass einige den Projektnamen nicht kennen, basierend auf dem Unternehmen selbst und so weiter. So können Sie dort auf all das zugreifen. Also, das ist es im Grunde für dieses Video. Und ich werde Ihnen einen Eigenschafteninspektor zeigen und wie es sich in der nächsten Reihe von Videos ändert, sobald wir mit der Erkundung all dieser verschiedenen Tools beginnen, direkt hier im I'll Tools-Panel. Also sehe ich dich dort. 7. Formen: In diesem Video werden wir einige Formen erforschen , die hier im Rahmen von Adobe XD angeboten werden. Beginnen wir also mit der rechteckigen Form. Und Sie haben bereits gesehen, dass ich einige davon erstellt habe, aber lassen Sie mich gehen und alles löschen, damit wir eine schöne saubere Schiefer haben. So können Sie darauf klicken oder Sie können unsere Verknüpfung dafür verwenden. Sie können klicken und ziehen und erstellen, was Sie wollen direkt hier mit diesem Rechteck-Werkzeug, Sie können auf das Auswählen Werkzeug klicken, das ist v, als Verknüpfung und Sie können es positionieren, wo Sie wollen, genau hier. Und hier. Wie ich in einem vorherigen Video erwähnt habe, ändert sich der Eigenschafteninspektor basierend auf dem, was Sie von hier ausgewählt haben. Also hier haben wir einige Möglichkeiten und lassen Sie mich Sie durch alle führen. Und im Grunde sind sie für all diese Formen ziemlich ähnlich. Und tatsächlich lassen Sie uns erkunden und Schulden wirklich schnell. Also halte ich Shift, um richtig zu skalieren. Und wenn Sie die Schicht nicht halten, wird das passieren. So können Sie sehen, dass es nicht so skaliert, wie es sollte. Und lassen Sie mich das verwenden, um mein Rechteck zu erstellen und lassen Sie mich dies verwenden, um meine Zeile zu erstellen. Also im Grunde wird es so aussehen. Sobald Sie alle diese verschiedenen Formen erstellt haben, LASSEN sie ihnen schnell eine Farbe geben. So können wir ihnen eine Farbe geben, eins nach dem anderen, indem wir einfach hier klicken und dann die gewünschte Farbe auswählen. Sie können eine einfarbige Farbe verwenden. Sie können einen linearen Farbverlauf verwenden, dem Sie sehen können, wie das aussieht. Und wir werden das etwas später in diesem Kurs erklären. Und Sie können eine radiale Verläufe verwenden, die im Grunde aus diesem Kreis ist. Aber lasst uns mit einfarbig gehen. Und Sie können diesen Hex-Code verwenden, besonders wenn Sie einen benutzerdefinierten Hex-Code haben. Also lassen Sie uns meine drei verwenden, C6 ff, das ist ein schönes Blau. Sobald Sie auf die Eingabetaste oder die Rückkehr klicken, wird sie angewendet. Und Sie können dann eine verfärbte verwenden, um auf alle Ihre Objekte anzuwenden , indem Sie einfach hier und dann hier klicken. Und Sie können sehen, dass es für alle gilt. Nun ist die andere Funktion die Rahmenfarbe. Wie Sie sehen können, ist es auf all diesen Formen, aber genau dort schwierig. Es wird diese Rahmenfarbe von allen von ihnen entfernen. Ich wähle meine Linie aus und lass ihn sie zurückbringen, weil sie nur die Randfarbe hat. Und lassen Sie mich die Größe dieser Grenze auf, sagen wir, zehn erhöhen , nur damit Sie sie ein bisschen besser sehen können. Und nun lassen Sie uns einige dieser Optionen hier in unserem Eigenschafteninspektor durchlaufen. Also oben haben wir Positionierungssymbole. Also genau hier können Sie es an die Spitze, an die Mitte so, an der Unterseite, nach links, in die Mitte so anheften an die Mitte so, an der Unterseite, , und nach rechts haben Sie gleichmäßig verteilt. Wenn Sie also alle auswählen, können Sie sie so verteilen. Und du kannst sie so verteilen. Also im Grunde, was Sie hier auswählen, wird es innerhalb Ihres Eigenschafteninspektors unten zeigen , dass wir wiederholen Grid-Option. Sobald Sie das auswählen, haben Sie diese beiden Griffe und Sie können auf der rechten Seite wiederholen. Und Sie können auch auf der Unterseite wiederholen. Wenn Sie also mehrere dieser Formen haben, können Sie sie so positionieren. Und es ist wirklich extrem einfach zu bedienen und zu arbeiten, besonders wenn Sie sich wiederholende Formen wie Bildraster usw. haben. Sie können die Gruppierung aufheben und Sie können eins nach dem anderen arbeiten, oder Sie können, wenn Sie es nicht tun möchten, würde er Control Z, um sie immer noch in der Gruppe zu haben. Und wenn ich diese erste wähle, und wenn ich sie skaliere, können Sie sehen, dass alle skaliert werden. Sie können hier zwischen ihnen schweben. Und Sie können den Abstand zwischen ihnen anpassen. Und Sie können auch immer erweitern und haben so viele von ihnen, wie Sie wollen. Im Grunde, welche Änderung Sie an dieser ersten vornehmen , wird auf alle zutreffen. Also lasst uns schnell eine Farbe ändern. Sie können sehen, dass es in Echtzeit aktualisiert wird. Und Sie können auch alle diese zusätzlichen Funktionen hinzufügen, die wir erforschen werden. Aber im Moment, lassen Sie uns schnell auf Gruppierung Raster aufheben klicken und lassen Sie mich alle löschen , nur damit Sie nicht mit dem, was los ist verwechselt werden. Unten. Wir haben all diese verschiedenen Möglichkeiten. Also, wenn Sie jemals Werkzeuge wie Photoshop, Illustrator oder welches andere Design-Tool zuvor verwenden , im Grunde, was Sie hier haben, sind hinzufügen. Also wird es zu der Form hinzufügen. Subtrahieren, schneiden und schließlich Überlappungen ausschließen. Es wird also genau hier gezeigt, was sie tun. Sie können mit diesen verschiedenen Einstellungen herumspielen, aber wir werden das im Moment nicht tun. Lass uns schnell alles durchlaufen. Also haben Breite und Höhe und Sie können es manuell anpassen und die offensichtlich ändern, wie Sie an ihnen von hier aus arbeiten, haben Sie sie auf der X- und Y-Achse. Sie können sie massiv drehen, sagen wir 45 Grad. So wird es aussehen. Sie können es von links nach rechts, von oben nach unten drehen. Und hier haben wir horizontale Bildlauf, wir haben vertikale Bildlauf, und wir haben Scroll in allen Bereichen, also horizontal und vertikal. Und diese drei werden viel mehr Sinn machen, wenn wir anfangen zu entwerfen. Aber im Grunde sind sie da, um Ihnen bei Ihrem Designprozess zu helfen , um die Dinge noch schneller zu beschleunigen. Hier haben wir eine feste Position beim Scrollen. Offensichtlich, wenn Sie Ihr Armbrett verlängern, was Sie tun können, indem Sie hier klicken. Und dann, wenn Sie unten zeichnen, können Sie diese Bruchlinie sehen. Grundsätzlich wird alles, was Sie hier sehen, auf dem Bildschirm sichtbar sein. Aber unter dieser Fehlerlinie ist, wo Ihre Reserven müssen scrollen. Also lasst uns das rückgängig machen. Gehen wir zurück. Sie haben eine Responsive Größe und Sie können diese Responsive Größenänderung Funktion verwenden , indem Sie einfach hier klicken , um sie zu aktivieren oder zu deaktivieren, wie Sie wollen. Und wir werden die Responsive Größe später im Kurs zu bekommen, wenn wir tatsächlich unsere Webseite beenden und wir beginnen, um reagieren zu können. Aber im Grunde haben Sie dort automatische und manuelle Optionen. Und ich werde schießen, dass wir angefangen haben zu entwerfen. Sie haben Ihren Fettleibigkeit Schieberegler. Sie können es an beliebiger Stelle positionieren, oder Sie können Tastenkombinationen verwenden. Also zum Beispiel, wenn ich fünf mit voller Auto 53% verwende, wird es zu 30% oder 0 gehen, es wird zu 100% gehen. Darunter haben wir Mischmodus. Also, wenn eine Position diese beiden hier, und wenn ich dunkel klicken und wenn wir Bildschirm klicken, wenn ich zwischen all diesen wählen, wie Sie sehen können, es ändert sich. So können Sie mit diesen Einstellungen herumspielen, aber sie werden meistens verwendet und besser mit Bildern als mit diesen Formen verwendet. Darunter haben wir Eckenradius. Und Sie können den Eckenradius anpassen oder auch, zum Beispiel, 50, wie Sie sehen können, rundet er alle Seiten ab. Oder wenn Sie hier klicken. Sie haben jedoch oben links, oben rechts, unten rechts und unten links, und Sie können darauf zugreifen. Also lassen Sie uns zum Beispiel zehn für diesen verwenden. Wie Sie sehen können, ist das Dan und alle anderen sind 50. Darunter haben wir die Füllfarbe und ich habe Ihnen bereits gesagt , Sie können aus diesen verschiedenen Autos hier wählen, und das ist Ihre Deckkraft hier. Und lasst uns schnell zu dieser gleichen Farbe zurückkehren. Klicken Sie also einfach direkt dort und Sie können sehen, dass dies Ihre Farbauswahl sind. Dies ist Ihre Grenze und Sie können offensichtlich erhöhen die Dicke Ihrer Grenze bereits gezeigt, dass mit der Linie. Sagen wir also 20. Und Sie können sehen, dass diese Grenze bei 20 ist. Sie können Strich Volumenkörper hinzufügen, wenn 50, Sie können sehen, wie das aussieht. Und all diese verschiedenen Optionen, die im Grunde besser mit Bleistift verwendet werden. Aber wir werden es in einer Sekunde im mentalen Video erreichen. Aber im Grunde können Sie schweben und sehen, was all diese sind. Das sind deine Schläge. Das sind deine Mützen. So können Sie um die Lücke klicken und sehen, dass diese gepunkteten Linien nicht mehr gerade, flach, gerundet sind. Und schließlich haben Sie Joins genau hier. Also, wie Sie wollen, dass sie verbunden werden. Und darunter haben wir den Schatten, aber ich schnell entfernt Grenze. Sobald Sie auf Schatten geklickt haben, haben Sie es auf den x-, y- und bluer. Also x und y sind Achsen, und blau ist, wie viel Blau Sie in Ihrem Schatten wollen. Also lass uns 2020 sehen. Und Sie können sehen, dass es 20 runter und 20 nach rechts geht. Und wenn Sie verschwommen erhöhen wollen, denn aus irgendeinem Grund ist dies zu stark von einem Schatten. Lassen Sie uns zum Beispiel 50 verwenden. Und Sie können sehen, wie das aussieht. Im Grunde sieht dieses Element so aus, als ob es in mittlere Luft fließt. So können Sie den Schatten anpassen, können Sie seine Farbe wählen. Auf diese Weise können Sie auch den gleichen Schatten aus der Farbe selbst und je niedriger seine Fettleibigkeit wie diese wählen , je nachdem, welche Sie verwenden möchten, zum Beispiel 40. Und jetzt können Sie sehen, dass es eine Art pulsierende Form hier ist. Schließlich haben wir den Hintergrundanwalt und diese Option ist besser mit Bildern verwendet. Und das werde ich Ihnen ein wenig später im Kurs zeigen. Und schließlich können Sie auf Markieren für den Export klicken, wie bereits erwähnt, oder Sie können direkt hier springen, zwei Ebenen Panel. Was hier ausgewählt ist, ist hier markiert, und Sie können einfach hier klicken, um für Markierung für den Export zu maskieren. Also, das ist es im Grunde für die Formen. Lassen Sie uns schnell einige Differenzierungsfaktoren zwischen all diesen verschiedenen Formen durchgehen . Also habe ich dir das schon gezeigt, dieses hier. Sie haben hier noch mehr Optionen, aber im Grunde ist alles andere gleich. Also, was das ist, ist die Zählung des Gerichtsmediziners. Also, wie viele Viertel Sie wollen Derzeit hatten wir drei. Wenn ich das auf fünf vergrößere, können Sie sehen, dass wir diese andere Form bekommen. Wenn ich zum Beispiel acht sage, können Sie sehen, dass wir das bekommen. Dies ist der Eckenradius, und Sie können das nicht tun. Für ein Gleichnis hier, um den Eckenradius für jede Ecke zu ändern, müssen Sie es für alle Ecken tun. Also, wenn ich zehn zum Beispiel wähle, oder vielleicht sogar etwas größer, so dass Sie es so sehen können 40. Und Sie können hier sehen, dass wir jetzt diese abgerundeten Ecken haben. Und was das ist, ist der Stern, der hier angekleidet ist. Wenn ich zum Beispiel hier schweben möchte und dies auf 50 reduzieren möchte, können Sie sehen, dass wir hier einige verschiedene Formen bekommen. Also 45. Und wenn ich es auf 100 zurückbringe, wird es in die ursprüngliche Form gehen und es wird sich offensichtlich mit dem ändern, was Sie hier ändern. Also, wenn ich zu fünf gehe, jetzt ändern Sie es auf 50, können Sie sehen, dass wir jetzt diese andere Form bekommen. Es hängt also alles davon ab, was Sie hier auswählen. Wenn ich zum Beispiel drei wähle und dann zu 15 gehen, können Sie sehen, dass wir jetzt diese Art von Mercedes Benz Logo haben. Im Grunde hängt alles davon ab, was Sie hier tun. Das ist also im Grunde unser Dreieck und ich werde Polygonwerkzeug für den Kreis. Im Grunde ändert sich hier nichts. Und Sie können es offensichtlich erhöhen, um es zu verringern. Und wenn Sie es verringern oder erhöhen Sie es gleichmäßig auf allen Seiten, können Sie die Umschalttaste verwenden und eine der Ecken ziehen, und es wird in dieser Größe zunehmen. Wenn Sie es gleichmäßig auf allen Seiten erhöhen möchten, können Sie die Umschalttaste alt und Linksklick in einer der Ecken gedrückt halten. Und Sie können sehen, dass es proportional zunimmt und abnimmt , weil Sie diesen Charcot verwenden. Schließlich können Sie für die Linie sehen, dass wir nur die Grenze haben. Wir haben nicht die Füllfarbe wie bei diesen. Und im Grunde können Sie alle die gleichen Dinge tun. Also lassen Sie mich Ihnen Mützen zeigen. Sie können sehen, dass jetzt quadratisch ist. Aber wenn ich diese runde Kappe wähle, können Sie sehen, dass wir jetzt diese Rundheit hier haben. Und Sie können nicht erweitern, Sie können es nicht ändern. So können Sie den Eckenradius nicht so ändern, wie Sie es hier nicht tun können. Aber Sie können tatsächlich tun, ist einfach erhöhen Sie die Größe dieser Grenze zum Beispiel auf 50,. Und Sie können sehen, dass es sich jetzt in der Größe geändert hat. Dies im Grunde, wenn die Türen Ihre Formen sind und ich denke, ich habe alles abgedeckt, wenn es um diese verschiedenen Formen geht, können Sie mit ihnen herumspielen. Sie können alle Arten von verschiedenen Dingen tun und Sie können sie für jeden Zweck verwenden, den Sie wollen. Lassen Sie mich Ihnen schnell ein kurzes Beispiel zeigen. Nehmen wir an, dass Sie Ihren Entwürfen Bilder hinzufügen möchten, was auch immer es ist . Also lassen Sie mich schnell wachsen und ein Bild finden. Lassen Sie mich das zum Beispiel verwenden. Sie können es einfach per Drag & Drop ablegen. Und Sie können sehen, dass, sobald Sie es tun, Ihre Formen hervorhebt. Und wenn Sie es fallen lassen, wird es bevölkern. Und Adobe XD wird sein Bestes tun, um die Mitte Ihres Bildes zu finden. Aber wenn Sie innen doppelklicken, können Sie sehen, wie das aussieht. Also, wenn Adele noch einmal klicken und mein Bild erweitern, jetzt, dies wird der Schwerpunkt dieser Kante sein , so dass Sie es positionieren können, wo immer Sie wollen. Sie können sehen, wie das aussieht. Wenn Sie offensichtlich Ihren Schatten aktualisieren möchten, können Sie das auch tun. Und lassen Sie mich die Deckkraft sehr senken. Lassen Sie mich sehen, zum Beispiel, ich kann fünf verwenden und tatsächlich fünf für diese auch verwenden. Und jetzt können Sie sehen, dass wir das Software-Image haben. Sie können offensichtlich den Eckradius ändern oder lassen Sie uns mit zehn auf diesem gehen. Und jetzt haben Sie dieses schöne Bild hier. Also, das sind Ihre Formen im Grunde im nächsten Video, das wir Eltern behandeln werden, was es für Sie und Ihr Projekt tun kann. Und wir sehen uns dort. 8. Stift-Tool: Na gut, also gehen wir jetzt zum Bleistift. Und mentale befindet sich genau hier, unter all diesen Formwerkzeugen. Und um auf den Bleistift zuzugreifen, können Sie eine Verknüpfung b verwenden, wie Sie hier sehen können. Klicken Sie einfach darauf. Und was das Stift-Werkzeug im Grunde tut, ist, dass Sie alle diese grundlegenden Formen erstellen können. Man hat es dir schon gesagt und erklärt es dir auch. Und Sie können direkt hier im Eigenschafteninspektor auf dieselben Einstellungen zugreifen. Aber was es auch tut, ist, dass Sie komplexe Formen mit dem mentalen erstellen können. Und wie es funktioniert, ist im Grunde haben Sie diese Ankerpunkte. Was auch immer Sie tun und wo immer Sie klicken, wie Sie sehen können, XD zeigt Ihnen Führungen, damit Ihre Linien gerade sein können. Zum Beispiel, wenn das etwas ist, das Sie wollen. Und sobald Sie das Teil schließen, indem Sie einfach auf die Stelle klicken, wo Sie aufgehört haben, wo Sie anfangen. Und auf der ersten ist eigentlich dein letzter, so dass du den Weg schließt. Was Sie tun können, ist tatsächlich schweben. Und wie Sie sehen können, gibt es Ihnen die Option, wenn Sie klicken, um weitere dieser zusätzlichen Ankerpunkte hinzuzufügen. So können Sie wirklich komplexe Formen aus diesen Grundformen erstellen. Wie Sie sehen können, haben wir nur mit dem einfachen Rechteck-Werkzeug begonnen und Sie können es direkt hier mit einem Bleistift verwenden. Sie können all diese zusätzlichen Funktionen zu Ihren Shapes hinzufügen. Also, wie kannst du das tun? Wo es zwei Möglichkeiten gibt, dies zu tun, können Sie einfach auf einen dieser Ankerpunkte klicken und diese erweitern. Und wie Sie sehen können, bewegt es sich auf eine Art lineare Art und Weise. Wie Sie sehen können, sind diese Linien wirklich gerade und Sie bekommen all diese geraden Winkel. Und wenn Sie die Umschalttaste gedrückt halten, während Sie es tun, wird es an der ursprünglichen Position gefangen, an der Sie aufgehört haben. Die andere Möglichkeit besteht darin, einfach auf diesen Ankerpunkt zu doppelklicken. Und jetzt, wenn Sie es erweitern, können Sie sehen, dass diese Linie jetzt gekrümmt ist. Und Sie können den Winkel dieser Krümmung ändern, indem einfach diese beiden Griffe verwenden, wenn wir etwas näher zoomen. Sobald Sie auf sie klicken, können Sie sehen, dass Sie jetzt alle diese verschiedenen komplexen Formen bekommen. Und wenn du hineingehst, wird es so an die ursprüngliche Position gehen. Und wenn Sie den ganzen Weg hinaus gehen, können Sie sehen, dass diese Krümmung immer größer und stärker wird. Sie können auch Shift verwenden, um verschiedene Winkel zu fangen, wie ein C hier. Je nachdem, welche Art von Form Sie möchten, können Sie auch die Umschalttaste aufrufen, während Sie sie ziehen, um sie gerade zu ziehen. Und Sie können auf all diese verschiedenen Einstellungen zugreifen, indem Sie einfach diese Ankerpunkte und diese Griffe verwenden. Wie gesagt, Sie können dies mit jedem von diesen tun. Und wenn Sie diesen Punkt löschen möchten, können Sie ihn einfach hier anklicken, um ihn zu löschen, und es wird diesen Punkt löschen. Jetzt sind wir nur noch mit einer davon übrig. Und Sie können sehen, dass diese beiden jetzt diese Griffe bekommen, so dass wir die Krümmung unserer Form verlängern und ihre Position ändern können , wie wir wollen. Wenn wir zurückgehen möchten, können Sie einfach auf diesen Punkt doppelklicken. Doppelklicken Sie auf diesen Punkt. Und Sie können sehen, dass wir jetzt eine gerade haben, aber wie früher. Also, das ist es im Grunde für das Pentaho. Aber lassen Sie mich jetzt vorgehen und Ihnen zeigen, wie wir einige komplexere und Schriftformen erstellen können. Nehmen wir also an, wir wollen diesen Teil unseres Berichts isolieren. Also, wie wir das tun können, ist einfach, lasst uns klicken, dann klicken und halten. Wie Sie sehen können, können Sie diesen Winkel ändern, wie Sie wollen. Und lassen Sie uns sagen, dass ich irgendwo hier klicken möchte. Dann kann ich nach draußen klicken und meine Form schließen. Nun, da ich bin, meine Form ist hier, Ich kann einfach dieses Verschiebungswerkzeug verwenden und einfach ausgewählt, oder Sie können es so auswählen. Einfach klicken und ziehen, um es auszuwählen. Und jetzt können Sie im Eigenschafteninspektor sehen, dass wir genau die gleichen Einstellungen wie bei allen anderen Grundformen haben. Aber jetzt können wir sie für diese komplexere Form zugreifen. Also, was wir tun können, ist, zum Beispiel, fügen Sie eine Füllfarbe. Lasst uns diese Farbe verwenden. Wir können die Grenze entfernen. Wir können zum Beispiel Schatten und alles, was ich Ihnen für all diese Grundformen gezeigt. Mc Jetzt haben wir diese komplexere Form. Und weil wir nur diesen Teil unseres Designs isoliert haben, wenn ich schwebe, können Sie ihn sehen und Sie können darauf zugreifen. Und wenn Sie ändern möchten, ist es, Doppelklick auf Ihre Form zu setzen. Es zeigt Ihnen alle Ihre Ankerpunkte und Sie können dann klicken und zum Beispiel diese Form ändern, um so etwas zu sein. Ich weiß nicht, vielleicht ist das etwas, nach dem Sie suchen , und Sie können sehen, wie das aussieht. Also, das ist Ihr Stift-Werkzeug auf den Punkt gebracht. Und wie Sie sehen können, können Sie auf alle diese grundlegenden Formen zugreifen, besonders auf diese. Und wenn Sie sich an das vorherige Video erinnern, können Sie es in der Eckanzahl ändern. Sie könnten den Eckenradius ändern und Sie können diese Tirade sie Verhältnis ändern , um auf alle diese verschiedenen Formen zuzugreifen. Aber wenn Sie etwas völlig benutzerdefinierte wollen, dann eine wirklich empfohlene Verwendung elterlich, weil, wie Sie gesehen haben, gibt es wirklich keine Grenze zu dem, was Sie erstellen können. Benutzer verwenden dieses Stiftwerkzeug, um beispielsweise Symbole innerhalb von Adobe XD zu erstellen . Sie verwenden es, um Illustrationen in Werkzeugen wie Illustrator zu erstellen. Sie verwenden es zum Beispiel, um verschiedene Formen in Photoshop auszuschneiden. So gibt es wirklich keine Grenzen Ihre Phantasie und Sie können tun, was Sie wollen mit dem Bleistift. Im nächsten Video werden wir nebenan erkunden. Also sehe ich dich dort. 9. Textwerkzeug: In diesem Video werden wir das Textwerkzeug erkunden, und hier ist es, und die Abkürzung ist t. Und bevor wir es tun, lassen Sie mich gehen und entfernen Sie diese mentale Form nur so dass wir ein wenig mehr Platz haben, mit dem wir arbeiten können. Und lassen Sie mich das hier zum Beispiel verschieben , nur damit ich diesen leeren Raum hier habe. So können Sie auf Ihr Textwerkzeug klicken. Außerdem gibt es zwei Möglichkeiten, Text in Adobe XD einzubinden. Zuallererst gibt es Punkte, Texte und was auch immer wir hier schreiben. So zum Beispiel, das ist unser Text. Und wenn Sie draußen klicken, wird es das vervollständigen. Das ist also unser Punkttext, und es gibt auch einen weiteren Text, der als Bereichstexte bezeichnet wird. Und um das einzubeziehen, müssen Sie den Bereich auswählen, in dem der Text angezeigt werden soll. Nehmen wir an, dass dies unser Bereich ist, sobald Sie mit der Eingabe beginnen. Das ist also unser Textbereich. Und wenn wir weiter unten tippen, wird es hier weitergehen. Und lassen Sie mich Ihnen das auch schnell zeigen. Wenn ich also das Steuerelement C auswähle, Steuerelement V, Kontrolle V, Kontrolle V. Und Sie können sehen, dass es in diesem Bereich umläuft, weil dies unser Textbereich ist. Aber wenn ich das mit diesem Text mache, und wenn ein Haufen Leertaste fehlt, können Sie sehen, dass es einfach richtig geht, richtig, richtig, richtig, richtig, richtig, richtig. Und nichts passiert wirklich. Was auch immer Ihre Gegend ist, Sie können Ihre Texte zeigen, um dort zu sein. Aber wenn Sie nur diesen Zeigertext verwenden, geht er dorthin, wo Sie ihn wollen. Also ist dieser Text wirklich nützlich für, sagen wir, Titel, Boden, sagen wir H1, H2, H3, und so weiter. Untertitel und Text, der nicht oder zumindest umhüllt nur ein wenig. Während dieser Text ist perfekt für Absätze und große Textbereiche, Beschreibungen Ihres Produkts, Produktmerkmale und so weiter. Also werde ich, ich würde wirklich empfehlen, dass Sie die Texte wie Dat verwenden, besonders im UI- und UX-Design, weil diese beiden Tools wirklich Hand in Hand miteinander gehen. Also würde ich euch wirklich empfehlen, sie zu überprüfen und sie selbst zu erforschen. Also lasst uns jetzt tief in das hier eintauchen. So können Sie viele der Eigenschaften hier im Eigenschafteninspektor für den Text ändern. Und die wichtigsten sind, dass Sie die Schriftart selbst auswählen können. Also, wenn Sie sich entscheiden, eine Schriftfamilie zu verwenden, zum Beispiel Open Science, die eine kostenlose Google-Schriftart ist, und Sie können kostenlos auf Adobe-Schriftarten als auch finden. Also wählte ich Offene Stände dafür. Und lassen Sie mich wählen Open steht auch dafür, so. Und jetzt können Sie sehen, wenn ich klicke, können Sie sehen, dass es geöffnet Sinn. Aber zum Beispiel möchte ich das ändern, um ein bisschen größer zu sein. Wählen wir also 26, zum Beispiel die Eingabetaste. Und Sie können sehen, dass jetzt die, gibt es eine Unterscheidung zwischen diesen beiden. Ich werde auch fett für diesen verwenden. So wie das hier. Je nachdem, welches Sie verwenden, haben Sie hier verschiedene Gewichte. Für einige Schriftarten haben Sie 12, vielleicht drei für einige Schriftarten wie diese, die Sie sehen, Sie haben eine Menge von ihnen aus Licht. Den ganzen Weg hinunter zu extra fett, kursiv. So können Sie sehen, wie das aussieht. Sie können auch Text kombinieren und es liegt wirklich an Ihnen und Ihrem Design. Aber ich empfehle generell nicht, mehr als zwei Schriftfamilien für Ihre Designs zu verwenden , da Ihr Design dann einfach zu zerstreut und zu verschieden aussah . Was wir auch hier haben, unseren Zeichenabstand. Dies ist also der Abstand zwischen jedem der Zeichen. Und wenn ich hier rechts klicke, und zum Beispiel, geben Sie Nein. Also lass uns mal sehen. Vielleicht kann ich in 50 schreiben. Sie können sehen, dass der Abstand zwischen den einzelnen Zeichen nur verschieden ist. Zeilenabstand ist im Grunde der Abstand zwischen jedem dieser Allianz von Texten. Das ist also deine Linie eins. Dies ist Ihre Zeile zu, wenn ich dort klicke und diese zu erhöhen und vielleicht, mal sehen, vielleicht kann ich 90 etwas Strom eingeben. Sie können sehen, wie das funktioniert. Und was das ist, ist Absatzabstand. Wenn ich zum Beispiel 50 nehme, kann man es nicht sehen, weil dies der Absatz mit nur zwei Textzeilen ist. Also muss ich wirklich mehr Textzeilen haben und dann wird es diesen Abstand zwischen jeder Textzeile verwenden. Was wir unten haben, ist Ausrichtungswerkzeuge. Nehmen wir zum Beispiel an, dass dies unser Kopfzeilentext ist. Also H eins, es ist derzeit links ausgerichtet und Sie können sehen, wie das aussieht. Wenn ich in der Mitte tippe, können Sie sehen, dass sich nichts ändert. Aber jetzt, wenn ich mit der Eingabe beginne, können Sie sehen, dass es von Mitte, links und rechts geht. Aber wenn wir links ausrichten wählen, können Sie sehen, dass es nach links angeheftet bleibt. Und auch wenn wir rechts ausgerichtet wählen, können Sie sehen, dass es nach rechts fixiert bleiben wird. So wie so. Schließlich lassen Sie mich es zurück zu hier ändern und lassen Sie mich klicken, halten Sie die Umschalttaste gedrückt und richten Sie sie hier aus. Was wir hier haben, sind Punkttexte und Gebietstexte, die ausfallen. Erklären Sie das. Das ist also unser Punkt x, das ist unser Bereichstext, aber Sie können das jederzeit ändern. So kann ich zum Beispiel diesen Bereich auswählen, hier klicken, und jetzt habe ich ihn in Punkttexte konvertiert. Es ist also genau das gleiche wie dieses und umgekehrt. Sie können das Gleiche für diesen tun. Sie müssen nur Ihren Bereich für Ihre Tags erweitern. Wie Sie sehen können, wird es verkleinert und auf diese beiden Textzeilen zurückgeschnitten. Aber ich kann natürlich überall dort, wo ich mehr Text eingeben möchte, ausgedehnt werden. Also, das ist es im Grunde dafür. Und im nächsten Teil sehen Sie Großbuchstaben. Wenn ich also hier klicke und auf Großbuchstaben klicke, konvertiert es alle meine Zeichen in Groß- oder Kleinbuchstaben, Titelschreibung. Der erste Buchstabe jedes Wortes ist also ein hochgestellter Titel. Sie können es also nicht wirklich hier sehen, aber lassen Sie mich zum Beispiel eine Nummer hinzufügen. Und jetzt hier hinzugefügt, können Sie sehen, dass es genau hier geht. Wir haben tiefgestellt, also wird es genau hier setzen. Wenn wir Belüftung auswählen und klicken Sie rechts hier, Sie können sehen, dass wir diese zugrunde liegen. Und schließlich haben wir auch durchgestrichen. So können Sie sehen, dass Sie viele verschiedene Optionen haben. Genau hier in Adobe XD. Es gibt nicht zukünftige Rich, zum Beispiel, wie die Anwendungen. Sehen wir uns das Wort zum Beispiel an. Weil Microsoft Word für die Eingabe von Anfang an entwickelt wurde, während Adobe XD für UI- und UX-Design von Anfang an entwickelt wurde. Daher haben Sie viele dieser Optionen, aber sie sind nicht wirklich reich an Zukunft, wie zum Beispiel Word oder Google Docs oder so etwas. Oder Adobe hat eine eigene Software für den Druck. Also sind sie nicht so ein Zukunftsvorteil. Aber Sie können viele dieser Optionen bekommen, wie Sie gerade unten gesehen haben, dass wir alle üblichen Dinge haben, wie wir es im Eigenschafteninspektor tun. Also haben wir Aussehen. Sie können die Fettleibigkeit senken oder erhöhen. Wir haben die Mischmodi, die ich Ihnen mit diesem Bild gezeigt habe. Wir haben die Füllfarbe, die die Füllfarbe für unseren Text ist. Wir haben auch die Rahmenfarbe. Lassen Sie uns also die Füllfarbe in etwas dunkler ändern , so dass sie zwischen diesen beiden unterscheidet. Wir haben die Wasserfarbe, so dass Sie Ihre Grenze hinzufügen können, wenn Sie möchten. Gehen wir mit etwas Extremem. Sie können sehen, wie das aussieht. Aber lassen Sie mich das rückgängig machen. Und Jaime Grenze. Sie haben den Schatten, so dass Sie Ihren Schatten zu Ihren Texten hinzufügen können, sagen wir, 55 und 20. Sie können sehen, wie das funktioniert. Und schließlich haben wir die Hintergrundunschärfe, so dass Sie ihre Funktion wie möglich in jedem dieser anderen Werkzeuge verwenden können. Also, das ist es im Grunde für den Text. Und Sie werden während dieses Kurses sehen, wie wir den Text verwenden werden, Javier wird ihn anpassen und wie wir ihn zum Beispiel in einigen von diesen verwenden werden . Also werden wir es in Scroll-Gruppen verwenden und wir werden es in Stacks verwenden und Ihnen auch zeigen, welche Stapel später im Kurs sind. Und Sie werden sehen, wie erstaunliche Todesfunktion in Adobe XD zu verwenden ist. Im nächsten Video werde ich durch unsere Boards ein wenig mehr laufen und zeigen Ihnen zusätzliche Funktionen, die Boards sind ein Osteoderm haben. 10. Kunstwerke: In Ordnung, also lassen Sie uns jetzt einige zusätzliche Funktionen durchlaufen, die Boards haben. So wie ich Ihnen bereits gezeigt habe, ist a das Schlüsselwort für an den Flughäfen, Sie können auch hier klicken. Und um einen anderen Flughafen hinzuzufügen, können Sie hier klicken. Nun, wenn ich mein Tool auswähle und ich werde hier klicken, um es zu ändern, zum Beispiel, nennen wir es nur Beispiel. Und wenn ich ausgewählt habe, können Sie sehen, dass wir verschiedene Funktionen genau hier haben. So können Sie es drehen, um eine Landschaft zu sein oder horizontal zu sein. Sie können die Größe ändern. Sagen wir also 400 mal 500. So können Sie alle diese zusätzlichen Funktionen hinzufügen, wie Sie können wenn Sie auf die Startseite klicken und gehen Sie auf die benutzerdefinierte Größe direkt hier. Also kannst du das alles hier machen. Sie können reaktionsschnelle Rezitationen durchführen, sobald Sie einen Flughafen erstellen. So können Sie beginnen, ansprechende Designs von Anfang an zu erstellen. Sie können Scrollen einschließen, also vertikal oder gar nicht. Oder wenn ich hier wechsle, können Sie sehen, dass es mir immer noch das Kitzeln der Welt gibt, weil ich dieses Kunstboard in diesem Seitenverhältnis erstellt habe . Also diese, die das Original ist. Und wenn ich das bis zu diesem erstelle, dann wird es mir den horizontalen Bildlauf geben und diese Fähigkeit, Ansichtsfensterhöhe ist diese. Wenn Sie sich also von den vorherigen Videos erinnern, wenn Sie dies erweitern, wie gesagt, ist dies die Fehlerlinie und alles über der Falte wird sofort sichtbar sein , während Benutzer nach unten scrollen müssen, um den Inhalt zu sehen was direkt unter dieser Fehlerlinie liegt. Das ist also im Grunde Ihre Höhe des Ansichtsfensters. Wenn ich verlängerte, können Sie sehen, dass es geht, es bleibt bei 812. Aber wie Sie jetzt sehen können, haben wir diese Leitung, die im Grunde die Fehlerleitung für das Telefon ist. Nehmen wir an, dass dies den Formularbildschirm hat und Benutzer nach unten scrollen müssen , um das Quantum unterhalb dieser Fehlerlinie zu sehen. Also im Grunde, Mobiltelefone haben es auch. Darunter haben wir Phil und im Grunde haben Sie diese Füllfarben wie für alle diese anderen Formen. So haben Sie Volltonfarbe, Sie haben einen linearen Farbverlauf und Sie helfen radialen Farbverlauf. Sie haben auch den Deckkraft Schieberegler und Sie können jede dieser Farben auswählen und auch den Hex-Code einschließen. Was sie nicht über die Farben erklärt haben, ist das. So können Sie verschiedene Farbfelder hinzufügen. Also lassen Sie uns sagen, dass ich diese Farbe wirklich mag. Ich kann darauf klicken. Ich kann hier klicken und es wird es zu meinem Farbfeld hinzufügen. Wenn ich hier zu meinem Säurenfeld gehe, können Sie sehen, dass es nicht da drin ist, sondern nur in meinem Farbfeld-Panel. Das ist zum Beispiel, wenn Sie einige dieser Objekte separat ändern möchten und Sie dieselben Farben verwenden, aber Sie möchten sie nicht zum Hören anwenden. Also, wenn ich möchte, kann ich einfach hier klicken und es wird dort gelten. Und wenn ich mit der rechten Maustaste klicke, lassen Sie mich alle meine Objekte auswählen. Klicken Sie hier. Und wenn ich zum Beispiel mit der rechten Maustaste klicke und gehe, um die Farbe hier zu bearbeiten und zu bearbeiten, können Sie sehen, dass sie in Echtzeit aktualisiert wird. Aber wenn ich hier und dann rechts hier klicke und meine Farbe ändere, wird es nur die Farbe dieses Objekts allein ändern. Also schließlich, was wir auch hier in unserem Flughafeneigentum Inspektor haben, ist das Netz. Und ich werde Ihnen das Raster direkt hier zeigen, weil dies die grundlegende Webseitengröße darstellt. Also, wenn ich rechts dort klicke, haben wir das Layout und wir haben Platz. Unter dem Layout sehen Sie also nichts, weil ich es auswählen muss. Aber wenn ich mein Quadrat auswähle, können Sie sehen, dass wir alle diese Quadrate haben und diese sind großartig, besonders wenn Sie Gittersysteme verwenden. So zum Beispiel, 8 Gittersystem oder ein 16-Punkt-Gittersystem oder so etwas, wo Sie tatsächlich diese quadratischen Größen haben. Wenn Sie also 8 verwenden, werden Sie offensichtlich die Größe von acht für jedes dieser Quadrate verwenden. Aber wenn wir ein Layout verwenden, können Sie sehen, dass wir jetzt das Säulendesign haben. So haben wir zum Beispiel 12 Spalten für dieses Design. Vielleicht wollen wir es auf acht ändern. Sie können sehen, dass wir jetzt acht Spalten haben. Dachrinnenbreite ist im Grunde dieser Abstand zwischen jeder Ihrer Spalten. Und ruhiger Witz ist offensichtlich die Breite jeder dieser Säulen. Jetzt können Sie alle diese Eigenschaften hier ändern, und dies sind Ihre Ränder. Also Ränder sind diese weißen Räume auf der linken und der rechten Seite. Also im Grunde dieser Raum zwischen den Rändern Ihres rpart und Ihrem Rasterlayout selbst und Ihren Spalten selbst. Und das kannst du auch hier ändern. So haben Sie unterschiedliche Ränder für den oberen, rechten, unteren und linken Rand. Also, wenn Sie alle von ihnen ändern wollen, genau hier, also links und rechts, können Sie das im Grunde tun, indem Sie einfach dies auswählen und 120 wählen, zum Beispiel. Aber wenn Adobe XD es nicht alleine berechnen kann, dann wird es Ihnen alle diese verschiedenen Eigenschaften hier geben. Aber Sie können auch tun, ist, zum Beispiel, erhöhen Sie die Rinnenbreite auf relative 40. Und Sie können sehen, dass wir jetzt viel mehr Platz zwischen all unseren Spalten haben. Spaltenbreite ist, mal sehen, 120, aber es wird die Rinnenbreite auf 18 senken. Sie müssen also wirklich mit all diesen verschiedenen Einstellungen herumspielen , um das perfekte Ergebnis zu erzielen, das Sie wollen. Und im Grunde, das ist es für diese sind Boards. Ich hoffe wirklich, Sie sehen, wie einfach es ist, mit ihnen zu arbeiten. Und eine letzte Sache, die ich nicht erwähnt ist, ob das zu störend ist, damit Sie arbeiten können. So können Sie sehen, dass all diese Elemente jetzt wirklich schön an unseren Rastern gefangen werden. So können Sie wirklich zählen und positionieren Sie sie, wo immer Sie wollen, auf Ihrer Seite. Wenn dies also wirklich ablenkend ist, können Sie Ihre RPL auswählen. Sie können hier klicken und Sie können die Deckkraft Ihres Rasters auf so etwas senken . So wird es immer noch schnappen, wie Sie all diese verschiedenen Positionen sehen können. Aber jetzt können Sie es einfach viel besser sehen. Sie können auch die Farbe ändern, wenn das etwas ist, das Sie wollen. So erhöht sich nur ein wenig, ändern Sie die Farbe auf rot und jetzt verringern Sie die Fettleibigkeit den ganzen Weg auf so etwas, so dass Sie es ein wenig besser sehen können. So können Sie wirklich mit all diesen verschiedenen Einstellungen herumspielen. Und Sie können in die Tiefe gehen, um etwas zu finden, das für Sie und Ihren gesamten Fehler funktionieren wird. 11. Richtlinien: Lassen Sie mich Ihnen jetzt noch ein Feature zeigen. Wir laden Guides auf. Und für sie, Ich werde vereinfachte Mann Rasterlayout sagte Position dies genau hier. Und Jungs befinden sich auf der Oberseite Ihres Flughafens sowie auf der linken Seite Ihrer Tastatur. Wenn Sie also direkt hier schweben, können Sie sehen, dass Sie eine Führung von hier und von hier aus extrudieren können. Also lassen Sie uns sagen, dass ich Guides oben und unten in meinem Bild einfügen möchte. So können Sie einfach, wie genau hier sind, klicken und positionieren Sie die Führung und es wird hier in Position einrasten. Und weil Sie das nicht von der Unterseite Ihres Flughafens aus tun können, müssen Sie es auch von der Oberseite tun. So können Sie das für oben, unten, links und rechts tun. Und warum dies nützlich ist, wenn zum Beispiel, in einem Bereich Ihres rpart, Ihre Positionierungsqualitäten Elemente. Also sagen wir oben links, oben rechts, was auch immer. Sie können diese Elemente so positionieren, dass sie an einem Gitter wie diesem gefangen werden. Und Sie können sie so positionieren, dass sie dort sind, wo Sie wollen. Und sie werden Ihren Führern gut zuschnappen. Wenn Sie also Hilfslinien verwenden möchten, können Sie, wenn Sie Gitter verwenden möchten, das auch tun. Und Guides sind auch nützlich. Zum Beispiel können wir dieses Rasterlayout für das vertikale Layout verwenden, aber wir haben nichts für den horizontalen Rhythmus unseres Designs. Also, um das zu tun, lassen Sie uns sagen, dass wir ein Unbekanntes haben wollen. Lass uns vielleicht 18 sehen. Oder lasst uns mit 60 gehen. Und wir wollen diesen vertikalen Rhythmus überall haben. Also wollen wir 60 hier haben, 60 hier, 60 hier. Wenn Sie diesen Abstand nicht zwischen jedem Ihrer Elemente messen möchten. So können Sie verschiedene Gitter zu 60606060 einschließen, nur um diesen horizontalen Rhythmus beizubehalten, wenn das etwas, das Sie wollen, es hängt wirklich von Ihnen ab und wie Sie mit Adobe XD entwerfen möchten. Aber wie gesagt, diese Gitter sind wirklich hilfreich und um sie aus dem Weg zu bringen und sie zu entfernen, klicken Sie einfach auf sie und ziehen Sie sie nach draußen, im Grunde so, wie Sie sie in. Dies sind also Ihre Raster in Adobe XD, und das sind auch Ihre Leitfäden in Adobe XD. Noch eine Sache. Wenn wir zum Beispiel sagen, dass ich das hier trocknen möchte. Sie wollen das in Guide to this kopieren, unsere Ports, so dass Kind Control C hier klicken, Control V drücken und lassen Sie mich die Größe meiner Form reduzieren. Nehmen wir an, dass ich diesen Leitfaden kopieren möchte. Rechtsklick. Du kannst zu Guides gehen, Typen kopieren. Klicken Sie hier rechts, klicken Sie mit der rechten Maustaste auf Hilfslinien, beenden Sie die Dies wird offensichtlich am besten funktionieren, wenn Sie sind, Flughäfen sind genau die gleiche Größe. Also lassen Sie uns sagen, dass Sie verwenden, dies ist die Homepage und vielleicht haben wir Blog über Dienstleistungen Preisgestaltung und so weiter. Und all diese Seiten haben genau die gleichen Abmessungen. Also diese Anleitung, sobald Sie es kopieren und zum nächsten Mal einfügen, wird es an genau der gleichen Stelle basieren, wo es genau hier ist. Das ist also wirklich nützlich, wenn Sie zum Beispiel einige Dinge nach links, rechts, in die Mitte dessen ausrichten möchten, was Sie mit diesen Kindern machen möchten. Diese Option ist äußerst hilfreich, N extrem leistungsstark. 12. Raster wiederholen: Lassen Sie uns nun ein wenig tiefer in das Wiederholungsraster eingraben, weil die Funktion selbst wirklich wichtig und extrem leistungsfähig ist. Also lasst uns hier klicken und diese löschen. Und lassen Sie uns von hier aus ein schnelles Layout erstellen. Also zwei geschwenkt nach links und rechts. Ich benutze nur meine Leertaste und meinen linken Mausklick. So zum Beispiel bei Nukleat-Bild, werde ich in der Mitte positionieren. Ich werde die Grenze entfernen und nur um sie hier legal zu sehen. Dann werde ich mein Tiki für meinen Text drücken und etwas anklicken. Zum Beispiel, wie Reiter Nummer eins. Nennen wir es so, dass offen steht, aber es ist immer noch 26. Lasst uns so etwas wie 80 benutzen. Und ich werde es positionieren. Hollering kann die Taste verschieben, und ich werde 20. So, drücken Sie die Kontrolle D noch einmal. Schiff 12, und ich werde 14 für diesen hier verwenden. Statt mutig, werde ich mit regelmäßigen gehen. Stellen Sie also sicher, dass wir überall 20 anstelle von Punkttext sind, werden wir Bereichstexte verwenden und so bis zu den Rändern meines Bildes ausgedehnt werden. Und ich werde auch weitermachen und mein Plug-in verwenden. Also werde ich das gleiche Plugin verwenden, wie ich es dir gezeigt habe. Also Lorem Ipsum, also wenn Sie es installieren möchten, klicken Sie rechts hier, geben Sie lorem ipsum ein, installieren Sie es und klicken Sie dann auf fühlen, ersetzen Sie den ganzen Text. Ich werde das hier benutzen, aber du kannst benutzen, was auch immer du willst. Klicken Sie auf Text einfügen und es wird direkt hier eingefügt. Lassen Sie uns zum Beispiel drei Textzeilen wie folgt haben . Und Sie können all dies auch nach unten erweitern und dann die Größe Ihres Bereichs für Ihre Texte reduzieren. Und natürlich lassen Sie uns die Farbe ändern, so dass Sie diese Farbe verwenden können, nur um sie ein bisschen heller zu sein. Und anstelle von regulären, können Sie auch Licht verwenden, wenn das etwas ist, das Sie wollen und wenn das Sie anspricht. Nun für die Bilder, ich mag es nicht, dass das so ist. Vielleicht kann ich zehn benutzen, wenn das zu viel ist, vielleicht eine Fünf, nur um einen Eckenradius zu erhöhen. Jetzt, um Wiederholungsraster zu verwenden, wählen Sie einfach alle Ihre Elemente, drücken Sie Wiederholungsraster. Und was Sie tun können, ist einfach erweitern Sie dies nach unten und Sie können sehen wie mächtig und wichtig Wiederholungsraster ist. Nun, um Ihnen das noch mehr zu zeigen, habe ich einige dieser Bilder hier. Also werde ich ihn in mein Design ziehen und fallen lassen. Also ziehen Sie ihn einfach per Drag & Drop auf den ersten. Also nur die erste und lassen Sie los. Und Sie können sehen, wie das funktioniert, so ist es extrem einfach, extrem leistungsstark zu tun. Was ich also auch tun kann, ist mein Textdokument zu erstellen, und ich kann einfach ein Textdokument verwenden, das nur ein einfaches Dokument ist. Sie können sehen, dass ich Notizblock hier verwende. Anstatt Ryder auf einem oder auf drei zu schreiben, können wir es vielleicht eine Anomalie nennen, James May, Tyler. Und zum Beispiel, nennen wir das eine Wahl der Moral oder was auch immer. Und das kannst du schließen. Und ähnlich in Drag & Drop diesen Dokumentnamen auf den Text selbst. Und Sie können sehen, dass es mit Text füllt. Dies ist also extrem wichtig und leistungsstark, wenn wir zu reichen Daten in Ihre Entwürfe bekommen wollen. So können Sie wirklich spielen, wie dieser ganze Text aussehen wird. Offensichtlich können Sie das Gleiche für all diese tun. Also statt nur dieses einfache alte grundlegende Lorem ipsum, lassen Sie uns sagen, Sie können einige echte Texte wie zum Beispiel, Sie haben den Mann ein altes Portfolio, oder in echten Informationen über all diese Menschen. Sie können diese Informationen kopieren und einfügen, um diese umfangreichen Designs zu erstellen. Wieder einmal würden wir Gitter wiederholen. Was wir tun können, ist, wenn wir den ersten ändern. Also lassen Sie uns sagen, dass wir einen Schatten hinzufügen möchten. Sie können sehen, dass es das gleiche Schloss zu all diesen anderen hinzufügen wird, solide, sagen 5515. Und wenn ich draußen klicke, können Sie sehen, dass es genau hier schneidet, aber ich verlängere es hier. Wir haben diese hübschen im großen Schatten. So können wir auch tun, ist die Farbe zu ändern. Also lassen Sie uns sagen, klicken Sie hier, klicken Sie auf mein Farbfeld. Sie können sehen, dass es Bereich in Echtzeit aktualisiert. Und das ist es im Grunde. Was auch immer Sie mit Ihrem Wiederholungsraster machen möchten. Denken Sie daran, dass Sie den ersten bearbeiten. Sie können die zweite nicht hinzufügen. Also, wenn ich dieses Bild neu positionieren möchte, kann ich einfach doppelklicken und hier neu positionieren. Ich kann dies auch mit diesem ersten Bild tun, solide C hier. Und dieses letzte Bild könnte irgendwo hier sein. So können Sie sehen, dass Sie alle diese Details unabhängig voneinander ändern können. Schließlich, wenn Sie die Größe zwischen Ihren Elementen im europäischen Griff erhöhen möchten, einfach schneller wiederholen Raster, schweben und dann können Sie erweitern, wo alle diese Elemente und gehen. Und zum Beispiel, wenn Sie eine Vorschau sehen möchten, wie diese App aussehen wird, können Sie hier klicken, wo es Desktop-Vorschau sagt. Und Sie können auch Mobile Preview über USB-Kabel tun. Wenn Sie die Adobe XD-App auf Ihrem iPhone oder auf Ihrem Android-Gerät installieren. Sie können das auch tun, nur um zu sehen, ob Sie, zum Beispiel, Design für das iPhone zehn und Sie haben iPhone zehn in Hand und umgekehrt mit all diesen verschiedenen Android-Größen. So können Sie eine Live-Vorschau wagen und direkt sehen, wie es aussehen wird , wenn es innerhalb Ihres Mobilgeräts codiert und fertig ist. Aber wenn Sie nur eine Vorschau für das Web möchten, können Sie hier klicken. Dieses zusätzliche Fenster wird angezeigt. Und wenn ich nach unten scrolle, können Sie sehen, wie das aussieht. Aber wie Sie sehen können, weil wir dies zu ermöglichen scrollbaren Bereich sein müssen. Also, wenn ich rechts dort klicke, verwenden, können Sie sehen, dass wir feste Position haben whens kriechen, aber ich muss mein Board erweitern, um scrollen zu können. Also, wenn ich es weiter ausdehne, können Sie sehen, dass dieses Wiederholungsraster uns eine Lesung zeigt, aber ich möchte nur diese drei sehen. Also 123. Und Sie können natürlich so viele haben, wie Sie wollen, aber ich werde mich nur hier erstrecken. Und jetzt, wenn wir auf meine Vorschau klicken, kann ich nach unten scrollen, um zu sehen, was ich sehen möchte. So können Sie sehen, dass ich meinen Flughafen bis hierher erweitert habe und das ist mein scrollbarer Bereich. Wenn wir es den ganzen Weg nach unten erweitern wollen, fügen Sie weitere Elemente hinzu. Und dann werde ich in der Lage sein, weiter nach unten zu scrollen und all diese zusätzlichen Informationen zu sehen. Also, das ist es im Grunde für Ihr Wiederholungsraster. Wenn Sie die Gruppierung des Rasters aufheben möchten, können Sie dies auch tun. Gehen Sie zurück zu einem Ebenenbedienfeld. Sie können sehen, dass wir jetzt drei Gruppen haben. Das ist also die erste Gruppe, das ist die zweite, das ist die dritte. Und ich bestelle sie gerne so, also mag ich nicht anders herum. Und innerhalb Ihrer Gruppe können Sie sehen, dass Sie all diese verschiedenen Elemente und all diese verschiedenen Design-Dinge haben , die Sie in Ihre Designs aufgenommen haben. So ist es wirklich einfach, damit zu arbeiten. Es macht wirklich Spaß. Und sobald Sie sich daran gewöhnt haben, wird es äußerst hilfreich sein, verteilte Grid-Funktion in Ihrem Entwurfsprozess zu haben. 13. Designprozess Übersicht: In Ordnung, jetzt, da Sie mit Adobe XD vertraut sind, jetzt, wo Sie wissen, was die Tools tun können, lassen Sie mich Ihnen schnell das Projekt vorstellen, an dem wir arbeiten werden, um Partituren herbeizuführen aus denen Sie all diese fortschrittliche Techniken, die Adobe XD zu bieten hat. Also zuerst, wir werden mit dem Designbrief beginnen. Und ich empfehle meinen Schülern und allen Leuten, die mich fragen, wo ich mit dem Projekt anfangen soll. Es ist immer die Designbeschreibung. Denn aus dem Entwurfsbrief können Sie immer verstehen, was der Kunde will, was das Budget ist, was die Zeitachse ist. Machst du das Redesign? Machst du die komplette Überholung? Machst du die Arbeit von Grund auf, was du tatsächlich an diesem Projekt machst. Daher empfehle ich Studenten und Menschen, die im Design interessant sind, immer mit dem Designbrief zu beginnen, denn das ist meiner Meinung nach das Fundament eines jeden Projekts. Und Design Brief kann im Grunde machen oder brechen das Projekt. Denn wenn Sie nicht mit der hochwertigen Designbeschreibung beginnen, die Sie selbst machen müssen, dann kann das ganze Projekt sofort auseinanderfallen, im Grunde, weil der Kunde dann nach einigen Änderungen fragen kann , die nicht in der Entwurfsbeschreibung vereinbart. Sie können nach einigen Dingen fragen, mit denen Sie nicht vertraut sind. Also müssen Sie einige andere Leute erhöhen, um Ihnen dabei zu helfen, weil Sie nicht wissen, wie Sie mit diesen Problemen umgehen sollen und Sie nicht wissen, wie Sie sie beheben können. So ist Design kurz, wie gesagt, wesentlich für jedes Design-Projekt. Als Nächstes gehen wir zu Papier-Drahtmodellen. Jetzt können Sie Wireframes direkt in Adobe XD ausführen, was wir auch tun werden. Aber ich mag es, mit dem Papier-Drahtmodell zu beginnen weil es mir die Freiheit gibt, nur Stift und Papier zu verwenden. Und jeder hat Stift und Papier in seinem Haus herumliegen. Also im Grunde können Sie mit nur Stift und Papier beginnen und Sie können diese Wireframes von Grund auf neu erstellen. Nach dem Papier von Wireframes kommt der Wireframing-Prozess in Adobe XD. Im Grunde genommen werden wir diese Wireframes nehmen und sie in Adobe XD einbauen. Und dann werden wir anfangen, indem wir einfach in Adobe XD neu erstellen, was sich auf einem Stück Papier zurückzieht. Noch einmal, wenn Sie denken, dass dieser Schritt unnötig ist, fordere ich Sie wirklich auf, den gesamten Prozess zu beobachten und nur den denkenden Teil hinter den Papier-Drahtgittern zu sehen. Denn wie gesagt, es ist viel einfacher, diese Wireframes nur auf einem Stück Papier zu erstellen. Sie können leicht jedes Verbot verwenden, jedes Papier, das Sie wollen, oder Sie haben vielleicht Kanten, bekommen einige Ideen aus dem Kopf nach unten auf ein Stück Papier. Und wenn Sie einmal in Adobe XD sind, können Sie zum Beispiel Türen, Drahtgitterrahmen nur ein wenig vollständiger machen , nur ein bisschen polierter und fertig. Dann können Sie diese Wireframes dem Client präsentieren, was ich natürlich empfehle, da Adobe XD über diese großartigen Freigabeoptionen und Funktionalitäten verfügt . So kann Ihr Kunde Feedback direkt auf diese Wireframes hinterlassen , bevor er mit dem Entwurfsprozess übergeht. In-dazwischen zu wollen, ist im Grunde, wir werden die Website-Architektur zu tun. Wir werden nur einige grundlegende Seiten auflisten und wir werden verlinken und sehen überprüft diese Seiten auf unserer Website gehen. Also im Grunde, wenn die Leute auf die Homepage klicken, gibt es auf der Homepage. Wohin können sie von dort und von dort an gehen, wenn sie auf zusätzliche Seiten klicken, zum Beispiel über uns Seite, wo nimmt diese Seite sie auf? Wo müssen sie klicken, um zur Startseite zurückzukehren, um zu den Produktseiten zurückzukehren und so weiter. Das ist also, wo Website-Architektur wichtig ist, und wir werden das zwischen all diesen Wireframes tun. Also im Grunde werden wir Papier-Drahtmodelle fertigstellen. Wir werden das Papier in Adobe XD scannen und bringen. Wenn Sie keinen Scanner haben, ist das auch in Ordnung. Sie können einfach Ihr Telefon verwenden, um Bilder zu schnappen wenn Sie diese Wireframes innerhalb von Adobe XD haben möchten. Dies ist nicht notwendig, weil Sie diese Wireframes auf einem Stück Papier zeichnen. So können Sie immer nur auf das Stück Papier schauen und sehen, wo sich diese Elemente befinden, wo Sie einige Änderungen vornehmen müssen, wie Sie alles strukturiert haben. Denn denken Sie daran, dass Sie diese Wireframes auf, sagen wir Montag und dann nächsten Montag, EUR mit dem Start des Projekts in Adobe XD. Es gibt also eine Chance und Möglichkeit, dass Sie einige Dinge von diesem besten Montag vergessen werden. Deshalb ist es wichtig, sie zur Hand zu haben. Ich werde sie scannen und sie in Adobe XD bringen , damit wir sie gemeinsam betrachten und sehen können , was wir auf einem Stück Papier skizziert haben und was wir als nächstes in Adobe XD einbringen wollen. Sobald wir das Papier-Wireframing abgeschlossen haben, nachdem wir die Website-Architektur abgeschlossen haben, nachdem wir die Wireframes in Adobe XD fertiggestellt haben und das Projekt noch vollständiger machen. Dann gehen wir zu den Entwurfsphasen. Innerhalb der Designphasen werden wir Farbe einbeziehen. Wir werden von Lorem ipsum Text auf einen realistischen Text umstellen , den uns der Texter von dieser Firma mitgebracht hat. Und wenn sie den Texter nicht zur Hand haben, können Sie der Texter sein. Sie können eine Kopie für sie schreiben. Wenn Sie eine qualifizierte, unqualifizierte Bearbeitung sind, wenn nicht, können Sie diese an jemand anderen auslagern. So kann jemand anderes Recht haben, für die Website für Sie zu kopieren und Sie können sie schlagen. Wenn nicht, können Sie einfach den Lorem ipsum wagen lassen. Und mit der Co-Editing-Funktion von Adobe XD können Sie den Link zur Codebearbeitung freigeben und dann kann der Client den Text hinein bringen. Oder wenn sie den Text intern fertig gestellt haben, können sie Ihnen die Texte zusenden. Wir sind nur eine normale Textdatei, PDF, E-Mail, was auch immer sie wollen. Und Sie können dann diesen Text in Adobe XD-Datei bringen und ihn in Ihr Design bringen. Sobald wir mit dem Design beginnen, sobald wir alle diese Details reinbringen, sobald wir anfangen, Dinge hier und da zu polieren, werden wir auch mit der Animation, Mikrotransaktionen, großen Übergängen und so weiter beginnen . Animationen sind also wirklich das wichtige Merkmal von Adobe XD eines modernen Projekts. Denn wenn Sie nur statisches Bild mit Ihrem Client teilen, verstehen sie möglicherweise nicht, wohin diese Seiten führen. Wenn ich hier klicke, was passiert, wenn ich dort klicke, wohin soll ich mich bringen? So sind Animationen wirklich wichtiger und wichtiger Faktor von Adobe XD, sowie mit dem UI- und UX-Prozess von heute. Da Adobe XD all diese großartigen Funktionen integriert hat, werden wir sie gemeinsam untersuchen. Wir werden verschiedene Seiten verlinken. Wir werden Komponenten erstellen. Wir werden die Zustände der Komponente erstellen. Wenn die Leute hier geklickt haben, wenn die Leute dort schwebten, was wird passieren? Also werde ich Ihnen das alles zeigen, wenn wir mit diesem Projekt los sind. Endlich werden wir mit dem Kunden fertig sein. Sobald wir das endgültige Ziel erreicht haben, werden wir alle diese, alle diese Dateien so verpacken , dass es für Entwickler leicht sein wird, auf sie zuzugreifen, wird es leicht für Entwickler sein, sie später zu verwenden im Code. Und schließlich wird es einfach und blickbar für den Kunden sein, einfach schnell zu überprüfen und zu sehen, ob sie zusätzliche Revisionen haben. Wenn sie zusätzliche Anforderungen oder Änderungen haben , die sie für dieses bestimmte Projekt haben. Deshalb ist die Dateistruktur wirklich der Schlüssel. Gegen Ende des Projekts werde ich Sie durch all diese Phasen führen. Und ich hoffe wirklich, dass du den Diskurs mögen und genießen wirst. Und was noch wichtiger ist, dass Sie etwas lernen, das Sie vorher nicht wussten. Oder wenn Sie das getan haben, haben Sie während dieses Kurses Ihre Designfähigkeiten und Kenntnisse erhöht. Also freue ich mich sehr darauf, Sie in diesem Kurs zu sehen. Und wie gesagt, die erste Stufe dieses Kurses ist nur, um Ihnen die Designbeschreibung zu zeigen. Ich werde mit Ihnen einige Vorlagen teilen, die Sie für Ihre eigene Designbeschreibung verwenden können und wird viel einfacher für Sie sein, dies mit Ihren eigenen Kunden zu tun. Also sehe ich dich dort. 14. Unser Designbrief: In diesem Video werden wir weitermachen, wo wir im vorherigen aufgehört haben. Und ich werde über den Designbrief sprechen. Ich werde Ihnen auch diesen Designbrief für dieses spezielle Projekt und Diskurs zeigen. Aber Sie werden in der Lage sein, diese Vorlage für Ihre eigenen Projekte groß und klein zu verwenden, denn ich gebe Ihnen eine leere, leere Vorlage genau wie diese, um sie mit Ihren eigenen Informationen auszufüllen und sie für zukünftige Projekte zu verwenden. Also, um zu beginnen, was wir hier haben, wie Sie in Adobe XD sehen können, unsere kurzen Essentials und unsere kurzen, kurzen Essentials sind im Grunde das, was es sagt. Es ist das, was Sie für diesen Designbrief fühlen müssen. Und unser Brief ist im Grunde unser Designbrief für dieses Projekt. Und ich habe ein paar Informationen absichtlich hinterlassen. Ich werde es Ihnen zeigen, nur weil Sie verstehen können was wir in diesem Projekt verwenden müssen. Lassen Sie mich also auf kurze Wesentliche hineinzoomen, die etwas mehr sind. Also, was wir hier haben, ist das Firmenprofil und ich habe bereits alle diese Informationen aufgeschrieben, die Sie im Detail lesen können. Aber im Grunde, was wir unter diesem Firmenprofil brauchen, ist das, was das Unternehmen ist, in welcher Branche ist es? Welche Produkte hat es Dienstleistungen zu bieten? Und jemand Alleinstellungsmerkmal, das ist im Grunde erniedrigend wichtige Funktion, die Sie verwenden werden, um Ihre Website und Ihr Design herum zu gestalten. Was unterscheidet sie also von ihrer Konkurrenz? Sie werden das folgen, sobald Sie beginnen, wichtige Stakeholder und Menschen zu entwerfen , mit denen Sie in dieser Organisation zu tun haben. Wenn es zum Beispiel ist, wenn es sich um ein kleines Unternehmen handelt, werden Sie normalerweise mit dem Gründer, mit dem CEO umgehen. Wenn es ein großes Geschäft ist, dann werden Sie in der Regel mit einem Manager oder einem sogar Art Director sprechen , zum Beispiel, wenn Sie die Design-Abteilung haben und so weiter, eine Liste von direkten und indirekten Konkurrenten, so dass Sie können Sie sich inspirieren lassen und sehen, was die anderen Akteure in dieser Branche tun. So können Sie wissen, was die folgenden, was zu vermeiden, aber im Grunde nicht kopieren. Sie werden ein Alleinstellungsmerkmal für eine Schulden verwenden, aber Sie werden sich einfach über die Konkurrenz informieren, was sie tun, was sie nicht tun. So können Sie wissen, was Sie folgen müssen und was nicht. Darunter haben wir Projekt oder real. Also im Grunde ist dies, wo Sie eine detaillierte Beschreibung des Projekts erstellen, hat so viel Kontext wie möglich. Versuchen Sie, Ihren Kunden zu fragen, was er tut was sie tun und was bauen Sie etwas Neues? Audio, das etwas von Grund auf neu gestaltet? Oder entwerfen Sie etwas, das sie bereits haben? Dies ist natürlich wichtig, denn wenn Sie mit etwas von Grund auf zu tun haben, dann haben Sie eine viel größere Freiheit, um Ihr Konzept zu entwickeln, Ihre Ideen in dieses Produkt. Aber wenn sie bereits etwas haben, und dann müssen Sie einige Richtlinien und einige Schlüsselprinzipien befolgen , die sie bereits vorhanden haben. Aber Sie müssen auf der Oberseite der Schulden neu gestalten, was offensichtlich viel schwieriger ist, und Zahnarzt wird von Grund auf neu gestartet. Als nächstes haben wir die WIP, versuchen Sie, die Probleme zu identifizieren, die sie haben. Wenn Sie die Probleme verstehen, werden Sie die Lösung leichter finden, sortieren, was sind ihre Probleme? Offensichtlich wollen sie neu gestalten oder sie wollen das Design von Grund auf vervollständigen, aber welche Probleme Sie mit Ihren Entwürfen lösen. Im Grunde geht es bei Design darum, Probleme zu lösen. Benutzererfahrung ist die Lösung von Problemen, die Benutzer haben könnten, wenn sie sich auf der Website befinden, sobald sie sich in der App befinden. Welche Probleme löst dieses Design? Es gibt keinen Sinn, dass Design nur hübsch aussieht. Es muss konkrete Probleme lösen. Deshalb müssen Sie sich und Ihre Kunden fragen, welchen Problemen Sie konfrontiert sind. Ist es eine Absprungrate? Ist es unordentliche Navigation? Verlassen die Leute Ihre Website zu früh? Ist es ein reaktionsfähiges Design? All dies sind verschiedene Probleme, die Sie mit Ihrem Design zu lösen versuchen. Also wieder sieht er hübsch aus, muss hübsch und überzeugend für das Auge aussehen, aber Sie müssen bestimmte Probleme lösen. Ich werde das teilen, wenn wir zur Art Design Brief übergehen. Als nächstes haben wir Ziele und Ziele. Ziele spiegeln also den Ursprungszweck Ihres Projekts und Zielbeispiel ist, dass der Kunde mehr Traffic auf ihren Websites wünscht, über die ich kurz zuvor gesprochen habe. Objective Beispiel, wird die Menge der wöchentlichen Sitzungen um 20% nach Schulden spezifischen Datum erhöht . So können Sie sehen, wie Ziele und Ziele unterschiedlich sind, aber sie sind der Schlüssel zu diesem Projekt und Design Brief. Indem Sie Ziele und Ziele im Voraus festlegen, sind Sie nicht nur geeignet, fundiertere Entscheidungen rund um Ihr Design zu treffen, sondern Sie sind auch besser bewaffnet, um Ihren Wert und Wert gegenüber dem Kunden außerhalb der visuellen Ästhetik ihrer Website, im Grunde sagt alles. Ziele und Ziele sind äußerst wichtig und Sie müssen wissen, welche Ziele Sie verfolgen müssen, in welchen Zielen Sie folgen müssen, um diesen Kunden zu erreichen. Als nächstes haben wir Zielgruppe. Also, für wen entwerfen Sie? Denn wie Sie vielleicht wissen, sind die Menschen anders, aber sie sind derselbe Daron, eine Kreatur der Gewohnheit. Also im Grunde verschiedene Menschen in verschiedenen Altersgruppen, Männer und Frauen. Menschen aus den USA, Menschen aus Europa, Menschen aus Indien, Menschen aus China. Sie sind im Grunde alle gleich, aber sie sind anders. Sie müssen also diese Differenzierungen für Sie und für dieses spezielle Projekt funktionieren lassen. Nehmen wir also an, sie sind im Alter von 20 bis 35 Jahren, zum Beispiel mögen diese Menschen nicht die gleichen Dinge, die Menschen in der Altersgruppe von 45 bis 65 Jahren mögen. Auch jüngere Menschen gleichermaßen, um Technologie mehr ältere Menschen zu nutzen, nicht. Jüngere Menschen halten gerne mit den Trends Schritt. Ältere Menschen nicht. Also bekommst du mein Foto hier. Als Nächstes. Geschlecht, männliche und weibliche Geschlechter mögen normalerweise nicht die gleichen Dinge. Sie müssen also mit diesem Gedanken entwerfen. Wenn Sie nur für Frauen entwerfen, müssen Sie möglicherweise bestimmte Farben machen. Möglicherweise müssen Sie bestimmte Topografie verwenden, denn noch einmal, was ist Ihr Ziel? Was ist Ihr Ziel? Also müssen Sie diese für Sie und für diese bestimmte Alters- und Geschlechtergruppen arbeiten lassen. Land der Resonanz. Offensichtlich ist dies wichtig, weil verschiedene Länder unterschiedliche Bräuche haben, verschiedene Menschen mögen verschiedene Dinge und so weiter. Also müssen wir für Schulden im Hinterkopf entwerfen. Sie könnten vielleicht brauchen, vielleicht leben Sie in Indien, aber die Menschen in den USA mögen vielleicht andere Dinge als in Ihrem Land. Also musst du das im Hinterkopf behalten. Arbeitsplatz, wo sie arbeiten, um die Arbeit in großen Organisationen, tun die Arbeit in kleinen Teams und so weiter. Medienkonsumgewohnheiten. Dies ist natürlich wichtig für das Design, aber wichtiger für Social Media und für Marketing-Teams. Aber du könntest auch damit entwerfen. Also, wenn Leute Videos mehr mögen, können Sie vielleicht Videos in Ihr Design aufnehmen, weil sie offensichtlich Videos mehr mögen, wenn sie nicht gerne lesen, aber wie Videos verwenden einfacher diesen Text, der in Video umgewandelt wird. Sie werden das nicht offensichtlich tun, aber Leute aus dem Team und vom Kunden haben gemacht und tun das für Sie. Wenn Sie gut mit Videobearbeitung sind, dann gut. Aber in diesem Beispiel lesen die Leute nicht gerne. Sie sehen gerne Videos an, also gib ihnen, was sie wollen. Im Grunde. Schließlich haben wir David tägliche Gewohnheiten wie Reisen, Essen unsere Geselligkeit und so weiter. natürlich wichtig ist, wenn die Leute diese Website besuchen, wenn sie sie benutzen werden, sind die Kreaturen der Gewohnheit und ich werde sie auf einer täglichen Basis verwenden, zum Beispiel in den Abend, um Mitternacht, 12 Uhr, 12:00 Uhr Also müssen Sie im Grunde diese Menschen interviewt und erfahren Sie über ihre täglichen Gewohnheiten. Darunter haben wir Anforderungen entworfen. Das ist also offensichtlich für Entwickler, was Entwickler von Ihnen fragen, was sie von Ihnen wollen. So Säuredimension, Fehlerauflösung, für welche Auflösung Sie entwerfen. Wenn es sich um eine Website für die Auflösung und Resolutionen. Wenn Sie für Tablets Leistung für welche Formulare entwerfen, welche Größen. Offensichtlich werden Sie Entwickler all diese Fragen stellen. Wenn Entwickler zu Ihnen zurückkommen, dann können Sie wissen, zu entwerfen, tun Sie dies nie zuvor. Sie fragen Entwickler, weil Sie wissen müssen, welche Größen sie später in Cote unterstützen werden, Wenn ich Kunden frage, das hat mich nur blind gesehen und dann breche ich es im Grunde für sie auf Wenn ich Kunden frage, das hat mich nur . Und ich fragte sie, ob Ihre Benutzer dieses Produkt auf großen Geräten verwenden werden, zum Beispiel Smart-TVs und sagen wir, 15 Desktop-Computer. Sie sagten „Nein“. Okay, also wird es zum Beispiel auf unserem Full-HD-Bildschirm verwenden? Also 1920 von 1080 und sie sagen ja, okay, werden sie dieses Produkt auf einem Laptop verwenden? Ja. Werden sie dies vielleicht auf einer Tablette verwenden, aber nicht eine große Menge. Werden sie es auf einem Telefon benutzen? Ja. So, jetzt haben Sie vier Größen und haben Sie können entwerfen, für die Sie zuvor nicht n. Sie haben dies getan, bevor Sie sogar aktivieren Sie Adobe X, Z und beginnen zu entwerfen. Das ist also wirklich, wirklich wichtig zu verstehen, bevor du losgehst. Auch für die Dateiformate müssen Sie wissen, welche Dateiformate Entwickler unterstützen werden, da verschiedene Dateiformate für verschiedene Personen geeignet und verschiedene Entwickler auf unterschiedliche Weise arbeiten. Also müssen Sie im Grunde wissen, was sie verwenden werden, was sie nicht verwenden werden, um zu verstehen, wie Sie Ihre Arbeit strukturieren werden. Denn wenn sie zum Beispiel mit B- und G-Symbolen arbeiten und sie senden europäische Jacobs, Let's it, Sie können PNG-Icons nicht mehr ändern, weil im Grunde nur JPEG-Bilder ohne Hintergrund sind. Vielleicht möchten Sie mit ihnen über die Arbeit in SVG sprechen , da SVG keine Qualität verliert, es viel einfacher ist zu exportieren und es ist viel einfacher, mit Zitat zu arbeiten. Also all diese Dinge, die du sie fragen musst, bevor du wirklich losgehst. Wir haben Bild-Assets aufgenommen werden, Farbpaletten und zugehörige Kopierdokumente. So. Haben all diese Dinge, oder haben sie nicht all diese Dinge? Weil Schulden im Grunde mehr Arbeit für Sie bedeutet, und das bedeutet im Grunde eine Erhöhung des Preises für sie. Sie müssen also all diese Fragen stellen, bevor Sie überhaupt losgehen. Und bevor Sie den Preis strukturiert haben, über den Preis zu sprechen, hatten wir das Budget und den Zeitplan. Also im Grunde, wie ihr Budget aussieht, wie sie es kaputt gemacht haben, wie man es kaputt macht? Ich lade sie alle im Voraus, 50% jetzt, 50% am Ende, sind Sie in Etappen und so weiter, und auch Zeitplan für das Projekt. Wie lange wird dieses Projekt dauern? Also, jetzt lassen Sie mich Ihnen schnell unseren Brief zeigen. So haben wir eine neue Bank Website Design. Dies ist der Name der Firma. Dies ist ein fiktives Unternehmen, aber ich stütze all diese Projekterfahrung aus der bisherigen Erfahrung , weil ich vorher für echte Banken gearbeitet habe, für ihre Website- und App-Designs. Also hier haben wir neue Band Corporation ist der Name des Kunden. sechste Juni 2021 ist das Datum, an dem dieses Projekt abgeschlossen werden muss. Firmenprofil Salz. Lassen Sie uns keine Zeit verschwenden, die Sie in diese Datei springen können, weil ich Ihnen diese Datei gebe und Sie alles darüber lesen können. Aber im Grunde ist der Kern davon wagen Bank und sie haben eine große Anzahl von Kunden, die jüngere Menschen sind. Und sie wollen all ihre Bemühungen auf jüngere Menschen konzentrieren. Sie werden nicht ältere Menschen ablehnen, aber vor allem jüngere Menschen und Millennials sind ihre Zielgruppe weil sie festgestellt haben, dass diese Leute den größten Teil des Geldes im Voraus ausgeben, sich nicht um die Kosten der Organisation kümmerten ihre Konten und so weiter. So ist es viel einfacher, sie verschiedene Dienstleistungen in Schulden zu veräußern. Warum mochte diese Leute so sehr auch Tag wie jüngere Menschen, weil sie daran interessiert sind, Technologien zu ändern. Sie sind der Schlüssel, um neue Dinge auszuprobieren, virtuelle Realität in der Realität und so weiter. So haben wir hier Projektübersicht. Sie wollen für dort aktuelle Website neu gestalten. Und sie wollen dieses Design benutzerorientierter, benutzerorientierter gestalten und die Benutzererfahrung des gesamten Designs für die jüngeren Menschen zugänglicher machen. Denn das, was sie im Moment haben, ist wirklich alt, wirklich altmodisch. Lassen Sie uns Indien auf etwas Neues sehen, etwas Frisches, um die jüngeren Menschen auf die Plattform zu ziehen. So haben wir Ziele und Ziele. So mischen oder dieses Projekt ist es, mehr Benutzer auf die Website zu gewinnen und durch die Rate Benutzererfahrung, so dass sie bleiben dort als Kunde. Und Ziel dieses Projekts ist es, Menschen mit großem Angebot zu gewinnen, machen sie Diktum weg von der Konkurrenz. Und sobald sie ein Kunde geworden sind, bleiben sie eins, indem sie ihnen andere Dienstleistungen und Angebote anbieten. Also im Grunde auf den Punkt gebracht, wenn Sie auf diese Website kommen, indem Sie die großartige Benutzererfahrung, tolles Design haben , wenn Sie in ihrer Zielgruppe sind, so Jahrtausende, ältere, jüngere Leute, dann werden sie Sie anziehen, melden Sie sich für ihre Dienste und dann Upselling Sie im Hintergrund, zusätzliche Dienste, einige können Sie für einen bestimmten Dienst unterzeichnen. Aber sobald du eingeloggt bist, werden sie dich anziehen, indem sie dir verschiedene Dienste anbieten, die du nutzen kannst. Diese Bank und auf dieser Website. Ziel ist es also, die Absprungrate um 40% zu senken. Und sie Bounce Rate ist so hoch, weil ihre Website. Ist so alt, so wollen sie die Schulden in den ersten sechs Monaten einmal verringern und psi geht wie zusätzliches Ziel ist es , 50% mehr Menschen in dieser Zeit in Kombination mit der Marketing-Strategie, die sie zusammen mit diesem starten -Site. Also im Grunde auf den Punkt gebracht, sobald die Website live geht, Marketing-Team wird das gesamte Marketing-Material veröffentlichen. Sie werden mehr Menschen auf die Website zur gleichen Zeit zu gewinnen entscheiden, geht live. Sie wollen diese Grenze Bounce Rate um 40% reduzieren, indem sie die große Benutzererfahrung, tolles Design haben. Und sie wollen auch 15% mehr Menschen aus diesem neuen Verkehr konvertieren, den sie haben. So könnten sie Instagram verrückt laufen, sie könnten Facebook laufen, ich mache zwei Betten und so weiter. Um weitere Menschen zu gewinnen, um sie von anderen Banken wegzunehmen, Bank zu wagen und sie alle diese zusätzlichen Dinge in Zukunft zu verkaufen, haben wir Zielgruppe gesucht 20 bis 45 Jährige und Geschlecht, 40% weiblich, 60% männlich. Also wollen wir vielleicht mit einigen Farben hier experimentieren und sie sind serielle Resonanz. Wir haben also im Grunde Belgrad und London, denn wie gesagt, das ist ein fiktives Projekt, aber ich habe in der Vergangenheit an ähnlichen Projekten gearbeitet. Und wir haben auch Serbisch und Großbritannien als mich, was wichtige demografische Faktoren bedeutet. Grundsätzlich müssen Sie dies möglicherweise an Ihre persönlichen Vorlieben anpassen. Also zum Beispiel, wenn Sie aus den USA sind, wie die USA und zum Beispiel, sagen wir Mexiko, wenn Sie aus Indien sind, tun Sie das gleiche, aber für Ihre eigene persönliche Demografie, nur um zusätzliche Dinge in Funktionen zu erkunden, die Sie verwenden und mit diesem Projekt tun können. Arbeitsplatz, also meist Arbeitsplätze mit niedrigerem Einkommen und aber auch Kleinunternehmer, vor allem Freiberufler. Und Freiberufler, sind die wichtigsten Demographie für eine Zukunft für dieses Unternehmen, Medienkonsumgewohnheiten, wie Sie dort sehen können 60% auf Instagram, 20% auf Youtube, Dan auf Twitter und 10% auf Tick Tock sowie. Tägliche Gewohnheiten oder Social-Media-Konsum, Deal pendeln, gesund essen am Nachmittag trainieren. Im Folgenden haben wir Anforderungen entworfen. Das ist es, worüber ich vorher gesprochen habe. So haben wir saure Demenz Tag wollen im Grunde Desktop, kleine Desktop, Tablet und Formen zu diesen vier Größen haben . Ich werde Ihnen auch zeigen, sobald wir Oldies entwerfen, wie Sie die Telefongröße an das iPhone anpassen können. Also haben Sie im Grunde eine iPhone-App, die sie später in einem React entwickeln werden, sie werden React genauso verwenden, wie mein tatsächlicher Client vorher getan hat. Denn React ist wirklich einfach, all diese Größen für verschiedene Geräte anzupassen. Dateiformate oder Adobe XD als Hauptprojektdatei, SVG 40 Echos PNG und JPEG für Bilder weil wir einige Bilder ohne Hintergrund auf ihnen haben werden. Daher möchten wir sie vielleicht als PNG exportieren, so dass es für Entwickler einfacher ist, sie später zu verwenden. Und wir haben PDF für Design-Briefung, die wir jetzt betrachten , und zusätzliche Projektdokumentation. Also im Grunde, alles, was ich Ihnen hier vorlese, ist, dass Sie sammeln, kombinieren und erstellen und dann als PDF exportieren können, senden Sie es an Ihren Kunden. Und dann können sie über dieses Ende gehen, im Grunde mit Ihnen übereinstimmen oder mit Ihnen nicht einverstanden sind. Wenn sie nicht zustimmen, dann. Fügen Sie die Dosisänderungen ein, die sie benötigen. Senden Sie ihnen diese erneut, bis Sie die vollständige Vereinbarung erreichen, bevor Sie den Vertrag tatsächlich unterzeichnen und beginnen, unten zu projizieren, die nennen Sie es Palette erfordern. Also D sofern diese OnRequest-Bilder auf Anfrage zur Verfügung gestellt werden. Ich werde über Bilder in separatem Video sprechen, eine Kopie Dokumente zuordnen, so dass sie es OnRequest mit ihrem Texter zur Verfügung gestellt. Also werden wir nicht einfach Lorem ipsum verwenden. Ich werde Ihnen eine Menge Mips zeigen, einige in und Wireframing-Prozess des Diskurses. Aber später im Gestaltungsprozess des Diskurses. Und ich werde Ihnen tatsächlich zeigen, wie echte Kopie innerhalb des Designbudgets und Zeitplans aussehen wird . So Gesamtbudget ist $15.000 5K vor dem Start des Projekts so sehr, dass Sie tatsächlich auf all diese Bedingungen zustimmen. Und dann laden Sie 5K auf. 5k, wenn wir mit dem Design beginnen. Sobald wir also den Wireframing-Teil, einen Website-Struktur-Teil fertig sind, beginnen wir mit dem Design, dann werden wir zusätzliche 5K berechnen. Und schließlich gab letzte fünf, bevor Sie die Dateien an den Client und an die Entwickler liefern. Zeitachsenaufschlüsselung sortieren. Es ist im Grunde alles in sechs Monaten plus zusätzliche Diane für Revisionen und Säure Änderungen für Entwickler nach diesen sechs Monaten abgelaufen sind. Und hier haben Sie das hier unten. So können Sie all diese Dinge ändern. So können Sie zum Beispiel die Kontrolle halten und nach innen klicken. Und wie Sie sehen können, können Sie ändern, was Sie wollen, und Sie können dies anpassen. Irgendwelche von ihnen tun im Grunde Ihre eigenen persönlichen Vorlieben. Unten können Sie Ihren Namen oder Ihren Firmennamen und Ihren Namen oder Ihre Firmen-E-Mail angeben. Oder Sie können zusätzlich Ihre Telefoninformationen hinzufügen , wenn sie Sie telefonisch kontaktieren möchten. Aber im Grunde lesen Sie alle Klienten, mit denen ich arbeite. Sie verwenden normalerweise E-Mails, weil es viel einfacher und schneller ist. Und schließlich, wenn Sie die Ebenenpalette direkt hier öffnen, können Sie sehen, dass alle diese Ebenen sind. Und Sie können zum Beispiel auch zu diesem Budget-Symbol hier gehen. Du kannst es ändern. Sie können die Farbe ändern, wie Sie jetzt sehen können, es ist rot und Sie können diese Farbe anpassen, indem Sie Wärme direkt hier hinzufügen. Und Sie können dies im Wesentlichen an Ihren Kunden anpassen. Sie können auch die Farbe des Flughafens selbst ändern, indem Sie hier klicken, dann hier. Und wie Sie sehen können, können Sie dies auch ändern, machen es zu einem dunklen Modus Art und im Grunde Pflichten für die Kunden und im Grunde exportieren diese und zeigte ihnen eine Art von Markendesign Brief, während Sie tatsächlich diese Vorlage verwenden. Und es sieht irgendwie gebrandmarkt aus, aber es ist wirklich nicht. Es ist nur eine Vorlage. Um diese als PDF zu exportieren. Nehmen wir an, dass dies der endgültige Designbrief ist. Sie können einfach Control E drücken und die PDF-Funktion von hier aus verwenden, Kit Export. Und Sie können natürlich ändern, wo Sie Ihre Dateien exportieren möchten. In diesem Fall ist es ein Desktop für mich, drücken Sie einfach Export. Es wird es als PDF exportieren. Und im Grunde können Sie diese Designbeschreibung mit Ihrem Kunden teilen. Offensichtlich werden Sie einige Details entfernen, über die ich vorher nicht gesprochen habe, aber sie haben ihn für euch gelassen. Also im Grunde, schreiben Sie hier über Ihre Zielgruppe. müssen Sie nicht einschließen. Schreiben Sie über Design-Anforderungen und Budget-Zeitplan hier können Sie entfernen, dass Decks einfach von hier ausgewählt, und einfach gelöscht wie so. Und dann schicken Sie das an Ihren Klienten. Und dann werden sie damit zufrieden sein. Also im Grunde ist dies unser Designbrief, oder wirklich hoffen, dass ihr Jungs dieses Video gefallen hat, denn wie gesagt, es ist wirklich wichtig, Design-Briefung an Ort und Stelle zu haben, weil die meisten Male Sie dies verwenden werden und Kunden werden fragen Sie, zum Beispiel, für einige verschiedene Änderungen. Aber wenn diese Änderungen nicht innerhalb der erforderlichen Design-Briefung sind, wenn sie nicht im Vertrag sind, und dann fühlen Sie sich frei, nein zu sagen. Oder wenn Sie an denen arbeiten möchten, zögern Sie nicht, ja zu sagen, aber stellen Sie sicher, dass Sie immer zusätzliche für eine Dosis berechnen , weil sie nicht in Design kurz waren, sie waren nicht in den Vertrag. Also, warum sollten Sie an Schulden arbeiten? Grundsätzlich ist dies für Design kurze Video datiert. In der nächsten Reihe von Videos werde ich Ihnen einen Papier-Wireframing-Prozess zeigen. Wir werden anfangen, auf ein Stück Papier zu zeichnen. Ich werde erklären, dass mein Designprozess denken hinter jedem dieser Website- oder App-Designs entwerfen könnte. Ich werde Ihnen einige zusätzliche Gedanken über Design für bestimmte Menschen zeigen, Design für eine bestimmte demografische, bestimmte Länder und so weiter. Aber all das wird in diesen Wireframing-Videos erklärt werden. Achten Sie also darauf, diese zu beobachten, wenn Sie interessiert sind. Wenn nicht, können Sie diesen Kurs immer durchhalten und verschiedene Lektionen durchlaufen. Was dich interessiert, was du interessanter findest, was du brauchst. Was finden Sie hilfreicher und so weiter. Stellen Sie also sicher, den Diskurs vollständig zu erforschen. Und weil ich so strukturiert habe, so dass Sie nicht alle Lektionen beobachten müssen, wenn Sie wollen. Sie können einfach zum Entwurfsteil springen, wenn Sie möchten. Aber ich habe einige wichtige und wichtige Informationen in jeden einzelnen Abschnitt des Diskurses aufgenommen. Also, wenn Sie am meisten lernen und das Beste aus diesem Kurs machen wollen, dann stellen Sie sicher, dass Sie all diese Lektionen folgen. Es wird länger dauern, aber ich verspreche Ihnen, dass die Vorteile viel größer werden. Im nächsten Video und in der nächsten Reihe von Videos werden wir anfangen, Drahtmodelle auf einem Stück Papier zu entwerfen. Also sehe ich dich dort. 15. Die Zielgruppe finden: In diesem Video werden wir über Publikumsforschung sprechen und was Sie tun können, um Ihr Publikum zu erforschen. So gibt es zwei Arten von Forschern wollen, die bereits abgeschlossen ist. Das heißt, wenn Ihr Kunde bereits weiß, wer seine Kunden sind und ob er bereits recherchiert hat, dann werden Sie nur diese Forschung nehmen und zum Beispiel, polieren Sie es ein wenig oder verfeinern Sie es ein wenig, wenn sie, zum Beispiel möchten, um eine zusätzliche Zielgruppe zu erweitern. So können Sie aus ihren vorherigen Zielen und einem früheren Beispiel wissen , was Sie mit dem Design tun können und wohin Sie von dort aus gehen können. Wenn Sie neue Zielgruppe erforschen müssen, Wenn zum Beispiel, D Nur wissen, wer ihre Zielgruppe ist, dann müssen Sie die Forschung zu tun, wenn Sie verstehen müssen, wer die Zielgruppe ist. In unserem Designbrief hier schaue ich es auf meinem Bildschirm an. Reha, im Alter von 22, 45-Jährigen. Das heißt zum Beispiel, weil dies das Bankprojekt ist. Die Bank weiß bereits von dem Konto, das sie bereits eröffnet haben, und sie können in ihrem System überprüfen , dass dies ihre Zielgruppe ist, denn in dieser Altersgruppe sind die meisten Menschen da. Und dann haben wir Geschlecht, 40% weiblich, 60% Mahlzeit. einmal wissen wir, dass dies von der Datenbank bereits Land des Wohnsitzes hat. So Serbien und Großbritannien Stadt Resonanz Belgrad in London, weil das ist, wo sie ihren Standort haben ist auf. Wir haben einen Arbeitsplatz. So vor allem Arbeitsplätze mit niedrigerem Einkommen. Was kleine Unternehmen Eigentümer als auch, vor allem Freiberufler. Das ist es, was sie gefragt haben, wenn sie ihre Konten eröffnen. So wissen sie, dass aus Schulden, Schuldenerfahrung, Medienkonsumgewohnheiten. So Instagram, YouTube, Twitter, und Tick Tock, tägliche Gewohnheiten oder Social Media Konsum. Umgang mit pendeln, gesund essen, am Nachmittag trainieren und so weiter. Bank kann über all diese Informationen alarmieren, vor allem fragen Derek-Kunden. Und Sie können aus Dateninformationen lernen, was Sie für das Design tun müssen. Also, weil wir hier mehr männliche als weibliche Kunden haben und wir bei Yank Publikum sind. Also 22, 45-Jährige, können wir sofort wissen, dass wir nicht alle diese hochwertigen und alten Alterungsfarben wie echte dunkle schwarze Farbe, buchstäblich Gold und so weiter verwenden müssen diese hochwertigen und alten Alterungsfarben wie echte dunkle schwarze Farbe, . Außerdem werden wir diese Farben nicht verwenden, weil diese Bank nicht ist. Wie kann ich sagen, dieses wirklich anpassbare Bankett? Ich weiß nicht, wie ich das sagen soll, aber es ist nicht für High-End-Kunden und Kunden , die bereits auf Yaks, Dionne Supercars sind. Es gibt nicht viele verschiedene Häuser in Mencius Zone. Und diese Bank ist für normale Leute. Daher müssen Sie Ihre Sprachschulden so strukturieren , dass diese normalen Leute verstehen können, was Sie ihnen sagen wollen. Sie wollen also keine Bilder von Yaks und Villen sehen und so weiter, weil sie diese Dinge nicht besitzen. Und deshalb werden Sie die Farben verwenden, die für Ihr Publikum geeignet sind. In diesem Fall 60% männlich, 40% weiblich. Also werden wir ihr Design etwas Gewürz geben, sagen wir mal so. Nehmen wir also an, dass wir einige abgerundete Ecken verwenden und es weich aussehen lassen. Vielleicht können wir später einige Hintergrundschatten verwenden, kann sogar Hintergrundunschärfe sein. Nur um diesen modernen und weichen Look zu geben, damit wir sowohl männliches als auch weibliches Publikum unterbringen können. Wieder einmal müssen Sie sich ein Land des Wohnsitzes und die Stadt der Ärger ansehen. Also müssen Sie sich die Kultur dieser Menschen ansehen. Sie müssen verstehen, was die Kultur ist, vor allem die lokale Kultur, vor allem in diesen Fällen, in denen sie sich nur auf Belgrad und London konzentrieren . Sie müssen also eine Kultur der Dosis für Städte verstehen und Sie müssen Ihre entworfen an diese Kulturen anpassen. Also noch einmal, wenn eine bestimmte Kultur oder Religion einen bestimmten Satz von Farben verwenden, werden Sie nicht diese speziellen Sätze von Farben verwenden. Andere Religionen, Städte, Länder und so weiter. Du musst also über all diese Dinge nachdenken. Und wie können Sie darüber nachdenken, indem Sie einfach Ihre Recherche durchführen, indem Sie einfach verstehen, wer Ihre Zielkunden sind, wer Ihre Zielgruppe ist? Und wenn wir, wie in unserem Fall, diese Informationen bereits haben und wir sie haben, indem die Bank bitten, uns diese Informationen zur Verfügung zu stellen, können wir diese Informationen leicht in unserem Wunsch strukturieren. Also nochmals, mit der Farbe, mit der Topographie und unter Topographie Front, wenn Ihr Publikum ältere Menschen sind, werden Sie in der Regel größere Typografie verwenden, weil die Website der Menschen ist wirklich schlecht in einem bestimmten Alter oder Sie fangen an, schlecht zu werden. Daher werden Sie größere Typografie verwenden. Du wirst dunklere Typografie machen, nur damit sie für diese Menschen zugänglicher ist. Wenn jüngere Menschen in Frage gestellt werden, wie sie in unserem Fall , können Sie zum Beispiel kleinere Topographie verwenden. Sie können hellere Farben verwenden, nur um dieses allgemeine Wohlfühlgefühl auf Ihrer Website zu geben. Denn wie Sie aus den täglichen Gewohnheiten sehen können, Social-Media-Konsum täglich empfohlen, gesund zu essen und am Nachmittag zu trainieren. Vielleicht essen diese Leute an einem gesunden Ort und überprüfen ihr Bankkonto, während sie auf Schulden sind. Also, wenn sie in diesem Zustand des Geistes sind, wollen Sie nicht, dass sie mit Betttopographie, mit schlechten Farben und so weiter verstopft sind. Sie möchten das allgemeine Gefühl des Wohlbefindens bekommen, KLT zu und grün zu sein und in einem mit der Natur und mit der Gemeinschaft und so weiter zu sein. Aber mit diesen bestimmten Farben, der Topographie und dem Imager, was besonders wichtig ist, wenn Sie mit jüngeren Menschen sprechen, wie wir hier sind, dann werden Sie jüngere Menschen Bilder verwenden. Denn wieder einmal, die Bilder sind wirklich wichtig, weil sie Menschen in die Richtung zeigen, in die das Geschäft geht. Also noch einmal, wenn unser Alter demographisch 22, 45-Jährige ist , werden wir nicht einige ältere Menschen in diesem Windows-Bilder zeigen, aber jüngere Menschen, zum Beispiel, mit ihren Mobiltelefonen, mit den Tablets, hängen vielleicht Kaffee trinken, Fahrräder herumschieben, vielleicht rumhängen. Es ist ein netter Ort und so weiter. willst dich also nur konzentrieren, mit wem du redest? Werfen Sie Ihre Bilder durch Ihre Schriftarten und durch Ihre Farben. Das ist also, wo diese Zielgruppe wirklich nützlich ist , weil man nur recherchieren und verschulden muss. Wenn wie in diesem Fall haben wir das bereits. Und weil die Bank uns all diese Informationen zur Verfügung gestellt wird, was passiert, wenn Sie keine dieser Informationen haben? Nun, Sie müssen sich einfach mit Ihrem Kunden 101 setzen. Fragen Sie sie einfach, wer Dating wagen Zielgruppe ist. Und dann kannst du ihnen eine Reihe von Fragen stellen, wie wir es hier tun. Was ist ihr Alter, was ist ihr Geschlecht? Wo befinden sie sich? Was tun sie gerne, und so weiter. So können Sie alle diese Fragen auflisten, die bereits eine Indice-Vorlage haben, die ich Ihnen gebe, stellen Sie diese Fragen an Ihren Kunden, um zu verstehen, wer ihre Zielgruppe ist. Den, sobald Sie dieser Zielgruppe folgen, können Sie Ihre eigenen Entscheidungen treffen, indem Sie diese einfach in Ihr Design integrieren. Wenn Sie brauchen, um eine Zielgruppe Forschung zu tun und dann offensichtlich gehen, um mehr für Papa zu berechnen. Und das ist mehr UX feldbasierte Sache. Wie machen Sie zielgerichtete Forschung? Zum Beispiel sagen sie Ihnen, dass sie denken, dass diese Leute, sagen wir, bei einer lokalen Bank arbeiten, zum Beispiel. Dann gehen Sie zu dieser lokalen Bank und fragen Sie die Leute ob sie für eine Art Interview zur Verfügung stehen. Dan, du wirst die Liste der Fragen bilden, die diesen Leuten stellen werden. Und das Beste, was Sie tun können, ist, all diese Menschen in einer Gruppe zu bekommen, in einem Raum zur gleichen Zeit, wenn es möglich ist, während zwei, diese weltweite Pandemie und so weiter. Sie können dies online tun. Sie können offensichtlich geplante Xun-Anrufe, Skype-Anrufe, Google Hangouts und so weiter. So können Sie all diese Leute zur gleichen Zeit sogar stellen, oder Sie können Ihre Fragen vorab stellen. Du kannst ihm Dad schicken, sie können dir eine E-Mail-Tasche schicken, damit du nicht wirklich mit ihnen sitzen musst, wenn du nicht willst, oder wenn du schüchtern bist oder wenn sie keine Zeit haben und so weiter. Die Leute werden gerne für diese Sortierung bezahlt. Diese Zielgruppenforschung nimmt also natürlich viel Zeit in Anspruch. Also wird es am besten sein, wenn Sie diese Leute bezahlen können. Und wie kannst du gehen, p zu holen? Wie können Sie sie bezahlen, indem Sie einfach Ihren Kunden bitten, Sie im Voraus zu bezahlen, wir haben bereits darüber gesprochen, denn wenn sie Sie im Voraus bezahlen, zum Beispiel, sagen wir 30% oder 50% oder was auch immer. Sie können dieses Geld für diese Zielgruppe verwenden, Sie müssen keine massiven Beträge zahlen. Und nur einige grundlegende, ich weiß nicht, regelmäßige Menge an diese Leute, weil sie ihre Zeit mit dir nutzen. Und wenn Sie sich dann Ihre Meinung über diese Zielgruppe formulieren, können Sie sie dann in Ihrer Designarbeit verwenden und später, wenn die Arbeit fertig ist oder fast fertig ist, können Sie zu diesen Leuten zurückkehren und sie jetzt fragen , um Ihr Produkt zu testen und wie Sie das tun können. Es gibt viele verschiedene Plugins innerhalb von Adobe überschritten können Sie installieren, um mit echten Zielgruppen zu testen. Sehen Sie, welche Dating des Produkts, bevor das Produkt in Code geht und live geht. Weil wir Prototyping-Techniken, Mikro-Interaktionen und so weiter verwenden werden. So können Sie ihnen zeigen, wie das Produkt im wirklichen Leben aussehen wird, sobald es codiert ist, bevor es tatsächlich codiert ist, was sowohl für Sie, Ihre Kunden, Entwickler und so weiter Zeit spart . Weil Sie diese Lösungen an echten Menschen testen werden. Und Sie können verstehen, ob echte Menschen, die eigentlich unsere Zielgruppe sind, dieses Produkt mögen, bevor es live geht. Wenn sie es nicht tun, werden Sie offensichtlich alle ihre Antworten aufschreiben und Sie werden diese Antworten in Ihr Design integrieren, damit Sie es ändern können. Du kannst zu ihnen zurückkehren. Stellen Sie ihnen einfach noch einmal diese Fragen oder ein paar andere Fragen. Wie zum Beispiel, wie haben Sie die Navigation gefunden? Glaubt es, dass es zu eng ist? Sind Sie in der Lage, auf eines dieser Dinge zu klicken? Magst du diese Animationen? Glaubst du, sie brauchen zu viel Zeit. Wie finden Sie, dass die Farben tun, finden Sie deutliche ablenkend, um es leicht zu finden , auf diese Schaltflächen klicken, so dass Sie alle diese Fragen formatieren können und all diese Fragen an die Menschen, die Sie und Ihre Kunden denken, sind die Zielgruppe. Wenn Sie die Zielgruppe haben. Also gehen wir zurück auf die Geschichte von Anfang an. So haben wir unsere Zielgruppe, weil Bank bereits diese Optionen zur Verfügung gestellt. Download, das Sie tun können, ist, wenn Sie zum Teilen Ihres Projekts kommen und einen Teil Ihres Projekts testen, können Sie dann Ihre Zielgruppe mit den Informationen bilden , die der Client Ihnen zur Verfügung gestellt hat. In diesem Fall die Bank, können Sie alle diese Leute in einen Raum oder Skype rufen Sie den Zoom-Anruf und alles andere, über das ich gesprochen habe, und stellen Sie diese Leute die gleichen Fragen. Dann können Sie ihre Antworten bekommen. Sie können sie formatieren und Sie können denken, wie zum Beispiel, wenn zwei oder mehr Leute sagen, dass dieser Knopf zu störend ist, ändere ich es. Wenn drei oder mehr Leute sagen, dass sie es getan haben, können sie den Text nicht lesen, ich werde versuchen, die Farbe zu verbessern, vielleicht etwas dunkler zu machen und vielleicht die Farbe ganz zu ändern. Also verstehst du, was ich meine. Du musst diese Dinger mit echten Leuten testen. Und das ist der eigentliche UX-Prozess des Designs. So stauben, ändern, implementieren, wieder bestimmt, und es ist im Grunde ein Fehlerkreis und Sie machen diesen Kreis für die gesamte Projektlebensdauer. Also von dem Punkt, an dem Sie beginnen, bis zu dem Punkt, den Sie beenden, und das Produkt ist Leben. Das ist nicht das Ende des Entwurfsprozesses. Du wirst das immer wieder tun und immer wieder. Aber ich zeige Ihnen nur das projektbasierte strukturierte projektbasierte Format. Also im Grunde, für jeden einzelnen dieser Tests, zum Beispiel, nachdem das Produkt live über die Gestaltung der Website hier ist. Also, wenn die Website live ist, vielleicht in einem Zeitraum von drei Monaten, können Sie einige Daten von der Bank sammeln und Sie können sich mit der Bank Person setzen und dann sprechen wir mit ihnen. Vielleicht haben sie einen Projektmanager für dieses Projekt und so weiter. Oder wenn der Client kleiner ist, können Sie direkt mit den Kunden sitzen und dann alle diese Informationen überprüfen. Zum Beispiel, wenn sie denken, dass die Seite wirklich wichtig für die Konvertierung ist, und Sie sehen in Google Analytics zum Beispiel, dass die Konvertierung wirklich schlecht ist, dann können Sie sich mit Ihrer Zielgruppe setzen, sprechen mit ihnen darüber, was sie mit dieser bestimmten Seite ändern möchten, dann können Sie diese Änderungen anwenden, Senden Sie sie an Entwickler. Entwickler können diese Änderungen implementieren, weil es jetzt viel einfacher ist, weil sie eine Live-Website arbeiten. Und dann können Sie es für einen weiteren Monat oder drei weitere Monate geben und sehen, ob sich die Umwandlung verbessert hat. Offensichtlich können Sie diese Fristen mit Ihrem Kunden festlegen und sehen, zum Beispiel, ob sie etwas in einem kürzeren Zeitraum erreichen wollen, sagen wir, sie wollen eine größere Umwandlung in drei Monaten. Dann können Sie zum Beispiel zwei dieser Änderungen nach jedem der Monate vornehmen. Also hoffe ich, du verstehst es. Nach einem Monat erhalten Sie noch einmal eine Zeit mit Ihrer Zielgruppe. Sie sprechen mit ihnen über diese Änderungen, implementieren die Änderungen, und Entwickler implementieren die Änderungen. Und nach einem weiteren Monat erforschen Sie und sehen, ob sie die Zielgruppe erreicht haben. Wenn sie ihre Zielziele erreichen, wenn sie es haben, dann ist das in Ordnung. Vielleicht kannst du etwas tun, um ein bisschen mehr zu verbessern. Wenn sie sie nicht erreicht haben, können Sie mit einigen neuen Fragen, neuen Änderungen usw. zu einer Zielgruppe zurückkehren . Es ist also wirklich der ganze Kreisprozess, weil er beginnt und dann nie beendet wird, weil Sie immer diese Änderungen vornehmen. Wieder einmal liegt es nicht in Ihrer Verantwortung, diese Änderungen vorzunehmen, nachdem das Produkt live ist, aber Sie können das als Service für einen Kunden anbieten und dann zu ihnen sagen: Okay, Sie haben diese Ziele vielleicht sein, wir können sie erfüllen. Wenn wir sie nicht treffen, sollten wir uns vielleicht wiedersehen. Wir sollten noch einmal darüber sprechen, mit der Zielgruppe zu sprechen , damit wir etwas anderes ausprobieren können. Wir können etwas anderes ausprobieren und vielleicht die Chancen verbessern , dieses Zielziel zu erreichen. Das war's also für dieses Video, und wir sehen uns im nächsten. 16. Paper: In Ordnung, also fangen wir jetzt mit Papier-Drahtmodellen an. Aber bevor wir es tun, möchte ich Ihnen nur schnell zeigen, welche Ressourcen ich verwende, die Sie verwenden können, und Ressourcen, die Sie im Grunde für Papier-Wireframing benötigen. Also, was Sie eigentlich brauchen, ist Papier. Ich benutze nur ein normales Druckpapier. Sie können jedes Papier verwenden, das Sie wollen. Es kann Linien und Punkte haben, es kann Quadrate haben. Es liegt wirklich an dir. Und welche Art von Papier haben, welche Art von Papier verwenden Sie gerne? Und es spielt wirklich keine Rolle. Ungeordnete Sache wie Dicke des Papiers, Sortierung des Papiers und so weiter. Sie können einfach einfache weiße Leute verwenden, wie ich hier benutze. Dies ist nur ein grundlegendes Druckpapier oder Sie können in jedem Geschäft kaufen. S4 hängt davon ab. Sie können Holzstifte verwenden, Sie können Stifte wie diese verwenden. Sie können Kugelschreiberbiegungen verwenden. Es liegt wirklich wieder an Ihnen, was Sie in Ihrem Haus liegen. Wenn Sie Phantasie werden wollen, können Sie diese Lineale kaufen. Sie können diese Lineale kaufen, die Symbole in ihnen geprägt haben. So können Sie im Grunde die Regel festlegen, ein Lineal wie dieses, und dann können Sie einfach ein Symbol darauf zeichnen. Also mache ich das nicht gerne, weil es mich verlangsamt. Aber Sie können es verwenden, Sie können es online kaufen, Sie können im Grunde finden, was Sie wollen. Sie können auch verschiedene Farbmarkierungen verwenden. Ich benutze sie heute nicht, nur um die Dinge etwas zu beschleunigen. Sie können Stifte wie DES verwenden. Wie gesagt, es liegt wirklich an Ihnen, was Sie haben, was Sie am bequemsten mit der Verwendung sind. Und bei diesem Prozess geht es im Grunde um Ideen. Also wollen Sie nur Ideen aus dem Kopf spülen, auf ein Stück Papier und einfach sortiert. Sie können sehen, wo Sie dieses Prozesswerkzeug einsetzen können und in welche Richtung. Also, um loszulegen, was ich will, ist, alle Dienste aufzulisten, die der Kunde mir gegeben hat. Also wieder, Kunde ist eine Bank und sie haben alle diese verschiedenen Dienstleistungen, die sie wollen auf ihrer Website enthalten. Sie haben alle Website, die sie neu gestalten wollen. Und die Navigation oben ist wirklich überladen. Es ist wirklich nicht so toll für das Auge. Es ist wirklich schwer zu verstehen. Das erste, was im UX-Design, das wir für diese bestimmte Website tun werden, ist, ihre Navigation zu reparieren. Also im Grunde ist ihre Navigation jetzt genau hier gestoppt, stellen Sie sich einfach oben auf der Seite vor. Und es ist wirklich überladen mit einer Reihe von diesen verschiedenen Dienstleistungen, die sie anbieten. Ich möchte das beheben, weil ich möchte, dass Benutzer einfach auf dieser Website navigieren, um die Absprungrate zu reduzieren. Denn wenn Sie sich aus dem vorherigen Video über Design kurz erinnern, ist die Absprungrate eine ihrer Hauptanforderungen. Also, um loszulegen, werde ich nur die Seiten auflisten, die sie im Grunde für diese Website tun wollen. So haben sie Konten, sie haben Kredite, Karten, investieren, digital und Dashboard mit zusätzlichen Dienstleistungen. Also, wenn ich meine Kamera nehme und etwas näher heranzoomen, nur so kannst du sehen, was ich mache ein bisschen besser. Sie können hier sehen, dass wir Konten haben, Kreditkarten, investieren, digital und Dashboard. All dies hat verschiedene Dienste im Inneren. Also im Grunde unter Konten können Sie verschiedene Konten wie Auschecken öffnen, Konto speichern und so weiter. Sie werden sehen, dass, wenn wir tatsächlich mit dem Designprozess und Wireframes und so weiter in Adobe XD-Darlehen beginnen , im Grunde dasselbe. Also all dies hat verschiedene Dienste, Autos, können Sie sich Debitkarten, Kreditkarten und so weiter vorstellen , investiert. So haben sie verschiedene Investitionspakete. So zum Beispiel gehalten Stipendium investieren in die Zukunft und so weiter. Digital ist im Grunde wagen AI-Helfer-Tools. Sie haben Online-Banking, Banking und so weiter. Und unter Dashboard, sobald Sie sich tatsächlich auf dieser Website anmelden und unter das Dashboard gehen, werden Sie in der Lage sein, alle diese verschiedenen zusätzlichen Informationen zugreifen. Sie werden in der Lage sein zu sehen, Ihre Ausgaben Ihren Tag begrenzt Ihre Karten, Ihre Lungen, zum Beispiel, dass Sie unter dieser Bank haben und so weiter. Um das alles zu beheben, haben sie mich eigentlich gebeten, die Metallkationen einzubeziehen. Rent wird Pop-up im Grunde von ihren Standorten unter einer Google-Karte sein. Es bat mich, für Unternehmen einzubeziehen. Sie baten mich, unsere Mobiltelefonnummer und verschiedene Sprachen anzugeben. Also lasst uns das aufschreiben. So Standorte, Unternehmen, Telefon und Sprachen. All diese Dinge müssen also in unsere Navigation einbezogen werden. D muss übersichtlich sein. D muss leicht zu lesen, leicht zu verstehen, sowohl auf Mobilgeräten als auch im Web. Dies ist also unsere erste Herausforderung im Grunde, denn sobald Sie auf dieser Website landen, werden Sie diese Top-Navigation sehen. Du wirst dich fragen, okay, ich bin auf einer Bankseite. Wo muss ich hin? Vielleicht müssen Sie ein Konto eröffnen. Vielleicht müssen Sie eine Karte nehmen. Vielleicht denken Sie darüber nach, zu investieren und so weiter. So müssen Sie in der Lage sein, einfach auf dieser Website zu navigieren. Also, um das zu tun, was wir eigentlich tun werden ist, dass wir den Umriss einer Website zeichnen. Sie können sich also vorstellen, dass dies der Umriss ist. Wenn Sie auf einer Website landen, was Sie tun werden, ist eine obere Bar wie diese, die eine volle Breite unserer Website laufen wird. Im Inneren werden wir unsere Standorte hier einbeziehen. Wir werden hier für Unternehmen tun. Und ich werde es aufschreiben. Dann auf dieser Seite werden wir eine Telefonnummer hinzufügen. Also lassen Sie mich schnell ein Telefonsymbol hinzufügen. Und das ist es, worüber ich vorher gesprochen habe. Sie können einfach eine grundlegende kritzelte wie folgt einfügen. Und Sie können auch Pfeile von ICN verwenden. Also für Nikon, wenn Sie das mit einem anderen Designer, einem Entwickler oder mit wem teilen, werden sie in der Lage sein, es zu verstehen. Ok, das ist ein Ausländer IC und das ist ein Standortsymbol. Und du kannst all diese Dinge aufschreiben. Für die Sprachen. Ich werde zwei Flaggen einschließen, im Grunde britische Flagge und serbische Abfackeln, weil dies unsere Sprachen sind. Lassen Sie mich es aufschreiben. Sprachen. Und was wir tun werden, ist eine weitere Navigation, aber innerhalb dieser Website, also wird es nicht in voller Breite sein, es wird eine boxed Navigation sein. Also im Grunde von hier nach hier, denn wir werden das Gitter benutzen, sobald wir tatsächlich mit dem Design beginnen. Das wird also unsere Box-Navigation sein. So wie das. Es wird einen verschwommenen Effekt haben, wird einen Schlagschatten haben. Sie werden später sehen, wenn wir tatsächlich mit dem Design auf dieser linken Seite beginnen. Und wir werden uns mit dem Logo beschäftigen. Also werden wir das Logo dort einbinden. Und dann Konten. Und ich habe den Klienten tatsächlich gefragt, was ich vorher getan habe. Wie kann eine Liste d s, weil Sie diese in der Reihenfolge der Priorität auflisten müssen. Denn zum Beispiel, diese digitalen Dienste sind, können sekundär zu dam oder tertiär oder was auch immer. Und das sind Zahlen in Kredite vielleicht sind die min, es bedeutet Dienstleistungen. Sie müssen also die Dienste in Ihrer Navigation in der Reihenfolge ihrer Priorität auflisten , da die Mehrheit der Menschen, insbesondere im Westen, von links nach rechts gelesen wird, wenn es sich um einen anderen Markt oder um den Nahen Osten Markt handelt, zum Beispiel die von rechts nach links lesen. Daher müssen Sie Ihre Menüpunkte in der Reihenfolge der Priorität von links nach rechts für diese westlichen Länder in westlichen Zielgruppen einschließen . Also Konten, Kredite, Karten, investieren und digital. Und anstelle des Dashboards werde ich tatsächlich eine Schaltfläche hier einfügen. Und es kann ein Login-Button sein , der uns tatsächlich zum Dashboard-Abschnitt bringt. Sie werden also in der Lage sein, auf diesen Login-Button zu klicken und zum Dashboard zu gehen. Also lasst uns das aufschreiben. Und ich ziehe es vor, all diese Dinge aufzuschreiben, besonders vielleicht erstellst du jetzt diesen Wireframe, aber du wirst in einem Monat zurückkehren, sagen wir mal, oder in ein paar Tagen oder in ein paar Wochen. Und vielleicht wirst du vergessen, was das ist, wohin dich das führt. So ist es wirklich extrem einfach, wie Sie gesehen haben, einfach den Pfeil nach unten zum Beispiel, das ist unser Standortsymbol. Also schreiben wir es auf. Gelegenheit kann ich einfach so haben Sie sehen, was es ist. Und lassen Sie uns das vorerst sehen. Es ist nur ein Symbol, aber vielleicht werden Sie es aufschreiben. Standorte hier. Dies für Unternehmen gehen, um nach rechts zu bewegen. Also müssen Sie all diese Dinge aufschreiben lassen. Gerade sah, haben Sie später erinnern können, wenn Sie zurück zu ihm gehen, was es ist, was es tut und so weiter. Also, das ist im Grunde nicht Navigation. Und ich werde es hier für dieses Video lassen. Im nächsten Video gehen wir tatsächlich zurück zu ihm. Ich werde Ihnen einige verschiedene Wireframing-Stile zeigen, was Sie tun können. Und dann im Video danach wir endlich mit Wireframes anfangen. Und wir werden alle unsere Elemente auf ein Stück Papier zeichnen. Das war's also für dieses Video, und wir sehen uns im nächsten. 17. Paper: Okay, also lassen Sie uns jetzt weitermachen, wo wir im vorherigen Video aufgehört haben. Und in diesem Video werde ich Ihnen eine andere Wireframing-Stile zeigen , die Sie für Ihre Wireframes verwenden können. Also werde ich das gleiche Stück Papier benutzen. Und ich werde eigentlich nur ein bisschen näher heranzoomen. Damit ihr das alles ein bisschen besser sehen könnt. Also im Grunde, variieren Stile von Designer zu Designer? Der entscheidende Faktor hier ist die Zeit. Wie viel Zeit haben Sie für dieses Projekt? Und ein weiterer entscheidender Faktor ist offensichtlich das Budget der Kunden. Also, wenn sie dir ein niedriges Monatsgehalt oder niedrige Gebühren oder was auch immer zahlen, wirst du nicht viel Zeit in diesen Prozess investieren, weil, wie ich sagte, sie steigen dein kleines auf kein Geld. Also werden Sie nur im Grunde einige Ideen kritzeln und gehen auf Adobe XD. Aber wenn sie dir gutes Geld bezahlen, wenn du lange genug Zeit hast, um dies zu tun, und du hast Talent und du hast einige Ideen, die du ihnen zeigen musst. Und dann können Sie viel Zeit in diesen Prozess investieren, vor allem, wenn Sie es mit anderen Designern teilen, im Schulden-Team oder mit dem Kunden, der praktisch sein will und so weiter. Also im Grunde sind diese beiden Faktoren, Zeit und Geld, was diese verschiedenen Stile unterscheidet. So gewährt den Stil Nummer eins, im Grunde werde ich drei Karten wie diese ziehen. Und auf diesen drei Karten werde ich Ihnen diese drei verschiedenen Stile zeigen. Dies ist also das Bild und im ersten Stil, der nur grundlegende Stil ist, um zu zeigen, dass dies ein Bild ist. Du kannst das einfach tun und ihnen gezeigt haben, dass, OK, das ist ein Bild. Und Sie können Ihren Klienten zeigen und sagen, wo immer Sie dieses Schaf sehen, es bedeutet, es ist ein Bild. Und dann im zweiten Stil, wenn Sie ein bisschen mehr Zeit und Budget haben, ist ein bisschen größer, und dann können Sie so etwas tun. Jeder hat solche Symbole für die Bilder gesehen. So können Sie sie zeigen und sagen, was auch immer, wir haben ein Bild, und das ist das eigentliche Bild, Delle im Drehkreuz. Was Sie tun können, ist tatsächlich in einem schönen Berg zu ziehen. Wenn Sie wissen, wie man zeichnet, können Sie verschiedene Marker verwenden. Sie können Schattierung verwenden. Sagen wir, wir haben Wald hier. Also bekommst du die Idee und du bekommst das Bild. Wir können auch Wolken hier zeichnen oder wir können verschiedene Farben verwenden und so weiter. Also im Grunde sind die wichtigsten Unterscheidungsmerkmale hier Details. Sie haben eine begrenzte Zeit. Wenn Sie ein kleines Budget zur Hand haben, dann werden Sie dieses verwenden. Wenn du alles hast, was ich gesagt habe, ein bisschen größer, wirst du das hier benutzen. Und wenn Sie wollen, und wenn Sie viel Zeit haben, viel Geld auf Ihren Händen, und dann können Sie dieses verwenden. Sie können verschiedene Farbmarkierungen verwenden. Du kannst tun, was du willst. Aber hier, und lassen Sie mich es Ihnen zeigen, weil ich ein paar Marker zur Hand habe. Also lassen Sie uns sagen, dass Sie diesen Stil verwenden oder diesen Marker genau hier haben. Und ich will dir nur schnell zeigen, wie viel Zeit uns das braucht. Und nur um meinen Punkt zu veranschaulichen, und nur damit Sie den Unterschied hier sehen können. Also habe ich in der Vergangenheit tatsächlich ein Projekt wie dieses gemacht. Der Kunde hatte ein enormes Budget und sie wollen das den Stakeholdern zeigen , nur damit jeder sehen kann. Also habe ich diese Methode verwendet, aber das war nur ein einziges Mal, die meisten Male. Ich kombiniere diesen und diesen Stil. Je nachdem, wo Sie Ihre Bilder setzen, vor allem für die Avatare. Also $40, du kannst so eine Schaltung machen. Du kannst so machen. Also im Grunde Schulden Ihren Avatar. Oder manchmal kann man sogar so gehen. So können Sie in den Teilen Ihres Avatars malen , nur um es ein wenig auf der Seite hervorzuheben. Sie können verschiedene Farben machen. Abhängig von Ihrem Avatar können Sie natürlich ein Ende malen. Es liegt also wirklich an Ihnen oder Ihren Kunden, Ihrem Budget und so weiter. Ich will nicht lange hinausziehen. Ich glaube, du bekommst das Bild. Also lasst uns jetzt mehr eins. Stellen wir uns vor, dass wir einen Titel hier direkt unter diesem Warenkorb haben. Also für diesen ersten Stil werde ich eigentlich nur eine schöne dicke Linie wie diese zeichnen. Das ist also unser Titel. Dies ist ein Untertitel, also ist es ein bisschen kleiner. Und schließlich, für den Absatz, können wir einfach Zeilen wie diese verwenden. Also haben wir unser Bild, Titel, Untertitel und einen Absatz. Sie können auch so etwas verwenden. So können Sie ein int nur ein wenig nach unten nehmen, um diese zu unterscheiden. Sie können verschiedene Farben und so weiter verwenden. Aber die schnellste Methode ist diese Methode. Und lassen Sie uns sagen, dass wir einen Call-to-Action-Knopf direkt hier unten haben. Was wir tun können, ist tatsächlich einen Button wie diesen zu zeichnen und ihn einen Tag zu nennen. Vielleicht können Sie dies nur tun, um anzuzeigen, dass dies eine Schaltfläche für den Stil Nummer zwei ist, was wir tun können, ist Titel, Untertitel, Absatz aufzuschreiben. Und schließlich tun Sie einen Knopf und Schreiben b n. So können Sie den Unterschied zwischen diesen beiden sehen. Das ist natürlich wieder einmal viel schneller, viel schneller. Das ist nur ein bisschen langsamer. Button gibt uns weitere Informationen und Sie können diese beiden kombinieren. Sie können beispielsweise Titel, Untertitel und dann Aufgaben Zeilen schreiben . Und für die btn, verwenden Sie diesen Stil, wenn Sie wollen. Jetzt endlich, für diesen letzten Stil, offensichtlich wirst du eine echte Information im Inneren verwenden. Sagen wir also Mountain. Mal sehen, Yellowstone Park. Wir werden echte Absätze aufschreiben, also geht hier echter Text und ich werde Ihre Zeit nicht zu viel damit verschwenden. Aber Sie können sich vorstellen, dass Sie wirklich echten Text schreiben werden , der hier gehen wird. Nun zum BTN, lasst uns es so geben. Und lasst uns sehen, laden oder mehr lesen. Und ich werde meinen Marker hier noch einmal benutzen. Ich werde es so meinen Knopf nennen. Und ich werde einen anderen Stift benutzen nur um zu veranschaulichen, wie viel Zeit mich das braucht. Also dieses nur um unter OK Schatten um meinen Knopf hinzuzufügen. So können Sie im Grunde nur aus diesen drei Beispielen sehen, was Sie damit machen können und wie die Unterscheidung untereinander. So haben wir die einfachste Version, schnellen Speicher und die, die Sie die meiste Zeit verwenden werden. Jetzt haben wir ein wenig langsamere Version, aber Sie können einige der Elemente aus der Dispersion in dieser Version verwenden. Und wir haben die langsamste Version, aber die detaillierteste Version und die, die Sie wahrscheinlich nie verwenden werden. Aber ich wollte dir das zeigen, das sowieso. Für die Avatare und Bilder der toten Sortierung empfehle ich, irgendeine Art von Icons zu verwenden. Nehmen wir an, Sie haben Funktionen auf Ihrer Seite. Und anstatt nur einen Kreis wie diesen aufzunehmen und ihn einen Tag zu nennen, können Sie vielleicht so etwas tun. Vielleicht können Sie einen Stern, unsere Ikone der anderen Art, und in einem der Wireframes darauf hingewiesen, dass dies eine Funktion ist. Mal sehen. So können Sie wissen, dass Ihre Kunden Entwickler und Designer kennen können und so weiter, was das eigentlich ist. Das war's also für dieses Video. Ich hoffe wirklich, dass Sie einige Unterschiede zwischen diesen Wireframing-Stilen verstanden haben. Im nächsten Video, wir werden tatsächlich eine mit dieser Navigation starten. Und wir werden tatsächlich beginnen, einige Seiten zu entwerfen und einige Elemente zu legen. Also sehe ich dich dort. 18. Paper: In diesem Video beginnen wir mit unseren Wireframes und wir werden mit der Homepage beginnen. Homepage wird im Grunde unsere grundlegende Ausleihseite sein, die eine Mehrheit der Informationen, die sie anbieten, sowie mit einer Art von einem Blog-Post oder Nachrichten oder so etwas zeigen wird. Um loszulegen, werde ich schnell einen Umriss zeichnen, den Sie bemerken, dass ich kein Lineal verwende. Sie können die Lineale verwenden, wenn Sie möchten. Ich denke, es ist schneller so, besonders Geschichte oder Naughts, die wie ich andocken. Aber wenn Sie Lineale verwenden möchten, um es schick zu machen, wenn Sie dies mit Ihrem Kunden teilen, wenn Sie ein bisschen professioneller aussehen möchten, empfehle ich, ein Lineal nur im Grunde für diese Umrisse zu verwenden. Also, wenn Sie sich erinnern, wir haben diese obere Navigation und wir haben diese untere Navigation. Ich werde nicht zu viel Zeit verschwenden und all das aufschreiben. Also werde ich nur tiefer ziehen, ich werde nur einloggen. Denn wir wissen, was diese bereits aus diesem vorangegangenen Beispiel sind, das ich Ihnen gezeigt habe. Und weil ich es zur Hand habe, kann ich es immer überprüfen und sehen, was alles ist. Anstatt also etwas aufzuschreiben, weil dies unsere Homepage ist, werden wir nur dieses leer leben, weil Benutzer nirgends geklickt haben. Wenn sie zum Beispiel auf Konten klicken, sehen wir, dass wir diesen Selektor direkt hier unten verwenden können. So können sie wissen, dass die angeklickten Konten und sie sind derzeit auf dieser bestimmten Seite. Aber weil nichts angeklickt wird, lassen Sie es einfach so leer. Lassen Sie mich also einen weiteren Umriss auf dieser Seite zeichnen. Und ich mache das immer gerne, weil ich auf dieser Seite einen leeren Raum habe , damit ich diesen Raum nutzen kann, um mich selbst zu erinnern und mir Notizen darüber zu geben was all diese Dinge auf dieser Seite der Seite sind. Also, um loszulegen, werde ich in ein Heldenbild zeichnen. Also werde ich es einfach so zeichnen. Und hier sind Bilder, im Grunde etwas, das die Aufmerksamkeit Ihrer Benutzer lenkt. Also in diesem Fall werden wir Bild und einen Text verwenden. Wir werden das Bild auf der rechten Seite verwenden. Also hier, und ich werde tatsächlich ein Bild zeichnen, wie wir es zuvor getan haben. Also lassen Sie mich das tun. Lassen Sie mich Dreck machen, und nennen wir es einen Deal. Lassen Sie uns ein Bild geben. Und vielleicht können wir Menschen Bild verwenden. Menschen sind mg, weil D wollen dis Website und ihr Schwerpunkt liegt auf jüngeren Menschen. Vielleicht können wir hier ein paar Leute machen. Vielleicht können wir eine Gruppe von Leuten machen. Vielleicht können wir männlich und weiblich machen, weil sie nicht geschlechtsspezifischer Kunde sind. Sie wollen auch männliche und weibliche Klienten. Was wir hier auf der rechten Seite tun können, ist Titel, Text oder Untertitel, wie Sie es nennen wollen, und eine Stadt. So wird es uns zu einem Teil der Website führen, der für sie wichtig ist. So können Sie jetzt ein wenig besser als Zoom-in-Hub sehen, all das irgendwie unten schauen, können wir einige Dienste treffen. Also lasst uns Dienste aufschreiben. Und offensichtlich wird Kopie von ein paar Dingen abhängen. Hat Client Ihnen die Kopie REO zur Verfügung gestellt, die die Kopie erstellt, aber für den Drahtmodell-Teil und für das Projekt und diesen Teil des Projekts, müssen Sie nicht zu spezifisch sein. Sie können diese Tags immer innerhalb von Adobe XD ändern , wenn Sie diese Wireframes tatsächlich einbauen. Also für diese Dienste können wir einige Boxen verwenden. Geben wir ihm zum Beispiel drei Boxen so. Und für die Boxen, Vielleicht kann ich einige Symbole verwenden. Genau hier oben links. Ich kann ihm einen Titel geben. Ich kann ihm einen Absatz wie diesen geben und vielleicht mehr lesen. So können Benutzer dann direkt hier klicken und lassen Sie es uns geben. Ich verstehe. Und weil diese manchmal einfach zu klein sind, um jede Art von Icons zu zeichnen. So können Sie einfach Ihren Pfeil zeigen und sagte, dies ist ICN. Lasst uns diese anderen machen. So induzieren ich mehr lesen, lesen Sie mehr. Und wie Sie sehen können, schreibe ich einfach auf und Sie können deutlich sehen, wie schnell das ist. Und eins ist auch, dass du sehen kannst, dass ich sie auf einer Seite ausrichte. Ich fühle sie auf der anderen Seite, weil ich tatsächlich ein Gitter im Inneren benutzen werde. Und deshalb zeichne ich meine Drahtmodelle so. Unten. Was wir einschließen können, ist, weil es eine Bank ist, können wir zum Beispiel einen Wechselkurs einschließen. Und vielleicht können wir so einen Strip machen. Veränderungsrate. Das Date wird genau hier sein. Du merkst, dass ich nur Date aufschreibe. Ich werde das eigentliche Datum an diesem Punkt nicht einschließen. Wir können Flagge und Informationen direkt hier machen, also ist das unsere Flagge. Und wir können einige wichtige Währungen wie Euro tun, USD, japanischer Yen, und so weiter, was auch immer in diesem Markt und bei dieser Bank in einem erfordert, Sie sehen nicht, Ich verschwende keine Zeit, sondern indem Sie alles aufschreiben. Und das ist unser erster Stil, den ich dir zuvor gezeigt habe. So können Sie schon sehen, ich kombiniere diese beiden Stile, diesen Stil für das Bild. Und Sie können sehen, dass es genau hier ist. Und im Grunde dieser andere Stil für all diese anderen Elemente, weil ich das einfach schnell machen möchte. Ich wollte schnell sein und einige Ideen runterspülen, die ich bereits habe. Was wir hier tun können, ist ein Bild zu zeichnen, weil sie einige ihrer mittleren Funktionen enthalten wollen, die sie verwenden. Also nennen wir es Titel. Geben wir ihm einen Absatz. Elemente, gib es btn. Und weil das vielleicht ihre Server ist, das ist ihre Promo, das irgendwann ich Schulden. Darunter, was wir tun können, ist eine andere Box oder vielleicht Toolboxes zu verwenden und zusätzliche Dienste und dass sie haben. Also lasst uns ihm ein Bild geben. Also, ich mg. Sie können dies auch tun. Oder du kannst das tun, was immer du willst, was auch immer es einfacher ist. Und dann vielleicht Titel, vielleicht Absatz. Und wir können eine Schaltfläche unten hinzufügen. Dies btn nur damit Sie wissen, was es unter diesen Nachrichten ist. Und was wir tun können, ist drei GridLayout hier einschließen. Bilder. Sie können sehen, wie schnell und chaotisch dies zu Hause ist, ohne gerade Linien zu verwenden. Ich ziehe nur auf, was ich gerade in meinem Kopf habe. So können wir einen Titel haben, Untertitel und vielleicht ein Lesen mehr. Auf all diese. Darunter können wir einen Informationsstreifen haben. Ich würde sagen, vielleicht kann ich hier ein Logo einfügen, nur um Leute daran zu erinnern. Also hier haben wir eine Telefonnummer. Zum Beispiel. Hier haben wir, mal sehen, Standorte. Und endlich hier haben wir eine E-Mail. So können sie schnell dieses Unternehmen erreichen und mit ihnen in Kontakt treten. Und schließlich, was wir unten haben, ist die Fußzeile. Und Fußzeile wird im Grunde eine große sein , weil diese Bank viele verschiedene Dienste hat. Das sind also unsere Hauptdienstleistungen aus unserer Navigation. Und das werde ich Ihnen in einer Sekunde zeigen. Also, wenn ich das zurückbringe, können Sie das Video sehen. Wir haben Konten, gehört, Autos und so weiter. Das ist also, was das sein wird. Das wird also Konten, Lungen, Karten und so weiter sein . Und unter jedem dieser werden wir zusätzliche Navigationselemente haben. Ich, Fotoartikel. Denn zum Beispiel, lassen Sie uns sagen, dass dieses Konto dieses ist. Und wie ich bereits erwähnt habe, haben sie Scheckkonten, Sparkonto und so weiter. Das sind also was, die sind genau hier. Wir werden schreiben oder tippen Logo oder was auch immer n, nennen wir es einen Tag. Und das ist im Grunde unser Heimatstrand. Also, was Sie auch tun können, ist, dass Sie oben oder Feature von ihnen schreiben können. So induziert Homepage. Wie Sie hier oben sehen können. So haben wir hier Homepage, nur so dass, wissen Sie, Designer, Kunden und alle anderen wissen, auf der gleichen Seite sind. Jeder weiß also, was das ist, ist, dass man sehen kann, dass dieser Prozess uns nicht wirklich lange gedauert hat, zehn Minuten, weil ich zu viel rede. Aber Sie können sich vorstellen, wenn Sie Ideen runterspülen, können Sie so etwas in 3-5 Minuten tun. Es hängt wirklich davon ab, wie groß die Seiten sind, wie viele Elemente es gibt und was Sie einschließen möchten. Eine letzte Sache, die ich tun möchte, denn wie er sagte, ich verlasse diesen Raum hier. Also für diesen hier, ich brauche nichts, weil es sagt Dienstleistungen dies als Wechselkurse, also wissen Sie, was es ist. Aber dafür kann ich vielleicht Promo oder etwas anderes sehen, vielleicht bieten. Und wir können mit dem Kunden sehen, was eigentlich wichtig ist, hier einzubeziehen. Für diese, vielleicht Pakete oder Konten oder kombiniert wie Schmutz. Und das sind nur Nachrichtenartikel. Ein anderer Stil, den Sie tun können, ist, Ihren Drahtkörper in die Mitte Ihres Papiers zu legen und dann links und rechts leere Räume zu haben. Und Sie können diese leeren Leerzeichen verwenden, um all diese zusätzlichen Informationen aufzuschreiben , die Sie auf Ihrer Seite verwenden werden. Das ist es im Grunde für dieses Video, ich werde Sie im nächsten sehen, wo wir mit den Konten beginnen werden und wir werden im Grunde das gleiche Layout verwenden, aber einige Unterschiede. Und das werde ich im nächsten Video erklären. Also sehe ich dich dort. 19. Paper: Also in diesem Video werden wir mit Konten beginnen. Und wenn Sie nicht zu viel Papier verschwenden wollen, können Sie tun, was ich mit diesen Beispielen getan habe. So können Sie eine Seite für einen Phage verwenden, können Sie andere Website für andere Seiten und solide verwenden. Aber weil ich dieses Blatt Papier habe und ich werde es für einige andere zukünftige Projekte verwenden. Sie können einfach ein Auge darauf behalten, Papier zu verschwenden und im Grunde zu viel Geld auszugeben. Fangen wir mit den Konten an, wenn du dich daran erinnerst, und ich bringe das nur dazu ein, dich auf dem Laufenden zu halten. Wir haben hier Konten und ich werde es aufschreiben. Also werden wir dasselbe tun, wie wir es für den vorherigen gemacht haben. Diese Woche. Wir werden die Spitze einschließen. Nun, wir werden ein Nickerchen Seite einschließen. Also im Grunde diese Box Stil nav, Logo-Taste, btn und Konten wie diese. Ich weiß nicht, wie ich ihn heute buchstabieren soll, der dem keine Aufmerksamkeit schenkt. Wenn ich das also entferne, um zu entscheiden , können Sie deutlich sehen, wenn ich etwas näher heranzoomen, dann sind es Konten und nur um euretwillen, und wir werden es hier aufschreiben, also so. So kann es oben auf der Seite wissen, was es ist und was Sie brauchen, um auf diese zu ziehen. Und ich empfehle Ihnen wirklich, dies für alle Ihre Seiten zu tun. Aber lassen Sie uns jetzt weitermachen. Also werde ich das nur ein bisschen verlängern. Was wir eigentlich tun werden, ist im Grunde das gleiche Layout zu verwenden , wie wir es hier mit der Homepage getan haben. Also werde ich diesen gleichen Helden Abschnitt für alle meine Seiten verwenden, weil es mir eine große Gelegenheit gibt , nur einige wichtige Unterschiede zwischen all diesen Seiten zu zeigen. Aber lassen Sie uns etwas Wendung geben. Anstatt es wie hier auf der Homepage zu tun, wo sich das Bild auf der rechten Seite befindet. Text befindet sich auf der linken Seite. Lasst es uns umdrehen, und lasst uns das machen. Lasst uns also eine Linie wie diese für unseren Heldenbereich zeichnen. Und lasst uns einen Image-Helden machen. Also im Grunde das Gleiche. Und ich werde es hier setzen, damit die Leute, ich bin G. Wie Sie sehen können, lassen Sie mich etwas näher heranzoomen. So die Menschen Bild und nur so, dass ich nicht, was das ist. Und ich kann den Titel hier setzen, Text und CTA. Nun, dieser Aufruf zur Aktion muss Sie nicht wirklich zu zusätzlichen Seiten führen , wie er auf der Homepage ist. Denn auf der Homepage möchten Sie werben, was für Ihr Projekt, Ihre Marke oder was auch immer am wichtigsten ist. Aber auf diesen inneren Seiten, was dies eigentlich ist, weil wir auf dem Konto Rede sind. Sie möchten tatsächlich Bereiche dieser Seite heraufstufen, damit Sie nicht möchten, dass Menschen verlieren und zu viel Zeit verschwenden. Du willst sie direkt zu diesem Abschnitt bringen. So haben wir ein Konto, wissen wir, zum Beispiel, von Banken Erfahrung. Die Mehrheit der Menschen eröffnen ein Girokonto. So können Sie, wenn Sie dort klicken, kann es sie direkt zum Girokonto Abschnitt bringen. Also, was wir tatsächlich werden, um dies unten zu schreiben, ist vielleicht öffnen Sie Ihr perfektes Konto oder Ihr Konto oder was auch immer. Heute oder wie Sie wollen zu strukturieren Todesfälle sind auf, wie man Daisy und Tom Angst schreiben geschrieben. Dann ist die Aufmerksamkeit, die, also was wir tun können, ist eine Reihe von Symbolen sah, sagen wir, dass sie für Dienste haben? So können wir für verschiedene Symbole wie diese verwenden. Also das ist i, c, n. Und hier können Sie tatsächlich zeichnen, weil diese etwas größer sind, können Sie Sterne zeichnen, zum Beispiel, nur um anzuzeigen, dass dies Ihr Symbol ist. Sie können jede andere Materie verwenden, die Sie so zeichnen können. So ist es wirklich an Ihnen, wie viel Zeit Sie wollen, um in diese eine offensichtlich zu investieren sah, die schnell kritzeln kann und Sie können direkt dort sehen. Also sind diese Konten im Grunde verschiedene Konten und ich werde tatsächlich die Namen dieser Konten schreiben. So zum Beispiel herb, ausländische, tausendjährige und Prämie. Ich schreibe tatsächlich d Kontonamen, die mir die Bank zur Verfügung gestellt hat, damit ich weiß, welcher welcher ist. Jetzt werden diese Symbole ein wenig anders sein weil wir illustrieren wollen, was der Benutzer angeklickt hat. Wenn der Benutzer also etwas geklickt hat, das Symbol vielleicht schwarz und weiß. Und alle diese Symbole sind in Farbe. Also lasst uns das aufschreiben. Also ICM, schwarz und weiß. Wenn Sie darauf klicken, Farbe, wenn nicht. Sie können hier auf dieser Seite sehen. Also ist dieser Abschnitt hier, wie ich immer wieder sage, offensichtlich wirklich hilfreich, weil Sie ihn zu Ihrem Vorteil nutzen können. Sie können ein paar Notizen aufschreiben. Wenn Sie wieder zu diesem Projekt zurückkehren, sagen wir mal eine Woche später, wenn Sie diese Wireframes einem Kunden zeigen, warten Sie vielleicht auf die Antwort, vielleicht kommen sie in einer Woche, zwei Wochen oder was auch immer zurück. Sie werden in der Lage sein zu verstehen und zu wissen, was Ihr Denkprozess war, als Sie tatsächlich D. erschaffen haben Deshalb sage ich immer wieder, dass dieser Raum wirklich nützlich ist. Und jetzt unter Schreibtisch, aber sehen Sie, dass dieses Symbol ausgewählt ist. Nehmen wir es ein bisschen. Und nur um zu zeigen, dass es ausgewählt ist, Vielleicht können wir einen Schlagschatten um ihn herum tun, nur so dass wir zeigen, dass es ausgewählt ist. Darunter können wir vielleicht ein Bild einschließen. Vielleicht können wir einschließen, also sagen wir Start Konto. Weil es das ist, was es ist. Wir haben hier einen Absatz, und wir haben einen Aufruf zum Handeln. Und vielleicht kann es sagen, jetzt bewerben. Und wenn ein Benutzer auf diese Schaltfläche jetzt anwenden klickt, wird er sie zum Online-Forum bringen, das eine Bank bereits vorbereitet hat. Wir werden dies nicht entwerfen weil Sie oft mit Ihren Kunden sprechen werden, was sie vorbereitet haben, was sie nicht haben. Ich gebe Ihnen ein Beispiel, ein kurzes Beispiel, und das, das Sie die meiste Zeit sehen, unsere Karten, viele Unternehmen nutzen Google Maps, weil die Integration mit der Website extrem schnell ist. Es ist extrem einfach. Jeder kann es tun, besonders kleinere Unternehmen mit Plug-Ins, wenn Menschen WordPress-Websites verwenden, zum Beispiel Plug-Ins überall. Warum also Ihre Zeit verschwenden, Kundenbudget verschwenden, indem Sie eine Karte neu gestalten, was Sie in Maps Fall tun können, ist einfach Rechteck zu machen und Karte aufzuschreiben. In diesem speziellen Fall. Viele der Male brauchen Kunden auch einige Media-Player. Also wieder einmal, Integration ist im Grunde wagen. Sie integrieren nur wagen, um Media-Player. Und in diesem Fall verwenden sie im Grunde ein Formular. Sie verwenden ein Online-Formular, das sie bereits haben, das bereits funktioniert. Und es spielt im Grunde keine Rolle, wie es aussieht. Also, wenn der Benutzer hier auf diese Schaltfläche jetzt klickt, wird es sie extern zu einem Formular bringen , das sie mit ihren persönlichen Informationen ausfüllen werden. Und vielleicht kann es sie auf die Bestätigungsseite bringen , die Sie zum Design führen und sehen können, mit abgelehnt, wenn das notwendig ist. Wenn sie die Bestätigungsseite nicht haben, wird sie zum Beispiel auf diese Seite zurückbringen, sobald sie sie tatsächlich dort ausfüllen. Und sagen wir, unser kleines Pop-up kann auftauchen und ihnen die Schulden mitteilen, der Bankkäufer wird so schnell wie möglich zu ihnen zurückkommen. Unterhalb dieses Abschnitts, was wir tatsächlich einschließen und Zerstörung wird auf allen Seiten sein, sind häufige Fragen. So häufig gestellte Fragen. Und für diesen, geben wir ihm Division von drei. So wie das. Wie Sie sehen können, ist dies extrem chaotisch, extrem schnell. Aber das ist der Sinn dieser Papier-Drahtmodelle. Also werden wir ICN verwenden. Ich sehe, und ich sehe n genau hier. Also haben wir Titel, wir haben einen Absatz, der zum Beispiel den Abschnitt dieses einen erklärt . Also lassen Sie uns sagen, dass dies unsere Kontofragen, Bankfragen, hilfreiche Tools, was auch immer, und Links können hier in Form des Textes sein. Also lasst uns das aufschreiben. Ich sehe Titel plus Absatz und dann Antworten. Klickbare Antworten wie diese. Darunter werden wir unseren unendlichen Streifen haben. So Logo. Was wir getan haben, ist, Mitgliederstandort, Telefon und E-Mail hier zu feuern . Wir werden tatsächlich Informationen hier aufnehmen, aber verschwenden Sie nicht zu viel Zeit in diesem Abschnitt. Und schließlich vier Begriff direkt hier unten. Sie können es einfach aufschreiben Fußzeile, weil wir es offensichtlich im vorherigen Beispiel hier erstellt haben. Und wenn Sie wollen, können Sie Zeit investieren, Sie können sich in die Mühe setzen und tun genau das gleiche auf all diesen Seiten. Das werde ich nicht tun. Ich will die Dinge nur ein bisschen beschleunigen. Aber noch einmal, wenn Sie wollen, wenn Sie Zeit haben, wenn Sie Budget haben, können Sie das für alle Ihre Seiten tun. Also lassen Sie mich ein wenig zoomen. Wie so einfach können Sie sehen, wie unsere Seite im Moment aussieht. So wie Sie sehen können, nimmt alles schön Gestalt an. Alles sieht so aus, wie es sein sollte fangen schon an, eine Art Layout zu bekommen , das wir auf allen Seiten verwenden werden. Wie ich bereits erwähnt habe, haben wir unser Top nav. Wir haben diese Box jetzt, das ist unsere mittlere f. Wir haben den Heldenbereich, den wir tatsächlich kopieren werden Einfügen auf alle unsere anderen Seiten. Wir haben bereits einige Layouts, die wir untersuchen und in zusätzlichen Seiten in Form dieser Icons verwenden können . Wir haben bereits diese Bilder würde Text und eine Schaltfläche, so dass wir sie spiegeln können. Zum Beispiel können wir ein Bild oben setzen, wir können Text unten setzen und dann Knopf auf einer Seite. Wir haben auch diese Karten, die wir erkunden können. Und zum Beispiel, in einigen von ihnen, können wir vielleicht Bilder direkt hier aufnehmen. Wir können vielleicht verschiedene Art von Tasten und so weiter. So beginnen wir bereits, diese Layout-Beispiele und diese Layout-Ideen zu haben. Also, im nächsten Video, wir tatsächlich zu Krediten übergehen. Und ich werde Ihnen im Grunde die gleiche Dengue zeigen, aber in einem anderen Paket, nur damit Sie sehen können wie Sie Abstieg Konzept auf anderen Seiten erkunden können. Also sehe ich dich dort. 20. Paper: Also in diesem Video werden wir weitermachen, wo wir im vorherigen aufgehört haben und wir werden mit der Seite „Darlehen“ beginnen. Sie können sehen, dass ich bereits alle diese Informationen enthalten habe, um ein bisschen Zeit zu sparen. Also im Grunde dasselbe wie bei diesen anderen, aber genau hier, es sagt ein Darlehen. Wenn Sie es ein bisschen besser sehen können. Hier. Und darunter, was wir tun können, ist das gleiche Layout wie im vorherigen zu verwenden. Und ich werde einschreiben, ich brauche auch eine lange Zeit. Und Sie können sehen, ich fange an, hier einen echten Text zu verwenden. Und ich habe bereits gesagt, dass Sie in den vorherigen Videos eine Kombination aus echten und gefälschten Texten machen können. Und ich denke nur, dass dies angemessen ist, um etwas Ähnliches auf ihrer Website im Moment bereits zu haben. Aber ich werde notieren, ich brauche einen Kredit an und dann können Sie ihnen im Grunde das gleiche Layout geben , wie wir es im vorherigen Video getan haben. So können Sie zum Beispiel und diese Informationen einschließen. So schnelles Bargeld. Und wir können hier auch Symbole verwenden, wie wir es in den vorherigen Beispielen getan haben. Biokohle, Haus und Finanzen oder was auch immer. Also werden wir dies offensichtlich in der Wireframing-Sitzung ändern, aber das ist nur ein kurzes Beispiel. Nehmen wir also an, dass dies das ist, was sie im vorherigen Beispiel gesehen haben. Also schnelles Barkredit, und vielleicht können wir es aufschreiben und in 20 Minuten oder 30 Minuten Geld bekommen oder was auch immer. So wie das. Dies wird offensichtlich in den Abstammern zentriert sein. Aber weil ich es nur freihändig mache, siehst du hier ein bisschen weg. Sie können auch darauf hinweisen. Zentrieren Sie Text so, nur damit Sie es wissen können. Und dann ging ich zu einem ähnlichen Layout. So Bild auf der linken Seite. Aber statt nur der Text, können wir eine Art von Funktionen erstellen. Also lassen Sie es uns hier ICN geben. Und sehen wir Bargeld in 30 Minuten mit so einem Text. Richtig? Verzerren Sie es. Icm-Dokumentation. Vielleicht müssen sie einige Unterlagen vorbereiten, weil Sie nicht einfach bei einer Bank auftauchen und um einen Darlehensvertrag bitten können. Ich werde Sie um ein paar Informationen bitten. Zum Beispiel, Ihren Führerschein, Sie sind derzeit Informationen Prärien Bankinformationen und so weiter und so weiter. Mal sehen. Online, weil Sie dies vielleicht online tun können. Wenn ich das also mit unserem vorherigen Beispiel vergleiche, können Sie bereits sehen, was ich hier mache. Also verwende ich dieses vorherige Beispiel mit einem Bild, Text und einer Schaltfläche. Und Sie können sehen, dass ich all diese ähnlichen Prinzipien im Grunde diesem Beispiel implizierte. Anstelle von Text verwende ich Symbole und das Textbild befindet sich immer noch auf der linken Seite, aber vielleicht kann es jetzt etwas größer sein, um all diese Informationen aufzunehmen. Dies kann schmaler sein, abhängig von diesem Text, Sie müssen über all diese Dinge denken, weil das responsive Design. So reagiert später nicht, vielleicht kann dieses Bild auf einem Telefon, mal sehen, in voller Breite gehen. Und dann können alle diese übereinander gehen, wie sie hier sind, aber in der Mitte Ihres Bildschirms, weil Sie auf dem Telefonbildschirm sind. Lasst uns weitermachen und ein paar andere Dinge entwerfen. Also lassen Sie uns Schulden sehen. Ich kann hier zum Beispiel eine Antwort in 20 Minuten schreiben . Weil sie mit diesen Kredite wirklich schnell sind. Vielleicht kann ich hier einen Textabsatz setzen und zum Handeln auffordern, in dem heißt, jetzt gelten. So wie das. Anstatt all diese anderen zusätzlichen Dinge zu zeichnen, wenn Sie sich aus dem vorherigen Video erinnern und sorry, das nett, ich ziehe nur Papiere ein und aus. Anstatt diesen ganzen Abschnitt zu zeichnen, schreiben wir einfach Com-Fragen und setzen drei Boxen, weil es für uns viel einfacher sein wird zu verstehen, was es ist. So häufig gestellte Fragen. Ich werde drei Boxen wie diese setzen, um Platz und Zeit zu sparen. Das ist unser Info-Strip. So Logo, weil diese Icons sind wirklich einfach, können Sie sie leicht zu zeichnen. Und schließlich haben wir E-Mail, wie Sie sehen können. Und schließlich können wir in Fußzeile und Logo an der Unterseite schreiben. So können Sie sehen, dass dieser Prozess Sie nicht zu viel Zeit in Anspruch nehmen muss. Sie können es wirklich leicht und in einer schnellen Art und Weise tun. So können Sie sehen, dass wir im Grunde ein ähnliches Layout zum vorherigen Strand haben, aber wir erkunden es auf eine andere Art und Weise. Also, stattdessen, wie gesagt, ein Bild und Text und eine Schaltfläche rechts hier haben wir ein Bild Symbol, Text und Schaltfläche unten bewegt, die es jetzt angewendet Call-to-Action-Taste, dies und dies und das, im Grunde das gleiche. Dies und all diese Top-Teile sind im Grunde gleich. Also werden wir einfach weitermachen, wo wir aufgehört haben, mit all unseren nächsten Stränden und Schulden werden nach diesem hier kommen. Und wir werden diese Elemente im Grunde auf verschiedene Arten verwenden. Das war's also für dieses Video, und wir sehen uns im nächsten. 21. Paper: Lassen Sie uns nun eine Seite für die Karten erstellen. Also für diese Rede, Diakon, verwenden Sie verschiedene Karten oder Kreditkarten, Debitkarten. Sie können ihre eigenen Karten und vielleicht sogar Geschenkgutscheine erstellen , so dass sie diese Option auch erkunden können. So können wir hier einen Titel haben, vielleicht kann es täglich Begleiter aufschreiben. Mal sehen. Tut mir leid wegen der Dogging und Hintergründe, wenn Sie es hören können. Aber er kann nichts dagegen tun. Vielleicht können wir unseren Absatz direkt hier machen. Und mal sehen, dass wir unser aktuelles Bild hier einbinden können. Also vielleicht ist das ein Wagen oder 1-2-3, 4-5-6. Und ich kann es sogar hier aufschreiben. Karte, um ein bisschen Zeit zu sparen. Logo kann hier gehen, Visa kann vielleicht hier gehen. Und der Kingo hier. Wie Schulden, nur damit wir wissen, dass dies ein Wagen ist. Vielleicht können wir es in eine Art Form bringen. Vielleicht können wir Adobe XD verwenden, um einige verschiedene Animationen darin aufzunehmen, aber es ist wirklich bis, wieder, Zeit Budget und alles andere, über das wir zuvor gesprochen haben. Nun, es ist ein Toter unter Dat. Wir können Kreditkarten benutzen. Und vielleicht können wir mit Visa und MasterCard wachsen. Vielleicht haben sie ein paar andere Optionen, aber wir wissen es im Moment nicht. Aber wenn sie das tun, können wir hier verschiedene Arten von Abschnitten einschließen. Also für diesen Abschnitt, können wir eine aktuelle hinzufügen. Und ich werde eigentlich aufschreiben. Und mal sehen, Visa, Kreditströme, Muster aktuelle. Und im Grunde das Gleiche. Wir können eine Beschreibung haben und vielleicht können wir uns jetzt als Link bewerben, sie tatsächlich in das externe Apply Forum bringen wird , über das wir in den vorherigen Videos gesprochen haben. Vielleicht können sie einfach hier klicken und zu diesem äußeren Formular gehen. Das ist also nur unsere Grafik. Dies ist nur, um ihnen zu zeigen, wie einige Karten im Bus aussehen können. Wie einige benutzerdefinierte Karten aussehen könnten, nur um ihnen ein visuelles Interesse zu geben. Aber hier, wie die Scroll nach unten, können sie Kreditkarten sehen und bieten unsere Visa und MasterCard, vielleicht können sie einige andere wie American Express oder was auch immer andere Hersteller von Karten D nicht schließen können, wagen. Dissektionen sind also ungerecht, um Benutzer zu dem zu führen, was im Moment verfügbar ist. Also werden wir die gleichen Abschnitte einschließen, aber für Debitkarten werden wir das Gleiche hier haben. Also zwei Karte Strom. Und lassen Sie uns nicht zu viel Zeit verschwenden, weil diese Abschnitte das gleiche sind, gleiche Aussehen und Gefühl. Anders. Karten-Design. So können wir zum Beispiel ein anderes Fahrzeugdesign im Inneren einfügen. Nur um zu veranschaulichen, dass Debit- und Kreditkarten unterschiedlich sind, so dass sie sehen können , zum Beispiel, wenn Sie sie in ihrer Brieftasche haben, können sie sehen, welche Debit ist, welche ist Kredit, offensichtlich, Mitte, dass wir einen Abschnitt haben, zum Beispiel, erstellen Sie Ihre eigenen so. Und vielleicht können wir eine andere Strömung mit etwas Design einschließen , können wir einen Schlagschatten setzen, vielleicht können wir eine Hintergrundform oder eine Art oder was auch immer und einfach benutzerdefinierte Strom wie das setzen . Wir werden also später auf einer Website außerhalb von Adobe XD entwerfen. Und vielleicht können wir einen Aufruf zur Tat umsetzen. Erschaffe deine. Diese CTA wird sie tatsächlich in die Form bringen d müssen, um das Formular auszufüllen, das die Bank bereits hat. Sie können dann beginnen, ihre perfekte Strömung zu erzeugen. Nehmen wir an, dass sie diesen Cart-Schöpfer innerhalb der Bank haben, also müssen sie im Laden wachsen und verschiedene Optionen sehen. Aber sie planen, diese Optionen online zu bringen , damit die Menschen aus verschiedenen Formen und Farben wählen können , sie können Visa, MasterCard wählen , gibt es Hersteller? Sie können zum Beispiel verschiedene Bilder im Inneren enthalten und so weiter. Aber das ist alles mit der Bank, das ist alles bei ihnen. Was sie den Benutzern für diesen eine D-Option geben wollen. Schließlich, unten, dass wir einen Abschnitt mit einem Bild und nennen Sie es und Geschenkkarten. Wir können einen Absatz und zum Beispiel, und doch Ihren hinzufügen. Und sie können sich für den Geschenkgutschein bewerben. Sie können das Geld am Ende auf das Auto legen, können es dann als Geschenk für einige ihrer Familienmitglieder, Freunde, oder was auch immer. Darunter werden wir häufig gestellte Fragen haben. Wir werden dasselbe tun wie auf der vorherigen Seite. Wir werden Info-Streifen haben, also Logo, Standort, Telefon, E-Mail. Und schließlich Fußzeile unten. Sie werden bemerken, wenn ich ein bisschen so zoomen, werden Sie feststellen, dass besonders dieser Abschnitt am unteren Rand wirklich zerquetscht ist. Aber das ist wirklich absichtlich, weil die wichtigste und differenzierende Sache an dieser Seite Abschnitt von hier ist. Also direkt unter Heldenbild, bis hier, nur über häufig gestellte Fragen. Und weil wir das bereits haben, ist dies im Grunde das gleiche, was wir auf den vorherigen Seiten entworfen haben. Also, wie wird Ihnen an diesem Beispiel zeigen? Das ist also unsere Homepage. Wir werden im Grunde das gleiche genaue Layout mit einem Bildtext und einer Schaltfläche verwenden. Nur verengt das Bild ein wenig. Zum Beispiel, vielleicht ein wenig weniger Text enthalten. Vielleicht ist dieser Absatz viel größer als dieser und so weiter. Vergeuden Sie also nicht zu viel Zeit in Ihren Drahtmodellen, dass wir immer wieder dieselben Elemente zeichnen und versucht haben, sie perfekt aussehen zu lassen. Sie wissen bereits, dass dies ein Bild ist. Bild kann größer und breiter oder schmaler sein, was auch immer. Es kann haben, einen Schlagschatten und so weiter, so weiter. Vergeuden Sie also nicht zu viel Zeit darauf, ziehen Sie es einfach und gehen Sie weiter. Dieser Teil, wie ich schon mehrmals sagte, ist nur ein gespült alle Ihre Ideen, die Sie in Ihrem Kopf haben. Und Sie wollen sie auf ein Stück Papier legen, nur damit Sie es dem Kunden oder anderen Designern zeigen können . Das ist unser Kartenstrand. Und im Grunde verengen wir uns bis zum Ende unseres Drahtmodellprozesses. Also haben wir digitale Login investiert und ich werde Ihnen einen Dashboard-Strand später zeigen. Also sehe ich dich im nächsten Video, wo wir weitermachen, um Strand zu investieren. 22. Paper: Lassen Sie uns jetzt zum Invest Beach gehen. Und wieder so wie zuvor, hier ist alles gleich. Also lasst uns jetzt weitermachen und das ist das Schreiben, in das ich investieren möchte. Und wir werden tatsächlich das gleiche Layout wie zuvor haben. Also werden wir ihnen vier verschiedene Optionen geben, Soul und sehen, dass diese erste Bildung ist. Ich, das, dieser zweite ist Immobilien. Also drittens ist die Familie. Und schließlich ist das für die Rentenschulden. Und wir werden hier verschiedene Symbole einschließen. Ich werde sicherstellen, dass dieses wie in allen anderen Beispielen gleich ausgewählt wird. Und darunter können wir einen anderen Titel hinzufügen. Investieren Sie also in eine hellere Zukunft oder in Zukunft. Kopieren. Wir werden darüber reden, eine spätere Frauen wollen Adobe XD. Also werden wir diesmal ein bisschen anderes Layout haben. Also wirst du zwei Bilder haben. Sie werden also im Grunde bemerken, wie ich weiter spreche, das ist genau das gleiche, nur ein bisschen anders positioniert. Also werden wir hier einen Titel haben. Text und eine Schaltfläche. Call-to-Action, vielleicht erfahren Sie mehr. Also Titel und Aufknöpfen. Vielleicht CTA. Darunter werden wir ein anderes Bild haben, damit es von hier aus gehen kann. Und mal sehen, es wird Ihre Zukunft sicher schreiben. Aber wir werden einen Absatz von Text und Call-to-Action-Schaltfläche haben, zum Beispiel, erfahren Sie mehr. Und was dieser Abschnitt mit einem Bild macht. Und Sie können diesen gleichen Abschnitt in anderen Bart's nur zum Beispiel sehen, an einigen Stellen Bilder, die hier ausgeschnitten sind, um an das Raster zu passen. Und in einigen Fällen wird es auf die Website unserer Seite erweitert. Und im Grunde, was das ist, ist dieser ganze Abschnitt über all diese sozialen Sicherheit oder Zukunft. Sie können dies tun, indem Sie in Bildung investieren, in Immobilien investieren, in Familie investieren, in den Ruhestand investieren. Grundsätzlich sind alle diese für Ihre Zukunft. In diesem Abschnitt erfahren Sie, wie wichtig es ist, in eines davon zu investieren. Und Sie können natürlich auswählen und wählen, was auch immer Sie in die Zukunft investieren wollen, weil es Bildung ist. Und es wird Ihnen zwei verschiedene Investitionspakete für das Bildungspaket geben. Deshalb habe ich vorher über die Fußzeile gesagt, zum Beispiel werden wir all diese Unordnung von oben verschieben, die sie derzeit auf der aktuellen Website bis in die Fußzeile haben. Und wir werden tatsächlich alle diese unnötigen Elemente von der Hauptnavigation bis hier verteilen . Also statt zu haben, sagen wir, investieren und dann Bildung fallen lassen und dann herunterfallen, sagen wir zwei davon. Also vielleicht kann das Bildungsfonds sein, das kann ein weiterer Fonds sein, Legacy Stipendium für Knoten, was auch immer. Sie haben sechs verschiedene Optionen. So können Sie sich den Kalender direkt hier innerhalb der Navigation vorstellen. So ist es viel einfacher für das Auge. Es ist viel schneller für Leute zu verstehen, wenn Sie alles aus der Navigation setzen, was nicht notwendig ist. Investieren ist also notwendig, denn das ist einer ihrer wichtigsten Dienstleistungen und Schlüsselangebote. Aber all diese anderen Funktionen und andere Statistiken sind nicht notwendig, um innerhalb der Navigation zu sein. Deshalb ist es wichtig, Ihr Navigationsgerät zu entschlüsseln und Sie können all diese Informationen in die Fußzeile setzen. Wenn es zu viele Informationen in der Fußzeile gibt, interessiert es niemanden, weil das Forum immer am Ende der Seite ist, aber Sie können es immer ein wenig nach unten brauchen und einige Dropdowns für die Fußzeile als auch hinzufügen. Aber das ist der Hauptpunkt dieses Wireframing-Prozesses, nur um Ihre Ideen auf ein Stück Papier zu spülen und alles zu sehen, was Sie vor Ihnen haben, gehören hierher. Sie werden scheinen Abschnitt enthalten. So häufig gestellte Frage. Mit drei Boxen scheinen wie zuvor, werden wir Info-Strip hier einschließen. Also Logo, diese drei Symbole, so wie zuvor. So wie das hier. Und schließlich Fußzeile hier unten. Und das ist es im Grunde für diese Rede. Wie Sie sehen können, habe ich keine Notizen, aber vielleicht später, wenn ich mich an etwas erinnere, kann ich vielleicht einige Knoten einschließen. Also mal sehen, vielleicht fügen eine Box um das Symbol. Nur um zu zeigen, vielleicht, können wir vielleicht eine Box wie diese hinzufügen. Wenn das AIG Geld ausgewählt, vielleicht kann die Box einen Umriss haben. Es kann einen Schlagschatten haben, es kann etwas anderes haben, nur um anzuzeigen, dass dieses Feld ausgewählt ist und alle diese anderen Felder nicht. So können Sie immer herumspielen, wie es mit diesem Abschnitt Ihres Papiers zu sehen hält. Und nur um einige zusätzliche Informationen hier auf der Seite hinzuzufügen. Wenn nicht, können Sie es leer lassen, und das ist es im Grunde. Im nächsten Video werden wir dies beenden, indem wir unseren digitalen Pfirsich hinzufügen. Und wir sehen uns dort. 23. Paper: Lassen Sie uns nun unsere Website mit dem digitalen Zeitalter beenden. Und wie gesagt, zu Beginn dieses digitalen Bij wird all ihre digitalen Dienste haben, die Menschen von zu Hause aus auf ihren Mobiltelefonen, Laptops, Computern und so weiter nutzen können . Daryl hat also den Titel. So Dienstleistungen für die moderne Zukunft. Und wir werden das gleiche Layout wie auf all diesen Seiten verwenden. Also lassen Sie mich Konten für jeden finden, zum Beispiel. Also werde ich dies zu meinem Vorteil nutzen und im Grunde zukünftige Anrufstapel in Adobe XD verwenden, was ich später zeigen werde, wenn wir anfangen zu entwerfen. Weil ich das von Zeit zu Zeit mache. Wenn ich mit der Planung beginne, sehe ich bereits Funktionen, die ich innerhalb von Adobe XD verwenden kann , um die Dinge etwas zu beschleunigen. Und in meinem Vorteil gibt es im Grunde eine Funktion namens Stacks in Adobe XD. Das werde ich dir später zeigen. Aber im Grunde, was es tut, ist, dass Sie zwischen diesen wechseln können. So auf der einen Seite können Sie ein linkes Bild haben, auf der anderen Seite können Sie ein rechtes Bild haben. Also im Grunde sind wir nur ein Klick auf einen Knopf und einen Schalter. Sie können diese umdrehen, um die Dinge ein wenig zu beschleunigen. Wir können dies auch als Bauteil erstellen und diese Komponente während unseres gesamten Designs anpassen. So auf der einen Seite kann es volle Breite sein. Auf der einen Seite kann es so sein. So können Türen unsere Bauteilzustände sein. Also mache ich das immer als Wunsch. Planen Sie immer unseren Stink voraus. Was ich später mit meinen Entwürfen machen kann, wenn ich sie in Adobe XD-Schulden einbringe, genau das, was ich tue. Und ich habe wirklich empfohlen, dass ihr es auch tut. Wenn du gerade damit anfängst, mach dir keine Sorgen, du kannst einfach so anfangen und dann planen, wie du weitergehst. Ich versuche nur, meinen Prozess so weit wie möglich zu optimieren und meine Geschwindigkeit so weit wie möglich zu erhöhen, denn sobald ich das fertig bin, kann ich mehr Geld nach Hause nehmen. Und dann, indem ich mein Geld verschwende, meine Zeit und meine Kunden Budget für einige unnötige Dinge. Kommen wir zurück zu diesem Thema. Also für diese erste, werde ich Bild hier machen. Also nennen wir das E-Banking. Lassen Sie uns einen Absatz geben. Geben wir ihm einen Knopf. Und vielleicht kann es sagen, mehr oder wo auch immer zu lernen. Ich werde nur CTE setzen. Jetzt bei diesem nächsten, können wir hier ein Bild setzen. Dies kann m Banking sein, also mobiles Banking. Dasselbe, Absatz, CTA. Lässt mehr eins. Dies kann QR-Code-Zahlungen sein oder Heilung könnte was auch immer sein. Und natürlich werden wir uns mit Details beschäftigen, wenn wir tatsächlich zu Adobe XD übergehen. Und das ist unser letzter, virtueller Seelenassistent. Mein Dad. Wir werden einen Absatz Call-to-Action haben. Und schließlich, unten, werden wir das gleiche wie immer haben. So häufig gestellte Fragen. Diese drei Kisten sind für abgezogen. Also diese drei Symbole und unsere Fußzeile am unteren Rand. So können Sie sehen, wenn Sie nicht zu viel reden, wie schnell und einfach das ist. Also kann ich mir im Grunde eine Notiz hinterlassen, Stapel in Adobe X verwenden. Und was das im Grunde bedeutet, noch einmal, ist, dass ich eines davon erstellen kann. Ich kann einen Stapel machen. Ich kann es dann mit der Gary Bid Grid-Funktion oder einer beliebigen Funktion duplizieren. Sonst hat er zu bieten und dann einfach umgeschaltet. Also links eine rechts, eine links auf rechts, einfach mit einem Klick auf einen Knopf wird eine Menge Spaß und wirklich super einfach. Du wirst es sehen, sobald wir tatsächlich zum Gestaltungsteil gekommen sind. Also, das ist es im Grunde für diesen. Im nächsten Video werde ich Ihnen ein Login zeigen und Anmeldeformulare , wie wir Dosis entwerfen können. Ein Video. Danach werde ich Ihnen zeigen, wie Sie diese Dashboard-Seiten noch einmal auf einem Stück Papier erstellen können . Und weil es wichtig ist, weil es anders sein wird. Und wir werden unsere Navigation auf die linke Seite verschieben. Das wirst du in diesem Video sehen. Und nach diesen Videos werden wir diese scannen und sie zu Adobe XD verschieben, wo wir sie tatsächlich in Wireframes verwandeln werden. Also sehe ich dich in der nächsten. 24. Paper: In Ordnung, lassen Sie uns jetzt in den Anmelde- und Anmeldebildschirm wechseln. Also, was ich hier tun werde, wie Sie sehen können, ziehe ich zu meinem Papier. Also werde ich das auf eine größere Weise tun. Auf dieser Seite werden wir ein Bild haben. Sie können dies auch tun. Und auf dieser Seite werden wir Informationen haben. Offensichtlich nennen wir es Log In and Sign Up. Die Anmeldung wird offensichtlich ein wenig mehr Informationen als der Login haben, da Login nur Ihre E-Mail und Ihr Passwort benötigt. Zum Beispiel, vielleicht einige koordinierte Sie müssen eingeben mit wirklich variiert von Client zu Client. Was sie drinnen einschließen wollen. Wenn Sie sich für ein Konto bei der Firma anmelden, müssen Sie zusätzliche Informationen eintragen. Also für die Anmeldung und Anmeldung, können wir genau das gleiche Layout verwenden, nur ein wenig anders zwischen ihnen, wie gesagt, weil die Anmeldung ein wenig mehr Informationen hat. So zum Beispiel, für Login, Vielleicht können wir in Willkommen zurück schreiben. Und loggen Sie sich in Ihr Konto ein. Und lasst mich etwas näher heranzoomen, damit ihr das ein bisschen besser sehen könnt. Jetzt können wir ein Formular haben, so dass E-Mail und ein Forum direkt hier gehen können. Offensichtlich kann es in voller Breite sein. Ihre E-Mail-Adresse und Ihr Passwort. Schnelles Vorwärtsfahren kann hier gut gehen. So wie das. Und vielleicht können wir einschreiben, haben kein Konto. Zählt. Erstellen Sie hier einen. Und das kann ein Link sein. So kollegiate Paar Link. Und es bringt sie auf die Anmeldeseite. Das ist also unser Login Wendy Clique. Es wird sie nehmen, um sich anzumelden. Und bei der Anmeldung Vielleicht Festplatte schriftlich oder bereits ein Konto melden Sie sich hier an und bringt sie dann zum Anmeldebildschirm. Also, das ist es im Grunde. Und das sind alles die Veränderungen und der Tod müssen zwischen diesen beiden passieren , weil andere Informationen im Grunde die gleichen sind. Was wir hier tun können, ist einen schönen großen Aufruf zur Aktion hinzuzufügen, der sich offensichtlich so einloggen kann. Und vielleicht können wir in vergessenes Passwort schreiben. Weil es die Leute normalerweise tun. Und sie können sich trauen. Es könnte sie extern auf zusätzliche Seite bringen, wo sie Informationen, Sicherheitsfragen und so weiter ausfüllen können , so tot sie ihr Passwort und ihr Konto wiederherstellen können. Vielleicht können wir hier sogar einige Formen einbeziehen. Also vielleicht kann ich die Form so einbinden. Vielleicht kann es eine Kreisform enthalten kann einige verschiedene Lügen schließen und so weiter. Aber das werden wir sehen, wenn wir mit dem Design fortfahren. Eine letzte Sache darüber, bevor wir auf das Dashboard und das letzte Video unserer Wireframes auf Papier Serie gehen , ist, dass ich mich an meinem Raster halten werde. Und lassen Sie uns sagen, dass dies sechs Spalten breit ist. Vielleicht, wenn wir auf dem Anmeldebildschirm sind, kann dies drei Spalten breit für E-Mail sein. Also vier, Entschuldigung für den Vornamen und den Nachnamen. Dies ist sechs Spalten breit, nur um den Raum zu füllen. Und Sie können diese Formularfelder natürlich anpassen, während Sie weitergehen. Und je nachdem, was Sie brauchen, um Benutzer in ihnen einzugeben. Also, das ist es im Grunde für dieses Video. Ich werde Sie in der nächsten sehen, wenn wir mit dem Dashboard beginnen werden Ich werde Ihnen einige wichtige Differenzierungsfaktoren zwischen allen Seiten, die wir bisher zeichnen, und der Dashboard-Seite zeigen und warum es anders ist. Also sehe ich dich dort. 25. Paper: Also endlich, lassen Sie uns jetzt mit unserem eigenen Dashboard beenden. Und es tut mir leid, ich muss ein anderes Setup verwenden, weil ich meine Kamera wegen der Barrierefehler bewegen musste. Also schließlich werde ich in Dashboard schreiben genau hier oben. So schien es so, als ob alle vorherigen Beispiele, die ich in Umrissen wie folgt zeichnen werde. Alle noch einmal, scheinen wie in den vorherigen Beispielen. Aber in diesem Fall, weil es ein Dashboard ist und wir zusätzliche Informationen auf der Seite anzeigen müssen. Wir werden tatsächlich eine andere Art von Navigation haben. Wir werden anstelle der oberen Navigation, die alle unsere mittleren enthalten wird, eine wichtige Navigationsfunktionen haben die alle unsere mittleren enthalten wird, . Wir werden es nach links und den ganzen Punkt des Dashboards verschieben, wenn Sie es auf Dribble oder an Wochenenden suchen, haben Sie all diese verschiedenen Beispiele ist, so viele Daten wie möglich zu zeigen, so viele Informationen über Ihr Konto, so viele Informationen über und Sie sind eine andere Ausgaben, zum Beispiel, Ihre Karten, neuesten Transaktionen, Ausgaben, und so weiter. Anstatt also die Hauptwebsite damit zu überladen, haben wir deshalb einen Login-Anmelde-Button , der uns zum Dashboard bringen wird, wo wir tatsächlich alle diese Informationen auf eine schöne und leicht zu verständliche Weise präsentieren . Nun in Bezug auf die Navigation, werden wir tatsächlich müssen. Also werden wir tatsächlich den oberen Streifen hier mit dem Logo haben. Wir werden Avatar mit dem Namen hier oben haben. Und dann rechts hier auf der linken Seite, werden wir unsere Navigation haben. Es wird etwa zehn oder 15% der Gesamtbreite der Seite sein. Und anstatt unsere Navigation oben zu haben, werden wir sie nach links verschieben, was im Grunde die meisten Male ist, die Sie auf dieses Dashboard zugreifen werden. Sie werden die Navigation hier sehen. Aber was das mit unserem Layout ausmacht, werden wir unser Raster von hier aus verschieben. Also von hier, in diesem Abschnitt, lassen Sie uns von Logo zu hier sehen. Anstelle von Zeilen, die hier unten laufen werden wir es tatsächlich in diesen Abschnitt genau hier verschieben. Diese 80 oder 85% werden also so in unser Grid-System einbezogen werden. Während dies leer sein wird, werden wir dies erreichen, indem wir diesen linken Rand unseres Netzsystems erhöhen. Ich werde das in Adobe XD zeigen. Und wir werden tatsächlich nur diese für die Navigation für einen Desktop-Größen und für Tablet-und mobile Größen verwenden . Wir werden dasselbe tun, wie wir es immer in diesen Größen tun. Und Sie sehen, dass online im Grunde ist, dass wir diese Navigation nach oben verschieben oder einige wichtige Verhandlungen als Haftnotiz unten unten verwenden werden. Also hier haben wir ein Armaturenbrett. Und all diese werden Symbole enthalten. Wir werden eine Zählung haben. Wir werden Transaktionen haben. Wir werden Kredite haben. Und ich werde Ihnen das alles in einer Sekunde zeigen. Wir werden Karten haben, Investitionen in Digital. Und schließlich, ein Logout am unteren Ende. Wie gesagt, können Sie eine Abmeldung verwenden und es hier positionieren. Zum Beispiel, wenn Benutzer auf dieses Bild klicken, kann es vielleicht ein Dropdown-Menü sein, vielleicht kann sich Abmelden dort sein. Vielleicht kann es sie zurück auf die Homepage bringen, vielleicht könnte sie zu einigen Angeboten bringen, die die Bank im Moment hat. Also ist es wirklich an Ihnen und Ihrem Kunden, den Tod in Bezug auf diese Navigation hier zu vereinbaren , können Sie sehen, also haben wir ein Dashboard, wir haben Konto Transaktionskredite Karte. Also im Grunde alle diese gleichen Dinge anstelle des Dashboards. Dashboard wird also unser Home-Bildschirm für diesen Dashboard-Abschnitt sein. Wie wir zu Hause für den Home-Bildschirm für den Website-Bereich haben. Und wir haben uns hier abgemeldet. Ich habe es absichtlich so für UX-Zwecke verteilt, weil Sie nicht möchten, dass Benutzer versehentlich hier klicken und sich abmelden möchten, um dies zu tun. Und wie gesagt, wir werden in diesem Abschnitt direkt hier für die Informationen verwenden. Nehmen wir also an, dass dieser Benutzer Michael heißt. Also können wir einschreiben, willkommen zurück Michael. - Michael. Und hier sind Ihre Statistiken für dieses bestimmte Datum. Also lassen Sie uns in der Tat sehen. So kann er wissen, oder sie kann wissen, dass dies die Statistiken für dieses bestimmte Datum sind. So können wir diese Staaten haben. wir also gemein Konto. Und lassen Sie uns sagen, dass sie 30 Schlüssel in ihrer Zählung haben, so. Als nächstes werden wir Karten haben, sagen wir mal. So können sie verschiedene Karten wie diese wählen. Wenn es mehrere Karten gibt, können wir Paginierung einschließen. So können sie sehen, welche Karte von hier aus ausgewählt wird. Wir werden hier tatsächlich einen weiteren Abschnitt für das Problem mit der Paginierung wie folgt einschließen. Oder es kann ein Hilfebereich sein. Statt der Promo, wenn die Bank die Promo im Moment nicht hat, können sie ihnen vielleicht helfen und sie durch führen. So zum Beispiel. Was ist der lange Abschnitt? Was ist die Karren Abschnitt und so weiter. Sie können schnell darauf zugreifen, indem Sie einfach auf ihre klicken oder tippen. Jetzt und darunter werden wir zum Beispiel Transaktionen haben, weil Sie deshalb im Grunde hierher gekommen sind. Also Latus-Transaktionen. Und diese Transaktionen können so etwas wie, ich weiß es nicht, heute sein. Kaffee Kategorie ist Essen mit ICN und Ausgaben so minus, mal sehen, $15. Sie können sich also im Grunde vorstellen, wie das aussehen wird. Und wir können natürlich in diesem Abschnitt zu wiederholen und unten. Und ich werde einfach hier enden. Und eine Ladung mehr schreiben. In Ordnung, hier unten. So können sie auf eine Registerkarte klicken, um mehr dieser Transaktionen zu laden. Und zum Beispiel können wir einen Schieberegler hier auf der rechten Seite einfügen, und sie können nach oben und unten gleiten oder graben einfach das Scrollrad auf ihrer Maus verwenden , um nach oben und unten zu scrollen, um alle ihre Transaktionen zu sehen. Aber da wir bereits Transaktionen hier haben, können sie einfach auf Lord Moore klicken, die sie zur Transaktionsrede bringen können , wo sie tatsächlich mehr Details sehen können. Schließlich können wir vielleicht Ausgaben hinzufügen. Also lassen Sie uns alle Ausgaben sehen. Vielleicht täglich, wöchentlich und monatlich. So, vielleicht können wir sie einbeziehen. Also täglich, wöchentlich, monatlich. Und vielleicht können wir tatsächliche Beträge haben. Also verkauft es das. Also offensichtlich wird Daly niedriger sein, Wochenwochen, die bereit sind, höher zu sein und monatlich wird am meisten sein. Schließlich können wir vielleicht ein Diagramm hier aufnehmen. Also werde ich einfach Diagramm eingeben. Und vielleicht kann ich etwas wie Kleidung, Essen, Nebenkosten und Autokäufe einschließen . Genau so. So in diesem Diagramm können diese separat angezeigt werden, wenn sie auf sie klicken, oder es kann alle von ihnen direkt hier zeigen. Aber Sie können sich vorstellen, dass es ein bisschen zu viel sein wird , wenn Sie eine Menge von diesen Gegenständen direkt hier haben. Also iter Benutzer können alle diese separat tippen und es wird sie hier zu zeigen. Oder sie können sie tatsächlich alle in dieses Diagramm einbeziehen. Und es kann ihnen tatsächlich zeigen, dass dort. Also, das ist es im Grunde für diesen Wireframing-Abschnitt. Ich hoffe wirklich, es hat dir gefallen. Und tut mir leid für dieses letzte Video für die Beine dieses meine Kamera und beschlossen, auf mich zu binden. Also musste ich externe, externe Batterie und Blickwinkel so verwenden . Also, wenn ich dir einfach so zeigen kann, so kannst du sehen, wie das aussieht. In der nächsten Reihe von Videos werde ich alle diese Wireframes scannen, sie in Adobe's D. bringen und Ihnen zeigen, wie Sie Ihre Wireframes innerhalb von Adobe XD erstellen können , und wie Sie tatsächlich von Wireframes zum Design übergehen können. Wenn Sie also noch einmal keinen Scanner haben, können Sie einfach ein Bild mit Ihrem Telefon machen. Von all diesen, bringen Sie sie in Adobe XD, wie in einem der vorherigen Videos erklärt. Wenn nicht, wenn Sie allein daran arbeiten, können Sie sie einfach an Ihrer Seite haben, wie ich mit all diesen vorherigen, die wir in diesem Abschnitt des Kurses entworfen haben . So können Sie die Süßigkeiten an Ihrer Seite halten und Sie können einfach direkt in Adobe XD zu digital wechseln. Aber ich möchte Ihnen nur diesen Ansatz zeigen, dass Sie es auch tun können. Einfach Snapper Metzger oder Scandium, wichtig in Adobe XD. Und Sie können sie an Ihrer Seite für alle zukünftigen Referenzen haben. Also sehen wir uns in Adobe XD. 26. Importieren unserer Paper: Okay, also jetzt, da wir Wireframing-Prozess auf einem Stück Papier abgeschlossen haben, und jetzt, wo Sie Ihre Papiere scannen, in denen Ihr Scanner oder nahm die Bilder, in denen Ihr Telefon. Jetzt können wir endlich Adobe XD öffnen und damit beginnen, all diese Informationen zu bringen. Und was ich hier habe, ist der Startbildschirm von Adobe XD wird ein wenig anders für Sie aussehen , je nachdem, was Sie zuvor noch nicht geöffnet haben. Sie können meine Design-Dateien direkt hier sehen, die ich zuvor geöffnet habe. Es wird ein bisschen anders für dich aussehen. Es wird leer sein, wenn man es zum ersten Mal öffnet und nie etwas geöffnet hat. Aber genau hier werden wir dieses Standard-Web 1920 verwenden, ein Dashboard. Klicken Sie einfach darauf. Es wird eine neue Registerkarte öffnen. Es wird ein neues Fenster öffnen. Und diese Datei ist die Datei, die wir eigentlich für diesen Kurs verwenden werden. Also werde ich hier klicken und ich werde es zuerst speichern, die Dinge zuerst. Wenn ich also hier klicke, haben Sie als lokales Dokument gespeichert. Ich werde direkt dort klicken. Ich werde ihm einen Namen geben und einfach speichern drücken. Jetzt, da wir das getan haben, können wir weitermachen und anfangen, diese Kunstboards umzubenennen. Wir können damit beginnen, andere Kunsttafeln zu erstellen. Sie können hier an der Spitze sehen wir neue Bank Website-Design. Und das ist der Name, den ich beschlossen habe, diesem Projekt zu geben. Aber Sie können auch voran gehen und Ihrem Projekt einen anderen Namen geben, den Sie vielleicht wünschen. Nun, das nächste, was ich tun möchte, ist, meine Wireframes einzubringen. Und Sie können hier Wireframes sehen. Ich ging weiter und scannt sie und benenne sie um, um das Verständnis zu erleichtern und für einen einfacheren Import und später den Export, wenn nötig. Also das erste Drahtmodell, das ich gezeichnet habe, benannte ich es Nummer eins um, und dann ging ich weiter zu einer Zahl und 09. Und Sie können sie hier sehen. Jetzt, um sie zu importieren, können Sie sie einfach alle auswählen. Gehen Sie zurück zu Adobe XD, halten Sie die Wahltaste und das Scrollrad an der Maus gedrückt. Und dann können Sie den Zoom ganz aus, nur so dass Sie sich etwas Platz geben können. Dann kann ich das zurückbringen und sie einfach hineinbringen, damit Sie sie alle auswählen können, per Drag & Drop in Ihr Adobe XD-Dokument einfügen können. Also werden sie alle hier sein und alle werden in der falschen Reihenfolge sein. So können Sie hier sehen, dass der Anmelde- und Anmeldebildschirm den ganzen Weg hier ist. Das wollen wir nicht. Also, was wir wollen, und deshalb haben Sie alle umbenannt, ist, dass wir sie ein wenig organisieren wollen. Also das war unsere erste Homepage war unsere zweite, Konten und ich halte einfach Shift und Sie können den Raum zwischen ihnen sehen. Und Sie können deutlich sehen, dass basiert, das sind Bilder, aber das ist Basis ist da und es ist das gleiche und das gleiche für unsere Boards. Das wirst du ein bisschen später sehen. So wie gesagt, Konten sind ein Weiter, mal sehen, Kredite und Sie können immer zurück zu hier und c, Also hatten wir eine Homepage, Konten, Kredite. Also Karten investieren digitale und Dashboard-Kredite. Mal sehen, Karten investieren digital. Und schließlich haben wir Dashboard, aber vorher haben wir einen Login und melden Sie sich so an. Jetzt, da wir all diese bestellt haben, können wir sie auch auswählen und sie ganz nach oben verschieben. All diesen Raum, den Sie hier sehen, ist dieser graue Raum der leere Raum, den Sie für Ihr Dokument verwenden können. Also drinnen können Sie einen Text behalten, Sie können Bilder behalten, wie wir es hier tun. Sie können unsere Bretter hier drin halten ist R, R Port genau hier. Sie können einfach auf den Namen des Flughafens klicken, der sich bewegt. Und ich mache das immer gerne, nur um Platz zu schaffen und einfach Platz für mein eigentliches Projekt zu lassen. Sie können diesen Stern auch hier oben sehen, was bedeutet, dass Sie mit Ihrem Dokument herumgeimelt haben. Wenn Sie es als lokales Dokument gespeichert haben, wie ich es getan habe, dann können Sie Steuerung S drücken Wie dies wird speichern und dieser Stern wird verschwinden. Wie Sie hier sehen können. Wenn Sie es als Cloud-Dokument speichern, wird als Cloud-Dokument diese automatische Speicherfunktion ausführen, aber Sie können es in den Einstellungen deaktivieren, damit Sie es selbst speichern können. Das war's also für dieses erste Video. Im Grunde wollte ich das einfach reinbringen. Jetzt, wo wir eine Datei haben, können wir tatsächlich mit der Arbeit an diesem Projekt beginnen. Also, wenn wir ein bisschen näher heranzoomen, nur um Sie zu nehmen. Und das war unser grundlegender Explorationsbildschirm. Und hier haben wir alle Seiten gemacht, die wir wollten. Wir haben uns entschieden, wie gemacht Navigation wird wie die Reihenfolge unserer Navigations-Dock jetzt aussehen , top nav und dieses boxed nav. Dann sind wir auf die Homepage gegangen. Und jetzt können Sie sehen, wie die Homepage aussieht, zählt und so weiter. Jetzt haben wir also eine allgemeine Vorstellung davon, wie unser Projekt aussehen könnte. Und wie er im Video sagte, mache ich das immer gerne, denn jetzt habe ich alle meine Wireframes hier in Adobe XD. Wie ich schon sagte, du musst das nicht tun. Wenn du das nicht willst, kannst du einfach den Stapel Papiere bei dir behalten , wie ich es hier tue. So können Sie einfach alle diese Papiere durchblättern und entscheiden, welche Elemente Sie in Ihr Projekt einfügen möchten. Also, das ist es im Grunde für dieses Video. Im nächsten Video werden wir eigentlich mit der Website-Architektur beginnen. Wir werden einige dieser Seiten verbinden. Wir werden einfach damit herumspielen und sehen, was es mit der Navigation gemacht werden muss, wie alles miteinander verbunden wird. Wir werden einige dieser Elemente innerhalb unseres Dokuments neu positionieren. Und danach werden wir endlich weitermachen und anfangen, Drahtmodelle innerhalb von Adobe XD zu entwerfen, indem wir diese Referenzen, die wir auf einem Stück Papier gemacht haben, als nur Blaine-Ideen verwenden. Wir werden einige Elemente von diesen verwenden und dann in echte digitale Drahtmodelle in Adobe XD übergehen . Also sehe ich dich dort. 27. Website-Architektur erstellen: In diesem Video werden wir mit der Website-Architektur beginnen. Und Website-Architektur ist im Grunde, wenn Sie auf die gierigen Bits gekocht, ist Verbindung zwischen allen Seiten, die Sie auf Ihrer Website haben. Sie können die Website-Architektur auch als mobile App-Architektur verwenden. Und manche Leute nennen diese Flussdiagramme gerne. Wir verkaufen tatsächlich die Produkte auf unserer Website, web donut.net. Und ich werde den Link zu diesen Produkten zusammen mit einigen Rabatten für Sie Jungs als Studenten verlassen , wenn Sie diese Produkte kaufen möchten. Also der erste fließt. Und fließend kommt mit 108 Bildschirmen, 128 Elemente für Websites und zum Drucken von Papieren für eine vier, sowie die US-Buchstabengröße. Sie können sehen, wie einige von ihnen aussehen im Grunde sind dies nur Karten verschiedenen Elementen, die Sie verwenden können, um Ihre Bildschirme miteinander zu verbinden. Und dann können Sie dies verwenden, bringt fertige Vorlagen, wenn Sie sie ausdrucken und sie Ihrem Team oder Ihren Kunden zeigen möchten. Wie Sie sehen können, wenn ich meinen schnellen Scroll mit meiner Maus starte, können Sie sehen, wie viele dieser Elemente es gibt. Das ist also der Flowy. Es kommt auch mit all diesen zusätzlichen Elementen wie Mockups, wie Zahlen, wie die wichtigsten und wichtigsten Symbole, diese Pfeilverbinder, und wie gesagt, diese Dateien. Und Sie können sehen, wenn Sie sie ausdrucken, können Sie sehen, wie sie aussehen. Das fließt also. Wir haben auch Drahtfluss, Flussdiagramme, die viel größer als fließend sind. Sie können sehen, wir haben 200 Bildschirme, 200 Elemente sowie zwei Papiere. Wir haben auch mit dieser eine, unsere hellen und dunklen Versionen. Diese hier ist viel detaillierter, wenn Sie auf diese Art von Sache sind. Und sie kommen in Photoshop Sketch in XD-Versionen, beide. So können Sie sehen, wie sie aussehen. Und wenn ich mein schnelles Scrollen beginne, nur damit Sie sehen können, wie viele verschiedene Elemente sie genau dort sind. Und wenn Sie das auf unserer Website herausfinden möchten, so ist es Web nano.net. Noch einmal, ich glaube, der Link und der Rabatt für euch Jungs, wenn ihr es auschecken wollt. Also gehen Sie zu Web nano.net Produkte und dann lassen Sie es für ein wenig laden, weil wir viele verschiedene Produkte haben und gerade unter UX bekommt, werden Sie all diese verschiedenen Produkte finden. Zusammen mit Flussdiagrammen, wie Sie sehen können, haben wir Wireframes. So können Sie Ihre Wireframes mit diesen Produkten vollständig erstellen. Wir haben auch UIKit ist genau hier, so bereit gemacht uns Kinder. Sie können sie einfach mit Ihren Bildern austauschen und so weiter. Ich zeige Ihnen das und nur damit Sie sehen können, wie detailliert Sie bekommen können, aber wir werden nicht detailliert damit. Ich kann einfach voran gehen und meine Produkte verwenden und wie Schulden betrügen. Aber ich möchte euch zeigen, dass ihr das nicht benutzen müsst. Wenn Sie wollen, können Sie sie andere live kaufen, um Rabatt für Sie Jungs als auch. Aber Sie müssen sie nicht verwenden Hier sind wir in Adobe XD und alles, was Sie tun müssen, ist einfach Rechteck und etwas Text. Also werde ich voran gehen und zoomen, nannte ihn mein altes und mein Scrollrad auf meiner Maus. Maus. Ich werde einfach ein Rechteck wie dieses erstellen. Es spielt wirklich keine Rolle, wie groß oder klein es ist. Du schaffst es. Wie auch immer Sie wollen. Also dieses Rechteck, kann ich auch einen Eckenradius von 25 auf, nur um es etwas Gewürz zu geben. Sie können auch einen Schatten einschließen, nur so dass er ein wenig von diesem Hintergrund abheben kann. Also lasst uns ihm einen Schatten von tuh, tuh und vielleicht 15 geben, nur um es ein bisschen größer zu machen. Ok? Und jetzt können wir mit der Eingabe beginnen. So kann ich die Homepage eingeben, zum Beispiel, ob es von der Mitte ist und ich werde für Toppings dafür verwenden. Und ich werde Poppins als Schriftart für dieses gesamte Projekt verwenden. Und Poppins ist eine kostenlose Google-Fonts von Aleve und ein Link zu jedem einzelnen Material, das ich in der letzten Lektion dieses Kurses oder in einem Kurs Dokumente verwende. Und je nachdem, wo Sie diesen Kurs beobachten. So können Sie einfach darauf zugreifen oder Sie können einfach in Poppins auf Google oder was auch immer Sie als Suchmaschine verwenden und Geschwister wachsen auf die Google Fonts Seite und beginnen mit dieser Poppins Schriftart. Was wir also tun werden, ist einfach die Umschalttaste zu halten und diese beiden auszuwählen. Klicken Sie hier unten, klicken Sie auf Control G, um es zu gruppieren und diese Website-Architektur zu nennen. Aktuell. So wie das. Ich mache das, weil ich eine Komponente daraus erstellen möchte. Drücken Sie einfach die Steuerungs- oder Befehlstaste, um eine Komponente zu erstellen. Und Sie können diesen Diamanten genau hier sehen, der ausgefüllt ist, was darauf hinweist, dass dies unser Meister oder Hauptkomponente ist. Wenn ein Markenzeichen ändern Optionstaste. Um diesen zu duplizieren, können Sie sehen, dass dieser Diamant jetzt irgendwie in oder leer ist , während dieser ein gefüllt ist. Und das liegt daran, dass dies die untergeordnete Komponente dieser Master-Komponente ist. Also, wenn ich das im Grunde funktioniert. Wenn ich zum Beispiel beschließe, innerhalb dieses zu springen und diesen Eckenradius zu erhöhen 250, können Sie sehen, dass die Änderung auch auf die untergeordnete Komponente angewendet wird. Aber wenn ich innerhalb von hier springe, distal 50 ändere, kann man sehen, dass es nur auf diese angewendet wird, weil dies die untergeordnete Komponente ist, dies ist die Master-Komponente. Ich hoffe, Sie verstehen die Unterschiede zwischen diesen. Und wir werden am Ende all diese Komponenten in Kunst und Design verwenden. Wie gesagt, Sie können komplexe und Designs wie diese verwenden, die ich Ihnen gezeigt habe, aber Sie müssen nicht. Sie können einfach in Des Moines verwenden, die wirklich ziemlich einfach sind. Also, was wir mit diesen tun werden, ist, dass wir nur die Namen dieser Seiten auflisten. Also haben wir hier Konten wie diese. Und dann werden wir das noch einmal duplizieren. Also halten Sie einfach Ihre Alt oder Option, was haben wir als nächstes? Diese Kredite und Dan Aufzeichnungen. Also lass mich das duplizieren. Also Rasen Karten, warum brauchen wir investieren digital? So inversiert und digital. Und dafür werden wir es später duplizieren. Also haben wir, wieder, Konten gehört, Konten gehört, ein SIPOC hält meine Kontrolle, nach innen zu springen und dann auf einen Text zu doppelklicken, um ihn zu bearbeiten. Solange wir Strom haben. Wir haben investiert, wir haben digital. Und schließlich können wir voran gehen und dieses duplizieren , weil wir am Ende einen Login verwenden werden. Und ich werde es einfach hierher bringen. Also Login. Ich werde das hier unten positionieren. 65 Ich glaube, es waren Stimmzettel. Lebe es so. Melden Sie sich an, weil wir diese beiden Seiten haben werden. Und schließlich von diesem, werde ich es direkt in der Mitte dieser zu positionieren. Jetzt, da wir diese haben, müssen wir einige Seiten mit dem Dashboard verbinden. Aber weil wir wissen, welche dieser Seiten sind, weil ich sie in Papier-Drahtmodellabschnitt abgedeckt. Also werde ich sie neu positionieren nur ein wenig anders als hier, denn wenn Sie sich von unserer Navigation erinnern, haben wir diesen Login-Button auf jeder einzelnen Seite also von jeder einzelnen Seite direkt hier und sie können auf diesen Login zugreifen Seite und dann von einer Anmeldeseite, können wir auf die Dashboard-Startseite gehen. Und ich werde hier positionieren, denn sobald Sie im Dashboard zu Hause sind, haben Sie Konto-Transaktionen, Rasenflächen Karten Investitionen digital und logout. Wenn Sie die Seite direkt hier springen, wo wir tatsächlich das Dashboard gezeichnet haben und deshalb haben wir ON praktisch diese Wireframes innerhalb von Adobe XD. So können Sie sehen, dass Dashboard, Privatkonten, Transaktionen, geliehene Autos, Investitionen digital, und melden Sie sich ab. Also, um ein bisschen Zeit zu sparen, werde ich diese duplizieren. Also drücken Sie Kontrolle D, um es zu duplizieren, oder Sie können einfach voran gehen und halten Sie Ihre alte Wahltaste und duplizieren Sie es einfach wie Dad, ich werde es bewegen. Was machen wir als Nächstes? So wie diese jetzt letzte Sache, die wir tun müssen, ist, dass ich einfach all diese auswählen und Position in der Mitte sein werde. Also mal sehen, so etwas wie das jetzt endlich kannst du sie gruppieren. Also hatte er Kontrolle G und du kannst all diese Gruppen gruppieren , du kannst Kontrolle G treffen, um all diese zu gruppieren. Sie können Kontrolle G drücken, um alle diese zu gruppieren. Und jetzt wird es viel einfacher. Wählen Sie sie einfach hier aus und es wird sie schön und organisiert machen. Sie können sie hier positionieren Jetzt eine letzte Sache, die ich mit diesen tun möchte, ist, dass ich Pfeile erstellen möchte , wie Sie hier in diesem Beispiel gesehen haben. Wenn wir also den ganzen Weg nach unten scrollen, können Sie sehen, dass wir hier diese Verbindungspfeile haben. Und Sie können diese in Adobe XD ganz einfach erstellen , ohne dass Sie eine andere externe Vorlage verwenden müssen. Was wir also brauchen, ist einfach in diesem Rechteck. Und ich merke, dass dieser Schatten hier etwas dunkler ist. Also werde ich diesen entfernen. Er hatte, weil wir ein Extra-Exemplar hatten, die getwittert, ordentlich. Also, was ich tun werde, ist ein Rechteck zu erstellen, vielleicht so hier. Und ich werde die Grenze entfernen. Als nächstes werde ich ein Polygon erstellen, das die Shift-Taste hält. Drehen Sie es, während Sie die Umschalttaste halten. So kann es an der Position wie diese einrasten. Sie können es hier positionieren und Ihren Rahmen entfernen. Und Sie können ihm auch ein Gewürz der Farbe geben, wenn Sie möchten, kann der Boden verletzt werden und für die Füllfarbe, klicken Sie einfach darauf und verwenden Sie diese. Da haben wir unseren Pfeil. Ich werde es auswählen, Control G drücken und es Pfeil oder Website-Architektur nennen. Pfeil, nur so dass wir wissen, wenn Rückwärmsteuerung und Befehlstaste als Komponente erstellt und gehen Sie zu unseren Komponenten. Jetzt können wir sehen, wenn Sie schweben, okay, also ist das unser Website-Architekturpfeil. Dies ist unsere Website Architektur Karten. Und wir halten es schön und einfach, leicht zu verstehen, vor allem, wenn Sie diese an Ihre Kunden senden. Was ich von diesen will, ist, dass ich diese Karten untereinander verbinden möchte. Also werde ich es in einer Gruppe positionieren. Also in dieser Gruppe zum Beispiel, so. Oder Herbst schnell sehen, welche Gruppe welche ist. Also nennen wir diese eine gemeine Website. Va. Weil das unsere Hauptwebsite ist. Dies wird unser Login-Bereich sein oder Logging Ba, Allerdings möchten Sie es nennen. Und das ist unser Armaturenbrett-Rad, so. Also werde ich sie nur ein wenig reorganisieren, sehen, wie viel Platz wir haben. Lassen Sie uns zum Beispiel eine 100 geben. Also Schicht 12345678910. Und lasst uns dasselbe für diesen machen. Also 12345678910, Ich benutze Shift und Bottom Pfeil, um es nach unten zu schieben. Und was ich endlich tun möchte, tun wir, wenn ich es in diesen Ordner einfügen möchte, damit ich es neu positionieren kann. Ich kann das hier reinbringen. Ich komme nach Hause oder schalte den Gang, um das reinzubringen. Und deshalb haben wir es als Komponente erstellt. Und Sie können es einfach nach links oder rechts schieben. Beeilen Sie sich. Wie Sie sehen können, fehlt uns etwas Platz. Und deshalb sind diese Komponenten fantastisch. Und was wir jetzt wollen, ist, einfach Kontrolle D zu drücken , um es zu duplizieren und es hier zu positionieren, so dass Sie es zum Beispiel an diesem Rand und linken Rand ausrichten können , das ist von Ihrer Karte so. Ich werde das lösen, Kontrolle D drücken und es so machen. Nun, was ich will, ist, Kontrolle D zu drücken, es außerhalb des Ordners zu verschieben. So wie das. Ich werde darauf klicken, genau hier positioniert. Also, was ich will, ist, es zu drehen. Also halte ich Shift und positioniere es genau hier. Und ich werde zum Beispiel Schicht 123 machen, von zwei was immer du willst. Nur um anzuzeigen, dass von einer dieser Seiten, können Sie auf diese Seiten gehen. Und was ich jetzt brauche, ist, ein anderes Mal zu duplizieren, Position, dieses hier, und zu meinem Login zu gehen. Und was ich hier mache, ist eine extrem einfache und vereinfachte Version dessen, was ich Ihnen gezeigt habe. Denn wenn ich noch einmal nach unten gehe, können Sie diese Anschlüsse deutlich sehen, die sich nach links und rechts oben nach unten erstrecken, können Sie sehen, wie diese Autos aussehen. Also von 1, sagen wir, eine Seite können Sie zu einer Reihe von verschiedenen Seiten gehen. Sie können alle diese Punkte und Pfeile miteinander verbinden und so weiter, nur um ein wirklich komplexes Bild Ihrer Verbindungen zwischen den Seiten zu erstellen. Aber was ich in unserem Beispiel mache, ist wieder einmal, extrem einfach, weil ich das schön und langsam, sorry, nett und schnell für euch zu verstehen halten möchte . Und was ich von diesem möchte, ist ein Duplikat zu machen und dann auf automatisch gedreht so zu klicken. Und positionieren Sie es hier. Und ich kann, so 1234, nur um ihm etwas Platz zu geben. Halten Sie Molto, Stellen Sie nicht sicher, dass sie in der Mitte sind. Und was wir genau hier getan haben, zeigt an, dass die Leute von einem Login gehen können um sich anzumelden und wieder zurück auf diesen Link Schulden, sie können klicken. Also, wenn ich hier zurück gehe und zeigen, dass noch einmal, ich benutze Raum, nahm pan, links und rechts. Sie können sehen, dass wir das hier getan haben. So klickbarer Link, um sich anzumelden und bei der Anmeldung, klickbarer Link, um wieder zur Anmeldung zu gehen. Deshalb verwenden wir Papierdrahtmodelle und diese Pfeile, und das habe ich dir schon gesagt. So können Sie dies Ihrem Team oder Ihrem Kunden und auch sich selbst mitteilen. Ich habe gerade gesagt, dass du wissen kannst, was los ist. Von hier an kann ich das hier benutzen. Kontrolle D war ein Mist, sagen wir 20-30, wo immer Sie wollen. Und dann noch einmal, kann ich einige davon gebrauchen. So wird zum Beispiel dieses verwendet, nur um ein bisschen Zeit zu sparen. Positionieren Sie es draußen, und ich werde es in unserem Armaturenbrett verwenden. Ich werde darauf klicken. Ist es das hier? Ist es. Während es schnell versteckt das. Und dann klicken Sie einfach auf dieses, nur um es ein bisschen so nach unten zu positionieren. Und das zurückbringen, weil wir die Schuldenüberlappung hatten. Und deshalb hat es uns das gezeigt. Es ist in diesem ersten Ordner oder während wir uns in unserem zweiten Ordner befinden. Also, was ich hier mache, ist mit dem Steuerbefehl d, mit der Umschalttaste, um es links und rechts zu positionieren. Genau in der Mitte, nur um die Dinge schön und sauber zu halten. Und da haben wir es. Wir haben unsere Website-Architektur oder unsere Navigation abgeschlossen. Und warum das noch einmal wichtig ist, ist, dass Sie dies den Leuten zeigen können, Sie können dies Ihrem Team, Ihren Kunden zeigen, und die Leute können sich das ansehen und verstehen, wohin sie gehen können. Eine letzte Sache, die wir tun können, ist von diesem Abloggungsschrei. Und weil, wenn Leute dort klicken, und wenn wir zurück zu unserem Dashboard gehen, können Sie sehen, dass, wenn wir unsere Abmeldung direkt hier. Stellen Sie sich vor, wenn die Leute dort klicken, wird es sie zurück hier auf den Startbildschirm bringen. Also, was wir in diesem Fall tun können, ist ein wenig Spaß und Spiele. Also werde ich diesen Pfeil, STRG D, verwenden , um Ihnen einige Möglichkeiten mit diesem zu zeigen. Ich werde es positionieren und genau hier, stellen Sie sicher, dass es so in der Mitte ist, und verschieben Sie es dann außerhalb unseres Bildschirms. Was wir in diesem Fall tun können, ist einfach gesprungen innerhalb Position unser Pfeil den ganzen Weg, wo die Home-Screeners. Also genau hier. Und jetzt werde ich zu dieser Linie zurückkehren und sie erweitern. Klicken Sie also einfach hier, erweitern Sie es. Und du kannst damit wirklich so herumspielen. Jetzt können Sie es duplizieren, oder Sie können einfach sehen, dass dies die Höhe von neun ist. Also kannst du das tun. Sie können hier gehen. Stellen Sie sicher, dass Sie die Höhe der Linie wie folgt haben. Und das ist so. Also, wenn wir es umdrehen, sollte das gleich sein. Also mal sehen. So wie so. Und einfache Positionierung, ihre Positionierung, wagen, stellen Sie sicher, dass Sie keine Rahmenfüllfarbe haben, ist diese, und dann einfach erweitert. Sie müssen also nur ein wenig hineinzoomen. Noch einmal, nutzen Sie den Raum, um dies zu schwenken, so. Und nur um Ihnen einen Trick zu geben, was Sie tatsächlich tun können, ist in dieses Polygon zu springen und es mit diesem zu drehen. So, hier positioniert. Und dann, was Sie tun können, ist Control C. Springen Sie in diese mittlere Website, Kontrolle V, um es in Position einfügen, nur so dass Sie die Mitte dieser Homepage finden können. Er würde X kontrollieren, um es zu schneiden. Gehen Sie zurück zu hier, steuern Sie V, und löschen Sie diese. Denn jetzt bist du im Zentrum von hier und jetzt bist du wieder in deiner Komponente. Also, was wir jetzt tun können, ist hier rein zu springen, eine andere wie diese zu erstellen, aber entfernen Sie die Grenze. Verwenden Sie in derselben Füllfarbe und gedreht wie folgt. Positionieren Sie es an Ort und Stelle. Stellen Sie sicher, dass Sie sich in der Mitte Ihrer Ihrer Entschuldigung, dieser Form wie diese. Und Terry Herat. Jetzt haben wir diese Abmeldung verbunden, die den ganzen Weg bis hier geht. So können Sie deutlich sehen, wie mit nur ein wenig niederländische Ups, können Sie auf diese Website-Architektur sehen schön und verbinden zwischen all diesen verschiedenen Seiten. Wie gesagt, Sie können Vorlagen verwenden, müssen Sie jetzt unsere verwenden. Wenn du nicht zahlen willst. Sie können einige kostenlose Versionen online mit nur ein paar dieser Formen finden und Sie können Zeit so verbringen. Oder wenn Sie es verwenden möchten, um eines unserer Produkte zu erhalten und diese riesige Bibliothek von Formen zu erhalten, die Sie in Ihren Projekten verwenden können. Eine letzte Sache, die ich tun möchte, ist, alle diese Formen auszuwählen , weil ich die Dinge schön und sauber halten möchte. Halten Sie Control G, kälteste Website-Architektur, so. Und noch einmal werde ich unsere Wireframes benutzen. Er hatte Kontrolle g, n Qualitätspapier. Nur so, wenn ich es wähle, kann ich sie so bewegen. Ich kann das Gleiche mit unserer Website-Architektur machen. Und weil die logische Sache ist, Papier-Drahtmodelle auf echten Wireframes und ein echtes Wireframes auf dem Design zu haben . Also, das werden wir genau hier machen. Und wir werden einfach klicken und diese oben verschieben. Geben wir ihm etwas wie 600. Ich denke, es wird so gut funktionieren. Und ich werde auch von diesem gehen, um 600 so zu sein. Und das ist es im Grunde. Wenn Sie Control 0 drücken, wird es Sie in Disposition einrasten, drücken Sie Control S, um dies zu speichern. Und das ist es im Grunde für dieses Video. Im nächsten Video beginnen wir mit Drahtmodellen in Adobe XD. Jetzt, da wir belüftet haben. Und ich werde Ihnen zeigen, wie Sie diese Papier-Wireframes nutzen können , um tatsächlich echte Wireframes zu erstellen, die Sie Ihren Kunden zeigen können, und Sie können sie mit einem Prototyping und Sharing-Funktionen von Adobe XD für Ihre Kunden für einige tatsächliche Feedback. Also sehe ich dich dort. 28. Wireframes: In Ordnung, lassen Sie uns jetzt mit Drahtmodellen in Adobe XD beginnen. Und das erste, was ich tun werde, ist, Ihnen ein wenig über die Ressourcen zu erzählen , die wir in diesem Kurs verwenden werden. Also diese Datei, die Sie sich gerade ansehen, diese Adobe XD-Datei, werden Sie diese Datei erhalten. Diese Datei wird jede einzelne Sache enthalten , die wir in diesem Kurs erstellen werden. Ich werde Ihnen auch Ressourcen geben, die ich hier verwende, also Symbole, Bilder und so weiter. Aber das Wichtigste, was Sie verstehen müssen, ist Sie diese Ressourcen nur für persönliche Projekte verwenden können. Sie können diese also nicht für Kunden verwenden, Sie können diese nicht zum Verkauf verwenden. Sie können diese nicht für etwas anderes als persönliches Projekt als Lernen verwenden. So können Sie dies verwenden, um zu lernen, alles zu verstehen, wie alles funktioniert, um mit diesem Kurs zu folgen. Und das ist es, weil diese Ressourcen Premium sind, müssen Sie für diese Ressourcen bezahlen, um sie kommerziell in Ihren Projekten zu nutzen, für Ihre Kunden und so weiter. Ich werde Links zu jeder einzelnen Sache hinterlassen, die ich benutze. Also wieder einmal, dass Ressourcen sind Prämie. Sie verwenden sie nur für ein persönliches Projekt, für Lernzwecke und für nichts anderes. Denken Sie daran, wenn Sie diese Ressourcen für Kundenprojekte und für kommerzielle Projekte verwenden , liegt es an Ihnen. Wenn also eine dieser Firmen beschließt, dich zu verklagen, um dich vor Gericht zu verfolgen, dann ist es alles, nachdem du wegen dieser Ressourcen nicht zu mir zurückkommst, liegt alles an dir. Jetzt, da wir das aus dem Weg bekommen, werde ich beginnen, indem ich einfach meine Farben für dieses bestimmte Projekt auswähle. Also, um das zu tun, werde ich hier kommen und wir werden diese erste rpart Homepage nennen. Also können wir hier kommen und hier doppelklicken, Palm Beach. Und das erste, was ich tun werde, ist, ein Gitter zu erstellen. Also werde ich gleich hierher kommen. Und Sie können diese Spalten sehen. Genau hier links und rechts hier rechts sind diese Ränder. Diese Ränder sind also vom Seitenrand auf der linken und rechten Seite. Diese blauen Bits sind Spalten und diese weißen Bits zwischen unserer Rinne. So wird Gosse im Grunde zwischen den Säulen verachtet. Und Spalten sind dieser Raum, in dem der Inhalt gehen wird. Inhalte sind im Grunde Text, Bilder, Symbole und so weiter. Und so ist jede einzelne Sache, die Sie in Ihr Design einschließen, das ist der Inhalt und die Rinnenbreite im Grunde Speicherplatz zwischen Ihren Inhalten. Also werden wir 12 Spalten verwenden, so wie es genau hier ist. Für die Rinnenbreite werde ich 60. Ich werde 82 für die Spaltenbreite und 138 auf beiden Seiten verwenden. Wie Sie sehen können. Jetzt haben wir ein bisschen weniger Platz hier, und wir haben ein bisschen mehr Platz in diesen Gouverneuren. Und unsere Säulen sind etwas schmaler, also ist alles viel sauberer. So können Sie es ein bisschen besser sehen. Eine weitere Sache, die ich tun werde, ist, die Fettleibigkeit unserer Säulen zu senken. Um das zu tun, klicken Sie einfach hier. Und dann ein niedriger dieser Schieberegler, wie Sie wollen. Sie können es den ganzen Weg nach unten senken, oder Sie können direkt nach oben kommen, zum Beispiel. So können Sie sie immer noch sehen, aber sie sind nicht dat, ablenkend. Sie können auch ändern und Derek Farbe, wir klicken einfach hier, aber ich werde Sie nicht damit stören. Also noch einmal, werden wir nur diese Boxen erstellen, zum Beispiel. Und ich werde diese Boxen für die Farben verwenden. erste Farbe wird weiß sein, also ist es diese. Und dann werde ich Kontrolle D mehr mit irgendwo hier treffen. Und dann werde ich in Disk Gelehrten verwenden. Also f zwei, f vier, F6, so eine hellgraue Farbe. Und wenn ich diese Spalten entfernen, können Sie sehen deutlich geschädigt auf sieht aus wie. Damit ich es noch einmal duplizieren kann. Position. Es ist irgendwo hier. Weil dieser Schritt, Sie brauchen nicht wirklich Spalten dafür. Wir wählen nur diese Farben in zwei werden zu verwenden. Diese Farbe wird also c2e, c2e, c2e sein. Ein bisschen dunkler, grau. Sie können den Unterschied zwischen diesen sehen. Und ich werde sie gleichmäßig untereinander positionieren. Ich werde das noch ein Mal duplizieren. Für diesen, werde ich mit wirklich hellgrün gehen. Also 0-0, ED sucht fünf. Ich werde das duplizieren. Jetzt. Ein bisschen dunkler grün, also 0-0, C6 und dann 89. Jetzt gehen wir ein wenig weiter zum dunkelblauen. Also 00859 V. Jetzt werden wir noch dunkler, fast dunkler, zustimmen. Also für 495463, So wie Sie sehen können, ist es wirklich fast ein dunkelgrau. Jetzt wird das wirklich dunkle Gnade von 46, 4646, so. Und schließlich werden wir eine Straßenfarbe erstellen. So ff 4376, so. Jetzt, da wir alle diese Farben haben, werden wir sie auswählen und sie zu unseren Farben direkt hier als Farbsuche hinzufügen , damit wir sie während unseres gesamten Projekts verwenden können. So können Sie einfach diese Farben auswählen, klicken Sie hier, und es wird Ihre Farben hier hinzufügen. Sie können diese ein wenig anders organisieren, so dass Sie sie als Raster oder als Liste hinzufügen können, was auch immer es Ihnen einfacher ist. Ich benutze sie gerne so. Und Sie können dies auch erweitern, wenn Sie möchten. So können Sie sich vorstellen, wenn Sie anfangen, diese Komponenten zu fühlen, werden sie eine Menge von ihnen sein. So können Sie dies schnell nach links und rechts erweitern, nur um Ihre Komponenten zu sehen können Sie immer zu dieser Ansicht zurückkehren, wenn es einfacher für Sie ist. Eine weitere Sache, die ich tun werde, ist auch meine Charakter-Styles zu erstellen, aber ich kann damit ein wenig später umgehen. Also kann ich voran gehen und diese löschen. Also waren sie nur ein Platzhalter, um das zu schaffen. Wir gingen voran und erstellten unser Raster, also haben wir es hier. Das nächste, was ich eigentlich tun werde, ist, mein Logo einzuschließen. Ich füge es aus meinem Originaldokument ein. Und Sie können diesen Link sehen, weil ich während dieses Kurses mein Originaldokument, das ich erstellt habe, als Referenzdatei verwenden werde . So werden Sie diese verknüpften Sets Symbol sehen. Sie können es hier sehen. Dies ist also eine verknüpfte Komponente, da sie mit dem ursprünglichen Entwurf verknüpft oder erstellt wurde. Aber um das für diese bestimmte Datei zu beheben. Wenn ich zum Beispiel dieses Logo im Originaldokument bearbeite, wird mir hier ein Update angezeigt, damit ich es aktualisieren kann. Also habe ich beide Instanzen in beiden Dateien mit demselben Update und neuesten Updates. So werden sie genau gleich aussehen. Oder was ich während dieses Kurses tatsächlich tun werde, ist das Kopieren in dieses Dokument oder klicken Sie mit der rechten Maustaste und klicken Sie einfach auf lokale machen. Also, was das im Grunde bedeutet, ist jetzt, dass dies unser Hauptbestandteil hier in diesem Dokument ist. Und Sie können sehen, dass es zwei Zustände hat. Es hat also diesen Standardzustand und er hat diesen großartigen Zustand. Und ich ging voran und schuf das. Nun, um das zu tun, können Sie einfach hier gehen. Klicken Sie auf Bearbeiten Hauptkomponente wird Sie direkt hier zu führen. Sie können einen neuen Status hinzufügen. Also lassen Sie uns diesen Schwarz-Weiß-Zustand nennen, nur um Ihnen zu zeigen, wie ich vorangegangen bin und das erschaffen habe. Also haben wir dieses schöne Logo. Und zum Beispiel, lassen Sie uns sagen, dass ich diesen Text nehmen möchte , damit ich meinen Steuerungsklick nach innen halten kann, zur Farbe gehen ihn in Weiß verwandeln kann. Und weil wir alle diese Farben haben, lassen Sie uns sagen, dass ich verwenden möchte, ich weiß nicht. Lassen Sie uns sehen, diese Farbe einfach als Steuerelement klicken Sie innen, und dann können Sie eine dieser Farben wählen. So kann ich das zum Beispiel verwenden. Und wir haben auch diese Form. Also haben wir diesen Punkt drinnen, aber lassen wir ihn dort liegen. Wenn wir zurückgehen, können Sie sehen, dass wir jetzt diesen Schwarz-Weiß-Zustand haben. Wenn ich klicke, ist dies unser Standardzustand und das war mein ursprünglicher großartiger Zustand. Und jetzt haben wir Schwarz-Weiß-Zustand. So können Sie zwischen diesen Zuständen an verschiedenen Punkten Ihres Designs wechseln. Wenn Sie beispielsweise dieses Logo auf einem dunkleren Hintergrund präsentieren müssen, wie Sie sehen können, funktioniert diese Farbe nicht auf ihrem dunkleren Hintergrund. Daher benötigen Sie diesen Schwarz-Weiß-Zustand. Anstatt also eine weitere Kopie zu erstellen und diese Kopie dann zu bearbeiten, können Sie einfach einen neuen Status erstellen und ihn in Schwarzweiß verwandeln. Also, wo immer Sie zwischen diesen Zuständen wechseln müssen, können Sie einfach voran gehen und zurückkehren, wo immer Sie wollen. Sie können hier schreiben, klicken Sie mit der rechten Maustaste und klicken Sie auf Löschen, wie ich das tun werde, im Grunde kann ich voran gehen und entfernen Sie dies, weil ich es hier als unser Original habe. Also, um mit unserem Wireframe zu beginnen, das erste, was wir tun werden, und das ist es, worüber ich gesprochen habe. Wireframing-Abschnitt ist im Grunde, können Sie diese Seiten sehen, die wir auf einem Stück Papier gezeichnet haben. Wenn du sie neben dir hast, kannst du sie so benutzen. Wenn nicht, können Sie sie in Adobe XD einbinden, wie wir es für diesen speziellen Kurs getan haben. Und Sie können immer auf sie zurückverweisen, zum Beispiel auf die Idee, die Sie hatten. Und weil wir unsere Hauptnavigation direkt hier erstellt haben, so können Sie sehen, dass wir hier ein Standortsymbol für Unternehmen haben und so weiter. Dann können wir das tun. Also lassen Sie uns voran und beginnen Sie mit dieser wirklich Top-Navigation. Also haben wir eine Ikone für das Geschäft. Wir haben ein Telefonsymbol, Symbolsprachen direkt hier. Also werde ich weitermachen und das tun. Ich klicke auf meinen Flughafen, weil wir eine lange Seite erstellen müssen. Du kannst es sehen. Oder Sie müssen tun, ist auf diesen Punkt in der Mitte klicken und den ganzen Weg nach unten erweitert. Nein, lass es uns einfach da liegen. Also werden wir unser Logo verlassen, Reddit ist für den Moment. Dann werden wir unser Rechteck-Werkzeug bis hier erweitert verwenden. Und mal sehen, vielleicht können wir das als Hintergrundfarbe verwenden. Wir können die Grenze entfernen. Und für die Größe 1920 Jahre für die Breite, Tod endgültig, wird es 70 verwendet, zum Beispiel, für die Höhe. Und Sie können hier klicken, es wird es an die Spitze anheften. Nun, was wir tun werden, ist eigentlich mit dem Text zu beginnen. Hier brauchen wir also unsere Texte. Und wie gesagt, ich werde Poppins als Schriftart verwenden. Also, was ich tun werde, ist auf Tee klicken und einfach hier klicken. Und jetzt kann ich so etwas wie für Geschäft oder unseren Standort schreiben. Das und ich werde es hier setzen. Ich werde Poppins wählen und mal sehen, ich kann 18 für diesen so verwenden. Und mal sehen, vielleicht kann ich diese Farbe verwenden. Wir können positionieren, um links ausgerichtet zu sein. Und wir können Shift halten, wählen Sie diese beiden. Klicken Sie hier, um es in der Mitte zu positionieren. Und dann kann ich voran gehen und hier klicken, um dies zu meinem Charakterstil hinzuzufügen. Und Sie können sehen, dass es mir unregelmäßige 18 zeigt. Wenn Sie es irgendwann bearbeiten möchten, bearbeiten Sie es hier nicht. Du gehst, genau hier, mit der rechten Maustaste. Und Sie können von hier aus bearbeiten und dann Änderungen vornehmen. Jetzt, wo wir das haben, werde ich es duplizieren und tippen oder Geschäft. Denn wenn ich vorspringe und es dir zeige, kannst du sehen, dass wir ein Standortsymbol haben und wir vier Geschäfte haben. Dann werden wir den Formulartext direkt hier haben, weil wir genug Platz auf dieser Desktop-Größe haben. Also werde ich meinen Text duplizieren und meine Telefonnummer hier hinzufügen, was nur eine Dummy-Nummer sein wird. Also lassen Sie uns sehen, zum Beispiel, plus 123456789 oder 0. Lasst es uns einfach so lassen. Also, jetzt, da ich und das, was ich als nächstes brauche, unsere Sprachen. Und Sie können sehen, dass wir diese beiden Flaggen hier haben. Jetzt für die Sprachen werde ich einfach ein Plugin verwenden. So können Sie hier klicken. Und ich benutze dieses UI Logos Plug-in, und es sollte funktionieren. Suchen wir es einfach hier. So können Sie auf Wagen klicken, um nach Ihren Plugins zu suchen. Also lassen Sie uns UI-Logos sehen. Es sollte da sein. Hier ist es. Also benutze ich das, aber aus irgendeinem Grund wird es nicht angezeigt. Und das Logo von sich selbst da. Aber wie Sie sehen können, eine Gewohnheit installiert. Was Sie eigentlich tun müssen, ist einige Boxen zu erstellen. Nun, um diese Boxen zu erstellen, werden wir Rectangle Tool verwenden und Sie werden sie direkt hier draußen verwenden. Sie müssen 194 von ihnen erstellen. Also für die Größen, so werde ich 40, Breite 27. So sehr klein. Ich werde die Grenze entfernen und wie gesagt, ich werde 194 schaffen. Nun, um das zu tun, werde ich die Wiederholungsraster verwenden, die einfach hier klicken. Also haben wir einen. Und gehen Sie einfach voran und erweitern Sie auf 345678, 910. Also lasst uns sie noch einmal zählen. Das war's. Und ich werde im Grunde 20 runtergehen. Also und das ist es im Grunde. Jetzt, da wir fertig sind, könnte das Gitter einfach aufheben. Wie gesagt, du brauchst 194. Also werde ich sechs von ihnen löschen. Also 246, drücken Sie Löschen auf Ihrer Tastatur. Jetzt können Sie fortfahren und alle auswählen. Gehen Sie zurück zu einem UI-Logos. Klicken Sie dort. Sie haben Länderflaggen. So haben schwarzes Logo Marke, Farbe Logo markiert schwarzen Logo-Typ Farbe Logotyp. Aber wir sind an diesem Land interessiert. Flaggen Klicken Sie einfach dort. Es fügte 194 flex hinzu. So können Sie Ihre Flagge finden. Wie er sagte, für dieses spezielle Projekt, verwende ich serbische Flagge und ich verwende auch Großbritannien Flagge. Sie können amerikanische Blume verwenden, Sie können die Flagge Ihres eigenen Landes verwenden. Es liegt also wirklich an Ihnen, was auch immer Sie mit diesem speziellen Projekt machen wollen. Was ich jetzt brauche, ist meine beiden Flaggen zu finden. Hier ist also die britische Flagge. Und lass mich schnell voran gehen und die serbische Flagge finden. Hier ist es. Und jetzt, da ich diese beiden gefunden habe, muss ich nur einfach alle anderen auswählen. Hit delete, weil ich nur diese beiden brauche. Ich gehe voran und ziehe sie in mein Dokument und positioniere sie nur ein wenig. Also mal sehen, vielleicht kann ich sie bei 40 sein. So, 1234, so. Und ich werde hier klicken und zwei auf meiner Tastatur eingeben , um dies auf 20% Fettleibigkeit zu senken. Oder ich kann voran gehen und mehr es zurück zu 30 oder was auch immer, nur um anzuzeigen, dass in dieser britischen Flagge als englische Sprache ausgewählt wird hier ausgewählt. Was ich als nächstes brauche, sind diese beiden Symbole für den Standort und für das Formular. Wie gesagt, ich benutze diese Icons und diese Icons, ich werde Ihnen unsere großen Icons zeigen. Und Sie können sie über den Link bekommen, den ich Ihnen zur Verfügung stellen werde. Also noch ein Mal. Diese Symbole sind nur für Lernzwecke kostenlos. Sie können sie nicht für Kunden verwenden, Sie können sie nicht für kommerzielle Arbeiten verwenden, Sie können sie nicht für den Weiterverkauf verwenden. Wenn Sie alle gesetzlichen Anforderungen erfüllen und jede einzelne Verurteilung im Grunde auf Sie liegt. Also, wenn eines dieser Unternehmen zu Ihnen geht, wenn Sie sie verwenden, noch einmal, es liegt alles an Ihnen. Also lasst uns wieder darauf zurückkommen. Dies ist unser Standortsymbol, das ist unser Telefonsymbol. Wenn ich hier zurück gehe, können Sie sehen, dass diese beiden Symbole und Komponenten im Grunde gebildet das Originaldokument übertragen werden. Klicken Sie mit der rechten Maustaste, sanftmütige lokale, mit der rechten Maustaste machen lokale, um unser Leben einfacher Jetzt, da wir das getan haben, müssen wir sie nur ein wenig neu positionieren. Also, was ich eigentlich tun werde, ist mit diesem zu beginnen. Also Positionierung 20, wie Daten. Und ich werde das so positionieren, dass es hier ist. Um sich damit auszurichten, für das Formular c kann ich für das Formular cdarauf klicken und positionieren. Sehen wir uns einfach an. Bu wir können den Text auf der rechten Seite setzen und es verdoppeln. Also um 1234. Wenn ich also meinen alten Schlüssel halte und hier schwebe, siehst du, dass es 80 von dieser Flagge ist. Und ich kann das auf 20 positionieren, so. Und was ich endlich tun werde, ist zurück zu meinem Ebenen-Panel zu gehen. Wählen Sie alles mit Ausnahme des Logos aus und klicken Sie hier, nur um sie alle in der Mitte zu positionieren. Ich mag, wie das aussieht. Und ich werde das auch nach oben umbenennen. Jetzt, BG. Und ich werde die Dinge etwas besser organisieren. Also werden wir mit dem Standort-Symbol beginnen. Unsere Standorte gehen dann für Geschäfte wie so, ausländische Symbol und dann Telefonnummer, England und Serbien, oben jetzt BG und Sie können Shift halten, wählen Sie alle von ihnen, und rufen Sie diese oben jetzt. Okay, jetzt, da wir das gemacht haben und dieses Video 19 Minuten lang lief , weil wir die Belüftung vorbereiten müssen. Im Grunde werde ich dieses Video hier beenden. Und im nächsten Video beginnen wir mit Erstellung unseres Drahtgittermodells für diese Homepage. Also sehe ich dich dort. 29. Wireframes: Gehen wir jetzt zurück und fangen wir mit der Hauptnavigation an. Wenn wir also wieder hineinzoomen, ich auf mein Logo und klicke dann direkt hier, um mein Rechteck zu verwenden. Und ich werde einen schönen großen Hintergrund für mein Logo zeichnen. Ich werde auch zu Qualität nav, Vg, und ich werde es irgendwo hier bewegen, aber lassen Sie uns zuerst und geben Sie ihm eine Höhe von 1-20. Und schließlich, lassen Sie uns mehr mit 50 von einem Desktop in der Nähe so. Dann positioniere ich das Logo hier, drinnen. Und für das Logo selbst werde ich es 40 Pixel nach rechts positionieren. Also Schiff 1234. Also wieder, so, und Sie können schweben und sehen, dass Sie 40 von links und 26 und fast 26 oben und unten. Jetzt für das Nickerchen BG selbst, lassen Sie uns etwas Styling geben. Lassen Sie uns sehen, für eine Farbe, lassen Sie es weiß. Wir gehen ohne Grenze. Für den Eckenradius werden wir mit zehn gehen. Jetzt für den Schatten, werde ich gehen mit sang 2020. Und mal sehen, vielleicht können wir etwas leichteres gehen. Also lasst uns etwas Zeit geben. Zehn zum Beispiel. Und ich werde auch eine Hintergrundunschärfe einschließen. Und für die Hintergrundunschärfewerte gehen wir mit 2015 und schließlich 50 für die 50%. Wenn ich mich in nicht einverstanden für, nur für den Moment, Sie können es im Moment nicht sehen. Aber sobald Sie tatsächlich anfangen, nach unten zu scrollen , werden Sie in der Lage sein zu sehen, wie diese Unschärfe zu handeln und wie es aussehen wird. Lasst es uns einfach für den Moment da lassen. Was wir als Nächstes brauchen, ist ein Text. Also lassen Sie uns voran und direkt in einigen Texten gehen, denn wenn ich Sie hier zurückbringe, können Sie sehen, dass wir alle diese Seiten haben. Also Accounts alongs, Karten, investieren Sie digital. Und schließlich haben wir diesen Login-Button , der uns zum Anmelde- und Anmeldebildschirm bringt. Fangen wir damit an. Ich werde hier klicken. Und mal sehen, Konten wie Dreck. Also haben wir Poppins, 18 unregelmäßige linke Analysten wählen Farbe. Und fügen wir es gleich hier hinzu. Und mal sehen, was wir als Nächstes tun können. Wir können fortfahren und weitere dieser Artikel hinzufügen. Also lasst uns CEO dies in der Mitte so positionieren, steuern D, um es zu duplizieren und unsere Eingabe gehört Control D und ich werde in Strom eingeben. Das wird umgekehrt sein. Dieser nächste wird digital sein. Und ich werde es auch noch ein Mal duplizieren für unseren Knopf und Tippen und Morgan lässt es vorerst so. Und ich werde es einfach positionieren, um zentriert ausgerichtet zu sein. Jetzt für unseren Button selbst. Ich werde ein Rechteck wie dieses zeichnen. Und lassen Sie uns für die Breite sehen, lassen Sie uns zwei bis 44 verwenden, um sich zu verstecken. Verwenden wir 64, den Eckenradius, nennen wir es Sand. Denn wenn Sie sich erinnern, wir haben den Eckenradius von zehn für knackige g, o positionieren Sie es in der Mitte. Und mal sehen, ich werde es 40 von der rechten Seite mischen , weil wir dieses Gemälde für die Bank gemacht haben. Und wenn Sie es so positionieren, können Sie sehen, dass es zwei Spalten in der Breite nimmt. Und das ist der Hauptpunkt unserer Kolumnen, denn wir wollen, dass alles gut strukturiert und organisiert ist. Ich gehe weiter und gehe gleich hier zurück. Ich nenne dieses btn G zum Beispiel und positioniere es bis hierher. Lassen Sie uns diese Schichten nur ein wenig besser organisieren. Solo positionieren Sie mein Logo hier nach oben. Ich ziehe mein Oberteil jetzt ganz nach oben. So Logo. Und dann von links nach rechts haben wir Konten. Wir haben Alongs. Wir haben Karten, investieren, digital, Login und BT und B, g. So werde ich diese beiden auswählen. Klicken Sie hier und dann rechts hier, um dies in der Mitte und meine Schaltfläche zu positionieren, werde ich voran gehen und eine Farbe auswählen. Lasst uns das hier benutzen. Zum Beispiel werde ich meine Grenze verstecken. Ich klicke hier und ändere meine Farbe in Weiß. Und dann werde ich voran gehen und diese beiden auswählen, Control G drücken und sie angerufen, um sich anzumelden. Und Sie können voran gehen und eine Komponente erstellen, wenn Sie wollen. Aber ich werde das einfach so lassen, wie es ist. Ich werde es organisieren, natürlich, aber lassen Sie es, wie es ist, ohne jede Komponente a, so können wir auf die Entwurfsphase zu bekommen. Und dann später in der Entwurfsphase werde ich tatsächlich eine Komponente, Komponentenstatus usw. erstellen . Also von hier zu unserem digitalen, wir werden es bei 80 haben. Also 12345678, nur um ihm ein wenig mehr Platz für die Klickposition zu geben, ist dies auch 80. Und das soll bei 80 sein. So wird dies offensichtlich dasselbe sein und Konto wird das gleiche sein. Und das ist es im Grunde. Also können wir jetzt voran gehen und all diese Gruppen gruppieren, G kontrollieren und es Haupt nennen. Nun, wenn wir tatsächlich zum Design-Teil kommen, werde ich etwas mehr Styling für die Desegregation tun. Ich werde auch Selektor hinzufügen, der auf einigen ausgewählten Seiten angezeigt wird. Zum Beispiel, wenn Benutzer auf Konto klicken, dann wird der Selektor unter dat angezeigt. Wenn sie klicken Karten wird direkt hier zu bewegen und wir werden einige Animationen hinzufügen, um es und so weiter. Aber wir werden zu all dem etwas später kommen, wenn wir tatsächlich damit anfangen. Nun, wenn ich Sie direkt hier, können Sie sehen, dass auf der Homepage wir diesen Heldenbild Abschnitt mit Digitaltext und Call-to-Action-Taste auf der linken Seite haben , während das Bild auf der rechten Seite, wir sind nicht wirklich gehen verwenden Sie ab sofort alle Bilder, denn dort kommt der Designteil ins Spiel. Aber ich kann damit beginnen, mein Rechteck zu erstellen. Jetzt werde ich mein Rechteck ganz hier unten positionieren. Wir werden diesen Helden nennen. Mach wie Schmutz. Um es ein wenig zu trennen und es hervorzuheben. Ich klicke hier, um unsere Farbe hinzuzufügen. Oder ein Skinnerianer, geh weiter und benutze diese Farbe für meine Bilder. Lasst uns das hier benutzen. Nur um es ein bisschen deutlicher zu machen. Ich werde weiter gehen und die Grenze im Jahr 1924 und die Breite und die Höhe entfernen . Verwenden wir 900. Und ich werde einfach positionieren, genau hier zu sein. Nun, wenn ich mein Hauptnav nehme, können Sie sehen, dass, wenn ich anfange, nach oben und unten zu bewegen, einige Effekte beginnen zu passieren. Und du kannst sehen, besonders wenn ich das bewege und da kommt diese Unschärfe ins Spiel. Aber mach dir jetzt keine Sorgen darüber. Wir werden es ein wenig später benutzen. Und ich werde einfach voran gehen und dieses verwenden, weil wir etwas Text und Schaltfläche enthalten müssen und so weiter. Also lasst uns die Dinge nicht zu sehr komplizieren, so weit unser Text, mal sehen. Ich kann voran gehen und eintippen. Dies ist der Titel oder Titel. Hier, sagen wir mal. Also werden wir Toppings verwenden und wir werden dies ändern, um links ausgerichtet zu sein. Lass uns mutig gehen. Also finden Sie es hier. Wenn Sie noch einmal keine Poppins haben, gehen Sie auf die Google Fonts-Seite, oder Sie können zu der PDF gehen, die ich in dieser letzten Lektion des Diskurses oder in den Kursdokumenten bereitgestellt habe , je nachdem, wo Sie sich diesen Kurs ansehen Sie können einfach ein PDF öffnen, klicken Sie auf den Link. Es wird Sie dorthin bringen, herunterladen und installieren Sie diese Schriftart wie in der Regel mit jeder Ihrer Schriftarten tun. Sie sollten in der Lage sein, es in diesem Projekt zu verwenden. Jetzt für die Größe, werden wir mit riesigen 190 so gehen. Und ich werde es irgendwo hier positionieren. Sagen wir mal. Ich werde voran gehen und diesen auswählen. Gold hier zurück zu meinen Charakterstilen. Klicken Sie hier, um es hinzuzufügen und alte Position nach unten. Und ich werde hier klicken, weil es viel einfacher ist, das hier ein bisschen neu zu organisieren. Jetzt werde ich voran gehen und hier klicken. Also auf meiner Untertitelung, weil wenn wir Sie zurücknehmen, können Sie sehen, wie es aussieht wie Titeltext , der wird in nur einer Zeile Text und Call-to-Action-Button sein. Also was, was wir mit diesem tun können, ist so etwas einzugeben, ist ein Zeilenuntertitel. Und dafür, lasst uns 24. Lassen Sie uns auch unregelmäßig verwenden. Mal sehen. Wie Dat, Analyten mehr Breite. Mal sehen, vielleicht kann ich bei 50 sein, so. Bewegen Sie das nur ein bisschen nach unten. Und was wir jetzt brauchen, ist ein Knopf. Anstatt also eine Schaltfläche neu zu erstellen oder einfach Control C zu drücken und nach draußen zu gehen, klicken Sie hier, drücken Sie Control V und positionieren Sie sie dann einfach nach unten. Mal sehen, vielleicht schaffe ich es auch auf 50, so. Und lassen Sie uns einfach alle auswählen. Klicken Sie hier rechts, um sie nach links auszurichten, und stellen Sie sicher, dass Sie links an der Kante unseres Rasters ausgerichtet sind. Schließlich werde ich unseren Knopf erweitern und ihn so positionieren, dass er drei Spalten breit ist. Und ich werde innerhalb von KPN doppelklicken , erfahren Sie mehr. Und Sie können sehen, dass alles gut passt. Und weil Adobe XD über die Responsive Größe nachdenkt, wie Sie gerade gesehen haben. Also, weil unsere Texte eine zentrale Linie, wenn ich vorgehe und diesen Knopf erweitern, können Sie sehen, dass der Text wirklich schön folgt und er wird immer in bleiben, in der Mitte, wie Sie ihn umschalten. Also werde ich diese etwas besser organisieren und diese Hitzekontrolle Gendarmtext so gruppieren , positionieren Sie sie hier. Und dann verwende ich mein Rechteck-Werkzeug. Geh von hier an den unteren Rand unseres Helden. Verwenden Sie den Text, klicken Sie hier, um ihn zentral zu positionieren. Und Derek Gewohnheit, das ist unser Heldenbild. Wir werden uns an dieser Stelle nicht mit dem Bild beschäftigen, offensichtlich, weil dies nur ein Drahtmodell ist. Was Sie tun können, ist ein Bild-Symbol hier zu setzen, nur um Ihrem Team oder Ihren Kunden zu zeigen, dass es sich um ein Bild handelt. Aber weil ich dir das zeige, wisst ihr, dass zum Beispiel für alle Bilder da draußen das unsere Farbe sein wird. Also lassen Sie uns jetzt weitermachen und mit unserem Design fortfahren. Also, wenn ich Sie zurück zu unserem Wireframe, können Sie sehen, Dienste sind da mit drei Karten, solide. Fangen Sie mit dort an. Ich gehe zum Beispiel zu R, T. Unsere Dienstleistungen. Mal sehen. Wir können es so positionieren, dass es in der Mitte und wir können etwas größeres machen wie 48, zum Beispiel. Statt unregelmäßig, lassen Sie uns mit fett gehen, so und stellen Sie sicher, dass es in der Mitte ist. Es ist diese Farbe, es ist einfach hier klicken. Und mal sehen, wir können zum Beispiel 100 positionieren. Also gib ihm einfach ein bisschen mehr Platz von unserem Heldenbild. Und genau hier unten werden wir mit der Erstellung unserer Karten beginnen. Diese Karten werden also unsere Content-Karten sein. Um das zu tun, werden wir einfach die Spalten zählen, weil wir drei Karten haben, die wir für Spalten wie diese verwenden werden, weil wir insgesamt Spalten von 12 haben. Also, wenn ich dupliziert, können Sie darin sehen, weil sie vier Spalten breit sind, können wir drei passen. Wenn Sie, wenn Sie vier passen müssen, dann wird es drei Spalten weiß wie folgt geben. Also für diese Content-Karten, gehen wir voran und beginnen, indem wir eine erste erstellen und dann werden wir weitermachen und andere erstellen. Und wir werden auch 100 Abstände machen. Also 1020. Mal sehen 90 und das sind 100. Jetzt werde ich einen Eckenradius von 20 machen. Mal sehen. Ich kann diese Füllfarbe verwenden, die wir für Bilder verwendet haben. Also diese, und mal sehen, ich kann einige Änderungen an der Höhe vornehmen. Also lassen Sie uns sagen, dass es zum Beispiel 546 sein wird. So, ohne Grenzen. Lassen Sie uns den Schatten für jetzt nicht einschließen, vielleicht können wir ihn später verwenden, InDesign und einen kurzen Tipp, Sie müssen nicht den ganzen Weg zurück zu hier gehen, um zu klicken und dann das Raster zu entfernen. Um Ihr Design zu sehen, können Sie hier im leeren Bereich immer doppelklicken und dann einfach hier klicken, um Ihr InDesign anzuzeigen. Also, was ich an dieser Stelle tun werde, ist einfach ein Symbol zu verwenden. Also mal sehen, ich kann ihm das Gesicht stellen. Und das ist auch eine große Ikone. Und wenn ich hier klicke, können Sie sehen, dass es keine Komponente ist, aber machen wir es zu einer Komponente. Aber bevor wir es tun, können wir es vielleicht in einen Kreis stecken, nur um es ein bisschen besser so zu zeigen. Wählen Sie diese beiden in der Mitte so positioniert, und gruppieren Sie sie. Das wird also unser Star sein. Ich habe ihn gesehen. Ich werde absichtlich den weißen Hintergrund hier lassen. Er würde den Schlüssel steuern, um ihn als Komponente zu erstellen. Und wir werden diese Komponente während unseres gesamten Designs verwenden. Lassen Sie es uns positionieren. So 12341234, zum Beispiel. Und lassen Sie es dort, weil wir darauf hinweisen wollen, dass unser Symbol genau dorthin gehen wird. Jetzt unten dort, werden wir strafrechtlich es tippen. Sehen Sie, das ist unsere Karte, B, G zum Beispiel. Das ist unsere Stern-Ikone. Positionieren Sie beide nach unten. Und wir werden mein Textwerkzeug verwenden und so etwas wie Zählen eins eingeben. Jetzt gehe ich weiter und stelle sicher, dass es links ausgerichtet ist, positioniere es hier oder gehe besser hier. Und mal sehen, wir haben keinen Stil daraus geschaffen. Also werde ich hier erschaffen. Wie Sie sehen können, 24. Und ich werde direkt hier springen, klicken Sie hier, um dies als 24 zu verwenden. Aber weil das regelmäßig ist, möchte ich es schaffen, um mutig zu sein, nur um ein bisschen besser hervorzuheben. Nun, weil wir regelmäßig klicken Sie hier, um Fett hinzuzufügen. So einen allgemeinen Charakterstil, den Sie voran gehen und erstellen. Sie können von hier aus springen und dann einfach einen neuen Charakterstil hinzufügen. Also werde ich sicherstellen, dass es ausgerichtet ist und alles voran, drücken Sie Kontrolle D dupliziert. Und ich werde hier einen Textabsatz erstellen. Nun, um das zu tun, werde ich einfach dieses bei 18 wählen. Sieht gut aus. Und ich werde diese beiden nach unten bringen, wie ich es mit dieser 91 getan habe. Also noch einmal, 80. Und um einen Absatz zu erstellen, können Sie eine feste Größe erstellen und einfach in diesem Textfeld auf hier erweitern. 1234. Also haben wir 40%, sorry, 40 Pixel hier, und verschieben Sie das einfach nach hier. Jetzt für die Höhe, können Sie diese einfach erweitern, wie Sie wollen. Und um es mit Text zu füllen, werde ich hier gehen und Lorem ipsum wählen. Also nochmals, Sie können hier rechts klicken, nach allen m ipsum als Plugin suchen, klicken, fühlen Sie den Platzhaltertext und Sie können wählen, was auch immer Sie wollen. Und ich werde dieses einfach verwenden, Text einfügen und Milchkuh es. Jetzt haben wir den Text. Jetzt unter dat. Wir werden auch mehr erfahren. Also gehe ich zurück zu meiner Ebenenpalette. Sie würde D kontrollieren, um das zu duplizieren, es nach unten zu bewegen. Und mal sehen, vielleicht kann ich zwischen allen einen Abstand von 40 machen. So etwas wie dieses, und wir haben 32, also lasst uns Position 40 sein. Ich werde in dieser festen Größe entfernen und es automatisch Whit machen. Und ich werde einfach eintippen, mehr einen Schriftsteller lernen. Und das ist es im Grunde. Was ich auch tun werde, ist ein weiteres Symbol hinzuzufügen. Und ich habe dieses Symbol bereits vorbereitet, aber bevor ich es tue, kann ich vielleicht in der Scheibe in eine andere Farbe wechseln, diese zum Beispiel. Und vielleicht können wir diese Farbe für alle Links verwenden. Da dies ein Link ist, werden die Leute darauf klicken. Und lassen Sie uns das sehen, vielleicht können wir, ich weiß nicht, es auf 20 positionieren. Also lass uns 12 sehen. Also 20. Ich kann zurück zu hier. Klicken Sie mit der rechten Maustaste, machen Sie lokal, genauso wie wir es mit all diesen anderen gemacht haben. Und das ist es im Grunde. Was wir jetzt tun können, ist, alle diese auszuwählen. Also sind wir bei 40, Misserfolg bei 40 und positionieren sie alle 1234, weil wir 40 von hier haben, 40 von hier. Und wir werden ein Symbol hinzufügen, das später ein bisschen größer sein wird, wenn wir mit dem Design beginnen. Also, wenn wir Sie zurück hierher bringen, lassen Sie uns jetzt alles organisieren. Also haben wir ein Sternsymbol, und lassen Sie uns all diese so nach unten bewegen. Also Sternsymbol, Konto eins. So, Weitere Informationen Pfeil-Symbol wird hier gehen. Und lasst uns Disk gruppieren und es Karte eins nennen. So wie das. Jetzt können Sie eine Wiederholungsrasterfunktion verwenden, wirklich einfach. Einfach ausdehnen, drei erstellen. Aber das werde ich nicht tun. Ich werde sie einfach duplizieren, die alle so aufgereiht sind. Und der Grund ist, dass ich später diese löschen werde, einen Entwurf erstellen und dann eine Komponente erstellen und von dieser Komponente zu all diesen anderen Designs bearbeitet. Also, das ist es im Grunde. Das Einzige, was wir vielleicht tun können, ist uns ein bisschen mehr Platz zu geben. So zum Beispiel, eine weitere Zeile des Raumes. Gehen Sie hier und füllen Sie den Platzhaltertext aus. Also mal sehen, wir müssen es auf Bitumen-Schreiben erweitern. Ich weiß nicht, warum. Es gibt mir keinen Platz mehr. Also werde ich es einfach selbst ausfüllen. So wie so. Und dann gebe ich mir einen Abstand von 40 zwischen all diesen, so wie diesem. Weil ich später einige echte Informationen hinzufügen werde. Und ich denke wirklich, dass ich ein bisschen mehr Platz für all diese brauche. Und Sie können diese Mittelkarte immer so ausrichten. Nun lasst uns sie umbenennen. Das ist die Karte Nummer zwei, und die letzte ist Auto Nummer drei. Ich werde sie ein wenig anders gruppieren, also so und mal sehen, wir können diese Dienste anrufen. Und wir können diesen Dienst eins nennen, eine Kontrolle C kontrollieren, V und schließlich V für diesen dritten kontrollieren. Und das ist im Grunde seine Dienstleistungen Abschnitt abgeschlossen ist. Wenn ich dich zurückbringe, brauchen wir jetzt das. So haben wir Homepage und wir haben Wechselkurs hier. Also, um ein wenig Zeit zu sparen, was ich tun kann, ist einfach Indies Flags Great hier verwenden. Oder wir können tatsächlich voran gehen und beginnen, indem wir unseren Wechselkursbereich erstellen. Also, um das zu tun, werde ich diese Position wählen, es so. Und mal sehen, vielleicht kann ich es Wechselkurs nennen, BG. Mein Dad. Und mal sehen, 1924, die Höhe für die Breite. Gehen wir mit 240, so. Für die Farbe, lassen Sie uns mit der gleichen Farbe gehen wie wir für unsere Bilder und für den Abstand glitzernd. Vielleicht können wir mit etwas Größerem gehen, wie zum Beispiel 150. So wie das. Und jetzt können wir wirklich eingraben und beginnen, indem wir unsere Texte hinzufügen. Also ohne einen Randtyp in. Und mal sehen, 24 Bolzen funktioniert gut. Lass uns sehen, wie ich es neu zusammensetze, um hier zu sein. 1234 und unten Kontrolle D. Und positionieren Sie diese Trümmer hier. Mal sehen, verließ die Linie und das wird vier sein. Und in der Tat, wie Papa und mal sehen, wird das 24 sein, so unregelmäßig. Mal sehen, wir sind bei 40, also sieht alles gut aus. Nun, um all diese Informationen hinzuzufügen, lassen Sie uns sehen, was wir tun können. Vielleicht können wir diese beiden duplizieren. Hit Control D, Position und unten positioniert ist, um hier zu sein, stellen Sie sicher, dass beide mehr zu ihnen, unserem Zentrum und zum Beispiel, Disziplin Euro gelassen unserem Zentrum und zum Beispiel, werden. Und es wird ein Wert sein. So 1.58917, Zum Beispiel. Mal sehen, vielleicht können wir ihm 15 Abstände geben und das ist es im Grunde. Alles, was wir tun müssen, ist diese Flaggen zu erstellen. Um das zu tun, kann ich noch einmal ein Raster erstellen und Ihnen das noch einmal zeigen. Also mal sehen. Lassen Sie uns mit etwas etwas Größerem gehen, wie eine Zeile, neun Wochen AT, die den Rand entfernen, verwendet das wiederholte Gitter. Und ich werde das Video hier pausieren, weil ich den gleichen Prozess erstellen werde , den ich Ihnen bereits gezeigt habe. Und jetzt, da ich das getan habe, können Sie sehen, dass alle ausgewählt sind. Und ich ging auch voran und schob diese beiseite, die ich eigentlich nutzen werde. Ich habe also US-Dollar, Vereinigtes Königreich und Schweizer Franken, Russischer Rubel und Japanischer Yen. Und Sie sehen nicht, dass uns der Euro fehlt. Das liegt daran, dass es hier keine Flagge der Europäischen Union gibt. Also gehen wir weiter und entfernen alle diese. Klicken Sie hier. Könnte die D-Position hier kontrollieren. Und das Kribbeln wird tun, ist ein Bild einer EU-Flagge per Drag & Drop zu ziehen. Und Sie können diese Bilder auf Wikipedia finden. Sie sind frei für diese Zwecke zu verwenden. Also werde ich voran gehen und auswählen, ziehen und ablegen. Und was ich eigentlich tun werde, ist, die Position zu sehen, und das ist eine Linksausrichtung, stellen Sie sicher, dass es bei 40 so ist. Sollten diese beiden in der Mitte stehen und sie so positionieren, dass sie hier sind. Mal sehen. Also vielleicht 22. Ich denke, das funktioniert gut. Und jetzt gehen wir weiter und beginnen, indem wir diese hinzufügen. Also werde ich Control G Gruppe diesen Qualitätstext treffen, so. Und dann machen Sie einfach noch ein paar Kopien und positionieren Sie sie. Also gehe ich weiter und positioniere meine US-Flagge hier. Du jemand. Ja, geben wir dieses Kapital. Oder Sie können voran gehen und klicken Sie rechts hier, um eine Großfarbe hinzuzufügen. Es ist einfacher für dich. Was brauchen wir? Als nächstes kommt ein UK. Also positionieren Sie es hier, messen Sie es in der Mitte mit all diesen Control D-Position hier. Das ist ein tolles britisches Pfund. Erstellen Sie eine weitere Kopie, und erstellen Sie eine weitere Kopie direkt hier. Was brauchen wir als nächstes ist Schweizer Franken und der Name ist c, h, f. also positionieren Sie es hier. Sie können sehen, wenn Sie Ihre Kopien haben, es ist viel einfacher, mit all diesen umzugehen weil es nur im Grunde eine Drag & Drop Situation ist, wie Sie sehen können. Also für dieses X, U, B und schließlich, und Japanisch noch, und nennen Sie es einen Tag. Dies ist also unser Abschnitt später am Wochenende, gehen Sie vor und machen Sie einige Änderungen, passen Sie dies an, aber im Grunde ist das irritierend. Also lasst uns weitermachen und alles organisieren. Bewegen Sie die Belüftung hier von oben. Ich setze den Wechselkurs hier ein. Ich werde das Datum auch hier vorlegen. Und dann werde ich mit dem Euro gehen. Es ist also diese eine Position hier hinein. Und stellen Sie sicher, dass ein handgefertigter Text, USD mit diesem Text und Gruppe es kongruent britisch nennen muss. Sie können mit einigen von ihnen sehen, es kann ein wenig Zeit in Anspruch nehmen und es ist schlagen und mühsam. Aber wie immer kann man die Dinge etwas beschleunigen, indem man vor allem so spricht, wie ich es tue. Aber im Grunde können Sie Ihre Geschwindigkeit erhöhen. Jetzt endlich, lasst uns weitermachen und all diese Gruppen zusammenfassen. Ich werde mich im Moment nicht mit den tatsächlichen Werten beschäftigen. Wir werden das für das Design so belassen. Und jetzt gehen wir weiter und gehen weiter nach unten. Also, wenn ich Sie hierher nehmen, können Sie sehen, dass wir eine linksbündige Bilder haben, Titel Absatz und den Text haben. Was wir also jetzt anfangen werden, ist vielleicht vielleicht einige dieser Elemente zu kopieren und einzufügen. Also für unser Bild und lassen Sie uns voran und verwenden Sie ein Rechteck-Werkzeug. Ich werde voran gehen und die Grenze entfernen. Und mal sehen, lass uns diese Farbe für unsere Bilder verwenden. Also ist es dieser hier. Für diese Verkleidung glitzernd. Vielleicht können wir mit 150 von hier gehen, so. Und lassen Sie uns für die Breite sehen, vielleicht können wir mit sechs Spalten breit gehen, also 246, um sich mit diesem auszurichten. Und wir haben sechs weitere für den Text und für all diese anderen Elemente. Also das erste, was ich tun werde, ist , diesen Button zu kopieren und wir werden ihn umbenennen. Erfahren Sie mehr. Btn, gute Kontrolle. Klage. Und mal sehen, Position. Es ist irgendwo hier. Und ich werde tatsächlich zusätzlichen Platz schaffen. Wenn ich also mein Gitter entferne, können Sie sehen, dass ich eine Spalte dazwischen habe, nämlich das leere Feld. Nur um mir ein bisschen mehr Atemraum zu geben damit ich das alles ein bisschen besser sehen kann. Jetzt kann ich auf meine Texte klicken und sehen. Und ich kann so etwas eingeben wie Service wird hier gehen, unser Service-Name hier. Und das ist nur, weil und um Ihren Kunden zu zeigen und was möglich sein wird, was sie hier einschließen können. Und wir werden auch hier etwas anderes machen. Also werden wir mit mutig gehen. Wir gehen mit 48. Textfarbe wird die gleiche sein. Gehen Sie einfach hier rec Charakter Stil und mehr Breite rechts unten hier. Als nächstes gehen wir mit einem Absatz Text. Und mal sehen, 24 wird arbeiten. Nun, hier, Extended. Mal sehen, vielleicht fünf Textzeilen wie diesen. So wie so. Und ich werde es hier schließen und zu meinen Plugins zurückkehren, den Platzhaltertext füllen, nur um das ganze Ding so zu füllen. Und lassen Sie uns für den Abstand sehen, wir können mit 40 rundum gehen, wie wir es vorher getan haben. Und jetzt können Sie beginnen, diese sich wiederholenden Änderungen zu sehen. Also, über mehrere Male sprechen. Also dieser Abstand oder 40 und so weiter und so weiter. All diese Dinge werden also immer mehr passieren, wenn wir anfangen, sich durch unsere Entwürfe zu bewegen. Also hier wird unser Bild sein. Und nennen wir das, sagen wir Dienstname. Zum Beispiel, nur für jetzt und später, wenn wir tatsächlich echte Inhalte haben, werden wir den Namen ändern und aktualisieren. Jetzt kann ich Control S treffen, und ich kann Ihnen zeigen, was Sie damit machen können. So können Sie auf den Namen des Flughafens klicken und hier klicken, nur um in den Vorschaumodus zu gelangen. Und Sie können sehen, wie das aussieht, weil wir unseren rpart erweitert haben, können wir voran gehen und nach unten scrollen. Und jetzt können Sie sehen, dass dies wie eine tatsächliche Website aussieht. So können Sie immer weitermachen und dies mit Ihrem Kunden teilen, indem Sie einfach zur Freigabe gehen. Aber ich werde das etwas später erklären. Lassen Sie uns jetzt voran gehen und, und im Grunde runden dieses Design ab und beenden Sie es. Lassen Sie uns nun damit beginnen, unsere aktuelle zu erstellen. Wenn wir Sie noch einmal zurücknehmen, können Sie sehen, dass wir diese beiden Karten haben, Säge, Bild und Text und btn ist unten. So Pakete sind Konten kombiniert. Gehen wir zurück und lassen Sie uns mit der Gestaltung der Dosis beginnen. Also, weil wir müssen, können wir mit 16 Breite so gehen. Und mal sehen, was wir mit ihnen machen können. Also nennen wir diese große Karte, zum Beispiel. Und so. Und geben wir ihm die gleiche Farbe. Also in S1. Und lasst uns weitermachen und die Größe ändern. So können wir mit 7-0 gehen, zum Beispiel, so, Eckenradius von 20 wird gut funktionieren, entfernen Sie jede Grenze. Und was wir tun können, ist das zu duplizieren. Du hast D kontrolliert, wir werden es großes aktuelles Bild nennen. Weil es das Bild sein wird, das genau hier oben gehen wird. Also mal sehen. Wir können hier rechts eingeben, 20, 24 oben links und oben rechts, 00 für unten links und unten rechts. Und um Ihnen zu zeigen, was ich getan habe, kann ich hier klicken. Und mal sehen, wir können 368 zum Beispiel tun. Und jetzt können Sie sehen, dass dies unser Hintergrund für den Text ist und dies für unser Bild ist. Also werden wir unser Bild ein wenig später einbinden. Und ich werde es dabei belassen. Also, um unseren Text zu setzen, lass uns hier sehen. Und wir können zum Beispiel mit 24 Volt voran gehen, für diesen. Ja, ich denke, das funktioniert wirklich gut. Und mal sehen, wir können mit 40 den ganzen Weg herum gehen. So 1234. Und das können wir auch hier tun, 1234. Wir können die Kontrolle der D1-Gruppe übernehmen, sorry, duplizieren Sie das, positionieren Sie es nach unten. Und lassen Sie uns scheinen, dass wir diese 18 unregelmäßig machen können. Und wir können es auf 1234 ausdehnen und es dann hier positionieren. Und ich werde mir vier hintereinander geben. Und stellen Sie sicher, dass das hier passt. Gehen Sie zu meinen Plugins. Lorem ipsum, Klickrate. Wagen Sie sich. Ich verstehe nicht, warum es das getan hat. Aus irgendeinem Grund funktioniert es nicht. Vielleicht können wir das ausschalten und mit fester Größe gehen. Ja, es funktioniert jetzt. Ich weiß nicht, warum sie das getan haben, aber es ist wirklich egal. Also, was ich als nächstes tun werde, ist, diesen Knopf zu benutzen und ihn tatsächlich hinein zu legen. Also werde ich es hier setzen. Stellen Sie sicher, dass die Mitte der Taste hier aufsteht. Und ich werde es tatsächlich 40 von rechts positionieren. So 1234. Und die Anpassung der Schulden, es gibt ihm ein visuelles Interesse anstatt Position in der Taste genau hier und mit all diesem leeren Raum. Also, jetzt sieht es irgendwie aus wie einer. Sie können auch positionieren, um in der Mitte links ausgerichtet zu sein, wie Sie möchten. Aber ich denke, für die Variationszwecke ist es besser, es hier zu lassen, aber es liegt wirklich an dir. Sie können voran gehen und erleben, sorry, experimentieren Sie mit diesem, wie Sie wollen. Also wird es das hier positionieren. Und siehe, so müssen wir diese beiden Texte zu gruppieren, Bild und lernen Sie mehr Taste g steuern, so genannte diese große Strömung. So, drücken Sie Kontrolle D, um zu duplizieren. Und mal sehen, vielleicht können wir sie auf 150 positionieren , damit wir den gleichen Abstand haben können, den wir zwischen all diesen hatten. Nun, da diese Seite schön kommt, was wir schließlich tun müssen, ist im Grunde erstellen und bloggen. Denn wenn ich Sie zurücknehme, können Sie sehen, dass wir Neuigkeiten haben und wir diese drei Abschnitte mit Nachrichtenartikeln haben. Also, was wir tun können, ist tatsächlich in der gleichen aktuellen Hit Control D geformt und Bit down. Ich werde auch die gleichen Texte verwenden. Also traf Kontrolle C, kontrolliere V Mission. Es ist in der Mitte. Und vielleicht können wir das unsere neuesten Nachrichten nennen oder was auch immer. Unsere neuesten Blog-Beiträge oder wie auch immer Sie wollen, um sicherzustellen, dass es 150 als auch. Stellen Sie sicher, dass es in der Mitte ist. Und was ich eigentlich mit diesem hier machen werde, mal sehen. Ich kann hineinspringen und es wäre, ich kann diese kleine Strömung nennen oder so etwas. Oder noch besser, wir können diese tatsächlich nutzen. Also mal sehen. Kontrolle C. Wir schreiben hier gelöscht diese. Kontrolle v Position ist hier. Und weil wir drei von ihnen haben, wird es im Grunde dasselbe sein wie dieser. Also mehr mit dem ganzen Weg nach unten. Nun, was ich hier eigentlich tun werde, mal sehen. Nennen wir diesen kleinen Strom. Denn wir werden es später tatsächlich erstellen, um eine Komponente zu sein. Was Sie mit diesem tun werden, ist sicherzustellen, dass wir nur zwei Textzeilen haben , wie so. Also 40, wieder, drücken Sie die Kontrolle D. Wir werden das Datum hier setzen, weil Sie offensichtlich ein Date für diese brauchen. Wir werden mit Auto Breite gehen. Und lassen Sie uns 1012, 20-24 Beispiel sehen. Und wir werden ihm diese Farbe geben, zum Beispiel, nur um ein wenig zu unterscheiden, das kann gleich bleiben. Und statt dieses Ikhwan, mal sehen, können wir diese Kontrolle D bekommen und sehen wir kleinen Teil wie diesen. Jetzt für die Höhe. Und mal sehen, was wir tun können. Vielleicht 300, ich denke, es wird gut so funktionieren. Und sie werden die Farbe ändern, um sie zu entdecken. Was wir als nächstes tun werden, ist dies in der Höhe zu erweitern. Diese originale Karte. Also mal sehen, 631. Ich denke, es wird gut funktionieren. Ja, ja. Also wähle ich diese mit der Umschalttaste positioniere sie nach unten 1234. Mal sehen. Und mal sehen, was wir damit machen können. Also positionieren Sie es von hier nach oben. Vielleicht mal sehen, vielleicht kann ich diese Veränderungen nur ein bisschen aufheben. Oder noch besser, ich kann das ein bisschen nach unten bewegen. So wie 20, wird das 40 sein. Und mal sehen, 1234. Das ist in Ordnung. Was wir eigentlich brauchen, ist, das zu positionieren. Also wird es auf 87 sein, weit 50, sieben erreicht. Und lassen Sie uns einige letzte Änderungen vornehmen. Also brauchen wir diese beiden unteren. Also unten rechts und unten links, um bei 0 wie folgt zu sein. Wenn ich nach draußen klicke, kannst du sehen, wie das aussieht. Also endlich haben wir 40, wir haben 40 von hier, wir haben 20, wir haben 4040. Also lasst uns weitermachen und das gruppieren. Also haben wir einen aktuellen. Ich kann es hier verstecken. Und lassen Sie uns die Dinge nur ein bisschen organisieren. So Service eins, sehen mehr gibt es zu. Und gerade hier werden wir in so etwas wie Artikel eins schreiben. Nur um die Dinge ein wenig zu unterscheiden, weil dies unsere neuesten Nachrichten sein wird. Mal sehen, wo wir so sind. Und drücken Sie Kontrolle D, um es zu duplizieren. Und dupliziere es noch einmal. Dies ist Ereignis a, B, Artikel 2 und Disziplin zu Artikel drei wie folgt. Und organisieren Sie diese einfach. Also das ist zwei, das ist aktuelle drei. Positionieren Sie sie nur ein bisschen anders. Und schließlich können wir das unsere neuesten Nachrichten nennen, weil wir bereits von diesem Titel wie Zelle haben. Nun, die letzten zwei Dinge werden wir unsere Info-Strip hier und den Fußzeilenhintergrund erstellen . Ich werde es nur im Grunde als Fuß zum Hintergrund haben, weil ich werde Ihnen erklären , wie Sie diese Fotos bearbeiten können, während Sie ein wenig später gehen. Aber im Moment werden wir nur den Fußzeilenhintergrund haben, Derek. Aber davor geben wir ihm einen Info-Strip. Und dazu werden wir noch einmal ein Rechteck-Werkzeug verwenden. Und lasst uns es auf 150 positionieren. Also, wenn wir das alles sehen, nennen wir es Strip. Bg wird im Wesentlichen den Mittelwert in Schlüsselinformationen enthalten , die wir unseren Besuchern darstellen wollen. Lassen Sie uns also eine Höhe von 180 geben. Lasst uns nach 50. Das ist in Ordnung. Lassen Sie uns diese Farbe geben, zum Beispiel schön und dunkel. Lasst uns die Grenze entfernen. Und was wir jetzt tun werden, verwenden wir einfach unser Logo, das wir hier haben, oben jetzt. Oder wir können es tatsächlich vom Helden ziehen und ablegen. Waren es tatsächlich hier positionieren. Verwenden Sie die graue Version oder Schwarz-Weiß-Version, wie ich Ihnen erklärt habe. Und das ist, was ich gesagt habe, weil Sie diese gleichgültig auf verschiedenen Farben positionieren müssen . Deshalb haben wir Logos in verschiedenen Versionen, verschiedenen Variationen und verschiedenen Farben. Nun endlich, was wir brauchen, ist der Text. Also werde ich eigentlich voran gehen und das kopieren und kopieren. Also suchen Sie, positionieren Sie dieses Logo nach unten, gehen Sie zu meiner Spitze. Verwenden Sie jetzt Standorte. Hold könnte unsere Standorte kontrollieren. Verwenden Sie Telefon und disziplinieren Sie es. Kontrolle C, um es zu kopieren und den ganzen Weg nach unten zu gehen. Klicken Sie auf mein BG-Steuerelement V und bewegen Sie Papageienabschnitt nach unten. Ich halte meine Schicht und belüftere mehr. Und jetzt, was wir tun müssen, ist im Grunde eine reorganisieren diese. Und nur ein bisschen, Mal sehen, vielleicht kann ich das und das hier irgendwo sein, zum Beispiel. Und ich kann das sagen, und das scheint vorerst hier zu sein. Und was ich endlich brauche, ist Text für meine E-Mail. Also haben sie eine E-Mail, also hat es einen Kredit auf der bank.com. Du wirst offensichtlich deine eigenen benutzen, sie später auf Kunden legen. Und was wir endlich brauchen, ist ein E-Mail-Symbol. Also werde ich eine verwenden, die ich bereits zuvor erstellt habe. Und hier ist es. Ich gehe zurück hierher, befindet sich hier, mit der rechten Maustaste machen lokal, genauso wie wir es für alle getan haben oder schnell überprüfen können. Das ist also um 20 Uhr, wenn ich mich erinnere, ja. Also geh hier. Verschieben Sie eins, um sicherzustellen, dass dies in der Mitte so ist. Und das ist zentralisiert. Also werden wir diese E-Mail so anrufen. Und lassen Sie uns einige schnelle Ausrichtungen machen. Also positioniere ich das nach unten. Wir können dieses Telefon und Orte anrufen. Und ich werde hier tatsächlich einen echten Standort nutzen. Könnte sehen, weil ich ein bisschen faul zu tippen bin, werde ich einfach das Grau hier Kontrolle V ausstatten und mal sehen, ich kann diese neu positionieren. Deshalb legen Sie sie in Ordner. Ich wähle das aus, um hier zu sein. Und dann wähle ich alle drei aus und klicke direkt hier, was wird es gleichmäßig in Dissenter von hier nach hier positionieren. Jetzt lassen Sie uns noch einmal eine Reorganisation machen. Also haben wir Logo, Standort, Telefon, E-Mail. Eine letzte Sache, und wir werden alle auswählen. Klicken Sie hier, um sicherzustellen, dass sie sich in der Mitte befinden. Es trifft Control G und ruft diese Info rutschig auf. Und weil dieser Abschnitt wirklich ziemlich einfach ist, können wir ihn am Ende in unserem endgültigen Design verwenden. Schließlich werden wir eine Fußzeile erstellen. Und um das zu tun, werde ich einfach noch ein Rechteck verwenden. Also, mal sehen. Lass es uns eines Tages geben. Mencius von 19-21 Und von 5-6, fünf, zum Beispiel. Ich sorge dafür, dass es in der Mitte ist. Ich gehe hierher zurück und benutze unsere dunkelste Farbe, die diese 100 wird es tatsächlich unten bewegen. Ich weiß nicht, warum Adobe st das von Zeit zu Zeit macht, aber es zeigt mir immer wieder diese Variationen. Ich möchte das hier machen, das hier positionieren. Und jetzt habe ich alle meine Farben sind gleichmäßig positioniert. Jetzt, da ich das getan habe, kann ich diese Fußzeile BG nennen, sie ganz nach unten positionieren. Ich werde eigentlich voran gehen und RR Board schließen. Also doppelklicken und stellen Sie sicher, dass Ihr Zoom den ganzen Weg in schöne Kleidung, wir haben eine Grenze, Sie gehen, um das zu entfernen. Und im Grunde das einzige, was ich tun werde, ist die Verwendung und d up Elemente aus unserer Navigation. Also, wenn wir Sie zurück hierher bringen, haben wir Konten gehört, Karten, investieren Sie digital. Das ist, was wir tatsächlich verwenden und schließlich beide Links verwenden. Also werde ich jetzt den Text von unserem Haupt verwenden. Also einfach ausgewählt drücken Strg-C. Und mal sehen, ich kann in Position zoomen halten Control V Nun, was ich tun werde, ist eine weiße Farbe zu verwenden, so. Und schließlich werde ich so etwas wie 24 fett für diese Jahre weg Farbe verwenden. Und jetzt habe ich sie nur ein wenig zu Seife reorganisiert. Mal sehen. Vielleicht kann ich es auf 100 von oben positionieren. 30. Wireframes: Gehen Sie weiter und fahren Sie mit unserem Wireframe fort. Also, wenn wir in ein wenig näher zoomen, können Sie sehen, dass die nächste Seite, die wir haben, um Konten zu erstellen. Und was ich tun werde, ist hier klicken, Steuerelement D drücken, um mein rpart zu duplizieren. Und dann, was wir tun werden, wie ich in früheren Videos erklärt habe, werden wir dieses Hauptnav nicht berühren. Wir werden uns wirklich daran anpassen. Wir werden es später in den Entwurfsphasen animieren, aber im Moment werden wir es einfach hier lassen. Nun, wenn es um Heldenbild geht, wie Sie aus diesen Wireframes sehen können, die wir gezeichnet haben. Also auf der Homepage, die hier ist, haben wir den Titeltext und Call-to-Action-Button auf der linken Seite. Aber auf jedem einzelnen von diesen, Danach haben wir es auf der rechten Seite, wie Sie sehen können, nur um es eine Art von Unterscheidung zwischen diesen beiden Seiten zu geben. Also, was wir zuerst tun werden, ist, dass wir reinspringen. Und ich werde nur doppelklicken, weil wir es in einen Ordner legen. Ich werde es hier nur irgendwo positionieren. Also lasst uns 246 sehen. Also lasst uns es auf die sechste richten. Wenn wir also etwas näher heranzoomen, sehen Sie 1-2-3, 4-5-6. Es bedeckt also sechs Indies-Linien, Gitternetzlinien. Als nächstes werden wir hier doppelklicken und Konten eingeben , weil wir ihm einen Namen geben möchten. Und noch eine Sache über Adobe XD, wenn wir Flüsse zeigen wollen. Also mal sehen, ob ich Steuerelement ein 0, dass dies unser Wireframe ist, Dies sind unsere Leute Wireframes in diesem ist unsere Website-Architektur. So können Sie ihm einen Flow geben und Ihren Kunden, Ihren Kunden oder anderen Designern im Team einen Flow zeigen . Klicken Sie hier einfach auf einen Prototyp. Klicken Sie auf diesen und klicken Sie hier. Es wird Fluss eins zeigen, einfach auf Einsicht doppelklicken und ihm einen Namen geben. Wir werden es Wireframes nennen. Und warum Flo wichtig ist. Wenn ich zu meinem Design zurückgehe, können Sie sehen, dass dieser Name hier klebt. Nun, später werden wir uns tatsächlich viel mehr von diesen Designelementen geben . Viel mehr davon sind Boards. Wir werden das Responsive Design einbeziehen, wir werden Dashboards und so weiter einschließen. Schließlich werde ich zeigen, wie es all dies an Apps und App-Größen anpassen kann , die wir für das iPhone entwerfen werden. All diese Instinkte werden uns viel Platz nehmen. Und wenn Sie diese Datei an Ihre Kunden und an die Entwickler senden, wollen sie wissen, was alles ist. Und schließlich ist es für Sie als Designer viel einfacher. Wissen Sie, was alles ist, weil Sie am Ende dieses Kurses sehen werden. Wir werden viele dieser Informationen im Inneren enthalten haben. Deshalb ist es wichtig, Ihre Flows zu zeigen. Entweder profitieren Sie von dem Fluss und diese Wireframes werden sich nur miteinander verbinden. Wenn wir also etwas näher heranzoomen, können Sie sehen, dass wir hier eine Titelseite oder eine Website haben oder wie Sie es nennen möchten. Aber nach der Login-Seite springen wir innerhalb des Flughafens. Entschuldigung, im Armaturenbrett. So Dashboard kann als separater Fluss sein. Es kann unser Wireframe-Dashboard sein. Es kann Dashboard-Drahtmodell sein, wie Sie es nennen möchten. Und wir werden ein bisschen später sehen. Werden wir eigentlich alle diese Seiten innerhalb unserer Wireframes gestalten? Oder werden wir nur dieses erste Dashboard entwerfen und dann ins Design springen und dann alle diese anderen Seiten zusammenfassen. Verschwenden Sie nicht zu viel Zeit. Also, jetzt, das ist abgedeckt, springen wir wieder rein. Und was wir für diesen hier tun wollen, ist, und noch einmal, das ist der Grund, warum Sie all diese haben. So können Sie sehen, dass wir einen Text hier haben, eröffnen Sie Ihr Konto. So können wir einfach hier doppelklicken. Und wir können die Gruppierung von Diensten aufheben. So können Sie mit der rechten Maustaste auf Gruppe oder Shift Control G, Shift Command Z und nennen Sie es öffnen Sie Ihr Konto. Und was wir hier haben werden, wenn ich Sie noch einmal hierher bringe, werden wir vier verschiedene Symbole haben. Also werden wir im Grunde vier verschiedene Boxen mit dem Text im Inneren haben und auf diesen Feldern werden wir tatsächlich Symbole und den Text einschließen. Also mal sehen, vielleicht können wir damit beginnen, dies hinzuzufügen. Vielleicht können wir es einen Selektor nennen. Zum Beispiel. Gleich unten hier. Ich kann in diese Karte Nummer eins springen. Lassen Sie mich die beiden löschen, damit ich sie öffnen kann. Und anstelle des aktuellen BG kann ich diesen Selektor vielleicht so aufrufen. Und wenn wir etwas näher heranzoomen, kann ich das, was sie erwähnt haben, ändern, weil es im Moment viel zu groß ist. Also gehen wir mit drei 66 Breite, 312, so. So können Sie sehen, dass es drei Spalten in der Breite nimmt. Wir werden das loswerden. Wir werden das loswerden. Und wir werden eigentlich nur unsere SMS hinterlassen, nur diese. Also werde ich das auch entfernen. Und jetzt haben wir diese beiden. Also werde ich dieses Start-Konto anrufen, denn wenn Sie sich erinnern, sie uns diese Buchhalternamen gegeben. Also starten Sie die Zählung ist unsere erste. Und wählen wir diese zwei Sterne Konto und dieses, positionieren Sie es in der Mitte. Lassen Sie uns Position r, Sternsymbol. Positionieren Sie es so in der Mitte, und lassen Sie es für jetzt so. Aber ich werde als nächstes tun, ist diese Form zu schaffen. Und vielleicht kann ich es sogar ein bisschen auf so etwas ausdehnen. Vielleicht kann ich es umdrehen, weil ich zeigen möchte, dass verschiedene ausgewählt ist. Also lassen Sie uns diese auswählen, um sicherzustellen, dass sie sich in der Mitte befinden, dieses Polygon nach unten Selektor nach oben, und nennen wir es Pfeil. Mal sehen. Lassen Sie uns nur ein wenig hinauszoomen und sehen, wie es aussieht. Ich denke, es wird gut funktionieren, es wird mein Gitter für eine Sekunde ausschalten. Ich denke, es wird gut funktionieren, ich muss es nur positionieren und genau wie in der Festplatte vielleicht. Und dann werde ich ihm die gleiche Farbe geben und die ich mit diesem Hintergrund gemacht habe. Also werde ich diese auswählen, um hier zu klicken, um in dieser Form zu kombinieren. Also jetzt haben wir eine einzige Form. So können Sie sehen, ob ich diese Farben ändere, Sie können sehen, wie es sich ändert und aktualisiert auf diese eine einzelne Form. Also werden wir es dort lassen. Und mal sehen, wir können diesen Start-Account so anrufen. Und ich kann mein Gitter zurückbringen, weil ich es brauchen werde. Ich werde diese eine Position hier duplizieren. Eine Position, die hier ist. Wieder einmal können Sie die Funktion Wiederholraster verwenden, wenn Sie die noch einmal kaufen möchten, da dies nur ein Drahtmodell ist. Und später werde ich dies tatsächlich als Komponente erstellen und einige zusätzliche Elemente hinzufügen. Dann werde ich es einfach so lassen. Dieser nächste wird als ausländisches Konto bezeichnet. Und ich werde einfach hier doppelklicken. Wie Sie sehen können, haben wir einige Pannen und das wird tausendjährig sein. So ein Millennial-Bericht. Und der Grund, warum ich all diese umbenenne, ist es einfacher, später zu verstehen, was alles ist. Und dieser letzte ist Prämie. Also werde ich nur meinen Start zu schreiben Freemium auswählen und nennen es ein t. Als nächstes werde ich dies löschen, und ich werde das tatsächlich zu meinem Vorteil nutzen. Also mal sehen, vielleicht Aiken eine Position, die bei 60, vielleicht, mal sehen. Also 1-2-3, 4-5-6 vielleicht. Mal sehen, wie das hier aussieht. Und ich kann es auch beweisen, nur um dir zu zeigen , wie es später aussehen wird, wenn es live ist. Offensichtlich können Sie es im Moment nicht sagen, aber dieser, sagen wir, ist ausgewählt. Also mit jedem von diesen, wenn Sie sie auswählen, verachtung fois gehen zu aktualisieren und dieses Bild wird auch zu aktualisieren. Also lasst es uns zurücktauschen. Und für dieses Bild, lassen Sie mich schnell diese Farbe wählen, weil ich einige dieser Koordinatorradien anpassen muss . Also mal sehen. Ich werde meine oben links aktualisieren und 20 hinzugefügt. Das wird 20 sein. Wenn wir also draußen klicken, können Sie sehen, dass dies und dies um sie herum sind. Was ich eigentlich als Nächstes tun werde, ist Mangrovenrücken einzuschließen. Und ich werde in mein Bild springen. Und ich werde es genau dort positionieren. Also werde ich es etwas schmaler machen, als es ursprünglich war. Einfach so wagen, es passt zu unserem Gitter und unserer Struktur ein bisschen besser. Wenn wir also sehen, dass wir bei 100 sind, sind wir bei 60. Damit alles gut aussieht. Was ich als nächstes tun werde, ist ein Abschnitt der häufigsten Fragen direkt unter der Dissektion hinzuzufügen. Also werde ich Kontrolle D treffen und es auf 100 positionieren. Und mal sehen, ich werde es hier lassen und mal sehen, was wir loswerden können. Damit wir all diese Dinge loswerden können. Also, was ich für dieses tun werde, ist, mal sehen, ich brauche, ich brauche diesen Abschnitt zum Beispiel. Also lasst uns hier reinspringen. Und Sie können immer zwischen all diesen hin und her gehen und diese verschiedenen Elemente nehmen. Ich werde auch lernen mehr Hit Control C. Und ich werde auch hier zurück gehen und mich gleich hier positionieren. Also lasst uns sie jetzt nur ein bisschen organisieren. Also, weil dies häufig Fragen sein werden. Und wir können diesen Abschnitt wirklich beenden , weil es später viel einfacher für uns sein wird. Das ist also 24 Volt. Ich werde dies tatsächlich auf 24 erhöhen. Ich werde das auf 24 erhöhen. Und eine Mischung, die diese Farbe ausgewählt wird. Und mal sehen, ich kann ihnen Abstände oder 40 geben. Das sieht gut aus. Mal sehen, das wird operiert werden, oder vielleicht für so etwas. Und lassen Sie mich den Originaltext kopieren und einfügen , den wir hier tatsächlich verwenden werden. Und ich werde hier springen und sicherstellen, dass das 40 ist. Und das wird in gemeinsamen Account-Fragen wie so schreiben. Und ich werde meine Icons hierher ziehen und ablegen, was ich vorbereitet habe. Also werde ich hier springen und mein Symbol hier positionieren und es nach links ausrichten. Und mal sehen, ich kann es auf 40 positionieren, so wie hier. Ich werde direkt hier springen oder mit der rechten Maustaste lokale machen, und das ist mein Symbol. Jetzt werden alle diese Premium-Symbole aus Einladungen oder Elementen entnommen. Und Sie werden diese Symbole in unserem gesamten Design sehen, besonders wenn wir diese berühren. Und ich werde auch Links zu diesen Icons und diesen Icon-Packs hinterlassen. Mann, um mich nicht zu wiederholen, können Sie sie nicht für etwas anderes als Lernzwecke verwenden. Wenn Sie sich entscheiden, sie zu verwenden, dann ist es nicht überrascht, wenn einige dieser Unternehmen versucht haben, Sie zu verklagen, um nach Ihnen zu gehen. Also, wenn Sie sie für Premium-Projekte, für Ihre Kundenprojekte und so weiter verwenden möchten, müssen Sie diese Icons kaufen. Jetzt werde ich noch drei davon machen. Mal sehen, Kontrolle. Stellen Sie sicher, dass dies 41234 und Control D noch einmal ist. Also mal sehen. Ich weiß nicht, warum es mir 39,8 gibt, aber es spielt keine Rolle. Ich werde auch einige davon aus meinem ursprünglichen Design kopieren und einfügen , nur um ein bisschen Zeit zu sparen. Denn wie er in diesem Abschnitt sagte, wird auf unseren Seiten erscheinen. Wenn wir also hier vergrößern, können Sie häufig gestellte Fragen sehen, Fragen kommen, Fragen kommen und so weiter. Also, all diese Seiten wird es erscheinen, also ist es viel einfacher für uns, es jetzt zu reparieren und jetzt fertig zu werden, als später darauf zu warten. Jetzt springen wir hinein und organisieren die Dinge ein bisschen. Also haben wir Kontoinformationen, Icon, Icon Fragen, wir haben den Text. Und lasst uns diese drei ein bisschen so organisieren. Und ich werde in Gruppe D Hit Control G springen und ich werde diese allgemeinen Zählfragen so nennen. Und lassen Sie mich es einfach über Infostreifen so positionieren. Häufige Fragen wie diese. Und lasst uns anstelle des Dienstnamens hineinspringen. Mal sehen, was wir tun können. Wir können diese Informationen oder Informationen einfach umbenennen. Denn wie gesagt, wird dies Informationen enthalten, die für jedes dieser Konten spezifisch sind oder wenn ein Benutzer auf diese klickt und sich diese Informationen tatsächlich ändern wird. Also, wenn wir in die Entwurfsphase kommen, werde ich tatsächlich zeigen, dass wir zum Prototyp Bett gehen, jemanden erwähnen, etwas Gewürz hinzufügen. Und da ist, wenn sich diese Informationen zusammen mit diesen Bildern ändern. Also, jetzt lassen Sie es uns einfach bei einem behalten. Also lassen Sie uns von öffnen Sie Ihr Konto und ich werde alle diese auswählen. Also eröffnen Sie Ihr Konto. Schulden. Im Folgenden haben wir Fragen kommen und wir haben ein gemeinsames Konto Fragen. Also lasst uns scheinen Neukomposition verdient es, bei 140 von hier zu sein. Also mal sehen, wir sind bei 140. Ich benutze nur Shift und meinen unteren Pfeil. Also werde ich das duplizieren. Drücken Sie die Kontrolle D. Positionieren Sie es hier. Kontrolle D, noch einmal. Positionieren Sie diesen nach unten, diesen in die Mitte. Und mal sehen, Zentrum eins wird häufig Bankfragen wie diese sein. Und schließlich haben wir dieses, das hilfreiche Hilfsmittel wie das sein wird. Lassen Sie mich jetzt hineinspringen und meine anderen Symbole auswählen. Und ich werde sie direkt hier aus unseren Originaldokumenten kopieren und einfügen. So können Sie sehen, ich ging einfach voran und nannte sie hilfreiche Tools, Symbol und Banking-Fragen-Symbol. Also, wenn wir hier springen, kann ich mit der rechten Maustaste tun und lokale ME Klocal machen, und das ist es. Das Auditing ist für mich übrig, sie reinzubringen. Also hier haben wir Bankfragen, die ich in diesem hier verwenden werde und einfach bei 40 positionieren werde. Und auf der linken Seite werde ich voran gehen und diesen löschen. Und wir werden das Gleiche für hilfreiche Werkzeuge tun. Drag & Drop es innerhalb der Umhang Position hier bei 40. Stellen Sie sicher, dass es links ausgerichtet ist, und löschen Sie diesen. Und Milchherde. Nun, das einzige, was ich tun kann, ist einfach kopieren und einfügen meine Texte, um Sie nicht mit diesen Details zu langweilen, ich werde das Video hier pausieren. Und jetzt, da ich das getan habe, kann ich zurückgehen und etwas davon ein bisschen mehr erklären. Also im Moment sind wir gerade entwerfen diese Seiten tatsächlich in all diese zusätzlichen Dashboard-Seiten bringen. Und wir werden es vorerst so nennen. Und Sie können auch in der Website-Architektur sehen, genau diese Strände, die wir entwerfen werden. Alle diese zusätzlichen Seiten sind sekundäre Seiten für unseren Kunden, was bedeutet, dass sie wichtig sind, aber sie sind einfach nicht so wichtig wie diese Seiten, die wir derzeit entwerfen. Und Sie werden dies während Ihres gesamten Designs sehen. Ihre Aufgabe als Designer ist es, zum Beispiel zu sehen, wenn Sie eine Website neu gestalten, wie wir es in diesem Beispiel tun, Ihre Aufgabe als Designer ist es, Ihrem Kunden die Lösung zu geben, die er von Ihnen verlangt. Ihre Aufgabe ist es, die Probleme zu lösen, die sie haben. Erfahren Sie, wer der Zielkunde ist, wie Sie Ihr Design, Ihr vorhandenes Design und Ihr Design, das Sie entwerfen werden, an ihre Bedürfnisse anpassen können. Aber Ihre Aufgabe ist es auch, alle diese zusätzlichen Seiten zu sehen und sie zu fragen, brauchen Sie sie auch neu gestaltet? Weil all dies variiert. Zum Beispiel mit Ihrem Budget und der Zeit, die Sie für dieses Projekt verbringen werden und so weiter. Wenn in Wirklichkeit werden wir diese Website für echte tun und wir werden alle diese Seiten neu gestalten. Es dauert ungefähr vier Monate, um es zu tun. So können Sie sich vorstellen, wie groß diese Aufgabe ist. Aber mit einigen Seiten wie Ubuntu Karten zum Beispiel, wie mit über Seiten und so weiter. Alles, was Sie tun, ist einfach etwas zu verwenden, das jemand anderes bereits erstellt hat. Bei Karten verwenden die meisten Unternehmen beispielsweise Google Maps oder integrieren diese einfach in Ihr Design. Und Entwickler werden nur entweder SDK oder eine Art kalte Verbindung verwenden. So können sie das in die Website integrieren. Dasselbe mit den Foren. Wenn sie Kundenforen verwenden, dann gut. Aber die meisten Unternehmen, vor allem kleine Unternehmen, verwenden so etwas wie ein Forum Plug-in oder externe Formulare oder Google-Formulare und so weiter. So müssen Sie diese Seiten nicht jetzt für diese Seiten entwerfen, Sie können deutlich sehen, dass dies nur FAQ-Seiten sind. Also im Grunde Fragen und Antworten in einer Textform. So können Sie einfach eine einzelne Seite entwerfen, die sich immer wieder wiederholen wird, aber mit unterschiedlichen Informationen, was die Aufgabe des Entwicklers ist, alle diese Informationen einzugeben. Aber zum Beispiel, hier mit hilfreichen Tools, können Sie sehen, dass sie einen universellen Online-Geldrechner haben. im Grunde bedeutet, wenn Sie zum Beispiel Euro in US-Dollar umwandeln wollen oder was auch immer, dann müssen Sie auf diese Geldrechner-Seite gehen, die sie bereits haben. Also entwerfen Sie keine Schulden. Aktuelle Online-Wechselkurse sind zum Beispiel, Sie werden das auch nicht neu gestalten, weil sie Schulden jeden Tag aktualisieren. Sie haben es schon. Und es muss nicht wirklich synchron mit anderen Designs von der Seite sein. Monatlich lange Taschenrechner Werkzeug ist das Werkzeug, das sie bereits haben. Sie müssen also auch diese Seite nicht neu gestalten. Du musst all diese Dinge im Hinterkopf behalten. Müssen Sie alles selbst machen? Haben sie schon etwas entworfen? Müssen Sie etwas vorbereiten, und so weiter. Und aus all diesen Dingen kommt das Budget und kommt die Zeit für dieses spezielle Projekt. Also lasst uns jetzt voran und gruppieren all diese, weil ich nicht zu viel Zeit in sie investieren werde , weil es bereits fertig ist. Und wir können es gängige Fragen nennen. Und ich werde Ihnen nur schnell einen Tipp zeigen, den Sie tun können, vor allem für Responsive Design. So hier können Sie sehen, dass wir 12 verschiedene Spalten haben, aber Sie können sich nur vorstellen und Schulden. Wenn eine Website geht und reagiert, wird sie in der Größe reduziert. So wird dieser Flughafen kleiner wie zum Beispiel Disk. Und das, was Sie in Adobe XD tun können, ist die Verwendung von Stacks. Und hier ist, wie die Stapel funktionieren. So wird es automatisch in der Tat Decks und dass Ihr Stack so ist, so horizontal. Und Sie können auch einen vertikalen Stapel erstellen, was eine fantastische Funktion ist, die Sie in Adobe XD haben können, wenn Sie reaktionsfreudiges Design machen. Also lassen Sie uns sagen, dass ich sie nicht so positionieren möchte, sondern übereinander. Sie können einfach hier klicken und es wird sie neu positionieren, aber die Reihenfolge wird nicht korrigiert Moment. Also alles, was Sie wirklich tun müssen, ist einfach ein reorganisieren einige von diesen. Und ich kann eine Position wie diese hinzufügen. Und jetzt, wenn ich die Größe meiner Kunst verkleinere, können Sie sehen, dass es wirklich gut passt. Es behält alle Abstände, in denen wir ursprünglich erstellt haben, so dass alles schön und sauber aussieht. Das sind also die Stapel, und ich werde Ihnen zeigen, wie Sie später im Designprozess viel mehr mit ihnen spielen können . Lassen Sie uns dieses Design zum Ende bringen und geben Sie es hier 100. So wie das. Und schnell überprüfen, tun wir ihr ein oder 150. Also werde ich diese zwei Treffer 1-2-3-4-5 auswählen, um es auf 150 zu erhöhen. Und ich werde das hier abschließen. Also lasst uns so etwas näher heranzoomen. Ich werde es abschließen. Er würde 0 kontrollieren, und das war's im Grunde. Jetzt, da wir unsere Seite haben, anstatt diese zu kopieren, werden wir diese nur kopieren und einfach in Schulden für die spätere Verwendung hinzufügen. Das war's also für dieses Video. Ich werde dich im nächsten sehen, wenn wir mit dem Lungenstrand anfangen . Also sehe ich dich dort. 31. Wireframes: Lassen Sie uns jetzt weiter, wo wir in einem vorherigen Video aufgehört haben. Und lassen Sie uns das duplizieren. Und diese nächste Seite wird für die Kredite sein. Also lassen Sie uns hier doppelklicken. Lungen wie so. Also, wenn Sie sich von Adobe Wireframe erinnern, können Sie sehen, ich brauche entlang zwei. Und jetzt haben wir diesen Text hier und bekommen einen Barkredit in 30 Minuten. Also lassen Sie uns schnell die Todesfälle ändern oder ich brauche einen Kredit an und Sie können einfach den Kredit auswählen, den Sie tatsächlich brauchen. Also bekommen wir eine schnelle SIE und ich werde sie auch hier umbenennen. In diesem zweiten wird man von einem Auto gerufen werden, kaufen Sie ein Haus. Und meine Tiefe refinanzieren. So wie so. Also noch ein Mal. Und das wird ein Auto kaufen, ein Haus kaufen. Und dann hast du aus Schulden finanziert. So wie so. Jetzt endlich werde ich voran gehen und all diese so schließen. Und jetzt muss ich wirklich an diesem Bild arbeiten. Denn wenn du hier siehst, habe ich es mit einem Leerzeichen zwischen diesem linken Rand und dem Bild selbst gezeichnet. Aber ich bin eigentlich entschieden, und hier ist es, diese Wireframes sind nützlich, weil man immer voran gehen und sie ändern kann. Eigentlich habe ich beschlossen, mein Bild bis hierher und um diese beiden Ecken zu erweitern. Also oben links und unten rechts. Bevor ich irgendetwas mache, lass mich weitermachen und meine Flughäfen nach unten ausdehnen. Und ich werde diese drei so nach unten bringen. So sind sie nicht in meinem Gewicht, wie ich entwerfe. Ich werde diese Informationen tatsächlich so duplizieren. Also drücken Sie Kontrolle D und bewegen Sie sie nach draußen. So wie das. Es wird tatsächlich eine separate und wuchs. Also werde ich das nennen, ich brauche allein oder ja, nennen wir es, ich brauche allein oder einfach Kredite, weil wir natürlich verschiedene Arten von Darlehen haben. Und dieser Text hier, lasst uns das schnell verbergen, damit ich das verschieben kann. Dieser Text wird aufgerufen werden, um ein Bargeld allein zu bekommen oder eine Antwort zu erhalten. Und fügen wir es jetzt in Schulden hinzu. Also werde ich diesen Text tatsächlich kopieren, um mein Leben ein wenig schwieriger zu machen. Also kopiere ich den Text und ich werde gleich hier springen. Stellen Sie sicher, dass diese zentriert ist. R wird dies nicht öffnen, stellen Sie sicher, dass es zentriert ist, Taste ist so zentriert, und anstelle von 40 werde ich es auf 80 so erhöhen. Und ich habe auch dafür gesorgt, dass ich hier zwei Textzeilen anstelle von vier habe, so. Und jetzt werden Mädchen gehört. Sehen Sie durch Staub oder wickeln Sie den Text um. Und schauen wir uns 41234 an. Also sind wir jetzt bei 80. Und ich werde das anrufen und in 20 Minuten eine Antwort bekommen. Und ich werde tatsächlich springen Website und ändern Sie diesen Text. Also werde ich den Text stützen, von dem ich ursprünglich eine Mischung erstellt habe. Es ist in der Mitte. Also im Grunde, unsere Betreiber arbeiten rund um die Uhr, um Antworten Antonio Minuten oder weniger zu liefern. Klicken Sie jetzt anwenden, um zu sehen Vergiss, kommen Sie heute aus und dies wird jetzt zu schreiben bewerben, aber nicht für jetzt. Wir werden die Dinge nur schön und einfach halten. Das wird also eine Antwort wie diese bekommen. Ich werde das leicht aus der Taille bewegen, weil ich mich jetzt bewegen und an meinem Bild arbeiten werde. Also wieder, dies wird Info Abschnitt und Desinfektion wird sich ändern, je nachdem, welche dieser Darlehen der Benutzer tatsächlich klickt. Also für das Bild, starten wir mit 930, mit 950. Wie gesagt, ich werde es an den linken Rand verschieben, und das wird 02020 sein. Das wird also um ihn herum sein, und das wird abgerundet werden. Nun, für diesen hier, werde ich tatsächlich hier reinspringen und 24 Bolzen benutzen. Mal sehen, positionieren Sie es bei 40. Und ich werde hier eigentlich zwei Textzeilen hinterlassen, so. Und ich werde hier klicken, um es auf diese Linie zu schneiden. Also zwei, ich werde diesen Text löschen und ich werde tatsächlich einige Symbole einfügen , die ich ursprünglich im ursprünglichen Design verwendet habe. Lassen Sie mich also voran gehen und diese Symbole hier auswählen. Und diese Symbole sind im Grunde die gleiche Sache wie all diese anderen Symbole. Also werde ich Ihnen zeigen, wie ich das erste Mal gemacht habe, Bargeld in 30 Minuten. Denn wieder einmal hat der Benutzer eine schnelle Barzahlung GET ausgewählt. Also offensichtlich müssen sie es schnell bekommen. Holen Sie sich interne Minuten, positionieren Sie das hier und stellen Sie sicher, dass es bei 40 ist und lassen Sie mich sehen, und sie sind außerhalb des Ordners. Deshalb können Sie sich nicht falsch ausrichten. Versuchen wir es noch einmal. Ich mache das und 234. Und ich werde wieder springen direkt hier, Rechtsklick kann Klocal, mich Klocal und machen lokale Sprung zurück. Also werde ich ausrichten diese drei See-Zellen sind Stoppuhr. Als Nächstes bin ich ausrichten und das hier. Bewegen Sie das hier aus dem Weg. Richten Sie das hier aus, stellen Sie sicher, dass es auch bei 40 ist. Und ich werde dann hineinspringen, diese beiden duplizieren, beenden Sie sie außerhalb von hier. Und stellen Sie sicher, dass sie 40 so sind. Und das wird so eine minimale Dokumentation sein. Und schließlich, positioniert dies bei 40 als gut, stellen Sie sicher, dass ein Duplikat diese positioniert ihn nach unten und einfach schieben sie wieder nach unten. Dies wird komplett online schreiben. Und später in Entwurfsphasen, werden wir hier einige zusätzliche Symbole verwenden. Wenn Benutzer zwischen diesen klicken, denn wenn sie auf Biokohle klicken, wird es als Auto-Icon erscheinen und so weiter und so weiter. Aber wie er sagte: vorerst so lassen, wie sie sind. Also lasst uns diese komplett online zusammenfassen. Dies wird eine minimale Dokumentation sein. Und schließlich, in 20 Minuten in Bargeld. Schließlich werde ich alle drei auswählen und sicherstellen, dass sie sich so in der Mitte unseres Bildes befinden. Und das ist es im Grunde für unsere Rasenflächen. Eine weitere Sache, die ich tun kann, ist tatsächlich diese Getter-Antwort in unsere Info zu bringen. Also werde ich Lungen öffnen, Informationen öffnen, eine Antwort öffnen und sie in Position bringen. All dies oben, weil diese Getter-Antwort tatsächlich in allen unseren Abschnitten sein wird. Also, wenn ein Benutzer auf eine dieser Tiefen klickt, tut mir leid, jede dieser Darlehen wird dies zeigen, aber nur ein wenig andere Informationen für jeden von ihnen. Ich werde Ihnen das auch innerhalb unseres Design-Teils zeigen. Also sind wir bei 150. Was wird es schließen? Denn offensichtlich lassen Sie uns sagen, dass der Benutzer ein Haus kaufen möchte. Sie können in 20 Minuten keine Antwort zurück bekommen, weil die Dokumentation offensichtlich viel größer ist, als ein schnelles Geld lang zu bekommen, oder vor allem, wenn sie ihre Schulden refinanzieren wollen. Bankteller offensichtlich muss nach all diesen Informationen suchen , um ihnen die Antwort zu geben, die sie wollten. Deshalb müssen sie ein wenig länger warten und zusätzliche Dokumentation zur Verfügung stellen. Lassen Sie uns nun diese Seite beenden. Wählen Sie Belüftung, positionieren Sie es hier, stellt sicher, dass wir bei für 150 sind, wie dieser Doppelklick hier. Und wir werden nur unsere Seite schließen. Ganz unten, so. Er hatte die Kontrolle 0 und das ist es im Grunde für diese Seite ist, dass Sie sehen können , dass es jetzt viel einfacher ist, mit all diesen Elementen zu arbeiten, besonders weil wir alle diese Elemente oben bereits fertig haben. Wir haben alle diese Elemente an der Unterseite bereits fertig. Also im Grunde bearbeiten wir nur dissenter Teil unserer Seiten. Also, das ist es im Grunde für diesen. Im nächsten gehen wir zum Entwerfen von Karten Abschnitt. Also sehe ich dich dort. 32. Wireframes: Nun, es ist jetzt mehr Wind und Design unserer aktuellen Bildschirm und eine Warenkorb-Seite. Also werde ich Kontrolle D drücken, um das hier zu schmieren und es Karten so nennen. Und noch einmal, lassen Sie uns schnell in unserem Drahtmodell unterrichten. Sie können sehen, dass dieser Abschnitt ist im Grunde eine Karte inneren Kreis mit dem Titel und drei Zeilen Text. Darunter haben wir Kreditkarten. Also mit zwei Karten, es wiederholt sich selbst oder die Debitkarten erstellen Sie Ihre eigenen ist im Grunde in diesem Abschnitt direkt hier kopiert. Und schließlich haben wir einen Abschnitt, der ziemlich ähnlich ist, so dass wir tatsächlich den von der Homepage selbst verwenden können. Das erste, was ich tun werde, ist, mein Board nach unten zu erweitern , weil es viel größer wird, wird viel mehr Platz in Anspruch nehmen als all diese anderen. Ich werde diese Abschnitte auch nach unten verschieben. So wählen Sie alle ihre halten Shift, verschieben Sie sie nach unten. Und was ich jetzt gerne tun würde, ist eigentlich diesen Abschnitt vielleicht zu verwenden. So kann ich es nach draußen verschieben und eine Antwort bekommen. Ich kann es den ganzen Weg hierher bringen. Und mal sehen. Ich kann es hier so aufgereiht mit diesem Text positionieren, ich die Lungen verstecken werde. Und wir brauchen hier keinen Knopf, aber wir werden ihn später brauchen. Also werde ich es verstecken und vielleicht sogar positionieren, damit wir es nicht verwirren. Oder mal sehen, wir brauchen den toten Knopf den ganzen Weg runter. Vielleicht ist es das, und das werden wir eigentlich tun. So positionieren Sie es den ganzen Weg nach unten und lassen Sie es vorerst dort. Jetzt hier werde ich in Ihrem Perfect idealerweise Campanian schreiben. Und tatsächlich springen hinein, kopieren und fügen Sie den Text aus meinem ursprünglichen Design. So können Sie sehen, wie das aussieht. Und ich werde voran springen, Gruppierung aufheben und nur vorerst den ganzen Weg nach unten bewegen. Und für den langen Abschnitt werde ich tatsächlich voran gehen und die Bearbeitung löschen. Wenn ich Sie hierher zurückbringe, können Sie sehen, dass wir einen Kreis haben und einen Strom innerhalb dieses Kreises haben. Wir werden vorerst keine Karte entwerfen. So stachelig positionieren Sie das so. Und mal sehen, vielleicht kann ich ihm sogar ein bisschen mehr Abstand geben. Lassen wir es so, wie es ist. Also zuerst werde ich einen Kreis erstellen. Ich halte meine Umschalttaste, während ich es mache, und ich verwende einfach dieses Ellipsenwerkzeug, um meinen Kreis zu erstellen. Sechs sechzig, sechs sechzig werden Dimensionen sein. Und ich werde es in der Mitte positionieren und sicherstellen, dass es bei 100 von unseren Texten wie diesen ist. Als Nächstes nenne ich es Kreis oder einen großen Kreis. Weil es im Hintergrund unserer Karte sein wird. Lassen Sie uns für diesen Kreis Farbanalysen in dieser Szene anwenden, um den Rahmen zu entfernen. Und jetzt, wenn ich meine Karte erstelle, werde ich tatsächlich in dieser Farbe verwenden. Um anzuzeigen, dass dies unsere aktuelle ist. Also lassen Sie uns mit unseren Karten beginnen reduziert unsere aktuelle Position und nur innerhalb unseres Kreises. Und lassen Sie uns für die Karte selbst sehen, wir können etwas wie 776, Woche fünf, oder neun oder 510 verwenden , wie Sie wollen. Und ich hoffe, Position in der Mitte unseres Kreises so zu sein und so, ich kann auch beide auswählen, klicken Sie hier als hier, stellen Sie sicher, dass sie in einem perfekten Kreis sind. Jetzt für die Karte selbst, wie er sagte, werden wir es wie und Schulden verlassen. Und lasst es uns zum Beispiel bei 15 löschen, auf allen Seiten, nur um anzuzeigen, dass dies unser Wagen ist. Lassen Sie uns jetzt fortfahren und all dies auswählen. Er hatte Kontrolle g genannt diese perfekte und Erleichterung Begleiter, weil es ist, was es hier ist. Als Nächstes für die Karte. Wenn ich Sie noch einmal zurücknehme, können wir sehen, dass wir in diesem ganzen Abschnitt dann einen aktuellen Text und Titel drei Zeilen Text haben und jetzt angewendet, so dass wir tatsächlich das, was wir bereits für ihn erstellt haben, verwenden können, bevor wir hier. Also kann ich Kontrolle C drücken und dann kann ich gleich hier springen. Er hatte die Kontroll-V-Positionierung, um hier herum zu bewegen und das nach unten zu bewegen. Nun, was ich eigentlich brauche, ist dieser Text und so Titel und Untertitel. Also Hit Control C, Kontrolle V. Und mal sehen, vielleicht kann ich es dieses Mal auf 100 statt 150 positionieren. So wie jetzt. Und wir werden diese Kreditkarten so nennen. Und tatsächlich noch einmal werde ich meinen ursprünglichen Text kopieren und einfügen und ich werde ihn genau hier verschieben. Nun, das nächste, was ich tun werde, ist, das auf 80 zu verschieben. So 12345678. Und jetzt lassen Sie uns weitermachen und unsere Content-Karte erstellen. Also für unsere Content-Karte, was wir eigentlich tun werden, wird es ziemlich ähnlich wie diese sein. Also, ja, lasst uns das hier benutzen. Denn wenn ich dich zurückbringe, anstatt das Symbol, wo sind dann? Hier sind sie. Anstelle des Symbols werden wir diese Karte, Illustration oder eine Grafik oder einen Hebel haben . Also werde ich diesen entfernen, der in diesem basiert. Und noch einmal, stellen Sie sicher, dass wir bei 80 sind. So 1234. Positionieren Sie es hier. Und mal sehen, weil wir unsere Rasterlinie von 12 haben, können wir diesen Hintergrund tatsächlich auf sechs Personen erweitern. So, dann haben wir jetzt viel mehr Platz zum Spielen. Also diese erste, ich werde es ein Visum nennen. Kreditkarten wie diese. Und mal sehen, vielleicht kann ich das erweitern. Also weiter zu schießen, kann ich zwei Textzeilen haben. Ich kann es so beschneiden. Anstelle von Werkzeug können wir drei Textzeilen haben, die ich in meine Originaltexte einfügen werde. Und mal sehen. Wir können von hier aus bei 60 sein. Also lasst uns das nur ein bisschen runterziehen. Also, nur damit wir ein bisschen mehr Platz haben können, um damit zu spielen. Wir können das auf 40 positionieren, also so. Und jetzt lasst uns reinspringen und unseren Wagen erstellen. Also werden wir nicht wirklich die gesamte Grafik entwerfen. Jetzt. Ich werde dieses Auto Hintergründe benutzen. Du würdest einen D. kontrollieren und ich werde diese kuratierte aktuelle BG so nennen. Und für seine Abmessungen, lassen Sie uns zum Beispiel 300 Breite ein 97 verwenden. Also etwas Schönes und Kleines. Und wir werden diese dunklere Farbe verwenden. Und mal sehen, vielleicht können wir es dort lassen. Ich bin mir nicht sicher, ob ich das sehen würde. So 1234. Und lassen Sie uns die Bearbeitung hier ausrichten. Also mal sehen. Für diesen Inhalt kann ich es vielleicht so lassen. Ich versuche nur, alles herauszufinden, wie alles wirklich aussehen wird. Das kann also mit 40 sein, das kann bei 60 sein. Mal sehen, das kann bei 40 sein. Und schließlich kann dies auch bei 40 sein. Ich denke, das funktioniert vorerst gut. Ich werde nur die Höhe dieser Hintergrundwanderungen erhöhen , so dass ich mir ein wenig mehr Platz von fünf 46 auf tatsächlich 567 haben kann , so. Nur damit es mir ein bisschen mehr Platz gibt. Ich werde es am oberen Rand meiner Karte ausrichten und Shift 1234 drücken. Und nun mal sehen, was uns das gibt. Also sind wir bei 40, wir sind bei 40, wir sind bei 40, wir sind bei 60 und wir sind bei 20 genau hier. Und mal sehen, vielleicht können wir das tatsächlich bewegen. Mal sehen, was ich tun kann, weil ich ein wenig mehr Platz brauche und nach unten, ich kann tatsächlich die Festplatte nur ein wenig nach unten schieben. Also lassen Sie uns 234 sehen. So wie das hier. Und da haben wir es. Wir haben unsere Content-Karte. Wir werden damit herumspielen, offensichtlich ein bisschen zu später. Also werden wir diese aktuelle Moral nennen, es sieht, ja, aktuelle Informationen. Ich denke, es funktioniert gut. Und mal sehen. Jetzt, was wir tun können. Wir können dies zu einem DT bewegen, also 12345678 unten so. Und ich kann Kontrolle und D halten, um es zu duplizieren, es hier zu positionieren. Und das wird MasterCard-Kreditkarten wie diese sein. Und ich werde meine Informationen auch hier kopieren und einfügen. Anstelle von persönlichen Visa-Kreditkarten haben wir also persönliche MasterCard-Kreditkarten. Ich werde diese Informationen nach unten verschieben. Ich werde all das gruppieren, es Kreditkarten nennen, so. Und schließlich werde ich genau den gleichen Abschnitt haben, aber Debitkarten genannt. Also drücken Sie Kontrolle D auf diesem gesamten Abschnitt, positionieren Sie es nach unten. Ich werde diese Debitkarten natürlich nennen. So werde ich diese Debitkarten nennen, so. Und ich werde den Text von hier so kopieren und einfügen. So Ergebnis Debitkarten statt Rostow Kreditkarten, Vormund für Karteninformationen. Das wird also dasselbe sein. Anstelle von grauen Karten werden wir ihm tatsächlich einen Namen von Debitkarten geben. Ich wähle diesen Text aus, kopiere ihn und wähle das Wort Guthaben aus, ersetze ihn durch eine Lastschrift. Und schließlich werde ich meinen Text von hier nehmen und dasselbe tun und ihn einfügen. Im Grunde ist es genau der gleiche Text, den der Client gesendet hat. Und ich habe gerade Kreditkarten, Debitkarten ersetzt , und das ist im Grunde alles, was ich dort getan habe. Nun, da dieser Abschnitt abgeschlossen ist, haben wir im Grunde große Wachen, wir haben Debitkarten. Lassen Sie es uns schnell neu positionieren. Also werden wir es bei 100 sein, so wie es ist. Und ich werde diesen Abschnitt tatsächlich duplizieren. Also drücken Sie Control C oder eine kontrollierte Dee Eile, wollen es duplizieren, positionieren Sie es nach unten annelids. Die ICANN-Position soll wieder bei 100 liegen, so. Also werde ich es nennen, erstellen Sie Ihre eigenen. Weil dieser Abschnitt, wenn ich Sie hier zurückbringe, können Sie sehen, erstellen Sie Ihre eigenen. Wir haben Karte und wir haben Ihre Folien erstellen gehen zu beschreiben, wie Sie Ihre eigene Karte erstellen können und dann Schaltfläche, die sagt erstellen Sie Ihre. Und deshalb haben wir diesen Knopf hier eingefügt. Also werden wir es in diesen Abschnitt bringen. Und mal sehen, ich kann es vielleicht auf Hunderte positionieren, wie diese, 100. Und das ist es im Grunde. Jetzt für diesen Abschnitt werde ich den Text einfach kopieren und einfügen. Also mal sehen, wir können es 100 mit all diesen Formen geben. Und wie Sie hier sehen können, können Sie eine benutzerdefinierte Karte erstellen und Ihre persönliche Note hinzufügen, wählen Sie aus Farben, Formen und sogar Bildern. Dies sind also im Grunde alle Elemente, die Benutzer erstellen und anpassen können. Erstellen Sie ihre eigenen. Und gehen, um den Namen zu ändern, um Ihren eigenen so zu erstellen. Und ich werde es direkt unter meine Debitkarten verschieben. Also sind wir graue Karten, Debitkarten und erstellen Sie Ihre eigenen und oben perfekten täglichen Vergleich. Schließlich brauchen wir diesen Abschnitt genau hier mit dem Bild. Wenn es hier ist Boden links Bild und es wird Geschenkkarten sein. Also lasst uns den Abschnitt hier finden, es ist, Control-C, Control-V genau hier. Sehen wir uns diesen Abschnitt an. Wir können zum Beispiel bei 150 positionieren. Also lassen Sie uns so sehen und einfach nach links positionieren. Jetzt geben wir ihm einen Namen von Geschenkgutscheinen. Und wir werden es im Moment so behalten. So Service-Name, wir werden es ein Geschenkkarten nennen , weil wir wissen, was es gerade über häufig gestellte Fragen ist. Und schließlich, alle diese Abschnitte, wir sie auswählen und verschieben Sie sie bei 150 sein, so. Endlich werde ich unseren Hafen hier abrunden und ihn hier abschließen und sehen, ob das richtig ist. Das heißt, Sie würden S oder Command S auf dem Mac zum Speichern steuern. Und das ist es im Grunde. Auf dieser Seite können Sie sehen, wie einfach es ist und wie sich einige dieser Elemente wiederholen. Ich benutze absichtlich nicht diese benutzerdefinierten Elemente und diese Komponenten und so weiter hier innerhalb unserer Wireframes, denn in dieser Wireframe-Phase geht es immer noch um Ideen, wenn der Kunde Ihre Ideen bestätigt. Und ich werde Ihnen später zeigen, wie Sie diese Wireframes mit Ihrem Kunden teilen können. Aber zuerst, lasst uns schnell alle diese Seiten durchgehen. Ich werde zeigen, wie wir sie alle gestalten können. Und dann werde ich zeigen, wie Sie diese mit Ihren Kunden teilen können, um Feedback zu erhalten. Sie können sie auch als Bilder exportieren, senden Sie es so. Aber warum sollten Sie das tun, wenn Sie diese großartige Option haben, um sie als Link zu teilen. So kann der Kunde tatsächlich Ihr richtiges Feedback von unten hinterlassen. Sie können dieses Feedback auf den Entwurf anwenden. Und dann können Sie damit beginnen, diese Komponenten zu erstellen. All das sind nur Ideen. So war es nur, um sich zu zeigen , wie all diese Ideen übertragen werden können und zwei Stück Papier. Dann kreieren Sie von hier aus etwas realistischeres. Sie verwenden bereits einige dieser Elemente, die im Grunde vorbestimmt sind und, und sie kommen im Grunde so herein. So können wir einfach mit dem Design weitermachen, vor allem hier mit dem Navigations- und Heldenbereich und so weiter. Also im Grunde ist das, das war's. Jetzt können Sie diese Wireframes freigeben. Wenn Sie Feedback von Ihrem Kunden haben, können Sie zu ihnen zurückkehren und dann können Sie mit der Arbeit an einem fertigen Design beginnen. Das war's also für dieses Video, und wir sehen uns im nächsten. 33. Wireframes: Lassen Sie uns jetzt mit der Invest Seite fortfahren. Und wenn wir ein wenig näher heranzoomen, können Sie sehen, dass Investitionen im Grunde wirklich ähnlich sind wie alle diese anderen Seiten. Es hat nur dieses Muster hier. So haben wir Titeltext und Aufruf zur Aktion Button hier abgebildet. Und wir haben zwei von ihnen, was im Grunde bedeutet, dass sie sechs in Witz sind. Also, anstatt dieses zu kopieren, lassen Sie uns in n springen, Zum Beispiel, kopiert dieses. Also werde ich Kontrolle treffen D ist bereit, zwei genau hier zu positionieren. Und wir nennen das „Invest“. So wie das. Ich werde alle auch hineinspringen, das nach unten strecken, all das Unendliche nach unten bewegen, nur so dass wir ein bisschen mehr Platz zum Spielen haben. Also, anstatt Ihr Konto zu eröffnen, werde ich es nennen, in das ich investieren möchte. Und jetzt sollte ich eigentlich weitergehen und eine andere Seite kopieren, aber es spielt eine Rolle. Ich werde diese Informationen, die ich bereits habe, tatsächlich verwenden. Also werde ich das einfach nach unten bewegen, Steuerelement D drücken, weil ich hier einen Text brauche. Und ich werde diesen Text positionieren. Lassen Sie uns vielleicht 100 von der Seite nach oben sehen. Also lassen Sie uns 12345678910 so sehen. Und ich werde das dann als zusätzliche positionieren. Also 100 Breite, die mal sehen. Ja, ich denke, das funktioniert gut. Und lassen Sie uns alles umbenennen. Bildung ist also unsere erste. Und lassen Sie es uns auch hier umbenennen. Und dann ist das zweite Immobilien. So können Benutzer wieder auswählen, worin sie investieren möchten. Und je nachdem, was die Clique, wird sich diese Informationen offensichtlich ändern, um mit ihrer Wahl zu entsprechen. Familien-Sicherheit. Kommt als Nächstes. Ich habe versehentlich nach unten geklickt und das hier ist in Ordnung. So familiäre Sicherheit. Und der letzte hier ist ein Ruhestand. Das und das ist es im Grunde. Also, wenn sie dieses erste ausgewählt haben, wird es in einer helleren Zukunft wie diese schreiben. Und wir werden es tatsächlich in den Info-Ordner oben verschieben. Dann werden wir eigentlich diese beiden Abschnitte erstellen. Also werde ich das hier runterbringen. Und ich werde eigentlich so 246 sehen, wir sind schon auf der richtigen Breite nur für die Höhe unserer Bilder. Also lasst uns sie auf 500 positionieren. Und dieser Text ist viel zu groß. Es muss nicht so groß sein. Also mal sehen, wir können mit 24 herumspielen. Also geh hier, 24 mutig. Das ist 24, unregelmäßig. Und lassen Sie es uns so erweitern, dass es hier passt. Und mal sehen, wir können drei Textzeilen wie diese haben und ihn auf die Höhe zuschneiden. Und schließlich können wir den Knopf so positionieren, dass er nicht 40, sondern 60 ist. Lassen Sie uns zuerst bringen scheint bei 40 zu sein und das kann bei 60 sein, so. Schließlich kann der Text selbst bei sein, sagen wir 60. Und nur damit wir uns ein bisschen mehr Platz haben. Also lasst uns so etwas sehen. Und ich denke, das funktioniert gut. Jetzt werde ich hineinspringen und meinen ursprünglichen Text kopieren und einfügen. Ich habe innerhalb unserer, von meinem Design aufgenommen. Und das wird schreiben mehr, so ist das in Ordnung. Als Nächstes drauf. Also werde ich tatsächlich diese HD kontrollierten g gruppieren und diesen neuen Bank Bildungsfonds nennen, weil es das ist, was es hier ist. Und eine letzte Sache, die ich tun möchte, ist eigentlich mal sehen. Ich kriege 20 an allen Ecken so. Genau so hatte ich eine, nur ein bisschen eine Differenzierung zwischen all meinen Bildern in unserem Design. Also wird dieser hier Ute für eine hellere zukünftige Schrift genannt werden . Und ich werde das Gleiche tun. Also werde ich tatsächlich Text aus meinem ursprünglichen Design kopieren und einfügen. Und das sind im Grunde die Informationen, die Sie von Ihrem Kunden erhalten werden, vor allem, wenn sie alle Dienste haben. So können Sie tatsächlich mit ihnen herumspielen und sie neu positionieren, wie Sie wollen. Nun, das wird heißen, ich möchte in oder noch bessere Investitionen investieren. Weil wir all diese unterschiedlichen Investitionen haben werden. Jetzt hier dazwischen, wenn ich in nur ein wenig näher zoomen, können Sie sehen, dass wir diesen Abschnitt mit dem Bild gehen den ganzen Weg nach links, sichere Zukunft und erfahren Sie mehr Taste. Wir haben das Bild, das hier ist. Also Kontrolle C, Kontrolle V, Arzt halten. Und direkt über häufig gestellte Fragen, lassen Sie uns sehen, Ihre Zukunft zu sichern. Und wir werden diesen Abschnitt so nennen. Und eine letzte Sache ist, seine Position zu positionieren und zu verkaufen, um 150 zu sein. So wie das. Und schließlich, lassen Sie uns einfach diese auswählen, positionieren Sie sie auch auf 150 sein. Doppelklicken Sie hier und reorganisieren unsere, unsere Boardhöhe. Schneide es einfach so ein, und das ist es im Grunde. Das ist unser Strand fertig. Nun, wenn Ihr Kunde Sie fragt, warum einige dieser Bilder ein wenig dunkler sind als diese anderen. Sagen Sie ihnen einfach, dass das die Bilder sind. Sie wollten nur einen gewissen Fokus auf bestimmte Teile Ihres Designs bringen. Zum Beispiel haben wir Ablagerungen mit einer Kreditkarte im Inneren. Also wollten Sie bringen, um sich auf Schuldenwagen zum Beispiel zu konzentrieren. Und Sie wollen nicht, dass sie sich zu stark anstrengen. Sie müssen nur verstehen, dass das die Bilder sind, und das ist es im Grunde, damit wir mit diesem Design weitermachen können. Wir haben also nur noch eine Seite, die für unsere Website entwerfen können, bevor wir uns anmelden und die Bildschirme anmelden. Also sehe ich dich in der nächsten. 34. Wireframes: Die nächste und letzte Seite für unsere Website ist also die digitale. Und wenn wir ein wenig näher heranzoomen, können Sie sehen, dass im Grunde Reha einen Abschnitt, der sich den ganzen Weg nach unten wiederholt. Also haben wir bereits diesen Abschnitt. Wir werden es nur für diese Dienste nutzen. Wir werden nur schnell einige dieser Titel ersetzen. Und das ist es im Grunde. Wir können es einen Tag nennen. Also können wir jede von diesen verwenden. Ich kann diese ausgewählte Treffersteuerung D verwenden, duplizieren. Und ich werde das digital nennen, so. Und schließlich werde ich das einfach herausschieben, das löschen, und hier ist unser Abschnitt hier. Was wir damit machen können, ist, dass wir es tatsächlich so positionieren können. Und ich kann vielleicht bei 100 umziehen, so. Und lassen Sie mich schnell nachsehen. So kann ich diese B 600 zum Beispiel machen , nur um es ein wenig zu differenzieren. Und dann kann ich diese auswählen und sie in die Mitte verschieben. Stellen Sie sicher, dass es bei 100 ist. Das ist es. Und der erste ist, du kannst sehen, lass mich nach oben scrollen. Wir haben E-Banking und Banking, QR-Codes, Bezahlung und virtuelle Assistent. Also lasst uns das machen. Aber bevor wir es tun, werde ich Ihnen noch einmal Stapel zeigen. Also werden sie hier drinnen sehr praktisch sein. Wählen Sie einfach Ihren Stapel aus. Das ist es im Grunde. Du hast es getan. Nun, ich werde das auf Bankdienstleistungen wie diese ändern. Und ich werde 150 Abstände zwischen all den haben. So können Sie dies in vier oder Text nennen oder kaum wollen. Da Stacks diesen zusätzlichen Ordner erstellen, können Sie ihn einfach umbenennen oder so belassen, wie er ist. Also werde ich es hier umbenennen. Also E, Bankdienstleistungen treffen Kontrolle D, positionieren Sie es 150 nach unten so. Und ich werde es hier positionieren. Und ich werde das hier ein m Banking nennen. Also eins ist E, eins ist m. Ich verliere. Und Sie prüfen, was Sie mit Ihren Stacks tun müssen, ist einfach wählen Sie Ihr Bild und positionieren Sie es zu entscheiden. Und schließlich, bewegen Sie dies, um unser Schreiben auszurichten. So wie. So. Das ist es im Grunde. Sie können sie einfach umschalten. Also lasst uns Position nein, 1-2-3-4-5. Grundsätzlich ist das einzige, was wir mit diesem gemacht haben, dass wir zwischen ihnen gewechselt haben. Und noch einmal, dies wird eine wirklich in praktisch kommen , sobald Sie auf Responsive Design bekommen, denn Sie können einfach hier klicken wird es nach unten positionieren, und das ist im Grunde es für Ihr Design. Also lassen Sie mich meine Margen überprüfen. Was wieder ist, sieht alles gut aus. Also E M Banking und ich werden ein Duplikat von diesen beiden machen. Also drücken Sie Kontrolle D und positionieren Sie sie nach unten 100. So 150 wie diese. Und ich werde meinen Flughafen sogar noch weiter ausbauen. Also diese positionieren sie nach unten, nur um mir ein bisschen mehr Platz zu geben. Und mal sehen, wir können das auf 150 positionieren , und wir können es hier ganz schnell schließen. So können Sie sehen, sobald Sie anfangen zu entwerfen, sobald Sie einige Elemente haben, sobald die Elemente sich wiederholen, ist es viel einfacher, alle diese Änderungen vorzunehmen und ihre mentalen anzupassen, sie anzuwenden zu Ihrem Design. Das wird also QR-Code-Zahlungen wie folgt sein. Ich werde es hier unten positionieren. Und schließlich werde ich das hier unten positionieren und das hier organisieren. Also lasst uns durchlaufen. So haben wir E-Banking und Banking QR Copayments. Und dieser letzte wird ein virtueller Assistent sein. Lassen Sie uns auch hier den Namen ändern. Und eine nette Sache über Stacks. Wenn ich das öffne, können Sie den Text sehen, weil er unter gelebt ist, kommt an die Spitze. Und hier, weil Text auf der rechten Seite ist, kommt er ursprünglich auf der Unterseite. So hat Adobe XD sie bereits auf eine nette und saubere Art und Weise organisiert , weil wir die Bearbeitung hier organisiert haben. Das ist es im Grunde für unser Peking. Drücken Sie einfach Control S, um es zu speichern. Und genau so haben wir unsere Webseiten-Wireframes fertiggestellt. Und das einzige, was wir jetzt noch tun können, ist, diesen Login-Bildschirm zu entwerfen und sich zu registrieren. Ich werde Ihnen den Unterschied zwischen ihnen zeigen. Und schließlich werden wir diese Dashboard-Seite entwerfen, bevor wir zum eigentlichen Website-Design übergehen, wo wir tatsächlich einen neuen Flow erstellen werden. Also hier haben wir einen Wireframes Flow und dann werden wir in den Design-Fluss haben. Das war's also für dieses Video. Und wir sehen uns im nächsten, wo wir Login- und Anmeldebildschirme angehen werden. Also sehe ich dich dort. 35. Wireframes: In dieser Lektion werden wir weitermachen, wo wir aufgehört haben, und wir werden diesen Anmelde- und Anmeldebildschirm erstellen. Also lasst uns anfangen. Ich werde das erste für uns tun, das duplizieren, es einen Login nennen. Und ich werde eigentlich alles löschen, was sich darin befindet. Also kann ich einfach einen leeren Hafen haben. Und dann werde ich es in der Höhe schneiden, um AT so zu versuchen. Und jetzt kann ich mit meinem Design beginnen. Also zuerst werde ich mein Bild mit meinem Rechteck-Werkzeug erstellen. Ich werde diese Farbe verwenden, so wie wir es vorher getan haben. Und für unser Bild werde ich die Höhe von 1080 verwenden. Also wird es von oben nach unten gehen, so. Und für die Breite, lassen Sie uns zum Beispiel 708 verwenden. Wie Sie sehen können, wird es uns fünf von Andys Säulen im Weltraum bringen. Also jetzt lasst uns diesen Text verwenden und lasst uns hier positionieren, ihn links ausrichten. Und zum Beispiel, sagen Sie Willkommen zurück. Und da dies ein Anmeldebildschirm ist, möchten Sie jemanden auf diese Seite zurückführen. Mal sehen, wir können einen Abstand von eins haben, also haben wir ein Bild, wir haben eine leere Spalte, und dann können wir sie zurückbringen und sagen, willkommen zurück. Ich werde das nach unten positionieren. Ich werde sicherstellen, dass es 24 ist. Und wir können einfach in einem Log zurück in Ihr Konto schreiben . Und mal sehen, wir können das bei 40 sein. So wie das. Gut positioniert, nur um mir ein bisschen mehr Platz zu geben. Und jetzt kann ich das duplizieren, positionieren, zurück hierher gehen. Und ich schreibe dies per E-Mail und dupliziere es und tippe deine E-Mail. Oder lassen Sie uns Ihre E-Mail auf email.com verwenden , nur damit wir mit diesem etwas präziser und etwas genauer sein können . Jetzt lassen Sie uns unser Eingabefeld erstellen, und es wird sechs Spalten in der Breite sein. Geben wir ihm einen Namen, Eingabefeld. Und so. Und mal sehen, wir können ihm die gleiche Farbe geben, wie wir es mit unserem Bild getan haben. Wir können es positionieren und hinter unserer E-Mail zurück. Und mal sehen, für unsere E-Mail können wir es 24 regelmäßige Todesfälle machen. Gut. Ich möchte nur seine Farbe ändern. Lass es uns nicht so lassen, wie es ist. Also lasst es uns in der Mitte positionieren. Aber bevor wir es tatsächlich tun, geben wir dem eine Höhe. Das Eingabefeld sollte also bei 70 liegen, so. Und nun lasst uns diese beiden gruppieren, positionieren sie in der Mitte. Mal sehen. Das sieht gut aus. Und mal sehen, zuerst, ich kann diesem einen Koronar von zehn geben, unsere Grenze entfernen und das sieht viel besser aus. Und jetzt endlich kann ich es auf 40 positionieren, also 1234. Und jetzt wird uns das ein bisschen mehr Platz geben. Also lassen Sie mich meine Spalten verstecken, um zu sehen, wie das aussieht. Ich denke, das funktioniert wirklich gut. Ja, ja. Also lasst uns das ein bisschen organisieren. Das ist also unser E-Mail-Feld. Oder nein, lasst uns eine Gruppe belüften. Kontrollierte g, Qualität, E-Mail-Steuerung, D, Position in unten Analysten. C, ich kann es auf 40 positionieren und das untere Passwort anrufen. Ändern Sie das. So wie so. Und jetzt kann ich drinnen von hier springen und einfach eine Zehn schreiben, zum Beispiel acht Mal oder was auch immer. Und dann kann ich das zum Beispiel auf 48 ändern. Und jetzt kann ich zurückgehen und diese beiden gruppieren und sicherstellen, dass das in der Mitte ist. Ich weiß nicht, warum es so schneidet. Mal sehen, ob wir es nur ein bisschen ansprechen können. Ich kann ich nur das organisieren, um so in der Mitte zu sein. Offensichtlich ist dies nur ein Beispiel, um Ihren Kunden zu zeigen , dass dies tatsächlich unser Passwort sein wird. Sie können auch Punkte verwenden, wenn Sie wollen, aber ich denke, Sterne werden gut funktionieren. Jetzt, da wir das getan haben. Jetzt können wir diese beiden organisieren, damit ich sicherstellen kann, dass sie bei 80 sind, nur um uns ein wenig mehr Platz zwischen diesen beiden zu geben. Nun, ich kann diese Textposition duplizieren und hier, und mal sehen, kann ich sie auf 40 positionieren, so wie diese. Positionieren Sie es und nur ein wenig nach unten. Und ich schreibe, habe kein Konto. Erstellen Sie hier einen. Und weil das ein Link sein wird, verliere ich diese Farbe. So können die Leute RK kennen, Ich kann zwischen Login wechseln und registrieren Mississippi klicken Sie direkt dort. Schließlich werde ich das noch einmal duplizieren. Also drücken Sie Kontrolle D und schreiben Passwort vergessen. Fragezeichen, benutze dieses Halsband jetzt, stelle sicher, dass es richtig ausgerichtet ist und ich brauche einen Knopf. Also werde ich das hier benutzen. Drücken Sie Control C, schließen Sie all das hier, kontrollieren Sie V, und ich bringe mein Raster noch einmal zurück, stellen Sie sicher, dass das zentriert ist. Und mal sehen, wir können es auf 80 positionieren. Das ist in Ordnung. Positionieren Sie hier und eine Zeile das hier. Und stellen Sie sicher, dass diese beiden zentriert sind. Und das ist es im Grunde. Wir haben jetzt alle unsere Inhalte alte Gruppe. Klicken Sie einfach hier, um sicherzustellen, dass es sich in der Mitte befindet, direkt unter unserem Bild. Und noch einmal, organisieren Sie alles noch einmal. So haben wir mehr Taste erfahren wird nach unten zu arbeiten. Wir werden E-Mail, Passwort, Passwort, Passwort vergessen. Dies wird hier gehen, und das ist es im Grunde für unseren Login-Bildschirm. Jetzt für ich mich anmelden, werde ich einfach duplizieren ist. Also traf die Kontrolle D auf unserem Brett. Das wird eine Anmeldung sein, so. Und wir werden, statt willkommen zurück, gehen zu schreiben willkommen zwei neue Bank, denn dies ist für die Benutzer, die diese Seite zum ersten Mal besuchen. Erstellt ein Konto und beginnen Sie noch heute. So wie so. Jetzt werden wir die beiden verlassen. Wir werden hier schreiben, ich bin bereits Mitglied. Loggen Sie sich hier ein. Wieder einmal ist dies ein Link. Also, wenn sie dort klicken, wird es sie hierher bringen. Wenn sie hier klicken, werden sie es wagen, zwischen diesen beiden zu wechseln. Und weil es kein Schlagwort gibt, erstellen sie ein Konto, das wir in diesem nicht brauchen. Also schließlich, was wir brauchen, sind Vor- und Nachname. Sie werden das Gewicht von drei sein. Lassen Sie uns also ein bisschen mehr Platz geben. Also werde ich das hier positionieren. Ich werde diesen Kerl hier positionieren. Ich werde das duplizieren. Stellen Sie sicher, dass wir bei 40 sind. Ich werde diesen Nachnamen nennen. Hit Control D noch einmal. Dies wird first_name sein. So wie das. Ich werde das hier verstecken und das wird Name sein. Und es wird Breite von drei sein. Also lassen Sie uns 123 sehen. Und wir geben ihm zum Beispiel den Namen von Jacob. Tut es. Und schließlich, schieben Sie es zurück nach hier. Vorname, dasselbe. Also werden wir ihm drei geben und wann wir ihm den Namen Michael geben. Beispiel: Vorname. Und das ist es im Grunde. Wir haben das abgeschlossen. Lassen Sie uns das auf 80 Jahre zurückbringen. Und lasst uns das alles noch einmal gruppieren. Er würde G kontrollieren und sicherstellen, dass es so in der Mitte ist. So haben wir genau den gleichen Abstand wie zuvor. Wenn Sie denken, dass es ein bisschen zu viel da oben ist, können Sie den Abstand reduzieren. Hier können Sie den Abstand unten reduzieren. Aber ich denke, dieses Layout funktioniert wirklich gut. Stellen Sie einfach sicher, dass es zentriert ist, heben Sie die Gruppierung auf, und das ist es im Grunde. Das sind also unsere beiden Seiten. Offensichtlich können Sie diese Bilder untereinander wechseln. Sie können hier ein Bild für den Login haben, eines für die Anmeldung, aber es ist wirklich alles an Ihnen. In meinem Design, in, in meinem Fall, werde ich sie so lassen, wie sie sind. Also, das ist es im Grunde für die vordere Website B, gerade im nächsten und letzten Video dieser Wireframe-Serie in Adobe XD, werden wir diesen Dashboard-Bildschirm erstellen. Wir werden nur eine innerhalb unserer Wireframing-Sitzung erstellen. Innerhalb des Designabschnitts werden wir natürlich alle diese zusätzlichen Seiten erstellen. Und ich werde Ihnen zeigen, was der Unterschied zwischen dem Layout, zwischen den Rastern und so weiter ist. Also sehe ich dich im nächsten Video, wenn wir damit anfangen werden. 36. Wireframes: In diesem letzten Video des Wireframing-Abschnitts in Adobe XD beenden wir es, indem wir unseren Dashboard-Bildschirm erstellen. Wenn ich ein wenig zoomen, können Sie sehen, dass der Hauptunterschied zwischen dem Dashboard-Bildschirm und allen anderen Website-Seiten die Dashboard-Navigation ist hier auf der linken Seite, während der gesamte Inhalt auf der rechten Seite ist. Daher müssen wir alle diese Spalten erstellen, damit unser Inhalt auf der rechten Seite ist. Und dieser Rand sollte breiter sein, um in diesem Menü aufzunehmen. Um zu erklären, wovon ich spreche, wenn wir direkt hier zum Anmeldebildschirm springen, können Sie sehen, dass unsere Ränder links und rechts im Grunde die gleichen sind. Und alle unsere Säulen und Dachrinnen sind hier in der Mitte. Für unser Dashboard. Wir werden all das nach rechts verschieben und wir werden diesen Platz auf der linken Seite freigeben, um all unsere Navigationselemente unterzubringen. Um loszulegen, werde ich diese Seite einfach duplizieren und nur ein wenig verschieben. So wie so. Dann werde ich es Dashboard nennen. Und ich werde zu meinem Prototyp springen. Klicken Sie hier, um einen neuen Flow zu erstellen. Und ich werde diese Flow-Dashboards nennen. So wie das. Ich werde wieder in mein Design springen und jetzt können Sie sehen, wir haben Wireframes und wir haben Dashboard. Jetzt können wir diese Website Wireframes und Website das Dashboard nennen. Aber ich denke, Sie und der Kunde werden es leicht verstehen können. Jetzt werde ich mir später ein bisschen mehr Platz geben. Und wenn du siehst, wenn wir rauszoomen, haben wir das ganze Bündeln im Grunde. Also das Beste und einfachste, was zu tun ist, ist, diese einfach so nach oben zu bewegen. Und jetzt, wenn Sie vergrößern, wie Sie sehen können, haben wir viel mehr Platz, um es zu züchten. Ich werde Control S drücken, um meine Datei zu speichern. Und ich werde dann in mein Dashboard springen und anfangen, an meinen Rastern zu arbeiten. Also zuerst, ich werde alle diese Elemente entfernen, weil wir ein wenig später zu diesen Elementen zurückkehren werden. Aber bevor wir es tun, möchte ich nur schnell meine Spalten erstellen und migrieren, um ein wenig anders aussehen. Also, um loszulegen, was ich tun möchte, ist, dass ich 12 Spalten verwenden möchte, also wird das gleiche sein. Ich werde 49. Und Sie werden sehen, wie Adobe XD sich hier wie verrückt verhält. Denn sobald Sie anfangen, mit diesen herumzuspielen, wird es Ihnen verschiedene Werte geben. Also, was genau hier am rechten Rand, ich werde 20 verwenden. Ich werde eine große Marge auf der linken Seite verwenden. Also für 01. Das wird also 12 sein, und das wird 49 sein, das wird 80 sein, und Disziplin ist 2401. Also, was wir hier gemacht haben, wie Sie sehen können, haben wir auf der rechten Seite, nur eine Fläche von 20. Wir können das auf den Platz von 40 erhöhen. Wenn Sie denken, dass es nur ein wenig zu klein und zu schmal, während hier haben wir 401, so 401 Pixel, um unsere Navigation unterzubringen. Also, wenn ich Sie zurück hierher bringe, können Sie sehen, dass wir diesen Raum für unser Navi haben und wir diesen anderen Raum für den Inhalt im Inneren haben. Also lasst uns gleich hier springen. Und das erste, was ich hier machen werde ist, dass ich voran gehe und meine Top-Navigation erstellen werde. Um das zu tun, werde ich einfach mein Rechteck verwenden. Ich gehe in voller Breite. Also 19-21. Positionieren Sie es links oben. Pinot und ich werden eine Farbe haben. Mal sehen, vielleicht kann ich weiße Farbe haben, also werde ich es dort für die Höhe lassen. Gehen wir mit 1-20, so. Lass uns mit einem kleinen Schatten gehen, weil ich ihn von diesem Hintergrund trennen möchte. Also lasst uns mit 1020 und dann wieder 20 gehen. Und mal sehen, vielleicht können wir mit etwas viel Kleineres als das gehen, also vielleicht fünf. Es ist also schön und leicht. Wenn ich also hier klicke, um meine Säulen hoch zu stellen, kann man deutlich sehen, dass es schön und leicht ist. Es ist in keiner Weise aufdringlich. Lassen Sie uns auch eine Hintergrundunschärfe hinzufügen. Also lassen Sie mich schnell hier klicken, Hintergrund Unschärfe. Und für diese Werte, mal sehen, vielleicht kann ich etwas etwas kleineres haben. Also 20. Wir können mit 1550 für die Fettleibigkeit gehen. Also jetzt im Grunde kann man es fast nicht sehen. Aber es ist immer noch da und es sieht immer noch gut aus. Jetzt für unsere Hintergrundfarbe unseres Dashboards, ich gehe einfach zurück und klicke hier. So können Sie jetzt in Schulden sehen, Farbe, Hintergrundfarbe der Kunsttafel selbst für das Armaturenbrett ist diese Farbe anstelle von weißer Farbe. Was dies tun wird, wird es uns erlauben, alle diese Elemente zu trennen , die auf der Seite weiß sein werden. Und diese Haupt schmal hier oben. Und es wird im Grunde viel besser aufstehen. Und jetzt können Sie sehen, wie dieser Schlagschatten noch gut funktioniert als vorher. Also das nächste, was ich tun werde, ist tatsächlich ein paar Mikros zu kopieren, die ich zuvor benutzt habe. Und ich werde sie hier reinkleben. Und wie Sie sehen können, sind sie alle miteinander verbunden. Also gehe ich voran und klicke mit der rechten Maustaste, um lokal zu machen, auf allen von ihnen lokal zu machen. Und noch einmal, der Vorteil davon ist, anstatt sie in meiner Hauptdatei zu aktualisieren, kann ich einfach voran gehen und sie hier aktualisieren. Adobe XD wird sie erkennen, so wie ich sie hier wirklich aktualisiere. Das wird also viel einfacher für uns sein, damit zu arbeiten. Jetzt gehen wir weiter und bestellen sie. Also werde ich sie so positionieren. Und wenn wir zurück springen, können Sie sehen, dass wir Dashboard, Konto-Transaktionen, Lungen, Karten , Investitionen, digitale und Logout haben. Also lasst uns weitermachen und sie so befohlen. Lasst uns zuerst etwas Text verwenden. Also lassen Sie uns einen Text Poppins regelmäßig verwenden, und das sieht gut aus. Und mal sehen, ich kann in Dashboard tippen. Stellen Sie sicher, dass es von links geht. Stellen Sie sicher, dass es sich in der Mitte unseres Symbols befindet. Und Sie können auch beide auswählen. Klicken Sie einfach hier. Und lasst uns weitermachen und sie ein wenig organisieren. Solide C, vielleicht kann ich es positionieren, um 30 zu sein. Also 123. Gehen wir jetzt mit 44. Lass uns so gehen. Stellen Sie sicher, dass sie in der Mitte sind. Das sind sie. Und ich werde dieses paar Mal einfach duplizieren. Das wird also ein Konto sein. Dies wird Transaktionen allein Karten sein. Also verwende ich nur die Steuerung in D, um es digital zu duplizieren. Und schließlich werden wir den Logout direkt hier unten positionieren. Die nächste Sache ist also, diese Symbole neben unseren Artikeln zu positionieren. Gleichungslöser links richten sie so aus. Dann werde ich die Diskette so positionieren, dass sie hier ist. Und noch einmal, ich werde Ihnen all diese Symbole geben, aber wenn Sie wollen, dass größere Packs sie in professionellen Projekten mit Ihren Kunden verwenden und nicht nur zum Lernen, da diese für Sie zur Verfügung gestellt werden, dann werden Sie in der Lage sein, kaufen Sie sie, wenn Sie so wählen. Und all diese Icon-Packs, werde ich Ihnen zeigen, dass in einem zukünftigen Video, nur um zu sehen, wie massiv sie sind. So entscheiden, kompakt, zum Beispiel, ist große Symbole. Es sind 2400 verschiedene Symbole im Inneren enthalten. Sie kommen in verschiedenen Dateiformaten, so dass Sie sie in Adobe Illustrator Dateiformaten, fangen Dateiformat, Photoshop, PNG und so weiter und so weiter. Ich glaube, sie haben auch EPS. Also gibt es, dass wir digital haben. Wählen wir diese beiden aus. Mal sehen, wählen Sie diese beiden. Alles sieht gut aus. Und endlich haben wir diesen Logout genau hier positioniert. Nun, was ich tatsächlich tun kann, ist diese zu benutzen. Stellen Sie sicher, dass sie so links ausgerichtet sind. Und mal sehen, vielleicht kann ich sie mit C positionieren 40 sein. Also tun Sie so. Schicht 1234, so. Und dann kann ich all unseren Text auswählen und sicherstellen, dass er links ausgerichtet ist. Ist es. Ich kann ihn hier anstoßen. Shift 123 zum Beispiel. Ich denke, das wird gut funktionieren. Und jetzt gehen wir weiter und organisieren sie, weil Sie sehen können , dass diese Elemente ausgegraut sind. Also haben wir dieses Halsband und wir haben es hier. Was ich eigentlich tun werde, ist, all meinen Text auszuwählen. Klicken Sie hier, um es zu dieser Farbe zu machen. Und diese erste, ich werde diese Farbe verwenden, weil das die Farbe meines Flughafens ist, was anzeigt, dass dieser ausgewählt ist. Jetzt ist das nächste, was ich erstellen werde, der Selektor. Also, wenn ein Benutzer auf einige dieser Elemente klickt, wird der Selektor hinter dem ausgewählten Element von bösartig angezeigt. Um das zu tun, werde ich einfach mein Rechteck-Werkzeug verwenden. Ich werde es hier positionieren. Ich werde sicherstellen, dass es weiß ist. Ist es. Und für die Größe, mal sehen, 302, Breite, 80, so. Ich werde es Selektor nennen. So wie so. Ich werde es ganz hinten positionieren. Das ist jetzt unser Top, so. Und wir werden uns in ein bisschen damit auseinandersetzen. Wissen Sie eigentlich, was wir vorangehen können, und beenden Sie das, bevor wir zu diesem übergehen. Also, was wir hier brauchen, ist das Logo. Wenn ich dich zurück hierher bringe, haben wir kein Logo, wir haben hier ein Avatar-Bild genannt. Also nehmen wir ein Logo von irgendwo. Wir können es von hier nehmen, tatsächlich kontrollieren C. Wir haben auch eine Kopie in unserem Vermögen. Hier ist es. Also können wir es tatsächlich von hier ziehen und ablegen, wenn wir wollen. Ich kann sicherstellen, dass es in der Mitte mit diesem hier ist. Und mal sehen, ich kann es auf 40 so positionieren. Es ist also schön mit all unseren Navigationsressourcen unten aufgereiht. Was ich als nächstes tun werde, ist den Text auf der rechten Seite zu verwenden. Also werde ich tatsächlich eine dieser Positionen hier kopieren. Und mal sehen, weil wir ihm hier einen Namen gegeben haben. Wo war es? Michael Jacobs. Also lassen Sie uns den gleichen Namen für die Konsistenz verwenden. So wie das. Ich werde dafür sorgen, dass es ein Recht ist, auf das hier ausgerichtet ist. Lassen Sie uns jetzt voran und erstellen Sie unsere Ellipse. Für die Ellipse verwenden wir 60 mal 60, so. Ich gehe voran und stelle sicher, dass es diese Farbe ist, um anzuzeigen, dass das Bild dorthin gehen muss. Ich werde sicherstellen, dass es so in der Mitte ist, und ich werde es bis hierher positionieren. Ich positioniere meinen Text bei 40. So, und das ist es im Grunde. Wir haben unser Top jetzt abgeschlossen. Nun, was wir tun können, ist tatsächlich gruppiert. So kann ich mein Logo, Text, unser Teer und Hintergrund auswählen , Control G drücken. Ich werde es nennen, mal oben sehen, jetzt denke ich, es wird gut funktionieren. So wie das. Und ich werde Dinge im Inneren organisieren. Das ist also unser DAR, ich werde es hier positionieren, und das ist es im Grunde. Nun lasst uns diese auch organisieren. Das ist also unser Dashboard. Wählen wir es aus. Es kontrolliert dich. Denn später, innerhalb unseres Designs, werden wir diese tatsächlich verwenden, um sie zu animieren. Sie werden die Farbe ändern, wie Sie auf sie klicken. Also werde ich Ihnen das von meinem ursprünglichen Design zeigen weil ich beabsichtigte, Ihnen originelles Design ein wenig später zu zeigen, aber ich werde Ihnen das jetzt zeigen, nur damit Sie es verstehen können. Das ist also das endgültige Design. Und wenn Sie zwischen ihnen klicken, können Sie sehen, dass sich diese Farbe ändern. Und Benutzer können tatsächlich auf sie klicken. Und Sie können sehen, dass Symbole Farbe geändert werden, sowie die Texte und all diese Inhalte hier auf der rechten Seite. Also lasst uns jetzt voran gehen und sie organisieren. Wählen Sie sie einfach aus, rufen Sie dieses Konto an. Um unter Dashboard-Transaktionen zu gehen. Um diese Animationen zu erstellen, müssen Sie diese Gruppen gruppieren, um XD leichter zu verstehen und für Sie diese Animationen und diese Transitübergänge tatsächlich zu organisieren. Das sind Schnurinvestitionen. So wie so. Wir haben digitale wird untergehen. Und schließlich haben wir uns abgemeldet. Ein Selektor wird direkt unter all diese gehen , weil er unter und hinter ihnen gehen wird. Also für den Selektor selbst, lassen Sie uns schnell um es nur ein wenig herum, weil ich diese Ecke nicht graben, weil sie einfach zu flach für mich ist. Also werde ich hier gehen und diese 2020 geben. Also oben, unten links und oben rechts. Wenn ich also ein wenig zoomen kann, können Sie sehen, wie das aussieht, während diese beiden völlig flach sind. Was wir also tun werden, ist tatsächlich den Abstand von 40 zu geben, also 1234 und unser Armaturenbrett in der Mitte so zu positionieren. Von hier bis zum nächsten Punkt werden wir es bei 40 positionieren. So 1234. Und von unserem nächsten Punkt nach unten, geben wir ihm den Abstand von 60. So, denn wenn Sie dies übergehen, möchten Sie genügend Platz zwischen all Ihren Elementen haben. Wie Sie sehen können, geben wir deshalb ein bisschen mehr Platz. Sie können ihm auch den Platz von 80 geben, wenn Sie möchten. Aber ich denke, 60 wird gut zwischen all diesen verschiedenen Artikeln funktionieren. Geben wir ihm also einen Abstand von 60. Adobe XD hat wirklich gut aufgenommen. Was ich eigentlich damit machen will. Das funktioniert gut. Mal sehen 60. Und schließlich für die Abmeldung selbst, können wir es auf 40 positionieren. Also Shift 1-2-3 für jetzt, was ich tun werde, ist eigentlich alle diese auswählen sollten G steuern und sie Sidebar nennen. So wie so. Weil ich sie so positionieren möchte, dass sie in meiner Sidebar sind. So nennt man das Bit. Und dieses Bit wird eigentlich unser Inhaltsbereich sein. Also für unseren Content-Bereich, wollen wir etwas Text direkt hier oben. Und dann wollen wir alle diese anderen Elemente erstellen. Also, um das zu tun, werde ich tatsächlich diesen Text kopieren und Bezirkskontrolle C, Kontrolle V. Also werde ich sicherstellen, dass sie so ausgerichtet sind. Sie sind in der gleichen Höhe wie dieser Kanal positioniert. Also 40 von unserem Navi, werden wir hier schreiben, willkommen zurück, Michael. Und hier, dass für Bedingungen wie diese, und es wird das Datum selbst enthalten. Also lasst uns die Farbe ändern. Und für diesen Text hier, vielleicht kann ich mit 36 gehen. Ich denke, das ist zu groß. So 36 mutig. Ich werde es hier zu meinen Charakterstilen hinzufügen. Musiker, die hier sind. Also knapp unter einem Zwischenraum diese, weil ich denke, 36 wird ein wenig besser funktionieren. Und dann 48. Und es wird mir nur ein bisschen mehr Platz geben, mit dem ich rumspielen kann. Unsere Position ist, um 20 links zu diesem Rand ausgerichtet zu sein. Und jetzt gehen wir weiter und beginnen mit der Erstellung dieser Boxen für unsere Inhalte. Beginnen wir also mit einem Rechteck-Werkzeug. Dies wird vier Spalten in der Breite und Abmessungen werden 467 Wochen, 231, so sein. Und mal sehen, ich kann ihm einen Eckradius zehn geben. Und für den Abstand kann ich mit 40 gehen. So wie das. Ich kann auch einen Schatten hinzufügen, kleinen Schatten, also 55 und 20. Und mal sehen, das ist einfach zu hell. Lass uns mit sechs gehen. Ja, ich denke, das funktioniert ein bisschen besser. Ich werde es duplizieren. Also Control D, Positionierwerkzeug mehr genau hier. Und wenn ich Sie zu unserer Originalskizze zurückbringe, können Sie sehen, dass wir drei hier haben und wir müssen hier schreiben. Also, was ich tun werde, ist dieses zum Beispiel zu duplizieren. Und mal sehen, ich kann es auf 40 positionieren. Ist es. Und einfach den ganzen Weg nach unten verlängert, denn das ist bei 40 wird schön hier aufrunden. Ich werde das auf sieben ausdehnen. So 4567 Säulen breit. Und wir werden es duplizieren und einfach abrufen und dieses hier so. Es wird also bei fünf Säulen breit sein. Also, wenn ich hier einschließe und eine Vorschau darauf, und nur damit ihr es ein bisschen besser sehen könnt, könnt ihr sehen, wie das aussieht. Noch einmal, wenn Sie denken, dass dies zu eng ist, können Sie es auf 40 erhöhen. Ich denke, es spielt wirklich keine Rolle und es sieht gut aus, wie es jetzt ist. Also werde ich es vorerst dort lassen. Also, was wir als nächstes tun werden, ist etwas Text enthalten. Und ich werde in so etwas wie Graf schreiben. Ich werde eigentlich mit 18 gehen. Und es funktioniert gut. Mal sehen, ob ich es schaffe. 123412, zum Beispiel. Und Sie können es ein wenig nach unten positionieren. Geben wir das 48. Geben wir ihm ein paar Zahlen. Also lassen Sie uns zum Beispiel 34 bis 5.186, weil Sie genau zu diesen Zahlen sein wollen, weil das Ihr Konto ist. Immerhin Schicht 12. Ich werde es zum Beispiel entdecken geben. Und mal sehen. Neues Bankkonto. Weil dies das Hauptkonto ist, das der Benutzer verwendet. Positionieren Sie es so in der Mitte. Dann können Sie natürlich ein Symbol hier hinzufügen, wenn Sie möchten. Aber ich denke, es wird gut funktionieren, so wie es ist. Das ist also unser Konto Vg. Und ich werde all diese auswählen. Er kontrolliert G und ruft dieses Hauptkonto so an. Was wir als Nächstes tun werden, ist, auf einige davon zu gehen. So kann es sich zum Beispiel um Ihre Karten handeln. Also lassen Sie uns Qualität, die wirklich tun, zum Beispiel. Und nun, mal sehen, vielleicht kann ich kopieren und einfügen. Genau wie dieser Text. Und ich kann so etwas wie deinen Strom retten. Und mal sehen, vielleicht kann ich wieder bei 40 sein, also verschieben 1234 und c, und das kann VSA-Strom sein. Lassen Sie uns seine Farbe in diesen Text ändern. Ja, ich denke, das funktioniert besser, aber ich glaube nicht, dass diese Größe funktioniert. Ändern wir es also auf 16 und fügen wir es sofort hinzu. Es geht nach oben, was in Ordnung ist. Das ist also 18 Verstorbene? 16. Ich denke, das funktioniert gut. Mal sehen. Ich kann es auf $20 positionieren. Und das kann auch bei 20 sein, gültig bis C, neun von 21. Also neun Monate 202120 überall. Und das ist in Ordnung. Und mal sehen, vielleicht können wir eine Paginierung direkt hier unten erstellen, nur damit Benutzer zwischen all diesen Karten wechseln können. Da Sie zum Beispiel eine Debitkarte haben, als Sie Kreditkarte haben usw., salzen, wenn sie auf diese Paginierung klicken, werden sich diese Informationen ändern. So zum Beispiel, Muster Auto auf einer Debitkarte oder was auch immer. Und die Karte selbst wird sich hier ändern. Also gehen wir zu diesen Kreisen. Also werde ich einfach einen Kreis erstellen, der 15 mal 15 sein wird. Das ist in Ordnung. Verwenden Sie diese Farbe so. Und mal sehen, vielleicht kann ich es so positionieren, dass es seine Garantie hat. Also 12 wie diese, Kontrolle D Und mal sehen, vielleicht kann ich ihm auch den Abstand geben oder 15, weil es 15 mal 15 ist, so. Und diese beiden können verfärbt werden, weil dieses ist und derjenige, der ausgewählt ist, oder wir können tatsächlich DS1 auswählen und dann geben Sie es verfärbt, sagen wir einfach, um anzuzeigen, dass es ausgewählt ist. Jetzt werde ich diesen Text gruppieren. Ich werde mein Rechteck-Werkzeug wie dieses von hier nach hier verwenden. Verwenden Sie es und Text, stellen Sie sicher, dass der Text zentriert ist. Dann löschte dieses Rechteck, gehe zurück zu meinem Ebenen-Panel und nannte es Text. Denn wieder einmal, sobald Sie beginnen, diese zu wechseln , wird dieser Text tatsächlich aktualisiert und geändert. Rufen wir die an. Das werden also unsere Kreise sein. Und ich werde diesen Text einfach kopieren und einfügen. Das wird unsere Paginierung sein. Also mehr mit knapp unter dem Text. Und was für Sie übrig bleibt, ist die Karte. Ich werde diesen Hintergrund duplizieren. Und lassen Sie uns für die Kartenmaße sehen, ich kann so etwas wie zwei bis acht mit 149 verwenden. Etwas Schönes und Kleines. Ich werde diese Farbe verwenden, nur um anzuzeigen, dass dies unsere Karten-Mischung ist. Es ist in der Mitte und mal sehen, ich kann es positionieren, um 40 von hier zu sein. Also 1234, so. Und ich denke, das funktioniert genauso gut wie unser Layout. Wie gesagt, können Sie sich vorstellen, dass es das einfach in Carter PG umbenennen wird, so. Und lasst uns eine Gruppe von diesen. Also nennen wir es Ihre aktuelle, so. Also noch einmal können Sie sich vorstellen, dass, wenn Benutzer anfangen zwischen diesen zu klicken und diese Paginierung zu ändern, diese Informationen aktualisiert werden. So zum Beispiel, von VSA zu MasterCard, was auch immer eine gültige bis zu verschiedenen Daten und dann verwerfen Grafik wird auch aktualisiert. Also noch einmal, wenn es denkt, dass dies nur zu ist, warum können Sie sie ein wenig mehr Platz hier oder hier zu geben, wie zum Beispiel, wie zum Beispiel, dann können Sie MasterCard-Text unterbringen und so weiter. Aber ich denke, das funktioniert gut. Schließlich, was wir hier für diese Top-Wache tun werden, werde ich auch meine Paginierung verwenden. Ich werde mein Textsteuerelement C verwenden, V steuern und es hier positionieren. So 1234 und ging, um eine Paginierung zu führen. Und was wir dort tun werden, ist, dass wir es einen Hilfe-Tab nennen , weil es den Benutzern einige Tipps zeigen wird. Also, wie Tab, Vg, so? Und es wird ihnen Tipps zeigen. Wie gesagt, ich werde einfach voran gehen und meinen Text hier kopieren. Nur um es dir zu zeigen, werde ich das hier löschen. Und schließlich, mal sehen. Vielleicht kann ich das so und Abstände wie diesen geben. Und ich werde es hier schließen. Mal sehen, ich kann bei 20 sein, was bereits ist. Und das ist in Ordnung. Positionieren Sie gut. Und das ist es im Grunde. Alle. Das einzige, was wir tun können, ist im Design später einige Grafiken hinzufügen. Und ich werde das noch einmal zeigen, nur um zu sehen, was ich meine. Wir haben diese Grafikpflege und später werden wir sie hinzufügen. Und Sie werden im Abschnitt Design dieses Kurses sehen , was sie tatsächlich lösen. Benutzer beginnen, zwischen diesen zu klicken. Wie Sie sehen können, werden sich diese Grafiken ändern und aktualisieren, wo immer sie klicken und zeigen ihnen diese Haplotypen, die, wenn sie klicken, sie sie auf verschiedene Seiten bringen können. vorerst so lassen, wie es ist. Ich wähle die nächste Generation aus und rufe sie an. Mal sehen, Hilfe-Tab, wie folgt. Jetzt endlich, lassen Sie uns die Dinge nur ein bisschen organisieren. Oder wir können noch mehr und schaffen diese beiden und dann können wir sie organisieren. Ich denke, das ist viel besser. Also mal sehen, wir können diese Transaktionen nennen. So wie das hier. Und dann kann ich das hier hinbringen. Mal sehen, ich kann ihm den Abstand von 40 geben. Also 1234, Ihre Transaktionen. Und mal sehen, noch einmal 40. So wie das. Dies wird Indeed sein und dies wird neuer Geschäftsname sein, so dass Sie wissen können, welches Geschäft Sie Ihr Geld ausgeben würden. Nun, das kann ein Service sein, und das kann Dollarbetrag sein. Soe hat mich vor diesem 1234 gesehen. Denken Sie, das funktioniert gut. Geht von rechts, und lassen Sie uns einige Zufallszahlen geben. So C minus 15.14, Zum Beispiel. Lassen Sie uns diese etwas besser organisieren. Also haben wir zuerst das Datum, dann haben wir einen Firmennamen, wir haben den Service und wir haben diesen. Also nennen wir es Daten. Unterhalb Ihrer Transaktionen. Ich werde diesen Text mit einem Pfeil kopieren und einfügen, wo er ist, hier ist er. Anstatt mehr zu erfahren, werden wir es umbenennen, um mehr zu sehen. Genau hier. Ich werde es so in der Mitte positionieren. Ich werde die Position bekannt. Mal sehen, vielleicht kann ich uns die Basis von 20 geben, also Schicht 12. Lassen Sie uns nur ein wenig hineinzoomen. Durch das hier. Ich werde es den ganzen Weg nach unten positionieren. Und dieser Datenordner, werde ich einfach ein Wiederholungsraster für jetzt verwenden. Also werde ich sicherstellen, dass es da ist. Ich werde den Abstand auf, lasst uns es tatsächlich bei 20 belassen. Ich denke, das funktioniert gut. Und wie gesagt, wir werden es vorerst so lassen. Jetzt. Ich werde sie gruppieren. Lernen Sie also mehr als Daten und Transaktionen. Wir werden diese letzten Transaktionen nennen, wie ich merke. Und schließlich sind wir mit diesem auf einer linken Breite. Also in diesem Video ging ein wenig länger. Aber ich gehe wirklich gerne ins Detail, damit ihr euch nichts entgeht. Also werde ich diese textbasierte tat in Position bei 40, also 1234 kopieren . Alle Ausgaben wie diese. Und mal sehen, vielleicht können wir diese Anrufkosten BG nennen. Ich habe das getan. Und was wir auch tun können ist dieses zu duplizieren und uns ein bisschen mehr Abstand zu geben. Also, zum Beispiel, 40, werde ich sicherstellen, dass das 16 ist. Ich werde es täglich anrufen. Und dann, was wir tun können, ist in der Regel das, stellen Sie sicher, dass es bei 20 ist, stellen Sie sicher, dass es bei 18 ist. So wie das. Und ich werde ihm einige Zufallszahlen geben. Sehen wir uns zum Beispiel 2.4875 an, denn das sind unsere täglichen Ausgaben. Und dann werde ich sie gruppieren. Gehen wir zunächst zum Ebenenbedienfeld zurück. Das wird also ideal positioniert sein. Das hier. Lassen Sie uns in diesem organisieren, in der anderen Weise herum so. Also ging das wöchentlich zu schlagen. Und stellen Sie sicher, dass wir ein anderes erstellen muss, das monatlich so sein muss. Also für den Monat, ändern Sie es in einige größere Zahlen. So tausend bis fünf Punkte, zum Beispiel 13. Das wird etwas kleiner. So wird 1,4 bis 0,64 täglich und wöchentlich genau dort bleiben. Was ich also tun werde, ist positioniert, bei 40 zu sein. Also 1234, denn das ist bei 40, wenn du dich daran erinnerst. Jetzt werde ich diese drei auswählen, so. Und klicken Sie hier, um sicherzustellen, dass sich täglich in der Mitte zwischen diesen beiden befindet. Das wird wöchentlich sein. Und schließlich wird das monatlich sein. So können Sie sehen, wie einfach das ist zu organisieren und einfach zu halten. Also, was ich als Nächstes tun werde, ist tatsächlich meinen Kreis zu erstellen. Also werde ich beginnen, indem ich hier einen Kreis hinzufüge, denn er wird uns das Diagramm aller Ausgaben zeigen. Also werde ich es vorerst Server nennen und wir werden uns später im Design-Teil des Kurses damit befassen. Also gehen wir wollen 86 mit 186, so. Und mal sehen, wir können einen Tickerrahmen hinzufügen. Lassen Sie uns dies zunächst in eine Plattenspalte ändern und geben Sie ihm einen Rand aus Sand, zum Beispiel, nur sortiert. Sie können es ein wenig besser sehen und Sie können tatsächlich darauf klicken. Und mal sehen. Wir können 42 sein, das ist 36. Also mal sehen, vielleicht 40 von unten, so. Also haben wir 40 hier und wir haben 38 hier. Also 39 hier, Drehen, ich höre, das ist gut. Was ich als nächstes tun werde, ist tatsächlich diesen Abschnitt zu duplizieren. Positionieren Sie es hier innerhalb unseres Kreises. Und wir werden das zum Beispiel im November nennen . Und gib das. Einige Ausgaben von, von c 82513 mit dieser Top-Nummer entsprechen wir haben. Also mit diesem werde ich sicherstellen, dass beide zentriert sind. Ich werde dafür sorgen, dass sie so zentriert sind. Ich werde so ausgesucht. Und ich werde diesen Text nennen, dass ich diesem einen Namen des Diagramms geben werde. Und offensichtlich wird dies aktualisiert, sobald die Leute anfangen, auf sie zu klicken. Also, was ich als nächstes tun werde, ist tatsächlich einige im Grunde Text-Tags hinzuzufügen. Lassen Sie uns diesen Text von 16 duplizierten, morbiden draußen verwenden und wann wir hier ganz richtig positionieren. Also mal sehen, was wir tatsächlich tun können, es vielleicht können wir einige zufällige Dinge hinzufügen, die Leute kaufen. Ja, lasst es uns vorerst hier lassen. Ich gebe ihm einen Namen wie Kleidung. Jetzt werde ich es duplizieren, das heißt dieses Essen. Und das wird Dienstprogramme sein. Und schließlich kann dies sein, dass Auto-Zahlungen berechtigt sind, was auch immer Sie dort einschließen wollen, geben Sie ihm einen Abstand oder 20 oder denken, es wird gut funktionieren und gruppieren Sie sie und stellen Sie sicher, dass sie in der Mitte unseres Kreises sind und positionieren Sie sie hier vorerst, weil ich denke, es wird gut funktionieren. Aber später im Design, werden wir tatsächlich einige Symbole hinzufügen. Also denke ich, es wird vorerst gut funktionieren. Also mal sehen. Alle Ausgaben Position nach oben. Wir haben hier täglich, wöchentlich, monatlich positioniert. Also täglich, wöchentlich, monatlich. Und dann haben wir das Diagramm und wir werfen es, sehen Kleidung, Essen, Versorgungsunternehmen und Auto-Zahlungen. Und schließlich haben wir diesen Hintergrund, der hierher gehen wird. Ich werde all das gruppieren und alle Ausgaben nennen und es einen Tag nennen. Eigentlich müssen wir diese innere Position so nach unten stellen. Und es ist im Grunde, das Letzte, was ich tun möchte, ist, Dinge nur ein wenig zu organisieren. Also adoptieren nav und sorry, Sidebar geht genau hier. Alle Ausgaben gehen auf den Grund. Und das und das werden genau hier gehen. Also haben wir Hauptkonto, Ihre Karte ist gehalten, tab , die neuesten Transaktionen und Ausgaben, und das ist unser Dashboard abgeschlossen. Und wenn wir zu dem Design-Teil davon kommen, und wenn wir zusätzliche Seiten dieses Dashboards erhalten, werden Sie sehen, wie einfach dies ist, um einige dieser Elemente zu kopieren und anzupassen, vor allem mit diesen will, werden wir tatsächlich einige Tags für sie erstellen. Wir werden dies ersetzen, wenn es Service mit diesen Tags sagt. Es wird wirklich einfach sein und alle von ihnen werden eine Darrell andere Farbe haben. Du wirst also sehen, wie einfach das sein wird. Also Hit Control S oder Befehl muss sparen und Schulden sind Wireframing-Prozess in Adobe XD abgeschlossen. Ich hoffe wirklich, ihr habt etwas Neues gelernt. Ich hoffe, Sie haben mit diesem Schöpfungsprozess genossen. Mit mir. Ich hoffe wirklich, Sie werden das neu erstellen oder etwas anderes für sich selbst tun. Und diesen Wireframing-Prozess zu erkunden, weil Sie sehen können , kann es extrem einfach sein, je nachdem, welche Technik Sie verwenden können. Sie können eine Wiederholungsraster für alle diese Elemente verwenden. Sie können Komponenten für sie verwenden und dann diese Komponenten anpassen. Sie können kopieren und einfügen. Sie können Raster verwenden, um diese nach links und rechts zu positionieren, wie Sie möchten. Es gibt also wirklich keine Grenzen für das, was Sie in Adobe XD tun können. Ihre Grenze ist nur Ihre Kreativität im Grunde. Daher fordere ich Sie dringend auf und erkunden Sie Adobe XD und beginnen Sie mit der Erstellung dieser Wireframes. Erforschen Sie zunächst, was Sie für Ihr Projekt in Adobe XD tun können. Also, das ist es für dieses Video, das ist es für diese Reihe von Videos für Wireframes in Adobe XD. Im nächsten Video werde ich nur ein wenig erklären, wo ich Bilder für dieses Projekt bekommen habe. Denn in der nächsten Phase des Projekts, wenn wir zum Entwurfsteil kommen, wir tatsächlich anfangen, Bilder zu verwenden. Also möchte ich Ihnen nur zeigen, wo ich diese Bilder habe, was Sie tun können, um sie auch zu bekommen. Und Unterschied zwischen kostenlosen und B8-Bildern, sowie diesen Premium-Symbolen, wo ich sie bekam, wie Sie sie auch bekommen können, sowie die Einschränkungen der Lizenzen für dieses bestimmte Projekt. Also sehe ich dich im nächsten Video. 37. Kostenlose VS Premium Ressourcen und Licences: Wenn es darum geht, Elemente in Ihren Designs zu verwenden, sei es, dass unsere Symbole, Bilder, Mockups, und so weiter. Es gibt immer diese beiden Teile. Der erste Teil ist die Verwendung von kostenlosen Gegenständen. So Free Fonts, kostenlose Bilder, kostenlose Mockups und so weiter. Und der andere Teil ist die Verwendung von Premium-. Der Unterschied zwischen Dosis zwei ist offensichtlich Variationen, weil für jeden einzelnen kostenlosen Artikel, den Sie online gefunden haben, gibt es eine gute Chance, dass Sie nicht genug Variation haben. Wenn Sie zum Beispiel die kostenlose Schriftart herunterladen, besteht die Wahrscheinlichkeit, wenn Sie keine Google-Schriftarten verwenden, zum Beispiel werden Sie nicht genug Schriftarten finden. Wenn sie Symbole verwenden, werden Sie nicht genau die gleichen Symbole aus demselben Satz finden. So müssen Sie am Ende diese Symbole kaufen, wenn Sie zum Beispiel für Brust-Teams verwenden, gibt es eine gute Chance, dass Sie ein Team mit nur zwei oder drei Seiten und nicht alle Seiten, die Sie brauchen, finden . Gleiche Geschichte mit Mockups, gleiche Geschichte mit Bildern, vor allem. Also werde ich Ihnen Bilder Beispiel in Details zeigen, aber Wert und Variationen sind, was trennt kostenlose und Premium-Ressourcen. Es gibt immer diese andere Sache, die jeder einzelne Designer da draußen ist, der kostenlose Gegenstände benutzt, wird am Ende im Grunde wirklich ähnlich, wenn nicht das gleiche Design wie Sie haben , weil Sie das gleiche kostenlose Artikel, die Sie online finden, unabhängig davon, ob es sich um Schriftarten, Bilder, Mockups usw. handelt. Also in diesem Video werde ich Ihnen Elemente zeigen, die ich in diesem Kurs verwendet habe. Ich gebe Ihnen diese Gegenstände, aber wieder einmal, die Premium-Artikel sind nur für Lernzwecke. Sie haben also nicht die Berechtigung, sie für Ihre Kundenarbeit zu verwenden. Wenn Sie wählen, sie zu verwenden, stellen Sie sicher zu verstehen, dass im Falle von jemand geht nach Ihnen für unsere Klage, ob das sind diese Websites oder Original-Autor, Es liegt alles an Ihnen. Stellen Sie also sicher, dass dies wirklich ernst ist. Verwenden Sie diese Premium-Elemente nicht, wenn Sie dazu keine Berechtigungen haben. Vergewissern Sie sich also, dass bei Premium-Artikeln Schulden für kostenlose Gegenstände der Fall sind. Du darfst sie natürlich benutzen. Lassen Sie uns also mit Schriftarten beginnen. Und die erste Website hier ist Google Fonts. Ich benutze Poppins-Schriftart während dieses Kurses. Sie können offensichtlich zu diesem Link gehen, klicken Sie auf Donald Familie, und es wird in schrecklichen Schriftfamilie herunterladen. Also alle diese Links, die ich Ihnen in diesem Video zeigen werde, werden im PDF verlinkt. Laden Sie also bitte das PDF herunter und klicken Sie auf alle Links, die Sie besuchen möchten. Das sind also die Google-Schriftarten. Und natürlich können Sie, wenn Sie eine andere Schriftart verwenden möchten, können Sie zu den Google-Schriftarten gehen, Sie können hier klicken. Sie können nach Kategorien wählen, können Sie nach Sprache wählen. Welche Sprachen werden also unterstützt? Schriftart-Eigenschaften. Also, wenn Sie wollen, wie viele Arten, Dicken, Neigung, Breite, und so weiter. So können Sie alles tun, was Sie wollen, genau hier auf Google Fonts. Und noch einmal ist diese Ressource völlig kostenlos. Wenn Sie sich entscheiden, mit Premium-Ressourcen zu gehen, dann empfehle ich wirklich Creative Market. Denn Erstellen Sie Ihren Markt ist wirklich diese nette Ressource für Premium-Schriftarten. Sie können hier auch jede andere Art von Ressourcen finden. Also von Fotos, Grafiken, Vorlagen, Web-Teams, Schriftarten, Add-ons, sogar 3D. Hier finden Sie Premium-Typen. Auch die Dinka erwähnt zu Beginn dieses Videos. Der Hauptgrund, warum Sie dies nicht tun wollten, ist, weil Sie Ihr Design von all diesen anderen Designern unterscheiden möchten. Sie möchten Ihren Kunden ein erstklassiges Erlebnis bieten, vor allem, wenn sie das Budget haben. So können Sie immer direkt hier gehen und diese Schriftarten kaufen, damit Ihre Designs nicht am Ende genauso aussehen wie all diese anderen Jungs, die kostenlose Ressourcen verwenden. Das ist also der Hauptbegriff hier. Ich empfehle, Markt zu schaffen, weil einige wirklich kreative Leute Fonts hier erstellt haben. Und ich empfehle euch wirklich, sie zu überprüfen. Als nächstes haben wir Symbole. Ich benutzte diese Symbole, so große Symbol Steyn, und dieses Set wurde aktualisiert. Kinky Kachel hat 2400 Symbole, so etwas. Und Sie können hier klicken, um zur Premium zu gehen und sorry, um eine Vorschau. Und Sie können sehen, wie viele verschiedene Symbole in verschiedenen Stilen in dieser Rückseite tatsächlich enthält. Also das ist die, die ich benutze, seine Prämie, wie Sie sehen können. Aber wenn Sie kostenlose Symbole wollen, wieder, können Sie auf Websites wie flache icon.com gehen. Und für jedes einzelne Symbol, das Sie hier verwenden, müssen Sie zurück zum ursprünglichen Autor, solide und Form. Wenn Sie zum Beispiel wählen, Ich weiß nicht, dieses Icon-Paket. Und sagen wir, ich möchte dieses Symbol herunterladen. Sie können sehen, dass, wenn ich auf PNG-Option oder SVG-Option klicke, Ich werde immer SVG empfehlen, wenn möglich. Wenn Sie auf SVG UC klicken, haben Sie einen Premium-Dialog. So haben Sie alle diese Symbole für diesen Preis des Monats noch attributional erforderlich. Aber wenn Sie sich entscheiden, kostenlose Version herunterzuladen, dann müssen Sie den ursprünglichen Autor zuschreiben. Sie müssen also diesen Link kopieren, Sie müssen ihn auf Ihrer Website stützen und so weiter, weil Sie die Ressource eines anderen kostenlos verwenden. Das ist also der Nachteil. Du musst diesen Kerl verknüpfen. Das ist also Gregor Krasner, ich hoffe, ich habe das richtig ausgesprochen. Das sind also die Einschränkungen von freien Symbolen. Sie können immer auf die Websites wie Material Design gehen, das ist Googles eigene Icons. Aber das Problem damit ist, das sind die Symbole, die in Android I-Betriebssystem verwendet werden. Also im Grunde jedes einzelne Telefon jetzt gibt es, das Android-Betriebssystem hat, verwendet diese Symbole. Also wieder, die Chancen sind, dass Ihr Design wird am Ende aussehen ganz ähnlich wie alle diese anderen Designs online gefunden, vor allem, wenn Sie tun mobile App-Design, vor allem für Android-Nutzer. Das sind also deine Beschränkung. Wenn Sie möchten, können Sie diese Symbole natürlich herunterladen und verwenden, wie bei Google-Schriften, weil Google sie erstellt hat. Sie sind im Grunde fast Open Source, was sie hier sind. Aber Sie haben diese Lizenzen immer noch hier, aber Sie können sie kostenlos nutzen, ohne dass eine Namensnennung erforderlich ist. Als nächstes bewegen wir zwei Bilder, und das ist wirklich die wichtigste Ressource online gefunden werden , dass Sie die meisten Einschränkungen Breite haben. Denn vor allem mit Menschen, wenn Sie Bilder von Menschen, die Sie wollen Bild-Sets und die Chancen sind, werden Sie nicht finden Bild-sets als freie Bilder. Das ist, wo ein Premium-Bilder ins Spiel kommen und Premium-Bilder SET kommen ins Spiel. Die andere Möglichkeit ist die Auflösung, besonders wenn Sie Arbeit für den Druck erstellen. Die Chancen sind, dass diese Auflösungen für Ihre Druckarbeit nicht ausreichen. So müssen Sie immer noch am Ende kaufen diese Bilder, Bild-Sets. Sie können sie später in Ihren Druckarbeiten verwenden. Volumenkörper. Nehmen Sie ein gutes Beispiel. Mal sehen, vielleicht können wir so etwas wie, ich weiß nicht. Mann, nur um ein paar Bilder zu sehen. Und wir haben dieses Bild hier. Nehmen wir also an, dass wir Bilder aus diesem Set verwenden möchten. Wir können auf den Fotografen klicken und Sie können sehen , dass sie Variation dieser verschiedenen Bilder haben, aber es gibt keine Reihe von Bildern dieses bestimmten Modells. Das war es, was ich gesagt habe. Also, wenn Sie dies zum Beispiel für ein Team verwenden möchten, und Sie haben, sagen wir vier Leute in Ihrem Team. Vielleicht können wir dieses Bild am Ende verwenden, vielleicht dieses Bild sein, aber das ist es im Grunde. Wir stecken fest. Also müssen wir Online-Bilder finden, die diesen wirklich ähnlich sind, die frei sind, die die gleiche Beleuchtung haben, die die gleiche Art von Hintergrund haben. Diese werden also auf unserer Website kohärent aussehen. Und dann stecken wir fest. Wir verschwenden unsere Zeit auf der Suche nach diesen Bildern online in guten Chancen sind Sie nicht am Ende finden diese Bilder online. Also, das ist, wo ein Premium-Bild Rücken nützlich ist. Und Website, die ich benutze, ist und lebenswichtige Elemente, weil sie alle diese verschiedenen Bilder hier in Bild-Sets haben. Und sie haben auch diese Website namens 20-20, die sie gekauft haben. Also, wenn ich zum Beispiel Fotos hier wähle. Und wenn ich darauf klicke, können Sie sehen, dass wir sie durch Querformat Porträt verfeinern können, quadratischen Hintergrund, isoliert ist, was im Grunde bedeutet, wenn wir Bilder wie diese finden wollen, ist es wirklich ganz einfach. So kann ich in Mann Suche eingeben. Und dann kann ich auch isoliert klicken. Und Sie können sofort sehen, dass wir diese isolierten Bilder haben. Also entweder auf weißem Hintergrund, grauem Hintergrund, dunklem Hintergrund und so weiter. So ist es viel einfacher als für Sie zu springen, zum Beispiel Photoshop oder ein anderes Online-Tool, das verwendet werden kann, um diese Hintergründe für diese Bilder zu schneiden. Und mit nur einem Klick, werden Sie in der Lage sein, Hintergründe aus diesen Bildern zu entfernen. Nehmen wir also, ich weiß nicht, dieses Bild zum Beispiel. Und wir können ähnliche Bilder sehen. Also hier sind sie. So können Sie sofort aus diesen Bildern schauen und den Hintergrund entfernen, als ob wir sie in Ihren Designs verwenden. Oder wenn Sie die Hintergründe nicht entfernen möchten, können Sie sie einfach so verwenden. Das ist also, wo diese Premium-Bilder nützlich sind, weil sie in Sets kommen. Lassen Sie mich auch dieses Bild zeigen. Wenn Sie es zum Beispiel überprüfen wollten, sehen Sie, dass wir dieses Modell haben. Und Sie können nach unten scrollen und sehen, dass wir ähnliche Modelle von dieser Art von Setup haben. Und Sie können auch auf den Fotografen klicken. Und Sie können sehen, dass sie dreitausend Bilder haben. Und Sie können dann nach diesem bestimmten Modell suchen und andere sehen, zum Beispiel Posen oder andere Dinge, die dieses bestimmte Modell getan hat. Und Sie können deutlich sehen, lassen Sie uns sagen, dass dieser Mann, Sie können es in der Mehrheit dieser Bilder lokalisieren, so dass Sie ihn in verschiedenen Posen sehen können. Sie sehen, dass wir Kinder haben, wir haben ältere Menschen, wir haben Anruf-Subs, wir haben Details und so weiter und so weiter. Also im Grunde Schulden, wie einfach das ist zu verwenden. Und das, was ich Ihnen zeigen wollte, sowie Fotos. Also, wenn Sie direkt dort klicken, sehen Sie, dass wir 50 Millionen verschiedene Bilder auf dieser Website haben, 20-20 dot com. Also, wenn Sie rechts klicken, wird es gehen, um Sie auf diese Website zu bringen und es ist viel besser organisiert als und Watteau Elemente, aber es ist immer noch Teil der Inverter-Elemente. Also, wenn Sie kaufen und Wasser Elemente Abonnement, Sie am Ende immer noch mit dieser bestimmten Website. So können Sie beide Bilder in Ihren Projekten verwenden und Boot-Bilder sind grundsätzlich wirklich qualitativ hochwertige professionelle und so weiter. So können Sie hier sehen, dass Sie sie durch Sets einrichten können. Und im Grunde dasselbe noch einmal, wenn man sie benutzen will, gibt es nur einen Vorbehalt. Sie können verschiedene Größen dieser Bilder wählen. Also lassen Sie uns zum Beispiel dieses Bild wählen. Und Sie können sehen, Sie können klein, mittel oder groß wählen , und dann können Sie sie herunterladen. Aber mit Witz und Vitalelementen, müssen Sie das größtmögliche Bild herunterladen und dann am Ende optimieren. Ich werde Ihnen die Optimierung zeigen, die ich später verwende, aber Sie können es immer per Drag & Drop in Adobe XD wie Schulden. Aber es gibt gute Chancen, vor allem, wenn Sie diese Premium-Bilder verwenden, werden Sie am Ende mit wirklich großen Datei. So könnte Ihr System verzögern. Also empfehle ich immer, Ihre Bilder zu optimieren, wenn Sie können. Oder wenn Sie sich entscheiden, diese Premium-Bilder zu verwenden, können Sie etwas wie 20-20 verwenden und dann diese kleineren Versionen herunterladen. Sie werden in Ihrer Sammlung gespeichert und Sie können sie weiterhin als Sammlung beenden. Sie können sie zu Ihren Favoriten hinzufügen. Und wenn Sie diese Ressourcen dann mit Ihren Entwicklern teilen, können Sie weitergehen und größere Versionen herunterladen, wenn sie dies wünschen. Zum Beispiel könnte Ihr Kunde Website-Design, App-Design, aber auch Druckdesign haben . Sie könnten also riesige Versionen für den Druck benötigen. Daher können Sie zurückgehen und ihnen diese Resolutionen senden. Während V8 Fray Bilder, gibt es eine gute Chance, dass dies im Grunde ist es. So stellte der Fotograf die Hälfte es zur Verfügung. Vielleicht mögen Sie dieses Bild wirklich und vielleicht ist es 1920 mal 1080. Ihr Kunde benötigt etwas Größeres und Sie können ihnen nicht etwas Größeres zur Verfügung stellen, als Sie stecken. So einfach ist es, diese Premium-Bilder zu verwenden. Und wirklich eine ganz einfache Sache, Breite und VO2-Elemente ist, zum Beispiel, wenn wir wählen, dieses Bild zu verwenden, und wenn wir wählen, große, weil ich bereits hier als Premium-Benutzer angemeldet bin, Ich kann einfach auf Download klicken. Tolle Wahl. Und Sie können hier in der linken Ecke sehen, mein Download wird sofort beginnen, sobald ich auf disconfirmed Download-Button klicke, und Sie können es direkt hier sehen. So fing es immer an, auf Eduardo-Elemente herunterzuladen. Für jede einzelne Ressource, die Sie am Ende auf und Watteau-Elemente verwenden. Sie können einfach auf Download klicken und dann müssen Sie wählen, welches Projekt Sie wollen. Also habe ich dieses Bankprojekt, aber zum Beispiel kann ich es als neue und Bankprojekte nennen. Ich kann dieses Projekt erstellen, und ich kann hinzufügen und Dialog. Und sofort habe ich eine kommerzielle Lizenz, die ich dann meinen Kunden geben kann. Und sie werden sich keine Sorgen darüber machen, dass jemand sie verklagt wegen der Verwendung dieses Bildes und so weiter, weil sie durch eine Lizenz abgedeckt sind. Ein Marketing über Bilder wirklich wichtig. Eine ist zum Beispiel, dass, wenn dieser Fotograf aus irgendeinem Grund sich entscheidet, auf Splash zu gehen, ich nicht nur diesen Fotografen wählen. Also zum Beispiel, diese, wenn sie sich entscheiden, aus unserem Spritzer zu gehen, unterhalten ihre Bilder nach unten. Sie verwenden immer noch ihre Bilder. Es gibt eine gute Chance, dass sie ihre Meinung später ändern und gehen von kostenlosen zu Premium-Bildern und am Ende verklagen Sie für die Verwendung dieser Bilder. Es gibt also immer den Tod. Während mit diesem einen diese Premium-Services lesen, haben Sie am Ende ein lizenzschriftliches Dokument, das Sie dann mit Ihrem Kunden teilen können, und dann ist Ihr Kunde wirklich abgedeckt, wenn einige dieser Leute versuchen, nach ihnen zu gehen, was nicht wirklich der Fall sein, während wir diese kostenlosen Ressourcen für Bilder, Mockups, Symbole, was auch immer freie Ressourcen, gibt es eine gute Chance, dass jemand das tun wird. Schließlich werde ich Bilder zeigen, die ich verwendet habe und das sind Premium-Bilder. Und Sie können hier sehen, wenn ich klicke, wie einfach diese zu arbeiten sind. Und Sie können sehen, dass Sie am Ende mit diesen Bildern ohne Farbe und diese mit Farbe. Wenn ich diese Vorschau schließe, sehen Sie die Adobe Illustrator -Typen. Sie können sehen, dass wir Dateitypen haben, Adobe Illustrator, EPS, PNG, SVG. Sie können sehen, dass Dimensionen, in die diese Symbole kommen, sie sind Vektor- und geschichtet. Wir haben kommerzielle Lizenz und Sie können klicken, um zu laden und sehen Sie weitere Informationen über kommerzialisiert. Aber im Grunde habe ich es bereits abgedeckt. Und Sie können sich immer an diese Person wenden und zum Beispiel nach benutzerdefinierten Symbolen gefragt haben. Sie können sie bitten, eine bestimmte Farben zu ändern, wenn sie etwas wie Komponenten haben , die in Illustrator oder innerhalb von x D oder innerhalb der Skizze integriert sind, was auch immer Werkzeug Sie verwenden, während es freie Symbole, Sie sind im Grunde stecken mit dem, was sie Ihnen geben. Ich bin, weil ich R, R von nur Symbol verwende . Wie Sie sehen können, haben sie 955 dieser Premium-Symbole. Und Sie können durch scrollen und alle Arten von verschiedenen Diensten sehen , für die Sie diese Symbole verwenden können. Sie können sehen, dass sie Startup-Ausbildung arbeiten von Heimnetzwerken, Sport und so weiter und so weiter. Und Sie können im Grunde Variation in diesen verschiedenen Icon-Packs sehen, um Sie noch einmal zu zeigen. Und wichtige Elemente ist im Grunde ein Abonnement-Service. Also, anstatt von der Schaffung von Markt alle einzelnen Elemente einzeln oder von UI Hilfe kaufen, können Sie ein Abonnement für diese Inverter-Elemente Website kaufen. Und Sie haben im Grunde unbegrenzte Downloads für ein Jahr und dann müssen Sie Ihr Abonnement in Schulden ein Jahr verlängern, können Sie so viele Artikel herunterladen, wie Sie möchten. Und Sie können sehen, Sie sind sogar mit Video bedeckt, Video-Vorlagen , auch mit Musik, Soundeffekte, eine Grafik-Vorlagen, Grafik-Präsentationen, Fotos, Schriftarten, Add-Ons, Web-Vorlagen und noch mehr Kategorien. So können Sie sehen, dass Sie 3D haben, Sie haben eBooks und Kurse. So können Sie gehen und Watteau Punkte plus n sogar in Ihrem Abonnement lernen. Also im Grunde haben sie alles abgedeckt. Und wirklich, wenn Sie nach der besten Ressource für Premium-Ressourcen suchen, Ich kann nicht empfehlen und Watteau Elemente genug. Ich habe auch einen YouTube-Kanal, also verwende ich am Ende Ressourcen aus Unterwasserelementen die ganze Zeit. Ich verwende Ressourcen für diese Kurse ist, dass Sie sehen können, und ich verwende sie auch für mein Geschäft. Also haben sie wirklich alle Grundlagen abgedeckt und sagen, dass es keine bessere Alternative zwei und lebenswichtige Elemente gibt. Also im Grunde ist das ein Wrap-up für dieses Video. Ich hoffe wirklich, dass ich alles abgedeckt habe und ich hoffe wirklich, dass ihr versteht wie wichtig es ist zu verstehen, welche Elemente ihr benutzt. Also noch einmal, wenn Sie kostenlose Artikel verwenden, sind Sie wirklich begrenzt mit dem, was der ursprüngliche Autor und Designer Ihnen zur Verfügung gestellt hat, vor allem mit Fotos. Ich habe bereits erklärt, dass Sie, wenn Sie Premium-Bilder verwenden, mit einer Lizenz abgedeckt sind. Du musst dir also keine Sorgen machen, dass dich jemand verklagt. Sie sind von ihrer Lizenz abgedeckt und Sie können diese jederzeit an Ihre Kunden vergeben, damit sie auch abgedeckt sind. Im nächsten Video, Ich werde Ihnen zeigen, wie ich am Ende Optimierung meiner Bilder, vor allem diejenigen, die ich dialoguing von einem Motto Elemente, weil, wie ich Ihnen gezeigt, Jarrod riesig. Also lassen Sie uns das überprüfen. Vielleicht kann ich zum Beispiel auf diesen klicken. Und Sie können sehen, es ist 6 Tausend mal 4 Tausend in Höhe und Breite. Daher ist es wirklich wichtig, diese Bilder für die Verwendung zu optimieren, vor allem, um Ihre Adobe XD-Datei so gering wie möglich zu halten, denn das wird dann einfacher für Ihren Computer zu arbeiten. Und es wird einfacher sein, es mit Ihren Entwicklern und Kunden zu teilen. Also sehe ich dich dort. 38. Optimierung deiner Bilder: Wenn es darum geht, Ihre Bilder in Ihrem Projekt zu verwenden, wie ich in einem vorherigen Video sagte, ist es wirklich wichtig, diese Bilder zu optimieren. Optimierung bedeutet wirklich, dass Sie tun können, können Sie das gleiche Bild verwenden, aber nur mit einer kleineren Dateigröße, was dann bedeutet, dass Ihr Computer nicht verzögern wird. Ihre XD-Datei wird kleiner sein. Ihre Vorschau für Ihre Kunden online wird schneller sein, da ihre Internetverbindung nicht alle diese riesigen Bilder laden muss. Und schließlich, für Entwickler, bedeutet das, dass Sie dann einfach diese optimierten Bilder senden können , weil sie diese Bilder auch am Ende des Tages optimieren müssen . Also, wenn Sie sie optimieren, wird es ihnen Zeit sparen. Teufel-Ladung dafür. Der Kunde wird es dafür lieben, weil das Projekt früher am Leben sein wird. Also verwende ich Windows und unter Windows verwende ich ein Tool namens Aufruhr. Und Sie können es genau hier sehen. Es bedeutet im Grunde ein radikales Werkzeug zur Bildoptimierung. Und was das bedeutet, ist, dass die gleichen Bilddaten verwendet werden, ist es nur kleiner zu machen. Also, um Sie in echtem Beispiel zu zeigen, sind dies die beiden Bilder, Premium-Bilder, die ich aus dem vorherigen Video heruntergeladen habe. Also hier ist diejenige, die ich für 20-20 heruntergeladen habe. Und wie Sie sehen können, ist es 55 00 in der Höhe und 3-6, 67 in, sorry, in 55 00 in der Breite und 3667 in der Höhe. Es ist also fast 6K ein Bild, und Sie können sehen, dass es 7,3 Megabyte groß ist. Alles, was Sie tun müssen, ist es einfach per Drag & Drop innerhalb dieses Top. Sie können sehen, dass es ein hochauflösendes Bild enthält. Angekommen kann solche Bilder verarbeiten, aber die Verarbeitung kann in dieser Situation ziemlich langsam sein. Wollen wir zuerst die Größe ändern, werden die Originalbilder nicht geändert. Was im Grunde bedeutet, dass es im Grunde im Prozentsatz nach unten skaliert wird. Also 100% halten Acts Seitenverhältnis und Sie können OK drücken. Sie können hier sehen, das erste Bild ist 7,3 Megabyte. optimierte Bild beträgt 1,8 Megabyte. So können Sie genau dort sehen, wie einfach das war, wie schnell das war und wie groß es war. Und das gab uns, Sie können sehen, dass die Qualität im Grunde unverändert ist. Und wenn ich hier rechts klicke, noch einmal 55 00 mit 3667, wenn es auf Speichern klicke, wird es dieses Bild ersetzen. Und dann, wenn ich noch einmal klicke, können Sie 55 003667731 in der Größe sehen. Und im Grunde muss ich es jetzt lokalisieren, wo es ist. Entschuldigung, es war die ganze Zeit auf meinem Desktop. Ich muss nur das Teil für die Akte überprüfen. Aber wenn ich hier eine Aktualisierung mache, können Sie 5000306, 6-7 sehen, aber jetzt 183, so wie es genau hier ist. Im Grunde genommen können Sie all diese massiven Bilder skalieren, sie kleiner machen, die Geschwindigkeit Ihres Adobe XD verbessern, die Computergeschwindigkeit verbessern, weil es mit diesen riesigen Bildern nicht zurückbleiben wird. Und im Grunde, was das bedeutet, wird viel schneller funktionieren. Lassen Sie mich Ihnen in einem weiteren Beispiel zeigen. Also dieses Beispiel stammt von der Einladung zwei Elemente. Und Sie können 54723648 sehen. Das sind also die Entschließung. Und Sie können Größe fast sieben Megabyte sehen. Wenn ein Drag & Drop es nach innen. Tun Sie dasselbe. Also ja. Ok. Sie können sehen, Anfangsbild war fast sieben, optimiert. Das Bild ist 1.32. Also, wenn ich auf Speichern, also denken Sie daran, fast sieben Megabyte. Machen Sie ein wenig wie eine Aktualisierung wie diese. Sie können sehen, es ist jetzt 1,32. Also wieder, die Dimensionen sind die gleichen. Die Auflösung ist die gleiche. Der hat gerade die Größe der Gesamtdatei gesenkt, indem er all diese Pixel kompromittierte und sie zusammenfasste und sie im Anfangsbild kleiner machte. So funktioniert die Bildoptimierung im Grunde. Wieder mal ein Aufruhr. Es ist ein kostenloses Werkzeug. Ich werde es auch in der PDF-Datei verknüpfen. Wenn Sie Mac verwenden, können Sie etwas wie Bild optimal verwenden oder Sie können einige zusätzliche Bildoptimierungs-Tools online finden , für die Sie bezahlen müssen. Aber Bildoptimum war immer kostenlos und Aufruhr war immer kostenlos unter Windows. Also, das ist es im Grunde für dieses Video. Im nächsten Video werden wir beginnen, indem wir die Welt diese Bilder in unsere Designs importieren. Ich werde Ihnen zeigen, wie Sie diese Bilder weiter optimieren können, indem Sie sie in XD noch kleiner machen und wie Sie diese Designs dann unseren Kunden präsentieren können. Also sehe ich dich dort. 39. Design erstellen: Lassen Sie uns jetzt voran und beginnen mit Dart entwickelt. Aber bevor wir tun und davon ausgehen, sah die beiden vorherigen Videos über Ressourcen, Lassen Sie mich einfach einen schnellen Vorbehalt hinzufügen, dass, weil eine Menge der Zeiten, wenn Sie entwerfen, die meiste Zeit dauert es tatsächlich, diese Ressourcen zu finden. So Bilder zu finden, Symbole zu finden, und es ist wirklich egal, ob Sie kostenlose oder kostenpflichtige Versionen verwenden. Sie werden immer noch am Ende die meiste Zeit nutzen, um diese Ressourcen zu finden. Deshalb sage ich dir, organisiere dich so. Es ist also viel einfacher für Sie, diese Ressourcen zu finden. Also, wenn Sie zum Beispiel Premium-Ressourcen verwenden, lassen Sie uns von Watteau-Elementen sehen, dann werde ich immer empfehlen, dass Sie in Ihrer Freizeit diese Ressourcen erkunden und sehen, wo Sie sich viel Zeit sparen können. Grundsätzlich können Sie Sammlungen erstellen, wenn Sie Bilder für zukünftige Projekte finden. Sie können Sammlungen benennen, die nur Ihre Geschwindigkeit verbessern , wenn Sie das nächste Mal mit dem Projekt beginnen. Also bedenken Sie all diese Dinge im Hinterkopf. Sie werden Ihre Zeit sehr nutzen, indem Sie einfach nur diese Ressourcen erforschen und finden. Dann tatsächlich das Design zu erstellen. Das ist am Ende des Tages, wirklich einfacher Teil. Wenn der Client bereits über alle diese Ressourcen verfügt und Sie sie nur verwenden, dann ist das in Ordnung. Es ist ein Traum für dich. Aber am Ende des Tages, Das ist wirklich nicht der Fall in der überwiegenden Mehrheit des Projekts. Nun, da das aus dem Weg ist, wenn ich Sie zurück zu unserer Projektdatei bringe, können Sie sehen, dass wir eine Website-Architektur haben. Wir haben Papier Wireframes, Wir haben eine Website Wireframes, und wir haben ein Dashboard Wireframe, aus dem wir später aufbauen werden, wenn wir auf die Gestaltung Teil der Schulden und Dashboard-Abschnitt bekommen. Also, um mit Dart-Design zu beginnen, was ich eigentlich tun werde, ist bewegen alle diese ein wenig nach oben. Also lassen Sie mich schnell Indies nach oben bewegen. Lassen Sie mich die hier nach oben bewegen. Lassen Sie mich diese auswählen und sehen, dass ich tatsächlich nur alle meine Flughäfen auswählen kann. Ich weiß nicht, warum es mir keine geschickte Option gibt. Mal sehen, vielleicht, wenn ich ihn so aussuchen kann. Nein. Ich weiß nicht, warum. Es gibt mir nicht die Möglichkeit, alle meine Kunsttafeln zu verschieben. Plötzlich, hier sind wir. Also müssen Sie shift verwenden und Sie müssen auf diese Namen klicken , um alle Ihre Flughäfen auszuwählen und sie zu verschieben. Und der Grund, warum ich das getan habe, ist, weil, wenn ich zurück in den Design-Modus, jetzt werden wir kopieren, jetzt werden wir kopieren,das sind Boards, die genau hier basieren. Und später werden wir ansprechendes Design machen. Dann können wir auch Punkte nach unten stützen. Sie können auch tun, ist, wie Sie sehen können, haben wir eine Menge leeren Platz hier. Sie können sie nebeneinander machen. Also lassen Sie uns sagen, dass ich Control D duplizieren kann, und dann einfach den ganzen Weg nach hier bewegen kann. Und dann kann ich mein Design erstellen, hier mein Dashboard und dann diesen Raum für Responsive Design nutzen. Es liegt also wirklich an dir, wie du das machen willst. Was ich tun möchte, ist tatsächlich auf dieses zu klicken. also auf unserer Homepage Halten Siealso auf unserer Homepagemeine Alt oder Option, und erstellen Sie dann einfach ein Duplikat davon, positionieren Sie es hier, und stellen Sie dann einfach sicher, dass ich es ein wenig nach unten positioniere. Ich werde hier klicken und diese Website anrufen. Design. Also, jetzt, da wir drei verschiedene Ströme haben. Denken Sie also noch einmal daran, Sie diese drei Flows mit Ihren Kunden teilen können, die Wireframes für Feedback freigeben können. Sie können es Dashboard für Feedback freigeben. Und schließlich können Sie Website für Feedback entwickelt teilen. Ich werde das Teilen später erklären. Und Sie können das Wissen, das Sie aus dem Anteil gewinnen, rückwirkend anwenden , indem Sie einfach diesen Lektionen folgen. Aber vorerst möchte ich die Dinge einfach halten und dich nicht weiter verwirren. Lassen Sie uns also mit unserem Website-Design beginnen. Wenn wir also viel näher heranzoomen, können Sie sehen, wie das aussieht. Und ich werde alle diese Seiten auch umbenennen, Design. So haben wir eine Homepage Design Konten Design und so weiter und so weiter. Nur weil, wenn wir diese Seiten später verbinden, wird es für uns viel einfacher zu verstehen sein. Ok, ich muss sie nur verbinden, um Abkürzung am Ende zu entwerfen. Also lasst uns anfangen. Das erste, was ich eigentlich tun werde, ist, an meinem Hauptnav zu arbeiten. Und um das zu tun, muss ich reinzoomen. Ich klicke darauf. Ich werde es in meinem Ebenenbedienfeld öffnen, gleich hier. Denn jetzt möchte ich eine Komponente aus diesem Hauptnav erstellen. Aber bevor ich es tue, möchte ich an meinem Login-Button arbeiten , weil das im Grunde wirklich einfach ist. Um eine Komponente zu erstellen, müssen Sie lediglich die Steuerungs- oder Befehlstaste drücken. Und Sie können sehen, dass es immer als Standardzustand angezeigt wird. Was ich dafür tun wollte, ist einfach einen Horus-Staat zu schaffen. So kann ich hier klicken, wo es UND Zustand steht. Sie können einen neuen Status oder einen Hover-Status hinzufügen. Ich werde Hover wählen, Qualität, Schweben. Und jetzt am Mai sagte Horace, was ich tun will, ist rein zu gehen. Klicken Sie hier, um es zu öffnen. Klicken Sie hier. Alles, was ich tun möchte, ist einfach die Farbe meiner Schaltfläche im Hover-Zustand zu ändern. Die Art und Weise, wie Sie das tun können, ist im Grunde zwei Dinge. So können Sie hier eine Farbe auswählen, oder Sie können andere Farben wählen und so weiter und so weiter. Sie können auch seine Größe ändern, wenn Sie auf den Mauszeiger bewegen möchten, Sie können die Farbe dieses Textes ändern und so weiter und so weiter. Ich will das nicht tun. Ich möchte die Dinge schön und einfach halten und ich werde diesen Schwebeeffekt während meines Wunsches verwenden , nur um Papageien zu halten, organisiert aussehen. Wenn ich Sie also zurück zur Vorschau bringe, klicken Sie hier. Und wenn es meine Vorschau öffnet, wenn ich schwebe, können Sie sehen, wie das aussieht. Es ist also wirklich schön und einfach, wirklich einfach, und es sieht wirklich gut aus. Okay, jetzt gehen wir weiter und gehen zurück zu unserem Hauptschläfchen. Was ich vor allem tun möchte, ist, einen Happoint für mein Logo zu erstellen. Tiefe Punkt ist im Grunde, wo Benutzer werden am Ende klicken später, um auf die Homepage zugreifen. Also von all diesen alten Seiten, so Konten gestartet Karten und so weiter. Wer auf die Homepage zurückkehren möchte , kann einfach hier klicken. Aber anstatt auf das Logo selbst zu klicken, werden Sie auf diese unsichtbaren Tap-Punkte klicken. Also geben wir ihm einen Namen, Logo, DAP-Punkt. Was ich tun wollte, ist die Farbe zu entfernen, entfernt die Grenze, so dass Sie es nicht wirklich sehen können, aber es ist immer noch da, weil es Fettleibigkeit ist bei 100% und es ist nur Funktionalität ist im Grunde passen Punkt. Und ich werde das etwas später zeigen, wenn wir anfangen. Mit der Erstellung all dieser. Also lassen Sie uns jetzt einen Selektor erstellen. Und Selektor wird hier unten auf dieser unteren Seite für das Konto gehen. Wenn ein Benutzer auf einige dieser klickt, wird der Selektor angezeigt, der zeigt, dass Sie tatsächlich auf eine dieser Seiten geklickt haben. Und um das zu tun, werde ich ein Rechteck verwenden. Und ich werde ein Rechteck wie dieses erstellen. Also mal sehen. Wir können es 112 mit acht geben. So ein wirklich intelligentes Rechteck. Und im Grunde möchte ich unsere Hauptfarbe erstellen. Also werde ich wählen und entdecken. Und mal sehen, für den Eckenradius kann ich so etwas wie fünf verwenden. Ich denke, es funktioniert gut ohne Grenzen. Ich kann es so an der unteren Kante positionieren. Und ich kann auch sicherstellen, dass es die Größe des Textes selbst ist, so. Positionieren Sie unter allen unseren Artikeln, Qualitätsauswahl. Und was ich tun werde, ist die Fettleibigkeit von ihm. Also traf 02 mal so. Und lasst mich die Fettleibigkeit meines Gitters ein wenig senken , damit ihr es ein bisschen besser sehen könnt. Jetzt, wo wir all das haben, haben wir unseren Knopf, wir haben unser Logo. Wenn ich doppelklicken, können Sie sehen, dass wir haben, diese beiden Zustände sind standardmäßig grau für unser Logo. Wir haben Horace Zustand für unseren Knopf. Jetzt kommt es an der Zeit, unser Hauptnav als Komponente selbst zu erstellen. So können Sie einen Fehd-Kontrollschlüssel auswählen, um eine Komponente zu erstellen. Und was wir eigentlich tun werden, ist, verschiedene Zustände zu schaffen. Also, um verschiedene Zustände zu erstellen, was ich tun werde, ist hier klicken neuen Zustand und nennen Sie es Konten. Wenn wir also auf Standardzustand sehen können, haben wir nichts ausgewählt. Aber wegen, dieser Selektor wird genau hier erscheinen. Und wir werden tatsächlich den Namen des Accounts Text in diese Farbe ändern , nur so dass wir angeben können , dass dies ausgewählt wird, wenn ich es auf den Vollbildschirm nehme. So können Sie sehen, wie das aussieht. Sie können sehen, dass es viel sauberer ist und es ist viel offensichtlicher jetzt, dass wir den Selektor haben und dies die Farbe geändert hat, dass dies tatsächlich ausgewählt ist. Also können wir jetzt weitermachen und zurück zu hier gehen. Ich kann diesen Klick schließen, um einen neuen Status hinzuzufügen. Und dieser Zustand wird als gehört bezeichnet werden. Und beim Start, was ich tun werde, ist, dass ich einfach auswählen kann. Sie können sehen, dass diese Farbe ausgewählt ist. Also 495463 für alle von ihnen, das ist diese Farbe. Und wenn ich Sie zurückbringe, können Sie sehen, dass wir Kredite haben. So jetzt Sehnen wird in dieser Farbe sein und Konten wird in verfärbt sein und Kontrolle halten, um auf verschiedene Elemente klicken. Und ich werde auch den Selektor hier verschieben. Und ich bin auch eine reduzierte Größe, um meine Darlehen Text passen. Also im Grunde, so funktioniert das. Klicken Sie auf, um einen neuen Status hinzuzufügen, nennen Sie es Karten. Und Sie können sehen, dass dies im Grunde dieser sich wiederholende Zustand ist, aber Sie müssen es wirklich tun. Und du musst es nur einmal tun, was großartig ist. Und später, wenn Sie beginnen, all diese verschiedenen Zustände aus der neuronalen Navigation auszuwählen , wird es viel einfacher und viel sauberer. Das wird investieren. Also wählen Sie unsere Investitionen, verwenden Sie diese Farbe Silica-Karte, verwenden Sie diese und bewegen Sie unsere Auswahl zwei hier und zwei hier, so dass es wirklich gut passt. Und Endzustand für unser Navi ist digital. So wie das. Ich wähle digital aus. Gehen Sie genau hier, wählen Sie diese Farbe, Investoren wählen diese Farbe. Bewegen Sie das hier, erhöhen Sie zwei hier, und da haben wir es. Wir haben unser Hauptnav abgeschlossen. Also, wenn ich zwischen meinen Zuständen wechseln oder mich schließen lassen, damit Sie es ein wenig besser sehen können. Also, wenn Sie gehen Default State vino haben etwas, Konten, Kredite, Karten, investieren, und digital. Wir werden natürlich mit dem Standardzustand beginnen. Und der Standardstatus wird sich auf der Homepage befinden. Aber für jede dieser Seiten wird es zwischen all diesen verschiedenen Seiten ändern, n Namen. So haben wir heutzutage das abgeschlossen. Gehen wir zum Heldenbereich unserer Website. Und ich werde dem einen Namen geben. Also werde ich es neue Bank nennen oder ein neues Zeitalter wie das. Und ich werde auch meinen Text ein wenig neu organisieren. Also mal sehen. Ich kann ihm zum Beispiel einen Abstand von einer Umdrehung geben, ich denke, es wird gut funktionieren. Ich werde bei 50 sein. Also verschieben 1-2-3-4-5. So wie das. Ich werde den Text hier kopieren und einfügen. Und ich werde das immer noch behalten. Erfahren Sie mehr über die Schaltfläche. Und mal sehen, es ist bei 60, wird dies auf 70 erhöhen, so. Und mal sehen, lernen Sie mehr Texte können 24 unregelmäßig und weiß sein. Und ich werde auch hier positionieren. Und lassen Sie uns für unseren Hauptknopf für den Login sehen, ich denke, es wird gut mit 60 funktionieren und ja, lassen Sie es bei 60 behalten, weil es ein bisschen kleiner ist und es passt genau hier, aber das ist unser Hauptknopf. Es wird auf unserer Website gesehen werden. Also lasst es uns vorerst dort behalten. Also mal sehen, wir können diesen Knopf auf 50 positionieren, und das ist bei 50. Anstatt mehr zu erfahren, werde ich es Haupttaste nennen. Also meine BTM so. Und was ich auch tun werde, ist eine Komponente zu erstellen. Also drücken Sie die Steuerungstaste, Standardzustand, haben wir. Nicht anstelle des neuen Status, klicken Sie mit der rechten Maustaste, um zu löschen, ich werde Horace Status wählen, es schweben nennen und im Grunde das gleiche erstellen, was ich für das obere Navi getan habe. Also werde ich nur in dieser Farbe so verwenden. Wo Sie zurück zum Standardzustand gehen, drücken Sie die Vorschau, nur um zu sehen, wie das aussieht. Also hier haben wir einen Hover, und hier haben wir auch einen Hover. Also denke ich, das sieht gut aus. Was ich als nächstes für diesen Text tun werde, wird Stack verwendet. Ich behalte es auch so und ich benutze Stack für später weil es für mich viel einfacher sein wird, an responsivem Design zu arbeiten. Ich werde das etwas besser von hier nach hier ausräumen, diesen und den Text auswählen, sicherstellen, dass der Text in der Mitte ist. Löschen Sie das, und das ist es im Grunde. Jetzt können Sie sehen, dass alles beginnt, Gestalt anzunehmen. Jetzt sieht alles viel besser aus. Und das nächste, und der nächste Schritt, den ich machen werde, ist im Grunde ein Bild zu bringen. Ich verwende ein PNG-Bild für dieses. Also im Grunde ist dies das Bild von invertierbaren Elementen. Und alles, was ich getan habe, ging ich in Photoshop und ich schneide alle diese Ecken aus und exportierte es als B und G, was im Grunde bedeutet, dass das Bild keine Hintergrundfarbe oder Hintergrundfarbe darauf hat. Jetzt, da ich das getan habe, kann ich es im Grunde so positionieren, wie ich will, vielleicht so etwas. Ich denke, es funktioniert gut. Und Sie können bereits beginnen zu sehen, dass wir jetzt dieses Website-Design beginnen, Gestalt anzunehmen. Was ich als nächstes tun werde, ist ein paar Formen zu erstellen. Um das zu tun, werde ich zum Beispiel meinen Bleistift verwenden. Klicken Sie auf, klicken Sie, halten Sie und klicken Sie dann zum Beispiel rechts hier, drücken Sie Escape. Und was ich tun werde, ist eigentlich eine Kesselfarbe von Grün zu wählen. Also werde ich diese Farbe wählen. Und ich werde die Größe meiner Grenze auf zehn erhöhen. Ich werde auch um das Lager herum. So ist es schön und rund. So können Sie sehen, wie das aussieht und Sie können es offensichtlich neu positionieren, wo immer Sie wollen. Ich glaube, es sieht vorerst gut aus. Wir werden es erst ein bisschen später verschieben. Ich kann es eine Linie oder einen Teil nennen. Wie auch immer Sie wollen. Ich werde offensichtlich innerhalb unseres Helden positionieren und mein Bild hinter meinen Decks bewegen, das legen, und ich werde auch meine Linie hinter den Text bewegen. Das nächste, was wir tun werden, ist einen Kreis zu schaffen. Und ich werde etwas wie, ich weiß nicht, 70 mal 70 zum Beispiel verwenden . Ich denke, das wird gut funktionieren. Vielleicht 80 mal 80, nur um uns ein bisschen mehr Platz zu geben. Ohne Feld. Ich werde die gleiche Farbe für unsere Grenze verwenden. Also dieser hier. Und für die Größe Kopfsteinpflaster verwenden Sie zehn. Also, um das Gleiche wie diese 11 zu behalten, letzte Sache, die ich tun werde, ist meinen A-Line-Song zu verwenden . Wenn ich ein Rechteck verwenden soll, möchte ich ein Kreuz wie dieses erstellen. Ich kann das in zehn bringen und geben wir es, zum Beispiel, San Juan nicht heiraten 15 mit 80. Ich denke, das wird gut funktionieren. Ich werde es so drehen. Drücken Sie die Kontrolle D, drehen Sie sie um. Klicken Sie also direkt hier. Und ich werde diese beiden auswählen , sie zusammenführen und dann die Grenze entfernen. Und für die Füllfarbe verwende ich diese. Und im Grunde kann ich es jetzt umdrehen. Ich kann es dort positionieren, wo ich will. Und zum Beispiel werde ich es hier behalten, während ich das so genannte kleine bisschen tiefer halte. Und das ist nur eine Art der Bank in der Zeit mit diesen minimalen Designs und zerstückelt und Designs und so weiter. Also jetzt ist das letzte, was ich für den Helden tun werde, tatsächlich fügen Sie eine Hintergrundform. Und um diese Hintergrundform hinzuzufügen, werde ich eigentlich meine mentale verwenden. Also gehen wir zurück zu den Schichten Gürtel. Nennen wir dieses Kreuz. Es nennt sich dieser Kreis. Und ich werde all diese Gruppen gruppieren, ihn einen Helden nennen. Elemente. Hinter meinem Text positioniert. Und ich werde hier klicken. Dann klicken Sie hier, und verwenden Sie einfach mein Stift-Werkzeug, um diese Form Boden beginnen von hier zu erstellen, zum Beispiel. Und klicken Sie einfach hier. Tut mir leid. Mein Handy wurde aus irgendeinem Grund verrückt. Also klicken Sie hier, dann klicken Sie hier, und dann können Sie diese erweitern. So können Sie hier klicken, vielleicht hier, und hier. Dann können Sie Shift halten, bis diese Zeile angezeigt wird, was im Grunde zeigt, dass Sie schließen und Scheibenform so geformt. Und Sie können natürlich mit diesen spielen, so dass Sie direkt dort klicken können, Sie können es reorganisieren. Wenn Sie darauf doppelklicken, erhalten Sie diesen externen Teil. So kannst du damit noch mehr so herumspielen. Und Sie können diese natürlich neu positionieren, wie Sie wollen. Sie können den Winkel dieser Ankerpunkte ändern und sie beliebig erstellen. Also in diesem Fall werde ich das nur ein wenig senken. Vielleicht positionieren Sie das hier. Weil ich nicht möchte, dass es MyText blockiert, weil Text offensichtlich viel wichtiger ist. Dann diese Hintergrundform, mit der du herumspielst. Und ich kann auch hier doppelklicken und hier positionieren und dann noch einmal doppelklicken. Wenn ich diese Form ein wenig weiter ändern möchte, so dass Siegel so. Und jetzt, wo ich damit fertig bin, kann ich hier natürlich positionieren. Und es ist immer irgendwie schwierig mit diesen Formen, weil Sie immer das bestmögliche Ergebnis erzielen wollen , ohne zu viel Zeit zu verschwenden. Aber es kann immer ein bisschen kniffliger werden, als Sie dachten. Schließlich, was wir tun werden, ist, dass ich das hier ein bisschen positionieren werde. Und wie Sie sehen können, haben wir so seltsam. Form. Also werde ich auf meinen Teil doppelklicken. Und ich werde das einfach tun, damit ich es verbinden und verteilte nur ein wenig besser erstellen kann . Aber das ist wirklich egal, denn was wir verwenden werden, ist ein linearer Farbverlauf. Also für unseren Gradienten und wann ich meinen Hintern und Last wählen soll, bleiben Sie auf der Oberseite für jetzt. Was ich tun werde, ist die Grenze zu entfernen, fügen Sie die Füllung klicken Sie hier. Anstelle von einfarbiger Farbe werde ich einen linearen Farbverlauf verwenden. Und für meinen dunkleren Punkt, haben Sie sehen, es ist da unten. Ich werde es drehen. Also werde ich Marie es so positionieren. Und dann werde ich das nach oben bringen. Es spielt Dinge an mir aus irgendeinem Grund. Aber lassen Sie uns die Farbe für jetzt einschließen und dann können wir damit ein bisschen später spielen. Also für die hellere Farbe werde ich die Fettleibigkeit auf 0 senken. Für diese dunklere Farbe werde ich einfach diese Farbe auswählen. Und jetzt, da wir unseren Farbverlauf haben, können wir ihm natürlich einen Namen geben. Also nennen wir es Hiroshima, so. Und ich werde es direkt unter unser Bild verschieben, damit Sie sehen können, wie das aussieht. Und wenn Sie nicht mögen und Schreibtisch einrichten, können Sie offensichtlich diese morbide ändern. Und Sie können auf diese eine Position klicken und sie organisieren, wie Sie wollen. Aber wenn Sie nicht mögen, wie das aussieht, können Sie offensichtlich hier Claire, dann können Sie die neu positionieren und ich weiß nicht warum. Es schickt mich aus irgendeinem Grund den ganzen Weg hierher. Aber offensichtlich können Sie mit ihnen herumspielen und Sie können direkt dort klicken und senkte die Fettleibigkeit dieses. Wenn es denkt, dass es für so etwas zu dunkel ist, lassen Sie es bei 40% so bleiben. Und ich denke, das sieht viel besser aus. Ich mag diese Form hier immer noch nicht. Also, wenn ich auf meinen Helden klicke, werde ich mich Bild verstecken, nur so dass ich es bekommen kann. Ich mag immer noch nicht, wie sich das herausstellte. Ich denke, es ist jetzt besser. Und Sie können immer zurückgehen und es ändern, wenn Sie es nicht mögen, und so weiter. Also, das ist es im Grunde für den Helden. Eine letzte Sache, die wir tun wollen, ist, einen Kreis hinter ihnen hinzuzufügen. Und um diesen Kreis hinzuzufügen, was ich eigentlich tun werde, ist meine Lippen zu benutzen, um die Umschalttaste zu halten. Erstellen Sie meine Kreisposition. Es ist irgendwo hier, weil ich eine Art Einheit zwischen Benutzern und einer Bank schaffen möchte. Und jüngere Menschen stehen hier im Fokus. Also positionieren Sie sich hier herum. Ich werde es Heldenkreis nennen. So wie das. Positionieren Sie es hier. Jetzt werde ich die Grenze entfernen. Ich werde die gleiche Füllfarbe einschließen. Und jetzt werden wir mit Hintergrundunschärfe herumspielen. Also klicke ich auf meine Hintergrundunschärfeoptionen. Ich gebe die 50 und gebe diese 50, gib diese Acht. Und jetzt können Sie es genau dort im Hintergrund sehen, besonders wenn ich diese entferne. Es ist also wirklich, wirklich, wirklich spät, aber wir werden noch mehr damit spielen. Also hier ist unser Kreis, wir haben ihn genau hier. Was wir tun können, ist tatsächlich die Fettleibigkeit zu erhöhen. Also lassen Sie es uns behalten, mal sehen, um zehn Uhr, ich denke, es ist gut. Vielleicht 12. Ja, ich bin mit diesem Ergebnis zufrieden. Was ich als Nächstes tun werde, ist mein Held BG zu duplizieren. Also Hit Control D. Ich werde es direkt über meinem Helden so genannte positionieren. Ich wähle beide aus, drücke Shift Control M oder Shift Command sie auf einem Mac, um eine Maske zu erstellen. Und ich nenne es Moschus. Und was das tut, ist im Grunde den unteren Teil unseres Helden zu maskieren. Wenn Sie also auf den Helden klicken, können Sie sehen, wie das aussieht. Sie können diese Heldenform natürlich noch mehr mitbringen , wenn Sie einfach hier klicken möchten. Aber jetzt lassen wir es einfach dort liegen. Und das ist es im Grunde. Das ist unser Heldenbild vollendet. Wenn Sie hier für die Vorschau klicken, können Sie sehen, wie diese Vorschau aussieht. Ich finde, es sieht gut aus. Und nun gehen wir zu einigen anderen Abschnitten unserer Website über. Also für diese Oberfläche, was wir tun werden, ist, dass ich tatsächlich diese Hauptkomponente erstellen werde. Und dann gehen wir weiter und kopieren und fügen Sie es in andere Komponenten ein. Also, was ich zuerst tun werde, ist, dass ich den Text kopieren und einfügen werde. Ich schätze. Ich werde die echte Kopie verwenden, die ich sowieso verwenden werde. Und was ich tun werde, ist auch mein Symbol enthalten. Also werde ich mein Symbol hier fallen lassen. Und ich werde es 40 aus meinen Texten positionieren. Also 1234, ich werde dieses Sternsymbol entfernen. Und ich werde es auch zur Hauptkomponente machen, es lokal machen. Also werden wir diesen Inhalt aktuell nennen, so. Und was ich als nächstes tun werde, ist im Grunde zwei Zustände zu schaffen. Was wir also tun werden, ist die Formen unseres Helden zu benutzen. Also diese drei Formen, und wir werden einen Kreis benutzen. Also lasst uns gehen und auf unseren Helden klicken. Verwenden, mal sehen, wo sie sind. Heldenelemente. Ich werde alle drei kopieren. Schließen Sie das alles. Zoomen Sie hier, drücken Sie Control V und ich werde hineinspringen und alle auswählen. Positioniert sie in der Mitte, damit ihr sie besser sehen könnt. Also, was ich tun werde, ist, mein Kreuz hier oben zu positionieren. Zum Beispiel, positionieren Sie meine Linie irgendwo hier herum. Positionieren Sie diesen Kreis irgendwo hier. Wenn Sie Steuerelement D drücken, um die Größe dieses zu duplizieren und zu erhöhen. Stellen Sie sich hier irgendwo hin. Und was ich tun werde, ist, sie Elemente zu nennen. Ich dupliziere den Wagen VG, positioniere ihn innerhalb meiner Elemente und genau hier. Also musste ich im Grunde dasselbe sein wie wir es mit dem vorherigen gemacht haben. Also werde ich Shift Control M zu Maskottchen halten, Qualität Maske. Und was ich endlich tun werde, ist für all diese Elemente, ich werde sie einfach warten lassen. Also werde ich einen weißen Rahmen für die Linie eines verwenden auch weißen Rand verwenden. Und schließlich, für das Kreuz, werde ich einfach weißen Kragen wie diesen verwenden. Und das ist im Grunde, was ich tun werde. Zunächst einmal werde ich sie hier in den Hintergrund stellen. Hit 02 mal. Und das alles habe ich getan. So, jetzt kann ich eine Komponente drücken Steuerungstaste für die Content-Karte erstellen. Und ich werde auf neuen Zustand klicken, der im Grunde Farbe ist. Tut mir leid, ich brauche Hover State, nicht News-Date. Also nenne ich es Schweben, so. Und auf schweben, was ich tun werde, ist, den Wagen Vg zu benutzen und es zu dieser grünen Farbe zu machen. Stellen Sie meine Elemente frei. Und aber ich werde die Fettleibigkeit von ihnen senken. Also mal sehen. Zum Beispiel, ich kann sie hinunter zu, mal sehen, ich weiß nicht, 10, 20%. Mal sehen, wie das funktioniert. Ich finde, es sieht gut aus. Und was ich auch tun werde, ist, sie ein wenig neu zu positionieren einige von diesem Jahr und NormDis hier vielleicht sogar drehen das ein wenig und positionieren. Ich werde auch dieses Symbol verwenden. Und ich werde meine Farben solide C verstecken, wo es, es eher sie sind. Also mal sehen, p sub t. Ich muss nur sehen, wo diese Farben sind. Hier sind sie. Also werde ich Laura diese runter. Das sind also die Farben der Symbole wie diese. Und ich werde es auch nach oben bewegen. Mal sehen, 12, nein, zehn Pixel. Ich denke, es wird gut funktionieren. Jetzt für diese Personnels Konten, Ich mag diese Farbe nicht, also werde ich sie auf Plattenfarbe wechseln. So wie das. Ich werde eine lernen mehr ND-Pfeil ändern. Und ich werde auch Arrow 20 Pixel so bewegen. Ich glaube, das ist alles. Wir werden diesen Text verlassen, wie es Content-Karten ist. Also, das ist im Grunde das gleiche, wird in den Standardzustand zurückkehren. Sie können sehen, wie es aussieht. Und wenn wir Preview drücken, scrollen Sie nach unten. Wenn wir schweben, können Sie sehen, wie das aussieht. Es geht offensichtlich viel zu schnell. Also werden wir die Schulden ändern und zum Prototyp gehen. Und genau hier sehen wir bereits, dass wir schweben oder zu animieren ist in, out. Und geben wir ihm eine Dauer von 0,06 Sekunden. Gehen Sie zurück zum Design. Drücken Sie die Vorschau. Entschuldigung, es wird immer wieder auf meinem anderen Bildschirm gestartet. Wenn ich schwebe, kannst du sehen, wie das aussieht. Ich mag den Hintergrund immer noch nicht. Was ich jetzt tun werde, ist, dass ich in meinen Standardzustand zurückkehren werde. Ich werde Karte BG duplizieren und es Farbe oder aktuelle Farbe nennen. Und ich werde es in dieser Farbe im Standardzustand geben, aber ich werde die Fettleibigkeit auf 0% senken. Und jetzt, wenn wir in den Schwebezustand gehen, ist er immer noch da. Es wird zu 100% sein. Aber eine Karte bg Farbe wird diese Farbe sein. Oder ich kann einfach hier klicken. Und was das tun wird, ist, dass es uns einen viel besseren Übergang ermöglicht. Wenn wir also schweben, können Sie sehen, wie glatt es jetzt ist. Und Sie können sehen, wie toll Belüftung aussieht. Was ich immer noch nicht mag, ist dieser Name, also personalisierte Konten in diesem Fall, ich möchte, dass er verfärbt wird, damit er die Farbe nicht so ändert. Also gehe ich zum Standardstatus klicken Sie hier, und ich werde diese Farbe auswählen. Und lassen Sie uns eine letzte Vorschau machen. Wenn Sie also nach unten scrollen, können Sie sehen, wie das aussieht. Es sieht also alles ziemlich schön aus. Nun, was ich als nächstes tun werde, ist tatsächlich diese Content-Karte dupliziert , damit ich fortfahren und diese Elemente machen kann. Also, wie kann ich das tun? Ich kann einfach hier klicken, diesen löschen, hier klicken und diesen löschen. Und ich kann zusätzliche untergeordnete Komponenten erstellen. Ich kann meine alte Warteschlange halten, klicken und ziehen, um eine Kopie zu erstellen. Und ich kann auch Alt halten und ziehen, um eine weitere Kopie wie diese zu erstellen. Und jetzt kann ich das ändern, aber bevor ich es tue, möchte ich sie einfach bestellen. Und Sie können sehen, dass dies Hauptkomponente ist und Diamant voll ist. Nun, diese beiden sind abgehalten und Sie können sie auch hier sehen. Und das sind untergeordnete Komponenten. Also zuerst, lassen Sie uns einige Texte ändern, so dass Sie den Text auf beiden Hauptkomponenten ändern müssen, sorry, an Bord Standardzustand und Hover-Zustand. Also werde ich es hier ändern. Wechseln Sie zum Standardstatus zurück, und doppelklicken Sie, um ihn einzufügen. Ich gehe auch in den Horace-Staat, der dort sitzt. Und lassen Sie mich schnell voran und ändern Sie den Text dieser Runde eins. So wie das. Ich werde zu den Horrorstaat-basierten Schulden gehen und mal sehen, ich bastelte ihn aus irgendeinem Grund nicht hinein. Jep. So wie das. Sieht toll aus. Und schließlich wähle ich das für meinen Horrorzustand aus. Und jetzt endlich kann ich zurückgehen und Symbole für diese ändern. Um dies noch einmal zu tun, können Sie Ihre Symbole verwenden, damit ich mein Symbol aus meinem Originaldokument hier kopieren und einfügen kann . Ich werde es an Ort und Stelle positionieren. Solver hier, damit Sie sehen können, dass es 40. Ich werde das Original löschen und ich werde mit der rechten Maustaste klicken. Und tut mir leid, nicht hier, aber hier. Klicken Sie mit der rechten Maustaste auf Und was ich auch tun kann, ist eine andere für unsere dritte zu wählen. Damit ich es öffnen kann. Positionieren Sie es an Ort und Stelle. So wie das. Mal sehen, wie weit wir das sind. Wählen Sie dieses Werkzeug aus, stellen Sie sicher, dass es ausgerichtet ist. Löscht das Original, Gold zurück hier, mit der rechten Maustaste kann Klocal. Und jetzt kann ich mit ihnen herumspielen. So kann ich auf diesen klicken, zum Hover gehen. Aber bevor ich das tue, kann ich direkt dort klicken und mein Icon kopieren. Dann geh zum Schweben. Öffnen Sie Kit-basiert, positionieren Sie es an der gleichen Position. Gelöscht das Original, und dann gehen Sie hier und suchen Sie meine Farbe. Also lassen Sie mich schnell sehen, dies ist ein Problem mit nicht nur diesem Symbol zurück, aber mit der Mehrheit aller dieser Elemente werden Sie am Ende mit einer Zeile ist, dass Leute ihre Elemente nicht nennen, wie sie sollten. Und deshalb nenne ich wirklich gerne alle meine Artikel. Also nicht nur ich, sondern alle anderen Designer. Und Sie können sehen, dass in unseren Produkten, die wir auf web donut.net verkaufen, Sie können sehen, dass wir immer oder alle unsere Artikel benannt haben, alle ungeraden Schichten so weiter genannt. So können die Leute sie finden und sie so organisieren, wie sie wollen. Schließlich, was ich tun möchte, ist doppelklicken Sie hier, nennen Sie es maßgeschneiderte Dienstleistungen, nur um es ein Gewürz zu geben. Und jetzt können wir Vorschau treffen, nur sehen, wo wir im Moment sind. Also haben wir hier schweben, hier schweben wir haben diese schöne Hintergrundform mit einem Kreis, nettes Paar. Und du siehst, wenn ich anfänge zu schweben, wie das alles aussieht. Stellen Sie einfach sicher, dass Ihr Text da ist. Und es funktioniert damit. Also, das ist es im Grunde für diesen Abschnitt. Wir haben diesen Abschnitt Wissen Arbeit in diesem Abschnitt abgeschlossen. Also, wenn wir zoomen nur ein wenig und Sie können diesen Abschnitt hier sehen. Und alles, was ich hier tun wollte, ist, mein Bild zu importieren. Also kann ich ein Bild wie dieses verwenden. Vielleicht, mal sehen, vielleicht kann ich doppelklicken und es nur ein wenig zur Seite positionieren. Und Sie können immer, sie werden gedrückt halten Shift, Alt und Linksklick, um es zu erhöhen. Wenn Sie möchten, können Sie die Umschalttaste gedrückt halten und mit der linken Maustaste klicken, um sie auf eine Seite zu vergrößern, je nachdem, welche Seite Sie möchten. Und Sie können immer, wie gesagt, Shift alt und Linksklick, um es in allen Seiten zu erhöhen. Und Sie können es auch nach links und rechts bewegen, wie Sie wollen. Also für den Text selbst, lassen Sie mich ihn kopieren. Es wird also Jugendwochenfestival genannt. Und mal sehen, ich werde das hier geben. Und das letzte, was ich tun werde, ist, diesen Knopf zu entfernen. Denn jetzt haben wir unseren Knopf hier. Ich bringe es von hier her. Oder du kannst auch zum Heldenbereich gehen und ihn von dort benutzen. Also gehen Sie zu den Texten, meinen Knopf, drücken Sie Control C. Gehen Sie zurück, er würde V kontrollieren und Sie können sehen, dass es eine untergeordnete Komponente ist. Also, was ich tun werde, ist bei 40 positioniert. Stellen Sie sicher, dass das 40. Also, was ich tun werde, ist einfach in die Mitte zu positionieren und es einen Tag zu nennen. Ich kann diesen Farbtext auch gruppieren. Und ich kann auch einen Stack erstellen, nur so dass ich später als reaktionsschnell daran arbeiten kann. Wie gesagt, wenn Sie es wechseln möchten, können Sie es einfach mit einem einzigen Klick tun. Als nächstes gehen wir weiter und arbeiten an diesen. Also im Grunde, diese hier sind ziemlich einfach und ziemlich ähnlich. Alles, was ich getan habe, ist, dass ich unsere Komponente aus einer von ihnen erstellt habe und dann eine andere hier erstellt habe. Sie müssen also die Komponente nicht erstellen, wenn Sie nicht möchten. Aber ich wollte einfach nur eine erstellen, weil ich finde, dass es viel einfacher wird, sich an Komponenten anzupassen. Und Sie können immer verschiedene Zustände für diese Komponente erstellen, zum Beispiel für reaktionsschnelle Rezitationen. Das ist also, wo das nützlich ist. Also werde ich das hier neu positionieren. Klicken Sie auf, löschen Sie diesen. Und ich werde auch hier reinspringen und löschen und Schreibtischknopf Kind Control V nahm basierend auf unserem Amin-Button , den wir gerade mit 40 erstellt haben, also 1234. Und was ich tun werde, ist die Steuerungstaste drücken, um eine Komponente namens Big Card zu erstellen. Ich werde das ein wenig nach unten bewegen und einen Turm auf meinem Bild zuerst. Also werde ich mein Bild per Drag & Drop drinnen. Doppelklicken Sie, halten Sie die Umschalttaste gedrückt, um sie wie diese Verschiebung zu positionieren, alle zehn Linksklick können hier so positionieren. Und schließlich kann ich mein richtiges Exemplar so reinbringen. Und jetzt, da das abgeschlossen ist, kann ich einfach Alt halten und eine Kopie davon direkt hier positioniert machen. Öffne es und ich ziehe ein neues Bild hinein. Ich werde auch Text kopieren und einfügen , der so dorthin gehen wird. Und jetzt ist diese Phase abgeschlossen. Also, wenn ich hier klicke, haben wir all das getestet. So funktioniert es schön und einfach. Sie können sehen, dass dieser Hover-Effekt auch funktioniert. Das funktioniert, und das funktioniert. So haben wir überall den gleichen Hover-Effekt. Und deshalb haben wir es so geschaffen, dass wir es immer wieder in unserem Design nutzen können . Also schließlich, was wir tun können, ist neue Komponenten für diesen letzten Zustand zu erstellen. Und was ich tun werde, ist reinspringen und dasselbe tun. Also werde ich diese löschen. Ich werde hier reinspringen und die Steuerungstaste drücken, um es als Komponente zu erstellen. Und ich werde einfach diesen Text hier hinzugefügt. Also mal sehen. Das einzige, was ich wirklich tun möchte, ist einen Hover zu erstellen und diesen Pfeil zu bewegen. Also lassen Sie uns das wirklich rückgängig machen. Also drücken Sie Control Z und fügen wir es zuerst hinzu, die Informationen, die wir hier haben. Also werde ich mein Bild per Drag & Drop drinnen. Ich werde ihm einen Textnamen geben. So wie das. Datum kann bleiben, wie es Abstieg Unschärfe mehr basiert, kann bleiben, wo es ist. Das ist es im Grunde. Und jetzt kann ich voran gehen und einen Horror-Stand erstellen, der den Schlüssel für meinen Horrorzustand kontrollieren würde , den ich Hover nennen werde. Offensichtlich möchte ich nur meinen Pfeil bewegen. Also Shift 12k, und das ist es im Grunde. Also, als nächstes werde ich tun, ist die Alt-Position hier. Alt positionieren Sie das hier. Und jetzt müssen wir diese für die Hauptkomponenten sowie für Sofa Mittel Datum bearbeiten, sowie Florida heuristische wie diese. Und das hier. Und erfahren Sie mehr, weil wir auf dem Hover sind. Mal sehen, ich kann das herbringen mein neues Bild klingeln. Also im Grunde, was ich tun kann, ist, all diese auszuwählen, die sie kontrollieren würde. So gehen Sie zurück zu meinem Standardzustand, wählen Sie alle aus und löschen Sie. Er würde Kontroll-V und positionieren sie heilen. Wenn ich also jetzt zwischen meinem Hover und Standard umschalte, sieht das Belüften so aus, wie es sollte. Nun, gehen wir zu unserem dritten und lassen Sie uns die ein bisschen organisieren. So diszipliniert, Karte drei, Auto und eins zu sein, und das wird Karte sein, um offensichtlich so zu sein. Also auf dem Auto drei und lassen Sie uns dies in einen Standardzustand bringen. Auf der Karte drei. Was ich tun kann, ist dieses Bild zu ändern. Ich werde diesen Text ändern, diesen Text ändern, diesen Text ändern. Und schließlich, im Horrorzustand, lasst uns zuerst vorgehen und das kopieren. Wechseln Sie zum Standardstatus. Löschen und Einfügen. Und jetzt wechseln wir zwischen Horace Status und Standardstatus Bearbeitung bleibt genau gleich. Also sind wir hier in unserem Staat. Und das ist es im Grunde. Ich werde noch nicht an einer Fußzeile arbeiten. Ich werde es so lassen, wie es vorerst ist weil ich Ihnen das etwas später zeigen werde. Wenn wir tatsächlich zu diesen Seiten kommen, wie Sie daran arbeiten und wie Sie es ändern können. Und dann können Sie eine Komponente in jeder Phase des Entwurfs erstellen und dann darauf zurückgehen und daraus arbeiten. Aber im Moment, lassen Sie uns auf Vorschau klicken, um zu sehen, was wir bisher getan haben. Also noch einmal, wir haben einen Login. Wir haben hier mehr gelernt. Wir haben hier schwebende Effekte, wirklich schön langsam aussehen. Wir haben das hier, was wir später als scrollbare Gruppe erstellen werden. Und wir haben das Date hier gelassen. Also werde ich gleich nach dieser Vorschau darauf zurückkehren. Erfahren Sie mehr. Also, was funktioniert gut? Wie Sie sehen können, wie Strom wirklich schön ist und Feuer, weil wir hier nichts Phantastisches brauchen. Denn nur dieser Pfeil bewegt sich. Eine letzte Sache. Also lasst uns weitermachen und dieses Datum ändern. Also, um dieses Datum zu ändern, ist das einzige, was ich tun möchte, im Grunde kopieren und einfügen den Text von hier zu meinem Datum und Milchgewohnheiten. So haben wir unser Website-Design abgeschlossen. Ich hoffe wirklich, es hat euch gefallen. Entschuldigung, das Tutorial ging für ein wenig weiter und es ist ein bisschen länger Video, aber ich wollte Ihnen nur in so vielen Details wie möglich zeigen, was mit Adobe XD möglich ist und tatsächlich Design und Prototyping in diesem gleichen -Abschnitt. Also ich mag es, das als Ziel zusammen zu machen, weil ich denke , ihr Jungs w 40. Design erstellen: Lassen Sie uns jetzt zurück zum Design und bevor wir auf die Kontogeschwindigkeit gehen, die nächste Seite erreicht, wollte ich nur eine schnelle Änderung direkt hier vornehmen. Also, wenn ich meine Navigation auswähle, das ist mein gemein. Jetzt, genau hier, kann ich hier auf diese Schaltfläche klicken, die beim Scrollen eine feste Position sagt, was im Grunde bedeutet, wenn Benutzer nach unten scrollen, wird diese Navigation an dieser Position fixiert bleiben. Also, wenn ich hier klicken, dann klicken Sie rechts hier, um meine Website zu sehen. Sie können sehen, dass, wenn ich mit dem Scrollen beginne, mein Navi hier oben bleibt und sich nichts ändert. Aber wenn ich auf rechts und Fehler klicke. Also hier, feste Position beim Scrollen. Klicken Sie dann auf und sehen Sie es noch einmal in der Vorschau. Sie können sehen, dass, wenn ich mit dem Scrollen beginne, mein Navi genau dort bleiben wird. Und weil wir in diesem Unschärfe-Effekt auf den Hintergrund aufgenommen haben, können Sie deutlich sehen, welchen Unterschied das macht, weil es nur zeigt , dass mit all diesen Interaktionen und Bluer im Grunde gleich bleibt und bleibt gesetzt. Und Sie können deutlich sehen, dass es einige Informationen über den Hintergrund gibt, aber Sie können immer noch alle diese Navigationselemente sehen. Sie können diese Schaltfläche sehen, können Sie deutlich sehen, das Logo und so weiter und so weiter. Also gefällt mir wirklich, wie das aussieht. N wir werden damit laufen und wir werden es so lassen, wie es da ist. Also das nächste, was wir hier tun werden, ist, dass ich tatsächlich hier klicken werde. Und ich werde meinen alten oder Wahlschlüssel halten. Ich werde dieses Exemplar hier positionieren. Mehr mit dem Ort. Und du kannst immer wieder hierher zurückgehen und die Distanz sehen, die du hast. Also sind es 70. So können wir einen schönen Abstand für Design und Wireframes haben. Also 70, und wir werden das Gleiche tun. Also Homepage-Design wird so ein Account-Design sein. Und das erste, was wir tun werden, ist, diesen NAV zu kopieren. Also drücken Sie Control C und löschen Sie diese, Kontrolle V, weil ich es in meinem gesamten Design verwenden werde. Jetzt. Das nächste, was wir tun werden, ist tatsächlich mein Heldenbild kopiert. Also drücken Sie Control-C. Löschen Sie diese alten. Du kontrollierst V und positionierst es direkt unter meinem Hauptnav. Und der Grund, warum ich das getan habe, ist, weil wir jetzt in dieser Grafik haben, wir haben diese Illustration, und wir werden nur unseren Text bewegen und die Position ersetzen, die diese. Also lasst uns weitermachen und das tun. Ich wähle meinen Text aus und positioniere ihn oder gleich hier. Also stellen Sie sicher, dass es genau hier ist. Also lassen Sie uns 245 Spalten sehen. Und was ich tun werde, ist dieses Bild zu entfernen , weil ich mein neues Bild einbringen werde. Und ich bringe es hier irgendwo hin. Hier ist es. Also wieder, es ist von invertierbaren Elementen. Bild ist das Premium-Bild. Und ich habe Adobe Photoshop verwendet, um den Hintergrund aus meinem Bild zu schneiden. Also werde ich positionieren, dass es irgendwo hier ist, sagen wir so etwas. Und ich werde auch meine Maske umdrehen. Also in so etwas. Dann werde ich ins Innere springen und Reposition kann Helden Kreis. Also sind diese beiden Menschen in der Mitte meines Kreises. Vielleicht so etwas. Ja, ich denke, das funktioniert gut. Ich werde auch Flip meine Helden Formen einfach klicken Sie hier. Und dann positionieren Sie es auch neu. Ich kann mehr mit irgendwo hier herum, weil ich nicht möchte, dass es meinen Knopf in diesem Stadium verbirgt. Ich werde auch meinen Helden Elemente drehen und sie ein wenig neu organisieren. So etwas, denke ich, wird gut funktionieren. Doppelklicken, um nach innen zu springen, und doppelklicken Sie einfach, um DES neu zu positionieren Und ich werde auch mein Bild hier verschieben , so dass ich es diese Elemente hinzufügen und neu positionieren kann. Endlich hat das hier verschoben. Und ich denke, das funktioniert gut. Was ich tun werde, ist, dass ich meinen Texten den Raum von sechs geben werde. Also 1-2-3, 4-5-6 Spalten. Ich bringe es zu diesem hier. Und dann werde ich hineinspringen und es meinen Schafen hinzufügen. Also werde ich das hier positionieren, vielleicht genau hier. Oder noch besser, ich kann das einfach nach oben bewegen. Verschieben Sie das hier. Mal sehen, vielleicht kann es immer noch insgesamt meinen Knopf schneiden. So etwas wie eine Diskette vielleicht. Hier. Senken Sie es einfach ein wenig nach unten, damit wir den Text so weit wie möglich vermeiden können. Und dann kann ich mit dem nächsten weitermachen und das einfach ein bisschen reorganisieren. Ich kann sogar auf dieses klicken und es hier neu positionieren. Und wie er oft sagte, können Sie immer zurückspringen und diese, diese Formen, wie Sie wollen, neu organisieren . Vielleicht können wir das auch tun. Ja, ich denke, das funktioniert viel besser. Ich werde hier an einer Position und hier doppelklicken, und das ist es im Grunde für unseren Heldenbereich. Ich kann es einfach schließen und dann zu diesen anderen Abschnitten übergehen. Also, was ich als nächstes tun werde, ist tatsächlich einige Symbole hier verwendet. So können Sie sehen, dass, weil beginnen Buchhaltung für ein Konto, Melanie, und so weiter, so weiter. Also werde ich zu meinem öffnen Sie Ihr Konto springen, oder lassen Sie uns diesen Abschnitt Konten anrufen, weil es verschiedene Konten enthalten wird. Also werde ich nur hineinspringen und meine Sequenz in aufgetretene AR einfügen. Und ich werde sie einfach aufstellen. Also das Fleisch hier mit diesen Hintergrundsymbolen, mal sehen 1234. Vielleicht. Mal sehen, dass du dich bei etwas mehr Lungenentzündung hast. Und 40 Pixel hoch. Ich denke, das funktioniert gut. Und dann, was ich tun werde, wie ich immer tue, springen Sie einfach zurück zu Ihrem Vermögen und wir wollen all das machen und nur unsere lokale Komponente. Also MC, lokal, lokal, einfach mit der rechten Maustaste und klicken Sie auf Lokale machen, springen Sie zurück. Und jetzt werde ich sie in ihre Plätze aufnehmen. Also für jeden einzelnen von ihnen möchte ich es an seinen eigenen Platz setzen. Also mal sehen. Wir haben dieses Startkonto. Ich positioniere es hier und entferne das Sternsymbol für ein Konto. Ich werde es hier setzen und dasselbe tun. Millennial Konto hat ein Heilmittel, fast dieses hier. Und schließlich, Premium-Konto und gelöscht dieses. Wieder einmal sind alle diese Symbole aus invertierbaren Elementen. Jetzt werde ich meine Farbe wieder einschließen, nur damit Sie sehen können, wie dieser aussieht. Und was ich tun werde, ist tatsächlich die Hauptkomponente zu erstellen. Und ich werde diesen Infobereich duplizieren und ihn in all diesen einfügen. Also lasst uns das jetzt tun. Ich werde insgesamt vier Kopien machen. Und ich werde mein Start-Konto öffnen und das in ziehen und positionieren. Und mal sehen, ich werde diesen einen Selektor nennen, diesen Hintergrund. Und ich werde sie alle umbenennen. Also haben wir diese Vereinigung nicht. Wir wissen was? Ist es. Doppelklicken Sie einfach und basierend auf Ihrem Namen dort. Jetzt, da wir diesen Infobereich haben, kann ich ihn wirklich komplett verstecken. Ich ziehe und positioniere eine weitere Kreuzung auf das ausländische Konto. Ziehen und positionieren Sie einen anderen auf mein Millennial-Konto. Und schließlich in Drag und eine Neupositionierung dieses auf mein Premium-Konto. Ich werde nun mein Startkonto anzeigen. Und ich werde eigentlich damit beginnen, die echten Informationen hier einzubeziehen. Also lassen Sie uns doppelklicken innerhalb und die Position, alle diese so. Und ich werde auch hier hineinspringen und in meinen Text springen. Strg-C auf der Schaltfläche „Domain“. Klicken Sie hier. Also schließe ich mein Icon und klicke dort auf Meine Info Position. Und mal sehen, was es ist. Mean Taste, halten Sie Ihre Umschalt- und Abwärtspfeil so dass Sie es nach unten in eine Position wie diese schieben können. Ich werde es dort positionieren und mal sehen. Also sind wir bei 40, was in Ordnung ist. Und ich werde diesen einfach gelöscht. Und ich werde diesen Text so ändern, dass er so angewendet wird. Und ich werde doppelklicken und Steuerelement C drücken, um diesen Text zu kopieren. Denn wenn ich zu Hover ändere, können Sie sehen, dass es immer noch „Mehr erfahren“ steht. Also muss ich es ändern, um jetzt für diese spezielle Instanz zu gelten. Also noch einmal, wenn ich Sie hierher zurückbringe, können Sie sehen, Maine und Original-Knopf sagt immer noch mehr erfahren. Und all diese Instanzen sagen immer noch mehr erfahren. Aber hier heißt es angewendet. Jetzt. Jetzt noch einmal, diese eigentliche Seite wird ziemlich einfach sein , weil, wie ich in der Wireframing-Sitzung sagte, wir werden es hinzufügen, nur diesen mittleren Teil und das, und das wird gleich bleiben. Aber wir werden endlich mit der Fußzeile beginnen , denn jetzt haben wir unsere Konten und ich werde Ihnen zeigen, wie Sie in der Fußzeile bearbeiten und die Änderungen vornehmen können , um Ihr Design zu reflektieren. Fangen wir damit an. Wie gesagt, wir haben einen Arm Hauptknopf, wir haben den Horror-Zustand beendet. Also werde ich nur Kontrolle C tun, um es zu kopieren. Ich werde mich verstecken und anfangen zu zählen. Zeige ausländischen Account-Sprung innerhalb Info-Hit Control V wird an genau der gleichen Stelle sein. Schalten Sie es einfach zurück. Wenn wir es überprüfen, können Sie sehen, dass es links am Raster ausgerichtet ist und es sind 40 Pixel von Disziplin entfernt. Verstecken Sie sich für ein Konto, eröffnen Sie ein Millennial-Konto, gehen Sie zu den Informationen und machen Sie das Gleiche. Also wieder sind wir bei 40, aber einfach positionieren und runter. Und schließlich, lassen Sie uns dasselbe für ein Premium-Konto tun. Also löschen Sie diese eine Kontrolle V. Lassen Sie uns überprüfen. Und ich mache diese Kontrollen immer, nur um sicherzustellen, dass, wenn ich anfangen zu arbeiten, alles schön und sauber aussieht und alles funktioniert, wie es sollte. Nun lassen Sie uns in dieses Bild springen und ich werde mein Bild ziehen und fallen in Position an ihrer Ähnlichkeit. Also doppelklicken Sie auf Hall meine Shift-Taste, meine Alt-Taste, nur um diesen Kerl ein wenig alt zu erhöhen, positionieren Sie ihn in der Mitte, so etwas. Und im Grunde ist es das für das Start-Konto. Bevor wir zu verschiedenen Abschnitten übergehen, lassen Sie uns einfach diesen Text ändern. Also wird es sagen, Öffnen Sie Ihre perfekte, so. Also geben wir ihm nur ein bisschen mehr von, mal sehen, anderen Gefühl. So sieht es irgendwie freundlicher aus, als einfach Ihr Konto zu eröffnen. Er sieht irgendwie aus wie der Befehl. Gehen wir also zum ausländischen Konto und lassen Sie uns auch seinen Namen ändern. Also werde ich hier doppelklicken. Dies haben wir jetzt Decks anwenden, was in Ordnung ist. Und ich werde innerhalb meiner Hauptdatei doppelklicken, diese Informationen kopieren und einfügen. Ich ziehe auch mein Bild hinein. Und mal sehen. Ich denke, das ist in Ordnung, aber sie können es immer ein bisschen so erhöhen, nur um diese Jungs mehr in den Fokus zu bringen. Jetzt, da das abgeschlossen ist, kann ich diesen Abschnitt verstecken und ich kann immer zum Millennial-Abschnitt gehen, das öffnen. Und mal sehen. Ich kann jetzt gut kopieren und meine ursprünglichen Informationen einfügen. Ich werde dasselbe für den Text tun. Ich werde mein Bild einfach so hineinziehen. Und ich kann immer doppelklicken und dieses Bild nur ein wenig erweitern, nur damit wir sie so etwas besser in den Fokus bringen können. Und statt Startkonto, sollte es sagen, Millennial-Konto, so. Und mal sehen. Ich muss diesen Text auch ändern, also schreibt er, er entspricht besser diesem tatsächlichen Konto. Okay, jetzt, da ich den Text eingefügt habe, lassen Sie mich schnell mit dem ausländischen Konto überprüfen. Ich weiß nicht, was wirklich passiert ist, aber es gibt offensichtlich eine Störung hier. Also werde ich das alles schnell vergrößern und neu eingeben, weil es den gleichen Text für den Anfang verwendet. Der Graf. Wie Sie sehen können, ändert sich der Text hier nicht. Also werde ich das Video pausieren oder hier wirklich schnell und dann das alles neu eingeben. Okay, und jetzt, da ich fertig bin, Dad, lass mich zurückgehen und diese anderen überprüfen. Also haben wir neue Bank beginnen für ein Konto zu zählen, Millennials Konto. Und schließlich, lassen Sie uns mit diesem Premium-Konto umgehen. Also mal sehen. Alles, was wir hier brauchen, ist die Eingabe von Premium-Paket. Dann, was ich verwenden werde, ist mehr Premium, also irgendwie das Bild. Also in diesen beiden Menschen sind im Grunde junge Geschäftsleute, die ich denke, das funktioniert gut. Und zuerst muss ich mich schnell mit all diesen Kuratoren austauschen lassen . Also net, äh, jetzt, wo ich kopiert habe und diesen Text, was wir tun müssen, ist im Grunde eine Komponente zu erstellen. Also lasst uns voran springen und mit diesem ersten beginnen. Also werde ich hier eine Komponente dafür erstellen. Und das erste Konto, das angezeigt wird, ist beginnen zu zählen, weil das ihr Basiskonto ist und es wird angezeigt und als Standardoption, wenn Sie möchten, für Leute, die gerade zu dieser Bank kommen. Also werde ich die Steuerungstaste drücken. Und das wird unser Standardzustand sein. Und innerhalb des Standardstatus lassen Sie uns schnell etwas anderes machen. Also werde ich tatsächlich weiter Standardzustand alle diese Informationen unten verbergen. Also, was Sie schnell tun können, ist öffnen Sie alle Ordner, wählen Sie Informationen über alle von ihnen. So, mit Ihrer Steuerungstaste und einfach Laura Duplicity down. Und das ist im Grunde unser Standardzustand. Es ist nah dran. Jetzt fügen wir einen anderen Status hinzu. Und das wird als Startkonto bezeichnet. Also erstelle ich nur diesen Standardzustand. Sie können sehen, wir haben diesen leeren Raum und natürlich codieren ruhige Frage wird genau hier sein. Also, wenn ich Ihnen zeige, dass dies wie im Code sein wird. Und dann, wenn Benutzer klicken. Zum Beispiel, auf Startkonto, mit dem wir es jetzt zu tun haben, Informationen für das Speicherkonto wird wie folgt zeigen und diese unteren Informationen werden nach unten verschoben werden. Nun, weil dieses Konto tatsächlich ausgewählt ist. Lass uns mit dem Symbol herumspielen. Also habe ich Farbe und ich habe skizziert. Also werde ich einfach gesenkt die Fettleibigkeit meiner Farbe nach unten, um anzuzeigen, dass dies angeklickt wird. Also einfach hast du die Fettleibigkeit so gesenkt. Nun, da wir das abgeschlossen haben, können wir auf das ausländische Konto übergehen. Also klicken Sie hier, neue Zustandsfluorzahl. Und wir werden im Grunde dasselbe tun. Also springen Sie in den Start die Zählung. Wir werden die Farbe zurückbringen. Wir werden die Datenträgerinformationen verstecken. Wir gehen auf das ausländische Konto. Erhöhen Sie die Farbe und zeigen Sie D für schließen all dies. In einem anderen Staat. Dies wird als Millennial Count bezeichnet werden. Und im Grunde siehst du, was kommt. Wir werden im Grunde auch hier dasselbe tun. Also verstecken Sie das, zeigen Sie das, gehen Sie zurück zu Ihrem 400 Konto. Zeigen Sie das, und blenden Sie es aus. Und schließlich lassen Sie uns auch eins für das Premium-Paket erstellen. So wie das. Und ich werde in den Jahrtausendbericht springen. Ich zeige diese Höhe, diese Höhe, das. Und ich werde das endlich zeigen. Und das ist es im Grunde. Was wir jetzt tun können, ist tatsächlich zwischen ihnen zu tippen, damit wir sie animieren können. Also im Standardzustand, was wir tun müssen, ist tatsächlich darin zu verwenden, was unser Selektor als Mittel-Selektor ist. Also lasst es uns einen Prototyp machen. Klicken Sie einfach auf Ihren Prototyping-Reiter, doppelklicken Sie darauf, um den Selektor auszuwählen, und klicken Sie dann einfach auf. Und was wir einen Schritt benutzen werden. Wir werden Auto animieren verwenden. Wir werden verwenden ist in, aus und lassen Sie uns 0,4 Sekunden verwenden. Ich denke, das funktioniert gut. Also, wenn ich Sie wieder zurücknehme, können Sie sehen, dass wir im Standardzustand sind. In diesem Zustand ist noch nichts geöffnet. Also wieder ist nichts geöffnet, alles ist geschlossen. Und wenn Sie sich erinnern, ich erwähnte, dass Codierung, dieser Abschnitt häufig gestellte Fragen geht zurück nach oben. Und es wird irgendwo hier sein. Aber weil wir das im Moment nicht in Adobe XD zeigen können, weil es immer noch nicht live sein kann, sagen wir, dann können wir so etwas tun. Also werde ich Ihnen innerhalb des Designs zeigen, das erste Konto, das geöffnet und gezeigt wird, ist Start der Zählung immer. Gehen wir zurück zum Prototyping. Wie gesagt, wir haben das ausgewählt. Also wieder, wir sind im Standardzustand. Also werde ich hier doppelklicken, tippen oder einfach zu animieren und 0,4 Sekunden. Und Sie können das Ziel wählen, das wird uns in den Staat zu bringen, die Start-Konto ist. Und du wirst es als Ziel mitbekommen. Also doppelklicken Sie hier. Klicken Sie wird alle die gleichen Informationen haben. Also tippen Sie auf Auto Feinde, einfach, nicht 0.4. und in diesem Fall werden wir zu ausländischen Konto gehen. Schließen Sie diesen Klick. Wir gehen zum Millennial-Konto. Und schließlich klicken, Sie gehen, um Premium-Paket zu gehen. Jetzt müssen wir dasselbe tun, aber mit Startkonto. So werden Sie feststellen, dass Startkonto geöffnet ist. Also, was wir tun müssen, ist, dass ich auf ausländische Zählung klicken und im Grunde dasselbe tun werde. Adobe XD behält alle diese Einstellungen bei, also machen Sie sich keine Sorgen. Das einzige, was Sie wirklich tun müssen, ist einfach zwischen all diesen zu klicken. Und noch einmal, weil ich rede, dauert es viel länger, als es sollte. Aber wenn du nicht redest, wenn du fokussiert bist, dauert das nur ein paar Sekunden. So starten Sie Konto. Dies wird ein Jahrtausendbericht sein. Es wird Premium-Paket sein, so. Und schließlich werde ich all diese schließen. Wir sind auf ausländischem Konto. Klicken Sie auf das Jahrtausend, tun Sie das Gleiche. So starten Sie ausländische Prämie. Ich werde das alles schließen. Und schließlich sind wir bei Premium-Paket. Dies wird starten fremd sein. Und schließlich Millennial und Molkerei. Wie es ist, haben wir das abgeschlossen. Du kannst zurückgehen und den Zeitstempel ansehen, aber ich glaube nicht, dass ich mehr gebraucht habe als ein oder zwei Minuten. Wie gesagt, wir werden mit dem Startkonto beginnen. Das wird also am Anfang gezeigt. Und wenn ich Sie zurück zur Vorschau bringe, klicken Sie hier. Wenn es sich öffnet, bringe ich es hierher. Wieder einmal haben wir diese Hover-Effekte, wenn wir anfangen zu scrollen, diese Navigation scrollt mit uns. Und hier haben wir es. So haben wir unseren Anfang, für ein Konto Millennial und Prämie zu zählen. Wenn es auf fremde, Sie können sehen, dass es ändert und wechselt zwischen all diesen. Und Sie können sehen, wie schön und subtil dieser Übergang zwischen farbigen Symbolen und denen ohne Farbe auf ihnen ist . Wie ich schon sagte, wir werden den Start behalten, und Sie können zwischen ihnen springen. Also von Anfang bis Premium und so weiter. Und Sie können sehen, dass sich dies schön ändert, wenn wir unsere Arbeiten anwenden, aber es funktioniert nicht genau hier. Es funktioniert also nicht bei diesen inneren Zuständen. Ich weiß wirklich nicht, was der Fall ist. Ich habe auch den XD-Support kontaktiert. So können Sie auf diesem ersten sehen, dass es funktioniert, aber auf diesen zusätzlichen funktioniert es nicht. Wenn Sie also wissen, was das Problem ist, lassen Sie es mich wissen und ich werde ein Update machen oder wenn ich das Problem herausfinde, werde ich auch ein Update machen und euch wissen lassen, was ihr tun könnt, um das zu beheben. So funktioniert es auf allen Staaten. Vielleicht muss ich mehrere Komponenten dieser Schaltfläche erstellen. Ich weiß es wirklich nicht. Aber lassen Sie es einfach so, denn in diesem ersten, es funktioniert und Sie können zeigen, dass wir unten zurücklehnen, dass wir häufige Fragen haben. Und schließlich gehen wir zurück zu unserem Konto. Jetzt, da wir wissen, dass die Namen, die wir kennen, ausländische, tausendjährige und Premium beginnen , können wir zu diesem ersten springen. Doppelklicken Sie hier. Also nennen Sie es „Start“. Und mal sehen, vielleicht kann ich das. Ja, geben wir ihm einen Namen der Startzählung. Das wird fremd sein. Das wird tausendjährig sein. Und das wird so Premium sein. Und jetzt, da ich das abgeschlossen habe, können wir die Steuerungstaste drücken, um eine Komponente zu erstellen. Und jetzt können wir diesen einfach löschen. Klicken Sie hier Strg-C, Strg-V. Und Sie können hier klicken, um es in Position zu positionieren. Und jetzt jedes Mal, wenn Sie es hinzufügen, diese erste, die die ursprüngliche Komponente ist, wird es auch hier reflektieren. Also, wenn ich Sie zu unseren Kredite zurückbringe, sind sie hier. Sie können sehen, dass wir ein schnelles Bargeld haben, ein Auto kaufen, ein Haus kaufen, meine Schulden refinanzieren. Also noch einmal, diese zweite ist, Sie können sehen, dass es völlig leer ist. Wenn wir also zur Hauptkomponente unserer Fußzeile gehen und ich reinspringe, kann ich hier gehen, diese kopieren. Also traf Control-C, Control-V, und positioniere sie in Übereinstimmung mit unseren Kredite. Wie diese Gruppe, alle. Was ich tun werde, ist hier doppelklicken und schnelles Bargeld bekommen. Das wird Viacom sein und ein Haus kaufen. Und dass er Abteilung. so Dario es. Und jetzt, wenn ich Sie zurück hierher bringe, können Sie sehen, dass wir denselben Abschnitt haben. Das ist also die Magie der Komponenten. So mächtig sind sie. Und um das noch weiter zu zeigen, kann ich dich zurück hierher bringen, was unser ursprünglicher Knopf ist, wenn du dich daran erinnerst. Wenn ich zum Beispiel aus irgendeinem Grund diese Farbe in Rot ändere, können Sie sehen, dass sie nicht nur hier, sondern auf all diesen zusätzlichen Schaltflächen aktualisiert wird. Ich kann zum Beispiel auch den Eckenradius auf 60 erhöhen. Und Sie können sehen, dass es dieselbe Änderung auf alle meine Schaltflächen angewendet hat. Das ist also wirklich die Magie dieser Komponenten und die Magie von Adobe XD. Und ich genieße es wirklich, so zu arbeiten, scheint die gleiche Geschichte für die Fußzeile, zum Beispiel. Wenn ich also die Farbe ändern möchte, können Sie sehen, dass es in unserem Design aktualisiert wird. Tolle Sache an dieser Fußzeile. Wenn Sie es als Komponente verwenden möchten. Das Gleiche hier für die Navigation und ist jetzt zu stoppen und so weiter, ist, dass Sie immer zusätzliche Komponenten Zustände für responsive Design erstellen können. Und ich werde Ihnen das später zeigen, wenn wir tatsächlich zum Responsive Design Abschnitt kommen. Das ist also großartig. Sie können einfach klicken und es wird diese Änderung über alle diese Zustände und über das Dach anwenden , Responsive Design anordnen. Aber das war's für dieses Video. Wir sehen uns im nächsten, wenn wir mit unserem Design fortfahren werden. 41. Design erstellen: Gehen wir nun zur nächsten Seite. Und die nächste Seite hier sind Kredite. Also werde ich dasselbe tun. Also all meine alten Q und ziehen Sie es nach unten. Wir sind auch bei 70 hier. Wollen wir das Lungendesign nennen? Und ich denke, ich habe vergessen, Sie im vorherigen Video zu zeigen, ist, weil dies die Kontoseite ist. Wir wählen das Konto aus. Und jetzt können wir diesen Hit Control-C verwenden, klicken Sie hier. Oder sogar noch besser, wir können beide auswählen. So kann jetzt und Helden Control-C, klicken Sie, klicken Sie, löschen Sie diese beiden Control-V positioniert an Ort und Stelle. Mehr Dock jetzt an der Spitze und kann jetzt genau hier wird zeigen gehört. Also hier haben wir es. Und jetzt nur, was wir tatsächlich ändern werden , wo hier der Text und das Bild sind. Also werde ich unser Bild löschen, und ich werde mein Bild per Drag & Drop in hier. Hier ist es. Und ich werde Shift Alt halten und mit der linken Maustaste auf meine Maus klicken, um es gleichmäßig zu erledigen. Positionieren Sie es unter einer Zeile wie dieser, C so. Und ich kann das so positionieren, dass es hier richtig ist. Und Sie können mit diesen Elementen herumspielen. Sie können sie neu positionieren. Ich kann das zum Beispiel drehen, sie können das nach oben bewegen. Ich kann Abneigung umdrehen. Also bewegen Sie es direkt nach draußen. Und da haben wir es. Also nun gehen wir zurück und beginnen, indem wir den Text selbst ändern. Also werde ich innen doppelklicken. Ich doppelklicke innen von hier, ändere diesen Text und nenne ihn einen Tag. Das ist unser Heldenbild abgeschlossen. Und das ist der Vorteil, dass D's bereits Abschnitte gemacht haben. Und ich kann dann hineinspringen und mein Bild optimieren oder einfach nur ein bisschen, zum Beispiel, ich kann es hier bewegen. Wenn ich es nur ein bisschen anders um diesen Kreis positionieren will, kann ich das vielleicht hier setzen. Sie können diese Formen sogar umschalten, wenn Sie wollen, aber ich werde es einfach so lassen. Das nächste, was wir tun werden, ist, diese zu ändern. Und das wird im Grunde genau der gleiche Abschnitt und genau die gleichen Einstellungen wie dieser sein. Also werde ich hier reinspringen und ich werde diese Symbole auswählen und sie darin einfügen. Also werde ich hier reinspringen, doppelklicken, und ich werde Ihn in genau der gleichen Position stützen. Und ich Augapfel Todesfälle ebenso wie es mit dem vorherigen getan hat. Also irgendwo hier, 123440 Pixel hoch und dicht, im Grunde springt es genau hier. Ich werde mit der rechten Maustaste, machen lokale, ME Klocal, machen lokale, und schließlich machen lokale Marmelade zurück. Und was ich tun werde, ist im Grunde dasselbe, was ich mit dem vorherigen gemacht habe. Ich werde alle diese Ordner öffnen und Drag & Drop das Icon Very sollte und einfach den Startplatzhalter gelöscht werden. So wie das. Also Biokohle und kaufen ein Haus. Und schließlich refinanziere meinen Hals. Nun, was ich auch tun werde, ist diesen Selektor aufzurufen. Also, wie ich es mit dem vorherigen getan habe, werde ich Kontrolle D drücken, Informationen innerhalb bewegen, schließen Sie es auch diesen Selektor genannt. Control D bewegen Sie sich zu Informationen im Inneren, wie so. Und schließlich auf diese erste, tiefere ursprüngliche Info Einsicht. Aber ich werde als nächstes tun, ist eigentlich mit einigen Änderungen direkt hier beginnen. Und ich möchte alles erschaffen, wie ich es vorher getan habe. Also, wenn Sie sich erinnern, zuerst haben wir das gesamte Design gemacht, alle Informationen und dann erstellt Komponenten oder für die Kredite und so weiter. Also werde ich reinspringen und von hier anfangen. Also werde ich die Fettleibigkeit von all diesen senken und mit meinem schnellen Geld beginnen. Also, was ich tun werde, ist Drag & Drop meine Bild-Einsicht für mich schnelles Bargeld wie das. Also, was wir haben, ist in 30 Minuten verderben. Und ich werde diesen Text einfach hier kopieren. Und ich werde das gleiche tun für diese sind die Textfelder. Fügen Sie einfach die Informationen ein, die der Kunde mir zur Verfügung gestellt hat. Und Sie können diese Informationen immer im Grunde erhalten , weil Sie sie von Ihrem Kunden bekommen. Und der Kunde hat immer, zumindest in dieser Information. Nun, da wir das getan haben, lässt mehr wollen, ein Auto wie das zu kaufen. Und wir machen Biokohle, im Grunde wird es wieder dasselbe sein, aber wir werden einige zusätzliche Informationen enthalten, sowie Breitensymbole. Diese Symbole werden also im Grunde ein wenig anders sein als diese. Also für uns, lassen Sie uns reinspringen und tatsächlich diesen Text ändern. Also in diesem ersten Text wird so sein. So wird eine breite Palette von Chorus, minimale Dokumentation in die gleiche schlagen. Ich werde mich nur in diesem Umstand ändern. Und schließlich haben wir diesen letzten Text, wie Schulden. Und jetzt habe ich zwei Symbole, die ich kopieren und einfügen werde. Also werde ich sie hier einfügen. Ich werde zurückspringen, mit der rechten Maustaste klicken, lokal machen, mit der rechten Maustaste klicken, lokal machen. Springen Sie zurück zu meinem Ebenen-Panel. Und ich werde dieses erste Symbol ganz nach oben positionieren. Und o positionieren Sie es hier anstelle dieses Stoppuhr-Symbols, löschen und mein Stoppuhr-Symbol. Ich werde das für einen Moment schließen. Dokumentation wird die gleiche sein und diese umweltfreundliche Ikone wird einfach in die Position des Schülers gehen. So wie so. Löschen Sie das vorherige Symbol und das ist es im Grunde. Das einzige, was wir hier tun können, ist, ein neues Bild aufzunehmen. Ich werde mein Bild ziehen und fallen lassen, wagen. Und ich werde es einfach bewegen und vielleicht etwas vergrößern. Also müssen Sie diese gekoppelte Wahl eines Autos im Grunde sehen. Das ist also der ganze Sinn dieses Abschnitts. Und schließlich werden wir diesen Abschnitt unten ändern. Denn wie sie im vorherigen Video sagten, wo wir an Wireframe gearbeitet haben, wird es offensichtlich ein bisschen anders aussehen. Für einen Kredit, um ein Auto zu kaufen, ein Haus zu kaufen, oder um ein schnelles Bargeld zu bekommen. Was wir auch tun werden, ist in alle von ihnen springen und ändern, ändern Sie die Taste. Also, was ich tun werde, ist vielleicht auf diese klicken. Wählen Sie diese Schaltfläche aus. Ich könnte das hier gebrauchen, aber was auch immer, ich kann das ändern. Also springe in meine Info und erhalte eine Antwort. gesprungen. Also hier, klicken Sie auf die Jetzt anwenden positionieren Sie es an einem Ort wie diesem. Und ich werde das entfernen und es ändern, um es jetzt anzuwenden. Es ist bereits bei der Bewerbung. Lasst es uns da lassen. Wir sind bei 74, der Abstand in dieser Zeit, aber es spielt keine Rolle. Sieht sowieso gut aus. Und von diesem Abschnitt nach unten sind wir noch bei 150, also ist das auch in Ordnung. Kontrollieren Sie C, um es zu kopieren und auszublenden. Gehen Sie zu diesem Abschnitt Info, erhalten Sie die Antwortsteuerung V, um es an Ort und Stelle einzufügen. Also mal sehen, wir sind auch bei 70 hier. Ich werde das alte löschen, einfach hier ersetzen. Und lasst uns weitergehen und bearbeiten. All diese anderen. Siehe Löschen Sie diese 170, verstecken Sie es und klicken Sie rechts hier. Position in 70 und fast, und diese letzte auch. Also lassen Sie uns noch einmal überprüfen. Also haben wir am selben Tag oder Antwort. Leisten Sie sich ein Auto. Wir haben in 20 Minuten Antwort auf einen Cashflow. Und jetzt können wir weitermachen und daran arbeiten, ein Haus zu kaufen. Also lasst uns das jetzt machen. Was ich damit eigentlich tun kann, ist, dass ich den Text hier oben einfügen kann, oder ich kann ihn einfach so belassen. Mal sehen. Ja, lass es uns einfach so lassen. Weil wir diesen Text hier haben werden. Und dieser erste wird schreiben, mal sehen, an Ihrem Traumhaus, so wird minimale Dokumentation gleich bleiben. Aber nur das wird sich ändern. Komplett online und wir werden das hier ändern. Das einzige, was wir ändern werden, ist, dass wir hier ein Symbol für das Zuhause haben. Also lassen Sie uns den Namen ändern, um Ihr Traumhaus zu kaufen. Anstelle des Stoppuhr-Symbols Position des Home-Icons hier. Und das sind große Ikonen dünn. Also, wo immer Sie diese Symbole sehen, sie sind große Ikone stehen. Und wo immer Sie Symbole in Farbe sehen, sie sind von nur Symbol auf und wichtige Elemente. Bevor wir also hören wollen, möchte ich auch hier eine schnelle Änderung vornehmen, die Ordnernamen. So breite Palette von Autos, Dokumentation, dasselbe. Und hier werden wir so schreiben. Okay, jetzt, wo das abgeschlossen ist, gehen wir zurück, um ein Haus zu kaufen. Wir haben den Text geändert, und das einzige, was uns noch übrig bleibt , ist das Bild selbst. Also lassen Sie uns sehen, ziehen Sie es nach innen. Also haben wir einen Makler und wir haben ein Paar, das ein Haus kauft. Sieht wirklich schön aus. Positionieren Sie es so in die Polizei. Netzwerke, gut. Und jetzt ist dieser Abschnitt abgeschlossen. Wir können jetzt endlich weitergehen, zu dieser letzten, die meine Tiefe refinanziert. Und lassen Sie mich sofort und Springen Website und fügen Sie mein Bild. Ich werde eine Scheibe gekoppelt verschieben. Irgendwo hier. Oder vielleicht sogar ein bisschen mehr, so etwas. Und lasst uns jetzt weitermachen und sehen, wie das mit unseren Informationen aussehen wird. Also mal sehen. Wir werden das ein bisschen anders nennen und wir werden ihm einige andere Symbole sowie Text geben. So Berechnung in 20 Minuten. Mal sehen. Die Dokumentation wird in der gleichen bleiben. Ich werde diesen Text einfach komplett online ändern und wir werden das hier ändern. Jetzt habe ich gerade bemerkt, dass ich einen Dummy-Text für diesen ersten verwende. Mal sehen, wir ändern es, das ist in Ordnung. Also gehen wir weiter und schalten Sie das wieder ein. So wie so. Und lasst uns dieses erste Symbol ändern. So Berechnung in 20 Minuten. Lass es uns ändern. Control VP sitzen in. Wir haben dieses nette kleine Taschenrechner-Symbol. Und Sie können die Macht von Icon-Sets sehen. Weil alle diese Symbole zusammengehören. Grundsätzlich sehen sie alle den gleichen Stil Deal hatte die gleiche Dicke der Linien. So funktionieren sie alle gut mit diesem Design. Schließlich werde ich dies nur umbenennen, um die Löschung in 20 Minuten zu berechnen. Und das ist es im Grunde. Dieser Abschnitt ist nun abgeschlossen. Oder schließlich hat es den folgenden Text geändert, um eine Antwort in 20 Minuten zu erhalten. Lassen Sie uns den Text auch hier ändern. Mein Vater und ich denke, ich habe vergessen, zu ändern und das für ein Haus kaufen, ein Auto kaufen. Wir haben es geändert. Und kaufen Haus. Ja, ja. Also müssen wir jetzt die Schulden ändern. Also mal sehen. In diesem Fall werden wir heute eine schnelle Antwort haben. Viel zu viele Klicks, um hinein zu springen. So wie das. Also heute Antworten, und das ist es im Grunde. Wir haben nun alle unsere Abschnitte abgeschlossen. Also schließlich, was wir tun werden, ist, unsere Komponenten zu schaffen. Also, was ich hier tun werde, ist für diese erste Komponente, lasst uns Control K. noch einmal drücken, wie hier. Wenn Sie sich erinnern, wird dieser untere Abschnitt mit häufigen Fragen hier nach oben verschoben , da alle diese Informationen im Standardzustand ausgeblendet werden. Also lassen Sie uns die Bearbeitung öffnen und alle Informationen ausblenden. Doppelklicken Sie auf mich 0 Taste oder Sie können einfach Herr Fettleibigkeit unten auf 0. Ich werde alle Ordner schließen. Beginnen Sie mit dem Erstellen eines neuen Status, der eine schnelle Gash wie die auf dem Getter-CPU-Cache bekommen wird, was wir tun werden, ist das Symbol zu ändern, Song geht, um die Farbe zu verbergen. Und das hier auch. Ich werde meine Informationen zeigen. Und das ist es im Grunde. Lasst uns jetzt weitermachen und einen weiteren Zustand erschaffen, der Biokohle sein wird. Auf Biokohle gehen wir zurück zu schnellem Geld. Wir werden die Farbe wieder so reinbringen. Ich werde diese Informationen verstecken. Geh, um ein Auto zu kaufen. Höhe, diese Höhe, auch diese Farbe. Geh zurück und ich zeige meine Informationen hier. Nun, machen wir weiter und schließen das. Ich kann einen neuen Zustand erstellen. Ich rufe diesen Staat an und kaufe ein Haus. Und darauf, gehen wir zurück und kaufen ein Auto. Bringen wir das alles wieder rein. Also bringe ich diese Farbe zurück, diese Farbe. Schließen Sie alles, verstecken Sie diese Sünde. Diese Info wurde gezeigt. Und schließlich, mal sehen. Diese Farbe ausblenden, doppelklicken Sie, um diese Farbe auszublenden. Das war's. Und schließlich, lassen Sie uns voran gehen und einen neuen Zustand für eine Refinanzierung meiner Tiefe schaffen, so, und das gleiche tun im Grunde. Also mach das auf. Mal sehen. Ich werde diese Informationen verstecken. Und ich werde Farbe auf beiden zeigen, damit es meine Schulden finanziert hat. Und ich werde verfärbt verstecken diese Farbe. Mal sehen, ob ich es getan habe. Habe ich. Und endlich meine Info zeigen. Also, das ist es im Grunde für den Erstellungsprozess. Jetzt kommt der lustige Teil wieder. Und wir werden in den Prototyping-Modus springen. Im Standardzustand werden wir einen Selektor machen. Und wenn Sie sich fragen, warum wir diesen Selektor immer noch im Standardzustand tun , ist es, Kunden und Entwicklern zu zeigen , wie all dies aussehen wird , wenn es im Standardzustand ist. So können Sie ihnen zeigen, dass alle diese Symbole Farbe haben, wie Sie sehen können. Und Sie können ihnen zeigen, dass dieser untere Abschnitt mit den Fragen und Fußzeilen genau hier nach oben kommen wird. Also lasst uns anfangen. Wie gesagt, wir sind in einem Standardzustand. Ich werde hier doppelklicken. Klicken Sie, wie Sie sehen können, Adobe XD hat alle unsere Einstellungen von der vorherigen eine sah Registerkarte oder einfach animieren. Jetzt 0.4. was für die Konsistenz wichtig ist weil Sie es Ihren Kunden und Entwicklern und Ihren Teammitgliedern zeigen möchten. Zum Beispiel, nur ein, wie konsistent diese Website ist Entität Sie verwenden die gleiche Animation, die wird die Zeit, die Entwickler benötigt, um dieses Design am Ende des Tages zu entwickeln reduzieren . Also werde ich wählen, bekommen schnelle Gash hier erforderlich. Kaufen Sie ein Auto, kaufen Sie ein Haus und finanzierte schließlich meine Schulden. Ich werde alle diese Ordner schließen. Wenn Sie sich fragen, warum ich Ordner verursache, ist, weil ich das einfach mag. Ich möchte die Dinge schön und sauber aussehen und entweder wollte mich abzulenken Liter. Das wird also ein Auto kaufen. Wenn Sie etwas schlagen auf der Außenseite hören, ist nur jemand, der sich gut für den Winter vorbereitet. Tut mir leid, wenn du das hörst, aber ich weiß es wirklich nicht. Ich kann nichts dagegen tun. Also habe ich versucht, es zu ignorieren. Schnell schnappen. Also noch einmal, holen Sie sich ein schnelles Bargeld per Haus. Und schließlich haben wir meine Tiefe refinanziert, weil ich mich dafür entschieden habe , mein Büro außerhalb der Stadt zu haben. Anstatt Autos draußen laufen, kann man so etwas hören. Hol dir ein schnelles Bargeld. Aber zumindest ist Luft sauberer und die meiste Zeit ist es viel leiser. Kommen wir zurück zu unseren Design-Kleidern, all das. Und schließlich sind wir bei der Refinanzierung, laien tot. Also werde ich das wählen, bekommen ein schnelles Bargeld wird Biokohle sein und ein Haus kaufen. Und wir nennen es einen Tag. Jetzt, da Sie wissen, wie Sie mit all diesen arbeiten können, ist es viel schneller. Auch hier ist der Standardstatus, den Sie anzeigen werden, nicht der Standardzustand, sondern ein schnelles Bargeld. Also der erste, der ausgewählt wird, und das ist es im Grunde. Ich kann zu meiner Design-Kit-Vorschau zurückkehren, nur um zu sehen, wie das aussieht. Vergrößern Sie es, gehen Sie auf Vollbild. Wenn es beginnt zu scrollen, können Sie sehen, dass wir Kredite ausgewählt haben. Alles sieht schön und sauber aus. Und wenn es beginnt, nach unten zu scrollen, können Sie diesen Abschnitt schön sehen. Wenn ich also zwischen ihnen klicke, können Sie sehen, dass sich diese Informationen gut ändert. Und wir haben immer noch diese schön aussehende Animation und diese Übergänge zwischen unseren Icons. Wieder einmal funktioniert unser erstes, aber wenn ich auf die Biokohle klicke, kann man sehen, dass der Hover-Effekt hier nicht funktioniert. Also nochmals, wenn jeder weiß, was der Grund dafür ist, lassen Sie es mich wissen und ich werde es gerne reparieren. Jetzt müssen wir das anpassen, damit wir Kredite in Karten haben. Gehen wir also voran und fügen Sie das Original ein. Ich kann das immer tun, damit ich Kontrolle C auf dieser Kopie des Originals drücken kann, es nach unten positionieren und zurückschalten kann. Und jetzt, da wir wissen, welche davon enthalten sind. Wir wissen also, dass wir diese Lungen haben und sie aufgenommen haben. Das ist es im Grunde. Im nächsten Video werde ich Karten zeigen und wir werden auch zwei Karten hier einschließen. Aber wie Sie sehen können, haben wir es bereits beendet. Also habe ich Kreditkarten, Debitkarten, individuelle Karten und Geschenkkarten. Vielleicht für die benutzerdefinierten Karten. Wir hier, wo es heißt, erstellen Sie Ihre eigenen. Wir haben das nicht ausgefüllt, aber wir haben immer noch Geschenkkarten und so weiter. Also, das ist es im Grunde für dieses Video. Wie ich im nächsten gesagt habe, werden wir mit diesen Karten herumspielen. Ich werde Ihnen einige fortgeschrittene Animationen zeigen. Und wir werden diese Seite auch beenden. Also sehe ich dich dort. 42. Design erstellen: In Ordnung, also fangen wir jetzt mit den Karten an. Und das wird das schwierigste sein, denn wir werden tatsächlich einige Animationen hier auf all diesen und auf diesem einbinden. Also lasst uns anfangen. Ich werde Ihnen alles zeigen, dass einfach fallen alt und sind die gleichen wie wir für all diese anderen, sind 70 genau hier. Sie werden Karten mit Schrägstrich machen, neun hier, so. Ich werde auch dasselbe tun, wie ich es zuvor getan habe. Also kopieren Sie das, löschen Sie diese beiden. Also benutze ich meine Männer jetzt Held könnte V kontrollieren, um sie auf meine Mitte einfügen, jetzt, zog sie für uns nach oben. Nun, mein Hauptnav wählt Karten offensichtlich. Und hier, lasst uns mit der Bearbeitung beginnen. Das erste, was ich tun werde, ist, die Dinge etwas aufpeppen. Also werde ich Orte für den Kreis wechseln und 4dx tut. Ich werde auch nur ein wenig gedreht, und ich werde diese auch drehen, um diese Position zu mögen, um hier zu lösen. Ich werde dann weitermachen und mein Bild einschließen. Also ziehen wir mein Bild hinein. Wieder einmal, Bild ist von einem lebenswichtigen Elemente und ich ging gerade voran und benutzte Photoshop, um den Hintergrund von dieser jungen Dame zu schneiden. Ich sah hier irgendwo eine Position. Also schau mein Held, BG, meine Bildposition auf Wagen, bewegen Sie mein Bild, wagen Sie mein altes Bild zu entfernen und verwenden Sie mein neues Bild, um zu positionieren. Es ist irgendwo in der Mitte meines Kreises. Irgendwo hier oder zwei. Ich denke, es wird gut funktionieren. Beachten Sie, dass wir mit der Bearbeitung des Textes beginnen. Also werde ich doppelklicken, den Text hier ändern, den Text auch hier ändern, und du verlierst nicht den Tod. Wir verwenden immer noch Stack , der später wirklich nützlich sein wird wenn wir tatsächlich zu dem reaktionsfähigen Teil dieses Designs kommen. Nun, da das abgeschlossen ist, kann ich schnell zum zweiten Abschnitt übergehen, weil wir diesen Teil unseres Designs bereits fertiggestellt haben. Was ich hier eigentlich tun werde, ist zu diesem Teil meines Designs zu springen. Benutze meinen BG-Kreis. Und ich werde tatsächlich in dieser Farbe verwenden. Und mal sehen. Ich kann dann senkt die Fettleibigkeit, zum Beispiel. Oder ich kann es sogar besser machen. Wählen Sie eine Hintergrundunschärfe und gehen Sie dann mit 5050. Und dann acht in Witz und Entschuldigung, bei Fettleibigkeit. Und was wird das tun? Wird es nur ein wenig Differenzierung zwischen der Karte, dem Kreis und all diesen anderen Elementen bringen ? Also denke ich, das wird gut funktionieren. Checkpointing Anti-Helden, Helden Form. Das ist in Ordnung. Maske ist unten. Okay, jetzt gehen wir weiter und gehen zu unserem Einkaufswagen. Um das zu tun, brauche ich hier ein Logo. Ich werde unser Visa und MasterCard-Logo hier von einer Notwendigkeit einige Nummern benötigen, einige Namen und ein Datum genau hier. Also lasst uns mit all diesen Dingen anfangen. Um loszulegen, werde ich gleich hier springen, mein Logo finden, ziehen und in Position legen. Und mal sehen. Ich werde es hier positionieren und sicherstellen, dass es in meiner Karte ist. Wie Schulden. Ich werde es dort positionieren. Paul Schicht, 12341234. Das finde ich gut. Ja. Und jetzt werde ich es von hier exportieren. Um das zu tun, werde ich Control oder Command und E halten, und ich werde es als B und G exportieren. Der Grund, warum ich das mache, ist, weil ich das Design verwerfen und es in diesen Designs verwenden werde . Also werden wir im Grunde das gleiche Design haben, aber dieses Logo ist nicht wirklich gut mit Skalierung. Wenn ich dir das zeige, kannst du sehen, dass es sich hier ändert. Und wenn ich die Umschalttaste halte und diese geformte verzerrt und so weiter. Das ist also nicht wirklich alles. Na ja. Ich werde es auch auf meinem Desktop umbenennen. Also werde ich es in Log-Log Schrägstrich Farbe umbenennen. Und dann werde ich gleich hier zurück springen. Wählen Sie eine graue Version exportiert aus. Also würde er Kontrolle oder Befehl E als PNG exportiert. Und ich werde Schulden zu einem Logo hinzufügen, schwarz und weiß. Und dann werde ich die Dosis zu einem Drag auswählen und sie direkt hier fallen lassen. So können Sie sehen, dies ist Logo-Farbe. Dies ist Logo auf schwarz und weiß. Und offensichtlich, wenn Sie das nach unten skalieren, wird es gut skalieren. Ohne Probleme. Offensichtlich ist die Qualität nicht so groß, aber Sie werden in der Lage sein, damit zu arbeiten. Trotzdem. Ersetzen Sie diese. Ich werde dafür sorgen, dass sie so in der Mitte sind. Ich positioniere sie in der ursprünglichen Position genau hier. Und Sie können auch die Standardversion direkt hier verwenden. Also als VG-Version, wenn Sie wollen, aber ich werde es einfach für jetzt verstecken. Ich werde dunkel schwarz und weiß zu Logo verstecken. Und hier haben wir unser originelles Logo. Was ich eigentlich für diese große Version tun werde, ist die ursprüngliche verwendet solide mich diese beiden verstecken. Lokale Puschkin White und ich werde mein mittleres Logo verwenden. Versteck all diese anderen. Und da haben wir. Das erste, was ich tun werde, ist eigentlich meine Kartenlogos zu verwenden. Also werde ich Visa und MasterCard Logo verwenden. Also habe ich im Grunde dasselbe getan. Entschuldigung. Das ist passiert, wenn Sie es per Drag & Drop in Position ziehen. Ich möchte es drinnen ziehen und ablegen. Also hier haben wir alle unsere Logo-Details. So können Sie sehen, wir müssen aktuelle schwarz-weiß und in Farbe haben wir Visum in Farbe und weiß. Ich lade diese auch von und Wasserelemente herunter. Also da hast du es. Wie Sie sehen können, verwende ich all diese Vermögenswerte. Schönes Glied. Also Shift, stellen Sie sicher, dass Sie auf der Leitung sind. Schicht 1234. Mal sehen, ob wir da sind. Wir sind jetzt, also sind wir bei 40. Und was ich tun werde, ist, sie zu gruppieren. Also werde ich haben, muss Gruppe bekommen haben. Und ich werde auch die SAR-Gruppe so haben. Und ich werde sicherstellen, dass ich meine Änderungen vornehme und meine Staaten mache. Aber vor all dem, lasst uns jetzt voran gehen und lasst uns. Zuerst senkte die Fettleibigkeit nach unten dieser Schwarz-Weiß-Fusionen. Und für diese erste werde ich meine MasterCard ganz verstecken, also bin ich einfach mit dem Visum übrig. Was ich als nächstes tun werde, ist, dass ich das gleiche für das Logo machen werde, also werde ich diese Änderungen vornehmen. Also nennen Sie es Logo. Und was ich als Nächstes tun werde, ist Text zu verwenden. Gehen wir also voran und duplizieren Sie diesen Text zum Beispiel. Positionieren Sie es hier unten, stellen Sie sicher, dass es von links geht. Und ich werde einfach ein paar Zahlen dort verwenden , nur um anzuzeigen, dass dies tatsächlich eine Karte ist. So 367, um Platz zu machen, oder 282 bis 938 zu 90372, oder Sie können einfach alle alten Zahlen verwenden. Es liegt wirklich alles an dir. Also sind wir bei 48. Wenn es denkt, dass das nicht wirklich gut funktioniert, können Sie es mit 90 versuchen, aber ich denke, 48 funktioniert gut mit dieser Fallposition. Es ist irgendwo hier oder wir können es hineinschnappen, in die Mitte, wie es jetzt ist. Und wir können diese Informationen auch noch weiter nach unten verschieben, wenn wir dies wünschen. Aber jetzt lasst es uns einfach da lassen, damit wir diese untersten Informationen beenden und sehen können , wie das aussehen wird. Also werde ich dieses duplizieren, es ein wenig nach unten positionieren. Und mal sehen, für diesen hier kann ich etwas Kleineres benutzen, also nennen wir es 36. Nun, mal sehen, wie 24 es aussieht. Ja, 18-24 wird viel besser. Also mal sehen. Sie läuft am neunten Monat 2021 ab. Ich werde es duplizieren. Stellen Sie sicher, dass es richtig ausgerichtet ist und geben wir ihm einen Namen was der Name war, den wir dort tatsächlich verwendet haben. Also lassen Sie es uns überprüfen. Wir haben Michael Jacobs benutzt. Also lasst uns den gleichen Namen auf Oldies verwenden. So wie das. Ich stelle sicher, dass ich es 40 von meiner Karte positioniere. Sie können auch so wählen, gut Tiefe 1234. Und Sie können sehen, dass wir bei all diesen 40 sind. Was wir also auch tun können, ist sicherzustellen, dass wir bei 40 nach unten sind, um 123456 zu verschieben. Und lassen Sie uns jetzt mit diesen Logos sehen, stellen Sie sicher, dass Sie MasterCard auch auswählen. Also sechs, jetzt sind wir bei 60, wir sind bei 60. Und ich kann auch diesen Trick machen, den ich dir schon gezeigt habe. Stellen Sie also sicher, dass Sie Rechteck verwenden, gehen Sie von oben nach unten im Text. Und nun positionieren Sie diesen Text in der Mitte zwischen Ihrem Logo und anderen Texten. Und da haben wir es. Wir haben unser Kartendesign abgeschlossen. Nun, was ich tun werde, ist eigentlich alle diese Gruppen. Also werde ich das hier positionieren, Karte BG, geben wir ihm diesen Namen. So wie das. Ich werde sie gruppieren. Nennen Sie es Kreditkarte oder einfach Karte. Ja, geben wir Ihnen den Namen der Beute aufgetreten weil wir bereits Karten haben, damit wir sie unterscheiden können. Also mal sehen, wir haben Hintergrundkreis hier, wir haben einen Wagen. Wir haben diesen Text, Ihren täglichen Begleiter, und werden Michael Jacobs aus irgendeinem Grund auf uns gehen. Das ist in Ordnung. Hier, nachbestellt. Das ist also unser Strom. Nun, was wir tun können, ist tatsächlich einige andere Farben zu verwenden, die nicht Teil unseres Designs sind. Also werde ich einfach eine dieser Farben verwenden. Also werde ich tatsächlich zum Gradienten gehen, nur um es ein bisschen schicker zu machen. Und mal sehen, ich kann das hier drehen. Ich kann das hier drehen, zum Beispiel, einige zwei so machen. Auf der dunkleren Farbe. Ich werde diese Farbe anwenden. Auf die hellere Farbe werde ich die gleiche Spalte anwenden. Und dann auf einer leichteren Version werde ich einfach so etwas tun. Und dunklere Version. Vielleicht kann ich sogar ein wenig dunkler gehen, um diese Art von leuchtendem Ergebnis zu erreichen oder wie Sie es nennen möchten. Ich denke, das Visum wird hier gut funktionieren, aber wie Sie sehen können, müssen unsere Briefe weiß sein. Versuchen wir es mit dieser Farbe. Ich denke, es funktioniert gut. Und für unser Logo, was wir auch tun können, ist einfach in diesen ursprünglichen Zustand zu springen und dies hier zu ändern. So können wir immer noch unser Logo lesen, aber jetzt ist der Text weiß. Und das ist es für die erste Version, ich werde jetzt zurückgehen und Control oder Command K drücken, um dies als Standardzustand zu verwenden. Also wieder einmal, wir sind in Standardzustand für unsere Visa-Karte. Lasst uns jetzt weitermachen und eine weitere erstellen. So wird dies in Standardzustand für die Visa-Karte sein, aber schwarz und weiß, so v sub w. So schwarz und weiß. Und ich werde hier reinspringen, mein Visum benutzen, schwarz-weißes Fell, Disziplin. Und da haben wir es. Und wir können das Logo nach Belieben ändern, wenn wir brauchen. Was wir als Nächstes tun werden, ist, einen anderen Staat zu schaffen. Wir werden es MasterCard nennen. Und im Grunde das Gleiche tun. So zeigen MasterCard verstecken Visa, stellt sicher, dass Schwarz-Weiß-Version versteckt ist. Und das ist es im Grunde für die MasterCard. Und nun gehen wir zur neuen Master Card in staatlicher Qualität. Tut mir leid, MasterCard. Das W für die schwarz-weiß, springen in MasterCard und geben dies zu fallen und geben diese 0 und Terry Earth. Das sind also unsere Karten. Und jetzt haben wir Schulden abgeschlossen. Nun, was ich als nächstes tun werde, ist eigentlich, dass ich diese beiden gruppieren und eine Komponente daraus erstellen werde . Und wenn jemand schwebt, wird es ganz einfach sein, das zu zeigen. Also lasst uns das machen. Was ich gesagt habe, ist, wenn sie schweben und wir den ersten benutzen werden. Also Standardzustand für diesen, wenn sie schweben, wird im Grunde ein wenig zunehmen und ein wenig mehr in der Größe zeigen. Also lasst uns das machen. Also lasst uns diese beiden gruppieren. Also kontrolliere G, wir werden es Card Hover nennen, nur damit wir wissen, was es ist. Drücken Sie die Steuerungstaste. Und das einzige, was ich hier hinzufügen werde, ist Horace Zustand, nennen Sie es schweben oder aktuelle schweben Eile, wollen es nennen. Und jetzt auf schweben, werde ich einfach meine Kreditkarte erhöhen und nur ein bisschen. Also zwei, so etwas, zum Beispiel, werde ich sicherstellen, dass ich immer noch in meinen Mittelpunkt bin, so etwas. So können wir in den Standardzustand gehen, in den Horror-Zustand, und wir können zwischen all diesen Zahlen überprüfen, ob alles gut aussieht, denke ich, das tut es. Und noch eine Sache, die ich tun werde, ist auf den Standardzustand, ich werde einen Schlagschatten auf meiner Karte hinzufügen. Also mal sehen, wir können es öffnen. Wir können in den Hintergrund Kreis gehen und wir können diesen schönen kleinen Schlagschatten hinzufügen. So zum Beispiel 20 bis 2050. Mal sehen, wie das funktioniert. Es zeigt mir nichts, weil einige Hand es unter Kreis tun. Also wähle ich das Auto BG und mache dann den Schatten. Also ist es 10x 2050, ich denke, sieht gut aus. Und mal sehen. Ich werde die Fettleibigkeit auf 0 reduzieren. Und dann können wir zum Warenkorb schweben gehen, Kreditkarte, Karte, die bg, und erhöhen diese Fettleibigkeit zurück zu, sagen wir 20%, um zu sehen, wie das funktioniert. Oder vielleicht etwas weniger. Also vielleicht 12 oder zehn. Ich denke, zehn funktionieren gut. Jetzt endlich, lasst uns weitermachen und es ausprobieren. Bevor wir dies tun, müssen wir zurück in den Standardzustand wechseln. Und klicken Sie auf Vorschau. Also, jetzt, da die Vorschau geöffnet ist, können Sie sehen, dass wir die Karten-Schaltfläche ausgewählt haben, funktioniert immer noch gut. Alles sieht gut aus. So jetzt können Sie sehen, wie verwerfen wirklich schön aussieht. Aber wenn Sie den Mauszeiger bewegen, können Sie sehen, dass es zunimmt und diese Zahlen ändern sich. Wir haben auch diesen schönen Hintergrundschatten, der aus dem Nichts erscheint. Sie können auch die Größe des Kreises reduzieren, wenn Sie möchten. Aber es sieht alles gut aus, wenn Benutzer so runterkriechen. Also taucht das Interface im Grunde aus. Also ändert sich nichts drinnen wirklich. Alles, was sich ändert, ist die Karte selbst. Also denke ich, es funktioniert gut. Lassen Sie jetzt gehen und bearbeiten Sie diese Karte, um nur ein wenig mehr. Also, was wir tun können, ist, dass wir in unsere Karte selbst springen können. Und wir können weitermachen und ein paar Formen hinzufügen, nur um die Dinge ein bisschen mehr aufzupeppen. So kann ich so geformt hinzufügen. Ich kann ein Wiederholungsraster wie dieses verwenden. Ich kann den Rahmen entfernen und das Wiederholungsraster drehen. Aber zuerst heben wir die Gruppierung auf, nennen es Rechtecke, die zu so etwas gedreht werden. Sagen wir mal. Tod zu schreiben funktioniert gut. Irgendwo positioniert. Nur damit Sie in diesem Winkel nicht sehen können. Vielleicht drehen Sie es nur ein wenig. Sehen Sie Spieler auf mit der Position. Und ich denke, das sieht gut aus. Ich werde dann Einsicht springen. Er hatte Kontrolle x zwei Position, die im Inneren werde ich die Kontrolle von v treffen, positionieren Sie es den ganzen Weg nach unten, traf Kontrolle D auf dem aktuellen BG. Damit ich es positionieren kann. Und dann werde ich meine Maske benutzen. Also wählen Sie diese beiden Shift Control M und was das tun wird, ist, dass es diese Formen maskieren wird. Also werde ich es Zeilen nennen. Alle Rechtecke. Wie auch immer Sie es einfach nennen möchten, ich kann jetzt voran gehen und die Gruppierung aufheben, wenn Sie möchten, aber ich kann sie immer noch innerhalb dieses Ordners lassen. Das Einzige, was ich tun werde, ist, die Fettleibigkeit zu senken. So zum Beispiel 10%, ich denke, es funktioniert ziemlich gut. Was ich auch tun werde, ist Control C zu drücken und zu jedem meiner Staaten zu gehen, um es zu stützen. Also positionieren Sie es den ganzen Weg nach unten. Stellen Sie sicher, dass es in allen Staaten unten ist. So Auto BG und dann Rechtecke. Also erste Ebene oben, wie Sie sehen können, gehen Sie auf die MasterCard und tun Sie die gleichen Dinge. Also genau hier. Und schließlich MasterCard, schwarz und weiß, klicken Sie hier. Und da haben wir es. Wir haben abgeschlossen. Und dass ich denke, es funktioniert ganz gut. Nun, es ist jetzt die Vorschau-Schaltfläche und noch einmal sehen, wie das aussieht. So können wir sehen, dass wir diese schönen Linien haben, aber wie Sie sehen können , sind sie nicht mehr hier, also müssen wir sie auch in diesem Zustand einfügen . Also lassen Sie uns zurück hart schweben Kreditkarte, und wir werden diese Rechtecke verwenden. Springen Sie in meine Karte, Horror Clicker Idee, Kreditkarte Rechtecke. Es gibt, man kann sehen, wagen, aber sie zeigen sich nicht aus irgendeinem Grund. Ich weiß nicht, warum. Versuchen wir es noch einmal. Hier sind sie. So Rechtecke. Und ich werde ihn dort positionieren und sicherstellen, dass sie nicht in der Schlange stehen. Sollten sie erleuchtet werden Lindert, und wir werden diese löschen. Also in Dreck. Und irgendwie es so Standardstaat, Hafenstaat. Bringen wir dir das noch einmal. Wie Sie sehen können, nehmen sie gut zu. Sie bewegen sich ziemlich schön und alles funktioniert, wie es sollte. Sie können immer springen Seite und fügen Sie einige Hintergrundtextur hier, wenn Sie möchten, können Sie einen komplexeren Farbverlauf hinzufügen. Es liegt wirklich an dir und was du tun willst. Also Domain und wichtiger Faktor hier ist, ist, dass wir diese Klasse Karte fertig, so dass es auf all diese passt, weil wir gehen, um in eine Nachricht dieser Kreditkarte für alle diese Karten und unten springen. Also, was ich jetzt für Sie empfehle, ist, Control S zu drücken, um Ihr Design zu speichern. Und was wir eigentlich als nächstes tun werden, ist in eine hinzugefügte alle diese Karten springen. Was wir also tun werden, wenn es fertig ist, Zeile jetzt zu speichern, ist in hier zu springen. Also werden wir unsere Karte hier fallen lassen. Also hier haben wir sie, die Kreditkarte. Ich werde es hier in Position ziehen und ablegen. Und ich werde mit dem erwähnten Namen rumspielen. Deshalb haben wir diese PNGs aufgenommen , nur damit wir mit der Position so herumspielen können. Also halte ich die Umschalttaste gedrückt und ziehe sie den ganzen Weg nach unten nach hier. Und was ich als Nächstes tun werde, ist mit Kreditkarte reinzuspringen. Und ich werde einige dieser Details einfach neu organisieren. Also werde ich mit dem Logo beginnen. Ich werde mein ursprüngliches Logo ausblenden und zum Beispiel Logo-Farbe einschließen. Oder nennen wir es Protokoll von Schwarz-Weiß. Mal sehen. Wie können wir das tun? Mal sehen, denn ich brauche die Version mit diesem und mit diesem weißen Text. Vielleicht könnte ich das exportieren, aber betrügen wir ein bisschen. Lassen Sie uns zuerst unsere Logo-Farbe hier positionieren. Ich werde seine Größe reduzieren und es auf 40 positionieren, sagen wir so. Jetzt lasst uns mehr Worte für Schicht 1212, vielleicht 20 ist besser. Jetzt Visa und MasterCard, wir werden sie auswählen, stellen Sie sicher, dass sie in der Mitte sind. Alle von ihnen und reifen, wir senken und entscheiden, OK, nicht solide, sehen, sehen, wie wir das tun können. Und sie sind immer noch nicht von Jinx oder Lasst uns mit Indies gehen. Zuerst. So wie das. Springen Sie nun in einen Must-Have-Strom wie diesen. So stellen Sie sicher, dass Holländer, die wie selbst entscheidet. Und du wirst immer einige dieser Probleme haben. Stellen Sie also sicher, dass Sie sie auswählen und dass Sie wissen, was Sie im Grunde tun. Also, was ich tun werde, ist eigentlich beide in den Logo-Ordner fallen gelassen , nur so dass ich sie mit dem Logo ausrichten kann, trocknen sie Alto wirklich schnell. Positionieren Sie meinen Logo-Ordner, entscheiden Sie sich zum Beispiel, Dan o, positionieren Sie sie am linken Rand, stellen Sie sicher, dass sie 20 sind. Und ich werde vielleicht MasterCard-Ordner verstecken. Sie können dies immer erweitern, wenn Sie möchten, so. Aber ich glaube nicht, dass es notwendig ist, das zu viel zu tun. Herr Fettleibigkeit. Und was ich tun werde, ist eigentlich mein Logo benutzen, Schwarz und Weiß. Positionieren Sie es bis zur Position hier. Oder Größe, doppeltippen. Und ich werde mein gemeines Logo verwenden. Ich werde meine Brieftasche verstecken und einfach meinen Text verwenden, um die Größe zu reduzieren. Und um es hier an Ort und Stelle zu positionieren. So können Sie einfach auf diesen Punkt klicken und Sie können ihn nach Belieben neu positionieren. Mal sehen, ich denke, das ist in Ordnung. Vielleicht nur ein bisschen runter. Ja. Wir können es so nennen. Also, was wir dann tun können, ist die Kontrolle C zu drücken, um es aus unserem ursprünglichen Logo, Control V zu kopieren Und jetzt können Sie voran gehen und es so positionieren. Und ich denke, es wird gut für unser Beispiel funktionieren. Was wir als nächstes tun werden, ist offensichtlich die Arbeit an den Kanälen oder lassen Sie uns alle diese schließen. Wie gesagt, wir haben das beendet, wir haben alles vorbereitet. Wir haben das Logo versteckt, wir haben alles versteckt. Also werde ich einfach hier springen. Und lasst uns zuerst diese beiden herunterladen Siehe. Wenn sie jetzt bei 24 sind, lassen Sie uns sie zum Beispiel auf 16 senken. Stellen Sie sicher, dass sie so weiß sind. Und ich werde sie nach unten positionieren. Also lasst uns runter und runter gehen. Mal sehen, wir sind bei, Ich denke, 20 Jahr, also 20 auf allen Seiten. Genau hier. Und wenn ein Markenzeichen alt Sie sehen können, sind wir 20 Bereich. Jetzt kann ich auf diese 124 klicken. Und funktioniert das? Nun, mal sehen. Nein. Aber was wir auch tun können, ist, den Abstand zwischen ihnen zu senken. Und jetzt wird es nur gute Mischung funktionieren. Sie verwenden nur fett, Sie verwenden nur weiße Hand Schulden im Grunde es werden wir den gleichen Trick tun. So Position ist ein Rechteck nach oben. Vergewissern Sie sich, dass Sie beide verlangsamen. Klicken Sie hier rechts und dann in ein entfernen Sie Ihr Rechteck springen. Und was wir als Nächstes tun werden, ist, dass Sie sehen können, dass wir jetzt unsere Karte haben. Es sieht schön aus. Was wir als Nächstes tun werden, ist im Grunde die gleichen Informationen über alle unsere Staaten zu verwenden . Um Ihnen zu zeigen, wie das gemacht wird, können Sie einfach alle Ihre Informationen anstelle der Karte Vg auswählen. Also werden wir es nicht ändern. Klicken Sie auf Steuerelement C. So. Gehen Sie zum Visum, schwarz und weiß, zum Beispiel. Löschen Sie alle Ihre Informationen, verwenden Sie Ihre Karte Bg. Wir hätten das auch kopieren können. Gehen wir also zurück zum Standardzustand und wählen Sie alles aus. Hit Control C. Gehen Sie zum Visum, Schwarz und Weiß, öffnen Sie alles hat alles löschen. Und einfach basiertes Papageien wieder rein. Mal sehen, das hat nicht funktioniert. Lassen Sie uns einfach Karte VG, Kontrolle V, und jetzt löschen Sie die aktuelle BG, so dass wir es als aktuelle Schwarz und Weiß haben können. Das einzige, was wir jetzt tun werden, ist, dass wir zuerst zwischen allen laufen und dasselbe für sie tun. Und dann können wir einfach springen, ändern und Blogger drinnen. Und schließlich MasterCard schwarz und weiß. Und entfernen Sie alle diese und entfernen Sie das. Und jetzt, weil dies MasterCard schwarz und weiß ist, kann ich einfach in Schulden in niedriger und dieses Original verlassen, Ich kann einfach zu lore Visa Logo wird gleich bleiben. Das war's. Mastercard Also tun Sie das Gleiche hier. Also zeige das und entferne das. Und das ist bei 0, das ist in Ordnung. Gehen wir zu Visa, Schwarz und Weiß. Also Reesa, wir werden dieses Versteck zeigen und damit, und wir sind auf Standardstaat mit Visum. Das ist in Ordnung. Da haben wir es. Wir haben in diesen abgeschlossen. Wie Sie sehen können, haben wir Visa-Kreditkarten. Dieser Text ist im Grunde der gleiche wie er war, also sieht alles schön und sauber aus. Was ich als nächstes tun werde, ist tatsächlich zu kopieren verwerfen und es auf einige dieser Orte zu stützen. Also kann ich einfach Control C drücken, oder was ich tatsächlich tun kann, ist eine zusätzliche Komponente davon zu machen, aber ich werde hier nicht damit herumspielen. Also werde ich nur Control C verwenden, weil dies sowieso die untergeordnete Komponente dieser Master-Komponente ist. Also kann ich direkt hier eine Cartoon-Form springen, gute Kontrolle V und es so an Ort und Stelle bewegen. Danke. Vergrößern Sie wieder. Und was ich tun kann, ist, es einfach auf der obersten Karte zu lassen. Vg werden gelöscht, und ich werde dann auf meine Debitkarten gehen und im Grunde die gleichen Panzer oder CU Control V, positionieren Sie es in Position wie dieses große Gewand EEG und entfernen Sie es und gehen Sie auf die andere. Kontrolle V. Positionieren Sie es an Ort und Stelle. Und da haben wir es. Ich werde das auch entfernen. Und was ich endlich brauche, Betrug hier ist, dass ich die gleiche Karte benutzen werde bevor wir zurück gehen und an unseren Illustrationen und Animationen arbeiten, gehen wir zurück auf die gleiche Karte. Kreditkarte getroffen Control C. Und ich werde in diesen Abschnitt springen, könnte v kontrollieren. Stellen Sie sicher, dass ich in der Mitte meines Warenkorbs Position hier, die dies zu entfernen und das ist im Grunde es. Also jetzt gehen wir weiter, weil wir genau die gleichen Karten haben. Wir wollen tatsächlich einige Änderungen an ihnen vornehmen. Und weil, wie gesagt, dies die Master-Komponente ist, sind all dies untergeordnete Komponenten. Wie Sie sehen können, funktioniert alles gut und nahtlos. Also, was ich dort tun werde, ist im Grunde diese Änderungen vorzunehmen. Beginnen wir also mit Visa-Kreditkarten, zum Beispiel. Ich möchte hier eine andere Farbe hinzufügen. Also lasst uns gleich hier springen. Und mal sehen, wollte ich unsere ursprünglichen Farben hinzufügen? Also vielleicht dieser hier. Also werde ich gleich hier springen, hier klicken und unsere ursprüngliche Farbe hinzufügen. Klicken Sie auf dieses leichtere. Und ich werde auch Originalfarbe hinzufügen. Dann springe ich hier zurück und erhöhe das hier. Ich kann das vielleicht ein bisschen verringern, so etwas, nur um es ein bisschen interessanter aussehen zu lassen. Offensichtlich, wenn Sie dieses Visa-Logo hier nicht mögen, können Sie immer hineinspringen und einfach in weiße verwenden. Also kann ich das zum Beispiel kopieren. Also würde er Control C oder eine Rechtsklick noch bessere Kopie. Und dann kann ich zu Visa gehen, Schwarz und Weiß. Wählen Sie meine aktuelle VG aus, klicken Sie mit der rechten Maustaste auf das Und Sie werden nur dieses Erscheinungsbild in den Zustand dieser Komponente einfügen. Ich kann es schließen, weil ich damit zufrieden bin. Ich bin froh, wie das aussieht? Und ich kann einfach auf meine MasterCard übergehen. Also werde ich einfach hier doppelklicken. Kreditkarte, benutze meine MasterCard. Und jetzt können Sie die Kraft der Komponenten direkt dort sehen. Ich werde dasselbe tun. Also werde ich Einblick gewinnen, MasterCard. Mal sehen, ob ich es ausgewählt habe. Ich habe ein paar tolle Autos, BG, mit der rechten Maustaste. Wir fügen Aussehen ein. Stellen Sie also sicher, dass sie gleich sind, weil sie Kreditkarten sind. Oder Sie können sogar weiter gehen und einige zusätzliche Änderungen an diesem vornehmen. Also lassen Sie uns zum Beispiel zu unseren Farben zurückspringen. Oder noch besser: Du kannst einfach hier springen und diesen noch ein bisschen dunkler machen . Klicken Sie hier. Das hier ein bisschen dunkler, oder sogar umgekehrt. Also vielleicht für so etwas, vielleicht klicken Sie direkt hier, stellen Sie sicher, dass Sie in die andere Richtung gehen, um so etwas. Und ich denke, funktionieren sie ganz gut? Ich kann das schließen und wir können an unseren Debitkarten arbeiten. Also auf unseren Debitkarten ist das, was wir tun werden, eigentlich genau das Gleiche. Ich werde nur einschließen, einige kleinere Änderungen in kleinen Anpassungen an hier einschließen. Also werde ich noch einmal meinen Hintergrund für die dunklere Farbe auswählen. Ich werde jetzt tatsächlich Disk-Farbe auswählen. Und vier in hellere Farbe. Ich werde die gleiche Farbe für die dunklere Farbe auswählen. Wir werden offensichtlich umgekehrt um Tofu gehen, zum Beispiel irgendwo hier herum. Und für die hellere Farbe, können wir irgendwo hier weitermachen. Ich kann mit der rechten Maustaste kopieren, damit sie auch in meinen anderen Garten sitzen können. Klicken Sie dort rechts. Wir werden eine MasterCard wählen. Klicken Sie mit der rechten Maustaste. Ich denke, Indien sieht ziemlich gut aus. Aber noch einmal, lassen Sie uns jetzt weitermachen und einige dieser zusätzlichen Änderungen vornehmen. Vielleicht ist dieses wirklich schöne Blau, vielleicht sogar helleres Blau, bis hin zu Weiß oder so etwas. Ich denke, es wird ganz gut funktionieren. Also, jetzt, da wir abgeschlossen haben , können wir jetzt weitergehen, um zu verwerfen. Aber bevor wir es tun, sollten wir vielleicht weitermachen und diese Abschnitte beenden. Und für D-Abschnitte, alles, was ich wirklich tun möchte, ist im Grunde Komponenten für sie zu erstellen. Und ich werde verschiedene Komponenten mit grundsätzlich dem gleichen, dem gleichen Hover-Effekt erstellen . Und im Grunde werden wir ähnliche Art von Hover-Effekt wie hier haben. Also werden wir tatsächlich diese Elemente verwenden. Also werde ich hier von dieser Content-Karte reinspringen. Ich werde Elemente Unkrautkontrolle C verwenden. Nehmen Sie sie aus, gehen Sie zurück und öffnen Sie diese Karte Info PID-Kontrolle v Ich werde meine oder im Grunde zurück positioniert und zwei hier einschließen. Also habe ich das Protokoll BEG von hier nicht entfernt. Wählen Sie diese aus, um sicherzustellen, dass sie heruntergefahren sind. Ich bin nicht wirklich sicher, dass Weißen Disc nach unten bewegen. Also ist es gut, diese Farbe dahin zu ändern, nur damit ich meine Elemente ein bisschen besser sehen kann. Also ein Pixel nach unten, das war's. Und was ich tun werde, ist einfach in sie zu springen und es ist lokalisiert. Also hier ist es, Kreis. Ich werde nur die Größe etwas vergrößern und sicherstellen, dass es hier ist. Card BG stellt sicher, dass Sie die gleiche Größe wie diese neue haben. Und Sie können immer überprüfen, so 792587700 bis 587. So wie das hier. Und wie Sie sehen können, sind wir es im Grunde wagen, ich werde es einfach so etwas nach unten bewegen. Und das ist in Ordnung. Ich werde tun, ich gehe zu Lord, Sie sind im Grunde unten von ihnen später. Also lasst uns nicht mit all diesen Elementen herumspielen , denn offensichtlich haben wir jetzt ein bisschen mehr Platz. Vielleicht kann ich sogar die Größe von D erhöhen, Also 20. Lassen Sie uns jetzt voran und drehen Sie sich dazu, zum Beispiel hier. Wo ist unsere Linie? Neugierig? Lassen Sie uns auch Schulden lokalisieren. Siehe 20. Jetzt arbeitet Dan viel besser und vergrößert die Größe ein wenig. Und Sie können natürlich mit diesen Elementen so viel spielen, wie Sie wollen. Aber lassen Sie sich nicht zu sehr in sie verfangen, weil sie nur sekundäre Elemente sind , weil ein deutliches Geschehen hier Ihr Hauptanliegen ist. Was ich als nächstes tun werde, ist einfach niedriger in der Fettleibigkeit nach unten. Aber bevor ich es tue, kann ich diese Elemente vielleicht kopieren und in all diese einfügen. Also drücken Sie Control-C, springen Sie hier, um BG Kontrolle zu schnitzen Ich werde es den ganzen Weg bis hier positionieren. Mal sehen. Stellen Sie sicher, dass sie wie Schmutz auf allen Seiten ausgerichtet sind. Das sind sie. Und wenn wir uns in diesem Hintergrund wieder ändern, können wir überprüfen und sehen, dass alles schön und sauber aussieht. So kann ich wieder zurück zu meinem Auto BG springen und tun das gleiche für die ersten, die BG Auto VG geschnitzt. Ich werde die Farbe zu diesem ändern. Und ich werde auch diese beiden kopieren und einfügen. Also, jetzt werde ich beide auswählen. Hit Control-C, gerade sortiert, Ich kann mich ein bisschen mehr Zeit zu Debitkarten gehen sehen. Irgendwo hatte er die Kontrolle V. Und ich werde diese Elemente auswählen, die Umschalttaste halten und einfach gedämpft herausschieben. Und um zu sehen, was ich getan habe, werde ich wieder die Farbe meines Autos ändern BG ich getan habe. Ich wähle meine beiden Elemente aus und schiebe sie bis hierher. Und dann ändere ich diese Elemente zurück. Und mal sehen, Position verwerfen, wo es ist. Also DES Elemente o Position in meinem ersten. Also hier. Diese Elemente o Position in meinem zweiten hier, was wir jetzt tun können, ist einfach die Fettleibigkeit aller von ihnen so zu senken. Also, wenn Sie 00 überprüfen können, und ich kann das gleiche für die Kreditkarten tun. Also, wo sie Elemente direkt unter unserem Pfeil positioniert sind, Herr Fettleibigkeit nach unten und tun das gleiche für diese. Nun, da wir das abgeschlossen haben, möchte ich im Grunde nur noch einige Hover hinzufügen. Also mal sehen, wir trennen Karten, MasterCard-Kreditkarten. Vielleicht können wir diese Namen ändern, weil wir Komponenten erstellen werden. Also mal sehen. Also Kreditkarteninformationen. Und wir werden es kopieren. Und das wird MasterCard sein. Dann werden wir für diesen, statt Kredit, Lastschriften verwenden und kopieren und entwerfen weil ich zu faul bin, um einige MasterCard und Lastschriften aufzuschreiben. Und da haben wir es. Jetzt können wir einfach Control K, Control K, Control K, Control K, Control K drücken, damit wir alle diese zusätzlichen Komponenten erstellen können. Also, was wir bei diesem ersten tun können, ist, dass wir tatsächlich, gehen wir zurück und verwenden die Farbe, wie wir es mit dem Original gemacht haben. Also Hit Kontrolle D. Und wann diese Farbe zu nennen, oder nennen wir es Karte bg Farbe. Lassen Sie uns dasselbe für alle tun. Also lass uns das schließen. Controller D, Karte, bg, Farbe, Control D, so. Und schließlich für diesen, was ich dann tun werde, ist, wählen Sie sie einfach auf See. Ich kann nicht, ich muss eins nach dem anderen auswählen. Ich werde mal sehen, Schreibtischwissenschaftler. Ja. Und ich werde es in unserem Standardzustand auf 0 senken. Klicken Sie hier, verwenden Sie dieses Farbchlorid bis zu 0 mit meiner 0 Taste auf meiner Tastatur. Genau hier, 0. Spring zurück zu hier. Und schließlich diese, ändern Sie die Farbe und alles zurück auf 0. Und das sind all unsere Veränderungen in unseren Hauptstaaten. Nun, was wir eigentlich tun werden, ist einfach nur Deckungszustände für alle von ihnen zu schaffen. Und ich werde Ihnen einfach zeigen, wie Sie Ihrem Design ein wenig mehr Interesse hinzufügen können . Also, um diese Howard-Staaten zu schaffen, ist das einzige, was ich tun werde, wirklich ganz einfach. So erstellen Sie einen Zustand Qualität Macht. Kopieren Sie diesen Text, damit ich ihn später verwenden kann. Und auf unserer Kreditkarte, mal sehen, vielleicht können wir zum Kreditkartenhintergrund springen. Wir können ein bisschen Schatten hinzufügen. Mal sehen. So 5510, zum Beispiel. Oh, tut mir leid. Noch einmal dieses falsche verwendet. Also gehen wir zu unserem Warenkorb. Also Karte Bg, wir haben bereits diesen Schatten, aber wir werden ihn ändern. Also 55 und Sen, und lasst uns sehen, zehn in Fettleibigkeit. Also wollten wir nur ein bisschen herausstechen. Also werde ich mal sehen, nur um mich daran zu erinnern, dass fünf, 5-10. Als Nächstes werde ich meinen Pfeil benutzen und ihn so 20 Pixel nach unten bewegen. Als Nächstes werde ich meine Elemente wieder einbeziehen. Und schließlich, fügen Sie meine Farbe zurück. Und die Elemente werden eigentlich zehn sein. Mal sehen, 20. Lassen Sie uns bei 151815 finden wird ganz gut funktionieren. Sie können immer noch all das lesen. Und, aber weil ich nur eine schnelle Änderung vornehmen wollte, tauschen Sie das mit Weiß aus. Genau so haben Sie es ein bisschen besser sehen können weil es immer noch Call to Action am Ende des Tages ist. Also Standardzustand, Horace Zustand. Und wir können immer zum Prototyp springen und Dynamit schweben. Einfache Notiz Und lass uns 0,4 Sekunden sehen. Lasst uns das benutzen. Und lassen Sie uns Leichtigkeit in out anstelle eines Ergebnisses verwenden. Das ist es im Grunde. Lassen Sie uns es testen und sehen, ob dieser erste funktioniert. Und bevor wir es auf all diese anderen angewendet haben. Also hier haben wir es. Wie Sie sehen können, funktioniert es wirklich gut. Wir haben alle diese Formen. Aber was wir auch tun können, ist vielleicht in unserem ursprünglichen Zustand, vielleicht können wir diese Formen schieben. So gibt es, wir können sie nur ein wenig animieren. Also lasst uns das machen. Also in unserem Standardzustand, was ich tun kann, ist einfach meine Farbe zeigen, meine Elemente zeigen, nur sortiert, ich kann sie sehen. Also in unserem Standardzustand, lassen Sie uns einfach unser Kreuz hmm bewegen. Mal sehen. 20 Pixel, richtig? Linie 20 Pixel, rechts, 20 Pixel nach unten eingekreist. Und dieser Moschee Kreis, mal sehen, 20 Pixel unten. Das ist also unten, das ist unten, das ist richtig, und das ist richtig, sich daran zu erinnern. Lassen Sie uns sie zurücksenken und Lamda-Kragen zurück. Und lassen Sie uns unsere Ergebnisse überprüfen. Mal sehen, ob das ist und uns eine Art visuelles Interesse geben. Mal sehen. Nichts ist wirklich mit ihnen passiert. Also lasst uns ein bisschen mehr erkunden und mal sehen, was wir tun können. Also lassen Sie uns sehen, auf schweben, vielleicht können wir versuchen, sie auch dorthin zu bewegen. Also Elemente, mal sehen, kreuzen 20 Pixel und diese 20 Pixel links induziert 20 Pixel nach oben. Und dieser Hintergrund so genannte C 20 Pixel hoch als auch. Mal sehen, ob das einen Unterschied gemacht hat. Sehen Sie, wie das aussieht. Hier. Wie Sie sehen können, ist es nur ein wenig Bewegung im Hintergrund hinzugefügt. Also das links, das, hat das aufgegeben und das oben. Also lasst uns das für alle tun. Also lasst uns jetzt zu diesem übergehen. Und lassen Sie uns im Grunde dasselbe hinzufügen. Also erinnere dich an phi 5-10. Also haben wir hier den Standardzustand. Sehen wir uns Kreditkarte an, BG, Schatten 55. Und ich werde den Schatten hier senken. Und ich werde tatsächlich dasselbe für den Standardzustand hier tun. So Auto B, G, habe ich von 5-10 gelernt, nur damit ich die Animation ein wenig klüger machen kann. Früher ist es ausgedruckt. Du kannst es sehen. Es ist nicht die glatteste Sache der Welt, aber es ist immer noch kleiner als mit diesem Hintergrundschatten. Also lasst uns jetzt voran gehen und diesen bearbeiten, so dass wir können. Lassen Sie uns zuerst sehen, was wir hier tun können. Wir haben unsere Farbe, wir haben unsere Elemente. Und lassen Sie uns schnell einen Horroreffekt erzeugen. Also schweben Zustände, und das wird offensichtlich innerhalb des Hovers genannt werden , oder wir werden diese Farbe einschließen. Wir werden die Elemente einbeziehen, aber lassen Sie sie bei 15% sein. Wir lassen C diesen Kreis nach oben 20 bewegen. Bewegen Sie sich auf diesem Kreis bis zu 20. Und diese beiden werden auch 20 Pixel nach links verschoben werden. Als Nächstes, Kreditkarte, BG. Wir werden sicherstellen, dass das um zehn Uhr ist. Und schließlich werden wir Indies zu ändern, zu weiß. Und wir werden auch den Pfeil 20 Pixel nach rechts bewegen. Also schauen wir es uns an und lassen Sie uns sehen, wie das jetzt funktioniert, da wir zwei haben. 43. Design erstellen: Gehen wir weiter und fahren Sie mit unserer nächsten Seite fort. Nächste Seite ist investieren. Also nochmals dasselbe, wie wir es immer mit diesen Seiten getan haben. Stellen Sie sicher, dass wir bei 70 sind. Zoomen, doppelklicken und ändern Sie dies, um Design zu gewinnen. Lassen Sie mich mein Mikrofon etwas weiter bewegen. Und ich werde dasselbe noch einmal tun. Also benutze Held Haupt nav, Kaffee. Wählen Sie diese beiden, löschen Sie u, um die V8-basierte Position m hier zu steuern. Und ich werde mich wieder in den Todesfällen ändern, also muss es investiert werden. Klicken Sie also direkt hier. Und jetzt gehen wir weiter und beginnen mit der Arbeit an unserem Design. Also lassen Sie mich schnell hineinspringen und kopieren und meine neuen Texte hier einfügen. Also investieren in eine glänzende Zukunft. Lass uns so sehen. Und mal sehen, vielleicht können wir sogar etwas Gewürz hinzufügen. Anstatt einfach nach unten zu scrollen, können wir hier klicken. Jeder kann uns hierher bringen. Also lassen Sie uns in ihm einen Helden sehen, wir haben den Text und lassen Sie uns Hauptknopf sehen. Wir wählen schweben. Und lasst uns zu einem Prototyp gehen. Und innerhalb des Horror-Zustands können wir klicken. Trigger ist Hover, Type, Auto, animieren und wählen Sie ein Ziel. Oder wir können dies auch ändern, um zu scrollen. Wenn der Benutzer also schwebt, können sie klicken und es wird zu diesem nächsten Teil scrollen. Also werden wir Investitionen wählen. Es wird also dorthin scrollen. Also, wenn ich Sie wieder einmal Vektor den Wunsch und gehen Sie zum Helden, gehen Sie zum Text. Ich möchte zum Standardzustand meiner Schaltfläche zurückwechseln. Und ich kann auf Vorschau klicken, sie vergrößern. Also in einem Hover und Klick, es wird mich zu diesem Raum bringen. Offensichtlich ist diese Navigation so, weil wir sie nicht anpassen können. Aber Sie können sich vorstellen, dass es zum Beispiel irgendwo hier codieren kann . So werden die Benutzer in der Lage sein, diesen Teil ein wenig besser zu sehen. Und natürlich, da kommt man als Designer ins Spiel, man muss diese Dinge Entwicklern erklären , damit sie es ein bisschen besser verstehen können. Jetzt springen wir hinein und ich möchte dieses Bild ändern. Also werde ich Drag & Drop und neue Bilder von diesem Kerl lächelnd. Und noch einmal, wie Sie mit all diesen Bildern sehen können, sind, haben junge Leute ausgewählt, weil das der Schwerpunkt dieser Bank ist. Sie wollen wirklich, dass junge Menschen dort sind meine Kunden. Also werde ich dieses alte Bild löschen, verschieben Sie es hier. Und schließlich, lassen Sie uns mit diesen noch mehr Songweg spielen, um diesen Schreib hier zu positionieren, zum Beispiel, ich werde in Orte dieser beiden wechseln. Ich werde hier klicken. So zum Beispiel. Ja. Und ich werde den Schreibtisch positionieren, um genau hier zu sein. Erfahren Sie mehr ist im Grunde gehen, um gleich zu bleiben. Und das ist unser Heldenbereich abgeschlossen. Gehen wir nun zum nächsten Abschnitt über. Und im Grunde wird das dasselbe sein, wie wir es bei allen vorherigen gemacht haben. Also im Grunde werde ich nur einige Symbole verwenden. Also mal sehen. Ich kann sie kopieren und direkt hier in meine Investitionen springen. Ich kann sie hier und AR einfügen, und mal sehen, ich kann, weil dies keine Komponente war, kann ich ein Komponenten- und Ruhestandsymbol erstellen. Und ich kann für alle diese grauen Klick mich Klocal springen, Klocal und machen lokale. Ich kann zurückgehen und im Grunde dasselbe tun. Also werde ich sie auswählen. Ich gehe zu Niger DEM und ich schüsse von hier, 1234. Und jetzt kann ich gehen und anfangen, diese Symbole darin aufzunehmen. Also werde ich hier Bildung setzen. Ich entferne diese und Umrissfarbe und -formen. Mal sehen. Also gehe ich später nach Florida Auflösung. Aber wie Sie sehen können, ist es passend. Und das war, lass uns unseren Selektor sehen. Also lassen Sie es uns umbenennen. Und Sie können Steuerelement v, keine Clique-Kontrolle Vdoppelklicken keine Clique-Kontrolle V Drücken Sie die Eingabetaste, um zu bestätigen. Und das ist im Grunde bekommen Bildung abgeschlossen ist, Immobilien oder fallen Sie es in. Ein entfernter r-Star. Family Safety Troponin, entfernt den Start und Ruhestand und tun das gleiche im Grunde. Also, jetzt, da das abgeschlossen ist und wir gehen voran und machen eine schnelle Speicherung. Also control s. Und jetzt, was wir tun wollen, wie Sie sehen können, haben wir diesen Text hier, und es ist ein wenig anders Abschnitt als die vorherigen Abschnitte. Aber im Grunde, wie gesagt, fast genau das gleiche. Was ich zuerst tun möchte, ist eine Schaltfläche für diese beiden zu verwenden, denn wie gesagt, wir werden diese Informationen kopieren, ist die gleiche wie bei den vorherigen Beispielen. Also, was ich tun werde, ist meine Tasten zu lokalisieren oder zum Beispiel, was ich mehr Tasten lernen möchte. Mal sehen, vielleicht kann ich das sogar benutzen, nur damit wir nicht zu viel nach unten scrollen. Und springen Sie in unseren Infobereich. Öffnen Sie beide und ich werde hier reinspringen. Erfahren Sie mehr Positionieren Sie es hier. Ich werde diesen entfernen, sollte Sicker kontrollieren. Springen Sie in den nächsten Abschnitt. Kontrollieren Sie V, um mehr mit außerhalb der Art zu tun, stellen Sie sicher, dass es ausgerichtet ist, und entfernen Sie diese. Das ist es im Grunde für diesen. Und jetzt lassen Sie mich reinspringen und anfangen, diese zu bearbeiten. Also, machen wir es umgekehrt, wenn alle diese Ordner geöffnet werden. Und fangen wir mit dieser Info an. Ziehen Sie es hier hinein. Steuerung D, zieh das hier her. Control D ziehen Sie diesen hier. Kontrolle, die du direkt hast, ist eins hier, genau hier. Ok. Jetzt kann ich all diese hohen DEM komplett schließen. Und jetzt kann ich in meinen Informationsbereich springen. Ich kann das alles öffnen und mal sehen. Ich habe diese beiden bereits bearbeitet, also brauche ich nur Bilder. Also lassen Sie mich meine Bilder Ordner öffnen und mal sehen, ich kann mein Bild per Drag & Drop drinnen. Das sieht gut aus. Ja, ja. Und ich ziehe ein anderes Bild hierher, wie dieses, aber ich werde doppelklicken und ich werde es mit meiner Shift-Taste vergrößern. Irgendwo hier. Ich denke, es wird gut funktionieren. So wie das hier. Oder vielleicht kann ich noch mehr mit bis, nur damit wir diesen Teil unseres Bildes schneiden können. Ich glaube, der Tod funktioniert gut. Und jetzt, weil das abgeschlossen ist, kann ich meine Ausbildung verstecken. Ich kann zu meiner Immobilie überziehen. Und mal sehen, für die Immobilien, was wir tun können, ist, dass wir mit diesen noch mehr spielen können. Also lassen Sie mich schnell drinnen springen. Und ich kann damit beginnen, diese Top-Texte zu kopieren oder mal sehen, so. Offensichtlich ist es viel schwieriger für mich, weil ich sie zu Adobe XD-Dateien verwende. Deshalb dauert dies viel länger, als es sein sollte. Aber im Grunde, alles, was Sie wissen müssen, ist, dass Sie diese Informationen in einer Art Word-Datei, einer Textdatei oder so etwas bekommen. Es wird also viel einfacher für euch sein, das zu bearbeiten als ich. Und offensichtlich wirst du weder mit der Kamera noch mit dem Mikrofon reden. All das wird für euch viel schneller sein als für mich. Also schreibe ich hier, ich werde weitermachen, wo ich aufgehört habe, und ich werde das alles ändern. So wie so. Als Nächstes werde ich meine Bilder in einbinden. Also fangen Sie mit diesem an. Ich werde vielleicht mehr mit nur ein bisschen unten. Also gibt es Jungs Kopf ist im Rahmen so. Und schließlich werde ich dieses Bild per Drag & Drop innerhalb von hier. Ich doppelklicke innen, halte die Umschalttaste Alt gedrückt und klicke mit der linken Maustaste, so dass ich es skalieren kann , sie in Rahmen positionieren vielleicht ein bisschen nach unten, so. Und das ist es im Grunde für diesen Abschnitt. Ich kann das alles schließen. Es sieht alles wirklich schön aus. Ich kann das hier verstecken, zeigte das hier. Und ich kann dann zurückspringen und anfangen, den nächsten zu bearbeiten. Also mal sehen. Das nächste ist eine Familien-Samenspitze. Sie werden es also nennen, in Ihre Familie zu investieren. Aber bevor wir weitermachen, gehen wir zurück zu Immobilien und lassen Sie uns diese umbenennen. Also innerhalb unserer Info haben wir Newark Immobilienfonds. Und das wird als neues Euro-Bargeld ohne Bank bezeichnet. Und nur damit wir weiterhin Mäuse essen können, Lee und konsequent. Also lassen Sie uns das wieder zeigen. Und mal sehen, lassen Sie uns jetzt die Informationen hinzufügen. Offensichtlich ist dieser Teil für euch am langweiligsten zu sehen, aber was ihr tun könnt, ist er Teil jedes einzelnen Designs, das ich mache. So müssen Sie immer mit dieser Art von Informationen arbeiten und es ist immer am besten, wenn Sie Ihren Kunden echte Informationen zeigen können , anstatt nur den langweiligen oder Lorem Ipsum Text, den sie sehen. Vielleicht verstehen manche Leute nicht wirklich, was das ist. Vielleicht dachte ich auch nicht, dass du irgendeine Art von Sprache benutzt hast, die sie nicht verstehen. Ich hatte tatsächlich einen Klienten, der von Lorem ipsum beleidigt wurde , weil er lehrte, dass ich eine Art Spiele mit ihnen spiele, aber ich war es wirklich nicht. Also wirst du alle Erwachsenen König haben. Also das wird num leere Hülse t sein, finden Sie plus. Und diese Akte wird angespornt werden Fonds so gezeichnet. Und schließlich, lasst uns jetzt weitermachen und dies in Ruhestand ändern und an Schulden arbeiten. Mal sehen. So umgekehrt das innere friedliche Morgen so. Und mal sehen, dies wird führen genannt neue Bank Zukunft. Ich bin bereit, diesen Text auch zu kopieren und einzufügen. Ich habe versucht, so schnell wie möglich für euch zu arbeiten und gleichzeitig zu reden. Was? Weil ich nicht will, dass du mit diesem Abschnitt kriegst. Aber wie Sie sehen können, ist dies der Teil, der tatsächlich am längsten hält. Also mal sehen. Ich kann mein Bild hierher ziehen und ablegen. Und das endgültige Bild wird genau hier gehen. Und schließlich, lasst uns weitermachen und diese Art von umbenennen, das ist neue Bankzukunft. Und das ist Ihr Euro-Feature so. Und das ist es im Grunde. Jetzt gehen wir weiter und beginnen mit der Arbeit an diesen. Also im Grunde, was ich mit diesen tun möchte , ist, dass ich zuerst alle Informationen verstecken wollte. So wie wir es für all diese anderen getan haben. Also drücke ich nur 02 mal auf meiner Tastatur. Wir haben natürlich Investitionen, also würde er den Schlüssel kontrollieren, das in eine Komponente umwandeln. Erstens, Staat wird Bildung sein. Also für die Ausbildung möchte ich meine Hintergrundfarbe verstecken. Ich möchte meine Informationen zeigen. Und lassen Sie uns einen zweiten Staat schaffen , der Real Estate genannt wird. Für die Immobilien, das Gleiche. Also werde ich die verstecken. Eigentlich hat es ihnen zurückgezeigt. Entschuldigung. Ich werde gegen diese Informationen kämpfen. Ich gehe zu meinem Immobilien-Icon, verbergen meine Farben und zeige meine Informationen. Klicken Sie hier, ein neuer Zustand. Ich werde das in Familiensicherheit ändern. Dann werde ich meine Immobilie zurückschütteln. Verstecken Sie meine Informationen, oder zurück zur Familiensicherheit, verstecken Sie das, zeigen Sie das. Wie Sie sehen können, wenn Sie anfangen zu arbeiten und Baldis Aufgaben zu wiederholen, wird alles viel schneller, weil Sie diese Schreibtische oder ein Oregon wiederholen. Und lassen Sie uns das verstecken. Lassen Sie uns das zeigen. Lassen Sie uns die Dosis verstecken, und das ist es im Grunde. Gehen wir zurück zum Standardzustand und springen wir in unseren Prototyp. Ich werde jetzt hier klicken, wählen Sie diese und verwenden Sie tippen oder zu animieren ist in unserem 0.4. Sekunden. Auserwählte an Bord wird zur Bildung gehen. Wählen Sie das gleiche, Immobilien, Familiensicherheit und schließlich einen Ruhestand. Ich werde all diese Punkte wieder schließen und zu meiner Ausbildung gehen. Immobilien. Das wird Autonomie für die Sicherheit der Familie sein. Und das wird kein Ruhestand sein. So kann man manchmal sehen, dass man all diese Pannen wie bisher haben kann. Es zeigte uns tot, dass es aus irgendeinem Grund zu einem Abschnitt blättern wollte und wir wollten es nicht. Also müssen wir uns die nur ansehen. Also Autonomiebildung, das wird Familiensicherheit sein, das wird ein Ruhestand sein. Lass uns Oldies schließen. Und schließlich, lasst uns an diesen beiden arbeiten, die unsere letzte sind. Das ist also Bildung, Immobilien und im Ruhestand. Und schließlich, lassen Sie uns zu unserem letzten Zustand gehen, der Rentenanalyse Arbeit an Toten ist. Also Bildung, Immobilien, Familiensicherheit. Und dass es alle diese schließen lässt, zurück zu unserem Bildungszustand, oder wir können sogar in den Standardzustand gehen, Vorschau drücken, um zu sehen, wie das funktioniert. Eigentlich springen wir von hier nach hier. So können Sie sehen, dass es funktioniert. Klicken Sie auf die Bildung, Immobilien, Familiensicherheit und Ruhestand oder Bearbeitung von Arbeiten oder gut, wie es sollte. Ja, ja. Und das alles sieht schön aus. Und in diesem ersten haben wir Horace Staaten. Aber wie ich mehrmals gesagt habe, in den zweiten, in den inneren, wir haben nicht, wie man zugibt. Also noch einmal, wenn jemand die Lösung für dieses Problem kennt und lassen Sie es mich wissen, und ich werde es beheben und ein Update für alle Ihre Jungs machen. Also, was wir als Nächstes haben, sichern Sie Ihre Zukunft. Daran werden wir natürlich arbeiten. Und mal sehen. Lassen Sie mich zuerst kopieren N3C und Schreibtisch Text in anderen, dann springen Sie in meine Investitionen Ausbildung in vier. Ich benutze diesen Watson, weil er der nächste ist. Kontrolle V. Und lassen Sie C nach unten, Lindert. Erfahren Sie mehr wird bleiben. Also lassen Sie mich diesen Text auswählen. Gut, schließen Sie es ab. Und das ist bei 40 Indizes bei vier, verschwinden Zukunft ist, was genau da drin geschrieben werden wird. Lassen Sie mich schnell mein Bild nehmen, ziehen Sie es in einem Lebensstil, der aussieht. Ich werde auch diese vier Decks nehmen, weil ich dies später in meinem responsiven Design als Stack verwenden werde . Und es ist im Grunde, es ist das einzige, was wir für diese bestimmte Seite tun können, ist, an unserer Fußzeile zu arbeiten. Also werde ich Control C drücken, Kontrolle v löschen, Stellen Sie sicher, dass es unten ist, positionieren Sie es den ganzen Weg nach unten. Und dann gehe ich zurück in meinen ursprünglichen Zustand und meine ursprüngliche Fußzeile. Also mal sehen, wir haben als nächstes investiert. Also werde ich mich in diesen Karten öffnen, ich werde alle diese auswählen. Also drücken Sie Kontrolle C, Kontrolle V. Stellen Sie sicher, dass es genau hier ist. Nachrichtenverschiebung und ein Pfeil nach rechts positioniert ihn genau hier. Also unter Invest haben wir all diese, also haben wir Bildung, wir haben Immobilien, wir haben Familiensicherheit. Und schließlich haben wir den Ruhestand. So wie so. Schließlich werde ich alle von ihnen gruppieren, die diese Invest genannt werden. Und wieder einmal, der Grund, warum ich an diesem ersten arbeite, ist, weil es, wie Sie sehen können , schön in all diese übersetzt. Also im nächsten Video, werden wir auf den digitalen Strand arbeiten und ziehen Scheibe zwei sind schön und schnell Abschluss. Ich werde auch in einigen der anderen Videos andere Links einschließen, die hier gehen werden. Und schließlich, wenn Sie gehen, um zu arbeiten, um zwischen diesen Seiten zu wechseln, sobald wir diese nächste und gehen Sie auf die Anmeldeseite , weil im Moment haben wir keinen Übergang enthalten. Wenn Sie also versucht haben, auf eines dieser Elemente zu klicken, wird es Sie nirgendwohin bringen, da diese Klicks nicht so verbunden waren, wie sie zum Beispiel mit diesem Strand sind . Das war's also für dieses Video. Wir sehen uns im nächsten, wenn wir tatsächlich anfangen, an dieser digitalen Seite zu arbeiten. Und wir werden noch ein paar Bilder aufnehmen. Und ich werde Ihnen noch ein paar Tipps und Tricks zeigen. Also sehe ich dich dort. 44. Design erstellen: Lassen Sie uns jetzt voran und beginnen Sie mit der Arbeit an der letzten Seite, die hier für das digitale angezeigt wird. Also werde ich meine alte Schlüsselposition bei oder bei hier halten, vergrößern. Es wird so digitales Design sein. Wir werden das Gleiche tun, wie wir es bei all den vorherigen gemacht haben. Also positioniert ihn hier, bewegen Sie das nach unten. Und schließlich werde ich mein Hauptnav wählen, digital wählen, und das ist unser letzter Zustand, wie Sie sehen können. Schließlich werde ich diesen Text wie immer ersetzen. So reif. Und habe ich es so ersetzt? Erfahren Sie mehr wird gleich bleiben. Und Sie können es auch verbinden, wenn Sie den nächsten Abschnitt machen wollten, aber ich werde Sie nicht stören. So können Sie dat immer erkunden, wenn Sie möchten. Schließlich möchte ich diese Formen schnell wechseln. Also vielleicht eine ähnliche Position dieses hier. Ich kann das hier positionieren. Ich kann das ein bisschen drehen oder vielleicht so, nur damit wir die Dinge etwas aufpeppen können. Lassen Sie mich mein Bild dort oben einbinden, also ist es in diesem. Ich werde hier positionieren. einmal ist das Bild von eingeladenen Elementen. Ich habe Photoshop verwendet, um es zu schneiden und als PNG zu exportieren. Und es ist, was du hier siehst. Und lasst uns es positionieren und hinter Schreibtisch Kerl. Mal sehen, vielleicht kommen wir hierher. Ja, ich habe das alte gelöscht und das ist es im Grunde für den Helden. Nun gehen wir weiter und gehen zu diesen nächsten Abschnitten. Es heißt also, ich möchte in investieren, aber eigentlich, was es sagen sollte, ist ein Service für die moderne Zukunft. Also, weil ich bereits voran ging und eine indies Titel hinzugefügt, Das einzige, was ich wirklich tun muss, ist in diesem, und ich werde auch meine Schaltfläche wählen. Also Control C. Und Tasten werden im Grunde der gleiche Start sein und sie werden mehr so gelernt werden. Diese alte wurde gelöscht. Und ich werde im Grunde dasselbe für alle tun. Also werde ich diese Falte löschen, die er V kontrollieren würde, um ein neues wie dieses einzufügen , und stellen Sie sicher, dass wir bei 40 sind, wie wir es mit diesem gemacht haben. So 40 überall. Und um diese zu schließen, springen Sie in hier Kontrolle V. Wieder einmal 40 löschen Sie diesen, dass er sie organisiert und tun Sie das gleiche für diese letzte. Wie diese Kontrolle V. Gleich da. Löschen. Dann gehen wir jetzt weiter und beginnen schon mit unseren Texten. Geh weiter und beendete diesen. Lassen Sie mich das nächste ändern. Bagdad. Sag es mir Bescheid. Ich bin diese beiden so fertig. Und lassen Sie mich das und die letzte beenden. Wieder einmal werden Sie das viel schneller tun, weil ich aus zwei verschiedenen XD-Dateien kopiere und einfüge. Und das ist im Grunde das einzige, wir hier tun können, ist, Bilder hinzuzufügen. Also für dieses erste werde ich in diesem Bild hinzufügen, schließen Sie es. Und dieser nächste wird in diesem Bild sein. Ich werde sie nicht wirklich ändern, weil ich fand, dass er so funktioniert. Also denke ich, das wird gut. Wählen Sie schließlich dieses Bild für den virtuellen Assistenten. Aber was wir mit diesem Kerl machen können, ist einfach unser Bild ein wenig zu vergrößern. Stellen Sie sicher, dass wir es irgendwo in der Mitte positionieren, so etwas. Ich gehe ja. Vielleicht ein bisschen mehr runter, damit wir diese Vorderkante dieses Schreibtisches nicht sehen. Und das ist es im Grunde. Das war's. Diese Seite ist abgeschlossen. Wie Sie sehen können, einige Seiten Degas weniger schlimm, so Seiten nehmen uns mehr. Was wir jetzt tun müssen, ist zurück zu hier in die Fußzeile zu springen. Und wir werden MdS-Kontrolle V wählen und ich werde sie hier positionieren. Also, ich werde sie draußen trocknen, sie nach unten bewegen oder ich kann sie einfach auf diese Weise organisieren, wie so positioniert und unten und gruppieren Erzählung digital so. Und jetzt endlich werde ich einfach voran gehen und die Namen ersetzen, offensichtlich all diese. Also werden diese Namen an der Spitze enthalten. Also lassen Sie uns voran und fügen Sie das Banking hinzu. Fügen wir em Banking hinzu. Das wird QR-Code Bay sein. Und schließlich in diesem letzten soll man ein echter oder virtueller Assistent sein. So wie das. Jetzt, da wir hier sind, können wir schnell beide Links zu unserer Fußzeile hinzufügen. Also werde ich diese noch einmal kopieren. Also drücken Sie Kontrolle C, Kontrolle V, positionieren Sie sie oder genau hier, positioniert und unten. Wählen Sie eine Gruppe anderer Verknüpfungen aus. Und diese werden über uns sein, kontaktieren Sie uns. Das werden Beschwerden sein. Und schließlich der Schutz so. Jetzt ist das abgeschlossen, lassen Sie uns schnell überprüfen. Wie Sie sehen können, befinden sie sich überall auf jeder dieser Seiten statt auf dieser letzten Seite. Also lassen Sie uns schnell Daten korrigieren. Stellen Sie sicher, dass es an der Unterseite ihrer Hand positioniert ist. Terry Howard, wir haben unsere antizionistischen all diese Seiten abgeschlossen. Im nächsten Video werde ich Ihnen zeigen, wie Sie diese Gräber erstellen können. Und sie sind wirklich schnell, weil das einzige, was wir wirklich tun müssen, oder lassen Sie es uns in diesem Video tun. Verwenden Sie einfach Ihren alten Schlüssel. So positioniert. Vergrößern. Wir haben ein Login-Design. Wir haben so ein Anmeldedesign. Und das ist im Grunde das einzige, was ich tun werde, ist meine Formen einzuschließen und meine Bilder, Indien. Also lasst uns schnell reinspringen. Ich ziehe mein Bild hinein. Wir doppelklicken oder reorganisieren es. Wagen Sie es so. Er würde Kontrolle C. Löschen, um v zu kontrollieren, nur damit ich die Dinge schneller machen kann. Bilder gehen immer noch oben sowieso. Und was wir brauchen, ist unser Knopf. Also lasst es uns benutzen. Drücken Sie Strg-C. Hier springen, diesen alten gelöscht, Kontrolle V. Stellt sicher, dass wir hier in der Mitte sind. Siehst du 75, wir wollen, dass es bei 80 ist, also 12345. Mal sehen, warum das. Wir werden das positionieren und runter. Wir können alles auswählen und gruppieren. Mehr. Zeugenzentrum, heben Sie die Gruppierung auf. Steuerelement C, um diesen Knopf hier zu kopieren und Kontrolle V zu löschen. Und mal sehen, 345678. Ich denke, es wird ganz gut funktionieren. Auf mal sehen. Ja, gruppieren wir sie. Mal sehen, was wir haben. Und dann können wir vielleicht mit dem Abstand und ein bisschen mehr herumspielen. Ich denke, es wird ganz gut funktionieren. Ja, ich denke, 80 wird wirklich gut mit dieser Hüfte arbeiten. Und schließlich, lassen Sie uns die Gruppierung aufheben. Und das Letzte, was ich für diese beiden Seiten tun möchte, ist, diese Formen einzubeziehen. Also kann ich einfach hier reinspringen und ich kann es und diese beiden Formen im Grunde kopieren. Gehen wir also voran und machen das wirklich schnell. Also werde ich in meinen Helden springen, meinen Helden Elemente finden, Control C drücken und zurück in, sagen wir Login-Seite. Also diese, Kontrolle V, um meinen Helden zu stützen Elemente alt ließ sie irgendwo direkt unter Belüftung fallen. Ich werde hier drinnen positionieren. Und mal sehen, vielleicht kann ich diesen Kreis hier doppelklicken. Ich kann dieses X hier positionieren, etwas gedreht. Wo ist meine Linie hier ist sie. Ich kann positionieren, es ist irgendwo hier. Mal sehen. Ich kann es ein wenig in so etwas drehen. Hit Control C auf all meine Elemente und springen genau hier. Du würdest V kontrollieren, ihn den ganzen Weg runterziehen. Und was ich tun kann, ist tatsächlich diese X-Position hier zu drehen. Ich kann dann weitermachen und sterben, um irgendwo hier zu sein, vielleicht sogar ein bisschen mehr so drehen. Und zum Beispiel kann ich meinen Kreis auch etwas mehr hineinschieben. Und das ist es im Grunde für diesen Strand. Was wollen wir tun? Mal sehen. Ich mag das nicht wirklich. Überqueren Sie vielleicht hier und vielleicht kann es hier ein bisschen gehen. Ja, das ist ein bisschen besser. Was wir jetzt tun werden, ist eigentlich zwischen zwei, diesen beiden Links zu interagieren. Gehen Sie zu einem Prototyp. Klicken Sie hier auf diesen. Ziehen Sie es. Also werden wir Schritt verwenden oder einfache Notiz Nullpunkt animieren. Lass uns sechs Sekunden sehen. Und ich werde auch das Gleiche für hier tun. Und mal sehen, wie das funktioniert. So werden sie in der Lage sein, schnell zwischen nicht ein Konto zu ändern und haben ein Konto. So können Sie sehen, wie das funktioniert. Und all diese Formen finden wirklich schön statt. So können Sie sehen, dass das Kreuz und die Linie wirklich schön morphiert. Alles springt in Position und es funktioniert wirklich schön. Das war's also für dieses Video. Im nächsten Video werde ich Ihnen zeigen, wie Sie mit den Dashboards beginnen können und bevor wir mit dem Dashboard beginnen, also werde ich Ihnen zeigen, wie Sie diese Navigation tatsächlich verbinden können und wie Sie weiter zwischen allen interagieren können diese Seiten. Denn jetzt haben wir eine Anmelde- und Anmeldeseite abgeschlossen, und wir haben diesen Login-Anmelde-Button oben. Und diese beiden Buttons, die uns tatsächlich zum Dashboard selbst bringen werden. Also sehe ich dich dort. 45. Design erstellen: In Ordnung, lassen Sie uns jetzt mit den Dashboard-Bildschirmen fortfahren und machen wir dasselbe wie bisher. So ganz Ihren alten Schlüssel, Position im Terror. Und Dashboard-Design. So wie das. Oder springen Sie zum Prototyp, klicken Sie hier und rufen Sie diesen jüdischen Jungen an. Mein Dad. Springen Sie zurück zum Design. Und bevor wir tatsächlich mit dem Dashboard-Design beginnen, werde ich unsere Navigation beenden, weil wir alle diese Seiten verbinden und sicherstellen wollen, dass sie funktionieren. Also jetzt im Moment, wenn ich eine von ihnen wähle, wenn ich meine Desktop-Vorschau, können Sie sehen, dass, wenn wir auf eine von ihnen klicken nicht funktioniert. Also müssen wir alle verbinden und sicherstellen, dass sie funktionieren. Also, wie wir das tun werden, ist eigentlich ganz einfach. Also werden wir zwischen all diesen Staaten springen. Wenn Sie sich an dieses Video erinnern, nehmen wir an, Sie müssen es für jeden einzelnen Zustand hinzufügen , damit alles richtig funktioniert, denn dies ist der ursprüngliche Zustand oder ein Standardzustand dieser Hauptdatei. Nun, das ist das Konto Staat allein Bühne Karten und so weiter und so weiter. Also müssen wir hinzufügen, ist das für jeden Staat. Also, wie machen wir das? Es ist ganz einfach. Eigentlich. Gehen Sie einfach in Ihren Prototyping-Modus und Sie können ihn öffnen und von hier aus bearbeiten. Oder Sie können einfach auf alle diese separaten Elemente kopieren und diese Pfeile per Drag & Drop ablegen , damit Sie alles tun können, was Sie wollen. Wir werden uns für den Übergang entscheiden. Ziel ist Konten entworfen. Deshalb verwenden wir diese Abkürzung von Design. Wir werden Animation auflösen verwenden. Und ich benutze keine Auto-Feinde für diese, weil im Gegensatz zu einem Login und registrieren, diese, sie haben verschiedene Elemente. Diese beiden haben im Grunde genau die gleichen Elemente. Also der Übergang zwischen einander schön, aber alle diese anderen haben völlig unterschiedliche Elemente. So zum Beispiel diese Seite und diese Seite. So automatisch animierbar nicht funktionieren, wie es sollte. Anstatt zu erleichtern, werde ich Easy und out verwenden. Und ich werde 0,4 Sekunden für die Dauer meines Übergangs verwenden. Also, wenn ich es zur Vorschau bringe, klicken Sie auf das Konto, Sie können sehen, dass es gut übergeht und der Übergang nicht eine Ewigkeit hält. Was wir als Nächstes tun können, ist eigentlich ganz einfach. Wir können nach Lawrence springen und wie gesagt, ich kann es von hier aus auswählen. Und anstatt diesen Pfeil zu ziehen, werde ich einfach klicken. Und ich werde hier genau wählen müssen. Ich muss Alongs und Design wählen. Und es wird alle die gleichen Einstellungen behalten. Also Karte klicken Sie hier, wählen Sie, wo es hier, Karten Design. Also hier sind wir. Investieren. Also nochmals werden wir dasselbe tun. So inversed und ging zu klicken, um zu investieren hier entworfen es ist, digitale scheinen Tick und digitales Design. Schließlich, was wir für die Schaltfläche tun werden, ist wählen Sie unsere Schaltfläche und statt des Standardstatus gehen Sie in den Horrorzustand, weil Sie möchten die Leute tatsächlich schweben und dann klicken. Sie werden also auf den Horrorstatus klicken und nicht auf den Standardzustand. Also im Grunde die gleichen Einstellungen, aber diese Spende wird ein Login-Design sein. Also unsere erste Seite hier, so Disziplin. Und ich werde in den Standardzustand zurückkehren, und das ist es im Grunde für diesen Zustand unserer Navigation. Wir werden das Gesetz mit diesem Punkt später bearbeiten, weil wir jetzt auf der Homepage sind und Logo-Typ point uns auf die Homepage bringt. Leider müssen wir Daten auf jedem einzelnen Bildschirm bearbeiten, aber nicht all diese anderen Dinge. Also lasst uns in Konten springen. Und von den Konten im Grunde, werden Sie dasselbe tun. Also wird unser Strom zu diesem Zeitpunkt das gleiche Logo bleiben. Versuchen wir es zu bearbeiten, aber ich glaube nicht, dass es funktionieren wird. Nein. Wie Sie sehen können, haben wir hier keine Homepage entworfen. So können Sie einfach klicken und nach außen ziehen. Und das wird im Grunde Ihre Auswahl negieren. Also noch einmal, Alongs wählen von hier aus. So werden wir ins Leben gerufen. Desire Karten, genau hier, Karten Design, investieren, im Grunde das gleiche. Investieren Sie also, gestalten Sie hier digital. Und schauen wir uns das digitale Design an. Als Nächstes drauf. Lassen Sie mich schnell meinen Login-Button überprüfen, ob der Hover funktioniert. Tut es nicht. Also müssen wir das im Grunde für alle tun. Also, wo wir Protokollierung entworfen Harrier. Aber noch einmal, Sie werden dies nur auf diesem Flughafen tun und dann werden wir kopieren und fügen Sie diese Navigation in unsere, unsere Boards. Und im Grunde wird es gut funktionieren. Also werde ich doppelklicken, wählen Sie meine Konten aus diesem und wo wir sind auf unserer Zählung und Design Karten, Design, um ihn zu wählen platzen Design, digital, digital, InDesign, wo wir Karriere sind. Und schließlich, noch einmal, unsere Taste Horace Zustand. Wir werden ein Protokoll in InDesign wählen, gehen Sie zurück zum Standardzustand. Und nun lassen Sie uns zu einigen dieser anderen gehen sah, ich werde das Video hier pausieren und die Karten machen, in digitale investieren und dann morgen wieder zu euch kommen. Informationen. Ok, jetzt habe ich alle von ihnen hier abgeschlossen Ich bin in meinem Standardzustand, wie Sie sehen können, was unser Homepage-Zustand ist. Was ich als nächstes tun werde, ist zurück zu meinem Design-Tab zu springen. Ich werde diesen Navigationssprung hier kopieren, diesen löschen, Steuerelement V drücken, um diesen einzufügen. Und ich werde im Grunde das Konto von hier aus auswählen. Und wenn wir zum Prototyp zurückkehren, können Sie sehen, dass wir alle diese ausgewählt haben. Das einzige, was wir nicht haben, ist der Logo-Tappoint. Aber lassen Sie uns schnell springen oder entwerfen, so dass wir alle diese in basieren können. Also werde ich diese löschen, halten Kontrolle V nahm Stück, die m Position knapp unter unserer Spitze. Jetzt, wie wir es immer getan haben. Ich werde nur schnell voran und Basis, Basis basiert, damit wir nicht zu viel Zeit verlieren. Wir zitieren hier und bereichern es. Und jetzt gehen wir weiter und das ist digital, also wählen Sie Digitalzustand. Das hier ist inversiert. Das ist Cards. Das hier ist C, Rasenflächen. Und schließlich ist dieses Konto und es ist bereits ausgewählt. Was wir jetzt tun können, ist in den Prototyping-Modus zu springen. Ich kann ein wenig hineinzoomen, damit wir alle unsere, unsere Boards sehen können. Und was wollen wir im Grunde tun, ist viel mit DAP-Punkt verwendet, was genau hier ist. Klicken Sie auf und ziehen Sie es auf die Startseite, und das ist es, weil es alle gleichen Informationen enthält. Also, was wir tun müssen, das hier, weil wir auf der Homepage waren und Sie nicht in der Lage sind, die Homepage von der Homepage zu wählen. Deshalb müssen wir es tun, es hier. Aber wie Sie sehen können, ist es wirklich schnell und einfach und shoppen nur ein paar Sekunden. Das ist also das Wichtigste bei dieser Navigation. Es wiederholt sich und wiederholt sich, und das ist das Grundprinzip des UI- und UX-Designs ist die Wiederholung. So wiederholt sich alles die ganze Zeit. Also Dairy, wie es jetzt ist, haben wir alles abgeschlossen und konnten zurück in den Designzustand springen. Ich kann auf meine Desktop-Vorschau klicken, um in meine Vorschau zu springen und Ihnen zu zeigen, wie alles funktioniert. Wie Sie sehen können, haben wir all diese Staaten, an denen wir gearbeitet haben. Also jetzt zyklische Konten hinzugefügt und klicken Sie Kredite, klicken Sie Karten, investieren Sie digital, alles funktioniert, wie es sollte. Und ich kann auch hier klicken, um zur Homepage zurückzukehren. So können Sie sehen, wie dieser Übergang mit dem Auflösen funktioniert. Ich denke, es funktioniert gut. Und reformieren Sie direkt hier, wenn Sie mit dem Mauszeiger fahren und hier klicken, wird es Sie zum Anmeldebildschirm bringen. Von hier aus. Sie können diese beiden überprüfen. Und Sie haben diese schöne Animation. Und ich habe gerade bemerkt, dass wir diese Schaltflächen nicht repariert haben, um sich anzumelden und anzumelden. Also lasst uns das jetzt machen. Also werde ich hier reinspringen. Springen zu unserem Text, verärgerte Schreiben Login. Ich werde es kopieren und in unseren Horrorzustand gehen, wie dieser Standardzustand. Und bei diesem nächsten werde ich ihm schreiben, sich zu melden. Gehen Sie auf diese Weise zu unserem Horrorstatus, wählen Sie die Anmeldung, Molkerei aus und gehen Sie zurück in den Standardzustand. Eine letzte Sache, die uns für dieses Video übrig bleibt, und wir werden tatsächlich mit dem Dashboard-Design im nächsten Video beginnen, ist, den Login zu verbinden und sich mit diesem Dashboard-Bildschirm anzumelden. Also lasst uns zum Prototyp springen. Klicken Sie auf diesen. Ich werde in den Horrorzustand gehen und ihn ziehen, weil er genau hier ist. Und ich werde im Grunde die gleichen Einstellungen Schulden verwenden wir. Also werde ich in den Standardzustand zurückkehren. Klicken Sie hier. Wechseln Sie zum Hover, der so verkettet ist, und ändern Sie ihn wieder in den Standardzustand. Lassen Sie uns eine Vorschau anzeigen und sehen, wie es aussieht. Also werde ich hier klicken, um es in der Vorschau anzuzeigen. Wieder einmal, unsere Animationen funktionieren wirklich gut und alles funktioniert, wie es sollte, wenn Sie , aber es wird Sie zurück zu diesem Bildschirm zu bringen. Und lasst es uns hier draußen testen. Also lasst uns wechseln, um sich zu registrieren schweben. Und es funktioniert so. Also im nächsten Video werden wir anfangen, daran zu arbeiten. Und wir werden all dies verbinden, so dass wir zwischen all unseren verschiedenen Bildschirmen wechseln können, die wir später entwerfen werden, nur um Ihnen zu zeigen, wie diese Animation aussehen wird, wie Arbeit, alles. Und wir sehen uns im nächsten Video. 46. Design erstellen: Nun, da wir unsere Navigation abgeschlossen haben, springen wir in unser Dashboard-Design. Und ich werde ein bisschen näher heranzoomen, nur so hast du es sehen können. Und im Grunde, Schreibtisch Dashboard Design wird reflektieren, was wir bisher bereits getan haben. Also im Grunde werden wir hier genau die gleichen Einstellungen in Bezug auf Farbe, in Bezug auf Bilder, in Bezug auf Styling und so weiter haben in Bezug auf Bilder, . Wir werden das nur im Grunde an das Dashboard-Design, Dashboard-Prinzipien und so weiter anpassen . Also lasst uns von unserer Navigation beginnen. Also haben wir entschieden Bar hier. Und das erste, was ich tun werde, ist eigentlich auf die ausgewählten Elemente. Also sind wir hier auf dem Dashboard ausgewählt. Ich werde die Farbe des Dashboard-Symbols ändern. Also werde ich in dieser Farbe direkt hier verwenden, ich werde es anwenden. Und mal sehen, ob es zutrifft. Hat es getan. Und ich werde den Dashboard-Text so belassen, wie er ist. Ich werde auch hier klicken, damit ich dies so ändern kann. Und vielleicht können wir ein wenig später an unserer Navigation arbeiten, wenn wir tatsächlich noch einige davon erstellt haben. Also kann ich voran gehen und das zu einer Komponente machen. Also drücken Sie die Steuerungstaste, und das wird nur unser Standardzustand sein, aber wir werden an den anderen Staaten arbeiten, Liter. Oder ich kann das auch ab und zu tun, wir werden später Animationen machen. Also lasst uns das jetzt machen. Wie gesagt, wir sind im Standardzustand. Wechseln wir jetzt in den neuen Zustand. Wir werden diese Kontodaten anrufen. Wir werden ein tiefes Konto eröffnen. Und wir werden diesen Selector in der Mitte unseres Kontos nach unten verschieben. Wir werden dies zurück zu dieser grauen Farbe wechseln, so dass ich beide auswählen kann , um einfach auf die graue Farbe zu klicken. Ich wähle mein Konto aus. Und wenn ich Sie hier zurückbringe und wir in den Standardzustand gehen können, kann ich hier klicken und diese Farbe sehen. Das ist also mein Halsband, das ich für alle benutze. Gehen wir nun zurück zum Abschnitt Konto und wir werden es auswählen und diese Farbe auswählen. Und für das Symbol selbst wählen wir es aus. Ich werde diese Farbe verwenden. Also kann ich zurückgehen, einen neuen Zustand erstellen und ich werde es Transaktionen wie diese nennen. Und in diesem, werde ich einfach hier reinspringen. Wählen Sie diese graue Farbe aus. Klicken Sie hier, klicken Sie hier. Jetzt, da wir Daten haben, können wir in den nächsten Zustand übergehen. Und dieser Zustand, ich werde es Rasen für die Kredite nennen. Nochmals, tut mir leid. Wir können zu den Transaktionen zurückkehren und ich habe vergessen, den Schreibtisch-Selektor zu verschieben. Ich schätze. Wir können zurück in die Lunge und auf Sehnsucht, ich werde sicherstellen, dass ich die ändere. Also noch einmal, das wird sein, dieses Symbol wird verfärbt sein. Und schließlich werden wir von hier weitermachen. Transaktionen werden erstellt werden. Und lasst uns schnell sehen, was wir bisher haben. So sind wir bei Standardzustand, Konto-Transaktionen und Lungen. Lassen Sie uns jetzt weitermachen und einen neuen Status erstellen. Wir werden es aktuell nennen. Und auf Karten werden wir das wieder ändern. Gehen wir zurück zu unseren Farben. Ich werde diese Farbe und für mein Symbol wählen und gehen mit Grün gehen. Schließen Sie das. Und lassen Sie uns einen neuen Zustand erstellen. Wir werden es Investitionen nennen , so. Dafür werde ich das noch einmal bewegen. Geh zurück zu meinen Farben. Wählen Sie diese aus. Wieder einmal haben wir diese Wiederholung, aber was Sie tun können UI UX Design als Ganzes. Also lasst uns zum Digital gehen, was unser Endzustand sein wird. Meine Schuldeninvestitionen. Stellen Sie sicher, dass es digital ausgegraut ist. Und lasst uns hier für das Symbol klicken. Und das ist es im Grunde. Lasst uns jetzt schnell durchlaufen. Also haben wir digital, wir haben Investitionen, Karten, Kredite , Transaktionen, Konto und Standard-Zustand wird unser Dashboard sein. Wenn Sie sich fragen, warum ich es nichts für die Abmeldung erstellt habe. Grundsätzlich, wenn Benutzer auf den Abmelden klicken, werden sie auf den Startbildschirm gebracht. Deshalb ist die Abmeldung da. Sie können auch mit Ihrem Kunden und mit Ihren Entwicklern trainieren , wenn Sie sie hierher zurückbringen möchten. Aber zum Beispiel, in meinem Fall denke ich, es ist viel klüger, sie zurück auf die Homepage zu bringen, weil sie vielleicht einige zusätzliche Dienstleistungen erkunden möchten, die Ihr Kunde zu bieten hat. Und wenn sie hier auf den Anmelde- und Anmeldeseiten sind, und sie sind einfach keine Navigation, so dass sie nicht außerhalb ihrer gehen können, können sie sich einfach wieder anmelden. Das ist also der Vorteil. Wenn Sie sie auf die Homepage zurückbringen, können sie heute wohin navigieren und einfach das gewünschte Servicetermin auswählen. Also lassen Sie uns jetzt fortfahren und ich werde schnell mein Bild hier hinzufügen. Also habe ich diese Bilder auf meinem Computer. Ich war einfach per Drag & Drop von meinem Computer in. Sie können es hier sehen. Und ich benutze diese Bilder und diese sind eigentlich von einem Spritzer. Und ich habe das vor Jahren getan, ich habe sie tatsächlich abgeschnitten, sie hier eingeschlossen, aber Sie können auch Plugin-Einstellungen verwenden. Ui Gesichter ist das Plug-in, wo Sie diese Bilder von uns Freude nehmen und so weiter. N d hat die Arbeit bereits für Sie erledigt. Aber ich habe diese Bilder auf meinem Computer und wieder, sie sind frei von US. Blush, und ich habe sie vor Jahren erschaffen, würde ich so etwas wie 50 männliche Gesichter denken, 50 weibliche Gesichter, so etwas. Also lassen Sie uns jetzt weitermachen und beginnen, indem wir unsere Informationen einschließen. Und lasst uns dies in Durchfall DTT ändern. Also hier sind Ihre Statistiken für, sagen wir Dezember 222211, zum Beispiel. Willkommen zurück Michael. Ich denke, das funktioniert gut. Hauptkonten alles, was wir erstellt haben. Also gehen wir jetzt zu den Karten. Also werden wir diese Debitkarte anrufen. Und das ist der Zustand, den es bereits zeigt, so während es bis zu diesem Datum. Also brauchen wir hier eine Karte. Also lasst uns gehen und einen aus dem aktuellen Abschnitt nehmen. Also werde ich das anrufen, also werde ich Control-C drücken, um diese Karte zu kopieren. Ich werde springen. Unser Armaturenbrett, springe hinein, Lead Control V, um meine Karte darin einzufügen. So wie das. Ich werde auch meine Umschalttaste halten, um sie in der Größe zu reduzieren. Oder ich kann es sogar so machen, so. Was wir also als nächstes tun können, ist offensichtlich die Größe dieser zu reduzieren. Also werde ich zum Beispiel zu den jüngsten Schwarz-Weiß zurückkehren. Ich denke, es funktioniert gut. Und lasst uns jetzt weitermachen und mit der Bearbeitung unseres Logos beginnen. Also lasst uns die Gesetzwand benutzen. Es ist die neue Bank, das ist die Farbe des Text-Logos. Also lasst es uns hier irgendwo skalieren. Und lassen Sie uns einfach hineinzoomen, damit wir unsere Angriffe irgendwo hier hin bewegen können. Ich denke, es funktioniert gut. Neues Logo, lassen Sie uns es nur ein wenig reorganisieren. So zum Beispiel, so etwas. Und Sie können auch sicherstellen, dass Sie in dezentrierter Abschreckung sind. So können Sie im Grunde Augapfel es, wenn Sie wollen. Dann werde ich mein Logo positionieren. Mal sehen, 1010 Pixel funktionieren gut mit diesem Fall. Tank Pixel. Gehen, um meinen Text und lassen Sie uns sehen, wo wir mit gehen können. Mal sehen 18. Ich denke, es funktioniert gut. Gehen wir mit weißem Winkel. Ich werde hier fett hinzufügen. So mutig, und ich werde es zu meinen Stilen hinzufügen. Ich werde es hier unten schieben. Entschuldigung, nicht 16, aber dieser Bolzen 18, ich werde ihn so hierher bringen. Ich werde auch sicherstellen, dass es sich hier befindet. Für diesen werde ich verwenden, lass uns 16 weiße sehen. 16 weiß, und das funktioniert gut. Zehn, mal sehen. Zehn wie Dreck Position und zehn nach unten. Sie werden dasselbe für diese beiden tun. So wie das. Vielleicht 20, ja. Und lasst uns auch positionieren und so können wir es von hier nach hier augapfeln. Wählen Sie diese aus, um sicherzustellen, dass sie sich in der Mitte befinden. Und jetzt können wir diesen löschen. Und das ist es im Grunde. Alles, was ich tun muss, ist zu meinem Ebenenfenster zurückzukehren. Also wieder haben wir unsere graue Karte. Ich werde entfernen verwerfen BG und Sie können offensichtlich voran und erstellen Sie die Paginierung auf Emission, wenn Sie zwischen Ihrem Warenkorb wechseln wollten. Und das können wir vielleicht auch hier tun. Also mal sehen. Ja, machen wir das. Also werde ich meine Karte duplizieren und noch ein Mal. Also werden wir Visumstrom haben. Wir werden MasterCard und Visa es noch einmal haben. Welche Qualität solide, sehen Sie, Kredit. So wie das. Grund, warum ich diese drei habe, ist, weil ich eine Komponente erstellen werde. Und lasst uns reinspringen und sehen, was wir von hier nehmen können. So können wir direkt hier springen, halten Sie die Kontrolle und klicken, klicken Sie mit der rechten Maustaste kopieren, weil wir nur Disc-Stil für unsere Karte haben wollen. Also werde ich hier zurück gehen und unser erstes Auto verstecken, weil wir es fertiggestellt haben. Ich kann hier klicken, mit der rechten Maustaste auf das Aussehen, so dass wir Schulden nehmen können. Und was sie tun wollen, ist einfach mein MasterCard-Logo zu verwenden. Ich werde es nur ein bisschen herunterskalieren. Ich werde sicherstellen, dass es zehn Rampenlicht ist, dass ich mein Visum verstecken werde. Und das ist es im Grunde. Wir haben die zweite Karte erstellt. Jetzt gehen wir weiter und verstecken das hier. Wir haben kürzlich Kredit. Nun, mal sehen, was wir bisher getan haben. Also diese sind eigentlich Kredit. Also nehmen wir einfach und dieses zum Beispiel. Also mit der rechten Maustaste kopieren. Also bin ich nur an Farben interessiert und sonst nichts. Also werde ich dieses eine Rechtsklick-basierte auswählen, Rechtsklick basierte Darstellung tatsächlich nicht basiert. Und das ist es im Grunde. Jetzt haben wir also unsere drei Karten. Was ich also tun werde, ist tatsächlich damit zu beginnen, unsere Komponente zu erstellen. Und um das zu tun, werde ich zuerst die ersten Dinge jetzt unter unserem Text positionieren. Und wir werden Gruppenbearbeitung. Also hatte er die Kontrolle in g und ich werde es Karte nennen. Oder mal sehen, Dashboard-Autos noch besser, so dass Sie in Ihren Komponenten wissen, was alles ist. Also von hier an, was wir tun können, ist tatsächlich hier zu klicken und zu sehen, wie das aussieht. Oder lassen wir es dort liegen. Vielleicht können wir sogar eine besser gehen und haben diese, wie in diesen ausgewählt sind nicht ausgewählt. Das wird mir noch mehr gefallen. Also lassen Sie es schließen und drücken Sie die Kontrolle, Kay, nur um eine Komponente zu erstellen. Das ist also unser Standardzustand. Das ist unser nächster Zustand. Also nennen wir es, ich weiß nicht, Staat oder Einkaufswagen. Zwei. So wie das. Was wir in diesem tun werden, ist hier klicken, und dann wählen Sie diese Farbe. Klicken Sie hier, wählen Sie diese Farbe, weil sie sich ändern. Dann werden wir diese Fettleibigkeit auf 0 senken, nur damit wir auf diese Karte wechseln können. Und dann, was wir tun können, ist im Grunde ändern. Also geben wir ihm einfach einen Namen von Mastercard Debit. Und Sie können das ändern, wenn Sie wollen, aber ich werde es dort lassen, weil es sowieso nur für das Beispiel ist. Also lassen Sie es jetzt schließen und einen neuen Zustand erstellen. Also Karte drei, so. Und in diesem neuen Zustand werden wir im Grunde genau dasselbe tun. Also werde ich hier klicken, wechseln Sie in Disk Gelehrten zu grün, klicken Sie hier, ändern Sie dies zu grau. Ich werde die Fettleibigkeit der Abwürfe senken. So kann ich Verwerfen sehen. Und ich werde es nennen, Mal sehen, Visa, Kreditkarte. Und ich werde von diesem entfernen. Also haben wir Lastschrift und wir haben Kredit. Und das im Grunde ist es, das einzige, was wir tun müssen, ist offensichtlich Prototyp es. Also werde ich auf diese klicken und wir gehen in den Staat. Also Karte zu Auto Feinde ist in, aus und 0,4 Sekunden, Ich denke, es wird gut funktionieren. Und wir gehen auf den Wagen drei. Wechseln Sie zum nächsten Zustand. Das wird also aktuell ein oder ein Standardzustand sein, sorry, das wird aktuell drei sein. Und schließlich, wie Sie sehen können, ist es viel einfacher, wenn Sie nicht zu viele dieser Zustände haben, um zu animieren. Also gehen wir in den Standardzustand, und das wird auch unsere Karte sein. Also lassen Sie uns in den Vorschaumodus springen, nur um zu sehen, was wir bisher haben. Also werde ich hier klicken. Sie können diese schönen Übergänge zwischen unseren Karten sehen und Sie können sehen, wie all das funktioniert. Ich finde, es sieht wirklich schön aus. Also lasst uns jetzt voran gehen und im Grunde dasselbe tun, aber mit diesem. Also, was wir dafür brauchen, ist, dass wir hineinspringen. Wir brauchen tatsächlich, dass dies Hilfe-Tabs genannt werden. Und das ist es. Also mal sehen, wir können drinnen springen und onclick, wir können alle diese auswählen. Also lasst uns dasselbe tun, wie wir es getan haben. Das wird also unser erster und ursprünglicher Zustand sein. Also habe ich diesen Text bereits kopiert. Ich werde es nur ändern, um es zu entdecken. Und ich werde das in Weiß ändern, denn in einer Minute werde ich nur schnell einige Änderungen an diesem Hintergrund vornehmen. Also das erste, was ich tun werde, ist, mal sehen, schließen Sie dieses Kind Control D. und ich werde diesem eine Farbe geben. Also mal sehen, Hilfe Tab Farbe. Mein Dad, ich werde diese Farbe tatsächlich anwenden. Und weil wir diese jetzt nicht verwenden können, gehen wir mit Weiß und gehen mit oder noch besser, vielleicht können wir mit dieser Farbe gehen. Mal sehen. Ja, ja. Und diese können weiß sein. Also nur um anzuzeigen, dass dies ausgewählt ist, wie Sie sehen können, haben wir jetzt einige Änderungen hier. Also diese für Ausgewählt sind grün, das ist es nicht. Was wir also tatsächlich tun können, ist hier rein zu springen und diese Farbe zu wählen. Und jetzt können wir wirklich grün gehen, nur damit wir Konsistenz zwischen diesen Elementen haben können. Also, was wir hier tun können, wenn Sie in dieser Textfarbe nicht Lust haben, können Sie es in diese Farbe ändern. Ich denke, es wird gut funktionieren. Lassen Sie uns in einen Vorschaumodus springen und sehen, wie das aussieht. Ich denke, es wird ziemlich gut funktionieren. Und was ich hier brauche, sind die Elemente, die wir während unseres gesamten Designs verwenden. So können Sie tatsächlich springen und sehen, wo Sie sie verwenden. Also mal sehen, wir haben sie hier benutzt. Gehen wir zurück zu unserem Ebenenbedienfeld. So kann ich hineinspringen, meine Elemente verwenden. Wir drücken Control C, nur um sie zu kopieren. Und geh den ganzen Weg nach hier zurück und springe hinein, genau hier positioniert. Also hatte er Kontrolle V und stellen Sie sicher, dass sie bei 100% sind, nur damit Sie sie sehen können. Ich werde Unordnung hier positionieren, denn wenn Sie sich erinnern, haben wir diese Moschee. Ich positioniere alle diese Elemente nach hinten. Öffnen wir unser Mars Klutzy Auto BG ist viel zu groß. Also werde ich es ein bisschen so organisieren. Und mal sehen. Ich kann sogar auf die Hilfe-Registerkarte Farbe und Schaukelsäge für 6723110 gehen. So 46123110. So wie das. Jetzt passt es perfekt. Und ich werde eigentlich nur die Größe dieses Kreises auf so etwas reduzieren. Ich denke, es wird gut funktionieren, denn nochmals werden Sie die Auflösung senken. Es tut mir leid, die Fettleibigkeit dieser Elemente. Ich werde sicherstellen, dass das so genannte kleiner ist. Und wir werden es um zehn sehen. Ich denke, das funktioniert gut. Wo hier skizziert ist es. Wir werden es dort positionieren, oder wir können auch seine Größe reduzieren. Mal sehen, wir können es so ändern, dass es hier so ist, dass ich denke, es wird gut funktionieren. Und schließlich haben wir dieses Kreuz und seine ganze Position es, mal sehen, was wir hier tun können und vielleicht können wir es nach oben bewegen. Zum Beispiel hier. Und auf unseren Elementen lassen Sie uns die Fettleibigkeit auf 15 senken, denn das war es, was es war. Und jetzt lassen Sie uns voran und erstellt dies half dap als Komponente. Also würde er den Schlüssel kontrollieren. Ich habe das nicht für diesen gemacht, weil ich gerade eine Komponente mit dem BG-Hintergrund eines Autos eingebaut habe, das konnte ich nicht. Es liegt also wirklich alles an dir. Wenn Sie es so oder so machen möchten, möchte ich Ihnen nur verschiedene Optionen zeigen, die Sie haben. Für die Hilfe-Registerkarte haben wir den Standardstatus. Wir werden einen neuen Zustand haben, solide C, Option eins oder Artikel eins oder helfen einem oder wie Sie es nennen möchten. Also werde ich diese Informationen tatsächlich kopieren. Mein Dad, wie Dad. Also im Grunde ist dies, um Ihre Benutzer zu helfen, die Website zu navigieren. Und bei dieser Option werden wir natürlich mit der Paginierung herumspielen. Also werden wir wählen, dass dies grün ist und das wird weiß sein. Und lassen Sie mich überprüfen, ob das weiß ist. Ist es. Und lassen Sie uns das schließen und zum nächsten und endgültigen Zustand übergehen. Wir werden ihnen also eine Option geben, dies zu kaufen. In der Option zu, offensichtlich werden wir dies zu grün ändern, gehen, um dies zu weiß ändern. Und ich werde auch den Text ändern. Nicht übereinstimmen. So basiert in Bezirken, basierend in diesem Text. Und Sie können auch den Klick integrieren, wenn Sie lösen möchten, zum Beispiel, können sie auf diesen Text klicken und es wird sie nehmen. So haben wir die wählen Sie die perfekte Karte. Trennen Sie sie also mit dem Warenkorbbereich des Dashboards. Sie können den Klick natürlich integrieren, und wenn der Klick, es geht, um sie dorthin zu nehmen. Aber das werde ich nicht tun. Ich werde ihnen einfach zeigen, was sie tun können. Weil sie von hier aus auf diese Seite schauen und sie sie lesen kann. Alle Kreaturen, die perfekte Kohlenstoff, indem Sie auf Schritt auftreten. Hier ist es. So können sie dort klicken und dorthin gehen. Eine letzte Sache, die ich tun möchte, ist im Grunde mit diesen Elementen herumspielen. Hier befinden sie sich also im Standardzustand. Und ich werde anfangen, sie zu bewegen, nur damit wir Dat und Emission haben können. Also werde ich das ein wenig drehen, positionieren Sie es hier. Ich werde das ein bisschen drehen, positionieren Sie es hier. Ich werde meinen Kreis zum Beispiel hierher bewegen. Und ich werde auch dieses Orakel-Tool hierher verschieben und vielleicht oben sein. Und schließlich machen wir dasselbe für Option zwei. Also werde ich meine vernetzte Disposition verschieben und sie sind mehr meine Laila Disposition ID da drin mehr als meine so genannte unten noch mehr. Und ich werde wieder in diesen Kreis gehen und ihn nach oben bewegen und vielleicht sogar ein bisschen so vergrößern. Also lassen Sie uns jetzt eine Vorschau, was wir bisher getan haben. Klicken Sie hier. Also wieder, sie können zwischen diesen Karten wechseln und Sie können sehen, wie sich Karten schön zwischen diesen verschiedenen Zuständen ändern . Jetzt können wir hier klicken und wir müssen es zuerst Prototypen erstellen. Tut mir leid, ich habe die Bühne vergessen. Wenn sie hier klicken, können sie zu Option eins gehen. Klicken Sie auf Dare ist in out Option zwei, so dass es die gleichen Einstellungen von hier verwendet, was eine gute Option ist, im Grunde die gleiche Sache. Wählen Sie einfach den Standardstatus, wählen Sie Option zwei. Und schließlich, Auktion zu. Wir gehen von hier aus in einen Standardzustand. Wir gehen von hier zu Option eins. Und jetzt lassen Sie uns eine Vorschau Belüftung. Also lassen Sie es uns einfach überprüfen. Hier funktioniert alles gut. Und Sie können sehen, wie diese Elemente im Grunde springen und vergrößern. Und ich denke, sie sehen ziemlich nett aus und sie sehen ziemlich einnehmend aus. So können sie den Benutzern und mehr Freude mit dieser App zu bringen. Was ich als Nächstes tun werde, ist tatsächlich ein paar realistischere Details hier zu Ihren Transaktionen zu bringen . Also mal sehen. Zuerst werde ich die Gruppierung dieses Gitters aufheben und ich werde es nennen, mal sehen. Wir brauchen so etwas wie eine Transaktion. Also lasst uns ein dat geben. Das ist also der erste. Sie werden es Transaktion eins nennen. Ich werde den Text duplizieren. Ich werde diese Transaktion geben und hier positionieren. Das wird Transaktion drei sein. Hier mehr nass. Transaktion für und wenn Sie wissen, was diese sind, können Sie ihnen einen Namen direkt in einem Drahtmodellabschnitt geben. Wenn Sie also wissen, dass dies Transaktionen sind, können Sie sie direkt anrufen. Da. Aber ich wollte deine Zeit nicht zu viel verschwenden, also habe ich sie einfach hier gemacht. Lassen Sie mich die Beträge hier ändern. Also sagen wir 47,20. Dieser nächste wird 270.73 sein , weil man im Grunde mit diesen Zahlen nie dabei ist. So sind Sie nie $270, zum Beispiel. Sie sind immer Punkt etwas so, nur um es hier realistisch aussehen zu lassen. Also lassen Sie uns 9.43 zum Beispiel sehen. Und lassen Sie uns das letzte 171,18 geben. Wenn Sie ehrlich sind zu sehen, warum all dies minus sind, dann ist es , weil Sie für diese Dienste bezahlt haben. Deshalb sind sie minus etwas. Also mal sehen, wir können das heute geben. Ich werde das auch heute geben. Das wird, mal sehen, 14. Dezember 2020 sein. Und wenn Sie ein Westerner Amerikaner sind, können Sie dies um SAW 1214 wechseln. Also wir in Europa, richtig? So, weißt du, du schreibst umgekehrt. mich nicht weiter zu verwirren, können Sie diese umschalten, um Ihre Bedürfnisse zu erfüllen. So neunten November 2020, und ich werde das auch auf 2020 ändern, nur um die Dinge viel konsistenter zu halten. Wie Sie sehen können, gehen wir nach unten. Dies ist also die neueste Transaktion und dies ist die spätere Transaktion. Also lassen Sie uns tatsächlich die gleichen Daten zweimal verwenden. Und lassen Sie uns das 24820 geben. So wie das. Ich werde tatsächlich einige Firmennamen hier kopieren und einfügen. So können Sie sich zum Beispiel vorstellen, dass Sie Kaffee gekauft haben. Curio hat ein paar Klamotten gekauft. Hier, u, zum Beispiel, für einige Dienstprogramme bezahlt. Vielleicht war das deine Autozahlung, sagen wir, vielleicht war das Essen. Und am selben Tag, an dem du dein Auto bezahlst, hast du vielleicht in der Schlange gewartet. Sie müssen also über all diese Dinge nachdenken, damit sie realistischer aussehen. Also nochmals werde ich ihm Essen schreiben. Ich werde umschließen schreiben. Das sind Dienstprogramme. Und das wird Essen oder Kartenzahlungen sein, tut mir leid. Das wird Essen. Und schließlich in diesem wird in der Nähe sein. Also werde ich jetzt die Farben dieser ändern, nur um anzuzeigen, wie Benutzer sie sehen werden, damit sie sie ein bisschen leichter erkennen können. Also für das Essen und Glück, hier als auch Standard, wir werden es auf Schreibtisch dunkler grün für die Kleidung ändern. Zum Beispiel. Wir können das wählen und mitgehen, ich weiß nicht, mal sehen, helleres Grün sind, wenn das nicht zu viel Sinn ergibt, vielleicht können wir etwas dunkler machen . Also vielleicht das hier für den Schluss. Ja, ja. Für die Dienstprogramme könnte sehen, vielleicht können wir dies zu rot ändern, zum Beispiel, und Florida Auto-Zahlungen, wir können mit dieser Farbe gehen, nur um verschiedene Optionen anzuzeigen und was Benutzer bereits geklickt haben. Also, was ich jetzt tun werde, ist Kopieren und Einfügen einige Symbole hier, nur so dass wir sie an der richtigen Position platzieren können. Also, jetzt werde ich sie wieder einfügen. Missy, und ich bin sicher, dass ich hier drinnen bin, nur damit ich sie ein bisschen schöner bestellen kann. Also werde ich das Essen hier positionieren. Ich werde sicherstellen, dass es zehn Pixel sind. Hier. Zum Beispiel, auf 15, mal sehen, 12345, Jahr 18, funktioniert der Tod besser. Ich werde das gleiche für unter der Nähe tun. Also lasst uns ein wenig hineinzoomen. Stellen Sie sicher, dass ich in einem Zentrum bin und stellen Sie sicher, dass ich 15 gehe. Also zehn in 2,5 Dienstprogramme. Also habe ich dieses Symbol der Position hier. Stellen Sie sicher, dass ich in einem Zentrum wie diesem bin. Tut mir leid, 12345, also 15. Und schließlich für ein Auto Zahlungen. Also mach es nicht hier. Stellen Sie sicher, dass ich meine, als Zentrum 12345. Ich denke, das funktioniert ganz gut. Nun, lasst uns ihre Farben ändern. Also für die Auto-Zahlungen, die wir entdeckt haben, für die Versorgungsunternehmen, haben wir diese Farbe, denn die Kleidung würde diese Farbe haben. Und schließlich für das Essen, haben wir Schreibtischfarbe. Was ich als nächstes tun werde, ist einige zusätzliche Komponenten zu erstellen. Also lassen Sie uns das Essen benutzen, damit ich Control X verwenden kann, um es zu schneiden, gehen Sie zu meinem Essen, drücken Sie Kontrolle V, um es in Position zu bringen. Ich kann sie gruppieren und es Lebensmitteletikett nennen. Auf Fuß-Tag. Ich möchte wirklich, dass er den Schlüssel kontrolliert hat, nur damit ich meine Komponente erstellen kann. Und dann, was ich tun kann, ist dieses Symbol zu verwenden. Klicken Sie also auf es sollte x noch einmal steuern. Suchen Sie meine Klamotten. Also hier sind sie. Und tun Sie dasselbe. Es sind keine Zitate, Tag, Steuerungstaste. Und wir werden diese beiden schließen. Also bekommen wir unsere Auto-Zahlungen neben Control X. Entschuldigung, wir haben Versorgungsunternehmen, aber lasst uns hier verschwendet werden. Schreiben Sie diese Kontrolle k. und schließlich, ziehen wir unsere Dienstprogramme hier und wachsen Gruben wie dieser Hit Control K. Und jetzt endlich, weil wir diese beiden wiederholen, so Essen und Kleidung, was wir können tatsächlich tun, ist genau hier zu gehen. Klicken Sie auf unser Essen und lokalisiert das Lebensmittelschild. Hier ist es. Drag & Drop und einfach positionieren und an Ort und Stelle. Also, was ich tun werde, ist eigentlich nur die Dinge genau hier auszurichten. Weil ich möchte, dass mein Text an unserem Raster ausgerichtet ist. Dieser Jumpin, bewege ihn hierher und entferne allgemeine Nahrung. Mein Dad. Und Sie können immer Einsicht springen und sehen, ob Sie aufgereiht sind. Also lass uns so sehen, weil ich mit meinem Gitter aufgereiht sein wollte. Das war's. Und schließlich für die Kleidung, LoginData, gleich. Also ziehen Sie unsere Tabs sind hier oben geschlossen. Hier ist es. Ja, so. Und ich werde es hier positionieren und sicherstellen, dass es wieder in der Mitte ist, und stellen Sie sicher, dass ich so bin. Und das ist es im Grunde. Wir haben diesen Abschnitt abgeschlossen. Wieder einmal, wenn sie klicken, erfahren Sie mehr, können sie zu den Transaktionen gehen und dann können sie mehr dieser Transaktionen anzeigen. So können sie sie im Detail sehen. Zum Beispiel Starbucks Kaffee. Und dann können Sie den Standort Ihrer Transaktion integrieren. Sie können ein bisschen mehr Weizen integrieren, welche Karte, zum Beispiel, tief bezahlt und so weiter und so weiter. So können Sie wirklich tief in all diese Details eintauchen. Nun, was ich an diesen nicht wirklich mag, ist der Abstand. Vielleicht können wir an einem Abstand etwas besser arbeiten. Und vielleicht kann ich alle diese Tags so verschieben, dass sie meinen Rasterlinien entsprechen. Also lasst uns das machen. Also, was ich tun kann, ist, mal sehen, meine Lebensmittelmarke hierher zu bringen. Und kann sich bewegen und meine Kleidung zu handeln oder zu hören, Dienstprogramme, Auto-Zahlungen, Essen. Und schließlich, Zitat, nur damit ich die Dinge schön und organisiert halten kann. Und offensichtlich, wenn Sie die größere Zahl haben, wenn sie beendet ist, wird es nicht passen, dann können Sie DES nur ein wenig bewegen, zum Beispiel, um sich an hier zu richten, aber es ist alles wirklich an Ihnen. Und Sie können mit Ihrem Kunden sehen, welche Art von Transaktionen erwarten sie? Weil die Mehrheit der Menschen tatsächlich machen diese kleinen Transaktionen wie 1597 und so weiter. Aber wenn sie denken, dass sie größere Transaktionen durchführen werden, dann können Sie mit ihnen trainieren und dann Ihr Layer-Adaptives Layout anpassen. Was wir endlich tun werden, genau hier ist die Arbeit an diesem Abschnitt und wir haben hier nicht zu viel zu tun, ist einfach diese Tags und Breite zu ersetzen, die wir gerade erstellt haben. Also ziehen wir sie per Drag & Drop, damit wir Wolken haben. Und positionieren Sie es hier so. Stellen Sie sicher, dass Sie hier in der Mitte sind. Und ich werde es hierher bringen. Als Nächstes haben wir Essen, also dasselbe. Stellen Sie sicher, dass Sie in der Mitte dieses Essens sind. Und wir werden an einem Abstand in ein wenig arbeiten. Also lasst uns dann schnell positionieren. Wir haben Versorgungsunternehmen. Also werde ich es positionieren oder gleich hier. Stellen Sie sicher, dass ich aufgereiht bin. Und schließlich haben wir Auto-Zahlungen sind im Grunde die gleiche Sache. Ich zeige dir eine aufgereiht und das war's. Was ich als nächstes tun werde, wird entfernt und diese Texte von hier, Ich werde meine Tags hier positionieren und ich werde sie wieder organisieren. So kommt Schollen an der Spitze und dann kommt das Essen, Dienstprogramme, After-Tod Auto Zahlung ist am unteren Ende, im Grunde, dass es. Jetzt wähle ich sie alle aus und schiebe sie hier ein wenig näher an mein Diagramm. Und wenn wir von Diagramm sprechen, lassen Sie uns schnell daran arbeiten. Also jetzt haben wir vier verschiedene Farben hier, und wir werden diese vier verschiedenen Farben innen integrieren , um anzuzeigen, wie groß von einem Ausgaben der Gegenstand ist. Zum Beispiel könnte die Kleidung unter einer der größeren sein, vor allem mit dem Essen. Dienstprogramme sind der zweite Platz in Copayments sind vielleicht der dritte, weil Auto-Zahlungen in der Regel nicht zu viel Geld nehmen weg von Ihnen jeden Monat. Also lasst uns jetzt daran arbeiten. Wie ich das machen werde, ist offensichtlich, dass wir diesen Text auf Dutcher hinterlassen werden. Ich mache vier Kopien. Also drücken Sie Kontrolle D, D, D. Ich werde diesen einen engen Kreis nennen. Nur damit ich weiß, was es ist. Ich werde das ein Essen nennen. Und dieser hier wird Dienstprogramme sein. Und schließlich wird dieser letzte Auto Feynmans I sein, dass wir ihnen und ihre Farben natürlich geben werden. Für den nahen Kreis können Sie einfach hier klicken, um Ihre Farbe auszuwählen. Oder Sie können zoomen, wie Sie wollen. Gehen wir nach draußen. Und ich denke, diese beiden, ja, sie sind anders. Also lassen Sie uns jetzt in das schließende Tag springen oder mit der rechten Maustaste bearbeiten, um Komponente zu bedeuten. Hier ist es. Auf dieser Hauptkomponente in ihrer Kleidung, werden wir tatsächlich wählen, mal sehen. Ich werde diese Farbe auswählen. Und jetzt passt es, wie Sie mit diesem T-Shirt-Icon sehen können. Also, wenn ich doppelklicke und schiebe es nur ein wenig nach draußen. Lass uns RB dasselbe sehen. Sie sind nicht die gleichen. Also muss ich diese Farbe verwenden, ok? Also, jetzt sind sie völlig gleich, also verwende ich diese gleiche Farbe für beide bisher, 606406. Und das ist wieder einmal, die Vorteile dieser Komponenten und Komponenten Datum, weil Sie immer wieder auf die Hauptkomponente bearbeitet gehen können. Und jetzt, wenn wir das schließen, bringen Sie zurück, um es zu offenbaren. Sie können sehen, dass es das gleiche ist und nehmen Sie zurück hierher und Sie können sehen, dass wir die Farbe ändern. Gehen wir nun zurück zu unseren Kreisen. Also haben wir einen geschlossenen Kreis. Ich werde ein wenig vergrößern und ich werde sicherstellen, dass ich diese Farbe auswähle. Und dann haben wir Essenskreis. Ich werde sicherstellen, dass ich diese Farbe wähle. Dienstprogramme, wir werden diese Farbe auswählen. Und Auto-Zahlungen, ich werde diese Farbe wählen. Wenn Sie sich fragen, warum ich meine Autos so wählen, ist, weil. Sie können Rahmenhalsbänder nicht anwenden, indem Sie einfach hier klicken und dann auf eine dieser Farben klicken, da sie nur auf die Füllfarbe selbst und nicht auf die Rahmenfarbe angewendet werden. Leider müssen Sie mit dieser Option eine Rahmenfarbe erstellen. Das nächste, was wir eigentlich tun werden, ist mit unserem Chart zu beginnen. Also im Grunde, wie wir tun werden, ist, dass wir im Grunde einige Abschnitte mit dem Bleistift erstellen, so dass wir sie maskieren können. Beginnen wir also mit dem geschlossenen Kreis. Also werde ich meinen Bleistift benutzen. Ich werde hier schweben, damit es mir zeigen kann, dass das die Mitte ist. Ich werde die Umschalttaste gedrückt halten und den ganzen Weg hinunter gehen, sagen wir irgendwo hier herum. Und ich werde hier und dann hier klicken, um diese Art von Dreieck zu haben. Ich werde es zusammen mit dem Claude-Kreis dorthin bringen. Also werde ich Shift Alt halten und sorry, Shift-Steuerung und Verstärker, damit sie diese Abtreibung maskieren können. Und ich werde es in der Nähe nennen. Nur damit ich weiß, was es ist. Als Nächstes ist Essen. Und wie gesagt, Essen wird wahrscheinlich der größte Aufwand sein. Also drücken Sie p oder klicken Sie rechts hier für die Eltern, noch einmal, Mauszeiger in die Mitte, klicken Sie auf, klicken Sie irgendwo in der Mitte. Und ich werde zum Beispiel irgendwo hier klicken. Klicken Sie außerhalb mehr Holz auf der Oberseite unserer Lebensmittel-Schichtkontrolle m, so dass wir diesen Park maskieren können. Das wird Essen genannt. Wir haben Versorgungsunternehmen. Und wieder einmal, Dienstprogramme können teuer sein, aber sie müssen es nicht sein. Also mal sehen, vielleicht können wir ihnen so etwas geben. Und gehen wir nach draußen. Gehen wir hier, oder Sie können umgekehrt gehen, wie Sie wollen. Position Gliedmaße genau hier, trifft Schichtkontrolle, Luftqualitäts-Dienstprogramme. Und wenn Ihr Client zum Beispiel möchte, dass Sie die Größe dieser Dienstprogramme reduzieren. Du kannst zurück zu hier springen. Sie können darauf doppelklicken, und Sie können diese so positionieren, wie Sie möchten , so dass Sie Speicherplatz für alle diese erhöhen oder verringern können. So zum Beispiel. Und lasst es uns so positionieren. Ich werde keine Auto-Zahlungen machen, weil Auto-Zahlungen bereits da sind. Lasst es uns einfach da lassen. Und das ist es im Grunde für diesen Entwurf, den wir bereits in Reframing Abschnittinformationen für DES angewendet haben. Wenn Sie dies Ticker machen möchten, so dass Sie in all diese Kreise springen können. Lassen Sie mich Ihnen schnell eine Schuld zeigen. Also haben wir das Diagramm und Sie müssen alle diese Kreise auswählen. Und Sie können zum Beispiel 20 sein. Und jetzt können Sie sehen, wie das aussieht. Gehen wir mit 20. Und Sie müssen tatsächlich festlegen, wählen Sie alle separat, oder Sie können das von Anfang an tun, nur um zu sehen, was Sie haben. Also jetzt haben wir viel Dicker Kreis. Also, wenn du auf das bist, kannst du das tun. Aber ich werde Breite in Temp halten, nur so dass es mir mehr Konsistenz mit dem Rest meines Designs gibt. Da haben wir es. Wir haben unseren ersten Dashboard-Bildschirm abgeschlossen. Und ich werde einfach Control D drücken und es Dashboard-Konten oder Dashboard-Design-Konto nennen , wie Sie wollen. Und ich denke, das ist es im Grunde. Wir sehen uns im nächsten Video, in dem wir diesen Dashboard-Account-Bildschirm angehen werden. Und wir werden später daran arbeiten. Also sehe ich dich dort. 47. Design erstellen: Lassen Sie uns jetzt beginnen, an und Dashboard-Design-Konto zu arbeiten. Und das erste, was offensichtlich ist, unser Konto hier auszuwählen, nur um anzugeben, wo wir sind. Als Nächstes werde ich diesen und diesen löschen, weil wir ihn nicht brauchen. Hilfe-Tab, können Sie es dort lassen. Als Nächstes drauf. Was ich tun werde, sind Ihre Kontoinformationen so. Und mal sehen, Speicher kann es auf 40 positionieren, zum Beispiel, ich denke, das wird gut funktionieren. Also werde ich diese drei verschieben. Stellen Sie sicher, dass wir bei 40 sind, weil wir bei 40 sind. Und was wir tatsächlich auf diesem Konto Informationen präsentieren werden, ist, dass der Benutzer in der Lage sein wird, zum Beispiel zu sehen , welche Konten sie geöffnet haben. Wenn Sie sich erinnern, haben wir angefangen zu zählen und so weiter und so weiter. Wie viel haben sie seit der Eröffnung ausgegeben? Damit sie das alles sehen können. Und sie können zum Beispiel dorthin klicken und zu Transaktionen gehen, um ihre früheren Transaktionen anzuzeigen. Sie werden immer noch dazu beigetragen haben, dass dies getupft weil es hilfreich ist, es offensichtlich dort zu haben. Und schließlich werden wir diese Felder haben, so dass sie es dort Informationen hinzufügen können, zum Beispiel, sie können ändern, wie sie Namen Anzeigen auf der Karte. Sie können die Adresse ändern, wenn, zum Beispiel, d verschoben und geändert die Adresse, sie können die E-Mail und das Passwort ändern und so weiter. Also lasst uns das jetzt tun. Lassen Sie uns jetzt schnell mit diesem umgehen. Also werde ich es, mal sehen. Ich kann diese entfernen, so dass ich mich selbst und leere Registerkarte haben kann. Und nennen wir diese Summe ausgegeben. Wie Dad. Ich werde in mein Hauptkonto springen und diese beiden auswählen. Zum Beispiel, drücken Sie Control C. Klicken Sie hier rechts, könnte V steuern und einfach positionieren und auch auf der Umschalttaste, um sie dort zu positionieren. Nun, was ich tun werde, ist sicherzustellen, dass beide zentriert ausgerichtet sind. Und mal sehen, ich kann diese beiden in der Mitte positionieren und diese beiden so in der Mitte. Und lasst uns das geben. So zum Beispiel, insgesamt seit der Eröffnung ausgegeben. Und mal sehen. Geben wir dem noch eine andere Nummer. So zum Beispiel, 96,507 Werkzeug für, mal sehen. Also eine große Zahl. Und das ist die Nummer, die sie seit der Eröffnung ausgegeben haben. Ich werde sicherstellen, dass sie Bootfahren Zentrum sind und ich werde sie hier positionieren. Und wir werden es einen Tag nennen. Wieder einmal können sie direkt hier klicken, später zum Transaktionsschritt gehen und alle Ausgaben erkunden, seit sie ihr Konto eröffnet haben. Was ich als Nächstes tun werde, ist hier zu springen. Und mal sehen, wir werden dieses Start-Konto anrufen. Was ich tun werde, ist hier zu springen und mein Startkonto Symbol zu finden. Also werde ich mich hier befinden, es ist, und ziehen Sie es in Position. Und wo machen Sie mehr mit hier. Und ich werde es so in der Mitte positionieren. Und mal sehen, vielleicht, ich weiß nicht, 12 zu vier. Zum Beispiel werde ich diese Nummer entfernen und ich werde diese beiden hier positionieren. Stellen Sie sicher, dass sie links sind, stellen Sie sicher, dass sie links positioniert sind, um dies zu schreiben. Wir rufen so ein Disc-Startkonto an. Und mal sehen. Ich werde am 23. April 2020 nochmals das amerikanische britische Volk anheften , wer auch immer umgekehrt benutzt. Also 0-4 Punkt 23, können Sie auch in Schulden tun. Also 40, mal sehen, wie das funktioniert. Ich denke, es funktioniert gut. Mal sehen, wo wir sind. So 1234. Ja, ich denke, das funktioniert ganz gut. Was ich eigentlich tun werde, ist vielleicht das zu machen und ein wenig ausgegraut. Also gib uns Farbe. Und ich grabe diesen Abstand nicht wirklich. Vielleicht 20. Ja, ich denke, das funktioniert viel besser. Und Direktion, wir haben diese Abschnitte abgeschlossen. Nun bleibt uns noch übrig, die Felder unten für die Foren auszufüllen. Also werde ich einfach alle diese kopieren. Also Vorname, Nachname, E-Mail-Passwort und eine Schaltfläche drücken Control-C. Und Springen hier hatte Kontrolle v. Also werde ich sie alle n. jetzt werde ich tun ist im Grunde reorganisieren sie ein wenig. Aber bevor ich das tue, weil Sie keines dieser Formularfelder sehen können. Wenn Sie sehen können, weil dies die Farbe der Fremdfelder ist die gleiche Farbe des Dashboards. Also lassen Sie uns zuerst bewegen sie alle unten geholfen , weil es gehen, dort sowieso zu gehen. Also werde ich all diese fremden Felder, Eingabefelder öffnen. Und das ist wählen Sie sie, wählen Sie weiße Farbe, nur so dass Sie sie auf dem Brett ein wenig besser sehen können. Als Nächstes werde ich sie organisieren. Also werden Vor- und Nachname genau hier gehen. Also mal sehen, vielleicht können wir das auch auf 40 positionieren, nur um die Konsistenz zu halten. So können Sie sie noch mehr positionieren, wenn Sie wollen, aber ich denke, sie werden gut funktionieren. Als Nächstes werde ich meine E-Mail hier positionieren, stellen Sie sicher, dass sie bei 40. Und wir werden mit einigen Abständen herumspielen. Aber lasst uns das zuerst hier fertig machen. Also lass uns mal sehen. Wir werden bei 12345678 sein. Lassen Sie uns das nur ein wenig bei 80 positionieren. Und was ich mit der Schaltfläche tun werde, ist, weil diese Gitter geändert werden. Ich werde die Größe der Schaltfläche etwas ändern, so dass sie drei Spalten hier und drei Spalten hier aufnehmen kann . Also lasst uns zwischen ihnen wechseln. Es funktioniert gut. Und der Text hier wird in Bearbeitungsinformationen schreiben. Ich mache das. Und ich werde in mein Haus springen, Staat basiert auf dem Text in, springen zurück zu den Hauptdecks und Harrier. Also, was ich tun werde, ist, zu positionieren, dass Ds so sind. Mal sehen, 246. Also hier sind wir. Genau hier. Ich werde das Gleiche für diesen hier tun. Und ich werde im Grunde springen und meine Felder anpassen, um zu migrieren. So wie das hier. Also werden alle vier sechs Spalten breit sein, so. Und wann das gleiche für den Namen zu tun. Und im Grunde sind wir hier. Wir haben unser Design-Konto für die Dashboard-Seite ausgefüllt . Was sie hier noch einmal tun können, ist, das Konto zu besetzen, auf dem sie sich befinden. So geöffnet an diesem Datum. Wenn sie zum Beispiel mehrere Konten offen haben. So zum Beispiel überprüft man, man rettet, man ist für Schulden, Kredit und so weiter und so weiter. Dann können Sie voran gehen und die Paginierung einschließen und es genauso tun , wie wir es für diese und für die Karten getan haben, wenn Sie sich erinnern. So können sie schnell auf die Paginierung klicken und zwischen all ihren Konten oder bristly Dan wechseln, und diese Informationen werden aktualisiert sowie das Symbol selbst. Dann haben wir den Gesamtbetrag seit Ausgaben. Das ist also der Betrag, den sie ausgegeben haben, seit sie das Konto bei der Bank eröffnet haben. Wieder einmal können sie dort klicken und gehen Sie zu den Transaktionen und erkunden Sie alle ihre Transaktionen rückwärts gehen, wir haben immer noch die Registerkarte Hilfe. Und schließlich haben wir all diese Informationen Feststoffe Gruppe es nur so, dass wir die Dinge einfach halten können. So zum Beispiel persönliche Informationen wie diese. Und sie können es hinzufügen, dass persönliche Informationen. Also noch einmal, wenn sie, zum Beispiel, bewegt, so dass sie ihre Adresse ändern. Wir haben also nicht die Adresse hier, aber wir können sie einschließen. Mal sehen, vielleicht können wir die Adresse hier oben setzen. Also mal sehen, wir haben es hier nicht, aber wir können schnell einschließen. Also lasst uns das machen. Anstatt sechs zu verwenden, können wir zum Beispiel ein für verwenden. Also kann ich hier reinspringen, 1234, Vorname, Nachname. Also kann ich es so positionieren, dass es hier ist. Mal sehen, 1234. Mein Dad und ich können Kontrolle D und MODIS treffen. Und das kann dann unsere Adresse sein. Oder ich denke, weil wir diese Adresse haben, also lasst uns sie schnell ändern. Also zieh dich aus. Weil wir Adresse haben. Vielleicht können wir es erweitern, damit wir mit unseren Säulen noch mehr spielen können. Also mal sehen, vielleicht kann ich ihnen anstelle von vier drei geben, weil ich nicht zu viel Platz für den Vor- und Nachnamen brauche. Also lass uns 33 so sehen. Und schließlich kann ich diesem zum Beispiel den Abstand von sechs geben. Also 246, weil ich zum Beispiel eine größere Adresse hinzufügen möchte , nur damit ich diese Interessen angeben kann. So gab es, wie es, und jetzt sind wir abgeschlossen. Also noch einmal, wenn der Benutzer seine persönlichen Informationen ändern will, so entweder seinen Vor- oder Nachnamen, wenn er es irgendwie geändert und wollen es hier ändern, können sie die Adresse ändern oder lose, wenn sie verschoben haben, können sie ihre E-Mail-Adresse und das Passwort ändern. Und sie können das alles tun, indem sie einfach auf Informationen hinzufügen klicken. Also bearbeiten Sie Informationen. Also lassen Sie uns zum Ende schnell eine Vorschau darauf, sehen, wie alles aussieht. Und Sie können auch Hover-Zustände für alle diese hinzufügen, wenn Sie möchten. So können Sie zum Beispiel diesen Hintergrundschatten einschließen, den wir bereits haben. Sie können es zum Beispiel etwas stärker machen, wenn der Hover hier ist. So können Sie angeben, dass sie es getan haben, aber im Moment lassen wir es einfach dort. Also hier haben wir das oder es funktioniert offensichtlich gut. Wir haben den Hover-Effekt und wir haben eine aktuelle ausgewählt. Also im Grunde ist es das für dieses Video. Wir sehen uns im nächsten. Und mal sehen, was wir als Nächstes haben. Als nächstes unsere Transaktionen. Also sehe ich dich dort. 48. Design erstellen: Lassen Sie uns jetzt weitermachen und weiter, wo wir im vorherigen Video aufgehört haben. Und anstatt dieses zu kopieren, werde ich dieses auswählen und kopieren. Mal sehen, was wir hier tun können. In diesem hier möchte ich nur Ihre Transaktionen behalten, weil wir tatsächlich auf dem Transaktionsbildschirm sind. Also nennen wir es so. Zunächst einmal lassen Sie uns dies in eine Transaktion ändern, die direkt hier springen, und nennen wir es die Transaktionen so. Und wie gesagt, innerhalb der Transaktionen können Sie direkt hier klicken, um, anstatt mehr zu erfahren, lassen Sie es zu viel mehr ändern. Also mal sehen. Laden Sie mehr. Und mal sehen, ich kann diese sechs bewegen. Also 123456, wie Diffs, werde ich sicherstellen, dass es so in der Mitte meines Hintergrunds ist. Ich werde Control C treffen und ich gehe zurück zu hier. Also werde ich Kontrolle V drücken, um es einzufügen. Ich werde diese alten löschen. Und ich werde einfach, und springen direkt hier, wählen Sie diese beiden, positionieren sie ein wenig nach unten. Also zwei hier. Und ich werde noch einmal sicherstellen, dass sie so zentriert sind. Also noch einmal, Sie können auf Laden mehr klicken und Sie können alle diese erweitern, so dass sie einen scrollbaren Bereich erstellen können. Also lasst uns das wirklich machen. Also kann ich reinspringen und ich habe alle meine Transaktionen hier. So kann ich Begriffe gruppieren. Zum Beispiel, mal sehen, ich kann Kontrolle und G treffen, und ich kann diese Transaktionen so nennen. Und ich kann auch klicken und ein Wiederholungsraster erstellen. Und mal sehen, ich kann das zum Beispiel auf, und ich weiß nicht, sagen wir hier. Und was ich damit tun kann, ist mit der rechten Maustaste das Gruppierungsraster aufheben. Wir haben also drei dieser Transaktionen. Sie können die Kontrolle G drücken, wenn wir wollen, oder Sie können diese Transaktionen einfach innerhalb dieses ersten verschieben. Das ist also unser erster. Das ist unser zweiter, dann ist das unser dritter. Was wir eigentlich tun müssen, ist, diese umzubenennen. Also war unser letztes sechs. Das wird also sieben sein. Das wird 89101112 sein. Ich dat. Und ich werde Control X treffen, um sie auszuschneiden. Und ich werde hier Begriff fallen lassen. True, Film positioniert ist ganz nach unten rechts klicken Sie auf Gruppierung aufheben Komponente, sorry für Gruppe und unsere Gruppe. Und vielleicht können wir es sogar dort lassen. Also mache ich dir keine Sorgen, aber du verstehst den Punkt. Was ich als Nächstes tun werde, ist hier zu klicken und Sie haben diese drei genau hier. Dies ist also eine horizontale Schriftrolle. Wir werden tatsächlich später verwenden, wenn wir mit dem Responsive Design beginnen. Dies ist die vertikale Bildlauf, also nach oben und unten, und das ist der Scroll in alle Richtungen. Und im Grunde Schulden eins ist am nützlichsten, wenn Sie zum Beispiel eine Karte erstellen. Und Sie möchten Karte in alle Richtungen zeigen. Also für diesen Fall werde ich vertikale Bildlauf verwenden. Also werde ich diesen Bereich hier unten positionieren, zum Beispiel, nur irgendwie kann ich angeben, wo Benutzer schrauben können. Und ich kann hier springen, Vorschau treffen. Und in unserer Vorschau möchte ich Ihnen nur zeigen, dass Sie, wenn Sie mit dem Scrollen beginnen, sehen können, wie das aussieht. So können sie im Grunde mehr klicken. Es wird mehr laden. Und sie können anfangen zu scrollen und den ganzen Weg nach unten zu gehen. Offensichtlich können wir die Taten ändern, um die Dinge realistischer zu machen, aber lassen Sie uns nicht mit Details besessen. Also offensichtlich werden diese Daten von hier runter gehen. Dies ist also der August Monat des Jahres, vielleicht ist dies der 2. August, und dann gehen sie in Richtung Januar und Anfang des Jahres. Aber wie ich sagte: Lasst uns nicht mit diesen Details verstopfen. Was ich als Nächstes tun werde, ist vielleicht, dass wir das sogar erweitern können. Nun, mal sehen. Wir haben 245. Ich weiß es nicht. Vielleicht können wir das unten senken und das vielleicht ein bisschen verlängern. Lass uns das machen. Also werde ich das etwas schmaler machen. Und Sie können das Responsive Design direkt hier in Aktion sehen. Aber wir werden ein bisschen über Responsive Design sprechen, einen Liter. Also werde ich all das hier unten positionieren. Und in unserer Crawl-Gruppe, was wir jetzt im Grunde tun müssen, ist, dass ich hier reinspringen und sehen kann, ob ich bei 40 bin. Also werde ich jemanden neu positionieren, also bin ich 35 hier, also 12345. Also bin ich bei 4041 oben. Ich werde es in Dare positionieren, um bei 40 zu sein. Und schließlich werde ich das hierher bringen. Und Sie können natürlich den Abstand zwischen all diesen erhöhen. Also, was wir tun müssen, ist tatsächlich alle von ihnen zu öffnen und beginnen, sie einzeln zu organisieren. Also kann ich heute zu d und a d verwenden und dann nach unten scrollen. Also Datum, Datum, Datum, um zu sehen, wo wir sind. Also zwei D. D. Ich weiß nicht, warum es es es immer wieder zurückbringt, aber ich werde sowieso nach unten scrollen. Also noch einmal, wir müssen bei 40 sein. Also werden wir hier 1234 ziehen, so dass wir im Einklang mit unseren Texten stehen. Als Nächstes können wir tatsächlich alle diese Elemente an diesem Rasterpunkt ausrichten. Also lassen Sie uns wählen, das sind die Unternehmen. Starbucks sind das hier, wo wir König haben, und dann mehr eins und wählen Sie alle aus. Ich halte meine Steuerungstaste und klicke, so dass ich offensichtlich mehrere auf ihnen auswählen kann. So blauer König, und schließlich ist dieser letzte Polymer. Richten Sie sie also einfach so am Gitter aus. Als Nächstes bewegen wir uns in diesen Zahlen. Wählen Sie also einfach Ihre Zahlen aus. Geh von hier rauf. Ich wähle alle diese Zahlen aus und schiebe sie nach rechts und 40. Also gehen Sie den ganzen Weg, um 1234 zu hören, weil wir jetzt ein bisschen mehr Platz haben. Und was wir tun können, ist, dass wir diese Dinge wie Schulden belassen können, aber ich möchte sie einfach schnell an das Netz ausrichten, nur damit wir etwas mehr Platz haben. Was wir also tun müssen, ist tatsächlich unsere Tags auszuwählen. Ich werde Temp Schwärze wählen. Wählen Sie einfach Ihre Tags aus und wir werden in nur einer Sekunde fertig sein. Auditing besteht also darin, sie so am Gitter auszurichten. So sieht es jetzt schön und sauber aus. Und was ich auch bemerkt habe, ist offenbart Stack sollte genau hier gehen. Und suchen wir noch einen. Lebensmittel Erbe, weil wir die Wiederholung größere duplizieren sie und alles andere sieht gut aus. Schließen wir jetzt unsere Scroll-Gruppe und lassen Sie uns vielleicht noch einmal testen und sehen, was wir hier haben. Wir haben 41, also können wir einen bewegen. Also sind wir bei 40 und wir sind bei einer Neun hier. Also mal sehen, vielleicht kann ich sie so schließen, oder ich kann sie sogar enthüllen. Hier. Wir sind bei 19 und wir sind bei 19 hier. Also mal sehen, vielleicht können wir das nur einen nach unten positionieren, damit wir bei 20 sind. Also bis zu unserer Scroll-Gruppe und wir sind 18 nach unten. Lass es uns noch einmal machen. Sehen Sie, wie das aussieht. Mal sehen, damit ich nach unten scrollen kann und alles sieht schön und sauber aus. Nun, da das fertig ist, gehen wir zu den Stop-Abschnitten. Also werde ich das hier entfernen. Ich werde das hier positionieren. Und ich werde auch sicherstellen, dass ich mich für sechs entschieden habe. Also mal sehen, wir sind jetzt bei vier, wir sind jetzt bei sechs Solidus. Und schließlich werde ich dasselbe für diesen hier tun. Und nur um mir ein bisschen mehr Platz zu geben, wenn ich eigentlich als nächstes tun werde, wird dieser Typ in Ihren Transaktionen direkt dort gelöscht. Und dann wähle ich diese beiden aus und positioniere sie auf 40. Und ging, um die Höhe von beiden zu erhöhen. Also lassen Sie uns Konto VG-Karten wählen, VG. Ich werde es auf 291 erhöhen, so. Und jetzt sind wir bei 39. Mal sehen, wir sind bei 41 mit diesen. Also können wir diese beiden tatsächlich bewegen, nur einen nach unten. Also sind wir auf See. Wir sind bei 40 und wir sind bei Anwalt neun hier. Mal sehen. Dann können wir das auf 290 ändern, so. Und jetzt sind wir bei 40, wir sind bei 40. Also sieht alles gut aus. Aber ich werde das tun, ist Kontrolle S zu treffen und zu erklären, was genau hier passieren wird. Also genau hier werden wir einige Diagramme einschließen und wir werden tatsächlich Ihre Übergangstransaktionen zeigen. Also im Grunde werden diese Transaktionen durch Einnahmen und Ausgaben geteilt werden. Und sie gehen eine Woche zurück. So werden Benutzer in der Lage sein, diese Transaktionen eine Woche zurück zu sehen. Und sie werden tatsächlich in der Lage sein, zwischen Einnahmen und Ausgaben und im Grunde zu ihr zu überprüfen und zu sehen, wo das meiste Geld an welchem Tag und wie viel insgesamt ausgegeben hat. Genau hier auf der rechten Seite. Und wir werden ihnen tatsächlich einige Utility Tablets geben , die von DATT gefärbt wurden , oder wir werden einige ernsthafte Schritte sehen, zum Beispiel. Es wird also in der Lage sein, Geld zu überweisen. Also lassen Sie uns sagen, dass Sie Ihre Frau haben oder Ihre Freundin breitere Mutter spielt keine Rolle. Und Sie möchten ihnen das Geld von Ihrem Konto überweisen. So werden sie dort die Möglichkeit haben. Dann haben sie die Möglichkeit, die Rechnungen zu bezahlen. Und sie werden auch die Möglichkeit haben, Geld zu konvertieren. Also für die Umwandlung, lassen Sie sagen, dass Ihr Konto in US-Dollar ist und Sie dieses Geld in Euro umwandeln wollen, entweder um auszugeben oder an jemand anderen zu senden. Und das ist im Grunde, was das sein wird. Wir werden diese Seiten nicht erstellen, werden nur diese Optionen erstellen, weil diese Seiten bereits von der Bank erstellt werden. Und das sind im Grunde nur ein Pop-ups von nur grundlegendem Code. Darunter genau hier. Wir werden Balance-Inhalte haben. Also werden wir Einnahmen und Ausgaben haben. Und diese werden im Grunde total für den Monat sein. Also lasst uns jetzt beginnen, indem wir all diese erstellen. Also werde ich hier anfangen, damit wir von links nach rechts gehen können. Ich werde deine Abschnitte so eintippen. Und mal sehen, wir können sie Transaktionsschönheit so nennen. Und was ich tun werde, mal sehen, vielleicht kann ich das etwas nach oben bringen. Sehen wir uns Suwanee Spot an. Mal sehen, wo wir hier sind. 12, wir sind bei 20, wir sind bei 40. Also werde ich es so lassen. Ich werde das auch ein bisschen nach unten positionieren. Ich werde diesen Text löschen, Kontrolle D und diesen drücken und ihm Einkommen geben. Und bei diesem hier werde ich es teuer geben. So wie das. Ich werde sie beide so positionieren, dass sie rechtsbündig sind. Es wird also leicht für mich sein, sie zu organisieren. Verschieben Sie diese für das Grün, verschieben Sie diese für das Rot. Offensichtlich werden wir diese Ausgaben ein wenig mehr untersuchen. Stellen Sie sicher, dass wir bei 40 sind. So 1234. Und noch einmal, stellen Sie sicher, dass wir mit diesem auch bei 40 sind. Und genau hier werden wir diese Sandwiched nehmen mich sicher. Ich bin 20 unten 40 hier. Und ich werde von der linken Ausrichtung eingeben, also mod für den Montag. Und Sie können offensichtlich Betrag gleichmäßig verteilt, wenn Sie verklagen wollen D. Sie können die Wiederholungsraster verwenden und es ist viel schneller. Aber Sie können dies auch tun, damit Sie sie so positionieren können. Stellen Sie also sicher, dass Sie richtig ausgerichtet sind. Es wird nicht zeigen, ist das. Also lasst es uns so machen. 1234. Jetzt sind wir ausgerichtet, und das wird offensichtlich Sonntag sein. Das tue ich. Und du kannst das duplizieren und es Samstag nennen. Das wird Freitag sein. Das wird Donnerstag sein. Das wird Mittwoch sein. Und das wird 2Z sein. Ich schätze. Also im Grunde werden wir jetzt den Abstand zwischen ihnen von 60 haben, zum Beispiel. Mal sehen, wie die Erde funktioniert. 60. Und lassen Sie mich schnell organisieren. Also werde ich meinen Montag auswählen, verschieben Sie es den ganzen Weg nach oben Sonntag ist genau hier. Wie gesagt, Sie haben die Möglichkeit, Raster zu wiederholen, aber ich zeige Ihnen nur beide Möglichkeiten, so dass Sie das auch tun können, wenn Sie wollen. Also werde ich das auf 60 positionieren. Und jetzt versuchen wir etwas anderes. Ich werde alle von ihnen auswählen und einfach hier klicken , nur um zu sehen, was Adobe XD gamey. Also gab es mir 707070707070 hier. Das ist also in Ordnung, weil sie alle schnell getrennt sind und Sie diese Option auch gesehen haben. Also kann ich voran gehen und sie gruppieren, nannte sie Tage. Und jetzt bleibt mir noch übrig, im Grunde mein Diagramm zu erstellen. Also werde ich zum Beispiel dieses eine Control D duplizieren und eingeben plus siehe für 25. Oder um sicherzustellen, dass es von der Mitte ist. Und Sie können natürlich mit diesen herumspielen. Ich stelle sicher, dass dieser übrig ist, dieser ist nur für die Ausrichtungszwecke rechts ausgerichtet. Aber Sie können sicherstellen, dass dies zum Beispiel Zentrum ist. Und jetzt wird es Ihnen eine 69 oder 70 zeigen. Also lassen Sie uns nicht mit dem und mit den notwendigen unwichtigen Details verkauft , lassen Sie uns weitermachen. Und was ich hier erstellen werde, ist und Tooltip. Und um einen Tooltip zu erstellen, verwende ich einfach mein Rechteck-Werkzeug und ziehe mein Rechteck mehr Breite hier. Ich werde es Werkzeug nennen, um zu tun, was ich getan habe. Und ich werde sicherstellen, dass diese beiden zentriert sind. Und ich kann meine Kurve auch verlängern, indem ich einfach meinen alten Schlüssel halte. Ich kann Board-Ecken gleichzeitig verlängern. Ich kann voran gehen und tippen, zum Beispiel, fünf, nur um es Indies um Ecken und runde Kanten zu geben. Ich kann auch hineinspringen und mein Polygonwerkzeug verwenden, um dieses Rechteck zu erstellen. Ich werde es aufklappen und sicherstellen, dass diese beiden zentriert sind. So wie das. Polygon wird offensichtlich nach unten gehen. Und ich werde einschließen, zum Beispiel, genau hier, ich werde es Tipp nennen. So werde ich die Grenze entfernen. Und mal sehen, vielleicht kann ich diese Farbe wählen. Und lassen Sie uns für den Text sehen, Sie können diese Farbe lassen, wenn Sie möchten. Ich denke, es wird ganz gut funktionieren. Aber man kann auch mit Weiß bestimmt. Das funktioniert auch gut. Und lasst uns, weißt du, gehen wir einfach mit Weiß. Ich denke, deshalb lasst uns endlich diese 2k zusammenführen. Also werde ich hier klicken, um eine Form zu erstellen. Und wir würden es Tooltip nennen, so. Und jetzt kannst du es bewegen. Lassen Sie es uns einfach gruppieren. Ich werde ihm einen Namen wie diesen geben. Und lasst es uns vorerst dort lassen. Was ich als Nächstes tun werde, ist meinen Bleistift und meine mentale darauf zu verwenden, wann ich mich hier ausrichten soll. Ich werde es hier ausrichten und Flucht treffen. Und ich will nur sicherstellen, dass ich zentriert bin. Wir alle diese. Was ich also tun kann, ist offensichtlich mein Rechteck-Werkzeug hier zu verwenden. Ich kann einfach verlängern. Und Sie können auch direkt hier oben auf Ihrer Tastatur schweben. Und Sie haben diese Leitfäden, damit Sie eine Anleitung zeichnen können , wo immer Sie wollen und die Dinge darauf ausrichten können. Und Sie können dasselbe von der linken Kante aus tun. Und Sie können einfach einen Führer ausrichten, anders als in Schulden, und dann einfach in Schulden und Leitfaden für die Ausrichtung gefolgt. Ich denke, das wird gut. Wenn Sie es also entfernen möchten, klicken Sie und ziehen Sie es nach außen. Okay, jetzt werde ich ihm einen Namen geben. Das wird also unsere Einkommenslinie sein. Ich habe das geändert. Ich werde es duplizieren. Das wird unsere Ausgabenzeile sein oder nein, lass uns zuerst erstellt und du wirst sehen, was ich meine. Also zuerst, lassen Sie uns die Rahmenfarbe in diese Farbe ändern. Ich gehe um die Mütze herum. Also wird hier und hier um das sein, was ich auch tun werde. Mal sehen. Ich kann die Größe von ähneln auf fünf erhöhen. Ich denke, das funktioniert gut, weil Sie es jetzt sehen können. Und was wir als nächstes tun werden, ist Springen Seite auf einige Punkte hinzufügen. So können Sie doppelklicken und klicken Sie rechts hier. So können wir zum Beispiel einen zusätzlichen Ankerpunkt für all diese verschiedenen Tage erstellen . Damit wir dann all diese Tage so präsentieren können , dass wir diese Animationen so organisieren können, dass wir den Benutzern zum Beispiel zeigen können, wo sie klicken können. Wir werden uns nicht mit Sonntag und Montag beschäftigen , weil das offensichtlich Startpunkte sind. Aber ich werde als nächstes tun, ist einfach bewegt sie herum, nur um zu versuchen, Augapfel es. Und Sie können sehr spezifisch sein, wenn Sie zum Beispiel diese Guides verwenden möchten , aber ich werde mich nicht damit beschäftigen. Wir werden es nur vorerst hier lassen. Nun, was ich tun werde, ist es einfach so zu erhöhen. Vielleicht kann ich diese beiden hier verringern. Diese beiden hier, hier und vielleicht hier. Vielleicht kann das ein bisschen hoch gehen. Und wir können alle Tooltip hier positionieren. Und zum Beispiel, wenn Sie möchten, können Sie diese Linien verwenden, aber Sie können auch gekrümmte Linien verwenden. Um das zu tun, müssen Sie einfach doppelklicken, um alle diese so gekrümmt zu werden. So können Sie zum Beispiel viel realistischeren Fluss dieser Diagramme zeigen . So zum Beispiel, jemand wie Schreibtisch. Und schließlich, was wir brauchen, ist der Kreis, damit wir unseren Punkt wählen können. die Benutzer klicken können. Zum Beispiel, hier, sagen wir, ich denke, das funktioniert gut. Nehmen wir an, wir wollen es nur in der Mitte halten, es schön und sauber halten. Und das wird unser Tool-Tipp sein. Und was ich tun werde, ist tatsächlich geben Sie ihm diese Farbe entfernt Grenze. Und es ist im Grunde, es kann auch eine Art Schlagschatten enthalten. Also auf 25 vielleicht. Ich denke, das hat gut funktioniert, nur um es grundsätzlich von unserem Hintergrund zu trennen. Jetzt, wo wir Schulden haben, können wir das duplizieren und es Ausgabenlinie nennen. Ich werde meine Einkommenslinie aus der Sicht entfernen. Klicken Sie hier, wählen Sie diese Farbe aus. Und was ich im Grunde tun werde, ist das Gleiche , aber ich werde zum Beispiel diesen hier erhöhen, diesen verringern. Vielleicht schieben Sie das ein wenig nach oben. Vielleicht hier. Vielleicht hat das hier positioniert. Vielleicht kann das den ganzen Weg springen und es kann runtergehen. Also habe ich jetzt meine Einkommenslinie mitgebracht? kannst du sehen. Also, das ist es im Grunde. Sie können auf Einnahmen und Ausgaben klicken, um diese verschiedenen Dinge zu zeigen. Also werden wir das Einkommen tatsächlich auf den höchsten Punkt bringen. Also werde ich mit hier umziehen. Es ist also eher der Tooltip up und der Tooltip Punkt. Also beide auf den höchsten Punkt. Das ist also unser höchster Punkt. Das ist eigentlich ein höchster Punkt. So können wir zum Beispiel mehr Witz, ich weiß nicht. Lassen wir es einfach hier, wo es in dezentriert war, nur um den Benutzern zu zeigen und ein bisschen genauer und etwas mehr Materie zu sein nein, einfach klar es damit. Ich werde auch unsere Tooltips duplizieren. Also lasst uns dieses Qualitätswerkzeug gruppieren. Tipp wie Tod oder Einkommen Tooltip und dupliziere es, nenne es Ausgaben, so. Und offensichtlich mit Ausgaben und das wird in dieser roten Farbe sein. Also werde ich es auswählen und sicherstellen, dass wir auf dem roten sind, springen in den Tooltip BG, und geben Sie es in dieser roten Farbe. Da haben wir es. Und ich werde auch dieses Plus Zitat minus entfernen. Und mal sehen, ich weiß nicht, neun, 4-6 vielleicht. Ich denke, das ist in Ordnung. Stellen Sie sicher, dass wir in einem Zentrum sind. Und das ist es im Grunde. Also werde ich es positionieren, zum Beispiel, hier n. nun gehen wir voran und machen unsere Komponente. Also wird das hier sein, zum Beispiel. Und wir können eine Komponente aus diesem gesamten Abschnitt erstellen. So Qualität Ihrer Transaktionen. Wenn Sie würden Steuerschlüssel, um eine Komponente zu erstellen, und diese Standardeinstellung, zum Beispiel, kann zeigen Einkommen sein. Also werden wir Ausgaben Tooltip verstecken. Wir werden hohe Ausgaben ausrichten. Und hier auf die Kosten, die wir ausgegraut werden. Also ich Sie dies nur, um anzuzeigen, dass das Einkommen ausgewählt wird. Was wir als Nächstes tun werden, ist einen neuen Zustand zu schaffen. Wir werden es Ausgaben nennen. Mein Dad. Und für Ausgaben werden wir natürlich das Gegenteil tun. Also hier und hier, wenn die Ausgaben steigen, werden verfärbt sein, Einkommen wird jetzt diesem Kragen entsprechen, so dass sie zwischen Einnahmen und Ausgaben wechseln können. Also lassen Sie uns jetzt voran und prototypisierte es. Also werden wir wählen Registerkarte für die Ausgaben. Übergang Auto animieren Zustand wird Ausgaben und einfach und aus und Nullpunkt sein, mal sehen. Sechs Sekunden. Sie denken, es wird gut funktionieren. Gehen wir zurück zu teuer, wählen Sie unser Einkommen, tun das gleiche, und gehen wir zurück zum Standardzustand, drücken Vorschau, nur damit wir sehen können, was wir getan haben. Bisher haben wir hier eine Scrollgruppe. Wir werden hier natürlich Animationen haben. Ich denke, das sieht gut aus. Und jetzt lasst uns das testen. Aus irgendeinem Grund. Es möchte nicht klicken. Vielleicht habe ich es nicht eingerichtet, also gehen wir zu Ausgaben. Klicken Sie hier. Und ich habe den Staat nicht gewählt, also einen Standardzustand. Und lassen Sie uns das noch einmal in der Vorschau sehen. Mal sehen. Also mag ich in diesem Übergang nicht wirklich. Aber lasst es uns vorerst dort lassen. Vielleicht jeder Selektor hier unten, aber lasst es uns vorerst dort lassen. Ich mag es nicht, Übergänge zwischen diesen beiden verschwinden. Vielleicht kann nur ein Tooltip angezeigt werden oder so etwas. Aber lassen Sie uns nicht mit Details besessen, denn wir sind schon 25 Minuten in und wir fühlten uns noch viel mehr zu tun. Also gehe ich zurück zum Design und was wir hier brauchen. Als erwähnter Boden nennt man dies fertig und ich werde zum Standardzustand gehen. Was wir hier brauchen, sind die Symbole, die ich erwähnt habe. So kann ich es zum Beispiel Dienste nennen. Ich bin tot. Und ich würde sehen, dass ich beschädigte nur die Texte löschen kann, um Kontrolle C zu treffen, Kontrolle V, um es außerhalb einzufügen, alles zu löschen. Also statt Karten VG, werde ich es Dienste nennen, BG, meine Schulden. Und für den Text werde ich die Gruppierung wirklich schnell aufheben. Und mal sehen, ich werde diese beiden löschen. Also das und das hinterlasse ich nur dieses. Ich werde es Transfer nennen. Stellen Sie sicher, dass es von der Mitte geht. So kann X2 Geld überweisen. Ich nenne das nächste Lohnrechnungen. Und schließlich diese letzte Umwandlung. Was wir jetzt tun können, ist sie tatsächlich positioniert. So kann das in die Mitte gehen. Und mal sehen, das kann genau hier gehen. Also lasst uns eigentlich voran gehen und unsere Kreise erschaffen. Es wird also viel einfacher für uns sein. Also mal sehen, Kreise können zum Beispiel etwas einfach sein wie 100 mal 100. Ich denke, das funktioniert gut. Positionieren wir sie auf 40 von hier. Also 1234, und ich werde es einen Kreis wie diesen nennen. Und lassen Sie uns sie tatsächlich duplizieren. Er hat ihn hier und genau hier positioniert. Und das nächste, was wir tun werden, ist tatsächlich kopieren und einfügen alle diese Symbole, so dass ich die unten innen einfügen kann. Also mal sehen. Lassen Sie mich ihn schnell hier in meinem anderen Design finden. Also werde ich das Transfer-Symbol so machen, Baby-Symbol wie dieses. Und schließlich Konvertierungssymbol wie dieses. Lassen Sie uns schnell die Farbe unserer Kreise ändern, damit Sie die Symbole sehen und sicherstellen können , dass wir den Rahmen entfernt haben, weil wir ihn nicht brauchen. Und schließlich kann ich hier springen und meine Symbole sehen. Also hier sind sie. Und sie sind keine Komponenten. Also werde ich Position tut in die Mitte. Und mal sehen, ich kann das auswählen. Und er hatte Kontrolle G wird bald übertragen werden, reifen. Alle dicht wie diese und dieser Hit Control G, D wird bezahlt Rechnungen Symbol werden. Und schließlich wähle ich dieses und dieses, Kontrolle G, das wird Konvertierungssymbol sein. Und dann werde ich sicherstellen, dass ich sie so in der Mitte positioniert habe. Tun Sie das gleiche für diese eine Zahl ist wieder, sind große Symbole, Zinnsymbole. So können Sie einfach sicherstellen, dass ich immer, wenn ich diese Symbole verwende, große Symbole verwende. Und die ausgefüllten sind aus Einladungselementen. Und ich denke, nur Symbol war der Name des Schöpfers. Also wieder einmal, wir sind bei 40. Und was ich auch tun kann, ist, diese in die Ordner selbst zu bringen , nur damit wir die Dinge noch ein bisschen mehr organisieren können. Siehe Transfer, ich dat. Und weil ich OCD bin, liege Dad, werde ich sie einfach runterziehen. Wie Dad. Dort haben wir es im Wissen schnell, organisieren sie. Das ist also offensichtlich in der Mitte. Lassen Sie uns zuerst alle auswählen und stellen Sie sicher, dass wir so in der Mitte sind. Also sind wir bei 60 runter, 61 oben. Also, das ist in Ordnung. Und was ich als Nächstes tun werde, ist hier gleichmäßig positioniert. Verwenden Sie also einfach noch einmal ein Rechteck, das hier positioniert ist. An diesem Ende, diese Maßnahme, es ist in der Mitte, für ihn diese Seite zu bemerken. Also diese beiden in der Mitte. Und jetzt sieht alles viel zusammenhängender aus. Aber ich werde als nächstes tun, ist einfach meine Hover-Effekte zu erstellen. Also, um das zu tun, werde ich einfach im Grunde den gleichen Effekt für den Button verwenden. Also, wenn Sie sich erinnern, ändert sich dies zu grün, und wir werden das gleiche tun. Also drücken Sie die Steuerungstaste auf diesem, auf Drogenkontrolle k, wir werden einen Hover hinzufügen. Unser nächster Klick hier. Fügen Sie Horror hinzu. Klicken Sie hier bei einem Horror. Also statt innerhalb unseres Erntezustandes, und ich sollte sagen. Wie Sie sehen können, wenn ich einen auswähle, sind wir im Schweben. Also wähle ich meinen Kreis aus und stelle sicher, dass er grün ist. Ich wähle meinen Kreis aus, stelle sicher, dass er grün ist. Stellen Sie sicher, dass es grün ist und Schulden im Grunde. Ich kann zu diesen ursprünglichen Zuständen zurückkehren. So Standardzustand, falten Sie Zustand und Standardzustand Milchherde. Und jetzt, wenn ich hier die Vorschau anklicke, können wir sehen, wie das aussieht. Also im Grunde haben wir diese schönen Horrorzustände. Wenn es sich nicht zu kurz wagte, können Sie sie natürlich ändern. Erträge und Aufwendungen funktionieren gut. Ich mag dieses Design immer noch nicht wirklich. Ich werde mir vielleicht etwas einfallen lassen und dann wiederkommen. Und schließlich haben wir diese scrollbare Gruppe. Lassen Sie uns schließlich an diesem Abschnitt arbeiten und lassen Sie uns dieses Video beenden , weil wir schon eine halbe Stunde sind. Also lasst uns das umbenennen. Mal sehen, vielleicht können wir es als Balance- oder Balance-Inhalt oder so etwas nennen. Lassen Sie uns erweiterte Inhalte nennen. Und ich werde es nennen. Hier. Was ich brauche, ist, dass ich das in Inhalt ändern werde. Und wir werden im Grunde diese beiden Texte verwenden. Ich werde diesen löschen, und ich werde alles andere so löschen. Also im Grunde, lassen Sie uns diese beiden ausrichten. Und mal sehen, vielleicht vor dem Text, den wir tatsächlich verwenden können, ich weiß nicht, 48 vielleicht. Also fangen wir zuerst damit an. Das wird Einkommen sein. Und wir werden es so ausgegraut lassen und beschließen , dass es sich um Ausgaben handelt. Inhalt der Anleihen. Mal sehen, wo wir sind. Vielleicht sollten wir nicht wissen, im Dezember, November, wo wir waren mal sehen. Also es ist er, wir haben kein Date jetzt, aber weil wir hier heute haben und das ist im Dezember. So können wir ausgewogene Inhalte haben, zum Beispiel Dezember. Oder vielleicht ist es offensichtlich, weil wir in diesem Monat sind. Mal sehen, hier. Also am 22. Dezember. Wendy landet hier und sie gehen auf diese Seite, sie werden sich immer noch daran erinnern können, dass sie im Dezember sind. Offensichtlich werden sie wissen, in welchem Monat es ist. Das ist also die Grenzen des Inhalts für die aktuelle Jagd. Also lasst uns voran gehen und diesen Text ändern. Also werde ich 48 mutig wählen. Und wann man das Gleiche für diesen macht. So 48 mutig. Und lassen Sie uns das so behalten, wie es ist. Anneliden ändern dieses Einkommen einfach in, mal sehen, vier auf 7504018. Schulden funktionieren gut. Und mal sehen, vielleicht kann ich es auf B2 positionieren und so weiter, ich kann das zwanziger bis so machen, und ich werde ihre Farben ändern. Also dieses ausländische Einkommen in diesem für die Ausgaben, das funktioniert gut. Und mal sehen, die Trennung zwischen diesen beiden kann vielleicht 40 sein , weil 40 für alles andere so ist. Und mal sehen, vielleicht können wir es nur ein bisschen bewegen. Und alles, was wir brauchen, sind zwei Symbole hier, um die Einnahmen und Ausgaben anzuzeigen. Also werde ich wählen und Basisdosis zwei Symbole. Ich werde dann gleich hier springen und sicherstellen, dass sie lokal sind, so. Und mal sehen, das Einkommen ist an der Spitze und die Ausgaben sinken. Das wird also Einkommen sein. Das werden Kosten sein. Versuchen Sie offensichtlich, Ihre Ebenen so weit wie möglich umzubenennen, nur um sich selbst organisiert zu halten. Da Sie in dieser Phase sehen können, haben wir bereits viel zu viele Ebenen, viel zu viele Optionen hier und da. Deshalb brauchen wir Schulden. Ich werde sicherstellen, dass dieses Symbol mit unseren Inhalten zentriert ist. Also kann ich das tun, indem ich einfach die Umschalttaste gedrückt halte. Oder noch besser, ich kann meinen Text gruppieren, dann diesen Klick hier auswählen und dann die Gruppierung meiner Texte aufheben, weil ich wirklich in einer Gruppe sein musste. Also vorerst werde ich dasselbe für Ausgaben tun und es hier fallen lassen. Heben Sie die Gruppierung auf. Und was wir tatsächlich tun können, ist, sie vielleicht mit unseren Texten wie diesen zu positionieren. 123456, zum Beispiel, kann sein, dass wird gut funktionieren. Und dann ausrichten. All diese Inhaltsbreite werden oben besteuert. Da sind wir es. Lassen Sie mich dieses noch einmal kurz ansehen, um zu sehen, wo wir sind. Also wieder, wir haben Einnahmen und Ausgaben, wieder, sind bereits wie das funktioniert. Also werde ich versuchen, etwas anderes herauszufinden und versucht, es zu ändern. Wir haben Kieselsteine und Umkehr Horrorzustände übertragen. Wir haben scrollbare Gruppen hier, und wir haben diese Anleihen Inhalt. Also dort haben wir es auf der nächsten Seite ist alongs. Also sehe ich dich dort. 49. Design erstellen: Lassen Sie uns jetzt weiter mit unserer nächsten Seite erreicht den langen Song, gehen auf Hit Control D klicken, um dies zu schmieren, unser Board. Anstelle von Transaktionen geben wir ihm einen Namen, Lunge. Und im Grunde für den Versand wollen wir nur die Kredite präsentieren, die der Benutzer bereits genommen hat. So können sie von hier aus neue Kredite hinzufügen. So können sie zum Beispiel klicken, brauchen eine lange mutwillige, keine lange oder so etwas. Und sie können mit jemandem von der Bank in Kontakt treten und dann können sie eine verdammte Neuheit anbieten , zusammen mit den Informationen, die sie bereits über diesen Benutzer haben. Also, was ich tun werde, ist, das zu löschen und alle diese Abschnitte tatsächlich zu löschen. Und mal sehen, ich kann auch Schreibtisch löschen. Was Sie hier brauchen, ist ein Bild. Also mal sehen, vielleicht können sie diejenige benutzen, die ich schon genug habe. Lass uns voran gehen und einen erstellen. Also werde ich darin positionieren, um zu sein, lasst uns 4335 sehen, mal 725781 sehen. So Länge, dass ich es auch eine abgerundete Ecken geben 20. Und mal sehen, wir sind 3545, also müssen wir zehn runtergehen. So, 4040. Also, das ist in Ordnung. Und alles, was ich jetzt tun muss, ist, mein Image einzubeziehen. Um Ihr Bild einzubeziehen, können Sie die gleichen Bilder aus Ihrem Design verwenden. Kopieren Sie ihn einfach und fügen Sie ihn ein, wenn Sie möchten. Aber ich werde tatsächlich das Bild aus meinem Ordner bringen. Also lassen Sie mich schnell dieses Bild finden, weil ich bereits einen Haufen dieser Bilder hier habe. Also werde ich dieses schnell benutzen. Also im Grunde ist es das gleiche Bild, das wir bereits verwendet haben. Lassen Sie mich den Rahmen entfernen, doppelklicken Sie innen, halten Sie meine Umschalttaste gedrückt, damit ich ihn zum Beispiel ein wenig mehr skalieren kann, bis ich dies tue. Und nennen wir es einen Tag. Anstelle von Transaktionen, werden wir offensichtlich einen Kredit schreiben. Und was du tun wirst, ist das Ikhwan hier zu benutzen. Also kann ich dich zurück hierher bringen. Analyten lokalisiert Türen, Symbole, Sägelisten, zum Beispiel, verwenden Disk-Cache allein Symbol. Und ich werde dafür sorgen, dass es im Mittelpunkt steht. Also haben wir sechs hier, 614 Bild. Wählen Sie dies aus und stellen Sie sicher, dass es in der Mitte ist. Und das ist es im Grunde. Also, was ich als Nächstes tun werde, ist ein paar Texte zu schreiben und runter. Also mal sehen. Lassen Sie uns einige Textblöcke aus diesen vorherigen verwenden. Gehen wir hierher. Wählen Sie diese beiden aus. Sie können natürlich den neuen Textblock starten, aber das ist für mich einfach viel schneller. Also werde ich sicherstellen, dass beide zentriert sind, so zentriert. Also, was ich tun werde, ist doppelklicken und schnell eingeben. Bargeld allein. So wie das. Und mal sehen, vielleicht kann ich es etwas größer machen. Sehen wir uns das an. Ich denke, das funktioniert gut. Und mal sehen, ich kann es auch so positionieren. Jetzt haben wir es und stellen Sie sicher, dass dies zentriert ist. Ist es. Lassen Sie es uns löschen und mal sehen, vielleicht können wir es positionieren. Sehen wir 40 von hier aus. Also 1234 runter. Und mal sehen, vielleicht kann ich zum Beispiel diese 24 machen. Gehen wir zurück zu hier. Und das ist in Ordnung. 24 unregelmäßig. Und sehen Sie vielleicht können wir so etwas schreiben, wie lange am 23. Mai 2020 aufgenommen wurde. Netzwerke. Nun, stellen Sie sicher, dass es mit ihrem Stopptext wie diesem zentriert ist. Und mal sehen, vielleicht kann ich es auch auf 40 positionieren. Also 1234, so. Das ist in Ordnung. Er würde D kontrollieren und vielleicht kann ich das auch zu 40 machen. Mal sehen. Erste Zahlung, 2352020. Also haben Sie die erste Zahlung gemacht, als Sie die lange genommen haben offensichtlich. Und dann wird die letzte Zahlung am 23.52021 sein. Also lassen Sie uns sagen, dass dies nur eines dieser kleineren Kredite ist. Deshalb nennt man es schnelles Barkredit. Nur um dieses Darlehen zu nehmen, zum Beispiel, wird Sie einen Monat oder eine Krawatte nehmen, die sie zurückgeben, oder in diesem Fall, ein Jahr. Es ist also, es in der Mitte zu positionieren, 404040. Das ist in Ordnung. Ich werde das noch einmal duplizieren. Wir sind sicher. Es ist bei 40. Und ich werde Ihre Zahlungsabrechnungen schreiben und herunterladen. Das wird also offensichtlich innerhalb einer PDF-Datei sein. Und weil es ein Link ist, dass wir diese Farbe verwenden werden. Und dieser Strahl in der Aussage soll ihnen zum Beispiel zeigen , an welchem Tag sie welchen Betrag bezahlt haben. Also lassen Sie uns sagen, dass Sie diesen Monat $100 bezahlt haben, nächsten Monat bezahlten Sie $200 und so weiter. Ich möchte nur den Überblick über all diese Zahlungen behalten und sehen, ob Sie auf dem richtigen Weg sind und ob Sie sich darauf verlassen können. Schließlich werde ich dieses Mal die Kontrolle D treffen. Positionierung unten und genau hier und nennen Sie es brauchen eine neue allein. Stellen Sie sicher, dass es links ausgerichtet ist und richten Sie es hier aus. Denn genau hier werde ich einen Knopf einschließen. Lasst uns einen Knopf benutzen. Also diese, zum Beispiel, könnten Sie kontrollieren, sehen, welche Position es hier ist, Kontrolle V. Und auf diesen Knopf werden wir schreiben und bezahlen. Denn wieder einmal, wenn Sie aus irgendeinem Grund in diesem entlang schnell fertig werden wollen. Mal sehen, dass du etwas Geld hast, du bekommst die Beförderung, du hast einen Kredit von jemand anderem, ich weiß nicht, was auch immer, dann kannst du diese Zahlung schnell beenden, indem du jetzt den Rest deines Betrags zahlst. Deshalb haben wir diesen Knopf hier. Oder zum Beispiel, wenn Sie manuelle Zahlungen tätigen möchten, können Sie das auch tun. So können Sie direkt dort klicken. Jetzt haben wir Standardzustand, Horace Zustand. Das ist in Ordnung. Wir werden das so positionieren, dass es in der Mitte ist. Das ist es 80. Und das Letzte, was ich tun werde, ist einfach alle diese Elemente auszuwählen und sicherzustellen, dass sie so in der Mitte sind. Offensichtlich werden wir in Desktop-Kredite ändern und Molkerei haben es. Wir haben diesen Bildschirm beendet. Klicken wir hier. Wenn Sie den Mauszeiger One, One, One, One more, so dass sie ihre Zahlungsauszüge als PDF herunterladen können. Sie können klicken, um nach einem neuen Long zu fragen , der sie mit den Banksachen verbinden wird. Und sie können endlich hier Horror machen, um eine Zahlung zu leisten. Und es wird sie in den externen Zahlungsbereich bringen. Und Schulden gegenüber Bank hat. Also, das ist es im Grunde für diesen. Wir sehen uns in der nächsten, wenn wir mit den Karten anfangen und wir werden tatsächlich ein bisschen mehr Arbeit dort machen. Also sehe ich dich dort. 50. Design erstellen: Lassen Sie uns jetzt voran gehen und das Design im Ruhestand fortsetzen. Und die nächste Seite, die wir eine SD-Karten erstellen werden. Also werde ich dieses Ding noch einmal machen. Also Hit Control D. Statt Kredite, werden wir in Karten schreiben genau hier. Ich wähle meine Karten aus, Staaten. Anstelle Ihrer Kredite werden wir offensichtlich Ihre Karten schreiben. Und ich werde diesen Text vorerst behalten. Ich werde dieses Bild löschen. Und was du hier darstellst, sind die Karten. Das sind also die Karten, die der Benutzer bereits hat. So vielleicht haben sie eine Visa Debitkarte kann in einer MasterCard Kreditkarte sein. Wir werden die verfügbaren Mittel zeigen und wir werden die Möglichkeit zeigen, dass sie Geld in diesen Warenkorb einzahlen. Nehmen wir an, dass sie ihr Girokonto oder Kreditkonto haben oder was auch immer, und es ist nicht direkt mit der Karte verbunden. So können sie beispielsweise mehr Schriftarten von einem dieser Konten auf die Karte einzahlen. Oder sie können sich zum Beispiel entscheiden, Geld von der anderen Karte einzuzahlen. Also lassen Sie uns sagen, dass sie die Kreditkarte haben, müssen sie Debitkarte. Vielleicht wollen sie Geld von einem Akkord zum anderen einzahlen. Also lasst uns das machen. Ich werde all das lassen, ich werde das nur löschen. So schnelles Bargeld. Und während wir dabei sind, lassen Sie uns diese Dinge schnell organisieren, weil ich vergessen habe, sie vorher zu organisieren. Also werde ich jetzt oben gehen, genau hier, ich werde die Seitenleiste hier verschieben. Als nächstes werde ich deine Lungen Text positionieren, genau hier. Und ich werde das für all diese Bildschirme tun. Also gehen wir von hier aus. Das hier ist organisiert. Gehen wir hierher. Und das hier ist auch organisiert. Denn wie er während des gesamten Diskurses mehrfach sagte, ermutige ich Sie wirklich, Ihre Schichten hier zu organisieren. Und das hier ist auch organisiert. Also ist es nur dieser hier. Ich ermutige Sie wirklich, Ihre Schichten zu organisieren. Und nur weil Sie das nicht für später speichern, werden Sie es als Feuer mit Ihren Kunden und Ihren Entwicklern teilen. Also ist es auch wirklich wichtig, alle diese Dateien bald organisiert, Räume, in denen wir es so nennen. Und lasst uns diese Dinge organisieren. Also werde ich Abneigung organisieren. Dieser Knopf wird den ganzen Weg nach unten gehen. So lang. Hier winkeln, schnell, Bargeld geht hier. Ich werde das hier positionieren, und ich brauche neue lange kann den ganzen Weg nach unten gehen. Lasst uns das endlich hier machen. Also haben wir jetzt unser Top, genau hier, Sidebar, genau hier, deine Karten hier. Und jetzt, als wir damit begonnen haben, mehr zu entwerfen, werden wir mehr Elemente darin positionieren. wir zum Beispiel Beginnenwir zum Beispielmit der linken Karte. Also wird es genau hier sein. Und wir können zum Beispiel Qualität, mal sehen. Zum Beispiel, Visa-Debitkarte. Und stellen wir sicher, dass es links ausgerichtet ist. Ich werde es den ganzen Weg hier positionieren. Und ziehen wir zuerst unsere Karte hierher, nur damit wir etwas haben können, mit dem wir arbeiten können. Wir können das benutzen, um es zu skalieren. Aber ich werde weitermachen, nur meine Leertaste zu halten offensichtlich mehr um die Bildschirme herum. Und wir werden diese Karte nehmen, also Karte schweben, Control-C. Aber ich werde hineinspringen und tatsächlich Kreditgarten genutzt. Ich brauche nicht den ganzen Hover. Also kontrolliere C auf der Karte selbst. Gehen wir zurück zu hier. Klicken Sie auf Steuerelement V rückgängig machen, um es zu positionieren Ich sorge dafür, dass es 40 ist. Also 246, das ist viel zu viel. Ich werde mich zum Beispiel um fünf positionieren . Also 12345. Sehen wir uns das noch einmal an. Nur weil ich diese Spalte leer haben möchte und ich es dort einige Abstände geben möchte. Also nochmals 12345. Also wird es hier enden. Also werde ich das hier einfach hier verschieben. Und in der Größe, mal sehen, vielleicht können wir es bei 391 oder so etwas haben. So wie Springen Seite 391 und Höhe, Yup, das sieht gut aus. Also lassen Sie uns Rechtecke sehen. Wir können sie so nach oben bewegen, oder wir können diese beiden auswählen. Klicken Sie hier. Sehen Sie Rechtecke da drin. Ich werde das so runterziehen. Und ich werde eigentlich reinspringen und uns das Auto BG ansehen. Lassen Sie uns sehen und Rechtecke gehen, um meine Rechtecke und manuell zu positionieren. Und was ich auch tun kann, ist eigentlich, mal sehen, Sie sind obdachlose Umschalttaste, um sie so zu skalieren, zum Beispiel. Und dann hat sie einfach irgendwo hier aus dem Weg gebracht. Als Nächstes werde ich myText für ein wenig nach oben positionieren. So, stellen Sie sicher, dass es hier unten ist. Sicher sind es 20. Ich wähle mein Logo und mein Lisa Cart-Logo aus. Also 1234, ich denke, das sieht gut aus. Ich werde das in der Mitte positionieren und mal sehen, es ist jetzt um 48 Uhr. Geben wir ihm 36. So, stellen Sie sicher, dass es weiß ist. Und mal sehen, war das weiß? Nein, es ist diese hellgraue Farbe. Also können wir das auch hier tun. Und lasst uns ein Rechteck benutzen. Positionieren Sie also in Deir über dem Text. Wählen Sie diese beiden in der Mitte positioniert, und entfernen Sie dann mein Rechteck. Jetzt möchte ich nur sicherstellen, dass das alles ausgerichtet ist. Ist das ausgerichtet? Es ist anteriore Gewohnheiten. Und jetzt haben wir unsere aktuelle abgeschlossen. Sie können tun, denn wenn ich hier rechts klicke, können Sie sehen, es geht zurück zu diesem Zustand. Also können Sie eine Entlastung für alle Staaten anwenden, aber das werde ich nicht tun. Also werde ich es einfach hier positionieren und ich werde eine Kopie machen. Also Control D. Und ich werde das hier positionieren. Jetzt können Sie sehen, dass wir das haben und wir werden eine leere auf dieser Seite haben. Also mag ich das nicht wirklich. Lassen Sie uns sehen, Prescript sagen kann sogar erhöhen Sie es auf sechs. Mal sehen, wie das aussehen wird. Nicht anders, wie das aussieht. Lassen Sie es uns also dort lassen und wir werden diese Spalte ganz rechts haben , um leer zu sein, einfach sortiert, verzeihen, etwas Platz zu haben. Also werde ich das hier positionieren. Sie können also sehen, dass wir diese Spalte leer haben, so dass wir hier mehr Platz haben können, und wir werden diese Spalte auch leer haben. Was ich hier tun werde, ist die Sprungseite. Ich werde meine Forschung verstecken, meinen Muskelschutz zeigen. Und mal sehen, ich werde es positionieren, um in der Mitte meines Logos zu sein, um genau hier zu sein. Also werde ich es positionieren, wagen. Und wir wollen auch sicherstellen, dass es genau hier ist. Also mal sehen, das ist 37, das ist 40. Also lassen Sie uns dieses Original bewegen. Also mal sehen, es sind 37, also 123, und wir sind jetzt bei 40. Und wenn wir zu diesem springen, können Sie sehen, dass wir immer noch bei 37 sind, also 123. Und ich werde das auch auf 40 bringen. So 1234. Und ich werde sehen, wo meine Forschung ist. Es ist bei 40 und das ist bei 40. Alles andere ist also in Ordnung. Sehen wir uns diesen Text an. Ja, alles andere ist in Ordnung. Also, was ich tun werde, werde ich dieses hier so lassen, wie es ist, und ich werde schnell die Hintergrundfarbe dieses hier ändern. Also lasst uns schnell voran gehen hier reinspringen. Beide sind also die MasterCard. Also werde ich hier reinspringen und ich benutze Kontrolle und Klick. So kann ich direkt auf diesen klicken. Also werde ich mit der rechten Maustaste kopieren. Ich werde das schließen und zurück zu unserem Strom. Noch einmal halten Sie die Kontrolle, so kann ich direkt auf das Auto BG Schicht klicken, mit der rechten Maustaste und Einfügen Aussehen Soja, sie können den gleichen Gradienten Effekt, den ich auf, dass eine haben. Ich werde es hier positionieren. Und jetzt fangen wir an, unsere Informationen zu bearbeiten. Also für diese erste, mal sehen, wo es geht, um meine mittlere Taste nach unten zu bewegen, Visa Kreditkarte und wann zu positionieren nach unten. Und mal sehen wir es noch einmal. Also sind wir bei 40 hier, was in Ordnung ist. Es ist Position tut, so dass es mit unserer Karte so ausgerichtet ist. Also mal sehen, vielleicht können wir auch 40 sein. Also 1234, was wir als nächstes brauchen, sind verfügbare Mittel. Also mal sehen. Wir können etwas wie finden eingeben, zum Beispiel für drei bis vier, sagen wir. Und wir werden das auch so positionieren, dass es links ausgerichtet ist und es bis hierher positionieren. Also mal sehen, vielleicht können wir ihm den gleichen Abstand von 40 geben. Ich werde dann diesen Text verwenden. Stellen Sie sicher, dass es wieder links ausgerichtet ist, positionieren Sie es hier. Ich bin sicher, wir sind bei 40. Und lasst uns das so etwas wie Geld einzahlen, um zu verwerfen. So wieder, Benutzer können einfach dort klicken und es wird sie auf die Standard-Einzahlungsgeld-Option bringen. So können sie von da an Geld auf dieses Konto einzahlen. Also lasst uns diese schnell organisieren. Also haben Sie Kreditkarte, wir haben eine Recherche. Lassen Sie uns diese Karte vorerst aus dem Weg bewegen. Mittel verfügbar, gehen Sie hier und Geld einzahlen. Das ist in Ordnung. Was wir als Nächstes brauchen, ist der Knopf, vielleicht hier. Und vielleicht können wir diesen Text hier positionieren, stellen Sie sicher, dass er links ausgerichtet ist. Und sagen Sie so etwas, als ob ich ein neues Auto brauche. Also bin ich zu meinem Dad, nur damit wir dort einen Schuldenabstand haben können. Also lasst uns sehen 24. Und das ist letztlich linksbündig. Und ich denke, das funktioniert gut. Was ich möchte, ist zum Beispiel, eine Zahlung zu leisten, damit Sie auch eine Zahlung mit dieser Karte vornehmen können. Mal sehen, wir können es hier positionieren, wir sind bei 61, das ist in Ordnung. So können wir zum Beispiel eine Zahlung auf unsere Stromrechnungen, auf unsere Auto-Zahlungsrechnungen, Essensrechnungen und so weiter leisten. Also alles andere, über das wir zuvor gesprochen haben, dass wir vor, gerade jetzt, Sie sind im Warenkorb Abschnitt Ihres Dashboards und Sie können offensichtlich jede dieser Zahlungen direkt hier. Wenn Sie also zum Beispiel Mauszeiger auf diese Schaltfläche „Zahlung tätigen“ klicken, gelangen Sie zum externen Bildschirm, wo Sie die Informationen eingeben können. So zum Beispiel, eine Zählung aus dem Karteninhaber oder des Kontoinhabers. So zum Beispiel die Stromrechnung Unternehmen oder Auto Zahlungsgesellschaft oder was auch immer. Und dann können Sie diese Informationen verwenden, um eine Zahlung mit dieser konkreten Karte zu leisten. Also entweder Risa Karte oder diese MasterCard, wir sehen diesen Text hier. Ich werde es entfernen. Also lasst uns das etwas besser organisieren. Also werde ich diese Kreditkarte oder einen Visumstrom anrufen. Dann werde ich einfach die gleichen Informationen Control D verwenden, verschieben Sie es nach draußen. Und ich werde einfach den ganzen Weg nach unten verschoben. Verwenden Sie kann verschieben und die rechte Pfeiltaste, nur so dass ich meine Informationen auf diese Weise schieben kann. Und das ist der Grund, warum wir diese leere Spalte haben, weil Sie sehen können, dass wir dort viel mehr Platz haben. Sie können diese beiden natürlich wechseln, so dass die Taste nach rechts gehen kann und die Texte nach links gehen können. Wenn das etwas ist, das du willst. Sie können sie auch gruppieren Kontroll-Gen und stellen Sie sicher, dass sie Stapel sind. Und Sie können es einfach in diesem tun, so dass Sie doppelklicken und sie auf diese Weise neu organisieren können. So können Sie sehen, wie Ihr Layout aussehen kann. Also werde ich die Gruppierung aufheben, weil ich nicht möchte, dass sie in einem Stapel sind, aber Sie können all dies in einem Stapel behalten. Sue kann dat, dat Weg organisieren. Was ich jetzt tun werde, ist, das zu benutzen. So MasterCard, Kreditstrom, wie Schulden, Mittel verfügbar Attila wählen einige kleinere Beträge oder zum Beispiel 2417 oder was auch immer, und Einzahlung Geld zu verwerfen, kann es bleiben, wo es ist. Mal sehen, ob das alles gut organisiert ist. Es ist, es ist auf unser Gitter ausgerichtet, also ist das in Ordnung. Und das ist es im Grunde. Was ich tun wollte, ist sicherzustellen, dass ich alle gruppiert habe. Also werde ich sie MasterCard Kreditkarte nennen. Und lasst uns hineinspringen und die Vorschau machen. Und Sie können sehen, dass alles wirklich gut funktioniert, und beide funktionieren so, wie sie sollten. Verwerfen“ ist ausgewählt. Also, das ist es im Grunde. Im nächsten Video werde ich Ihnen Investitionen zeigen und ich werde Ihnen leeren Bildschirm zeigen, weil Sie leere Bildschirme für alle diese benötigen. Und wir können zum Beispiel zeigen, dass auf Investitionen, nur um anzuzeigen, wie alles ohne Informationen aussehen wird. So zum Beispiel, Benutzer wird nur gehen, um diese Investitionen zu gehen , ohne jemals irgendwelche Investitionen zu machen. Wir müssen ihnen zeigen, was sie tun können, um die Investition zu tätigen. Also sehe ich dich dort. 51. Design erstellen: Lassen Sie uns jetzt voran und machen Sie die Investment-Seite. Also noch einmal Control D. Klicken Sie wieder rechts hier, und mal sehen, Ich kann auf meine Seitenleiste klicken, wählen Sie meine Investitionen, nur um zu zeigen, dass das ausgewählt. Und lassen Sie mich schnell zurück und sehen, ob ich alle diese organisiert haben. Und schließlich, was wir hier wollen, ist, dass ich das entfernen werde. Ich werde die Gruppierung aufheben. Also noch einmal, ich kann den Text, den ich brauche, nehmen. Ich kann das löschen. Ich kann diesen Text löschen und mal sehen, vielleicht kann ich all diese löschen. Ich kann diesen Text einfach hinterlassen. Also genau hier, wie ich im vorherigen Video sagte, wollen wir den leeren Zustand zeigen. Und der leere Zustand ist im Grunde der Bildschirm, zu dem Benutzer kommen wenn sie keinen Dienst ausgewählt haben oder sie kein Produkt oder was auch immer gekauft haben. Du willst also nur diesen leeren Zustand zeigen und zeigen, was möglich ist. Also müssten Sie ihnen erklären, was sie von dort aus tun können und wohin sie von dort aus gehen können. Stellen Sie sich also vor, dass Sie keine Investition getätigt haben, aber Sie sind daran interessiert, eine Investition zu tätigen. Also kannst du zurück hierher gehen, mal sehen, wo sie sind. Also hier sind diese Investitionen. Also Investitionen in Bildung, Immobilien, Familiensicherheit, Ruhestand und so weiter. Und Sie können sehen und erinnern sich hoffentlich an diesen Videos, dass alle diese beiden Dienste verbunden sind und sie haben auch diesen Service direkt hier. So haben wir eine Menge dieser Dienste zu zeigen, so dass wir sie wie folgt auf unserer Dashboard-Seite organisieren können. Aber zuerst müssen wir einen leeren Zustand zeigen. Also werde ich das nicht alles entwerfen. Sie können sich vorstellen, dass Sie sie so verwenden können, wie sie hier sind. Aber ich werde Ihnen auch vier unseren letzten Bildschirm für das Digital zeigen. Eine mögliche Layoutlösung dafür und mögliche Variation davon. Damit Sie die Inspiration davon nehmen und weitermachen und diese Seite gestalten können, wenn Sie möchten. Und ich ermutige euch wirklich, all diese Layouts zu erkunden und euch selbst zu entwickeln, denn das ist der beste Weg, den ihr lernen könnt und ihr als UI-UX-Designer erkunden und verbessern könnt, gibt es keinen Sinn, sehen Sie sich diese Videos an und kopieren Sie jeden einzelnen Schritt. Das tue ich. Integrieren Sie nichts Eigenes. Es spielt keine Rolle, ob du einen Fehler machst. Deshalb lernen Sie von diesen Kursen. Es ist wirklich wichtig, dass Sie versuchen, dass Sie versucht, Ihr Handwerk zu perfektionieren. Und hast du all diese Layouts auf eigene Faust erkundet? Also geh nicht einfach voran und kopiere, versuchte, das Ding zu deinem eigenen zu machen. Also, ohne mehr zu reden, lasst uns voran gehen und das ändern. Also, deine Investitionen wie diese, werde ich sicherstellen, dass es in der Mitte ausgerichtet ist und ungefähr hier positioniert ist. Und dann werde ich diesen Text verwenden und zum Beispiel, schreiben wenig schnellen Kaffee tatsächlich aus dem Originaldokument. Ich werde es auswählen. Hier sind Missionare, die hier positioniert sind. So können wir sehen, zum Beispiel 40. Also 1234, so. Und Sie können sehen, dass Sie im Moment keine Investitionen haben. Kontaktieren Sie uns, wenn Sie Ihr Investitionsgepäck noch heute starten möchten. Also noch einmal, wenn wir hier zu diesen Investitionen zurückkehren, können Sie sehen, dass all dies Pakete sind. Also unter der Ausbildung, die in diesem Fall ausgewählt wird. Wir haben diese beiden Pakete. So können Sie ihnen zum Beispiel die Option geben, wie wir es hier getan haben, um eine bestimmte Kategorie auszuwählen. Also entweder Bildung, Immobilien, Familiensicherheit oder Ruhestand. Und unter dieser Kategorie können sie dann eine dieser beiden Optionen auswählen. Wenn Sie denken, dass es zu viele Informationen gibt, können Sie eine scrollbare Gruppe erstellen, wie wir es für diese hier getan haben. Also, wenn ich dich noch einmal zurückbringe und dir das zeige. Dies ist also die scrollbare Schleife und sie haben die Möglichkeit, den ganzen Weg nach unten zu scrollen. Sie müssen sie also nicht auf den weißen Hintergrund stellen, wie wir es bei diesem Beispiel getan haben. Sie können diesen gesamten Abschnitt erstellen, so dass dieses Quadrat als eine scrollbare Gruppe. So können Sie ihnen eine riesige Menge an Optionen geben. Wenn Sie sich beispielsweise dafür entscheiden, diesen Investitionstext hier zu positionieren, wie wir es für Ihre Karten getan haben, können Sie sich dann vorstellen, dass all dies nach unten scrollen kann. Das ist eine andere Möglichkeit, dass Sie eine riesige Menge an Informationen anzeigen können , nur indem Sie dies nach unten scrollen lassen. Als nächstes werde ich einfach diese Bottom-up-Positionen hier ändern. Und mal sehen, vielleicht können wir ihm etwas wie 60 geben, nur damit wir ihnen ein bisschen mehr Platz geben können. Und was ich eintippen werde, ist, uns zu kontaktieren , weil wir ihnen die Möglichkeit geben wollen, die Bank zu kontaktieren. Weil sie vielleicht eines dieser Investitionspakete wählen wollen. So können sie die Bank kontaktieren und Bank kann ihnen dann erklären, dass Investmentbeutel all dies sind. Sie können ihnen all das erklären. Oder sie können sich zum Beispiel mit der Bank in Verbindung setzen, zum Beispiel , hey, ich besitze meine eigene Immobilie. Ich wollte eines dieser Immobilien-Pakete machen und möchte in Immobilien investieren. Wie kann ich das machen? Und dann können sie einfach mit ihnen übereinstimmen und Verträge unterzeichnen und was sonst noch von Schulden kommt. Schließlich möchte ich hier ein Symbol einfügen und ich werde aus meinem Originaldokument kopieren und stützen. Ich werde mit der rechten Maustaste darauf klicken und lokale machen. Und dieses Symbol ist von invertierbaren Elementen eins nach dem anderen. Also einfach ohne jede Farbe drauf. Weil ich die zusätzliche Komplexität mag, die es zu meinem Wunsch beiträgt. Also 123456. Also sind wir bei 60 von diesem Text. Was ich als Nächstes tun werde, ist einfach alles zu organisieren. Also werde ich sie gruppieren, g kontrollieren und im Grunde ein Rechteck erstellen, das den ganzen Weg bis hierher geht. Also bedecke ich diesen Bereich. Ich wähle mein Rechteck aus, wähle meine Gruppe aus, klicke hier und dann rechts hier, um es in der Mitte dieses Raums zu positionieren. Und jetzt können Sie sehen, wie das aussieht. Ich werde die Gruppierung aufheben. Nun, du kannst es in einer Gruppe behalten, wenn du willst. Und schließlich unsere Schreibinvestitionen hier. Dies l, Es ist HD Premium. Also sind sie noch einmal hier auf der Desinvestitionsseite gelandet. Sie können diesen Text Hubbard lesen und klicken Sie uns kontaktieren, damit sie dorthin gehen können. Es bringt sie nirgendwo hin, es bringt sie nur zurück zu dieser Seite. Aber Sie können sich vorstellen, wie dieser Fluss funktionieren würde und wie das aussehen wird. Das war's also für dieses Video. Im nächsten Video werden wir an der digitalen arbeiten. Ich werde auch einige mögliche Layouts für diese Seite zeigen. Sie können dann von dort aus gehen, wenn Sie diese Seite für sich selbst entwerfen möchten. Und nach dem digitalen, werden wir endlich weitermachen und alle diese und Navigationselemente in der Seitenleiste verbinden. Also funktioniert alles so, wie es sollte. Wir werden das noch einmal durchlaufen. Und nachdem wir damit fertig sind, wir endlich zu Responsive Design übergehen. Ich werde Ihnen erklären, was Responsive Design ist, worauf Sie achten müssen und all den Rest der Informationen. Also sehe ich dich im nächsten Video. Wo wollen wir das Digitale anpacken? 52. Design erstellen: Lassen Sie uns schließlich mit den digitalen Diensten beginnen. Also lassen Sie uns diese Kontrolle D duplizieren und sie nennt sich diese digitale. Dass ich auch meine Sidebar auswählen werde, wählen Sie Haupt digital. Und ich werde all diese löschen. Idat. Als nächstes werde ich wählen, von hier zum Beispiel. Also lassen Sie uns dieses und dieses eine Control-C wählen. Und brauchen nur Schulden, um es hier zu kleben, weil es bereits in der richtigen Position ist. Mal sehen, 4040. Das ist in Ordnung. Und ich werde reinspringen und das alles nach unten schieben. Als nächstes werde ich hier in digitalen Diensten schreiben. Und ich werde diese öffnen und alle diese Informationen löschen. Eigentlich kann ich es sogar aufheben, und ich kann dies zum Beispiel E-Bankenregion nennen . Weil ich meine digitalen Dienste hier auflisten werde. Als nächstes nehmen wir einige Änderungen an den Größen vor. Also sieben bis fünf mit 371. Und jetzt können Sie sehen, dass wir bei sechs sind, also 246, wir sind immer noch bei 40. Und es zu duplizieren Position bei sind genau hier. Wir sind also um sechs Uhr hier. Also 246, ich werde das nächste M Banking Vg nennen. Dann werde ich das duplizieren und es bis hierher positionieren. Sie können sehen, wir sind bei 39. Also, wenn ich das nach oben schiebe und dann wollen wir 40 haben. Also manchmal muss man sich mit diesen Pixeln beschäftigen, weil wir bei 40 von unten sind und wir bei 39 von hier. Also werde ich das nach unten verschieben und ich werde es QR nennen, Code, Schmerzen und MEG. Und schließlich werde ich Kontrolle D bei diesem hier treffen es ganz nach unten positionieren. Und ich werde es virtuelle Assistentin in Peking nennen, so. Und dann werde ich in all diese Abschnitte springen , damit ich sogar so etwas tun kann. So kann ich die Umschalttaste Control C halten und kann den ganzen Weg zu hier steuern V bewegen, so dass sie sie unten einfügen können. Und was ich tun kann, ist, sie einfach zu meinem Vorteil zu nutzen. Also lasst uns voran gehen und diese erste Gruppe aufheben. Ich werde mein Bild verwenden, also control x, ich werde hier klicken, Kontrolle V, um es direkt hier einzufügen. Und was ich mit meinem Bild machen werde, sind Neuigkeiten einige andere Dimensionen. So mit 371 neu zu erstellen. Also werde ich es grundsätzlich so positionieren, dass es drei Spalten breit ist. Dann werde ich einige Änderungen am Eckenradius vornehmen. Also werden wir Sam und Panzer haben. Also oben links und unten links werden um es herum sein, wie Sie sehen können. Und diese beiden werden gerade sein. Ich werde hier doppelklicken und ich kann mein Bild nur ein wenig vergrößern. So etwas. Stellen Sie sicher, dass diese Kerle im Fokus sind. Vielleicht ein bisschen mehr so. Jetzt, da ich damit zufrieden bin, kann ich es einfach E-Banking nennen, IMG, sagen Bankenbild. Und gehen wir weiter und machen all das. Also werde ich Control Acts auf diesem treffen und ich kann die Gruppierung aufheben. Also mal sehen, wir sind bei M banking, also Kontrolle v. Lassen Sie uns die gleiche Demenz geben. Also 338371. Ich werde es hier links positionieren. Stellen Sie sicher, dass wir bei zehn sind und wir sind. Ich benutze Tab, um zwischen diesen zu wechseln. So können Sie sehen, dass diese und diese Ecke abgerundet sind. Dieses Bild ist in Ordnung, weil es zentriert ist und ich mag, wie es aussieht wie Salz, wir werden nichts tun, um es. Ich kann dann mehr diesen Text hier gewinnen, damit wir ein bisschen mehr Platz haben können. Ich kann mit der rechten Maustaste auf dieses Gruppierung aufheben, damit ich mein Bild verwenden kann. Also kontrolliere X, kontrolliere V und C noch einmal. Also 338 mit 371, positionieren Sie es hier unten. Sehen Sie, nach links. Und mal sehen, wir werden das so nennen, SO Position zum Bankwesen. Also werden wir es einen Ben King IMG nennen. Sie werden dieses Bild nach unten positionieren. Also QR-Code-Zahlungen, IMG, so. Stellen Sie sicher, dass wir links ausgerichtet sind, wir sind zentriert. Mal sehen, etwas stimmt hier nicht, also so. Also 3940 runter. Also, das ist in Ordnung. Und wir werden auch hier die Ecken umrunden. Also, um hier zu drehen und zu schleifen, ist das in Ordnung. Sie ist in der Mitte, also ist das gut. Und schließlich, lasst uns das hier benutzen. Also werde ich diesen Text hier positionieren. Ich werde dieses Gruppieren aufheben Control X, um seine Position zu schneiden tut genau hier. Klicken Sie auf Steuerung, und positionieren Sie es ganz nach unten. Also IMG. Und lasst uns etwas geben. 338371. Wir werden noch einen Reifen oder Sand benutzen. Sand. Und schließlich verschieben Sie dieses Bild nach unten und positionieren Sie es hier. Also, jetzt, dass das in einem Kanu abgeschlossen ist und Doppelklick kann diesen Kerl nur leicht nach links bewegen, so. Jetzt, da das abgeschlossen ist, Ich möchte im Grunde eine diese Dienste auswählen und zog sie zu ihren ursprünglichen Orten. Oder möchte einfach nur den Text kleiner machen. Und ich werde das ändern, was hier in diesen Knöpfen steht. Also für jeden einzelnen von ihnen wird etwas anderes auf den Knöpfen sagen. So können Benutzer dann oder lesen über Service hier direkt im Dashboard. Sie müssen nicht zurück auf die Webseite gehen und Informationen zu lesen wagen. Und sie können ihren Dienst zum Beispiel dort direkt aktivieren. Also unser erstes ist E, Bankensolids, die diesen verwenden. Und mal sehen, ich werde nicht wirklich diese Schaltflächen verwenden, all ihre Aufhebung, diese. Und ich kann diesen löschen, weil ich bereits alle diese Schaltflächen habe. Also kann ich hier positionieren, denn wenn Sie sich erinnern, haben wir hier ein bisschen ein anderes Raster. Nun, was ich tun werde, ist auf dieses zu klicken und mal sehen, vielleicht kann ich etwas kleineres wie 24 verwenden. Ich kann das bei 16 tun, und ich kann die Größe meines Textes auf so etwas senken. Mal sehen, vielleicht können wir am Magnetventil C sein und wir können auch bei 20 sein. Passt das zu unserem Watson? Das tut es, und wir sind um 17 Uhr unten. Also, das ist tatsächlich geschnitten diese Einfachheit der Verwendung. Lass es uns schneiden. Wagen Sie sich. Mal sehen, wo wir in 30 Wäldern sind. Also lassen Sie uns es einige Abstände von zwei geben, wenn c , so, mal sehen. Mit einer Internetverbindung Listen tatsächlich schneiden Sie es dort. Und lasst uns hier klicken, um unsere Texte zu schneiden. Und lassen Sie uns das 14 geben, weil wir nicht zu viele davon brauchen. Also mal sehen. Wir werden den Text in drei Zeilen haben. Vielleicht kann ich dem sogar ein bisschen mehr Platz geben, damit es ein wenig besser lesen kann. Und ich mag, wie das aussieht. Nun, was ich tun werde, ist eigentlich Doppelklick auf die Schaltfläche. Und lassen Sie uns dies so aktiv tun, damit sie direkt aktiviert werden können. Ich kann in meinen Horrorzustand gehen, zurück zu ihm. Und was ich tun werde, ist tatsächlich sicherzustellen, dass das jetzt zwei Spalten breit ist. So wie das hier. Und was wir auch tun können, denn das ist 24. Jetzt können wir zusätzliche Änderungen vornehmen und sicherstellen, dass dies zum Beispiel 18 unregelmäßig und weiß ist. Wir können sicherstellen, dass es in der Mitte unserer Tasten ist oder aktivieren. Nun, so können Sie eine neue Komponente daraus machen und es nennen, zum Beispiel, es digitale Dienste Schaltfläche oder was auch immer Sie wollen. Aber ich werde es immer noch dort lassen. Also wieder, wir sind bei 182 Spalten breit und um den Hover-Zustand wie diesen zu verwenden, jetzt aktiviert, sind wir bei 1800 Weißen. Stellen Sie sicher, dass wir in der Mitte sind. Wir sind so, hier, so. Und das ist in Ordnung. Wenn ich es schließe und dorthin schiebe, kannst du sehen, wie das aussieht. Du kannst es also immer noch drei überlassen, wenn du willst, aber das werde ich nicht tun. Lassen Sie es uns an unserem Gitter ausrichten. Wir haben noch ein bisschen mehr Platz hier. Also werden wir es benutzen. Und ich denke, es sieht gut aus, wenn wir zu einer schnellen Vorschau gesprungen sind. Sie können sehen, dass die Schaltfläche immer noch funktioniert. Sie können es schmaler nach oben ins Wasser machen. Aber wie gesagt, ich werde mich nicht stören, ich werde es einfach so lassen, wie es ist, nur ein bisschen schmaler. Sie können das natürlich für später für Entwickler exportiert, aber wir werden später darüber sprechen. Lasst uns alle diese schnell gruppieren. Also werde ich meinen Text und meine Schaltflächen auswählen, sie unter mein Bild verschieben. Reorganisierte sie IDAT Gruppe all diese und nennen es Eden Banking. Und jetzt gehen wir zum nächsten. Also jetzt haben wir m Banking. Also werde ich tatsächlich löschen Schaltfläche. Ich werde meine Texte einziehen. Ich werde die Gruppierung aufheben. Positionieren Sie direkt unter unserem Banking-Image. Richten Sie es am Raster aus. Und wenn wir überprüfen, wir sind 24, Wir sind 16 in drei Zeilen. Also lasst uns das auch hier machen. Also mal sehen. Das wird 24 und Bolzen sein, und das wird 16 und in drei Zeilen sein. Aber lassen Sie es uns auf so etwas schneiden. Welchen Platz haben wir hier? Also haben wir acht. Lassen Sie uns das da drinnen positionieren. Also lasst uns zehn sehen. Und dann schauen wir mal, wie wir das tun können? Vielleicht können wir also ein Rechteck oder eine Anleitung verwenden. Also lasst uns eigentlich einen Führer benutzen. Also 1012, damit wir zurückgehen können und ich den Mauszeiger direkt hier abzoomen kann, wähle meine Führungsposition, es ist so da. Und dann kann ich meine Texte verschieben und bis hierher erweitern. Und jetzt kann ich es beenden, zum Beispiel, verwalten Sie Ihre Finanzen und mehr. Nein, es funktioniert nicht. Also lass es uns zuerst hier schneiden. Ein Bella Standort für neue kann auf Ihr Konto zugreifen. Du bekommst Zugang. Sie können sehen, verwalten Sie Ihre Finanzen und mehr oder sagen wir, dass Sie können ja, so. Ich kann es zurückschneiden. Und mal sehen, was wir hier haben. Also sind wir bei 42 genau hier. Ok? Also lasst uns das 123412 geben. Wir sind bei 40. Also lasst uns 40. Und ich werde einfach meine Tastenposition kopieren. Hier. Wir sind bei 40 und stellen einfach sicher, dass wir in einem Zentrum sind. sind wir. Also, das ist in Ordnung. Und lasst uns diesen Knopf hier positionieren. Und ich kann zum Beispiel jetzt herunterladen, anstatt jetzt zu aktivieren. Weil sie klicken und die App für iOS oder Android herunterladen können. Statt jetzt zu aktivieren, denn das ist M banking und sie müssen das tun. Also lasst uns all diese Gruppen zusammenfassen. Also würde er G kontrollieren und wann man es M Banking meine Schulden nennt. Und jetzt können wir zum Beispiel all diese Dinge nach unten stellen. Hmm, mal sehen. Ja, eigentlich kann ich dieses Bild verstecken. Ich kann dieses Bild verstecken. Ich kann diese beiden löschen. Und dann kann ich diese beiden gruppieren, nur um die Dinge ein bisschen schneller zu halten. 123439 von hier. Also, das ist in Ordnung. Ich positioniere sie beide nach unten. Das wird also mein QR-Code, Code, Zahlungen sein. Und wir können diesem Hintergrund einen solchen Hintergrund geben. Vg. Und ich tue das nur, um meine Geschwindigkeit ein wenig zu verbessern. Dies wird virtuelles I-System sein und Vg N wird das so gegeben. Und stattdessen diese beiden, werden wir nur die Plätze wechseln. Also werde ich das löschen, zeigen. Das funktioniert völlig gut. Und ich werde dasselbe für meine QR-Copayments tun. Wie Sie sehen können, ist es perfekt ausgerichtet. Alles ist da, wo es sein sollte, weil wir gerade die Position dieser ersetzt haben. Also endlich, lassen Sie uns alle bewegen. Ich werde ihm QR-Code-Zahlungen schreiben. Und ich werde in virtuellen Assistenten und Adobe XD schreiben virtuellen Assistenten , korrigieren Sie mich. Ich werde diese Schaltfläche löschen und diesen Text löschen, dies und das löschen. Also für eine QR, lassen Sie uns auf Kaffee doppelklicken und diesen Text löschen und doppelklicken Seite und basierend. Und mal sehen, was wir hier sind. Sie können QR-Code Zahlung Zukunft zugreifen. Öffnen Sie einfach die App, um eine Kamera einzuschalten. Fangen wir von dort an. So kann es im Geocoder laufen und er wird Geld überweisen. Um Geld zu überweisen, lassen Sie uns sofort sehen. Wie Sie sehen können, ändern wir die Kopie im laufenden Betrieb. Wir sind immer noch da, wo wir mit den Dimensionen sein müssen. Und wir können zum Beispiel schreiben, öffnen App. Jetzt können wir in den Horrorzustand gehen. Denn wie Sie hier lesen können, öffnen Sie einfach die App, schalten Sie die Kamera auf Punkt mit einem QR-Code und die App wird Geld sofort übertragen. Entweder Sie machen Zahlungen, Sie überweisen Geld an jemand anderen, indem Sie diesen QR-Code verwenden. Deshalb habe ich das gemacht, deshalb habe ich sie kopiert, weil es viel schneller ist. Als nächstes lassen Sie uns mit den virtuellen Systemen zum Kopieren des Textes mit Steuerelement beenden. Sehen Sie, ich benutze Steuerveto fügen Sie es ein und lassen Sie uns sehen, was wir aus diesem Text verwenden können. So sparen Sie Zeit und Geld. Ja, machen wir das. Lass es uns haben. Mal sehen, 4040, Wir sind 42, also ist alles in Ordnung. Und wie können wir das tun? Vielleicht aktivieren Sie jetzt oder starten Sie den Chat. Fangen Sie jetzt an zu chatten. So können Sie beginnen, mit dem virtuellen Assistenten zu chatten, offensichtlich. Und im Grunde ist es es. Jetzt haben wir unser Design fertiggestellt. Lassen Sie uns eine Vorschau anzeigen. Und wie Sie sehen können, funktionieren alle diese separaten Zustände gut. Also alle diese Hover-Effekte funktionieren einwandfrei. Wie er mehrmals sagte, können Sie den separaten Hover für diese Karten einschließen, wenn Sie möchten. Ich werde das nicht tun, denn wir haben schon diesen schönen Schwebeeffekt und alles sieht meiner Meinung nach gut aus. Aber Sie können das erkunden und das in eine Komponente für den Hover-Effekt verwandeln. Also denke ich, wir werden es hier einen Tag nennen. Und im nächsten Video werde ich Ihnen zeigen, wie Sie all diese verbinden und sich mit dieser Navigation verbinden können. Und wir werden all das ein bisschen mehr erkunden. Ich werde Ihnen ein bisschen mehr von meinen Meinungen geben. Und schließlich, was ich für dieses Video sagen wollte, ist Sie gesehen haben, wie wir all diese für digitale Dienste integriert haben. Also diese Form. Und wenn ich Sie zurück zu diesem, also Investitionen, können Sie ein Layout ähnlich diesen verwenden. Stellen Sie sich vor, dass, zum Beispiel, wenn ich Sie zurück zu diesem Bildschirm, wo es ist, hier ist es. So war es wieder: Bildung, Immobilien, Familiensicherheit und Ruhestand. Anstatt also so etwas wie digitale Dienste zu schreiben , können Sie zum Beispiel etwas wie Bildung eingeben. Und Sie können die Dosis genau hier so zeigen, in diesem exakten Layout, wenn Sie möchten, können Sie das Layout oder was auch immer ändern. Als Nächstes können Sie dieses Layout kopieren. Stellen Sie sich diese drei Elemente vor. Also der Text und diese beiden, können Sie es unten stützen. Und Sie können bereits scrollbare Gruppe erstellen. Wenn das das Layout ist, das Sie wollen. Sie können ein Layout auch duplizieren. So können Sie zum Beispiel das gleiche Layout verwenden, aber zum Beispiel, Bildung hier schreiben, verwenden Sie die beiden Optionen für die Ausbildung. Und dann können Sie hier Immobilien eingeben und die beiden Optionen für Immobilien verwenden, und dann können Sie Schulden duplizieren, fallen Sie es unten, und Sie können all das erstellen, um scrollbare Gruppe zu sein, damit Benutzer scrollen können hinunter und sehen Sie zwischen all diesen. Hast du gesehen, was es war? Bildung, Familiensicherheit und Ruhestand? Ja, ja. Und weil sie alle zwei dieser Optionen haben, können Sie das tun. Und schließlich haben Sie diese Option genau hier, also sichern Sie sich Ihre Zukunft. Sie können dies als separate Option erstellen. Das sind also nur einige meiner Meinungen und wie ich das tun werde. Lasst uns diesen Kerl schnell entfernen, weil wir ihn nicht mehr brauchen. Und Sie können mit diesem Layout tun, was Sie wollen. Und noch einmal möchte ich Sie ermutigen, es zu testen, auszuprobieren und zu sehen, wie Ihre Ideen zum Leben erweckt werden. Sie können diese Änderungen natürlich im laufenden Betrieb vornehmen. Sie können sie anwenden, wie Sie wollen. diesem Design können Sie alles tun, was Sie wollen. Solange ich sagte, es ist in den Lernzwecken, Sie haben keine Erlaubnis. Ich kann dies nicht genug rechtmäßig betonen, um eines dieser Vermögenswerte für Premiumzwecke zu verwenden, entweder für Ihre Kunden oder was auch immer Turm sonst, nur für Lernzwecke. Also ermutige ich Sie, wenn Sie wählen, das gleiche Layout zu verwenden, gleiche Struktur, Bearbeiten der gleichen. Bitte ersetzen Sie diese Bilder durch Ihre eigenen Bilder, und bitte ersetzen Sie die Kopie, schreiben Sie Ihre eigene Kopie. Und auf diese Weise können Sie eine mögliche Klagen von mir oder aus anderen Ressourcen wie und Watteau Elemente und alle diese Premium-Ressourcen, die sie verwendet werden, vermeiden. Also kann ich das wirklich nicht genug betonen. Üben Sie so viel wie Sie wollen, aber wenn Sie dies für kommerzielle Zwecke verwenden möchten, so in für Kunden oder später vier, Weiterverkauf versucht, Ihre eigene Kopie und Ihre eigenen Elemente zu integrieren. Saw Symbole und Bilder, wie es im nächsten Video und letzten Video von diesem Design-Abschnitt gesagt, werden wir durch die Navigation laufen. Ich werde Ihnen zeigen, wie Sie alles verbinden können. Also sehe ich dich dort. 53. Design erstellen: Schließlich, in diesem letzten Video unseres Designabschnitts, lassen Sie uns schnell voran und verbinden Sie alle diese Navigationselemente. Wie Sie gesehen haben, haben wir bereits unsere Staaten, also ist alles gut verbunden. Also lasst uns mit den Verbindungen selbst beginnen. Also, was ich tun werde, ist in den Prototyp springen und ich werde auf mein Konto klicken, weil es in dem Ordner ist, es ist viel größer Tap-Punkt. Und das ist wirklich wichtig, wenn du all diese Dinge machst. Sie möchten sicherstellen, dass Benutzer tatsächlich auf das tippen können, was Sie möchten, dass sie Tab. Deshalb setzen wir Dinge in diese Gruppen ein. Wenn also Ihre Benutzer, wenn Ihr Client, Ihre Entwickler, wer auch immer mit diesem Prototyp interagiert, können Sie diesen Prototyp teilen, mit ihnen teilen und Sie können ihnen zeigen, wie sie ihn verwenden können. Und sie werden viel einfacher Lage sein, auf diese Elemente zu klicken, wenn sie in der Gruppe sind. Es gibt also viel größere Hahnpunkt. Stattdessen stellen Sie sich vor, sie können hier oder auf dieses winzige, kleine Symbol klicken. Also Lassen Sie uns klicken, ziehen Sie zu diesem Punkt. Und ich werde einfach ziehen, weil wir so sind, also ist es viel einfacher, das zu tun und dann alle durchzugehen. Also für diesen ersten Übergang, was wir tun werden, ist die Verwendung von auto animate. Wir können so etwas wie Snap verwenden, weil ich möchte, dass dieser Hintergrund, dieser Selektor in der Lage sein wird, in Position zu schnappen. Und ich werde etwas wie 0,4 verwenden. Und machen wir dasselbe für diesen. Also kann ich tatsächlich klicken und wir gehen, um Transaktionen zu gehen. Also Dashboard-Transaktionen, es ist tatsächlich einfacher auf diese Weise, weil sie den ganzen Weg nach unten befinden. Und Sie können sie hier sehen. Das wird also Kredite sein. Und wieder einmal können Sie sehen, was Sie hier ausgewählt haben. Das wird Karten sein. Mein Dad. Das werden Investitionen sein. Er investiert. Ich glaube nicht, dass wir das richtig ausgewählt haben, habe ich nicht. Also Karten, ja. Und digital. Digital. Die digitale und das ist gut, ein Logout zu sein. Und loggen Sie sich ab. Er wird uns auf die Homepage bringen. So ist Homepage-Design, wo wir gehen müssen. Klicken Sie also hier und suchen Sie die Homepage im Design. Hier ist es. Und statt dieses hier, werden wir etwas etwas anderes verwenden. Gehen wir also zum Homepage-Design. Anstelle von Auto-Animate werde ich den Übergang in o anstelle von Snap DZ und in 0.4 verwenden. was das tun wird, ist, weil alle diese automatisch animiert sind , weil die meist die gleichen Elemente enthalten. Also zumindest diese Karten sind die gleichen, dieser Text ist der gleiche, Tasten sind die gleichen, und so weiter und so weiter. Also wird alles schön und kohärent aussehen, aber mit der Homepage ist wieder einmal ganz anders. Sie möchten also nicht wirklich Autoanimate verwenden. Gehen wir jetzt zurück. Und was ich tun werde, ist vielleicht von hier an zu gehen. Gehen wir zum Konto. Also können wir das Gleiche tun. Aber mal sehen, wie kann ich das tun? Vielleicht kann ich zu meinem Design zurückkehren. Er würde C kontrollieren, direkt hier springen, V kontrollieren und mein Konto benutzen. Verschieben Sie es nach unten, nur so dass ich ein Dashboard auf all diesen auswählen kann , weil unsere Anzahl bereits so erstellt ist, dass phi. Gehen wir jetzt weiter und springen zurück zu unserem Prototyp. Doppelklicken Sie auf unser Dashboard, ziehen und ablegen. Und wenn automatische Animationen verwendet werden, werde ich Snap und 0.4 verwenden. Also, jetzt gehen wir weiter und gehen zu dem Rest von ihnen. Das wird also Transaktionen sein. Mal sehen, Dashboard, Kredite. Also den ganzen Weg nach unten Karten, das Gleiche, den ganzen Weg runter. Investitionen wie diese. Digital. Und schließlich, logout klicken. Und statt Auto animieren, Übergang, Ziel wird Homepage-Design sein. Lösen Sie sich auf. Anstelle von Snap, lassen Sie uns einfach und aus 0,4 Sekunden gehen. Nun gehen wir weiter und ändern dies in Transaktionen wie dat. Und wir können dasselbe tun. So Dashboard und Drag & Drop Konto. Hier sind wir. Also VR ausgewählt, wagen, und lassen Sie uns Transaktionen sehen. Kredite, um sich genau dort anzupassen. Lassen Sie uns Kredite sehen, keine Karten, Investitionen in digitale. Und ich habe gerade bemerkt, dass ich einfach AZ und heraus verwende. Also werde ich Snap verwenden. Und um sie zu ändern, klicken Sie einfach auf sie. Gehen Sie von einfach genug, um zu schnappen. Und tun Sie das gleiche für alle von ihnen wie diese, wo wir so zählen, weil wir auf dem Konto sind, können wir das nicht ändern. Also mal sehen, vielleicht können wir das Dashboard auf allen von ihnen machen und es dann wieder nach Hause bringen. Also lasst es uns bei so Kredite tun. Ich klicke auf mein Dashboard. Mein Dad. Gehen wir zurück. Also haben wir Warenkorb Dashboard, Investitionen, digital, so. Und das ist es im Grunde. Lassen Sie uns jetzt dieses verwenden, damit wir zu unserem Standardzustand zurückkehren können. Mal sehen. Mal sehen, ob es hier aktualisiert. Nein, hat es nicht. So sind wir immer noch im Standardzustand. Bringen wir das hier zurück. Und lassen Sie uns von dort weiter arbeiten. Ich weiß nicht, vielleicht können wir sogar von hier aus weitermachen, aber bei diesem kann ich das Konto nicht ändern. Vielleicht kann ich das zurückkopieren. Mal sehen, wie kann ich das tun? Also Control C, ich kann es direkt hierher bringen. Und von Dan, Dan, werde ich in der Lage sein, Fehlerquellen zu kopieren und einzufügen. So ist unsere Zählung bereits abgeschlossen. Wenn ich also hier klicke und zu meinem Konto gehe, gehe zum Prototyp, du kannst sehen, dass es abgeschlossen ist. Die Transaktionen sind abgeschlossen. Jetzt. Verbinden Sie einfach unsere Buchhaltungstransaktionen , Kredite , abgeschlossen, Karten, Investitionen und digital. So hat es alle von ihnen verbunden, was großartig ist. So kann ich jetzt zu meinem Standardzustand wechseln und zu meinem Design zurückkehren. Er würde X kontrollieren. Also, weil wir bereits mit diesem verbunden sind, bringen wir es hierher. Das wird also unsere Transaktionen sein. Lassen Sie uns überprüfen, ob es überall verbunden ist, außer für die Abmeldung und das Dashboard und das Konto. Also lass es uns da drin verbinden. Also werde ich dort klicken und zu meinem Konto gehen. Ich verwende diesen Snap und klicke direkt hier und gehe zu meinem Dashboard. Also mal sehen. Und das wird und Dashboard-Design wie Schulden sein. Gehen wir zurück zu diesem IQ Control C. Klicken Sie hier, Kontrolle v. Ich werde den Lungen Prototyp auswählen. Und mal sehen. Aus irgendeinem Grund hat es mir das nicht von engstirnigen gezeigt. Gehen wir voran und verbinden uns überall. Also in Dashboard, Design, Dashboard, Account-Dashboards, Transaktionen und es gibt mehr Karten. Was? Investitionen? Und Dashboard und digital. Und ich werde die Abmeldung für später verlassen, weil es viel einfacher ist, zwischen ihnen zu klicken und sie auf diese Weise zu verbinden. Also machen wir es auf die gleiche Art. Ich werde Control C drücken, es kopieren oder gleich hier. Positioniert knapp unten auf allen von ihnen sortiert siehe unten mein top nav. Und unter mater, unten. Also, jetzt und das ist in Ordnung, das ist in Ordnung. Okay, lass uns jetzt weitermachen. Also sehr aufgehört ist, mal sehen, Sehnsüchte, dass wir sie getan haben. Hier sind wir auf Karten. Gehen wir zurück zum Prototyp. Also doppelklicken Sie auf Dashboard und ich werde das gleiche tun. So Design, Konto, Transaktionen, Kredite, Investitionen in digitale wie das. Und schließlich, schlagen wir Kontrolle C und gehen zurück zu unserer Investmentkontrolle V und ich werde es auch hier einfügen. So Kontrolle. Lasst uns das zuerst mit diesem machen. Also gehen wir zu Investitionen prototyped Dashboard. Klicken Sie auf OK. Ich versuche, das so schnell ich kann zu tun. Also Konto lassen Sie uns sehen. Aktionen. Wir sind bei Kredite. - Karten. Digital wird ausgewählt, oder zurück zur Design-Steuerung c und Steuerung v direkt hier. Tut mir Leid, so. Das ist digital. Endlich ist dies das letzte. Wählen wir digital. Es sieht, ob wir Investitionen, Karten, Kredite, Transaktionen auswählen , wo wir genau hier sind, also müssen wir auf Rechnung sein. Sind wir mit der SPR verbunden, okay? Und das erste ist Dashboard. Okay, also funktioniert alles vorerst gut. Klicken wir hier und erkunden Sie dies ein wenig mehr. Also sind wir ein digitales Prototyp-Dashboard und lassen Sie uns das schnell beenden. So Dashboard-Design wird Dashboard-Konto sein. Öffnen Sie also Dashboard-Transaktionen und Dashboards für Lagunen. Und es gibt noch mehr zu aktuellen Dashboard-Investitionen. Und das war's. Lassen Sie uns jetzt schnell voran und verbinden Sie diese Logos. Also werde ich wählen, was wir gesagt haben, Homepage und Design. Ich werde mit einfacher Note 0,4. Sekunden und Übergang Dissolve gehen. Also, das ist in Ordnung. Ich werde dasselbe für Disziplin tun. Also lassen Sie uns Homepage und Design sehen und Weg, um für eine Disziplin fortzufahren. So Homepage-Design auf Seite und gestaltet. Und ich würde Homepage-Design sehen. Ich werde hier verbunden sein. Ja, das sind wir, ja, wir sind auch hier. Und schließlich, lassen Sie uns voran und sehen, was wir bisher haben. Wenn Sie also rechts hier klicken, können Sie sehen, dass sich der Selektor gut bewegt. Und alles funktioniert, wie es sollte. Alles ändert sich gut. Aus irgendeinem Grund können wir hier nicht zu Digital gehen. Also mal sehen, das ist unübertroffen, also ist es dieser eine Prototyp. Ja, wir haben es nicht angeschlossen. Also gehen wir hierher. Automatisch animieren. Anstelle der einfachen Notiz werden wir den Snap verwenden. Also lassen Sie uns schnell Vorschau von dort treffen. Tut mir leid, ich habe es verloren. Hier ist es. Also jetzt digital funktioniert, wie es sollte. So können wir von hier aus gehen. Alles funktioniert gut von hier bis hier, von hier bis hier. Also funktioniert alles, wie es sollte. Und schließlich, lassen Sie uns abmelden und es bringt uns zurück auf den Startbildschirm. Jetzt, da wir hier sind, können wir all das ein bisschen mehr erkunden und uns daran erinnern, was wir bisher getan haben. So können Sie all diese Arbeiten wirklich schön sehen. All dies ist verbunden. Und noch eine Sache, von der ich Ihnen nicht erzählt habe, ist, dass Sie diese verknüpfen können. So können Sie Konto verknüpfen. Es kann auf die Kontoseite gehen, Darlehen, es kann auf die Startseite gehen und so weiter und so weiter. Sie können diese Seiten natürlich verknüpfen, wenn Sie sie erstellen, aber Sie können diese nicht verknüpfen. Also, wenn Sie auf das Konto gehen, und wenn ich den ganzen Weg nach unten in Konten scrollen, haben wir unsere ausländischen Auto Millennial und Fräsen von Eimer begonnen. Sie können das also nicht tun. Sie können also nicht auf das Startkonto klicken. Und Sie brauchen, um mit der Zählung zu beginnen. Sie können dies nicht verknüpfen, und es kann nicht mit diesem verknüpft werden, da Adobe XD noch nicht so weit fortgeschritten ist. Sie können diese Seiten verlinken. Also denke ich, wir haben es für Karten oder Kredite getan, wo wir es angeschlossen haben, investieren. Ja. So können Sie dies tun und Sie können sie verknüpfen um Sie zu jedem Abschnitt der Seite zu bringen. Aber sobald Sie sich auf der Seite befinden, können Sie nun von der Fußzeile zu diesem bestimmten Abschnitt der jeweiligen Seite wechseln. Also wieder, lasst uns zwischen ihnen wechseln und sehen, wie sie funktionieren. Entschuldigung, mein Computer ist etwas langsamer, weil ich gleichzeitig zu Adobe XD-Dateien laufe und ich aufnehme. Daher entschuldige ich mich, wenn etwas ansteigt, es langsamer ist. Ein Digitales. Also denke ich mit LinkedIn wagen es auch, nein, nur dafür. So können Sie sehen, wie das funktioniert. Und zum Beispiel, wenn Sie etwas sehen wie, ich weiß nicht, QR-Code-Zahlungen Yep. Geben Sie etwas zu schreiben, wie Sie mit QR Copayments Gesetz bezahlen können. Und wenn sie dann auf diese Schaltfläche klicken, könnte es sie direkt in den QR-Code Payments Abschnitt bringen. Also halten Sie das im Hinterkopf, denn für die Investition, wo sie direkt dort klicken oder sie einfach zu diesem Abschnitt gebracht haben, wo ich sie zur Täuschung bringen kann. Ich habe diesen Abschnitt verbunden, verknüpfen Sie einfach diese Schaltfläche mit dem Abschnitt auf Ihrer Seite, zu dem er gehen soll. Schauen wir uns das mal an. Also loggen Sie sich ein, es bringt uns hierher. Wir können zwischen Login und Anmeldung wechseln. Wenn wir hier klicken, gelangen wir zu unserem Dashboard. Und von unserem Dashboard aus können wir diese erkunden. Also haben wir diese verschiedenen Karten. Wir haben diese verschiedenen Abschnitte, die wirklich schön animieren. Wir können auf das Konto gehen. So können wir auch hier verknüpfen, Informationen, Transaktionen bearbeiten. Wir können zwischen Einnahmen und Ausgaben wechseln, und ich mag das immer noch nicht, aber lassen Sie es einfach dort bleiben. Eigentlich können Sie das weiter erkunden und Sie können sicherstellen, dass Sie eine bessere Version von dem, was ich getan habe, erstellen. Also haben wir hier eine scrollbare Gruppe. Wir haben Hover-Effekte für diese, genau hier. Wir können in die Lunge gehen. Sie können hier bezahlen. Karten. Wir können Zahlungsinvestitionen tätigen. Wir können sie für Investitionen kontaktieren. Und endlich digital. Und wir haben diese Schaltflächen für alle diese Abschnitte unterschiedlich. Und am Ende, wenn ich auf Abmelden klicke, bringt es mich zurück zum Startbildschirm. Also, das ist es für Design Abschnitt. Ich hoffe, ihr habt es genossen. Ich habe mein Bestes versucht, Ihnen so viele verschiedene Meinungen, Optionen, Layouttechniken, Formatierungstechniken und so weiter wie möglich zu geben. Im nächsten Abschnitt dieses Kurses werden wir über Responsive Design sprechen. Ich werde Ihnen sagen, was Responsive Design ist, wie Sie es in Ihrem Design verwenden können. Wie wir es hier bei unserem Design am Ende verwenden werden. Und später werde ich Ihnen zeigen, wie wir tatsächlich eine Seite erstellen können , um reagieren zu können. Also werde ich Sie im nächsten Abschnitt dieses Kurses über responsive Design sehen. Und ich hoffe wirklich, dass Sie bis jetzt viel lernen werden, und ich hoffe wirklich, dass Ihnen dieser Abschnitt auch gefallen wird. Nachdem ein Responsive Design abgeschlossen ist, werden wir das Teilen mit unserem Kunden abdecken. Und wie ich zu Beginn des Kurses sagte, können Sie auf Sendung in jeder Phase teilen, die Sie wollen. So können Sie es direkt von hier aus teilen und Sie können das Feedback bekommen. Und das ist eigentlich das, was ich von euch will, um eure echten Klienten zu tun. Um also mit Adobe XD-Wireframes zu beginnen und dann von Deir zu teilen, sammeln Sie Feedback von Ihrem Kunden und passen Sie dieses Feedback an. Nachdem sie das Drahtmodell genehmigt haben, können Sie mit dem Entwurf fortfahren. Sie können das Design natürlich mit Ihrem Kunden teilen. Und dann, wenn Sie tatsächlich auf die Responsive Seite zu bekommen, können Sie auch ein Responsive Design teilen. Das ist also die Absicht, alle gleichzeitig zu entwerfen, zu konstruieren und zu teilen. Sie haben also alle diese Möglichkeiten hier, aber ich wollte nur ein bisschen Zeit sparen. Anstatt all diese Optionen zu teilen und Feedback zu erhalten, können wir teilen. Endlich, genau hier, wenn wir in der Designabteilung sind. Aber noch einmal, und schließlich, ich möchte wirklich, dass ihr von hier aus teilt und dann von dort weitergeht, sobald ihr genug Feedback gesammelt habt. Das war's also für dieses Video. Endlich muss ich wirklich zu viel zum Reden geben. Ich werde Sie im nächsten Abschnitt sehen, wenn wir mit Responsive Design arbeiten. Also sehe ich dich dort. 54. Was ist ein Responsive Design: Nachdem wir nun den Designteil unseres Projekts abgeschlossen haben, werden wir zu einem Responsive Design Teil übergehen. Und ich möchte Ihnen nur schnell sagen, was das responsive Design ist, was wir verwenden werden und wie wir es verwenden werden. Und dann, was Sie von dort aus tun können und von dort weitermachen um Ihre Responsive Design-Fähigkeiten zu üben. Zunächst einmal verwenden wir responsive Design als Design, nicht als Code, aber wir wollen es immer noch für Entwickler vorbereiten, wenn sie sich an Code beteiligen und wenn sie tatsächlich anfangen, responsive Design zu erstellen, um live zu sein. Also, wie werden wir das machen? Wir werden den Bootstrap benutzen. Bootstrap ist im Grunde dieser bereits vorgefertigte Satz von Komponenten im Code, aber wir werden den Designteil dieser Komponenten verwenden. Und wenn wir tatsächlich zum nächsten Video kommen, werde ich Ihnen zeigen, wie das in Adobe XD funktionieren wird. Und wenn Sie daran denken, jeder, unser Board hat sein Raster, wir werden diese gleiche Struktur auf das responsive Design anwenden. Aber für jede bestimmte Größe werden wir die Rastergröße anpassen. Und wenn wir die Rastergröße anpassen. Und dann werden wir die Elemente an diese Rastergröße anpassen, N an die Größe des Flughafens selbst. Also lassen Sie uns sagen, dass wir zum Beispiel Bild auf der linken Seite, Texte und die Unterseite auf der rechten Seite haben. Anstatt sie einfach so zu schrumpfen, werden wir sie umdrehen. So wird das Bild an die Spitze gehen. Text und Schaltflächen werden nach unten gehen. Und dann werden sie beginnen, sich von dort zu verengen , als kleinere und kleinere Bildschirme Sie gehen in Richtung. So funktioniert Responsive Design in Theorie, Praxis Ich werde Ihnen einige weitere Optionen zeigen, die Adobe XD nativ hat , die uns helfen können, mit Responsive Design zu arbeiten. Ich habe dir schon diese Scroll-Gruppen gezeigt. Wie zeigen Sie wirklich die Stapel. Aber ich habe nicht über die Responsive Resize Funktion gesprochen , die Adobe XD hat nativ sowjetische werden über Papa sprechen, wie Dad uns helfen kann, den Prozess zu beschleunigen. Und wir werden über die Komponenten sprechen weil wir die Größe unserer Komponenten reduzieren müssen. Und Sie haben bereits gesehen, dass diese Kreditkarten kaufen, weil wir einige dieser Änderungen auf unsere Kreditkarten angewendet haben und gehen von diesen großen Karten zu den kleineren Autos. Auch Texte müssen sich ändern. Bilder müssen auch geändert werden. Also werden wir über all diese Dinge sprechen. Wie gesagt, ich werde die Bootstrap-Größen verwenden wenn Sie etwas wie Angular oder etwas anderes verwenden. Und dieses Prinzip wird im Grunde das gleiche sein, wird auch für Sie gelten. Aber Sie müssen Ihre eigenen Größen finden. Weil, wie gesagt, ich benutze Bootstrap, ich werde Bootstrap-Größen verwenden. Und Sie, Sie können in der Regel diese Größen auf Websites dieser Schöpfer finden. So können Sie zum Beispiel auf die Bootstrap-Website gehen und sie dort finden. Wenn nicht, können Sie Online-Designer finden, die bereits Dosis mit den Prinzipien aus Code erstellt haben. Denn in den meisten Fällen denken diese Plattformen und diese Websites nur über Entschlüsselung nach. Sie denken nicht an das Design. Daher müssen Designer Ressourcen aus sich selbst schaffen. Und da eine Mehrheit davon Open Source wie Angular und Bootstrap Bar sind, können Sie Ressourcen von diesen Designern nehmen und sie in Ihren eigenen Designs verwenden. Und das ist, was wir tun werden, weil ich diese von Dribble verwendet habe und ich festgestellt habe, dass diese Rastergrößen auf Dribble, waren Skizzendateien, aber ich habe gerade die gleichen Techniken und Größen auf meine Adobe XD-Datei angewendet. Also werde ich das später zeigen. Eine weitere Sache, die ich erwähnen möchte, ist, dass Sie von der mobilen Größe zur Desktop-Größe oder umgekehrt gehen müssen. Meiner Meinung nach ist es wirklich egal, weil Sie diese Komponenten Jahr so skalieren werden, wenn Sie mit komplexen Illustrationen arbeiten, die wir nicht an diesem Projekt sind, aber Sie können sich vorstellen, dass zum Beispiel in Heldenabschnitten haben Sie diese komplexen Illustrationen, dann werden Sie weniger Teile Ihrer Illustration oder gar keine Illustration bei kleineren Größen verwenden . Und sobald Sie anfangen zu wachsen, werden entweder diese Elemente aus dem Nichts erscheinen. Aber du musst darüber nachdenken, wie das funktionieren wird. Wenn einige, zum Beispiel, jemand verwendet Tablet in einer Querformat und dann auf Hochformat drehen. Also musst du über all diese Dinge nachdenken. Sie müssen offensichtlich mit Entwicklern sprechen, um zu sehen, welche Größen sie unterstützen werden, weil es keinen Sinn für die Gestaltung gibt, zum Beispiel, ich weiß nicht eine Smartwatch Größe, wenn sie nicht gehen, um Schulden Smartwatch Größe verwenden, es fügt dem Projekt die Zeit hinzu. Es fügt die Kosten für das Projekt, den Kunden und für Sie hinzu, weil Sie Ihre Zeit mit der Größe verschwenden , die sie nicht unterstützen werden und sie nicht verwenden werden. Wenn Sie über die Browserunterstützung nachdenken, ist das nicht Ihr Problem. Das ist die Aufgabe des Entwicklers, weil sie das im Code tun. Sie machen nur den Design-Teil in Adobe XD. Wieder einmal dreht sich ein WASD um das Design. Sie haben einige Code-Exportfunktionen, aber es ist so einfach, es sich nicht einmal lohnt, darüber zu sprechen. Es gibt etwas namens Anima unter dem Markt und Sie können das verwenden, um Code zu exportieren. Aber ich habe festgestellt, dass diese großen Entwickler online gesagt haben, dass dieser Akkord wirklich nicht so sauber ist. Und sie verwenden nur einige Techniken, um Zeilen und Codeblöcke zu kopieren und einzufügen. Also wirklich vollständig von Grund auf neu codiert ist der beste Weg, um von Adobe XD zum Lebensprodukt zu gehen. Schließlich, wenn es um responsive Design geht, müssen wir auch über Typografie nachdenken, wie es skaliert. Wir werden natürlich darüber reden. Also in meinem Fall oder versucht, die gleiche Topographie zu verwenden und nur mit ein bisschen mehr Abstand oder ein bisschen mehr Zeilenhöhe oder Sonnenlicht, dass in meinem reaktionsfähigen Design. Aber wenn ich auf den kleinsten Teil komme, Ich mag es wirklich, um es nach unten zu senken, vor allem, wenn Sie für eine mobile Bildschirme entwerfen, die wirklich extrem klein sind. Also versuche ich, die Größe zu reduzieren, wenn ich nach unten gehe. Und ich gehe immer gerne vom Desktop bis zum Handy. Wie ich bereits im nächsten Video sagte, werden wir mit Responsive Design beginnen. Ich werde über diese Gitter, Gittergrößen für den Bootstrap sprechen . Ich werde Ihnen zeigen, wie Sie diese anwenden können und wie Sie sie auch erstellen können. Eine weitere Sache, die ich erwähnen möchte, ist, dass ich eine, eine responsive Seite für eine Website und eine für das Dashboard erstellen werde. Ich werde Ihre Zeit nicht verschwenden, indem ich all das durchmache und dann all das für diese mache. Sie können das tun, wenn Sie wollen, nur als Praxis. Und um das Wissen aus dieser einen Seite und einer Dashboard-Seite auf alle diese anderen Seiten anzuwenden. Und vor allem später sind Sie auf persönlichen Seiten, wenn Sie Dosis entwerfen möchten. Also im Grunde ist es das für dieses Video. Und ich werde dich im nächsten sehen. 55. Ein Responsive Design: In diesem Abschnitt des Kurses werden wir endlich mit der Arbeit an der Responsive Design beginnen. Und ich werde Ihnen erklären, was Responsive Design ist nur durch dieses Beispiel. Also werde ich nicht nur interior reden, ich werde Ihnen nur zeigen, wie ich es mache, wie Sie mit den Adobe XD-Optionen für Sie tun können. Und einige Ratschläge, die ich Ihnen aus all den Jahren in der Arbeit mit Responsive Design geben kann. Wie ich in einem vorherigen Video sagte, werden wir das Bootstrap-Grid-System verwenden. Und wie gesagt, ich habe diese online auf Dribble gefunden. Also werden wir tatsächlich fünf Größen insgesamt verwenden. Das ist also unsere mittlere Größe. Dies ist also für eine große Website. Schauen Sie, also ist es für große Desktops und zum Beispiel für Bildschirme. Mal sehen, ab 24 Zoll. Und sie werden sich auf diese Weise anpassen, so dass sie zum Beispiel auf großen Fernsehern gesehen werden können , und so weiter und so weiter. Und das ist es, was der Kunde gewählt hat, zu unterstützen. Wir werden für kleinere Größen entwerfen. Und um Zeit zu sparen, würde es Diskurs, weil es uns buchstäblich wie $100 oder so etwas braucht , um jede einzelne Seite und jedes einzelne Detail zu decken. Deshalb habe ich gesagt, dass ich nicht den Wireframe für all diese Dashboards machen werde , um Zeit zu sparen. Deshalb sagte ich über all diese zusätzlichen Seiten, wie über uns Seite und so weiter und so weiter. Ich werde es nicht entwerfen, weil Sie das selbst tun können, wenn Sie wollen, wenn Sie üben wollen, wenn Sie neue Dinge lernen wollen, indem Sie die Tipps und Techniken verwenden, die Sie aus dem Diskurs lernen und sie auf diese Seiten. Abweichendes gilt für Responsive Design. Wir werden nur Responsive Design für diese Homepage und für die Dashboard-Seite tun. Da sich die Dashboard-Navigation ebenso wie mit dieser Navigation ändern wird, werde ich Ihnen zeigen, wie Sie Komponenten anpassen können, wie wir sie verkleinern können und all diese Dinge. Also, ohne weitere Umschweife, lasst uns anfangen. Und in diesem ersten Video der responsiven Design-Serie werde ich Ihnen zeigen, wie wir Gitter erstellen und Größen, die wir verwenden werden, bereichern können. Also, um loszulegen, Ich werde hier klicken, wo es Art-Board sagt. Sie können auch eine auf Ihrer Tastatur drücken. Und wenn ich das mache, gibt es mir all diese Möglichkeiten hier. Also, wenn Sie sich von den Einführungsvideos erinnern, wenn Sie sie sehen, können Sie das auch tun, indem auf den Startbildschirm klicken und dann aus den vordefinierten Vorlagen auswählen. Aber wenn nicht, können Sie hier klicken und es wird Ihnen alle diese Vorlagen und mehr zeigen. Ich werde das nur tun. So Web 19-22. Ich kann auch eine von diesen kopieren und einfügen, aber ich werde das nicht tun. Ich werde mich gleich hier positionieren und in den Prototyp-Modus gehen. Klicken Sie hier und nennen Sie diesen Flow aber responsive Design. Oder noch besser, ein reaktionsfähiges Website-Redesign. Denn später werden wir dasselbe tun und ein Responsive Dashboard-Design machen. Jetzt, da ich Vater erschaffen habe, kann ich mich einfach bewegen. Es ist nur ein wenig zu irgendwo hier herum, zum Beispiel, wenn Sie verkleinern, sieht es gut aus. Und in Bezug auf die Organisation, können wir, zum Beispiel, Obst Schreibtisch Dashboard direkt unten hier. Dann können wir das Website-Design direkt hier anstelle des Dashboards verschieben. Wir können dieses Dashboard rechts positionieren, wenn wir nicht genügend Platz haben. Wir können es unten positionieren. Es liegt also wirklich an dir und was du zu tun versuchst. Wir können diese Wireframes und Dashboard auch direkt hier positionieren. Und dann entwerfen Sie unten, und dann Responsive Design darunter, wird es uns ein wenig mehr Platz sparen, so dass Sie nicht den ganzen Weg nach unten scrollen müssen. Ihre Kunden, Teamkollegen und Entwickler müssen nicht den ganzen Weg nach unten scrollen, um all dies zu sehen. In unserem Fall werde ich es einfach so machen. Aber noch einmal, Sie können es tun, wie Sie wollen. Also werde ich dieses hier wirklich genau hineinzoomen. Und ich werde es zum Beispiel nennen , oder große Desktops. Über 1200 Pixel. Damit ich meinem Entwickler zeigen kann, was ich mit diesem zu erreichen versuche. Also, was ich damit tun werde, ist erste Dinge, die ich zuerst werde, um die Größe zu reduzieren. Also wird die Höhe im Grunde gleich bleiben, aber die Breite wird sich ändern. Das wird also 1440 Pixel sein. Also, wenn Sie sich daran erinnern, in diesem ist 1920, das ist 1440. Ich kann es nur ein bisschen nach oben bewegen. Und ich werde das Gitter natürlich so anpassen, dass es zu dieser Größe passt. Also werden wir immer noch 12 Spalten haben, aber die Rinnenbreite wird tardy wie DAT schlagen. Spaltenbreite wird 65 sein und sehen, ob wir das anwenden können. Keine Sicherheit. Und wir werden 165 hier benutzen. Also lassen Sie es uns noch einmal überprüfen. So 12365165. Also offensichtlich wird das Marge sein. Das sind also Ränder links und rechts. Sie können diese natürlich erhöhen. Wenn Sie also zum Beispiel Spalten breiter machen wollten, können Sie, wenn Sie die Breite der Rinne breiter machen möchten, das auch tun. Ich werde es einfach so lassen. Was ich als Nächstes tun werde, ist Kontrolle D zu treffen, um das unser Board zu duplizieren. Und ich werde diese nennen, zum Beispiel, in Desktops, oder nennen wir es, ich weiß nicht, vergrößern Geräte. Dies sind zum Beispiel Laptops, die nur größer sind als die kleinsten Laptops. So gehen sie auf bis zu 902 Pixel. Und noch einmal, offensichtlich, wenn du etwas anderes wie Angular oder so machst, wirst du andere Einstellungen haben als ich. Wenn Sie Bootstrap machen, können Sie auch andere Einstellungen verwenden. Wie gesagt, Sie müssen diese Spalten nicht verwenden. Sie können acht Spalten für was auch immer verwenden. Sie können unterschiedliche Rinnenbreite in unterschiedlicher Spaltenbreite und so weiter verwenden. Das Beste, was Sie hier tun können, ist, mit Ihren Entwicklern darüber zu sprechen , wie sie arbeiten, in welchen Größen und wie können Sie das in Ihr Responsive Design umsetzen? Offensichtlich müssen Sie mit ihnen darüber sprechen, welche Größen sie unterstützen werden. Also zum Beispiel, wenn sie nicht die Größe benötigen Ziffern in dieser Größe. Also 19-22, dann können Sie das unterstützen. Nun, für diesen hier, lass uns weitermachen. Und 19, also 1080 wird bleiben, aber wir werden dies zum Beispiel auf 10-24 reduzieren , zum Beispiel. Wie Schulden. Also werden wir es in Schulden lassen. So große Geräte bis zu 992 Pixel. Das ist im Grunde die Größe, die Sie unterstützen werden, und das ist die Größe Ihres Rasters. Also, wie Sie hier sehen können, sind wir bei 1440, aber unser Raster, so weiße Schrift unseres Gitters ist 1200 Pixel. Das ist also 992. Es wird also eine Breite unseres Rasters von 9021024 sein , ist die Gesamtbreite unseres Flughafens selbst. Also gehen wir weiter nach unten. Wir werden auch hier einige Änderungen vornehmen, solide zu verwenden. Sehen wir uns 47 für unsere Margen an. So etwas wie das. Und Sie können sofort sehen, dass wir hier und dann hier einen kleineren Margen haben. Und das fängt offensichtlich an, Form Tabletten anzunehmen. Der nächste wird also Tablet sein. Aber bevor wir dahin gehen, lassen Sie uns schnell überprüfen. Also werden wir 12 Spalten haben. Offensichtlich können Sie, wenn Sie verwenden möchten, acht Spalten oder vier Spalten haben, sogar sechs Spalten. Sprechen Sie also noch einmal mit Ihren Entwicklern darüber, was sie möchten Sie implementieren und wie sie möchten, dass Sie dies erstellen. So ist es einfacher für sie, diese Website zu entwickeln. Später. Wir werden Rinnenbreite von 30 haben, Spaltenbreite von 50, Spaltenbreite von 50, und Ränder sind links und rechts oder 47 Steuerelement D verknüpft, um dieses zu duplizieren. Und das wird Median sein. Und Geräte. So zum Beispiel Tablets und bis zu 768 Pixel in der Breite. Also noch einmal, 76 Acht ist die Breite unserer großen, und wir werden das anwenden, um sich anzupassen. Also noch einmal, wie ich sagte, können Sie mehrmals acht Säulenrastersystem verwenden, Sie können sechs verwenden, Sie können für was immer Sie wollen, aber ich werde nur 12 für die Konsistenz verwenden. Also werden wir das senken. Also werden wir es behalten, sagen wir, 76 Plätze. Wie Schulden. Als nächstes werden wir 12 Spalten haben, 30, wir werden 30 hier haben. Und wir werden, mal sehen, 39 hier haben , so. Und mal sehen, es gibt mir 44 aus irgendeinem Grund. Mal sehen, Australien. So spielt Adobe XD wieder Spiele auf uns. Es lässt mich das nicht beenden. 30. Mal sehen, 44. Also, ja, lass es uns so lassen. Lasst es uns bei 44. Also im Grunde ist es das. Lasst uns noch ein paar Dinge aus dem Desktop heraus. Also werde ich das duplizieren. Ich werde das extra kleine Geräte nennen. Mal sehen. Telefone und unter fünf, 76 in Pixel. Also lassen Sie mich das so überprüfen. Und das wird tatsächlich sein, lassen Sie uns reduzieren seine Größe wird 375 sein. So klein. Wir werden nur vier Spalten haben. Wir werden die Rinnenbreite von 30. Und mal sehen, wir können das auf 20 reduzieren. Das wird 61 sein. Diese robust und Säulen sind für, wieder einmal, weil wir dies tun, vielleicht können wir ableiten und distale acht. Mal sehen, nur damit wir uns ein bisschen mehr Platz geben können. Und dazwischen ist das um vier Uhr, und das ist es im Grunde. Wir haben unser Responsive Design und Grid System entwickelt. Du kannst es sehen. Ich mag diese großen Ränder an der Seite nicht wirklich. Vielleicht können wir diese später reduzieren. Aber für jetzt, lassen Sie sie einfach liegen und sehen, was wir mit unserem Design haben, sobald wir los sind. Also, das ist es im Grunde für dieses erste Video. Im nächsten Video werden wir diese Seite kopieren, sorry, diese Seite mit dem Design unten und wir werden tatsächlich beginnen, sie an unser Grid-System anzupassen. Also sehe ich dich dort. 56. Responsive Design: Wir werden nun endlich mit der Arbeit an unserem Responsive Design beginnen. Und um loszulegen, können Sie diese zwei Möglichkeiten in Angriff nehmen. Der erste Weg ist, einfach in Ihr Kunstbrett zu springen. Und weil wir diesen Homepage-Design-Bildschirm machen werden, können Sie einfach alle diese Inhalte kopieren und hier einfügen und einfach diesen rpart erweitern, den wir gerade für diese erste Größe erstellt haben. Der andere Weg, dies zu tun, und ich habe diese Methode wirklich bevorzugt, ist, weil es Stecklinge wirklich schön, sauber, leicht zu sehen, leicht zu verstehen ist einfach, Ihren alten Schlüssel zu halten. Duplizieren Sie entwaffnete Platinenposition. Es ist irgendwo hier. Also, wenn Sie in der Nähe Ihres Flughafens mit Ihrem Netzsystem sein wollten , so dass Sie es überprüfen und selbst sehen können, wofür Sie skalieren müssen, wo Sie es skalieren müssen, vier und so weiter. So ist es meiner Meinung nach viel einfacher. Aber wieder einmal, Sie können es umgekehrt machen. Der andere Weg, wie ich schon sagte, ist einfach, hier reinzuspringen. Sie können alle diese Elemente auswählen, drücken Sie die Kontrolle C. Sie können sie auch gruppieren und dann erweitert diese werden ganz nach unten geboren, zum Beispiel, so. Und dann würde er V kontrollieren, um all diesen Inhalt einzufügen. Aber wie gesagt, ich mag es, Dinge so zu tun. Es liegt also wirklich an Ihnen zu entscheiden, auf welche Weise Sie sich bewegen wollen. Also, um loszulegen, wollte ich im Grunde mein Layout an diese Größen anpassen. Also wollte ich es in 40 in der Breite reformieren. Ich möchte, dass es in der Höhe unbegrenzt ist. Also im Grunde, egal welche Höhe es braucht, denn auf all diesen Websites, wo sie auf Manuel sind, auf dem Desktop und Tablet, was auch immer Sie nach unten scrollen. Es ist also wirklich der Witz von DES, Elementen und Breitenbeschränkung, die sich ändert, was man hier durch diese Boards sehen kann. Grundsätzlich kann die Höhe so groß sein, wie Sie benötigen, während die Breite einfach mit Ihrem Inhalt eingeschränkt wird. Wie gesagt, mehrfach kann sich dieser Inhalt einfach ändern. So zum Beispiel, für die kleinsten Größen, benötigen Sie vielleicht nicht alle diese Hintergrundelemente, weil sie, zum Beispiel, könnten oder nicht leicht lesbar auf einem Handy-Bildschirmgröße, während auf dem Desktop gibt es schön präsentiert, sauber, leicht zu verstehen, leicht zu sehen und zu absorbieren. Was Sie also tun können, ist einige dieser Elemente zu entfernen, während Sie nach unten gehen. Aber ich werde versuchen, so viele dieser Elemente wie möglich zu halten, damit ich meine Erfahrung während meines Website-Designs konsistent halten kann . Beginnen wir also mit unserem Responsive Design. Und um das zu tun, muss ich zuerst ein paar Dinge tun. Was ich tun muss, ist, dass ich Gruppen für diese separaten Elemente erstellen muss , weil ich skalierbar sein wollte. Also zum Beispiel, für diese Gruppe hier oben, muss ich vielleicht gar nichts tun. Das Einzige, was ich tun wollte, ist, sie so zu gruppieren. Also gehen wir weiter und drücken auf Control G und geben den Ort ein. Ich werde zum Geschäft gehen, wie es ist, weil es nur ein Text für sich ist. Für diesen werde ich Control G drücken und Telefon eingeben. Und schließlich für diesen, werde ich Control Genotypisierung Flaggen treffen. Und was mir das erlauben wird, ist, wenn ich mit der Skalierung beginne, Elemente in den Ordnern bleiben zusammen und es wird miteinander skalieren. Während, wenn Sie sie außerhalb Ihrer Ordner lassen und beginnen, dies zu erweitern und beginnen, es zu skalieren. Wenn ich also beginne, es so zu skalieren, können Sie sehen, dass sich die Dinge zusammen bewegen, weil sie sich innerhalb des Ordners befinden. Aber zum Beispiel, wenn ich sage Gruppierung meiner Flaggen und meines Telefons aufheben. Also lasst uns das in der Gruppe machen. Und dann, wenn ich eine Größenänderung beginne dies, Sie können sehen, es sieht fast gleich aus. Aber sobald die Dinge so weit kommen, können Sie sehen, dass sich das Telefon und das Telefonsymbol überlappen. Und je mehr Sie die Größe reduzieren, können Sie sehen, desto größer wird das Problem. Also lassen Sie uns all diese Dinge rückgängig machen. Gehen wir hierher. Also hatten wir das Telefon und die Fahnen. Grundsätzlich müssen wir das tun, denken. Wir müssen das für all diese Gruppen und Ebenen tun. Also hier haben wir den Text, was in Ordnung ist. Wir positionieren es auch in einem Stapel, der auch gut und gut für die spätere Positionierung ist Ich werde Ihnen zeigen, dass sich Hero Elements später immer in einem Datenordner befinden sollte. Glückliche Paare. Das ist also nur unser Bild. Wir werden es zu positionieren Helden Form, im Grunde nur eine Form. Diese Maske befindet sich innerhalb einer Gruppe. Im Grunde ist eine Maske eine Gruppe dieser beiden Elemente und versteckt sich nur gegenseitig. Also werden wir es so lassen, wie es ist und wir werden diese Maske nach Bedarf skalieren. Und schließlich kann Held bg dt so bleiben. Jetzt für die Dienste, können wir es so lassen, weil Sie sehen können, dass wir diese Content-Karten haben und wir können sie umbenennen. Und ich habe offensichtlich vergessen, das zu tun. Also statt einer Kontinent-Karte, sollten Sie so etwas wie personalisierte Konten schreiben, Dan angepasste Einsparungen Dan personalisierte Debitkarten. So können Sie das für all diese Dinge tun. Nun, was wir mit diesem machen können, ist, dass wir einen Stack erstellen können. Und wenn ich es öffne, können Sie sehen, dass es zu diesem mittleren in einen Stapel positioniert ist. Ich weiß nicht, warum Stacks das tun. Anstatt diesen Text einfach außerhalb oder was auch immer zu verwenden, ist es einfach, diese Dinge in einer Gruppe zu positionieren. Also werde ich mit der rechten Maustaste aufgehoben auf, und ich gehe tatsächlich zurück und wähle meinen Stack nicht aus. Ich kann das auch tun. Jetzt. Ich kann die Gruppierung aufheben. Und jetzt, wenn ich diesen Text außerhalb meines Ordners positioniere, klicken Sie hier, positionieren Sie ihn in einem Stapel und öffnen Sie ihn. Sie können sehen, dass sie alle draußen sind. Wenn ich mich also dafür entscheide, meinen Stapel so zu positionieren, können Sie sehen, dass er automatisch alle diese Karten übereinander positioniert. Also werde ich das wirklich tun. Ich werde meinen Text entfernen, ihn außerhalb oder den Ordner positionieren, weil es viel einfacher , als alle diese Änderungen anzupassen. Nun gehen wir zum Wechselkurs über. Also werde ich diesen Text in einer Gruppe positionieren. So, denn das ist nur der einzige Text, den wir brauchen. Und was ich tun werde, ist, dass ich nicht in einem Stapel positionieren werde. Und was ich eigentlich tun werde, ist, all diese auszuwählen. Zitat, Zum Beispiel Währungen wie diese. Und dann verwenden Sie einfach diese Option, die horizontal scrollen ist. Und Sie können mit diesen Umrissen zeigen , wo Sie horizontal zum Anfang und Ende scrollen wollten. Also werde ich es hier anpassen und zwei hier vorerst. Und offensichtlich, sobald wir mit der Skalierung beginnen, können Sie dann nur auf alle diese Einstellungen bewegen. Also werde ich meinen Text hier eingefügt kopieren. So heißt es Währungen und nicht vertikale oder horizontale Bildlauf, Service-Name. Wie Sie sehen können, ist es bereits innerhalb des Stapels. Wir haben das Bild, wir hatten den Text, was in Ordnung ist. Wir werden es so lassen. Jetzt für diese Karten, kann ich sie in einer Gruppe positionieren und es Karten nennen. Und dann kann ich sagen, dass aufgewachsen in einem Stapel. Sie können sehen, dass sie immer noch so sind. Und wieder einmal, es wird viel einfacher für uns sein, einfach auf eine Schaltfläche zu klicken. Es wird sie dort positionieren, wo sie gebraucht werden. Also werden wir es vorerst so lassen. Unsere neuesten Nachrichten, ich werde dasselbe tun. Also werde ich meinen Text draußen entfernen, sie in einem Stapel positionieren. Wenn ich hier klicke, können Sie sehen, was ich meine. Also positioniert es sie nach unten. Endlich, Info-Strip und wir werden das Gleiche tun. Also werde ich eigentlich schon getan, so haben wir Standort, Telefon und E-Mail, und wir haben Infrastruktur, BG. Also werden wir es so lassen, weil es viel einfacher zu justieren ist. Diese Elemente sind senden gut aussehen nach oben. Jetzt haben wir nur im Grunde, wenn Sie es für verschiedene Elemente betrachten. Also haben wir Logo, wir haben den Straßennamen, wir haben die Telefonnummer und wir haben die E-Mail. Also werde ich diese Informationen später tatsächlich entfernen und einfach die Symbole an Ort und Stelle lassen. Wenn es nun um Fußzeile geht, wenn ich den Photoshop geöffnet habe, können Sie sehen, dass wir bereits alle diese Informationen im Inneren haben. Was ich tun kann, ist, dass ich kann, alles, was ich einfach den Stack verwenden kann, wenn ich will , aber ich werde es nicht , ich werde es so lassen, weil es viel einfacher für mich sein wird , all diese später neu zu positionieren. Also werde ich Ihnen das auch zeigen. Und das ist es im Grunde für die Einstellungen. Beginnen wir jetzt mit unserem Responsive Design. Also noch einmal, wir müssen die Größe davon zu reduzieren sind oder sind nicht wert. Weil Sie sehen können, dass es jetzt um 1920 ist, müssen wir es auf 1440 reduzieren. Und lasst uns hier klicken und diese Homepage Antworten so umbenennen. Und noch einmal, um Sie zurück zu nehmen, werde ich nur ansprechendes Design dieser eine Seite zu tun, denn wieder, wird mich Stunden, wenn nicht Tage dauern, um zu sprechen und dieses ansprechende Design für Ihre Jungs zu erstellen, es ist gehen, um Sie wie eines Tages zu nehmen , zum Beispiel für alle diese Seiten. Und kann einen halben Tag für alle diese Seiten sein, wenn Sie ganz genau sein wollen und so weiter. Wenn Sie etwas schlaff in ein paar Ecken schneiden wollen, nur um reaktionsfreudiges Design zu schaffen. Sie können alle diese Seiten in etwa 67 Stunden tun, also einen Arbeitstag, zum Beispiel. Stellen Sie also sicher, dass Sie Ihre Kunden aufladen. Darüber hinaus, wenn Sie ansprechendes Design für sie erstellen, stellen Sie sicher, dass es Zeit braucht, es braucht Planung, es braucht Denken. So können Sie diese Prinzipien immer anwenden. So zum Beispiel die Scroll-Gruppen, diese Stapel, während Sie entwerfen. Üben Sie sich also durch diesen Kurs, sehen Sie, was für Sie am besten funktioniert, und wenden diese Techniken später an, wenn Sie tatsächlich mit echten Kunden arbeiten. Oder wenn Sie Techniken mit Ihren bestehenden Clients wechseln. Also lasst uns wieder dahin springen. Wenn ich hier noch einmal klicke, also 1440, klicke ich gleich hier, 1440. Und sobald ich die Eingabetaste drücke, siehst du, dass es all unsere Quanten schneidet, aber das ist in Ordnung, das sollte passieren. Jetzt ist die nächste Sache, alle diese Elemente zu kopieren. So können Sie hier mit der rechten Maustaste klicken. Und Sie können sehen, dass Sie all diese Optionen haben. Sie haben Kopie, Sie haben angeordnet, Sie haben auf Pixelraster ausgerichtet, Sie haben Hilfslinien und so weiter. Aber Sie haben nicht die Möglichkeit, ein unstimmiges Layout nach hier zu kopieren. Sie können es hier zum Standard machen, aber Sie können Standard verwenden, was Gibt es einen Standard, aber Sie können es nicht als separate Vorlage anwenden, was eigentlich das Update ist, das ich wirklich von Adobe XD-Team sehen möchte, ist, zum Beispiel, sagen wir, dass dies der Desktop ist, das ist kleiner Desktop, das ist noch kleiner. Das sind ihre Tablets und Telefone. Lassen Sie mich zusätzliche Rasterlayouts für alle erstellen. Wenn ich hier klicke, können Sie sehen, dass ich mein Rasterlayout eingerichtet habe weil ich bereits alle diese Werte manuell eingegeben habe. Lassen Sie mich diese Werte als Vorlage erstellen. Und wenn ich das hier kopiere und einfüge, kann ich einfach eine Schaltfläche verwenden, um diese Vorlage auf mein vorhandenes Kunstwerk anzuwenden. Ich hoffe, es ergibt Sinn, aber leider haben wir diese Option vorerst nicht. Also müssen wir diese Optionen dafür verwenden. Also wieder, wir haben es genau hier. Ich werde alle diese Optionen unten verwenden. Also werden wir die 12 Spalten verwenden. Wir werden 30 hier benutzen, wo wir 65 benutzen werden und 165, Miller, so. Es wird uns ein paar weitere Probleme geben. Also nochmals 3065165. Also Dairy, wie es jetzt haben wir dieses genaue Layout für unser Raster, gespiegelt auf dieser Seite genau hier. So können wir jetzt weitermachen und loslegen. Wir sind Responsive Design. Also zuerst, ich kann voran gehen und nach oben springen und alle diese Elemente anpassen , so dass Sie sehen können, wo unser Raster jetzt ist. Soaps, wir haben noch 12-Säulen-Raster. Also lassen Sie uns einfach voran und passen alle diese Elemente darauf an. Also springe ich hier rein. Für unseren Standort werde ich ihn einfach hier verschieben, an meinem Raster ausrichten oder das hier positionieren. Ich erfahre mehr und klicke auf mein Handy. Klicken Sie auf meine Blumen, und müssen nur sehen, wo bin ich Telefon kann Schaufensterpuppe Position und hier denke ich, es wird gut funktionieren. Sie können auch geschäftlich positionieren, zum Beispiel, direkt hier draußen, aber ich mag es vorerst dort zu lassen. Und das ist es im Grunde. Das ist es, was wir mit all diesen verschiedenen Elementen tun werden. Jetzt mit Navigation wird ein bisschen anders sein , weil wir bereits unsere Navigation ausgewählt haben. Sie haben also im Grunde zwei Möglichkeiten. Eine Option ist, die Sie bereits als einfach voran und angepasst an alle diese Status zu verwenden. Stopp. Mal sehen. Wir haben große Desktops, so dass ein. Also, was ich tun müsste, ist in meinem Hauptnav für dieses. Denn wie Sie sehen können, ist dies der ausgehöhlte Diamant, nicht mit Diamanten gefüllt ist, was darauf hinweist, dass dies nicht die Hauptkomponente, sondern die untergeordnete Komponente von der Hauptkomponente selbst ist. Was bedeutet, dass wir jede Art von Änderungen machen können, die wir wollen, und es wird nicht beeinflussen unsere mittlere Komponente ist nur beeinflussen diese Gel-Komponente und Kind-Komponente gibt es so hoffe ich, dass macht Sinn. Aber weil ich nur diese eine Seite mache, um ein bisschen Zeit zu sparen. Ich werde dies nur für den Standardzustand selbst anpassen. Grundsätzlich, wenn Sie dies für alle Seiten und innerhalb der Projekte tun wollen, müssen Sie offensichtlich, dann können Sie springen. Nachdem Sie dieses angepasst haben, können Sie in Betracht ziehen, diesen angepasst, können Sie in Kredite springen und so weiter und so weiter. Du verstehst den Punkt. Du musst das die ganze Zeit tun. Also werde ich hineinspringen und all diese so gruppieren und sie nennen, zum Beispiel Menü- oder Nav-Elemente wie diese. Nur damit es ein bisschen einfacher für mich ist, damit zu arbeiten. Und dann werde ich hier klicken und die Breite zwei hier anpassen. Und wie Sie sehen können, haben wir bereits einige Probleme. Also müssen wir diese Probleme anpassen, während wir uns bewegen. Also im Grunde, wenn ich jetzt doppelklicke, können Sie sehen, dass wir bei Poppins 18 sind. Also, was ich zuerst tun werde, ist im Grunde passen meine Taste, weil ich es brauchen, um diese Größe zu haben. Also werde ich so etwas anklicken. Ich gehe zum Schweben und mache dasselbe. Gehen Sie in den Standardzustand ist einfach verschieben Sie es. Und mal sehen, Maria kann 20 sein. Ich kann dasselbe für mein Logo tun. Also 20, nur um mir ein bisschen mehr Platz zu geben. Wenn Sie jetzt ein Wiederholungsraster verwenden, können Sie den Abstand zwischen ihnen automatisch anpassen. Aber weil wir es nicht sind und diese als separate Elemente erstellt werden, müssen wir unseren Raum manuell anpassen. Also, was ich tun kann, ist im Grunde klicken Sie hier. Und mal sehen, positionieren Sie diese 1234 vielleicht. Und dann gehen Sie weiter, wählen Sie alle diese aus. Und mal sehen, bewegen Sie sie auch auf 40 sein. So 1234, können Sie diese deaktivieren und dann fortfahren und einen Abstand von 44 erstellen, alle diese. Und wie Sie sehen können, fängt es jetzt an, mir diesen Abstand zu geben. Also Milchgewohnheit, wenn ich meine Gitter für eine Sekunde verstecke. Nur damit du es besser sehen kannst, kannst du sehen, was wir getan haben. So können Sie sehen, wohin das geht. Sie müssen in springen, passen Sie alle diese Größen, sind nur alle diese Leerzeichen für alle Ihre Seiten. Und deshalb ist das wirklich wichtig. Also lasst uns weitermachen und weitermachen. A mag diesen Abstand wirklich nicht, aber lassen Sie es dort für jetzt. Also klicke ich hier, um es wieder in mein Raster zu bringen. Also, was ich tun werde, ist, dass ich tatsächlich springen werde, mein Bild in und ich kann es skalieren, zum Beispiel, nur ein wenig, nur um zu sehen, wo das mich ansteckt. Ich kann dann meinen Text hier positionieren. Ich kann hineinspringen und meinen Knopf auf diese Größe bewegen. So kann ich natürlich angepasst werden. Und dann können Sie diese Schaltfläche kopieren und einfügen, wenn Sie möchten, für alle Ihre anderen Schaltflächen. So zum Beispiel für dieses und diese beiden, nur so, dass es in Ihrem Design gleich aussieht. Was ich als Nächstes tun kann, ist, wenn wir hier sehen, dass wir bei 90 sind. Was wir also tun können, ist, dass wir unsere Texte umkreisen können. Also für eine neue Seite, kann ich außerhalb klicken. Sie können sehen, wie das aussieht. Wenn Sie damit zufrieden sind, können Sie es positionieren. Ich kann diesen Text auch unten schreiben. Und Sie können sehen, weil sie in einem Stapel sind, alles passt sich gut an. Also sind wir 50 hier, 50 hier. Ich kann einfach meinen Klick halten und es wird sich anpassen, um zu hören. Oder wenn Sie Ihre Umschalttaste gedrückt halten, wird es beide anpassen. Und das ist der Vorteil der Verwendung von Stacks, denn damit können Sie sich ganz einfach an all diese Änderungen anpassen. Lassen Sie uns das jetzt ein wenig nach oben bewegen, zum Beispiel hier. Ich kann dann neu positionieren könnte Bild, zum Beispiel hier. Und Sie können Teile Ihres Bildes schneiden, so etwas, wenn Sie denken, dass das angemessen ist. Aber weil ich es nicht tue, werde ich einfach meine Größe meines Bildes anpassen. So etwas kann zum Beispiel etwas höher sein. Irgendwo hier. Ich denke, es ist in Ordnung. Und ich denke, das funktioniert ein bisschen besser als das. Sie können auch so einen Rap machen, so dass Sie das Alter Wort nach unten lassen können, aber es wird in der Regel nicht empfohlen, jemals nur ein Wort nach unten zu lassen. Aber in diesem Fall werde ich es verlassen, weil es wirklich zu unserem Bild passt und es wirklich zu unserem Layout passt. Also der nächste Schritt, RdS-Formen. Gehen wir also voran und passen Sie alle diese Formen manuell an. Bodenlage, dieser hier. Lass das hier sein. Und während sie hier ausgerichtet sind, ist es manuell einfach positionieren und vielleicht sogar hier. Und Sie können auch herumspielen und für die Rotation anpassen, sagen wir mal so. Also das nächste, was ist unsere Moschee gesucht, um einfach die Breite meiner Maske so anzupassen , dass es die Wurzel meines Brettes passt. Und ich werde dann in einen Mond springen MyCircle, um irgendwo hier herum, zum Beispiel. Schließlich sind wir mit Heldenform links, und wir werden unsere Heldenform irgendwo hier positionieren. Was Sie tun können, ist es auch nach unten zu skalieren. Halten Sie also Ihre Umschalttaste gedrückt und Sie können es anpassen, um es zu wagen. Und von dort aus können Sie das einfach erweitern. So wie so. Und ich kann hineinspringen und meine Formen bewegen. Also im Grunde Milchherde, was uns bleibt, ist der Held BG. Ich werde einfach mehr mit hier. Oder Sie können 1444, die Breite verwenden. Und im Grunde, je mehr Elemente Sie in Ihrer Nähe haben, wie Sie sehen können, haben wir vergessen, den Vg zu bewegen. Also kann ich einen Zweifel machen. 1440, drücken Sie die Eingabetaste, gehen Sie auf die Gesamtbreite unserer Seite zu schneiden. Im Grunde, je mehr Elemente Sie auf Ihrer Seite haben, dies wird Sie mehr Zeit in Anspruch nehmen. Lasst uns das zum Beispiel so lassen. Und ich gehe einfach zurück zu diesem vorherigen Layout, weil ich nicht wirklich mag, wie das aussieht. Für ein neues Zeitalter. Ich mag das nur ein bisschen besser. Abbas findet es immer noch nicht zu glücklich. Also, weil wir diesen Text außerhalb unserer Gruppe setzen , der einfach hier klicken und positionieren kann. Und wie Sie sehen können, hält es immer noch 100 für den Abstand. Jetzt kommt die Zeit, all diese anzupassen. Und das Schwierige daran ist , dass, wenn Sie sich für jeden von ihnen erinnern, wir den Schweber haben. Also müssen wir diese beiden Zustände separat anpassen, was uns offensichtlich in ein wenig mehr zur Zeit bringen wird. Also werde ich es so in unserem Raster positionieren. Ich werde hier reinspringen und angepasst. einmal haben wir drei Elemente. Sie werden also vier Spalten für jedes Element nehmen. Da wir 12 Spalten an Ort und Stelle haben, werde ich versuchen, die Höhe an Ort und Stelle zu halten. Also im Grunde sollte die Höhe gleich bleiben. Wenn nicht, können wir auch die Höhe ändern. Also noch einmal, klicken Sie einfach hier, angepasst an die Form. Sie können sehen, dass es wirklich schön angepasst. Und ich kann in meinen Horrorzustand springen und mich auch auf vier einstellen. Was ich innerhalb des Horrorstatus tun werde, ist einfach auf diese Formen zu klicken. Ich kann sie reorganisieren. Und das ist die Magie der Responsive Design Zukunft für Sie. Wenn ich hier auf den Standardstatus klicke, können Sie sehen, wie das aussieht. Also im Grunde, wie Responsive Design funktioniert, ist, dass Sie es entweder für Ihre Art Board nehmen können. Also, wenn es hier ist, können Sie Ticket für unser Board und dann wird Ihr gesamter Bericht verantwortungsvoll skalieren. Aber Sie müssen dann hineinspringen und selbst eingeben, was XD für das Beste für Ihr Design hält. Sie wissen offensichtlich, was das Beste für Ihr Design ist, weil Sie derjenige sind, der es getan hat. Also im Grunde empfehle ich Ihnen, diese Methode, die wir hier tun, springt in eine Bearbeitung all dieser Elemente separat. Für Klick hier können Sie sehen, dass wir Responsive Design eingeschaltet haben rechts hier. Jetzt, da wir uns in dieser Gruppe bewegen und sie organisieren, können Sie sehen, dass sie sich verantwortungsvoll bewegt. Aber weil wir noch in einem Stapel sind, können Sie sie verschieben, um verantwortungsvoll auf all diesen verschiedenen Seiten zu bewegen. Also, was wir hier tun müssen, ist, unseren Pfeil zu bewegen, weil Sie sehen können, weil es nicht in einem Ordner war, können Sie mehr erfahren und Pfeil sind getrennt. Und lassen Sie mich Ihnen das auch zeigen. Also OK, gehen wir den ganzen Weg zurück. Unsere ursprüngliche Position. So auf Mehr wie diese, jetzt kann ich in springen und Gruppe diese Qualität, Erfahren Sie mehr. Kontrolle C. Ich werde zugewiesenen Mahara-Zustand springen. Gruppieren Sie diese, um mehr zu erfahren. Und jetzt, wenn ich eine verantwortungsvolle Größe dieser starte, können Sie sehen, dass mehr lernen und Pfeilstatus, wo sie sein sollten, so dass sie sich überhaupt nicht bewegen. Das werden wir also für alle tun nur um uns ein bisschen Zeit zu sparen. Und deshalb sind Gruppen wirklich wichtig. Also, wo Sie Gegenstände in einer Gruppe setzen können, weil sie kommen, um Sie später zu beißen. Es ist, als würden sie es jetzt tun. Normalerweise setze ich sie alle in Gruppen. Aber für den Diskurs beschloss ich, nicht zu gehen. Es war wirklich schwierig für mich, mich darauf einzustellen, denn wie gesagt, mache ich das normalerweise nur, um es euch zu zeigen, wie wichtig es ist, wenn man zu dieser Phase kommt, die eine responsive Designstufe ist. Jetzt, wie ich schon sagte, was ich tun werde, ist, sie an diese Herbst-Säulen anzupassen. Also, so werde ich das hier genau hierher bringen. So können Sie die ganze Art und Weise Kleidung vergrößern und sehen Sie den Abstand, der 30 ist, einfach angepasst. So 1234. Also bis hier, gehen wir zum Schweben. Also 1234, wieder, springen Sie hinein und ändern Sie alle diese Elemente, wo immer Sie es für notwendig halten. So können Sie das hier zum Beispiel sogar positionieren und Schreibtische so drehen. So wie das. Mal sehen, kein Fehler. Das ist in Ordnung. Und schließlich werde ich das auch an die Türkei anpassen, so. Und wenn ich es dir zeige, sind wir 30 hier, wir sind 30. Bewegen Sie einfach die Maus darüber und es wird es angezeigt. Und dann endlich für diesen, einfach hier abklemmen. Geh zu Horace, mach es hier ab. Und dann gehen wir weiter und passen alle diese Elemente an. Also werde ich das hier positionieren, vielleicht etwas gedreht, und das hier genau hier bewegen. Was uns bleibt, ist dieser Kreis, wie Sie ihn sehen können. Es ist jetzt nur eine Ellipse, weil es nicht in einer Gruppe war. Also, was Sie tun können, ist einfach eine Kopie von hier zu machen. Positionieren Sie es zum Beispiel irgendwo hier. Und ich kann Kontrolle C drücken, um es zu kopieren. Und dann springen Sie direkt hier zu diesem, in den Horrorzustand, wo es ist. Also Elemente und eine Maske Control V. Ich werde es irgendwo hier zum Beispiel platzieren. So können Sie sogar präzise sein. Sie können beispielsweise 20 von links positionieren. Es wird also viel einfacher sein, als sich in all diesen zu positionieren. Also 20, ich werde den ursprünglichen Kreis entfernen. Ich werde Control C treffen und zurück zu diesem hier gehen, zum Rumpf wie diesem. Und aus irgendeinem Grund haben wir diesen Hover nicht geändert. Also lass es uns um 1234 machen. Und weil Sie sehen können, sind wir dran. Responsive Design für dieses Element, für diese Elemente sowie die Stapel, können Sie sehen, dass alle diese Elemente sich gut anpassen. Also lasst uns zuerst das reparieren. Ich habe mehr nach außen getan, sollte es wollen. Ich werde diesen Kreis und Milchgewohnheiten entfernen , wenn ich tun werde, ist auch diese Elemente anpassen. Also genau hier, genau hier. Und das ist es im Grunde. Ich kann schon sehen, wie Sie nach diesem fragen, aber wir werden dazu kommen. Aber zuerst, wie Sie sehen können, ist unser Text ein wenig abgeschnitten. Wie Sie sehen können, haben wir hier viel zu viele Möglichkeiten. Was wir also tun können, ist einfach die Größe des Textes an dieser Stelle zu senken. Also, was ich VR machen kann, es ist 24. Was Sie tun können, ist zurück auf 18 zu gehen. Aber lassen Sie uns schnell zu den ursprünglichen Zuständen für all diese zurückkehren. Also lassen Sie uns sie von hier aus auswählen. So Standardzustand, kein Fehlerstatus, Standardzustand. Und lassen Sie uns jetzt an unserem Text arbeiten, denn wie gesagt, Text ist eines der wichtigsten wichtigen Elemente. Reich, das Sie in Ihr Design einbeziehen werden. Wie Sie sehen können, sind wir bei 40. Was wir tun können, um mit diesem zu beginnen, ist, um 20 zu verlassen. Also kann ich sie alle auswählen. Da das keine Gruppe ist, ist es viel einfacher. So verschieben Sie 12, Sie können dann zu Ihrem Erntedatum springen, wählen Sie alle so aus. Schicht 12, und dann kann ich weitermachen und das für alle tun. Also lassen Sie es mich wissen. Klicken Sie hier. Also habe ich gesagt, dass ich in meinen Horrorzustand zurückkehren wollte. Also gebe ich mir nur ein bisschen mehr Platz von links nach rechts. Ich verliere 12. Und Sie können sehen, dass der Text jetzt passt. Und in den späteren Stadien werden wir den Text umwickeln. Aber weil wir es immer noch so benutzen können, wie es hier ist. Und dann werden wir damit arbeiten. Und Sie können sehen, dass alles so funktioniert, wie es sollte und alles schön aussieht. Also lasst uns das für den Staat Horace tun. Und wieder einmal werden wir den Horrorzustand entfernen, sobald wir zu diesem Punkt gekommen sind, denn auf dem Tablet und auf einem Telefon brauchen Sie nicht wirklich höhere Immobilien, aber wenn Sie auf Desktop-Geräten sind, also stellen Sie sich Dies ist nur ein kleiner Desktop. Dies ist der größte Desktop. Dies ist kleiner und das ist zum Beispiel ein kleiner Laptop. Du hast immer noch eine Maus. Sie haben entweder eine echte Maus oder einen Mauszeiger oder ziehen Bett oder was auch immer, aber Sie haben immer noch eine Maus, daher benötigen Sie immer noch den Hover-Zustand für alle diese Elemente. Später bewegen wir uns, gehen zu diesen. Sie werden wirklich Hover-Zustand brauchen und Elemente können sich im Grunde verschieben und sich an diese verschiedenen Positionen anpassen, was ich Ihnen später zeigen werde. Wieder einmal sind wir bei 100. Wir haben nichts im Grunde geändert. Jetzt können wir uns mit diesen Texten befassen. Also, was wieder ist, wir sind bei 18. Wenn wir überprüfen, sind wir bei 20, aber 60 auf dieser Seite, was bedeutet, dass wir viel Platz haben um zu spielen. Also, was ich tun kann, ist auf 16 klicken und Sie können sehen, um aus einer Vielzahl von Kontooptionen zu wählen. Also im Grunde, was wir tun können, ist es zu schneiden. Zum Beispiel, genau hier. Wir sind bei 11, also können wir diese auf 20 einstellen. Und was ich tun werde, ist im Grunde zu sehen, welche Farbe das ist, es ist diese. Also werde ich hier direkt springen, wählen Sie diese Farbe Control C für meinen Text. Aber bevor ich es tue, kann ich das tatsächlich erweitern, wie gesagt, 2020. So wie das hier. Und dann kann ich es so schneiden. Mal sehen. Ja. Es war einfach so lassen. Also würde er die Kontrolle scheinen. Ich kann zurück zu meinem Horrorzustand, springt hinein, klicke auf Kontrolle V und Milchherde. Oder Sie können leichter in den Standardzustand wechseln, da die Textfarbe gleich ist. Ich kann hier doppelklicken, Control C. Und ich kann zurück zu meinem Horrorzustand. Klicken Sie hier, löschen Sie Control V wird es an der gleichen Stelle einfügen, aber einfach mehr mit hier. Also sind wir bei 40. Und wenn wir gehen, um dies zu bewegen, so haben wir den Abstand von 20. Und schauen wir uns das noch einmal an. Ja, wir haben noch den Abstand von 20. Wenn ich also auf diese Vorschau klicke und hier scrollen, kannst du sehen, dass wir noch dieses haben. Wir haben immer noch unseren Hover-Effekt auf unsere Schaltflächen. Wir haben immer noch diese Hintergrundunschärfe, wenn wir nach unten scrollen, so dass alles gut funktioniert. Und endlich hier, können Sie immer noch sehen, dass diese funktionieren und sie funktionieren gut. Wir müssen uns nur anpassen, wie wir es mit diesem Text getan haben. Wir müssen uns an all diese anderen Texte anpassen. Also lassen Sie mich das schnell machen. Wieder mal, wir sind bei 16. Wir haben die gleiche Farbe. Wir sind 20 auf dieser Seite, 20 auf dieser Seite. Also lasst uns das schnell machen. Ich werde hier reinspringen. Und ich werde zuerst Dinge zuerst auf 16 eingestellt, verwenden Sie die gleiche Farbposition und hier, also verschieben Sie 12, und dann kann ich diese linke Kante positionieren. Also im Grunde habe ich 20 hier, 20 hier. Und ich kann hineinspringen und diesen Text ein wenig anpassen. Also mal sehen. Ich kann draußen klicken und dann rechts hier klicken. Ich kann das auf 20 positionieren. Also, was wir sehen können, 12345 Zeilen Text, 12345 Zeilen Text. Versuchen Sie also, diese Konsistenz zu behalten, wenn Sie nicht so gut hören können. So steuern Sie C auf diesen Zustand für diesen Text, springen Sie in Horace Datum, klicken Sie auf Löschen, steuern V, um es in Filmen direkt darunter einfügen. Und bewegen Sie das auf 20 zu schlagen, so. Schließen Sie dann diese und gehen Sie zurück zum Standardzustand. Das ist in Ordnung. Und schließlich, lasst uns zu diesem übergehen. Also noch einmal, erste Dinge ändern es zuerst auf 16, diese Farbe. Gehen Sie zurück zum Ebenenbedienfeld, das 22 hier, also 12 und dehnen Sie dann diese linke Kante bis hier so aus. Lassen Sie uns schließlich unseren Text an unsere Wünsche anpassen. Sie haben sich für Drucke und mehr entschieden. Also ist es 12345, was in Ordnung ist. Klicken Sie hier, und erweitern Sie diese auf 20. Kopieren Sie diesen Text und gehen Sie zum Erntedatum. Dann entfernen Sie das ursprüngliche, fügen Sie das neue ein, verschieben Sie es direkt unten hier. Und Terry, wie es einfach in Ihren Standardzustand zurückgeht. Und wenn wir jetzt die Vorschau drücken und direkt hier springen, können Sie sehen, dass die Vorschau funktioniert wirklich gut mit all diesen. Was mir auffällt, ist, dass sich dieser Kreis ausdehnt, so dass dieser Kreis nach unten, Sie können es überprüfen. Wenn ich den Mauszeiger über und dann zurückfahre, können Sie sehen, dass es vom ursprünglichen Kreis hinunter zu diesem Kreis geht. Also, was wir tun können, ist, diesen Sprung innerhalb unseres Designs zu schließen, wieder, sprang auf all diese. Also erste Dinge, die ich zuerst tun werde, weil wir es angepasst haben, um zu schweben. Also gehe ich zurück, um für alle so zu schweben. Also, was ich hier tun werde, ist in diese erste springen, Elemente Maske, Kreis Control C. Dann gehen Sie zurück zu den ursprünglichen Zustandselementen, Moschee Kreissteuerung v. So kann ich es hier einfügen, gelöscht die alte wie diese. Und ich kann in Schulden sehen, meine Elemente hier sind gesenkt, die Fettleibigkeit bei 0. Also wird dieses Element auch 0 sein. Jetzt, wo wir das getan haben, können wir das für alle tun. Sehen wir uns also Quantenkartenelemente an, Mohr's Kreis Control C, Kleidung, alle gehen zurück zu den Standard-Zustandselementen, Moscheensteuerung V, und löschen Sie diesen alten Seroquel so. Also jetzt werden die Animationen schön funktionieren, während Sie sich bewegen. Lassen Sie uns schnell überprüfen und sehen, ob diese Elemente auf 0 sind, sind sie. Also werden wir nicht zu sehen, sie gut, bevor wir auf die höhere Staatsverschuldung bewegen ist. Also noch einmal, Elemente so genannte Kontrolle sehen, gehen Sie zurück zu den Standard-Zustandselementen, Moschee Kontrolle V, und wir haben es. Nun, da wir all diese abgedeckt haben, gehen wir zurück in den Standardzustand, den wir sind. Und lassen Sie uns eine Vorschau sehen und sehen, was wir bisher haben. Also achten Sie einfach auf den Kreis unten, Sie können sehen, wie viel schöner diese Animation jetzt veröffentlicht. Sie können mit der Position herumspielen, da sie sich sowohl für diesen Horrorstatus als auch für den Standardzustand in der gleichen Position befindet. So kannst du rumspielen und sehen, was du willst. Sehen Sie genau hier, Ich habe tatsächlich vergessen, in Position zu ändern, um mehr zu erfahren. Sie können sehen, wie es sich bewegt, wenn ich schwebe. Also gehen wir zurück zu diesem in unseren Hafenstaat. Und ändern wir den Text hier auf 20. Und das ist wirklich der langweilige Teil dieses ansprechenden Designs macht all diese Änderungen und stellt dann sicher, dass sie an all diesen Animationen arbeiten, wie sie es hier tun. Also funktioniert alles gut. Gehen wir einfach zum nächsten Abschnitt. Also noch einmal, weil wir nicht niederländisch in der Sektion, Höhe. Es ist immer noch so, wie es war. Sie können einfach sehen, dass es immer noch den gleichen Abstand zwischen all diesen verschiedenen Elementen enthält . Was ich hier tun werde, ist wirklich einfach. Also werde ich das Boot von diesen auswählen. Ich werde sie ins Netz stellen. Dann werde ich in meine Text-Position springen meine Texte oder genau hier. Und dann werde ich diese Scroll-Gruppe anpassen. Also werde ich es hier so anpassen. Und dann im Grunde, wenn wir eine Vorschau, verwende ich meine Maus, um nach links und rechts zu scrollen. Und Sie können sehen, wie das aussieht. Also im Grunde, das war's. Das ist wirklich ganz einfach. Und Sie können zum Beispiel nur ein wenig zeigen. Lassen Sie mich Ihnen das zeigen. Du kannst es nur ein bisschen zeigen. So zum Beispiel, so etwas. Und dann klicken Sie auf Vorschau, nur um den Leuten zu zeigen, dass, okay, es gibt hier etwas, das ich vielleicht klicken und scrollen kann und es wird immer noch diese Konsistenz zwischen all diesen Elementen beibehalten. Wir haben nur diese Pannen, zum Beispiel diese Nummer neun. Aber Sie können auch Schulden verlängern, zum Beispiel, um die gesamte zu decken, zum Beispiel zwei hier, so bis zum Rand des Brettes. Also offensichtlich müssen Sie mit all diesen erkunden, aber jetzt positioniert es uns zu hören. Deshalb müssen wir uns für mehr einstellen. Die andere Option besteht darin, einen Text hinzuzufügen, z. B. nach links und rechts zu blättern oder Pfeile hinzuzufügen oder was auch immer. Aber Sie können sehen, dass mit den Entwicklern, was sie gerne tun. Zum Beispiel kann ich hier den linken Pfeil hinzufügen, ich kann hier den rechten Pfeil hinzufügen. Und anstatt sie nach links und rechts zu scrollen, können sie auf diese Pfeile nach links und rechts klicken und im Grunde dasselbe Ergebnis erzielen. Gehen wir nun zum nächsten Abschnitt und Sie können sehen, wie schnell Sie mit diesen arbeiten können. Also im Grunde, was ich hier tun kann, ist einfach mein Bild anzupassen. Also lassen Sie uns zwei Form sehen. Vielleicht 52345 und Sie können sehen, dass es wirklich schön passt. Ich kann diesen Text noch mehr anpassen. Oder Beispiel zwei hier, damit ich es an meinem Gitter ausrichten kann. Alles funktioniert gut und ich kann meinen Text noch mehr anpassen. Ich kann hier klicken, um es zu erweitern. Und dann, was wir hier haben, also haben wir 40, können wir unseren Knopf nach unten auf 40 bewegen. Dies war nicht in einem Stapel oder ursprünglich. Also lasst uns das schnell ändern. Also dieser ist in einem Stapel, aber der Text ist es nicht. Also werde ich darauf klicken. Mal sehen, wir haben die Breite unseres Bildes angepasst. Wir können es nur ein bisschen organisieren. Habe ich. Und jetzt kann ich weitermachen und meine Texte neu organisieren. Also lasst uns mit diesem gehen. Ich kann hier klicken, und wie Sie sehen können, erweitert es automatisch myText, sorry meine Schaltfläche nach unten. Also, was ich tun werde, ist im Grunde diese beiden Elemente zu verwenden. Klicken Sie hier, um meine Texte in der Mitte zu positionieren, und passen Sie schließlich die Breite meiner Schaltfläche an. Ich kann auch von dem obigen kopieren, aber wie Sie sehen können, ist es extrem einfach. Stellen Sie einfach sicher, dass es drei Spalten breit ist und das ist es im Grunde. Also gehen wir zurück zum Hauptstaat. Klicken Sie auf unsere Vorschau, um zu sehen, ob das funktioniert. Und das tut es, Sie können sehen, wie das aussieht. Also im Grunde funktioniert alles so, wie es hier sollte. Lasst uns jetzt zu diesen übergehen. Und weil sie keine Horroreffekte auf sie haben, außer den Tasten, werden sie wirklich einfach zu justieren sein. Also, was ich tun werde, ist einfach die Rückwürfe solide C anzupassen . Wir können es bei sechs sein, also 246. Also am Ende dieser Zeile. Lassen Sie mich noch einmal nachsehen. Also 246. Ich kann das bewegen, um hier zu sein. Also um 30 Uhr zu sein, als wäre es da oben mit all diesen anderen Elementen. Und man muss manchmal etwas näher heranzoomen, nur um genauer zu sein. Aber Sie können sehen, dass wir mit unseren Rasterlinien aufgereiht sind. Schließlich werde ich dieses so anpassen, dass es auch sechs ist. Und du kannst es so lassen, oder ich mag dieses Bild wirklich. Also 368. Mal sehen. Ich muss nur mein Bild jetzt verschieben und eigentlich muss ich so etwas nicht erweitern. Das funktioniert. Und was wir tun können, ist unsere Texte anzupassen, weil Sie sehen , dass sich unser Text genau dort nach unten bewegt. Mal sehen, was wir tun können. Wir können all diese Dinge so lassen, wie sie sind, aber wir können zum Beispiel Bilder verkleinern. Lassen Sie uns unsere Texte von erweitern. Also mal sehen, es rappt. Willst du aufmachen? Mal sehen, vielleicht können wir es tatsächlich schneiden. Lass uns so sehen. Haben wir zu viel Platz dazwischen? Vielleicht tun wir das. Es gibt also im Grunde zwei Möglichkeiten. Also schaue ich mir genau hier an, wenn man den 57. Responsive Design: Lasst uns jetzt weitermachen und unsere nächste Größe erstellen. Und das zu tun, anstatt das zu tun, was ich zuerst getan habe. Anstatt also unten zu kopieren und zu einfügen, werde ich einfach ein D auf diesem ein steuern und es einfügen , weil wir diese Änderungen bereits an unserem Design vorgenommen haben. Also noch einmal, lasst uns loslegen und das ist Homepage responsive. Wir können es wie Dreck erschaffen, oder ich kann hier reinspringen. Und geben Sie diesen Namen ein. Ich kann das gleiche dafür tun, was für Entwickler später viel einfacher sein wird zu verstehen, welche davon es ist. Das erste, was zuerst ist 1024. Lass uns das machen. Also 1024. Und das nächste ist, ich möchte diese Werte verwenden. So 12305047 auf diesem. So zu gehen 123050. Und schließlich in diesem wird 47 sein. Also wieder 305047. So hat es verstanden. Endlich gehen wir jetzt weiter und machen das Gleiche, wie wir es vorher getan haben. Also werde ich das hierher bringen. Ich werde das hier ein bisschen näher bringen. Ich werde das vorerst aus dem Weg bringen. Ich werde meine Flaggen hierher schieben. Ich werde das hier positionieren und Ihnen sagen, wie es endlich ist, lassen Sie uns das wirklich schnell anpassen. Ich, die jetzt gehen wir voran und passen unsere Navigation. Also werde ich hier Papageienteppeln. Und mal sehen, all das funktioniert gut. Ich werde nur sicherstellen, dass ich zum Beispiel bei 40 bin, also 1234, aber ich bin bei 24. All diese anderen Gegenstände, also eins bis 212. Und schließlich wollen Sie, so können Sie schon sehen, wie das viel schneller ist als auf dem ersten, weil wir diese bereits an Ort und Stelle haben. Also, jetzt gehen wir weiter und gehen zu unserer Heldenabteilung, die uns offensichtlich viel zu viel Zeit in Anspruch nehmen wird. Also, was ich mit diesem machen werde, ist eigentlich anzupassen, wie mein Text aussieht. Also zuerst, ich werde hier klicken, stellen Sie sicher, dass es in der Mitte so ist. Und dann werde ich sicherstellen, dass es bei 48 ist, also ist es viel kleiner als es war. Dann werde ich es etwas anpassen, um sicherzustellen, dass es so in voller Breite geht. Ich werde dasselbe für meine anderen Texte tun. Stellen Sie sicher, dass es so ist. Stellen Sie sicher, dass es in der Mitte ist. Stellen Sie sicher, dass dies im Mittelpunkt steht. Und um das zu tun, wählen Sie einfach alle aus. Klicken Sie hier und stellen Sie sicher, dass alle in Dissenter sind. Next up Position, diese ganze Gruppe von Texten in die Mitte wie diese, zum Beispiel. Und was ich eigentlich tun werde, ist sicherzustellen, dass ich es nach oben schiebe. Also mal sehen, von hier, 123, vielleicht vier, mal sehen, wie das funktioniert. Und ich kann, sogar, weil das im Stapel ist, wie Sie sehen können, kann ich dann anpassen. Also, wenn ich hier klicke, wird es sie verschieben. Das will ich nicht. Ich will, dass es so ist. So kann ich einfach meinen Stack anpassen. Wenn ich also die Umschalttaste halte, wird es alles anpassen. Vielleicht können wir es bei 24 Scheibenkoffer haben. Mal sehen, wie das aussieht. Vorerst ist es in Ordnung. Lassen Sie uns jetzt unser Bild bewegen. Und zuerst, lassen Sie uns den Helden BG bewegen, um sich hier anzupassen. Also 1024 kann ich es auswählen und mein Bild sie in der Mitte positionieren. Und mal sehen, was ich hier tun kann. Also kann ich das zum Beispiel ein bisschen so nach oben bewegen. Vielleicht kann ich mein Bild noch ein bisschen mehr verkleinern. Vielleicht so. Und dann werde ich sicherstellen, dass es in der Mitte ist. Ist es. Und vielleicht kann ich es sogar ein wenig versetzt sagen. Irgendwann habe ich das nur so, dass es Knopf, dass dieser Knopf zwischen diesen Leuten geht. Vielleicht so etwas. Ich finde, es sieht gut aus. Ich werde das jetzt so belassen, wie es ist. Mal sehen, vielleicht kann ich es so etwas runter schieben. Ich mag, wie das aussieht. Und lasst uns mehr Breite tardy sein Von unserer Top-Navigation. Also lasst uns jetzt mit Heldenelementen umgehen. Dasselbe, positionierte ihn in der Mitte. Und jetzt kann ich diese einfach gut einstellen, damit ich das in diesem Kreis positionieren kann. Ich mag nicht, wie das aussieht. Vielleicht kann ich sogar zu Orten wechseln. Vielleicht kann ich das so positionieren, dass es hier ist. Manchmal kann Schmutz sein, ich kann meine Linie hier setzen oder ich kann sie ein wenig drehen. Vielleicht löscht und positioniert meinen Kreis irgendwo hier. Jetzt bewegen wir unsere Form. Also werde ich es hier positionieren. Und jetzt, da wir keine Anweisungen haben, ist es wirklich egal. Sie können sogar voran gehen und es erweitern, wenn Sie wollen. Aber ich werde es gleich dort lassen. Endlich, für unsere Moschee, benutzen wir den Helden BG, beschneiden. Also 10-24, und dann benutzen Sie unseren Heldenkreis. So wie das. Mal sehen, wo wir sind. Also ich mag keine Festplatte sieht so aus, dass ich es versehentlich schon vor positioniert. Also lassen Sie uns hier sehen RBG jetzt ist es in Ordnung hier ein Kreis. wir sicher, dass es tot in der Mitte ist, tot liegen. Und Sie können die eingekreiste auch ein wenig nach unten positionieren, wenn Sie möchten. Nur so zum Beispiel, es geht von der Mitte Ihres Knopfes oder es geht irgendwo hier herum. Ich mag, wie das aussieht. Und weil es in einer Moschee ist, wird es genau dort schneiden. Also wird es uns in keiner Weise ablenken. Ich mag, wie das aussieht. Also lasst uns jetzt zu diesem übergehen. Ich werde das immer noch in einem Zentrum wie diesem positionieren. Ich werde das bewegen, um so zu sein. Und jetzt müssen wir tun, tun, wir müssen das gleiche tun, was wir zuvor getan haben? einmal, wie Sie sehen können, haben wir den gleichen Abstand wie zuvor. Wir müssen nur hineinspringen und jetzt an vier Spalten breite Szene anpassen , wie wir es vorher mit diesem gemacht haben. Also lasst uns das machen. Und ich werde hier nicht wirklich etwas tun. Ich werde das nur so positionieren, dass es in einer Zwei-Zeile wie dieser ist. Und vielleicht kann ich die Größe dieses hier reduzieren. Mal sehen. Also gehen wir mit, lass uns so etwas sehen. Sie können ein maßgeschneidertes Konto erstellen. Und hier steht Erfahren Sie mehr. Also im Grunde ist es so etwas wie unser Blogpost oder so etwas. Lasst uns diese nicht anpassen, damit ich sichergehe, dass das bei 30 oder 40 liegt . So 1234. Mal sehen, wo das ist. Also 40, Ich mag, wie das aussieht wie n. Wieder einmal, was ich hier tun werde, ist im Grunde das gleiche tun, wie ich es vorher getan habe. Also werde ich meine Elemente verwenden. Mal sehen, was wir hier bis jetzt tun können. Immobilienmischung Schulden, wir sind bei vier genau hier. Also, was ich tun werde, ist tatsächlich diesen und diesen Text zu benutzen und ich werde alles andere gleich lassen. Gehen wir also zurück zum Standardzustand. Also das und dieses Control C, und gehen Sie in den Horrorzustand, finden Sie sie Kontrolle V, und entfernen Sie dann einfach die alten von hier so. Und schließlich werde ich dafür sorgen, dass ich bei 40 bin. Also, wenn ich den Hummer mache, ist er immer noch so drinnen. Schließlich, was ich mit meinem Kreis tun werde, ist ein wenig angepasst. Also werde ich sicherstellen, dass es mal sehen, zweihundert, zweihundert. Dann werde ich es auf 20 positionieren und so etwas vielleicht. Und drücken Sie Control C, damit ich es kopieren kann. Dann gehe zurück zu meinem Standardzustand, springe hinein, öffne die Elemente. Also, wo wir sind, Elemente Moschee und ging zu kontrollieren V und entfernen Sie meinen alten Kreis noch einmal, weil diese Elemente bei 0 sind, werden Sie nicht in der Lage, sie zu sehen. Und bevor wir die anderen machen, lassen Sie es uns testen und sehen, wie es aussieht. Wie Sie sehen können, sieht das wirklich schön aus. Das funktioniert immer noch gut. Das sieht wirklich schön aus. Das funktioniert. Wenn ich also mit dem Mauszeiger und nach unten fahre, können Sie sehen, dass Learn More in genau der gleichen Position bleibt. Diese Elemente sind die gleichen. Und wir können sogar mit der Position dieser drei Elemente herumspielen. Aber wie er sagte, ich werde sie einfach so lassen, wie sie sind. Also lassen Sie uns jetzt gehen, um diese sind diejenigen. Klicken wir also auf Diskette ausblenden. Das ist mehr hier. Und mal sehen, wo wir sind. Also sind wir an der Linie tatsächlich erreicht Great. Also lassen Sie uns die Schulden auf vier Spalten so anpassen. Wieder einmal werden wir drei Linien von Enten haben, was großartig ist, weil es hier endet. Ich werde es schneiden. Stellen Sie sicher, dass es die Höhe ist. Und mal sehen. Was ich hier tun kann. Zuallererst, ist die Position dieses. Wenn ich hier mitnehme, können Sie sehen, dass wir bei 40 sind. Also lassen Sie uns das gleiche für diese einmal tun, die anti 30 auf die Gabel waren. Und lassen Sie uns dasselbe für unsere Texte tun. Also lass uns 234 sehen. Da haben wir es. Was ich jetzt tun werde, ist im Grunde dasselbe mit diesem, aber bevor ich es tue, werde ich hier reinspringen. Mal sehen, wo wir sind. Also lasst uns in den Horrorzustand gehen. Passen Sie das 1234 so an. Ich werde dann auf diese Elemente gehen. Also positionieren Sie das hier, vielleicht dieses hier, das hier. Mal sehen. Ich werde das nach unten positionieren. Und es kann dasselbe für dieses tun, weil es viel schneller ist als zuvor, oder wirklich wissen, was ich tun wollte. Also 1234, und ich werde das auch auf 40 bewegen. Also, das ist es im Grunde. Und das Letzte, was ich tun möchte, ist hier in diesem Kreis zu springen es hier zu positionieren. Wenn du dich also an 12x erinnerst, entferne ich meinen alten Kreis, drücke Control C und gehe zurück in meinen Standardzustand. Gehen Sie zurück zu meinen Elementen Moschee Control V, Ich entferne die alte. Und jetzt lassen Sie uns das alles schließen. Testen wir es. Sehen Sie, wie es aussieht. Also sind wir beim Original. Alles sieht gut aus. Hier sieht alles so aus, wie es sollte. Das kann schnell überprüfen und den Abstand auf der rechten Seite für diesen Kreis. Sieht gut aus. Diese Animation funktioniert wirklich gut. Also gefällt mir wirklich, wie sich das herausstellt und Sie können sehen, dass es diesmal viel schneller ist, weil wir bereits einige dieser Elemente vorhanden haben. Wir wissen bereits einige Dinge, die wir tun wollen. Zum Beispiel, hier werden wir es um drei schneiden. So können Sie sehen, dass Sie die Möglichkeit haben, Ihren Warenkorb mehr auf squalor dat mal sehen zu personalisieren , Ich kann dies so machen, oder ich kann diese sogar so positionieren. So präzise Debitkarten, vielleicht ist es sogar besser als es war. Mal sehen. Gehen wir zu 44. Bewegen Sie das auch auf 40. So, und im Grunde ist es es. Lassen Sie sich nun voran und passen Sie sich an Horace Zustand sowie von Winter Position diese hier. Ich werde diese Elemente so verschieben. Bewegen Sie das nach oben und ich werde das hier verschieben, zum Beispiel hier. Ich werde mich anpassen und nicht mögen. Also werde ich uns tatsächlich ein bisschen dorthin bringen. Und dann werde ich sicherstellen, dass ich bei 40 bin. So 1234. Was wir hier hatten, lassen Sie mich zurückgehen und überprüfen, weil ich den Standardzustand vergessen habe. Lassen Sie mich tatsächlich kopieren meinen Text ist viel schneller. Hover Control V da, wir haben es. Geh zurück nach hier, also 404040 überall. Und schließlich, lasst uns dasselbe für diesen Kreis tun. Also werde ich hier reinspringen und es geben. Mal sehen, von eigentlich, nein, gehen wir zurück nach hier. Elemente a, Maske, Kreis Kontrolle C. Ich werde zu diesem gehen. Hier steuern Sie V. Und halten Sie einfach die Shift und die rechte Pfeiltaste zur Positionierung an Ort und Stelle. Ich werde das alte löschen, stellt sicher, dass ich aufgereiht bin und dann 22 die linke Kontrolle C. Dann kann ich zurück zu meinem Standardzustand gehen, verengen, verhalten, öffnen Sie es, Elemente Moschee oder ziehen V, um es an Ort und Stelle einfügen. Entfernen Sie das alte. Und Terry hatte, endlich, lassen Sie uns alle drei Desktop. Mal sehen, wie sie alle funktionieren. Also, wenn ich hier scrolle, können Sie sehen, dass das wirklich gut funktioniert. Wenn Sie denken, dass dieser Text an dieser Stelle ein wenig zu groß wird, dann können Sie ihn reduzieren. Aber ich denke, wir werden es in der nächsten Stufe reduzieren , wenn wir tatsächlich auf Tablet-Größe zu bekommen. Aber ich denke, jetzt funktioniert es gut. Schauen wir es uns an. All das sieht wirklich schön aus. Und denken Sie daran, weil wir gehen, um auf die Tablet-Stufen zu bewegen, wir werden nicht diese Animation später haben, was wird uns eine Menge Zeit sparen, weil Sie nicht mit der Maus in Tabletten Datum schweben können, weil Sie nicht verwenden Sie die Maus auf einem Tablet, verwenden Sie Ihren Finger. Also werden wir diese als Hap-Punkte haben. Also alles richtig, du siehst hier, wird eigentlich ein Anschlagpunkt sein. Also werden wir einfach, wie du sie jetzt siehst, werden sie so bleiben. So können Sie einfach auf ihre mehr oder auf diese gesamte Karte tippen und dann weiter, um mehr zu erfahren. Es ist nicht so schnell zu bearbeiten. Entschuldigung, wieder einmal, bei Texten positioniert sind genau hier. Verschieben Sie diesen Text hier. Verschieben Sie den gesamten Abschnitt hier. Und dann können wir es schneiden, zum Beispiel, um zu hören, was den gesamten Hintergrund bewegt hat. Jetzt, wenn ich hier klicke, geh den ganzen Weg runter, getestet. Sie können sehen, wie schnell das war. So können wir nun zum nächsten Abschnitt übergehen. Denn wenn man diese Dinge macht, arbeitet man ständig mit den gleichen Elementen. Also machen Sie ganz gut Ed, um all diese verschiedenen Elemente zu lesen. Also, was wir hier tun können, ist eigentlich etwas anderes zu tun. Vielleicht können wir in diesem Bild oben machen, aber ich werde das in diesem Stadium nicht tun. Ich werde das in einem späteren Stadium tun, wenn wir tatsächlich in den nächsten Zustand kommen. Vorerst werde ich es jetzt so lassen, wie es ist. Also mal sehen, vielleicht kann ich es wieder um fünf Uhr haben. Also 245, lassen Sie uns die Größe unseres Bildes so reduzieren. Also 245, ich denke, es funktioniert gut, vielleicht kann jemand es nur ein wenig schieben. Mal sehen. Vielleicht kann ich es nur ein bisschen zu so etwas positionieren. Ich denke, das funktioniert gut. Ich werde dann einfach meinen Text verschieben. Aus irgendeinem Grund. Ich muss es so auswählen. Es wird es nicht erkennen. Mal sehen, wo wir sind und wo wir sind. Und was ich hier tun kann, ist einfach angekommen mein Text um so kann ich basieren und mal sehen, Ich kann auf diesen Text erweitert klicken. Und weil wir in sind, mal sehen, hier sind wir in einem Stapel, alles kostet schön. Das Einzige, was Kerl und auf wirklich mag, ist dieser Text. Wir werden also den Zeilenabstand auf zum Beispiel 74, diesen Titel erhöhen . Ja, das sieht viel besser aus. Wählen Sie nun beide aus. Klicken Sie hier. Aber nein, ich will nicht, dass es meinen Text bewegt. Ich wollte das nur bewegen. Also, jetzt wurde ich die Belüftungsarbeiten getestet, wie es sollte. Sie können dieses Bild auch erweitern, wenn Sie möchten, um sechs Spalten aufzunehmen. So, und jetzt einfach einen Text zurück nach hier verschoben. Stellen Sie sicher, dass Sie 30 sind. Also zoomen Sie ein wenig hinein, wenn es anfängt, mit Ihnen herumzuspielen. Also genau hier. Also, wenn du so bist, wie das aussieht, kannst du es dort lassen. Wenn Sie dies nicht tun, können Sie von Molkerei bewegen kann auch den Zeilenabstand für diese erhöhen. Aber nur um der Zeit willen werde ich es so haben, weil ich denke, es funktioniert gut genug. Jetzt lassen Sie uns die beiden hierher bringen. Wieder mal. Stellen Sie sicher, dass es hier 6246 ist. Stellen Sie sicher, dass Sie dasselbe für diese 1s 246 tun. Und im Grunde müssen Sie nichts tun, aber R wird sie einfach nach hier verschieben. Also 12, stellen Sie sicher, dass ich 20 bin. So lassen Sie uns sehen, wo wir mit dem Knopf sind. Wir sind immer noch bei 40, so können wir es ihre Bilder gut aussehen lassen, so dass wir jetzt zum nächsten übergehen können. Offensichtlich werden wir diese in den nächsten Phasen umwickeln und wir werden sie tatsächlich so positionieren, dass sie breiter sind, aber Sie werden das ein bisschen später sehen. Schließlich lasst uns mit diesen herumspielen, so dass ich hier klicken kann. Und noch einmal müssen wir sie vier Säulen breit machen. So 1234. Und Sie können sehen, wie intelligent sie sich an unser Layout anpassen. Mal sehen, dass wir bei 30 sind, aber ich muss meinen Text innen anpassen. Also lassen Sie uns eine Routine sehen JETZT. Verschieben Sie alles nach hier. Also 20. Und ich werde dieses r offensichtlich nach unten bewegen, um mir ein bisschen mehr Platz zu geben. Mal sehen, was ich hier für Exzellenz tun kann und bereit für Excellence Award in, mal sehen, vielleicht für Banking Excellence Award für 2021. Wie das beschichtet. Und mal sehen, wir sind bei 20, was in Ordnung ist. Wieder einmal werden wir hier drei Textzeilen haben. Was ich vor allem tun werde, ist, wählen Sie all das, außer für die Erfahren Sie mehr offensichtlich, Kontrolle, sehen, gehen Sie zurück zu meinem Horror, Staat. Kontrolle v. Ich werde alles außer für die lernen mehr kontrolliert, gelöscht und ihre vererbbare Position löschen . Und hier werde ich sicherstellen, dass es eine 20 ist, was es ist, und es ist in Ordnung. Ich kann einfach zum nächsten gehen. Also kann ich hierher gehen. Wir sind bei 30, was in Ordnung ist. Schauen wir es uns an. Es ist auf unserem Gitter ausgerichtet, wie Sie auf beiden Seiten sehen können. Also lasst uns jetzt daran arbeiten. Also sind wir bei vier, so. Ich doppelklicken, um mein Bild nur ein wenig anzupassen. Positionieren Sie diese beiden Ebenen booleschen Mittelpunkt. Also, das ist in Ordnung, das ist in Ordnung. Ich werde das einfach durch unsere Initiative anpassen. Also einfach dieses letzte Wort hier verwendet. Wir sind bei 20, was in Ordnung ist. Also, was ich tun werde, ist noch einmal, wählen Sie alles mit Ausnahme der Informationen. Gehe zurück in den Horace-Zustand und du kannst nicht sehen, was ich immer darüber rede, wie viel schneller das ist, wenn du bereits diese Elemente hast, du musst einfach weitermachen und sie entfernen. Und wo du einen Justin brauchst, wo du brauchst und alles funktioniert wie es sollte. Also 20, alles ist in Ordnung. Sie können diese 20 auch nach oben positionieren, wenn Sie möchten. Vielleicht können wir das tun, weil wir hier niedrig sind und wir hier wirklich hoch sind. Also innerhalb unseres Standardstatus, und wir können einfach hier springen, 12. Also sind wir jetzt um 20 Uhr hier. Mal sehen. Wir sind in Harvard. Das ist in Ordnung. Ich kann auf 1-2 doppelklicken, einschließen, zu meinem Standardzustand zurückkehren 12. Da wir hier in einem Standardzustand sind, können wir zum Hover 1-2 gehen, und das ist es im Grunde. Wechseln Sie zur Standardeinstellung. Sie können sehen, wie es aussieht und wir werden es ein bisschen später testen. Lasst uns jetzt schnell ein drittes fertig. Ich will nur die Dinge hier überprüfen. Ja, das ist in Ordnung. Sie können diesen Text auch positionieren und sehen, was am besten für Ihr Layout funktioniert. Aber ich denke, das wird vorerst gut funktionieren. Was wollen wir sehen. Ist das richtig? Also lassen Sie uns 294 und ihr Gewicht sehen. Etwas ist nicht ganz richtig oder es in diesem. Also mal sehen. Ja, hier ist es nicht breit genug. Also werde ich es hier erweitern. Ich werde auch mein Image erweitern, um zu hören. Und ich denke, es wird gut. Und jetzt lasst uns das testen. Stellen wir sicher, dass wir uns im Standardzustand befinden, was wir sind, was wir auch hier sind. Also mal sehen. Die Breite beträgt immer noch 90, das Gewicht beträgt 289. Also neun. Jetzt ist es in Ordnung. Mal sehen, ob wir 30 sind, sind wir hier. Crf, wir sind 30 hier, wer wir sind, was in Ordnung ist. Und mal sehen, das sind auch 90. Also jetzt sollte alles funktionieren. Ja, nein, alles ist in Ordnung. Also müssen Sie offensichtlich voran gehen und all diese Dinge überprüfen. Also, was ich tun werde, ist zurück in den Horrorzustand für diese Nummer zwei zu gehen und dies in zwei neun Jahren zu ändern, mein Bild auf 29 zu ändern, so wie dieses. Und jetzt sollte das zwischen den Staaten gut sein. Du, alles funktioniert, wie es sollte. Lasst uns endlich voran gehen und diesen letzten ändern. ich mich an unserem Gitter ausrichte, kann ich es hier lassen. Also, was ich tun kann, ist eigentlich, mal sehen, wo wir sind. Also Yar 24 von hier. Also kann ich es von hier aus auf 20 ausrichten. Und dann schauen wir mal. Vielleicht kann ich die Position dieses Textes Googler kopieren und einfügen, um dies zu hören und einzufügen. Also mal sehen. Ich werde einfach den Text hier verwenden. Ich werde sicherstellen, dass es hier ist, nur damit ich weiß, wo die Position ist. Also werde ich in diesem Text gelöscht kopieren. Geh zurück hierher mit Sitz in Milchherde. Und was ich als Nächstes tun möchte, ist noch einmal, vergewissern Sie sich, dass ich drei bin. Wenn Sie in New York und der gnomischen Umgebung arbeiten wollen. Sehen wir uns meine Route an und machen das einige Zeit. Ja. Ja. Also 20 hier, schauen wir es uns an. Ja, das ist in Ordnung. Und noch einmal, ich werde einfach alles kopieren und einfügen, außer dem Learn More. Spring rein von hier. Kopieren, Einfügen, löschen Sie alles außer dem oben positionierten „Weitere Informationen“ oder „Weitere Informationen“. Und ich will nur sicherstellen, dass es 90, das ist in Ordnung. Auf 90, das ist in Ordnung. Also ist alles in Ordnung mit diesem hier. Und mal sehen. Ich bin hier auf Howard und wollte im Standardzustand sein. Auf Standardstatus. Ich bin hier auf Standardzustand, was feine Kinderprämie ist. Denn wieder einmal möchte ich nur sicherstellen, dass alles so funktioniert, wie es sollte. Ich mag dieses Layout wirklich nicht zu sehr. Also vielleicht kann ich sogar die Größe dieses Textes reduzieren, so dass es 24 ist, vielleicht sollte es ein Teenager sein. Es braucht also etwas weniger Platz hier. Das liegt also wirklich an Ihnen und wie Sie sich für all diese anpassen möchten. Und das ist in Ordnung. Weil man sieht, wie es wirklich gut funktioniert. Also funktioniert alles so, wie es sollte. Vielleicht können wir sogar ein bisschen. Und nur dieses Bild, so etwas. Vielleicht, vielleicht ein bisschen weniger zu hören. Kontrolle C geht zum Schweben, bis ich diesen gelesen habe. Und ich denke, das funktioniert viel besser. Also Standardzustand Horace Zustand, alles funktioniert, wie es sollte. Oder es wird wie Houghton entfernte Layout sich herausstellt. Gehen wir nun zum nächsten Abschnitt über. Und im nächsten Abschnitt werden wir ein wenig nach unten scrollen. Weil wir mit unserer Infrastruktur hier sind. Und was es tun kann, ist einfach dies zu tun, um alle diese Elemente anzupassen und dann doppelklicken und sie nur ein wenig wie Zelle neu organisiert. Und um das hier zu positionieren, und ich kann sicherstellen, dass das hier irgendwo ist. Es kann sich nicht in der Mitte im Zustand D befinden, aber es kann zu einem späteren Zeitpunkt sein. Entschuldigung. Tut mir leid. So kann es zu einem späteren Zeitpunkt sein, aber es kann nicht in diesem Stadium sein. So können wir zu einem späteren Zeitpunkt vielleicht den Text entfernen und einfach nur die Symbole haben, die unsere, unser Layout viel besser zeigen wird , als es jetzt ist. Was ich als Nächstes tun werde, ist, diese anzupassen. Also, wenn Sie sehen, haben wir 246. Vielleicht können wir also drei inline und dann drei in Zeile unten haben , damit wir das anpassen können. Also, was ich tun kann, ist auf mein rpart doppelklicken und es den ganzen Weg nach unten erweitern. Dann kann ich hier klicken, meine Fußzeile BG erweitern. Genau so hat es mir ein bisschen mehr Platz zum Spielen gibt. Ich werde das hier ausrichten. Ich benutze immer noch die gleiche Höhe von hier bis zum Infostreifen, also wird es sich nicht ändern. Aber ich werde nur einige davon reorganisieren. Also werde ich das hier positionieren und sicherstellen, dass es in einem Zentroid weg ist. Und ich werde Konten verwenden, Rasen Karten in der gleichen Linie, investieren Digital, andere Links auf der anderen Linie. So können wir sehen, wo wir genau hier sind wir bei 100, also können wir diese auch auf 100 positionieren. So wie das. So gibt es uns genug Platz. Es ist nicht zu überladen, weil wir bei 12 sind. Also haben wir 12-Säulen-Gitter. Wir können diese positionieren, wie wir es bei diesen gemacht haben. Jede dieser Textgruppen wird also vier Spalten aufnehmen. Es muss nicht, aber es wird immer noch vier Spalten nehmen, nur so dass es uns genug Platz gibt, um zu züchten und es braucht genug Platz, um diesen Text ein wenig besser zu lesen. Und das ist es im Grunde. Ich werde dafür sorgen, dass das auch 100 ist. Lass uns 100 sehen. Und ich werde sehen, was ich hier tun kann. So können wir zum Beispiel das so positionieren, ich brauche es nicht 100. Mal sehen, vielleicht kann es 40 sein. Also, wo ist meine Mitte, 0.123. Da ist es. Und ich bewege einfach meine Maus, um die Höhe dieser Textposition hier und Terry Gewohnheiten anzupassen . Wie Sie sehen können, sieht die Fußzeile immer noch sauber aus, wie sie hier ist. Es ist immer noch lesbar, es ist immer noch atmungsaktiv, hat immer noch genügend Platz. Aber jetzt positionieren wir es nur, abbringen. Man kann sich nur auf einem kleineren Bildschirm vorstellen, man kann etwas anderes machen. Sie können entweder nach links und rechts scrollen. Sie können diese in zwei Blöcken positionieren. So werden Konten und Rasenflächen nebeneinander stehen. Karten und Investoren gehen nach unten und b1 nebeneinander. Schließlich gehen digitale und andere Links nach unten oder Sie können die andere Route gehen. Sie können diese als separate Schrittpunkte erstellen, und Sie können dann erweitern und zeigen, dass und sehen, wie das aussehen wird. Wir werden tatsächlich mit einigen dieser Layouts zu erkunden sind ein wenig später, wenn wir tatsächlich auf die Tablet-und Schriftgrößen zu bekommen. Aber im Moment denke ich, das funktioniert gut und ich denke, es sieht gut aus. Lassen Sie uns schnell ein weiteres Mal überprüfen und garantieren sogar sprechen. Also hier sind wir beim Login. Alles funktioniert gut. Und denken Sie daran, dass wir immer noch auf einem Desktop sind, nur eine wirklich kleine Tischsäge vielleicht über dem kleinen Laptop wie so etwas wie 12 Zoll oder sogar weniger. So haben wir immer noch die Möglichkeit, eine Maus zu verwenden. Also funktioniert alles so, wie es sollte. Alles ist schön und glatt. Wir können immer noch nach links und rechts scrollen. Noch einmal können Sie die Pfeile verwenden, über die ich gesprochen habe. Und Sie können zum Beispiel in diesem Fall sie irgendwo hier und hier positionieren, sagen wir, so dass sie wirklich klein sind. Oder Sie können eine Beschreibung schreiben, zum Beispiel klicken Sie links und rechts oder scrollen Sie nach links und rechts positioniert bei der Beschreibung hier. Für diesen hier mag ich diesen Text immer noch nicht. Vielleicht können Sie in Ihrem Fall vielleicht trainieren und die Größe dieses Textes reduzieren, nur so dass Sie ein wenig anderes Ergebnis haben können , das ich getan habe und sehen, wie das funktioniert. Es wird also weniger vertikalen Raum in Anspruch nehmen. Dann in meinem Fall, hier haben wir immer noch diese noch aussehende Rate ohne zu viel Veränderung. Neueste Nachrichten oder fehlt, wie dies sich herausstellt, so dass das in Ordnung ist. Endlich, neue Bank. So sieht alles gut aus und jetzt können Sie den Ordner sehen. Es gibt uns viel mehr Atemraum und alles sieht gut und lesbar aus. Das war's also für dieses Video. Ich werde Sie im nächsten Video sehen. Wir werden mittlere Geräte oder Tablets anpacken. Und wir werden viele verschiedene Änderungen vornehmen, weil wir wieder von Clique-basierten Bildschirmen gehen. So große, große Desktops, kleinere Desktops und schließlich viel langsamer, kleinere Desktops, wie zum Beispiel Laptops und so weiter. Und dann bewegen wir uns auf ein Tablet-Geräte und bilden Geräte, die klopfbare Geräte sind, wo Sie nicht über Ihre Maus, Sie sind nur mit Ihren Finger, um zu navigieren. Und da liegt der Unterschied. Und deshalb müssen wir uns an all diese unterschiedlichen Veränderungen anpassen. Also sehe ich dich dort. 58. Responsive Design: Lassen Sie uns jetzt weitermachen und unsere Tablet-Größe gestalten. Und um das gleiche wie immer zu tun, werde ich die Kontrolle treffen. D geht noch einmal, wir haben das schon entworfen. Und Sie können sehen, dass ein Ort ID genau hier, ich werde einfach mehr Witz und unten sind genau hier. Also 70 Szene, wie bei all diesen anderen. Obwohl klicken Sie rechts hier, um C zu steuern, So kann ich es lokal Kiste hier kopieren. Ich werde übermäßige Stokes gute Kontrolle VK entfernen, um es zu beast. Und jetzt können wir damit beginnen, unsere Größen an diese anzupassen. So können Sie 76 sehen, acht ist die Breite unseres arborealen Bodens. Es hat sich bei den ersten 76 acht geändert. Und jetzt können Sie hier sehen, dass wir acht Spalten haben. Also werde ich das zuerst ändern. Also lasst uns in mich springen, zwei Säulen holen. Und Sie können sehen, dass wir es zu 296042 durchgekommen sind, Feststoffe ändern sich in der Schulden. Also noch ein Mal. Sehen wir uns 8296042296042 an. Sehen wir uns 602942 an. Das ist drahtloser Checker ein Motto. Also 8296042. Deswegen. Jetzt gehen wir weiter und fangen an, DCE anzupassen. Die ersten Dinge für uns, denn jetzt sind wir auf einem Tablet, werden wir angefangen, einige dieser Elemente anzupassen und einige Klopfpunkte zu machen. Also zuerst werde ich dieses eine sehr schnell anpassen. Wie Dad, werde ich in die Position meiner Flaggen springen. Und dann, was ich tun werde, ist Doppelklick auf Einsicht und löschen MyText, weil ich nur mein Symbol brauche. Ich kann dann die Gruppierung von Bits aufheben. Ich kann dasselbe für meinen Standort tun. Ich kann meinen Standort entfernen, und ich kann einfach ganz nah zoomen, mein Symbol hier anpassen. Ich kann hier geschäftlich positionieren, nur irgendwie OK, Sie haben ein bisschen mehr Platz. Und ich kann mein Symbol hier positionieren. Sie können auch mit diesen Elementen herumspielen. Zum Beispiel, Position zur Telefonzuweisung direkt hier. Aber nur um der Konsistenz willen, lassen Sie es uns einfach dort positionieren, wo es war. Jetzt gehen wir weiter. Und ich werde das hier verlegen. Und was ich für das Hauptnav tatsächlich tun werde , ist, dass ich die Gruppierung dieser Komponente aufheben werde. Und ein alter Weg. Es ist hier. Ja. Es war, dass du ein Hockey bist, was mir verwirrt ist. Was ich also tun werde, ist die Gruppierung als Komponente aufzuheben. Also werden wir nicht all diese haben, weil wir es als separate Komponente erstellen werden. Also gehe ich mit der rechten Maustaste auf Komponente aufheben. Aber bevor ich es tue, lassen Sie es uns zuerst reinziehen. Es ist also nicht mit unserem Abstand herumzulaufen. Also, jetzt kann ich es aufheben, damit es nicht außerhalb unseres Flughafens geht. Jetzt, wo wir es haben, werde ich es zu einem eintönigen machen. Also rufen Sie es mir jetzt noch einmal an, Sie können es ein Tablet nennen oder wie Sie wollen. So seinen Kern, zum Beispiel, tippen Sie Haupt nav Tab, so dass wir wissen , dass es für die Tabletten und es ist für die mobilen Geräte. Also, was ich in diesem hier tun werde, ist eigentlich zwei Zustände zu schaffen. Einer, der stabil ist, N1, was nicht ist. Ich werde meinen Helden verstecken. Gerade sortiert, können wir uns gut auf diesen konzentrieren. Was ich tun werde, ist im Grunde zwei Zustände zu schaffen. Und ich werde mit dem ersten Zustand beginnen, der dieser Standardzustand ist. Also werde ich dieses Navi BG duplizieren, und ich werde meinen Hintergrund so verstecken. Und dann werde ich, zum Beispiel, verstecken diese statt, zeigte diese. So zeigte nur diesen Hintergrund einen, erweitert den ganzen Weg nach unten, nur damit ich mein Original haben kann, damit ich sehen kann wo es gehen soll und was sind die Dimensionen und so weiter. Also lassen Sie mich schnell verstecken, damit ich diese und untere ein wenig mehr erweitern werde. Und was ich tun werde, ist meine Navigationsartikel zu benutzen, sie direkt hier zu positionieren. Und ich kann sie ein wenig organisieren, damit ich sie in einen Stapel legen kann. Ich kann so klicken. Sie können sehen, dass sie gut organisiert sind. Ich kann meinen ganzen Text auswählen und sicherstellen, dass er so links ausgerichtet ist. Stellen Sie sicher, dass es so ausgerichtet ist. Und ich kann nur auf diesen klicken und ausdehnen. Oder ich kann Shift und Ausdehnung bei all diesen halten. Also zum Beispiel, lassen Sie es bei 40 sein, nur sortiert. Wir haben nur ein bisschen mehr Platz für unsere Anschlagpunkte. Sie können sich also vorstellen, dass wir in nur einer Sekunde ein Symbol einschließen werden. Wir werden es hier positionieren. Was Sie auch tun können, ist, dass Sie sie in Ordnung oder in Linie positionieren können. Also mal sehen, wir haben 24 oder fünf. Vielleicht kannst du einen nebeneinander stellen. Also x3 in dieser Zeile, zu dieser Zeile. Aber nur um der Konsistenz willen und um des einfachsten willen, werde ich es einfach positionieren und es so belassen. Also mal sehen, wir sind bei 36, ich werde es bei 40 positionieren. Mal sehen. Ja, ich denke, das wird gut aussehen. Also lass uns 1234 sehen. Und ich werde meinen Knopf benutzen. Aber bevor ich es tue, werde ich Kontrolle D bei diesem hier treffen. Nur um einen Kaffee zu trinken, werde ich diese Kopierposition benutzen und den ganzen Weg nach unten so stellen Sie sicher, dass es an meinen Texten ausgerichtet ist. Mal sehen, wo mein Text ist. Es ist um 20 Uhr. Also Position 12 zu sein, so. Und mal sehen, vielleicht können wir 40 sein, wie all diese anderen Gegenstände. Und schließlich werde ich das hier erweitern und einfach die Höhe auf 40 erhöhen. Also, wenn ich meinen Rechner benutze, was einfach der einfachste Weg ist, dies zu tun und es von diesem Bildschirm zurück zu bringen, so dass Sie sehen können, dass die Höhe derzeit 539 ist. So 539, Sie können 40 hinzufügen, weil wir es so nach unten verschieben möchten. Seine 579. Das ist offensichtlich wirklich einfache Mathematik, aber nur so möchte ich Ihnen nur zeigen, dass Sie diese grundlegenden Werkzeuge wie Berechnen von Bereichen verwenden können , um Ihre Chancen zu verbessern, ein wenig genauer zu sein und Ihre Geschwindigkeit nur ein wenig. einmal ist 579 unser Ziel für die Höhe wie diese. Und weil es den Plattenabstand gehalten hat, also 50 genau hier. Und mal sehen, was es hier ist. Also sind wir bei 50, gleich. Gehen wir zu diesem Standardwert. Wir sind bei 50, und wenn wir hier angekommen sind, sind wir bei 50 noch sortieren wir den gleichen Abstand verlassen. Wir verwenden dieselben Zahlen, um diese Ziele zu erreichen. Also, was ich im Grunde tun werde ist Mischschulden. Ich habe meinen Login-Button , der diese nicht gruppiert ist. Also wähle ich diese eine Aufhebung der Gruppierung aus, weil denken Sie daran, wir keine Hover-Effekte haben. Also werde ich nur sicherstellen, dass es ein Ordner und keine tatsächliche Schaltfläche mit Hover ist, denn wieder haben wir keinen Hover. Dies ist die Tablet-Version. Als nächstes werde ich die Gruppierung auch aufheben, weil ich nur mein Menü-Symbol hier erstellen möchte. Also, um das zu tun, werde ich einfach diese Höhe verwenden. Also werde ich das löschen. Hier ist es. Control D. Ich werde diese Menüzeile zum Beispiel aufrufen. Und mal sehen, denn das ist 60, vielleicht an zweiter Stelle, um zehn zu sein. Lassen Sie uns das für eine Sekunde verstecken. Mal sehen, wie das aussieht. Ich mag es nicht. Ich denke, es ist viel zu groß. Vielleicht können wir es fünf machen. Ich denke, das ist viel besser. Auch für die Breite kann ich positionieren. Es wird hier sein wie diese Derek-Gewohnheit. Und jetzt kann ich meinen Knopf zurückbringen, zum Beispiel auf meiner Tastatur drücken, um die Fettleibigkeit auf 40 oder drei zu senken, nur damit ich den Abstand für die Höhe sehen kann, wie das funktioniert. Also lassen Sie mich Kontrolle D drücken, um meine Zeilenposition hier mod zehn zu duplizieren, Control D positionieren Sie es hier, bewegen Sie es auf zehn. Also jetzt haben wir zehn und wir haben zehn. Ich kann Dose 3 positionieren, sicherstellen, dass sie so in der Mitte sind, und sehen, wie sie in Bezug auf mein Logo aussehen. Ich bin die beiden Grossen, sind sie zu klein? Ich kann auch hier klicken, um in den vollen Vorschaumodus zu gelangen. Und ich denke zum Beispiel, vielleicht können wir die Größe nur ein wenig zwischen diesen Linien auf etwa acht reduzieren. Und natürlich bewegen Sie es auch ein bisschen mehr nach rechts. Also lasst uns jetzt weitermachen und das tun. Lassen Sie mich das schließen. Also noch einmal, ich kann hier klicken 12. Also mehr Möglichkeiten, ein Date zu sein. Klicken Sie auf diese letzten 112 Filme, um eine Tate zu sein, bringen Sie meine Taste BG zurück, weil ich es gerade dort für Abstand Sake gelassen. Und ich werde auch mehr Breite hier, um mich an meiner ursprünglichen Button-Position auszurichten. Ich habe nicht bekommen keine sieht viel besser, aber lassen Sie uns voran gehen, klicken Sie auf die Vorschau ist Sie sehen, es sieht viel besser aus. Was mir jetzt nicht gefällt, ist die Breite dieser Linien. Vielleicht kann ich die Breite ein wenig eingrenzen, aber denken Sie daran, das ist die Breite unserer Spalte. Vielleicht können wir es wagen, oder vielleicht können wir es einfach ein bisschen mehr drücken. So sind wir am Mai 60, R3 kann bei 50 sein. Und ich mag es wirklich, wie das aussieht wie ein Tink. Es fängt an, viel mehr Schafe zu nehmen. Also lasst uns diese gruppieren. Ich kann das jetzt entfernen, weil ich es nicht mehr brauche. Und nennen wir das so etwas wie wenn ich Menü kann, kann ich. Oder Hauptmenü. Wenn ich so richtig buchstabieren kann. Und was ich tun möchte, ist Control K zu drücken, weil ich eine Komponente daraus erstellen möchte, weil dies der Standardzustand ist und Sie den Leuten zeigen müssen , wenn sie auf etwas geklickt haben, was passieren wird. Also jetzt werden wir den angeklickten Zustand erstellen. Ich werde es angeklickt oder einen Hahn nennen. Tippen Sie darauf, wie Sie es nennen möchten, es ist wirklich alles an Ihnen. Und was ich in diesem hier tun möchte, ist zu zeigen, was passieren wird, wenn sie dort reinklicken. Also, was ich tun werde, ist auf dieses erste zu klicken, es in die Mitte zu senken, so. Klicken Sie auf diesen letzten, positionieren Sie ihn bis hier. Ich werde auch zu meinem Standardzustand zurückkehren nur um sicherzustellen, dass sie korrekt bestellt sind. Das wird also der dritte sein, so. Das wird der Erste sein. Also, wenn ich jetzt zu meinen Tab-Status gehe, bewegen Sie es nach oben, bewegen Sie es nach unten. Also funktioniert alles richtig. Aber nur um sicherzustellen, dass ich das löschen kann, fügen Sie eine neue Statusqualität-Registerkarte hinzu. Und jetzt kann ich anfangen zu arbeiten, weil sie korrekt angeordnet sind. Dies ist äußerst wichtig, offensichtlich wegen der ansprechenden Größenänderung später und auch für die automatische Animate, weil wir sicherstellen möchten, dass diese Funktion funktioniert. Nun, ja. Was ich tun werde, ist das zu drehen. So kann ich zum Beispiel meinen ersten auf so etwas drehen. Also 45 Grad. Und ich kann meinen letzten nach anderen drehen, also minus 45 Grad. Und ich werde auch auf Mate in der Mitte klicken und es den ganzen Weg hineinbringen. Also halte ich Alt, während ich es mache, um nur einen Dissenter zu hören, um einen schönen kleinen Kreis zu kreieren. Also, um das zu verstecken, Anders, können Sie sehen, was wir haben, im Grunde eine Ellipse, nicht nur die Rayleigh, so genannte. Hier ist, wie es aussehen wird, wenn es angeklickt wird. Also da hast du es. Nun, da wir das abgeschlossen haben, lassen Sie uns schnell voran gehen und überprüfen, ob dieses x zu groß ist. Ich glaube nicht, dass es so ist. Ich denke, es sieht gut aus. Also nun gehen wir voran und erstellen diese mittlere nav Registerkarte als Komponente selbst. Also, was ich tun werde, ist, dieses Original wieder so zu bringen. Und ich werde all diese zusätzlichen Elemente verstecken. Lassen Sie uns dies also wieder in den Standardzustand bringen. Es gibt also im Grunde zwei Möglichkeiten, wie Sie dies tun können. Du kannst es so machen. So können Sie das dort positionieren, wo es genau hier ist. Und Sie können zum Beispiel eine Anleitung verwenden. Aber das werde ich nicht tun. Ich werde im Grunde eine Maske für diese untere verwenden. Wie das funktioniert, können Sie dies einfach ganz nach oben verschieben, zum Beispiel, weil wir keinen Selektor mehr brauchen, wir können ihn entfernen. Ich werde mein Hauptsymbol verschieben und das so nach unten bewegen. So wie so. Also im Grunde, ich werde mein nav b, g, das hier ist. Ich werde meine Gegenstände, meinen Login-Button und dieses nav BG hier unten haben. Und was ich tun werde, ist, dieses jetzt BG noch einmal zu duplizieren. Ich weiß, es ist kompliziert, aber es wird in nur einer Sekunde viel Sinn ergeben. Hit Control D. Ich werde es bis hier positionieren. Dann wähle ich diese drei aus. Also das, das, und dieser Hit Shift Control M, damit ich sie maskieren kann. Und im Grunde, was ich an dieser Stelle Moschee tun kann, ist, dass ich das schließen kann. Also kann ich meine Maske finden und sie hier schließen. Dann, was ich tun kann, ist im Grunde die Größe dieses hier zu reduzieren, tut mir leid, nicht die Größe, sondern die Fettleibigkeit, weil wir es nicht offensichtlich sehen müssen. Und dann, sobald der Schritt des Benutzers, wird dieser verschwinden. Lassen Sie uns schnell unsere Komponente erstellen. Also drücken Sie Control K. Dies ist der Standardzustand. Lassen Sie uns einen neuen Zustand erstellen, nennen Sie es tippen. Und innerhalb des Wasserhahns, was wir tun werden, ist im Grunde zu unserem Maskennav BG gehen und es so erweitern, dass es diesen Punkt erreicht. So können Sie sogar voran gehen und überprüfen. Das ist also 579 in der Höhe. Ich kann direkt dort klicken, um auf die 579 zu gehen , nur um sicherzustellen, dass wir die gleiche Höhe haben. Und dieses nav BG wird in der Größe so reduzieren. Und dieses Hauptmenü-Symbol wird auf die Registerkarte gehen. Also lassen Sie uns jetzt voran und Prototypen all dies. Also gehen wir zum Prototyp. Wieder einmal, sobald die Benutzer darauf klicken, gehen wir zum Zustand des Tippen. Aber wir müssen tatsächlich einen Tabulatorpunkt erstellen. Also lasst uns weitermachen und das tun. Gehen wir zurück zum Design. Also werden wir das nicht tun. Lassen Sie uns also einen Tabulatorpunkt erstellen. Schien, als hätten wir mit dem Logo in der ursprünglichen Navigation, wenn Sie daran erinnern. Also lasst uns die beiden hierher bringen. Lassen Sie uns diesen Schrittpunkt so nennen. Stellen Sie sicher, dass Sie nichts sehen, so nicht fühlen, nicht streicheln. Lassen Sie mich einfach positioniert ist in der Mitte. Also entfernen Sie beide. Gehen wir zurück. Gehen wir zum Prototyp. Also wähle ich meinen Tab-Punkt aus, wo er ist. Hier ist es, wir haben noch einen Logotyppunkt hier wirklich locker. Brauchen Sie es jetzt nicht, aber Sie werden es brauchen, wenn Sie alle diese anderen Seiten entwerfen möchten. Lasst es uns vorerst dort lassen. Also nochmals, wenn du willst, kannst du das nicht tun. Ich werde diesen einen Klick direkt hier verwenden. Also lassen Sie uns den Tab-Zustand wählen. So wie das. Wir werden Easy und out verwenden. Oder Sie können etwas wie Snap verwenden. Also wird es in Position schnappen. Gehen Sie jetzt einfach, um zu sehen, wie das wie Nullpunkt funktioniert, sagen wir sechs. Testen wir es. Gehen wir nun zum Tab-Zustand. einmal klicken Sie auf DAP-Punkt. Wir können in den Standardzustand einfach und aus 0.06 gehen. Und mal sehen, wie das funktioniert. Gehen wir also schnell zum Standardstatus. Klicken Sie auf Vorschau. Ich werde das vergrößern, damit Sie es besser sehen können. Also, wenn Sie dort klicken, können Sie sehen, dass wir diese schöne kleine Animation haben. Und alles dehnt sich gut aus. Dies reduziert Fettleibigkeit, so dass es aus dem Weg wächst. Und das zeigt belüftende Schulden. Das sollte es. Wir haben immer noch diesen schönen Hintergrundschatten. Also gefällt mir wirklich, wie das aussieht. Alles ist, wie es sollte. Also nur noch eine Sache. Und ich springe hier zu diesem schmalen BG. Sie können sehen, dass wir Schattenhintergrund Unschärfe haben. Hier. Wir haben immer noch Schatten und Hintergrund Unschärfe, aber die Fettleibigkeit ist bei 0. Also gefällt mir nicht, wie das aussieht. Also können wir vielleicht von gehen, mal sehen, vielleicht können wir das tatsächlich zurückbringen. Also mal sehen, wir sind bei phi 79 im Original. Also lasst uns die Schulden ändern. Wir können hier hin. Wir sind bei 0 Bay City. Gehen wir zum Tab-Zustand. Ändern Sie diesen Wert auf 100 und ändern Sie ihn in 579. So wie das. Es erweitert sich also mit dem Rest unseres Designs. Also mal sehen, das ist bei 0. Lassen Sie uns es noch einmal testen, weil weniger Zeit , die Sie in diesem Hintergrundschatten nicht sehen können. Also, wenn ich hier klicke, und jetzt kannst du den Hintergrundschatten sehen und er verschwindet von hier. Und Sie können sehen, wie sich diese nette kleine Animation für unsere Ikone schön ändert. Alles sieht so aus, wie es sollte. Ich mochte diese Animation wirklich und wir haben immer noch diesen netten kleinen Dropdown-Zustand, in dem wir arbeiten können. Was wir später tun können, ist offensichtlich diese Komponente zu verwenden und an mehrere andere Größen angepasst. Und wir haben immer noch diese Größe, mit der wir arbeiten können. Also werde ich Ihnen ein wenig später zeigen, wie Sie das tun können. Aber jetzt, lassen Sie uns schnell zu dieser nächsten Stufe übergehen. Also werden wir tun, ist tatsächlich myText zu verwenden, positionieren Sie es in der Mitte. Ich werde es nicht zu sehr bearbeiten. Ich kann auch die Größe meines Bildes auf, zum Beispiel, reduzieren, bis so, ich denke, das funktioniert gut. Lassen Sie uns die Größe des Heldenbilds auf diese ändern. Gehen wir in unsere Moschee. Ändern Sie die Größe unserer Maske auf diese Position, den Kreis in der Mitte, wie wir es vorher getan haben. Stellen Sie sicher, dass es hier ein Fahrer ist. Sie können es auch ein wenig nach unten bewegen. In diesem Fall denke ich, dass das in Ordnung ist. Heldenformen oder das wir tun können, ist, dass wir es verzerren können, oder Sie können es einfach bewegen. Also werde ich tun, dass tatsächlich einfach bewegen Sie es hinein. Und ich denke, es sieht ein bisschen besser aus als. Nur schief für den Schreibtisch bestimmte Größe. Das funktioniert gut. Das sieht gut aus. Und vielleicht können wir es für diese Linie vielleicht so positionieren, dass es irgendwo hier ist. Mal sehen. Ich denke, das ist in Ordnung. Und schließlich wollte ich für diese Schaltfläche die Gruppierung dieser Komponente aufheben. Aber nennen Sie es immer noch Haupttaste. Ich weiß nicht, warum das passiert ist. Aus irgendeinem Grund oder nein, ja, mal sehen, wo wir sind. Ein 59. Vielleicht können wir bei 50 sein. Ich denke, das funktioniert ein bisschen besser. Bewegen Sie das aus dem Weg. Mal sehen. Vielleicht 40. Ja, 1940, es sieht ein bisschen besser aus. Daher müssen wir die Gruppierung noch aufheben, weil wir es nicht brauchen, um in einem Horrorzustand zu sein, weil wir nicht schweben können, wenn Sie sich erinnern. Also, das ist es im Grunde. Wir haben dies abgeschlossen und noch einmal können Sie sehen, wie schneller das ist. Sobald Sie mit D-Größen arbeiten, können Sie ganz einfach anpassen und alle diese Änderungen vornehmen. Also stellen wir sicher, dass das zentriert ist. Nun, was ich tun werde, ist einfach hier klicken, weil ich DES neu positionieren möchte. Dann werde ich sicherstellen, dass das innerhalb ihrer Gruppe und Gruppe ist. Gruppe. Und ich werde hineinspringen und die Gruppierung meiner Komponente aufheben. Ich bin Gruppe Maya Komponente. Und schließlich, heben Sie die Gruppierung meiner Komponente auch hier auf. Denn wieder einmal, wir brauchen keine Hover-Staaten, wir brauchen nur diese unregelmäßigen Staaten. Was ich als Nächstes tun werde, ist ihnen Namen zu geben. Das ist also personalisierte Konten. Nächstes ist das benutzerdefinierte Speichern. Und schließlich haben wir personalisierte und Debitkarten wie diese. Und jetzt, da das abgeschlossen ist, können Sie diese Karten einfach nach rechts erweitern. Also werde ich alle auswählen und rechts hier klicken, damit ich sie in das Raster erweitern kann. Stellen Sie sicher, dass Sie hier perfekt aufgereiht sind, was wir nicht sind. Also werde ich dort positionieren, um es zu reparieren. Da haben wir es. Und jetzt erweitern Sie das einfach, um es in Ihr Raster zu passen. Lassen Sie uns Rotorgrader Narrative sehen. Also werde ich sicherstellen, dass es genau da ist. Du kannst zurückgehen und nachsehen. Wir haben also 150, also werden wir das ein wenig später einbeziehen. Aber was wir für seine Mauer tun können, ist erweitert. Die Gesamthöhe von R wird ganz nach unten geboren. Ich werde meine Fußzeile und diesen Text, diesen Abschnitt oben auswählen . Es ist also Service-Name, Wechselkurs. Ich werde alle von ihnen runter, bis hier, nur damit ich mit diesem Text ein bisschen mehr spielen kann. Nur so hatte ich ein bisschen mehr Platz zum Arbeiten? Also, was ich für seine Wand tun kann, ist hier doppelklicken, positionieren Sie es hier, weil wir jetzt viel mehr Platz haben. Ich kann das Gleiche hier so machen. Ich kann das Gleiche hier machen. So wie das. Und jetzt können Sie zu Ihrem ersten zurückkehren , wo wir tatsächlich die meisten Informationen hatten. Also dieser hier, kontrolliere C. Und geh zurück hier. Kontrolle V. Mal sehen, ob wir hier mehr Informationen haben. Tun wir nicht, also können wir es in Position bringen. Dann können wir das Gleiche für diesen tun. Denn wo Sie mehr Platz haben, können Sie natürlich weitermachen und mehr Informationen zeigen. Warum nicht? Wie der Tod? Und mal sehen, Optimieren Sie Konto und erstellen Sie Ihr Konto. Weil ich nicht will, dass es ein Wort runterläuft. Das ist einfach sinnlos für Dat. Wie Dreck und mehr so. Da haben wir es. Jetzt können wir mit diesen anderen Elementen herumspielen. Also kann ich zuerst voran gehen und Ds schließen. Tu das, sie stören mich später nicht. Was ich in diesem Fall tun kann, ist zum Beispiel, um den Abstand anzupassen. Und wie ich das tun kann, ist einfach, indem ich reingehe. Und fangen wir mit diesem ersten an, damit Sie ein wenig experimentieren können. Also sind wir bei 40 hier, was in Ordnung ist. Wir sind bei 20, das ist alles in Ordnung. Aber ich möchte nur sicherstellen, dass ich hier noch mehr Abstand habe. Also 1234, mach damit. Also mal sehen. 1234. Ich kann sogar, zum Beispiel, Position ist, hier zu sein. So tat es, dass es umwickelt, um diesen letzten und ich habe immer noch ein bisschen mehr Platz hier. Und was wir hier haben, ist, mal sehen, 40 runter 1234. Ich denke, das ist in Ordnung. Also lasst uns das für alle tun. Also mal sehen, in diesem geben wir neun zurück, oder es ist eine schnelle herum mit diesem. Mal sehen, hier sind wir 40. Also lasst uns das auch auf 40 positionieren. So 1234. Und was wir für die mehr erfahren getan haben, lassen Sie mich überprüfen 40. Also machen wir das auch hier. 1234. Da hast du es. Ich werde Elemente Kartenfarbe entfernen, weil diese Elemente, die wir nicht mehr brauchen, weil wir keinen Hover-Effekt auf diese gewagte Gewohnheit haben. Nun, was ich tun kann, ist vielleicht können wir diese Karte auch 60 von oben geben. Mal sehen, wie das funktionieren wird. Also 60, richtig, denke, das ist Arbeit in Schulden, die noch besser funktionieren. Also lassen Sie uns das überprüfen und dieses hier zu 63 von hier. So dasselbe. Ja, ja. Und was du tun wirst, ist dasselbe für diesen hier zu tun. Also mal sehen, wir sind bei 40. Reduzieren Sie in der Größe auf hier. Stellen Sie sicher, dass wir bei 40. Also 1234, wählen Sie diese 360 Verzögerung dies, und stellen Sie sicher, dies ist 40 Tao. Also 1234, ich werde Elemente entfernen, Farbe, Stiftschulden. Grundsätzlich haben wir in diesem Service abgeschlossen, wo Sie einen Liter tun können, befindet sich dies, sehen Sie, dass es 150 von hier zum nächsten Abschnitt. Dann bringen Sie einfach den nächsten Abschnitt ein. So wie so. So 123456789101234 Fünf und sehen, dass Sie bei 150. Du kannst es natürlich reduzieren, wenn du willst, aber ich werde es einfach so behalten, wie es jetzt ist. Ich werde innen doppelklicken. Stellen Sie sicher, dass ich hier auf Breite positioniert. Stellen Sie sicher, dass Sie eine Position möglicherweise Texte, wo es so sein muss, um das Raster. Auch ins Raster. Ich werde das im Raster positionieren, und ich werde das hier unten finden. Das kann hier unten sein. Und lassen Sie uns Vorschau treffen. Einfach sortiert. Wir können überprüfen, was Sie bisher getan haben. Das ist also in Ordnung. Es sieht offensichtlich wirklich schön aus. Der Übergang ist wirklich gut. Aber Sie können auch tun, ist vielleicht innerhalb von hier im Standardzustand. Also dieses, stellen Sie sicher, dass Sie alle diese auf 0 haben. Wir haben sie nicht, weil sie unter Unmaskierung stehen. Vielleicht können wir sie nur haben, um das zusätzliche Element und zusätzliche Spin zu haben . Also lassen Sie uns sie hier überprüfen. Also sind wir im Standardzustand. Wir können zu unserer Maske nav Elemente loggen gehen, Login, Schaltfläche, klicken Sie rechts hier. Und ich habe nicht wirklich all diese Elemente erklärt. Also lassen Sie mich schnell voran und zeigen Ihnen diese. Also für all diese Responsive Größenänderungselemente, wo immer Sie sie auswählen, können Sie diese atomaren Größenänderungsbeschränkungen verwenden, was im Grunde Auto ist, macht jeder alles auf Auto und das ist, was Sie bisher getan haben. Aber Sie können auch voran gehen und wählen Sie manuell, wenn Sie wollen, will Responsive Größe ist ausgewählt. Also, wo immer Sie einige Änderungen vornehmen, können Sie sehen, wo diese Elemente repariert werden sollen. Damit wir sie an die Spitze bringen können. Sie können sie an der linken, festen Stiel nach rechts befestigen und sie am Boden oder an einem dieser kombiniert befestigen. Also all diese oder nur zwei oder drei oder was auch immer, was das bedeutet, ist im Grunde, wenn ich Ihnen das an einem echten Beispiel zeige, also lasst uns vorher, schnell eine Vorschau auf das und sehen, wie es aussieht. Also, wenn ich darauf klicke, können Sie sie aus irgendeinem Grund nicht sehen. Ich weiß nicht warum. Gehen wir zurück zum Tab-Zustand. Gehen Sie zurück zu unserer Moschee und zeigen Sie ihnen so. Gehen wir zum Standard. Klicken Sie noch einmal, vergrößern Sie es. N. Jetzt ist diese Animation nur ein bisschen kleiner, glatter. Also verschwindet diese Konten wirklich schön. Und ich mag es wirklich, wie das aussieht. Also noch einmal, wenn ich Sie zurück hier, können Sie sehen, dass eine ansprechende Größenänderung auf Auto für diese Haupt-Navigations-Tab ist. Wenn ich skaliere, wenn du dich daran erinnerst, bleibt dieses Logo links fixiert. Diese ist nach rechts gefärbt. Es war also der Knopf in diesem Fall. Und lassen Sie mich Ihnen in diesem Fall zeigen. Jetzt können Sie sehen, wie das hier aussieht. Wenn ich also mit dem Scrollen beginne, sorry , verwaltet, wird die Größenänderung an diese Größe angeheftet. So können Sie sehen, dass sich die Position des Logos nicht ändert. Menü, Symbolposition ändert sich nicht. Es bleibt also im Grunde dort, wo es als mittlerer Rücken war. Aber wenn ich manuell klicke, kann ich die anpassen, so dass Sie sehen können, dass es rechts fixiert bleibt, fixiert auf der linken Seite, und nach oben fixiert. Aber Sie können alle diese noch einmal ändern, um sich an das anzupassen, was Sie für Ihr eigenes Projekt benötigen. So. Xd wird automatisch anpassen, sobald Sie in Auto sind, sowohl im manuellen, können Sie mit all diesen spielen. Sie können auch feste Höhe sagen. Also, wenn ich diese Größe ändere, können Sie sehen, dass die Höhe gleich bleibt. Aber wenn ich das deaktiviere und mit der Größenänderung beginne , wird in einigen Fällen, besonders wenn Sie Shift verwenden , auch die Höhe anpassen. Also noch einmal, spielen Sie mit diesen Einstellungen herum und sehen, was am besten für Sie funktioniert. Normalerweise ist Auto Ihre beste Wette. Aber in den meisten Fällen müssen Sie einige Änderungen vornehmen, wie wir es bisher mit grundsätzlich all diesen Elementen getan haben. Stellen Sie also sicher, dass Sie Änderungen vornehmen, die für Ihr Design und Ihre Zwecke erforderlich sind . Also lasst uns jetzt weitermachen. Und ich habe diesen Wechselkurs nicht wirklich untersucht und gesehen, ob er richtig funktioniert. Jetzt können Sie sehen, dass wir keinen Hover haben und diese Karten sind wirklich schön und leicht zu lesen. Jetzt von hier aus können Sie anfangen zu scrollen und Sie können immer noch nicht überprüfen und das genug, aber ich denke, es ist genug, weil Sie diese beiden sehen können, diese beiden Ziffern am Ende. Also, ich denke, das funktioniert wirklich. Gut. Scrollen wir nach unten und lassen Sie uns sehen, von hier an zu diesem nächsten Abschnitt, wir sind immer noch bei 150, also lassen Sie es uns auch tun. Also stellen wir sicher, dass ich so bei 150 bin. Und was ich jetzt tun werde, ist, klicken Sie auf das vertikale Stapel. Dem. Ich kann hineinspringen, also sind wir noch bei 150. Ich kann mein Bild so erweitern. Es nimmt also den vollen Platz ein. Ich kann es auch in der Größe nur ein wenig auf so etwas reduzieren. Und Sie können sehen, weil wir in einem Stapel sind, diese Elemente bewegen sich schön Radarbild, Ich kann doppelklicken, um es neu zu positionieren, vielleicht reorganisieren es ein wenig. Vielleicht können wir ihre Gesichter nur ein wenig vergrößern , damit Sie wirklich mit der Position dieser Bilder herumspielen können. Und ich mag es wirklich, wie das aussieht. Jetzt ist das nächste, das gleiche für den Text zu tun. Also werde ich meinen Text so umwickeln. Ich werde dafür sorgen, dass es im Mittelpunkt steht. Dann werde ich myText in der Mitte positionieren. Aber bevor ich es tue, stellen Sie sicher, dass dies auch zentriert ist. Und weil wir jetzt viel mehr Platz haben, um damit zu spielen. Lasst uns zuerst diese 40 Stadt positionieren. Also mal sehen, so. Das ist bei 150, also ist das in Ordnung. Wir können das jetzt so in der Mitte positionieren. Und was ich tun kann, ist offensichtlich dafür zu sorgen, dass sich das ausdehnt. Um das zu tun, kann ich von diesem Rand an diesen Rand gehen. Wie Sie es sehen können, passt sich der Text wirklich gut an. Und wir können diese drei auswählen, stellen Sie sicher, dass wir in einem Zentrum sind. Und was wir auch tun können, ist die Gruppierung unserer Komponenten aufzuheben und sicherzustellen, dass sie aufgereiht sind. So können wir ihnen eine Gruppe geben, die diesen Mittelwert btn genannt wird. So wie es immer war. Stellen Sie sicher, dass sie sich in einem Zentrum wie diesem befinden. Und jetzt stellen Sie einfach sicher, dass Sie immer noch 40 haben. So wie wir es tun. Und schließlich sollte das 150 sein, aber es ist nicht so stellen Sie sicher, dass Ihre festen Toten und Milchprodukte es haben. Sie können sehen, wie einfach das war. Wenn Sie also das nächste Mal mit der Anpassung für Mobilgeräte beginnen, beginnen Sie zum Beispiel einfach mit der Anpassung und Sie können sehen, wie sich alle diese Elemente ändern. Wieder einmal, wenn Sie nicht möchten, dass sie sich so ändern, können Sie zurück zum Handbuch gehen und sie reparieren, zum Beispiel nach oben und links. Und jetzt beginnen zu ändern und Sie können einige verschiedene Elemente sehen. Also lassen Sie uns jetzt voran und beginnen mit den Karten und darunter. Also mal sehen, die sind noch bei 150. Das ist also 150, das ist 150. So halten Sie diese Konsistenz schön. Also lasst uns weitermachen und sehen, wo wir auf 33. Ich weiß nicht warum. Es zeigt uns nicht, aber es spielt eine Rolle. 150. Lassen Sie sie schnell voran und positionieren Sie es hier. Da wir in einem Stapel sind, klicken Sie hier. Und jetzt können wir beide gleichzeitig anpassen. Also einfach erweitern, um zu hören. Und was ich tun kann, ist im Grunde meine Knöpfe zu bewegen. Also dieser hier, und dieser hier, kann ich ihn dorthin bewegen, wo ich will, aber ich werde es behalten, wo es ist. Aber ich werde nur tun, ist mit der rechten Maustaste auf den Hover oder fügen Sie meinen Standardzustand hinzu , der dieser ist. Ich mag es nicht, dass sich Carlton Schuldenstand geändert hat. Also mal sehen. Ich kann zurück. Ich muss immer noch die Gruppierung und diese Komponente aufheben. Also Rechtsklick auf Leimkomponente, Kontrolle G. Alles bedeutet btn Schublade sehen, tun Sie das gleiche für diese. Klicken Sie also mit der rechten Maustaste auf grub Component Control g, wie folgt. Also Dario es, wenn Sie dies anpassen möchten, um ein bisschen mehr Text hinzuzufügen, können Sie. Was ich zum Beispiel hier tun kann, ist, wie ich sagte, ich mag es nicht, nur ein Wort zu haben. Ich glaube nicht, dass es professionell aussieht. Sie können auch die Breite dieses Textes anpassen und so weiter und so weiter. Ich werde mich nicht wirklich darum kümmern, und ich denke, es sieht gut aus. Schließlich, was wir hier zu Stoff gehen, ist, dass wir bei 150 sind und im Allgemeinen, also lasst uns das tun. Stellen Sie sicher, dass es in der Mitte ist. 123456789105 Also da hast du es. Noch einmal, wenn Sie möchten, können Sie diese Taste in der Mitte positionieren, wenn Sie möchten, aber ich denke, es funktioniert gut auf diese Weise. Wir werden hier den gleichen Abstand haben. Also 150, ich kann hier klicken und wir können hineinspringen. Und jetzt werden wir dasselbe tun. Also gruppieren Sie diese Gruppe, diese Gruppe, das wird Karte Nummer eins sein. Das wird Karte Nummer zwei sein. Das wird Karte Nummer drei sein. Und innerhalb all dieser Karten können wir mit der rechten Maustaste auf Gruppenkomponente klicken. Auf Gruppenkomponente und schließlich auf Gruppenkomponente. Was ich hier tun werde, ist, dass ich all diese Elemente behalten werde , weil wir keine Farbe oder irgendetwas anderes haben. Und was damit verbunden ist. Und schließlich, lasst uns diese Karten erweitern, um die volle Breite zu erreichen. Stellen Sie sicher, dass Sie hier am Raster ausgerichtet sind. Mal sehen. Und das sind wir. Also werde ich sie einfach schnell erweitern, um diesen Raum zu füllen. Und endlich müssen wir jetzt Änderungen an unseren Karten vornehmen. Aber Sie sehen, wie einfach das war und wie schnell. Jetzt können Sie alle diese Karten ändern, indem Sie einfach diesen Stapel aktivieren und Responsive Größe in unserem Fall auf Auto ändern. Also lassen Sie uns jetzt in Bearbeitung alle diese springen. Und das erste, was ich tun werde, ist sicherzustellen, dass ich diesen Text geändert habe , um hierher zu gehen, weil wir offensichtlich genug Platz haben, und ich kann es sogar 40 nach unten bewegen, denken es wird viel besser aussehen als der gleiche für diesen. Also Schicht 1-2 und ich werde dasselbe für diesen tun. Also Schicht 12. Was ich als nächstes tun werde, ist, diese Bilder so anzupassen, dass ich hier volle Breite habe und das sieht gut aus. Ich werde es zum Heiligen für dieses Bild machen. Also werde ich sicherstellen, dass ich umgezogen bin. Und vielleicht eine Dose vergrößern Sie es nur ein wenig Position in nur ein wenig zu hören. Ich denke, das ist in Ordnung. Und schließlich, tun Sie das gleiche für Disk-Image hier. Stellen Sie also sicher, dass ich das hier positioniere , nur damit Sie sehen können, dass sie die Hände schütteln und es direkt dort positionieren. Nun ist das Beste, was zu tun ist, dieses Datum zu positionieren. Also lassen Sie mich alle drei meiner Termine auswählen. Ich kann nicht, weil sie in einem Stapel sind, also machen wir es so. Stellen Sie sicher, dass das 20 Stadt ist. Stellen Sie sicher, dass dies 20 Stadt ist, und stellen Sie sicher, dass das 20 ist. Wie Dat. Als nächstes arbeiten wir an unseren Texten. Also werde ich einen Unterscheider verwenden hatte die meisten Texte, die diese Größe genau hier ist. Also werde ich Champagner genießen oder hier, und ich werde auf meine Texte erweitert klicken, um zu hören. Und vielleicht kann es genau hier schneiden. Und nur damit wir genug Platz haben, also ist das bei 40. Und mal sehen, in diesem kann jetzt 40 sein, also 1234. Wieder einmal, wir werden es hier schneiden. Also lasst uns dasselbe für die anderen tun. Ich werde diesen Text kopieren. Umzug nahm hier. Karte es hierher. Stellen Sie sicher, dass ich bei 40 bin. Stellen Sie sicher, dass ich auch bei 40 bin. Schließ das hier. Und schließlich, und tun Sie das gleiche für den dritten. Also, wenn Sie mehr Informationen zeigen können, weil warum nicht? Du hast immer noch diesen Platz. Warum also nicht verwenden, um diese wichtigen Informationen zu zeigen, damit die Menschen nicht anderswo danach suchen und ihre Zeit verschwenden müssen. Also, Dario, an der heutzutage haben wir D's abgeschlossen. Wir können sie so lassen. Mal sehen, das ist bei 150, das ist 50, was in Ordnung ist. Jetzt gehen wir weiter und fahren mit unserem nächsten Abschnitt fort. Also mal sehen, wir sind auch bei 150 hier. Also lassen Sie uns das und das wählen, stellen Sie sicher, dass wir bei 150 sind. Also mal sehen, so. Das erste, was ich tun werde, ist, meine Infostreifenbreite zu reduzieren. Ich werde es und mein Logo auswählen, stellen Sie sicher, dass sie in der Mitte sind. Und was ich als nächstes tun werde, ist, dass ich diese Elemente nicht etwas anders organisieren kann , aber ich werde diese drei tatsächlich so aufheben. Und weil Sie auf Ihrem Tablet sind und einige der Tablets bereits die Möglichkeiten haben, einen Anruf zu tätigen, vor allem zu 4G. Warum also nicht ausgelastet Schulden? Also lasst uns all diese entfernen. N, Zum Beispiel, wenn Sie eine E-Mail senden möchten, Sie einfach aufhören und es bringt Sie zu Ihrem E-Mail-Client. Wenn Sie Standort möchten, würden Sie jeden Tag Schuh auf eine Karte Clients oder zum Beispiel, Google Maps oder Apple Maps oder was auch immer Sie verwenden stempeln . Positionieren Sie das hier, positionieren Sie unsere Karte genau hier. Und schließlich, wählen Sie es und ein Telefon, stellen Sie sicher, dass es in einem Zentrum wie Schulden ist. Und Sie können diese natürlich ein bisschen zusammenfassen, wenn Sie wollen. So können Sie zum Beispiel das verschieben, um hier zu sein und zum letzten zu bewegen, um hier zu sein, wenn Sie denken, dass es sinnvoller ist, was Sie auch tun können, ist das Logo hier zu lokalisieren, die sich diese drei hier befinden. Aber nur um der Konsistenz willen, werde ich es einfach so lassen, was uns endlich mit der Fußzeile lässt. Also lasst uns die Fußzeile hier reinbringen. Und was Sie mit der Fußzeile tun können, ist im Grunde erweitern, wie wir es mit dem Menü genau hier oben getan haben. Also mit diesem hier. So können Sie alle Symbole verursachen und Sie können oben klicken und erweitern. Oder was Sie tun können, ist eine Schicht am Damm so, dass sie immer noch gut lesbar und verständlich sind. Also lasst uns das für diesen Fall tun. Und vielleicht kann ich Ihnen zeigen, wie Sie das in den späteren Phasen tun können. Ich denke nur, wie ich es mit yeah machen kann. Lassen Sie mich Ihnen zeigen, dass später, sobald wir auf die mobile Version kommen , so dass Sie entscheiden können, welch 59. Responsive Design: Lassen Sie uns jetzt voran und beenden Sie unser Responsive Design mit der mobilen Größe. Also treffen Sie Kontrolle D, schmieren Sie diesen auch. Positionieren wir es und runter, um genau hier zu sein, also 70. Und lassen Sie es uns umbenennen. Doppelklicken Sie hier. Lassen Sie uns die Größe reduzieren und wird extra kleine Geräte sein. Also lasst uns das auch schnell ändern. Du siehst also, dass das 375 ist. Also lasst uns die Schulden ändern. So 375. Ändern wir dies in vier Spalten breit. Also von acht auf vier. Und was wir tun werden, ist tatsächlich diese Einstellungen zu verwenden. Also für 306120, also für 30 bis 6120, S4 bis früh 6120, so. Und schließlich, lassen Sie uns weitermachen und alle unsere Elemente so anpassen , wie wir es bisher für alle getan haben. Also, was ich tun werde, ist zu springen und einige dieser Symbole und Elemente anpassen. Verschieben Sie es hier für Unternehmen mehr in ganz Europa. Und Sie können den Text auch umwickeln, wenn Sie wollen, um sich ein bisschen mehr Platz zu geben. Ich kann auch in diesen beiden hier ausgerichtet, vielleicht 1234, nur damit ich mir ein bisschen mehr Platz geben kann. Stellen Sie sicher, dass dies auch bei 40 ist. Und schließlich, weil wir auf einem Handy sind, können wir einfach gehen und dieses als ausgewähltes Land. Lassen Sie es uns hier anpassen. Und dann einmal Benutzer stempeln, zum Beispiel, die Festplatte und erweitern Sie es nach unten und zeigen, dass sie eine weitere Option haben. Also werde ich dieses Land verstecken und wann man sich in diesem auf die Höhe einzustellen. Und jetzt haben wir viel sauberere Navigation als zuvor. So kann ich das zum Beispiel hier ausrichten. Ich kann das hier verschieben, wenn ich will, aber ich lasse es einfach so, wie es ursprünglich war. Jetzt, da das abgeschlossen ist, können wir an unserer Navigation arbeiten. Damit ich es hier positionieren kann. Sie wieder sicher, dass es hier geht. Jetzt muss ich meine Logos kleiner machen. Was ich also tun werde, ist eines der Logos zu importieren, die ich zuvor exportiert habe. Also lassen Sie mich es von meinem Desktop hierher ziehen. Hier ist es. Ich kann ein Steuerelement X tun, um es so zu kopieren. Dann kann ich in mein Hauptnav springen. Ich kann Kontrolle V tun, um es einzufügen, und kann es an einem Ort wie diesem positionieren. Und dann kann ich mein altes Logo entfernen und dieses Logo verwenden weil Sie sich daran erinnern, was ein zuvor über dieses Logo gesprochen hat, Sie ablenken und diese Änderungen daran vornehmen. Also werde ich diese beiden auswählen, stellen Sie sicher, dass es in der Mitte ist. Ich werde dies erweitern und vielleicht von, mal sehen, vielleicht kann ich es hier für jetzt lassen, nur damit wir sehen können, wie es aussieht. Und lassen Sie uns sicherstellen, dass auch Änderungen an diesen anderen vorzunehmen. Jetzt ist BG hier. Ja. Lass uns in eine Masse springen. Es ist lieb. Die sind hier. Das ist auch hier. Also lasst uns jetzt voran gehen und den Wasserhahn benutzen. Aber bevor wir es tun, wollte ich mein Logo kopieren. Gehen Sie zurück zum Tab-Zustand. Stellt sicher, dass ich solche Änderungen vornehme. Also stellen Sie sicher, dass sie es hören müssen. Was ich auch tun möchte, ist eigentlich von lass uns nicht, lass uns eigentlich Auditing machen. Also lasst uns Indies benutzen. Also jetzt BG, Lasst uns einfach zu ihnen zu hören. Lassen Sie uns unseren Tap Point und unser Logo nach innen verschieben. Mal sehen, wo wir im Standardzustand sind, also 20. Okay, gehen wir zurück zum Tab. Mal sehen. Also einfach mehr mit 20, also 12. Und wir werden auch meinen Stempelpunkt verschieben oder ihn einfach dort belassen. Ich denke, es spielt keine Rolle. Und dann kann ich mein Logo stützen, sorry, das ich erstellt habe. Stellen Sie sicher, dass es in der Mitte ist. Das ist es. Und jetzt kann ich weitermachen und einige dieser Änderungen vornehmen. Also lassen Sie uns sehen 2 jetzt BG Moschee. Also werde ich sicherstellen, dass ich dies wie so nav Elemente ändern oder wagen, Protokollierung seiner Wagen. Also ist alles da, wo es sein sollte. Was ich auch tun werde, ist Control C für diese Elemente zu treffen. Also nav und Login Control-C. Ich werde alles andere verstecken. Gehe zurück zu meinem Standardzustand, springe hier in meine Maske und du würdest V kontrollieren, um sie dort zu positionieren. Ich werde diese dann löschen, weil ich die Größe von ihnen zuvor reduziert habe. Ich werde jetzt die Deckkraft auf 0 bei diesen reduzieren. Und jetzt lassen Sie es uns testen und sehen, wie es aussieht. Also, wenn ich es öffne, klicken Sie rechts hier. Alles funktioniert wie es vorher sollte und alles sieht schön und sauber aus. Gehen wir nun zum Heldenbereich. Jetzt, wo wir das fertig sind. Und für den Heldenbereich selbst, was ich tun werde, ist eigentlich, mal sehen, ob ich alles in einer Mitte positioniere. Mal sehen, wie das aussieht. Ich mache mir nur Sorgen um die Disketten-Taste, weil ich denke, es ist viel zu Buch. Also lasst uns Position dat wirklich schnell zu hören, dass es sich entscheidet, hier zu springen und von 24, gehen Sie zu D, 18. So, aber stellen Sie sicher, dass es weiß ist. Ich denke, das funktioniert gut. Was ich auch tun kann, ist hier rein zu springen und sicherzustellen, dass es zum Beispiel 60 ist, weil wir es nicht mehr 70 brauchen. Ich denke, 60 ist gut. Als nächstes ist eine Möglichkeit, die Größe dieses Textes von 24 auf, mal sehen, 18 oder vielleicht 16 zu reduzieren, so. Aber stellen Sie sicher, dass es verfärbt ist. Und ich werde es zum Beispiel so umwickeln . Und dann schließlich für Desktops stellt sicher, dass es, mal sehen, 24 Bolzen ist. Und ich denke, das funktioniert gut. Jetzt gehen wir weiter und stellen sicher, dass es in der Mitte unseres Flughafens ist. Stellen Sie sicher, dass es zum Beispiel bei 41234 so ist. Ich denke, das funktioniert gut. Und jetzt gehen wir weiter und passen uns an andere Elemente an. Also werde ich in Position springen. Möge Held BG hier springen, meine Maskenposition zugewiesen, mein Held BG hier, und dann in meinen Kreis springen, stellen Sie sicher, dass es in einem Zentrum wie diesem verschuldet ist. Ich kann sogar die Höhe meines Kreises erhöhen. So oder so etwas. Ich denke, es funktioniert gut. Dann lassen Sie mich Position in der Mitte koppeln. Stellen Sie sicher, dass sie irgendwo hier sind, zum Beispiel, ich halte Shift gedrückt, um sie anzupassen. Irgendwo denke ich, dass es gut funktionieren wird, dann kann ich sicherstellen, dass sie hier sind, was in Ordnung ist. Dann werde ich Position kann Held BG mit meinem Bild so ausrichten? Ich werde dasselbe für meine Maske tun. So sicher, es ist so in Schrecken. Also schneidet es an dieser Stelle ab. Dann werde ich meine Heldenform benutzen, sie hier positionieren und sie dann gleichmäßig nach unten skalieren. Halten Sie Shift gedrückt, positionieren Sie es hier rechts. Stellen Sie sicher, dass es runter ist. Wie Indice, und stellte sicher, dass mein Bild unten in der gleichen ist, so dass alles richtig aussieht. Was ich als nächstes tun kann, ist offensichtlich hineinzuspringen und die Größe meiner Helden zu reduzieren, weil ich es nicht brauche, um zu groß zu sein, damit ich es kleiner machen kann, als ich es reorganisieren kann. Also wählen Sie es aus und positionieren Sie es irgendwo hier, zum Beispiel, ich denke, das ist in Ordnung. Und was wir auch tun können, ist unser Held Elements zu verwenden. Stellen Sie sicher, dass sie sich alle in einem Zentrum wie diesem befinden. Und dann können wir hier springen und die Größe der Daten auch auf irgendwo hier reduzieren , zum Beispiel. Dann, was ich tun kann, ist mein Kreuz zu benutzen, vielleicht mehr, wir halten Position so. Verwenden Sie meinen Kreis vielleicht mehr davon direkt hier und verwenden Sie einfach meine Zeilenposition hier, zum Beispiel, wenn wir denken, dass das ein bisschen zu viel ist, können Sie es so organisieren. Und mal sehen, Laura macht bis zu fünf. Ich denke, es funktioniert besser. Und das kann auch eine Fünf sein. Und Sie können die Handlungen so lassen, wie es ist. Oder du kannst hineinspringen und diese reduzieren, wenn du Seoul sehen willst , wie dies und so. Also 79479, vierhundertdreiundfünfzig dreiundfünfzig. Das ist in Ordnung. Du kannst es so lassen. Lasst uns jetzt weitermachen. Der Tod. Wir haben das beendet und weil wir auf extrem kleine Größe des Bildschirms sind, kann ich dies sogar reduzieren und es ein wenig nach oben bewegen, damit ich alles so auswählen und so gehen kann. 1234, zum Beispiel. Sehen Sie, wo wir sind und können es augapfeln. Also möchte ich meine Navigation mit diesem ausrichten. So 1234, Sie können es dort positionieren. Dann springen Sie in Ihre Heldenposition Held und VG, um hier zu sein. Position, deine Maske soll auch hier sein. So wie das. Und da hast du es. Wir haben diesen Abschnitt abgeschlossen jetzt können wir auf den nächsten Abschnitt gehen. Und offensichtlich ist das viel zu Buch Soul. Hier ist Experiment 3624. Ich denke, 24 funktioniert gut mit diesem Fall. Stellen Sie sicher, dass Sie in der Mitte sind. Und dann, was ich tun werde, ist sicherzustellen, dass ich ein paar kleinere Entfernungen benutze. So 12345678, vielleicht 80 funktioniert gut. Wo auch immer es 100 war, können wir es zum Beispiel auf 80 setzen und die 150 vergessen. So können wir es bei 80 Bereich haben, wo Sie sehen können, dass wir bei 80 überall sind. Und jetzt gehen wir weiter und nehmen einige Anpassungen an diesen vor. Also werde ich auf sie klicken, alle gleichzeitig anpassen, stellen Sie sicher, dass ich darauf ausgerichtet bin, hier zu migrieren. ich. Also das Gleiche hier. Und das ist in Ordnung. Aber ich werde als nächstes tun, ist vielleicht ein Rap MyText herum, wie ein direkter Weg, es so zu tun. Was ich dann tun kann, ist, diesen Text etwas nach unten zu erweitern und ihn dann zu schneiden. Also 12, ich mag, wie das aussieht. Mal sehen, wir sind bei 20, also 12, positionieren Sie es hier und schneiden Sie es vielleicht 23 Zeilen Text, wie wir es vorher getan haben. Taylor, ein Konto, das Ihren Bedürfnissen entspricht, wird den Satz dort beenden. Mal sehen, wir können 40 runter sein, das ist in Ordnung. Also drei Zeilen 20, und jetzt lasst uns alle skizzieren. Also werde ich dasselbe für diesen hier tun. Also 12, so, lassen Sie es uns überprüfen. Wir sind 20 unten, C auf zwei ausgerichtet. Also werden drei Zeilen genau hier schneiden. Und lass uns 40 runter sehen. Das ist in Ordnung. Lasst uns jetzt zu diesem übergehen. So erweitert wie dieses, um es hier auszurichten. E12 mit einem unserer, mal sehen, können Designs wie das. Das ist bei 48 Schulden, gut. Und jetzt ist dieser Abschnitt abgeschlossen. Wir können jetzt zum nächsten Abschnitt übergehen. Und Sie können sehen, dass das 24. Das ist 24, also sieht alles noch gut organisiert aus. Wir sind bei 80 hier, also werden wir auch bei 80 Jahren sein. So 12345678. Mal sehen, da ist es. Und was ich für diese tun werde, ist offensichtlich auch hier diese Änderungen vorzunehmen. Aber mal sehen, vielleicht kann ich sie übereinander positionieren. Das ist also 24. Das ist 24. wir sicher, dass es hier ist, an der Position es hier unten ist. Und mal sehen, wir können sicherstellen, dass es zum Beispiel 16 ist. Sehen wir uns die Abstände an. Also eins, ja, geben wir ihm einen Abstand von zehn. Gehen wir mit dem Text zurück. Wir sind 16 Heres, 1234, nur damit wir 20 sein können, stellt sicher, dass wir ausgerichtet sind, wir sind, und stellen Sie sicher, dass wir auch 20 sind. Also 12 und wir sind 31 da unten, was gut ist. Und das letzte, was zu tun ist, das hier so anzupassen und Wechselkurs BG, bringen Sie alles rein, innen. Jetzt, da eine Hitvorschau, kann ich Ihnen zeigen, was ich meinte. Also wieder, das funktioniert wirklich gut und zeigt alles. Das sieht wirklich gut aus, weil es all diese Informationen zeigt. Ich mag es wirklich nicht, wie diese Steuer hervorsticht. So sehen Sie einfach, welche Entwickler und Ihr Client über die Kopie sind, was Sie an Ihrer Kopie ändern können, weil Sie nur in bestimmten Phasen umwickeln wollten. So c, die Entwickler und Kunden sind, ist es möglich, eine völlig andere Kopien zu haben oder das gleiche nur in anderer Reihenfolge gewährt diese anderen Größen. Also müssen Sie es mit Ihrem Klienten aussaaten. Und schließlich, schauen wir uns das an. Wie Sie sehen können, sieht es wirklich schön aus und zeigt die Informationen, wie es sollte. Gehen wir jetzt zurück und lassen Sie uns sehen, was ich hier tun kann. Also vielleicht kann ich Zuweisungswährungen springen, das hier positionieren. Und mal sehen, ob das eine zusätzliche Änderung daran vornehmen wird. Als sein Weg nach unten gekrochen ist, sieht alles gut aus. Also gefällt mir das. Sie können sogar voran gehen und reduzieren den Raum und gegeben mehr und zwischen all diesen. So können Sie zum Beispiel zwischen hier und hier den Raum reduzieren, aber nicht zu viel Zeit verschwenden. Ich bin einfach nur glücklich damit, wie das aussieht. So können wir jetzt weitermachen. Wir können diesen Abstand auf 80 reduzieren. Und ich werde das noch mehr so reduzieren. Was ich als nächstes tun werde, ist gesprungen Seitenbild ist einfach in Ordnung. Wir können es einfach hier bestellen. Und lass uns zu mir kommen. Wir können das Höhenwerkzeug reduzieren. Siehe 300. Ich mag es. Ich denke, es ist gut. Als nächstes springen wir hierher. Also sind wir bei 40, was in Ordnung ist. Lasst uns unsere Texte anpassen. Das hier wird also, mal sehen, 24 sein . Aber wer kahl? Ich mag, wie das aussieht. Das ist, dass wir das später beheben werden. Nun, für diesen Text, lasst uns zuerst vorgehen und ihn so an die Ränder unseres Rasters erweitern. Und so. Als Nächstes werde ich 16 benutzen. Ich werde diese Farbe verwenden. Ich finde, es sieht gut aus. Dann werde ich meinen Knopf anpassen und denselben verwenden, wie ich es zuvor getan habe. Also zwei Spalten und mal sehen, tatsächlich spiegeln, können wir diese kopieren, so dass wir nicht mit diesen Details belästigt sind. Control C kann innerhalb von hier springen, doppelklicken, um in Control V zu springen, damit ich meine Texte einfügen kann, diese Schaltfläche gelöscht, um sicherzustellen, dass ich bei 40 bin. Ich bin bei 40. Ich bin auch in 40 mit diesem hier. Und das ist dein Abschnitt abgeschlossen. Das ist es im Grunde. Das ist alles, was Sie tun müssen. Jetzt endlich positioniert ist es, bei 80 zu sein. Das ist in Ordnung. Wenn Sie denken, dass dies immer noch zu groß ist, können Sie die Höhe Ihres Bildes noch mehr reduzieren. Aber lassen Sie uns die Vorschau überprüfen, mal sehen, wie es aussieht. Und Sie können die App auch für iOS und Android herunterladen. Also, welches Gerät Sie verwenden, ist mit Ihrem USB-Kabel verbunden, und jetzt können Sie es starten und direkt auf Ihrem Telefon eine Vorschau anzeigen und sehen, wie es aussieht. Vielleicht kann ich das sogar später zeigen, nur damit du sehen kannst, wie es aussieht. Aber im Grunde, weil Sie für diese spezifischen Formulare entwerfen, Es ist am besten Option, diese Adobe XD-Funktion für tatsächliche mobile Geräte zu verwenden. Wenn Sie also verwenden, wenn Sie für iOS zum Beispiel für iPhones entwerfen , dann habe ich wirklich empfohlen, dass Sie das herunterladen und es ausprobieren, wenn Sie für Android entwerfen, dasselbe, aber nur Stellen Sie sicher, dass Sie das Gerät verwenden, das diese Eigenschaften hat. Das ist also bei 375. Also, wenn Sie ein Mobiltelefon haben, das 375 in der Breite ist, dann wird es gut aussehen. Wenn nicht, wird es schief aussehen und nicht wirklich so relevant. Also lassen Sie uns den ganzen Weg nach unten scrollen und sehen. Also haben wir diese Gruppen ausprobiert. Nun, wir benutzen diesen Knopf und ich denke, das funktioniert gut. Vielleicht nur eine leicht reduzierende Höhe, aber es liegt an Ihnen und entscheiden, was Sie damit tun wollen. Ich ging, um das hier zu positionieren und um sicherzustellen, dass es bei 80 , also 12345678, werde ich sofort einspringen und es so reduzieren. Ich werde reinspringen und diesen Knopf kopieren, der C kontrolliert . Ich werde in meine Karte gehen. Also werde ich hier gehen, Control-V, um in meinem neuen Knopf zu basieren, löschen Sie meine alte, und ging zu springen direkt hier basierend in Mist Taste. Richtig, das löscht meine alte Mischung. Das ist in der Mitte und es ist 40, also 1234, stellen Sie sicher, dass das das Gleiche ist. Also Zentrum 1234. Und offensichtlich können Sie den Abstand zwischen Ihren Karten einfach hier schweben zu erhöhen . Ich werde sicherstellen, dass es in 40 ist. Das ist in Ordnung. Was ich als Nächstes tun werde, ist ein paar Änderungen an diesen Texten vorzunehmen. Also werde ich das so sagen, die sehen, wir sind bei 22 für diesen hier. Lassen Sie uns es genau auf 20 bewegen. Und das gleiche für diesen zu tun, also 12. Und nur um der Konsistenz willen, können wir es so nach unten bewegen. Dann kann ich meine Texte erweitern 20. Stellen Sie sicher, dass ich das gleiche hier mache. Also mal sehen, wir sind bei zehn, wir sind bei 20 hier. Und ich kann es auf vier Textzeilen reduzieren . Mal sehen, was wir hier haben, 33, das ist in Ordnung. Und ich kann das gleiche für diese eine Säge erweitern in mehr Breite hier tun. Stellen Sie sicher, dass wir bei 21234 Textzeilen sind. Also werde ich meinen Punkt hier positionieren, das löschen und wir sind auch bei 33. Was ich an diesen Karten nicht mag, ist die Höhe dieser Bilder. So kann ich zum Beispiel die Höhe auf irgendwo hier reduzieren. Also lass uns 220 sehen. Ich kann dasselbe für die Entwaffnung tun. So kann dieses Bild dort sein, wo es ist. Hier ist es 220. Ich schätze, ich kann doppelklicken. Das ist in Ordnung. Und jetzt haben wir ein bisschen mehr Platz, um mit unseren Elementen herumzuspielen. Also alle Position in genau hier. Also 1234, stellen Sie sicher, dass Sie bei 40. Stellen Sie sicher, dass Sie auch bei 40 sind. Klicken Sie auf diesen und stellen Sie sicher, dass Sie sich so in der Mitte Ihrer Schaltfläche befinden. Also tun Sie das gleiche dafür. So 1234. Stellen Sie sicher, dass Sie auch bei 40 sind, wie Dad. Also mal sehen, wo wir mit diesem hier sind. Also lasst uns 40. Lassen Sie mich schnell voran und überprüfen Sie hier. Also bin ich 4040, weil ich leicht Dinge verliere, um Dinge zu vergessen. Und lassen Sie uns 1234 Textzeilen sehen. Also sind wir wieder bei 21234, ich mag nicht, wie das aussieht, also schauen wir uns einen Stand der Technik an. Hmm, wenn Technologie Wort würde genau dort gehen, aber sie Augen wirklich wichtig. König Freilassung. Und ich denke, es ist so etwas. Und mal sehen, wir können das auch auf 40 positionieren. Also 1234, früherer Tod. Und schließlich, bewegen Sie das hier in der Mitte zu sein. Und lassen Sie mich endlich eine schnelle Inspektion machen. Also von hier nach hier, 404040, das ist in der Mitte, 404040, und das ist auch hier in der Mitte. Und da haben Sie es, die wir in diesem Abschnitt auch abgeschlossen haben. Gehen wir nun zu den späteren Abschnitten. Wenn ich dich noch einmal zurückbringe, siehst du, dass das 24 Volt ist. Daher werden wir die gleichen Einstellungen auf diesen Text anwenden. Scrollen Sie den ganzen Weg nach unten. Also stellen Sie sicher, dass es in der Mitte unseres Flughafens ist und direkt hier springt. So 24 mutig. 12345678, wie tot. Wieder einmal, stellen Sie sicher, dass es in der Mitte ist, ist es Position Brenner links. Stellen Sie sicher, dass es 80. Passen Sie alle diese so an. Mal sehen, etwas stimmt nicht, genau hier, aber Hintergründe sind in Ordnung. Lassen Sie mich überprüfen, dass die anderen einfach nicht dx x uns entkommen. Also werden wir das in Ordnung bringen. Nennen wir es hier drinnen. Also lassen Sie mich dieses Bild nach oben verschieben. Silane Todesfälle. Ok. Ich muss es nur drinnen skalieren. So wie in dieser Position es hier, oder noch besser wie eine Diskette. Also können wir beide sehen, so dass ich denke, MIT sieht viel besser aus. Nun, was ich tun werde, ist in meinen Text zu springen, dasselbe zu tun. Also lass uns mal sehen. Wir sind bei 20 hier, 12 und mehr sind es hier. Und das weltweite Banking für 2021. Und mal sehen, ob wir hier genau so machen können. Mal sehen, wo wir hier sind. Also sind wir am 14. Mai, rekombiniere bei 20, oder variate bei 40. Und hier können wir bei 20 sein, nur damit wir uns ein bisschen mehr Platz geben können. Wir sind, mal sehen, 1234, so 25 runter. Und ich denke, das sieht gut aus. Okay, jetzt können wir diesen hier mehr wollen. Ich kann in einem reorganisierten mein Bild doppelklicken, um zu hören. Ich denke, das ist in Ordnung. Eine, die ich mit diesem tun werde, ist, meine Texte anzupassen. Also 20 zurückgegeben. Wir können diese in Richtung unten in die Gemeinschaft bewegen. Bewegen Sie das ein bisschen nach oben. Also sind wir bei 20. Mal sehen, was wir hier gemacht haben. Also sind wir bei 40. Mehr mit, bei 20, wir können mehr Riffs und 20. Ich kann das tun. Also lass uns mal sehen. Wie Sie sehen können, müssen Sie alle diese Änderungen und Anpassungen vornehmen. Du bist also von hier bis hier, ich bin 100. Von hier bis hier bin ich bei 100, also muss es dort bleiben. Also mal sehen, lassen Sie uns einfach diese Community-Arbeit verschieben und so runter, nur damit es ein bisschen lesbarer ist als zuvor. Als nächstes sehen Sie, das ist um 20 Uhr. Lasst uns zuerst das hier erweitern. 12x, so. Also mal sehen, das ist um 20 Uhr. Wir hatten drei Textzeilen hier. Also werde ich das einfach wie Dreck nach oben bewegen und endlich mehr erfahren und war 40 so. So 1234 so. Und schließlich, gehen wir weiter und beenden das letzte. Also mal sehen, der Abstand ist tardy zwischen ihnen. So können Sie das erhöhen, indem Sie Shift gedrückt halten und es wird zu diesem und diesem nächsten so zunehmen. Und wann man in mein Bild an jeder Position springt , könnte ein wenig zu so etwas abbilden. Mal sehen, Höhe ist 631. Ist das das Gleiche wie das? Ist es das gleiche wie das Original? So Höhe ist 631, aber das ist 287 zu 87 und schließlich zu 87. Also, das ist in Ordnung. Lass uns jetzt zurückspringen. Also nochmals, lasst uns nachsehen. Das ist 212. Das wird dort bleiben, wo es ist. Und das wird 20 von hier aus sein. Aber lasst uns zuerst erweitert und es wird drei Textzeilen aufnehmen. Also ein Schreibtisch, um das zu mögen, zwei, und das wird bei 40 so sein. Und da haben wir es. Wir haben diese Abschnitte abgeschlossen. Lässt mich schnell überprüfen oder OTUs in Zeilen und das ist in Ordnung. Lassen Sie uns jetzt mit unseren Info-Strips weitermachen. Also werde ich sicherstellen, dass es auch bei 80 ist. So 12345678. Und Sie können zum Beispiel ins Innere springen und diese so gruppieren. Und dann werden sie skalieren, um proportional zu dezentrieren und so aussehen, wie sie sollten. Ich mag, wie das aussieht. So können wir jetzt zu unserem Fuller übergehen. Und vier ist das, was uns hier am meisten bringen wird. Um diesen Prozess ein wenig mehr zu beschleunigen, werde ich kopieren und einfügen, wo bereits in meinem ursprünglichen Design getan. Nur um dir zu zeigen, was ich meinte. Also, wenn gemein, springe hinein und bewege dieses Foto Schönheit den ganzen Weg nach unten. Nur um Ihnen diese Optionen zu zeigen. So können Sie dann entscheiden, welche Festplatte Sie erstellen möchten. So kann es schnell in mein ursprüngliches Design springen. Springen Sie in die meine Fußzeile. Und mal sehen. Ok, wählen Sie meinen Text aus. Wählen Sie und diese. Ich bin dat Hit Control V. So kann ich einfügen, was ich bereits mit meinem Original gemacht habe. Also lass mich hier reinspringen. Also Tourney, lass uns den Abstand zwischen ihnen sehen. Das ist bei 40. Also lassen Sie uns alle von ihnen unter 40. Und im Grunde können Sie sehen, was ich hier getan habe. Also habe ich diesen Pfeil eingeschlossen , der im Grunde nur für Formen ist, wie wir es mit dem Menü-Symbol zusammen gemacht haben. Und Sie können im Grunde auch jedes ROI-Verhalten verwenden, das Sie wollen. Und was ich dort gemacht habe, ist alle so positioniert. So können Sie sehen, dass diese Menüpunkte untereinander mit 40 dazwischen liegen. So können Sie sehen, wie das alles aussieht. So ist alles schön und sauber. Alles ist leicht scrollbar. N unlesbar. Seife Lassen Sie mich diesen Text auch auf 40 hinunterziehen. Ich kann das positionieren. Mal sehen, wo es ist. Wir können das auch auf 40 positionieren. So wie das, so. Und ich kann auch mein Kunstbrett schließen. Und ich werde erklären, was das Problem hier mit Adobe XD ist. Also im Grunde, was Sie hier zeigen müssen, sind all diese verschiedenen Zustände. Also aus Ihrer Fußzeile Elemente, so dass alle diese Elemente, Kreditkarten, investieren Digital, andere Links, der Song, müssen Sie sie so gruppieren, steuern G, und im Grunde eine Komponente erstellen. Und was Sie tun müssen, ist Komponentenstatus zu erstellen. So werden Sie Alongs, geschlossene Lungen, geöffnet haben. Lungen geschlossen wird ein Standardzustand sein und offen wird unio State Cards sein, Standard-Karten offen. Also und das ist das offene. Sobald Sie beginnen, alle diese Elemente eingeschlossen, ist dieser Pfeil wird offensichtlich aufklappen, und Sie gehen, um alle diese zu verbergen. So scheinen wir, als hätten wir mit der Menü-Navigation oben getan. Also im Grunde müssen Sie erstellen. So geben Sie dies für jeden einzelnen Ihrer Menüpunkte von Kreationen an. So zum Beispiel Konten hier auf der linken Seite. Dies ist der Pfeil, wenn Sie nach unten klicken, wird zu erweitern und zeigen Sie alle diese. Und das Problem damit, warum man das nicht in XD zeigen kann, ist, weil wir immer noch keine dynamischen Artboards haben. Wir haben unsere Boards dynamisch. So können Sie beispielsweise sehen, dass, wenn ich meinen Flughafen auswähle, indem Sie rechts hier klicken, Sie sehen können, dass die Responsive Größenänderung deaktiviert ist. Wenn ich es einschalte, kann dieses gesamte Kunstboard die Größe nach oben und unten leicht ändern. Aber was es nicht tun kann, ist, dass es nicht mit mehreren Komponenten umgehen kann. Weil, sorry, mehrere Komponentenzustände, weil Sie dies als Ihre Komponente haben werden. Also alle diese Fußzeilenelemente, nur zuerst Komponente und dann für jeden von ihnen, müssen Sie Komponentenstatus erstellen. Oder Hub machte Sinn, wie wir es in diesem Kurs bisher getan haben. Adobe XD kann daher immer noch nicht mit all diesen Komponentendaten fertig werden, damit es nach unten erweitert wird. Es kann nicht automatisch zurechtkommen, einen Zustand anpassen, aber es kann immer noch nicht mit mehreren Zuständen fertig werden. Also, wenn wir es Ihrem Kunden zeigen wollen, können Sie zum Beispiel alle diese offen oder alle geschlossen, außer dem ersten. Damit kann jeder damit fertig werden und man kann damit umgehen. Lassen Sie es einfach reaktionsschnell, ändern Sie die Größe in klicken Sie rechts hier, um nach oben fixiert zu werden. Du brauchst nicht all diese anderen zu machen. Also kannst du das tun. Aber stellen Sie sicher, dass Sie die unser Board selbst auswählen, so schalten Sie die Responsive Größe. Und wenn Sie dies tun, stellen Sie sicher, dass Sie diese Änderungen daran vornehmen. Also, das ist es im Grunde. Sie müssen diese Änderungen vornehmen. Du musst es so aussehen lassen. Also bin ich etwas chaotisch, wenn ich es selbst sagen kann. Sie können also nicht in diesem netten kleinen Versteck tun, wie wir es mit unserem Hauptnav hier gemacht haben. Du musst sie immer noch so an Ort und Stelle halten. Also, das ist es im Grunde für dieses Video, und das ist es im Grunde für diesen Teil des Kurses. Wir haben nun unser Responsive Website-Design abgeschlossen. Wieder einmal, wenn Sie wollen, ein wirklich ermutigen Sie dies genau den gleichen Prozess für alle diese anderen Seiten zu tun. Und für jede einzelne Seite, die Sie tun, bis oder von ihren eigenen, denn dies ist Ihre Aufgabe als Designer, Sie müssen immer noch alle diese responsive Website Design-Seiten tun , weil in Entwickler und weiß nicht auf eigene Faust oder was du in deinem Kopf hattest und was du mit diesen Seiten machen willst. Denn manchmal können sie verstehen, wie zum Beispiel, wenn wir hier auf diese Seite springen. Also ist es ziemlich offensichtlich, sagen wir, dass wir, wenn wir einen Stapel wie diesen einschließen, wir es ihnen zeigen können. Es wird so auf der Responsive sein. Es wird so auf einem Desktop-Geräte sein und im Grunde testen. Aber sie wissen zum Beispiel nicht, was sie mit diesen Seiten machen sollen. Sie wissen also nicht, ob Sie wollen, dass dieses Mädchen zentriert ist. Wenn Sie wollen, dass es von links nach rechts ist, wo er Text wollte. Wenn Sie möchten, dass der Text links ausgerichtet ist, verdienen Sie einfach so. Oder wenn Sie möchten, dass dieser Text in einer Mitte wie diesem positioniert wird. So müssen Sie immer noch Responsive Design erstellen, um für beide Kunden, Ihre Teamkollegen, Wenn Sie eine und Entwickler zu verstehen, wo Sie mit diesem Design gehen wollen, was Sie erstellen möchten, welche Änderungen wir als Bildschirme wollen beginnen, nach unten und unten in der Größe. Deshalb ist Responsive Design wirklich wichtig. Aber gerade in Bezug auf Größe des Diskurses und Länge des Diskurses, Ich habe alles erklärt, was ich im Grunde über responsive Design weiß, Dürre diese Seiten. Und jetzt werde ich dasselbe für diese Seite für Dashboard-Design tun. Ich werde Ihnen zeigen, wie wir das anpassen können, denn wie Sie sehen können, haben wir hier genau diese Marge, die viel größer ist als diese Marge auf der rechten Seite. Also werde ich im Grunde dieselben Einstellungen verwenden, aber sie nur ein wenig wegen dieser Ränder anpassen, um Ihnen zu zeigen, wie diese Seite aussehen wird, sobald Benutzer dieses responsive Design verwenden. Das kommt also als Nächstes. Und wir sehen uns dort. 60. Responsive Design: Lassen Sie uns jetzt weitermachen und beginnen Sie mit der Arbeit an dem Responsive Design für unser Dashboard. Und im Grunde, was wir tun werden, ist genau der gleiche Prozess, wie wir es für eine Website getan haben. Aber der Hauptunterschied ist, dass der linke Rand, der für unsere Navigation verlassen wird. Also, was ich tun werde, ist im Grunde zu duplizieren, unsere Board-Position in ganz unten. Und ich werde versuchen, es mit diesen sind Boards auszurichten, die meisten einfach meine Shift-Taste so halten. Und dann werde ich wählen, all dies sind Boards wie das. Machen Sie ein obligatorisches oder Control D genau hier positioniert. Und dann werde ich in meinen Prototyping-Modus springen. Klicken Sie hier und rufen Sie diese, lassen Sie uns sehen Dashboard, das darauf reagiert und sehen, wo wir sind. Responsive Website Design Dashboard Responsive Design. Also, das ist in Ordnung. Gehen Sie zurück zu Design und lassen Sie uns einige Änderungen vornehmen. Also mal sehen, wir können diese so nennen, wie sie ursprünglich waren, weil es wichtig ist. Diese sind auf Zeiger für uns angepasst, die wir für tatsächliche Responsive und Design verwenden und nur einen von jedem von ihnen entfernen werden. Und jetzt werden wir mit einigen dieser Layouts experimentieren. Also hier haben wir die Säule von 12165 auf jeder Seite. Und wenn ich hier klicke, also werden wir das anrufen, mal sehen. Doppelklicken Sie hier. Und Dashboard-Design. Und dieser eine, so große Desktop. Also, wenn wir es hier betrachten, nehme ich an, in nur ein wenig näher, Sie können in Schulden sehen wir Marge nach rechts, das ist diese von 20 im Rand nach links, das ist diese bei 401 Pixeln. Aber wenn wir uns hier ansehen, dann haben wir 165 links und rechts. Also, was wir hier tatsächlich tun können, ist zum Beispiel, und geben Sie diese links 1200. Und Sie können sehen, dass es bereits begonnen hat, Marika Position zu 20 so sein. Jetzt sind wir bei zwei oder zwei und wir sehen bereits einige Veränderungen, die hier geschehen, was in Ordnung ist, was wir sowieso tun werden. Was wir also tun können, ist von dort weiterzumachen. Also lassen Sie uns sehen, dass wir bei sind, sagen wir 14401024. Vielleicht, weil das 202 mit 20 ist, lassen Sie uns sehen, dass wir es bei 20 behalten, also öffnen wir sie. Also, richtig wird 20 sein, aber lassen Sie uns das zum Beispiel bei 180 behalten. Sehen Sie, wie die Daten aussehen. 2182, zum Beispiel. Wir können sie so positionieren. Jetzt können wir, wir werden wollen, und für die Tablets müssen wir nichts ändern, denn was sind die Tablets? Wir werden immer noch unsere Navigation hier oben haben. Was sich ausdehnen wird. Und für diese extra kleinen Geräte der eifrigen Situation wird genau das gleiche sein, legt nahe, dass diese beiden sind diejenigen, die Sie sich Sorgen machen müssen, wenn es denken , dass diese Spalten zu breit sind oder Indies Rinnenbreite zu breit sind. Du kannst natürlich mit ihnen herumspielen. So kann ich zum Beispiel die Rinnenbreite auf 20 senken. Ich kann die Spaltenbreite auf 60 erhöhen oder was auch immer, aber es liegt an Ihnen. Ich werde nur diese Optionen verwenden. Also zuerst, was ich tun werde, ist im Grunde zu replizieren, was ich hier getan habe. Und wir haben dasselbe mit diesen gemacht. Und offenbar weltraumweise. Und was Sie tun können, ist, wenn Sie anfangen, Responsive Design zu machen, wie wir es hier getan haben, können Sie sie hier organisieren. Also von links nach rechts mit all diesen Seiten, wie Sie jetzt sehen können, haben wir 246 Seiten mit diesen, die acht sind. Und Sie können diese beiden so positionieren. Also sind sie, sie werden nur ein bisschen nach hier gehen, oder Sie können sie tauschen und einige von ihnen direkt hier oben positionieren. Und dann, wenn Ihnen der Platz ausgeht, können Sie sie positionieren. Nun, offensichtlich haben wir das Dashboard-Design. Sie können es nach rechts verschieben. Sie können besser auf die rechte als auch. Es liegt also wirklich an dir. Dies wird uns natürlich viel weniger Platz nehmen als dies weil der Inhalt nicht so sehr zu dieser Seite geht. Volumenkörper. Du hast wieder 1440 angefangen. Fangen wir damit an. Also geh hier, 1440. Und mal sehen, was wir hier haben. Also haben wir 123074. Also lasst uns versuchen, das zu ändern. 3074. Mal sehen, was wir unten haben. Also 220 in zwei. Also lassen Sie uns die Dosis öffnen. Also 2222, um Schulden zu versuchen. Mal sehen. Also 30-70 für 7422 oder zwei drehen, und das ist es im Grunde. Also lassen Sie uns noch einmal überprüfen, nur um sicherzugehen. So 12307422 bis 12307422 zu N, Das ist in Ordnung. Was ich als nächstes tun werde, ist im Grunde die gleichen Anpassungen wie zuvor zu machen. Also, was ich tun kann, ist sicherzustellen, dass das hier geht, so dass ich keine Änderungen an DAD vornehmen muss. Im Grunde. Was ich als nächstes tun kann, ist im Wesentlichen an all diese angepasst. Was ich also auch tun kann, verbirgt er im Grunde meinen Text so. Also bin ich einfach mit diesen Symbolen links und vielleicht ist das deine beste Wette sowieso. Wenn die Leute zum Beispiel darüber schweben , können Sie ihnen das zeigen. Also lasst uns das schnell machen. Also für das Konto werde ich es verstecken, Transaktionen, Kredite, und war wieder, weil ich werde nur diese eine Seite zu tun. Ich überlasse es euch Jungs. Wenn Sie möchten, können Sie weitere Seiten erkunden und erstellen , nur so dass Sie ein wenig üben können. Und jetzt können Sie sehen, dass wir ein viel saubereres Aussehen haben. Und wenn ich es vergrößere, nur damit du sehen kannst, wie es aussieht. Wir haben jetzt extrem schönes und sauberes Aussehen genau hier, während immer noch all dies intakt zu halten. Also lasst uns jetzt an diesen anderen Elementen arbeiten. Also werde ich hier meine Textpositionierung auswählen. Es besteht keine Notwendigkeit, etwas zu ändern. Ich werde die Diskette hier positionieren. Und mal sehen. Wieder einmal werden wir es in vier Säulen breit halten. Und wann man hier reinspringt. Wieder einmal, weil wir diese Dashboard-Karten haben. Wir können uns natürlich anpassen. Also 1234, also wird es genau hier sein. Was wir mit der Dosis tun können, ist, dass ich diese Informationen verschieben kann, zum Beispiel 12, und dann kann ich meine Karte skalieren. Damit ich reinspringen kann, wo es ist. Hier ist es. Ich kann diese so sehen, löschen oder einfach verstecken lassen. Und jetzt kann ich diese einfach anpassen, SOT 12 zum Beispiel. Und dann kann ich Änderungen an diesen Texten vornehmen. Also sind sie bei, mal sehen, 16. Wir haben keine kleinere Größe. Also, was Sie tun können, ist tatsächlich angepasst, so Debitkarte. Und Sie können es zum Beispiel bis 921 nennen, weil es hier zeigt und Sie wissen, was es im Grunde ist. Nun, da das abgeschlossen ist, lasst uns am nächsten Abschnitt arbeiten, der die Hilfeabschnitte und comorbid hier ist, werde ich die Breite meiner Karte so anpassen. Und ich werde einfach hineinspringen und einige dieser Elemente neu positionieren oder das hier setzen. Ich werde das hier zum Beispiel setzen. Und ich denke, es sieht aus oder schreibt so etwas. Sie können es auch hier auf acht reduzieren, vielleicht nur um sich ein bisschen mehr Platz zu geben. Und lasst uns das geben und das sind 20. Also 12. Nur um mit diesem hier zu bleiben. Wir können dasselbe für diesen Text tun. Also auf zwei, nur um alles kohärent und schön aussehen zu lassen. Zu ihr rechts hier mit C ist die gleiche Höhe, die gleiche Breite, was in Ordnung ist. Das ist großartig. Jetzt gehen wir weiter und arbeiten an diesen anderen Elementen. Also lasst uns all diese Informationen einbringen. Also, wenn wir in unsere ursprüngliche springen, können wir sehen, dass 1234567. Das bringt uns sieben Spalten und das bringt uns 1-2-3-4-5. Also lasst uns auch daran arbeiten. Sehen wir uns 12345 an. Also lassen Sie es uns darauf reduzieren. Also lassen Sie uns schnell in diesem 1 ersten 12345 verstecken. Es muss also hierher gehen. Und wir haben immer noch viel Platz, um mit unseren Elementen zu umgehen, so dass ich keine Änderungen vornehmen muss. Grundsätzlich hat Adobe's de alles für mich getan. Alles, was ich jetzt tun muss, ist mehr als Festplatten hier zum Beispiel. Und Sie können sehen, dass ich hier überhaupt keine Änderungen vornehmen musste. So können Sie es zum Beispiel einfach wie Todesfälle lassen. Und das ist im Grunde das einzige, was ich wirklich unseren d Abstand ändern muss , weil man es hier sehen kann, dass sie nicht in der Linie sind. Und das gefällt mir wirklich nicht, also werde ich schnell zu all diesen hineinspringen. Mal sehen, und ich kann sie ausrichten. Zum Beispiel kann ich vielleicht, mal sehen, diese Position hier auswählen und dann verschieben, zum Beispiel 40 Pixel. So können Sie nach unten gehen, die Firmennamen wie folgt auswählen und sie dann einfach positionieren, bis Sie sich mit dem Text 1234 ausrichten. Vielleicht. Ich denke, es wird gut funktionieren. Und dann tun Sie dasselbe für diese. Also genau hier, hier, hier und hier, mal sehen, ob wir sie ausrichten können. Wir können, was fantastisch ist. Er hat ihn hierher gebracht. 12, vielleicht. Ich denke, das ist in Ordnung und es wird ziemlich gut funktionieren. Wenn Sie tatsächlich anfangen, kleiner und kleiner zu werden, was Sie tun können, ist, können Sie dies verlassen, Sie können dies verlassen, Sie können dies verlassen. Aber für diese einfache Verwendung Symbole, weil sie den Benutzern zeigen, was sie ausgewählt haben. Also werde ich das im nächsten Abschnitt des Kurses zeigen. Aber für jetzt, für dieses Video, denke ich, wir sind fertig. Ich denke, das sieht wirklich gut aus. Also lasst mich die letzte Vorschau für euch machen. Also, Molkerei Howard, ich denke, das sieht wirklich schön aus. Ich denke, das sieht wirklich kohärent aus. Und es zeigt wirklich, was Sie tun können, wenn Sie dieses intelligente Layout verwenden, um zum Beispiel zu recherchieren. Also denke ich, das sieht schön aus. Und das letzte, was ich ändern werde, ist das hier. Ich mag es nicht wirklich. Also kann ich diesen Text vielleicht ein bisschen hier verschieben. Zum Beispiel. Oder vielleicht können wir das sogar schneiden. Lassen Sie mich Ihnen das zeigen. So kann ich anstelle von 2020 einfach so zu weinern zeigen, um mir genug Platz zu geben. Offensichtlich werden die Leute wissen, was das ist. Beginnen wir also mit der Auswahl dieser. Verwenden Sie also noch einmal diese Firmennamen. So haben wir nicht ausgewählt und dieses. Also lasst uns das noch einmal machen. So wie das. Stellen Sie sicher, dass Sie sie so ausrichten. Er hat ihn hier positioniert, 123, also vielleicht 30 Pixel, das ist in Ordnung. Und jetzt sind alle diese richtig positioniert und sie sind alle in der Linie. Also gefällt mir wirklich, wie das aussieht. Also, das ist es im Grunde für dieses Video. Im nächsten Video schließen wir alle diese Ordner herunter, um die Dinge konsistent zu halten. Im nächsten Video werden wir weiterspringen und zu diesen großen Geräteabschnitt übergehen. Ich werde Ihnen zeigen, wie wir das natürlich weiter anpassen können. Und vielleicht müssen wir ein wenig mehr in der Höhe gehen, aber wir werden sehen, was passieren wird, wenn wir anfangen, alle diese nach unten zu skalieren. Also sehe ich dich dort. 61. Responsive Design: Na gut, gehen wir jetzt zu diesem. Also wieder, Control D dupliziert, alle springen direkt hier an die Spitze Control C, und springen genau hier und löschen von hier auf Kontrolle V, so. Und jetzt gehen wir weiter und passen uns etwas mehr an. Also, was ich tun werde, ist zuerst, wir werden die Größe reduzieren, also 10-24. Machen wir das zuerst. Also 1024. Nun ist die nächste Sache, diese offensichtlich anzupassen. Also 123041 lehrte Buddha Anwalt 41. Und wir sind 2182 da unten. Also ist es entweder 21822082 und das wird 3041 sein. Also mal sehen, 30412182304121 H2, 30412182. Derek, wie es 1230 ist einundzwanzig einundachtzig zweiundachtzig. Das ist in Ordnung. Also, was wir hier tun können, sind im Grunde zwei Dinge. Was Sie tun können, ist, diesen Hilfeabschnitt unter diesen Abschnitten zu positionieren und alles genau hier scrollbar zu machen, was ich eigentlich darüber nachdenke. Also im Grunde werden wir diesen Top-Text verlassen und lassen Sie uns von oben beginnen. Also werde ich diese URL direkt hier positionieren. Ich werde das Gesetz verlassen, während es so ist, werde ich das so lassen, wie es ist. Ich werde diesen Text ein wenig nach hier verschieben. Dann, was ich tun werde, ist, das hier zu positionieren, stellt sicher, dass AM bis 46 breit, so. Und ich werde dafür sorgen, dass ich das Gleiche mache. Ich werde auch meine Karte bewegen und ein bisschen, also 12, nur um uns ein bisschen mehr Platz hier zu geben. Also, das ist in Ordnung. Nun, wir können tun, ist diese Hilfe Abschnitt verschieben. Also werde ich es den ganzen Weg bis hierher erweitern. Und mal sehen, stellen Sie sicher, dass unser Kreis so etwas wie, ich weiß nicht, 300 ist. Mit 300 können wir es vielleicht hier positionieren. Wir können hier positionieren, verteilen. Bearbeiten Sie Ihre Informationen ganz einfach. Wir können das hier runterbringen. Wir können dies in einer Textzeile positionieren. Aber zuerst müssen wir es erweitern, mal sehen, genau hier. Eine Zeile, tot liegen, Cotards. Und mal sehen, wir können das hier positionieren. Mal sehen, wo wir sind. Wir sind bei 20, wir sind bei 35. Also lassen Sie uns 123420 sehen. Wir können hier 20 machen, also 121234. So können wir an dieser Stelle schneiden. Also lasst uns das machen. Ich werde sicherstellen, dass ich diese beiden auswähle. Er hat ihn so positioniert. Und dann mal sehen, diese Masse kann dort bleiben, wo sie ist. Ich kann das hier so genannte verschieben. Ich kann das hier verschieben, und das war's im Grunde. Für diesen speziellen Abschnitt. Das ist in Ordnung. Nun, was ich tun werde, ist tatsächlich zu diesen anderen Abschnitten überzugehen. Also lasst uns das verstecken. Deine Karten. Was ist diese Registerkarte „Hilfe“? Oder irgendeinen Grund nach oben gezogen würde sehen, warum es schneidet. Also Element Massenlücke, wir müssen uns in die Moschee anpassen, um zu hören und das ist in Ordnung. Jetzt ist es gut. Und lassen Sie mich die Dinge ein bisschen organisieren. Also hier haben wir das obere nav auf der morbiden nach oben auf Bruce Lee Sidebar wird danach gehen. Text wird danach gehen. Du wirst unser Hauptkonto nach dem Tod haben, deine Karten danach. Jetzt kommt die Tabs. Wir werden eine aktuellste Transaktion und alle Ausgaben haben. Lassen Sie uns schnell alle Ausgaben verstecken. Letzte Transaktionen kann ich Punkt's zeigen. Mal sehen, wo wir hier sind. Also sind wir bei 40 mesure. Wir sind auch bei 40. Also 1234, ich werde auch 40 hier sein. Werde ich das tun? Stellen Sie sicher, dass ich links ausgerichtet bin, stellen Sie sicher, dass ich das hier erweitern. Dan, was ich tun werde, ist schnell rein zu springen und sie ein bisschen besser zu organisieren. Denn jetzt habe ich viel mehr Platz zum Arbeiten. Also mal sehen, fangen wir mit unseren Tags an. So wie das. Lebensmittel-Etikett. Stellen Sie sicher, dass Sie so ausgerichtet sind. Es besteht keine Notwendigkeit für Abstände. Also werden wir es als R. Wählen Sie alle diese so aus. Und ich habe die Nummer fünf aus irgendeinem Grund nicht ausgewählt. Also muss ich es noch einmal tun. Also lassen Sie mich wählen mein Essen, Dienstprogramme und in der Nähe von Schmutz, ausgerichtet sie. Jetzt ist es in Ordnung. Jetzt gehen wir zurück zu Markennamen. Mein Dad. Jetzt ist es in Ordnung. Und wie gesagt, ich werde nichts anpassen. Ich werde einfach alles so lassen, wie es ist. Und schließlich werde ich das verstecken und das so zurückbringen. Positionieren Sie es hier. Stellen Sie sicher, dass es sich bis hierher erstreckt. Ich werde gleich hier springen. Stellen Sie sicher, dass alle diese so ausgewählt sind. Und um ein bisschen Platz zu sparen, was ich tun werde, ist, sie tatsächlich nebeneinander zu positionieren. Also lassen Sie uns von einem unbekannten gehen, müssen Augapfel es, weil Moscheen ein Reh sind. C, wie diese, 1234 zum Beispiel. Und dann werde ich es hier positionieren. Lassen Sie mich das ganze Jahr mitbringen. Verstecken Sie meine Gesundheits-Registerkarte, nur damit ich es ein bisschen besser sehen kann. Also, was wir tun können, ist, all diese zu bewegen, um zu hören, wie div wir sind, und das war's. Und statt dieses bewegte man ein Diagramm. So brauchen wir auch ein Auto Zahlungen. 40, also 1234 so. Und ich werde das nur ein bisschen besser organisieren. So sollte zum Beispiel etwas wie induce funktionieren, monatlich sollte auch funktionieren. Und da ist es. Da haben wir es. Vielleicht können wir sogar Position tut 20 zu schlagen. Mal sehen, wo wir oben sind. Ja, lassen Sie uns alles auf 20 positionieren, also auf zwei. Und das ist es im Grunde. Sie können sicherstellen, dass Sie diese Option ausgewählt haben. Oder wir können das alles in der Mitte positionieren. Es liegt alles wirklich an dir und was du damit machen willst. Also lasst uns das wirklich machen. Lasst das so machen. Und stellen wir sicher, dass dies in der Mitte ist. Mal sehen, wie locker. Also in der Mitte unseres Kreises, und jetzt können wir einfach unseren Hintergrund BG schließen. Also mal sehen, wir sind bei so etwas wie, ich weiß es nicht. Lass uns Control D sehen, damit ich es duplizieren kann. Oder ein Beispiel, um noch einen zu hören. Also 37, Watson, ich kann das hier nach unten ziehen und einfach sicherstellen, dass ich mein Original vor diesem neuen verschließe. Ich entferne es. Und da haben wir es. Unsere Ausgaben sind erledigt. Also bringen Sie zurück, um zu helfen, bringen Sie die neuesten Transaktionen zurück. Und was ich tun werde, ist offensichtlich alle in einer Gruppe zu positionieren. Jeder einzelne Inhalt, den Sie hier sehen, ist also innerhalb einer Gruppe. Nennen Sie es Inhalte so. Und was ich tun werde, ist, alle Ausgaben den ganzen Weg nach unten so zu bewegen. Es ist also positionieren und mal sehen, wo wir sind. Also 1234, so. Und Milchkuh es, wenn Sie wollen, können Sie einen Stapel erstellen. Und dann können Sie diese Elemente ändern. Wer kann das hier positionieren und das hier genau, wenn du willst. Ich werde nicht in Schulden tun. Sie können also einen Stapel verwenden, aber was ich eigentlich verwenden möchte, ist ein vertikaler Scroll. Wie Sie sehen können, ist es schlau genug, es genau dort zu schneiden. Also, wenn ich anklicke, um eine Vorschau, und das ist, was wir bekommen werden. So können Sie natürlich auf diese Menüpunkte klicken und diese Höhe bleibt offensichtlich gleich. Aber jetzt können Sie beginnen, durch diesen Bereich zu scrollen und Sie können ganz schön sehen, dass es hier abschneidet, was einfach fantastisch ist, wenn wir die animierte Version davon verwenden. So kann es tatsächlich innerhalb dieser Gruppe scrollen, innerhalb der scrollbaren Gruppe. So können Sie Gruppen innerhalb der Gruppen haben, die scrollen. Aber für dieses besondere Bedürfnis und Zweck, ich denke, das sieht wirklich fantastisch aus. Sie können dies auch erweitern, so dass Sie nicht diesen seltsamen Fehler haben , wenn Sie tatsächlich anfangen zu scrollen. So können Sie die Farbe hier anstelle von hier sehen. Aber machen Sie es eigentlich nichts aus, denn wir haben diese obere Platte genau hier, die gleich bleibt. Also gefällt mir wirklich, wie das auftaucht. Und das ist es im Grunde für dieses Video. Im nächsten Video werden wir mit der Tablet-Version beginnen. Und im Grunde können Sie schon sehen, wohin das geht. Wir werden nur all diese Elemente an unserem Raster ausrichten. Und ich werde Ihnen zeigen, wie Sie eine tippbare Navigation erstellen können und wo Sie sie setzen können. Also sehe ich dich dort. 62. Responsive Design: Beginnen wir jetzt mit der Arbeit an einer Tablet-Version. Wieder einmal werde ich das schnell und duplizieren. Also Control D. Und geben wir dem einen Namen. Also doppelklicken Sie drinnen. Entschuldigung. Ich werde einfach entfernen und diese Informationskontrolle V, um es wie so einzufügen. Und mal sehen. Also sind wir bei 76 acht. Also gehen wir weiter und 768. Wir sind in acht Spalten, wie dat. Also acht Säulen. Und mal sehen, was wir hier haben. Also zuerst haben wir 296042 für beide. Also brauchen wir das jetzt nicht. Lassen Sie mich mich noch einmal daran erinnern. Also 296042. Also zwei laufen auf 6042. Das ist in Ordnung. So Milchherde. Und was ich hier tun werde, ist tatsächlich die gleichen Optionen zu verwenden, die ich oben habe. Also lassen Sie mich jetzt schnell mein Oberteil anpassen. Also mein Dad, was ich tun kann, ist vielleicht diesen Kerl hier zu laden. Vielleicht kann ich das alles hier zeigen. Mal sehen, was wir mit unserer Navigation machen können. Grundsätzlich ist das, was ich tun wollte, um den ganzen Weg nach unten erweitert und dann all diese Informationen aus der Sidebar selbst anzuzeigen. Also lasst uns schnell, lasst uns so schnell zur Sidebar gehen. Und mal sehen, was wir tun können. Wir können vielleicht das benutzen, was wir hier benutzen. So kann ich hier doppelklicken, Kontrolle C. So kann ich dieses exakte Menü-Symbol verwenden. Springen Sie hier rechts, kontrollieren Sie v, positionieren Sie es hier in die Mitte, stellt sicher, dass wir auf der linken Seite sind, sorry, rechts ausgerichtet hier. Molkereigewohnheit. Und jetzt lasst uns an unserer Navigation arbeiten. Einige würden Kontrolle D treffen. Ich werde dies und Hintergrund eins erweitern. Also den ganzen Weg nach unten so. Und dann springe ich in meine Sidebar und lässt dich alle meine Gegenstände vakuum laden. Also traf 0. Tut mir leid, ich verstecke es hier, also zeige ich ihnen gleich hier. Klicken Sie also einfach auf diese Augapfel-Symbole, was alles in Ordnung ist. Wie in Schulden. Was ich auch tun werde, ist, dass wir das so lassen, wie es ist. Wir werden den Selektor entfernen, weil wir ihn im Moment für diesen bestimmten Bildschirm nicht benötigen. Also werden wir den Selektor entfernen. Und ich werde auch einige Farben dieser Artikel ändern. Lassen Sie diese erste an Ort und Stelle, weil wir zeigen wollen, dass wir auf einem Armaturenbrett sind, aber es enthält nur ein wenig dunklere Farben zu diesen anderen, nur damit wir sie ein wenig besser sehen können. Also lasst uns jetzt weitermachen und das tun. Ich werde einfach auf jeden von ihnen klicken. Und ich werde diese Farbe anwenden. Nur damit wir sie ein wenig besser sehen können, weil Sie sehen können, vor allem hier mit dieser Hilfe App, können Sie sie nicht wirklich so gut sehen. Also werde ich es einfach in dieser Farbe auf sie anwenden. So wie so. Und um zu zeigen, dass dies ausgewählt ist, Ich werde diese Farbe anwenden, nur um ein wenig angepasst zu differenzieren , so dass Sie sie ein wenig besser sehen können. Also da haben wir es. Das ist eine Schuld. Was ich als Nächstes tun werde, ist zum Beispiel hier oder hier zu bewegen. Und c, ich kann es mit meinen eigenen Avataren skalieren. Lass uns das sehen. 1234, zum Beispiel. Und ich kann es und die Seitenleiste ganz nach unten bewegen. Mal sehen, 1234 tot. Und ich kann natürlich meine Abmeldung nach oben verschieben 1234. So mag ich, wie das aussieht. Endlich bewegt Michael J. Egos, stellen Sie sicher, dass es links ausgerichtet ist, stellen Sie sicher, dass es zentriert ist, rechts zu wagen. Und Milchherden. Ich denke, das sieht wirklich gut aus. Vergrößern wir es, um zu sehen, wie es aussieht, und das ist in Ordnung. Was wir tun werden, ist im Grunde genau das Gleiche, wie wir es zuvor getan haben. Also lassen Sie uns einen Tipppunkt hier erstellen, wo unsere Hauptmenü-Symbol Nachrichten. Also nennen wir es diesen Punkt. Hauptmenü, Tabulatorpunkt. So wie das. Positionieren Sie es unter dem Hauptmenü oder entfernen Sie Rand und die Farbe, und das war's. Und dann werde ich im Grunde sagen, wie ich es vorher getan habe. Also werde ich diesen duplizieren. Also Control D, ich werde es oben auf all diesen positionieren. So wie das. Das ist in Ordnung. Dann lass uns mal sehen. Ich kann es hier auch ein bisschen runterbringen. Oder nein, lassen wir es so hoch. Und dann wählen Sie alle so aus. Mal sehen, wo wir sind. Das war's. Hit Shift Control M, So kann ich eine Maske wie Schulden erstellen. Und ich werde all das hier unten verschieben, weil dies mein Top nav VG ist , nachdem alle Indizes diesen Hintergrund insgesamt. Also endlich, und lasst uns diese Moschee auf die Probe stellen, und lasst uns das hierher bringen. Das ist in Ordnung. Nun, lassen Sie uns das auch ansprechen. Und das ist in Ordnung. Oder reduzieren Sie seine Sichtbarkeit auf diese. Und nun endlich, lasst uns weitermachen und mit unseren Inhalten herumspielen. Also kann ich hier klicken, um es von einem Festplattenabschnitt zu entfernen. Also werde ich es immer noch als Inhalt bezeichnen, also ist das in Ordnung. Aber ich kann auch tun, ist dies den ganzen Weg bis hierher zu erweitern, damit ich sehen kann, was ich tue. Und was ich tun kann, ist im Grunde alles so anzupassen , dass wir sie in den Stapel stecken können. Legen Sie sie übereinander eines erweitern Sie dies, um hier zu gehen. Während erweitert dies auch hier zu gehen. Ich werde meine Karte bewegen, um zu hören, zum Beispiel, mal sehen, wo wir sind. Klein. 23, mal 1234 sehen, denn offensichtlich haben wir jetzt viel mehr Platz. Ich kann die zentriert positionieren, und ich kann sicherstellen, dass sie spät zentriert sind, Dennis. Und ich kann sie zum Hören positionieren. Und jetzt sehen sie ein bisschen anders aus. Ich kann den Text viel näher bringen. Gleiche Flüssigkeit bis Paginierung. Also lassen Sie uns 1234 sehen, vielleicht irgendwo wie wagen. Ich mag diesen Abschnitt nicht wirklich. Also vielleicht können wir gehen und sehen, mit diesem, für, mit diesem. Mal sehen, wie das aussehen wird. Also für Position oder Karte hier. Mal sehen, vielleicht können wir einige Änderungen an diesem Text vornehmen. So wie dieser 1212. Und lassen Sie uns diese Textkarte kopieren, bis sie hier auf 20 Distend positioniert ist. Ich werde meine Karte in die Mitte legen oder Sie tun können ist sicherzustellen, dass dies und das in der Mitte sind. Das ist 20 runter. Stellen Sie sicher, dass es auch in der Mitte ist. Also lasst es uns hier positionieren. Ja, ich werde meine Karten BGN etwas nach unten erweitern. Positionieren Sie hier hinein. Und mal sehen. Also, genau hier sind wir um 20 Uhr. Und mal sehen, wir können das hier geben. Deswegen. Und schließlich werde ich das hier positionieren. Mal sehen. Also muss ich sie tatsächlich außerhalb meines Stapels bewegen. Also werde ich diesen Stapel entfernen. Und dann positionieren Sie Disk hier, sorry, wir sind immer noch in einem Stack so für den Inhalt. Also lasse ich ihn alles dafür ausstellen. Und später können wir es vielleicht zurückbringen. Also, ich wage, ich werde die Gruppierung all diese Positionen hier aufheben, so. Denn jetzt brauchen wir eigentlich keinen Cutoff-Point. Wir können diese Gegenstände einfach dort positionieren, wo Sie trotzdem sein sollten. So wie Todesfälle, können wir all das zur Dezentration bringen. Und deine, mal sehen, so. Ok? Und ich kann die Breite meines Textes skalieren, vielleicht bis an die Ränder, so etwas. Bringt das Gleick zurück. Stellen Sie also sicher, dass dies zentriert ist. Stellen Sie sicher, dass Sie es genau hier positionieren. Also 12. Und das ist so im Zentrum unserer BAG. Positionieren Sie es in ein wenig. Siehst du so. Und das ist in Ordnung. Positionieren Sie unsere Paginierung in der Mitte. Mal sehen, was wir hier hatten. Also hatten wir es 28 runter. Das ist also zu viel 12312, also 28, also ist es genau die gleiche Position wie diese. Lass uns das ein bisschen runterlegen. So 1234 vielleicht, und ich kann schnell voran und organisieren diese Elemente. Mal sehen, wo es ist. Also Kreis. Und wir können diese Maske sogar entfernen, weil wir sie nicht mehr brauchen. Vielleicht können wir diese drei einfach unseren Raum ausfüllen lassen, weil ich wirklich denke, dass es zu viel ist. Manchmal können Sie mit diesen Elementen, wenn Sie wollen , aber ich denke, es wird genau so funktionieren. Also sind wir bei 30. Ich werde sie so zehn runterbringen. Und mal sehen, es werden 40 so sein. Ich werde all das so positionieren. Also sieht alles schön rein. Wir müssen die Dinge nur ein bisschen neu organisieren. 35 Warnungen positionierten diese als, mal sehen, 20. So wie das. Und mal sehen, ich kann jetzt springen und Änderungen an all diesen vornehmen. Also fangen wir mit den Zahlen an. Also kann ich auch die Zahlen auf 20 setzen, den ganzen Weg bis hierher. Also mag ich diese 12. Dann kann ich meine Tags so ausrichten. Stellen Sie sicher, dass sie ausgerichtet sind und sie positionieren können. Zum Beispiel C 123, das ist in Ordnung. Lassen Sie uns nun unsere Geschäfte ausrichten und sehen, wohin sie gehen können. Ich Sollten sie ausgerichtet sind und sehen, zum Beispiel 123, das ist in Ordnung. Und ich denke, es gibt ziemlich viel Atemraum, also sieht alles gut aus. Eine weitere Sache ist mit der Last mehr. Also reorganisieren Sie es tatsächlich ein wenig. So Pfeil-Symbol und sehen 20 Pixel und stellen Sie sicher, dass es in der Mitte wie folgt ist. Also, jetzt ist es in Ordnung. Und ich möchte nur überprüfen, ob ich auch bei der vorherigen einen Fehler gemacht habe. Wo es ist, hier ist es. Wir machen das. Also schau dir diesen Knoten an, es ist in Ordnung. Sie können sehen, dass der Pfeil genau hier ist. Aber ich habe hier einen Fehler gemacht. Also lasst uns das auch ein wenig später organisieren. Das ist in Ordnung. und stellen Sie sicher, dass es so in der Mitte ist. Direktion. So bekannt, dass das abgeschlossen ist. Gehen wir nun zurück zum Datenträgerabschnitt. Und schließlich, lasst uns an diesem letzten arbeiten. Also sind wir bei 40. So wie so. Und ich werde mich so für unser neues Rasterlayout anpassen. Ich kann sie wirklich so lassen. Oder ich kann mein eigenes separates Layout haben, was ich eigentlich tun werde. Mal sehen, wir sind bei 20. Wir können jetzt Ds organisieren, um so zu sein. Also 20, lass uns Lambdas sehen. Also 20, ich kann das erweitern, um nach unten zu gehen. Das kann bei 20 ich dat sein. Und mal sehen, wo wir hier sind. Also 22, lassen Sie uns alle diese auswählen, 1-2. Ich werde das 12 runterlegen, also 20, und ich kann alles reinbringen. Dann kann ich sicherstellen, dass das zentriert ist. Ich kann alle diese auswählen, stellen Sie sicher, dass sie links ausgerichtet sind. Sie sind innerhalb des Kreises und des Kunstwerks selbst zentriert. Vielleicht zu hören, und das ist es im Grunde. Das haben wir nun abgeschlossen, der Stand unseres Designs einfach mehr mit ein bisschen so. Und das ist es im Grunde für die Tablet-Version. Ich werde diesen Punkt einfach abschneiden, irgendwo hier herum. Sehen wir uns 1234 an. Das ist also perfekt. Und was wir tun können, ist Hit Vorschau, nur um zu sehen, wo wir wegen der Turbulenzen sind, können Sie offensichtlich nach unten scrollen. Also denke ich, dass diese Information viel sauberer aussieht und viel besser organisiert wie diese. Vielleicht können wir diese Informationen sogar entfernen weil sie die Validierung hier zeigt. Also wird es nur Ihre Karten sagen und ich denke, das wird gut. Das ist auch in Ordnung. Das sieht toll aus. Also lasst uns jetzt schnell darauf hineingehen. Also bekommt es diese Informationen und das ist in Ordnung. Ich werde die Gruppierung aufheben, weil wir sie nicht mehr als Text und Gruppe brauchen. Und das ist im Grunde das einzige, was wir jetzt noch tun müssen , ist, diese Navigation zu erstellen. Also lasst uns das machen. Ich kann zum Beispiel diese Tabletten oben jetzt nennen. Oder ich kann es sogar mobil Top Lab nennen, aber so. Und mal sehen, was wir damit machen können. So können wir die Steuerungstaste drücken. Wir können in den Tab-Zustand gehen. Innerhalb dieses Spitzenstaates werden wir unsere Moschee erweitern, wo sie ist, hier ist sie. Also werde ich es den ganzen Weg bis zu diesem abgeschnittenen Punkt hier erweitern. So kann ich etwas näher heranzoomen. So wie so. Das ist alles in Ordnung. Ich werde auch das gleiche für dieses Top jetzt Vg tun, also wird es bei 100 sein. So geht es bis hierher. Und schließlich wird unser Hauptmenü-Symbol in seinem Tab-Zustand sein. Also schuldet es. Lassen Sie uns jetzt voran und erstellen Sie es schnell und sehen, was wir bisher haben. Also werde ich meine Hauptmenü Tab Punkt eines Klicks auf Anzeigen zu finden. Ich wähle Automatisch animieren. Wählen Sie den Zustand ist in 0,6 Sekunden, weil das ist, was wir die vorherige Zeit verwenden. Und dann gehe ich in den Tab-Zustand, öffne Haupt-Minitab-Punkt-Klick. Ich gehe in den Standardzustand und lass uns schnell sehen, was wir haben. Gehen wir also zurück zu unserem Standardzustand. Klicken Sie auf Vorschau, vergrößern Sie diesen hier. Geben Sie ein, wir haben es. Wir haben diese nette kleine Animation, die uns alles zeigt, was wir sehen müssen. Und ich denke wirklich, es sieht gut aus, weil in Dashboards zeigen uns, dass es ausgewählt ist. All diese sind ausgegraut. Du kannst sehen, dass du es bist, Michael Jacobs. Sie können sogar hier beschriebene Position, wenn Sie möchten. Aber ich denke, es ist in Ordnung. Wir haben immer noch diese schöne und Emission, weil wir das gleiche Symbol verwendet. Ich finde, es sieht toll aus. Und ich habe wirklich Delta genommen, dieses Design kam heraus, um wirklich nett und wirklich glücklich damit zu sein. Und das ist es im Grunde für dieses Video. Im nächsten Video, im letzten Video über responsive Design, werden wir an der mobilen Größe arbeiten. Und im Grunde, was wir tun werden, ist genau die gleichen Einstellungen zu verwenden. Wir werden nur ein paar Änderungen vornehmen. So können Sie sehen, wie das alles aussehen wird. Also sehe ich dich dort. 63. Responsive Design: Lassen Sie uns nun unser Responsive Design für das Dashboard beenden. Und ich möchte mich im Voraus für die Mitarbeiter im Hintergrund entschuldigen, aber ich kann nichts dagegen tun, ist nur ein paar laute Nachbarn, die etwas Arbeit wissen. Also letzte Sache, die wir tun müssen, ist noch einmal klicken Sie rechts hier, Kontrolle D, um diese Dartscheibe zu duplizieren, doppelklicken Sie rechts hier. Kopieren Sie diesen Text. Ich werde hier direkt einspringen und doppelklicken und ich werde alle diese Informationen löschen und einfach V steuern, um diesen Text einzufügen. Wieder, jetzt die Schulden abgeschlossen, was wir tun müssen, ist offensichtlich reduzieren die Größe unseres Board zu entscheiden, oder 375. Und lassen Sie uns schnell tun, es fügt oder 375 so hinzu. Wir werden für Spalten wie diese verwenden. Und mal sehen, wir haben 306120, also lassen Sie uns diese Werte verwenden. Also 306120, lassen Sie es uns wieder zu früh 6122 tun. Und da hast du es. Ich weiß wirklich nicht, warum Adobe XD diese Gewichte hält Y diese Berlioz aufzieht, warum wir das erste Mal ändern wollen, aber es macht diese komplexe Matte im Hintergrund. Vielleicht wird es aus diesem Grund nicht tun. Gehen wir jetzt weiter und beschäftigen wir uns zuerst mit unserer Navigation. Also, um das zu tun, muss ich all diese absenken. Denn wenn ich anfange, mein Logo zu senken, aber du kannst sehen, wie das aussieht. Also werde ich voran gehen und mein Logo so hineinziehen. Und ich werde es hier positionieren. Das ist also mein PNG-Logo und ich mache im Grunde dasselbe, wie ich es vorher getan habe, als ich dir das zeige. Ja. Zuvor. Also lasst uns voran gehen und uns verstecken. Und das könnte es vielleicht auf so etwas senken. Und was ich auch tun kann, ist in unsere mobile Navigation direkt hier zu springen. Und ich kann mein Logo von der Heilung kopieren, und ich kann das von Held kopieren. Aber weil wir das hier bereits geschaffen haben, lassen Sie uns nicht stören. Nehmen wir eigentlich nur das Logo, weil es das gleiche ist. Also werde ich hier reinspringen. Ich werde das Logo verwenden und sehen, Hauptmenü-Symbol, Kontrolle soo. Gehen wir zurück zu hier. Springen Sie in Control V ich positioniere sie an Ort und Stelle so. Ich werde diesen löschen. Ich lösche mein Hauptmenü-Symbol, Hauptmenü, tippen Sie auf Punkt. Mal sehen, wo es ist. Also lasst es uns hier positionieren. Zum Beispiel. Lassen Sie uns die Farbe überprüfen, nur damit ich nach Schulden darauf klicken kann und ich es auf so etwas erhöhen werde. Ich denke, es ist in Ordnung. Und mal sehen. Top jetzt BG ist dieser ein Punkt. Jetzt ist BG Disziplin Feststoffe bringen sie beide in so. Lassen Sie uns unser Logo und unser Navigationssymbol positionieren, so etwas wie dieses. Und ich kann diese beiden einfach auswählen. Wählen Sie diese aus und stellen Sie sicher, dass sich alle in der Mitte befinden. So wie das. Ich werde sicherstellen, dass mein Menü-Symbol mit meinem Logo aufgereiht ist, was es ist. Und das ist in Ordnung. Dot jetzt BG und lassen Sie uns jetzt mit Teer Maske befassen. Also reden Sie jetzt BG, ich bringe es in den ganzen Weg hierher, wie Schulden. Und lassen Sie uns jetzt mit all den anderen Informationen umgehen. Also mal sehen, wir haben diese Sidebar. Und wie Sie sehen können, funktioniert die Sidebar gut. Also funktioniert alles gut. Avatar ist da. Michael Jacobs ist Derridas Fund Top jetzt BG. Also, wenn ich es aufdecken, wie Sie sehen können, können wir all diese Informationen deutlich sehen, was in Ordnung ist. Lassen Sie uns einfach mit Top jetzt BG umgehen und ich denke, es wird ziemlich gut funktionieren. Was ich an dieser Stelle tun kann, ist tatsächlich alle diese Informationen zu kopieren, um Control C zu erhalten. Ich kann in den Tab-Zustand gehen, hinein springen, Control V drücken. Ich würde das löschen, das, das, das, das, und einfach Lassen Sie das hier rein. So wie so. Ich ändere mein Hauptmenü-Symbol, um so zu tippen, weil wir es bereits angetippt haben. Ich werde meine Maske erweitern, so dass sie den ganzen Weg runter bis hierher gehen kann, so. Es deckt also die Gesamtheit davon ab. Was wir auch tun können, ist, all diese Informationen zu wählen und sie nach links zu schieben. Zwei sind Gitter, so dass es sich so schön an unserem Gitter ausrichten kann. Ich weiß nicht, warum Al-Azhar nicht so ausgerichtet ist, wie es Zweifel haben sollte. Und vielleicht kann ich meinen Text an einem diskreten Punkt ausrichten, was ganz in Ordnung ist. Und das ist es im Grunde. Das ist unser Tab-Status. Das heißt, zurück in den Standardzustand. Und was ich tun möchte, ist, das auch hier anzupassen. Also lassen Sie mich meine Sidebar hier ins Raster verschieben. Lassen Sie mich meinen Avatar bewegen. Und Michael Jacobs sollte gleich hierher gehen. Molkereigewohnheit. Nun, da all das ausgerichtet ist und gut funktioniert, ist es jetzt mit unseren Inhalten zu befassen. Zunächst einmal können wir unsere Inhalte so ausrichten. Und wie Sie sehen können, können Sie direkt nach innen springen und sich mit diesen beschäftigen , weil sie wirklich die einfachen sind. - Karte. Es gibt wirklich nichts mehr zu ändern. Aber lasst uns zuerst hineinspringen und uns mit unseren Texten befassen. Also, wenn ich Sie zurück zu unserem Website-Dashboard, sorry, website responsive. Also hier sind wir bei 24 Schrauben und dieser Text ist 16 unregelmäßig. Also lasst uns jetzt dasselbe hier machen. Also sind wir bei 24 Volt für diesen hier. Also lasst es uns hier finden. Dario es. Und das wird 16 unregelmäßig sein. Da hast du es. Jetzt sind die Schulden abgeschlossen. Ich glaube nicht, dass ich weitere Änderungen vornehmen muss , weil es den Text direkt in der Zeile schneidet. Aber wenn wir, wenn es noch weiter gehen, dann werden Sie den Text umwickeln, zum Beispiel, so dass wir Dezember und unten in dieser Zeile setzen können. Aber ich denke, es ist in Ordnung für unseren Fall vorerst. Lassen Sie uns jetzt sehr schnell mit dem Abstand umgehen. Also, wenn ich dich zurück hierher bringe, wenn ich mich richtig erinnere, waren es 80. Aber lassen Sie uns nachsehen. Und Jup, es sind 80 überall. Also lasst uns den gleichen Trick mit diesem machen. Also werde ich meine Inhalte auswählen und sehen, wo wir sind. Wir sind bei 50, also 123, wir sind bei 80. Ich werde positionieren, das wird 35 sein, aber 40, so. Das ist auch 40 davon. Und jetzt beschäftigen wir uns mit unseren Inhalten. Nun, was ich vor allem tun werde, ist einfach erweitern diese Karte. Also hier werde ich den Inhalt nicht ändern und mich nicht mit irgendeinem alten toten Zeug beschäftigen. Was ich als Nächstes tun werde, ist, all die zu benutzen. Also mal sehen, das sind Wachen. Verwenden Sie diese beiden auf der Unterseite. Und ich werde auch mein Board erweitern, damit es den ganzen Weg nach unten gehen kann. Und denken Sie daran, dies ist Ihr Scrollpunkt oder Sie sind zum Beispiel über dem Fehlerwind. Also wird es einfach den ganzen Weg runter gehen. Also mal sehen, vielleicht funktioniert diese 80, vielleicht 4234, weil ich denke, dass es jetzt viel besser ist, weil wir den gleichen Abstand zwischen all diesen Karten haben. Und wenn wir hier überprüfen, haben wir 40, was ein großartiges ist. Und jetzt lasst uns schnell voran gehen und all diese so nach unten bewegen. Ich verschiebe meine Hilfe-Tab, um hier ausgerichtet zu sein. Mal sehen, wir sind bei 40, das ist in Ordnung. Stellen Sie sich einfach so ein und Sie müssen nichts anderes tun. Das ist auch großartig. Nun, was wir für die Transaktionen tun werden und für dieses Zeug ist, dass wir ein neues Layout planen müssen, weil das offensichtlich nicht so funktionieren wird. Wir können es also nicht ändern, wir können es in diesem Stadium nicht bearbeiten. Was wir also tun müssen, ist einfach anzupassen, wie all diese Dinge aussehen werden. Also, was ich zuerst tun werde, ist eigentlich mit diesem hier umzugehen, weil es viel einfacher ist. Also werde ich reinspringen. Alle Ausgaben Schönheit. Ich werde es erweitern, um von einem Positionsschalter zu hören. Und was ich tun kann, ist einfach das und das zu verwenden, positionieren Sie es wie so Position Abneigung. Also positioniere ich mein Diagramm genau hier in der Mitte. Und mal sehen, ich kann jetzt mit diesen umgehen , damit ich sicherstellen kann, dass das in der Mitte ist. Und ich kann mein Rechteck-Werkzeug verwenden und es von hier nach hier positionieren. Verwenden Sie ihn und diesen Text, um sicherzustellen, dass er sich in einer Mitte befindet. Dann positionieren Sie mein Rechteck von hier nach hier. Sie also von dieser Kante bis zu dieser Kante sicher, dass sich diese beiden in einer Mitte wie diesem befinden. Und dann habe ich mein Rechteck entfernt. Nun, was ich mit diesem Diagramm machen kann, ist, dass ich es dort lassen werde, aber lassen Sie sie schnell mit diesen umgehen. Was ich also tun kann, ist im Grunde zwei direkt nebeneinander zu stellen. So kann ich zum Beispiel Essen hier setzen . Dienstprogramme und lassen Sie sehen, Auto Zahlungen können hier gehen. So hat es sie positioniert, um zum Beispiel 40 voneinander zu sein. Mal sehen, wo wir sind. Und ein Schreibtisch, um meinen Abstand so zu vermasseln. So 1234. Und Sie können Position muss in der Mitte sein. Dann kann ich hier nah positionieren und Essen genau hier, nur so dass wir es haben. Ungefähr den gleichen Abstand. Also werde ich diese beiden so zusammenstellen. Und dann vergewissern Sie sich, dass ich 1234 so mache. Und Milchprodukte haben es. Ich werde sie 40 nach unten positionieren. Also, um 1234, werde ich das hier abschließen. Sie können Guides verwenden, aber ich fand das, so viel einfacher, viel schneller, und ich kann damit fertig werden und mehr. So sind alle Ausgaben abgeschlossen. Jetzt kommt der komplizierteste Teil im Grunde, weil Sie immer noch alle diese Informationen Ihren Benutzern präsentieren möchten. Du willst ihnen immer noch sagen, wo sie das Geld ausgegeben haben. Aber nur um sich zu erinnern, dies ist Ihr grundlegendes Dashboard. Also, wenn ich Sie den ganzen Weg hierher, zu unserem Menü, in den Tiefenzustand bringe, können Sie sehen, dass wir am Armaturenbrett sind. Wir sind also auf dem grundlegenden Dashboard, das nur die grundlegenden Informationen für zusätzliche Informationen über Ihre Transaktionen zeigt . Sie gehen auf die Transaktionen tippen. So werden Sie tippen als Menünavigation, Sie gehen auf die Registerkarte Transaktion und dann werden Sie in der Lage sein auf Ihre Transaktion zugreifen und im Grunde anwenden, was Sie wollen. Also, wie wir das tun werden, ist, dass wir einige Änderungen an unserem Layout direkt hier vornehmen werden. Also zuerst, ich werde reinspringen und das den ganzen Weg nach unten verlängern, so. Ich werde sicherstellen, dass das hier genau so positioniert ist. Und was ich tun werde, ist ein Layout zu finden, das das Beste für diese Dinge sein wird. Also werde ich das hier verschieben und sicherstellen, dass es in einem Zentrum ist, 1234. Ich denke, wir werden genug Platz haben, aber wenn nicht, werden wir uns später damit befassen. Also fangen wir jetzt an. Mal sehen. Wir können zum Beispiel wählen, diese isst bei 18. Damit wir Dad anpassen können. Aber das werde ich nicht tun. Ich werde das alles einfach nach unten bringen. Also gibt es mir genug Platz. Ich werde meinen Preis so einziehen. Ich werde sicherstellen, dass es aufgereiht ist. Dan 20. Mal sehen, das ist bei 20, was in Ordnung ist. Ich kann das hier unten positionieren. Stellen Sie sicher, dass es zehn ist. Und ich kann zum Beispiel sehen, was ich hier tun kann. Vielleicht kann ich das so positionieren, dass es sich damit ausrichtet und mein Essen so und Milchgewohnheit ausrichtet. Jetzt haben wir diesen Abschnitt abgeschlossen. Also jetzt gehen wir weiter und beschäftigen uns mit anderen Abschnitten. Sie können es natürlich mit diesen Layouts so viel wie Sie wollen erkunden. Aber ich denke, das ist für unsere Zwecke gut. Also zehn, ich werde in der Nähe positionieren, um 20 zu sein. Also werde ich den Preis so senken und mal 12 sehen. Denn offensichtlich können diese Unternehmen abschneiden. So zum Beispiel, vielleicht kann es nur Zara sehen, vielleicht kann einfach Starbucks sagen. Wenn Sie nicht genug Platz haben und Sie gehen sogar tiefer mit Ihrem, mit Ihrer Größe. Also lasst uns mit gehen. Ich werde das noch einmal bewegen, wird zehn nach unten sein, so. Ich werde zwei Dienstprogramme hier stellen, stellen Sie sicher, dass sie 21 sind. Mehr Grund, warum ich den Preis und unten und den Namen D setzen, So Dienstprogramme und so weiter oben ist, weil, wenn ich möchte, zum Beispiel, fügen Sie mehr zu diesem. Also, lassen Sie uns zum Beispiel vorstellen, dass diese Ausgaben nicht 270,73$ waren, aber sagen wir für $1000 oder $20.000 oder was auch immer, dann werden wir diesen Preis nach links erweitern und dies nach links reduzieren. Ich hoffe, das ergibt Sinn. Also noch einmal, in diesem Fall, anstelle von 0 und ich speichere, wird es nur Zara sein. So gibt es uns mehr Platz und es kann automatisch gehen. So codiert, kann es diesen Namen automatisch schneiden, während dieser Preis nach links erweitert wird. Ich hoffe, es ergibt keinen Sinn. Lassen Sie uns schließlich mit diesen anderen umgehen. Also werde ich das hier positionieren und sicherstellen, dass es bei zehn ist. So wie das. Ich werde hier mehr davon sehen, also 12. Und Sie können deutlich sehen, warum ich das getan habe, also schneidet es nicht mit dem Namen hier. Lassen Sie uns das schnell positionieren, um hier zu sein. Stellen Sie sicher, dass es auf 20 eingestellt ist. Und lassen Sie uns die schließen. Stellen Sie sicher, dass das bei 40. Ich werde das auf dem Weg runter nach hier bewegen, damit es uns genug Platz gibt. Positioniert ist hier, wie so, und stellen Sie sicher, dass das Essen hier aufgereiht ist. Und noch einmal, wenn Sie nicht wollen, dass dies so ist, kann ich schnell fällig positionieren, damit ich es erklären kann. Was Sie auch tun können, ist diese Orte zu wechseln. Also, was Sie tun können, ist, anstatt Auto Zahlungen zu positionieren, was Sie tun können, zum Beispiel, setzen Sie das Auto Payments Logo als nächstes, sorry, Auto Zahlungen Symbol neben diesem Namen. So neben Mercedes Benz zum Beispiel. Und Sie können den Preis nach oben Schulden setzen. Du wirst in der Lage sein, viel mehr Platz zum Spielen zu haben. So können Sie den Preis hier positionieren. Anstelle von Auto-Zahlungen wird dieser Raum leer sein. Egal wie lange der Name des Unternehmens ist, es kann sich nach rechts erweitern. Während dieses Gesetz, kann dieses Symbol neben dem Namen des tatsächlichen Unternehmens gehen. Also kannst du das auch tun. Sie können auch farblich codiert, damit zu entsprechen. So können wir Ihnen das nur schnell zeigen, lassen Sie mich schnell voran und beenden Sie dieses Layout. So können Sie wählen, wie dieses Layout aussehen soll. Also T2. Und lassen Sie mich meinen Preis so positionieren. Das ist ein 20. Lassen Sie mich noch mehr diese beiden. Also 2341234. Ich werde wählen, dass es hier geht. So wie das. Was ich jetzt mache, ist, genau die gleichen Informationen zu verwenden , wie wir es während unseres gesamten Designs tun. Ich bestelle nur schon auf andere Weise. Aber was Sie tun können, ist schauen und Ihnen ein Beispiel für das Essen geben, sagen wir. Was wir also tun können, ist einfach hier zu positionieren. Verwenden Sie das Lebensmittel-Tag, aber löschen und Text für Lebensmittel. Also sind wir einfach mit dem Symbol im Grunde links. Und Sie können dieses Symbol hier positionieren. Und bewegte einen Namen wie diesen, zum Beispiel. Wählen Sie dann dieses Werkzeug aus und stellen Sie sicher, dass es sich in der Mitte befinden. Und jetzt können wir einfach dieselbe Farbe auf unseren Text anwenden. So wie das. Und Milchherde. Dieses Layout ist viel sauberer, es sieht viel schöner aus. Und was Sie auch tun können, ist zum Beispiel, Schalter Plätze, sah Starbucks Kaffee kann oben wachsen und unten kann zum Beispiel heute und der Preis n gehen, was auch immer Sie wollen. Aber wenn Sie dieses Layout besser finden, die es tatsächlich tun, lassen Sie uns damit laufen. Aber Sie müssen mit den Entwicklern darüber sprechen. Also müssten Sie diese separaten Ebenen exportieren und ich werde es später DAT mit Ihnen teilen. Aber zuerst, lasst uns DES eins vervollständigen. Also eine Transaktion, mal sehen wir Claude Stagg und wir enthalten alle Workloads Text. Ich werde sicherstellen, dass dieses Symbol mit meinem Text wie folgt aufgereiht ist. Mein Dad zwei zehn, war es bis zehn? Hier? Das war es. Und stellen Sie sicher, dass dieser Zara-Text diese Farbe hat. Und positionieren Sie einfach Ihren Preis nach oben. Das ist in Ordnung. Lassen Sie uns mit all diesen anderen umgehen. Also werde ich mein Dienstprogramm-Tag verwenden, meinen Text entfernen, mein Dienstprogramm-Symbol hier positionieren. Stellen Sie sicher, dass dieser Text zehn geht, der Preis steigt. Dieser Text geht in diese Farbe. Und diese Schicht sieht bereits viel schöner aus Mathematik. Wie gesagt, ich wollte euch nur zeigen was der optimale Weg für Entwickler ist, sich nicht zu sehr zu ändern. Und auf diese Weise wird Design und tatsächliche Benutzererfahrung viel besser, viel sauberer. Aber Entwickler werden leider diesen zusätzlichen Job haben , den sie tun müssen. Und Sie werden den zusätzlichen Job haben, weil Sie diese Tags separat exportieren und bereit sind, das später mit Ihnen zu teilen. Also lassen Sie uns mit dem Lebensmittel-Tag umgehen und ging, um den Text zu entfernen. Position könnte Lambdas symbolisieren, nach hier verschoben. Und grüne Mitte, so. Und schließlich, lassen Sie uns mit der Kleidung umgehen und beenden. Das ist ich. Ich muss mein ganzes Symbol bewegen , das diesen Text mehr mit zehn verwenden. Und schließlich, bewegen Sie das auch nach oben. Und da haben wir es. Wir haben unser Handy fertiggestellt. Dafür und und Dashboard, aber positioniert ist 40 sein. So 1234. Ich werde meinen Arm abschließen oder es wagen. Und siehe 1234. Ich werde es dort schließen. Wieder einmal können Sie Guides verwenden, aber in meinem Fall fand ich es viel einfacher. Ich, das sollte ich bekommen 40 liebenswerte Gewohnheit. Jetzt ist es schnell Vorschau dies, sehen, was wir bisher getan haben. Und lassen Sie mich Ihnen auf diese Weise zeigen. Also, wenn ich hier tippe, muss ich es eigentlich Prototypen erstellen. Also habe ich das schnell gemacht. Wieder einmal werden wir auf unser Logo tippen. Es bringt uns zu, mal sehen, Autonomie Tab. Und gehen wir zu, mal sehen, mal sehen, mal sehen, was ich getan habe. So furchtbar einfach. Hinweis: 0,06 Sekunden, mein Dad. Und gehen wir zum Tab-Zustand. Ihr Stolz hier. Standardstatus. Mal sehen, ob wir getan haben, was ich glaube, wir getan haben. Mal sehen, tippen Sie auf. Ich wusste es, weil ich den Tap Point für unser Menü-Symbol, Icon, erstellen muss. Also lass mich gleich hier springen. Und deshalb müssen Sie diese langweiligen Tiefenpunkte erstellen. Denn wenn Sie auf das Symbol klicken, wie Sie gerade gesehen haben, und lassen Sie mich Ihnen das noch einmal zeigen. Also, wenn ich auf das Symbol klicken wird, um das Symbol zu animieren, nicht die gesamte Menüanimation. Deshalb müssen wir leider diese Hauptmenü-Tab Punkt setzen. Und ich werde die Vorlage hier hinter dem Hauptmenü-Symbol einfügen. Geh in Position, um zu dezentrieren. So wie das. Stellen Sie sicher, dass es irgendwo hier ist, was in Ordnung ist. Dan, gehen wir weiter und klicken auf Prototyp. Also auf der Registerkarte Punkt selbst, Klicken Sie darauf. Autonomie ist in unserem 0.06 Tab. Und gehen Sie so zu Ihrem Tab-Zustand. Finden Sie es hier. Und ich muss es auch hier einfügen. Also verschieben Sie es hier und verschieben Sie es hier, direkt unter meinem Icon-Prototyp, klicken Sie darauf. Tippen Sie auf Punkt. Und wir gehen in den Default State. Schauen wir uns an und sehen, ob es funktioniert. Und jetzt lass uns Vorschau treffen. Es funktioniert immer noch nicht. Oh, da ist es. Es braucht einfach zu viel Zeit aus irgendeinem Grund. Ich weiß nicht, warum. Vielleicht ist mein Computer nur hinkt. Schauen wir es uns noch einmal an. Okay, also passiert nichts wirklich. Oh, ich verstehe, warum ich irgendwo draußen klicken muss. Es ist mein Fehler. Aber sowieso, da hast du es. Sie können sehen, wie schön das aussieht. Also muss ich irgendwo nur hier klicken, denn wenn wir auf das Symbol selbst klicken, wird es das Symbol selbst animiert. So können Sie sehen, wie das funktioniert und Sie können sehen, wie es aussieht, als hätten wir noch diesen schönen Unschärfe-Effekt. Wenn Sie denken, dass es in diesem Fall zu viel ist, können Sie es wegen all dieser weißen Farbe senken. Es macht es einfach irgendwie zu viel bekommen vielleicht. Aber ich denke, es funktioniert gut. Eine weitere Sache, die ich Ihnen zeigen möchte, ist, dass wir immer noch diese Navigation haben, also sind wir im Standardzustand. Ich kann hier klicken. So feste Position whens crawling, denn wenn ich eine Vorschau und beginne scrollen, können Sie sehen, dass wir die Navigation oben nicht sehen. Also, was Sie tun können, ist wählen Sie diesen Navigationsbereich. Sie können das sowohl für Tablet als auch für Mobilgeräte tun da Sie sehen können, dass dies unser Grenzpunkt für das Tablet ist. Also werde ich auf feste Position Vans kriechen klicken. Ich werde das Gleiche für diesen hier tun. Und ich glaube, ich habe das für das Handy überhaupt nicht getan. Also lass uns mal sehen. Ich kann es für alle tun. Das ist also behoben. Das ist behoben. Aber das ist nicht, weil wir es geändert haben. Gehen wir also weiter und zurück zum Dashboard und sehen, wie es jetzt aussieht. Wenn Sie also jetzt mit dem Scrollen beginnen, können Sie sehen, dass es an der Spitze befestigt ist und es immer noch diesen schönen leuchtenden Effekt hat. Aber ich muss die Farbe von meinem Stehpunkt für das Logo entfernen , weil Sie diese Farbe hier sehen können. Aber im Grunde bekommen Sie den Kern davon. Sie können sehen, wie das alles funktioniert. Also lasst uns voran gehen und das schnell beheben. So ist es Hauptmenü Tab Punkt. Sie können sehen, dass wir die Farbe haben. Entfernen Sie es. Gehen wir zum Tab-Zustand und sehen, ob es noch da ist. Ist es. Standardstatus. Und jetzt, wenn ich auf Vorschau klicke und mit dem Scrollen beginne, kannst du durchschauen und alles funktioniert, wie es sollte. Navigation funktioniert gut. Genau da auch. Kann dies und entfernen Sie die Animation von ihm, weil Sie sehen können, lassen Sie uns voran und beheben, dass, so dass es uns nicht verwirrt. So Prototyp. Lassen Sie uns dies auswählen und sehen, was es ist. Und ich werde einfach draußen tippen. Was ist das? Jeder 4R Tab Punkt. Okay, also ist das in Ordnung. Ich kann tatsächlich hineinspringen und diesen Schrittpunkt bis zum Rand erweitern. Und ich kann das gleiche in einem Tab-Zustand tun. Also kann ich es hier finden. Der Tabulatorpunkt wurde bis hier erweitert. Und mal sehen, wenn ich auf mein Symbol tippe, wird es nirgendwo hingehen. Also lasst uns diese Milchgewohnheit reparieren. Jetzt. Lassen Sie uns es testen und sehen, ob das jetzt funktioniert. Oder vielleicht noch besser, weil es transparent ist, nur um Zweifel zu beseitigen. Mal sehen, wo wir uns im Standardzustand befinden. Ich kann meinen Tiefenpunkt verwenden und ihn oben auf mein Hauptmenü-Symbol verschieben. Auf diese Weise werde ich tatsächlich auf meinen Stempelpunkt tippen. Lassen Sie uns es hier auch in der Art des Tab-Status ändern. Mal sehen, wo wir an diesem Punkt sind. Nur mehr Retour-Top, Molkerei raus. Wechseln Sie zum Entwurfs- und Standardstatus zurück. Klicken Sie auf Vorschau. Und jetzt, wenn wir dort klicken, wie Sie sehen können, funktioniert alles so, wie es sollte, wie es beabsichtigt war. Und ich denke, diese Geschwindigkeit von 0,06 einfach und es funktioniert wirklich gut mit unserem Design. So Milchgewohnheit, ein bisschen längeres Radio, aber ich musste immer noch alles erklären, was da war, um noch einmal und letztes Mal zu erklären. Wenn Sie organisieren wollen, sind das Bretter ein bisschen besser als ich in meinem Fall habe. Bitte tun Sie es. Aber noch einmal habe ich das getan, weil ich die restlichen Seiten nicht für den Diskurs entworfen habe. Und das ist, warum ich mir etwas mehr Platz gelassen hier im Falle eines Designs sie jemals. Aber wenn nicht, wenn dies Ihr Projekt ist, dann stellen Sie sicher, dass Sie diese ein wenig besser organisieren. Sie können klicken und ziehen, neu positionieren, wie ich es in unserem Design getan habe. Sie können zum Beispiel diese Wireframes indies direkt hier positionieren, dann Ihr gesamtes Design in einer Zeile, es reagiert in der anderen Zeile, so weiter. Es liegt also wirklich an Ihnen, wie Sie diese organisieren möchten. Sie können sehen, Sie können nach oben und unten scrollen, um mehr Platz zu haben und XD real mehr Platz hinzuzufügen. Also im Grunde, egal wie viele Seiten Sie haben, können Sie immer noch diesen Scroll haben und so viele dieser Seiten hinzufügen, wie Sie möchten. Also im Grunde ist es das für diesen Teil des Kurses. Wir haben unser Responsive Design vervollständigt. Und noch einmal, für Responsive Design, wenn Sie wollen. Ich habe das aus Zeitgründen und Zeitgründen getan. Wenn Sie möchten, gehen Sie bitte voran und machen Sie ein ansprechendes Design für alle diese jetzt wissen Sie, wie es in, wie ich gerne Dinge zu tun abgeschlossen werden kann. Und ich habe Ihnen für Website-Design sowie Responsive Design für Dashboard gezeigt. Im nächsten Abschnitt des Kurses werden wir anfangen, über das Teilen und Feedback zu sprechen. Ich werde Ihnen sagen, was Sie brauchen, um Ihren Kunden um Feedback zu bitten, für eine Art, was Sie in einem Feedback suchen sollten, nicht nur, was Sie von diesem Design denken, wie Sie das Design weiter verbessern können und wie Sie können Dinge in so wenig Revisionen wie möglich erledigen. Weil du deinen Klienten so einrichten wirst. Weiter oben, danach kommt der Export. Also werde ich Ihnen zeigen, die Struktur exportieren. Wie können Säuren mit Kunden und Entwicklern teilen und wie Sie den Speicherplatz am besten nutzen können damit Sie nicht den Platz auf Ihrem Computer für eines dieser Projekte verschwenden , denn nachdem sie abgeschlossen haben, müssen Sie diese Datei immer noch für einige Zeit für den Fall, dass der Client einige zusätzliche Änderungen an ihnen vornehmen möchte. Also musst du sie jetzt bitten, dich in die Dateien zurückzuschicken und so Zeit zu verlieren. Schließlich werden wir diesen Kurs abschließen. Wir werden zu einem Schluss kommen und Ressourcen. Ich werde Ihnen zeigen, sehr, Sie können alle diese Ressourcen bekommen, über die ich im Kurs gesprochen habe, Premium sowie kostenlos. Also sehe ich dich in der nächsten Lektion, wo wir anfangen, über das Teilen zu sprechen. 64. Bedeutung des Teilen: Jetzt, da das Design abgeschlossen ist, lassen Sie uns voran gehen und über die gemeinsame Nutzung sprechen. Und natürlich, wie ich in diesem Kurs mehrmals erwähnt habe, sollten Sie teilen, sobald Sie mit Wireframes beginnen. Aber noch einmal, ich habe das nicht getan, weil ich Ihnen alles während des Prozesses zeigen wollte und dann mit dem Teilen beginnen wollte. Also verwirre ich Sie nicht weiter mit viel mehr Informationen, als Sie in diesem bestimmten Stadium wissen müssen, besonders wenn Sie anfangen. Denn wieder einmal, all dies kann für einige Leute zu viel dauern. Und für manche Leute kann das alles einfach zu kompliziert sein. Aber wie er zu Beginn dieses Kurses sagte, wenn Sie bereits etwas von diesem Zeug wissen und Sie nur zusätzliche Dinge lernen möchten , die Sie vorher nicht wussten. Oder es muss nur Ihr Wissen über Adobe XD oder über diesen Designprozess auffrischen, dann springen Sie einfach voran und beobachten Sie all das, was ich den Diskurs so strukturiert habe. Also aus welchem Grund auch immer, wenn Sie zwischen den Abschnitten des Kurses springen wollen. Also, ob das Papier Wireframing, Wireframing in XD und Design Responsive Design und schließlich Sharing. Sie können zwischen all diesen Abschnitten springen und einfach lernen, was Sie tatsächlich brauchen, um aus diesem bestimmten Abschnitt zu lernen. Wie ich bereits in diesem Abschnitt des Kurses sagte, werden wir über die Freigabe in Adobe XD sprechen. Sharing-Option ist fantastisch. Anhang D, weil sie diese drei Optionen haben, Design, Prototyping und teilen. Und weil Share als seine eigene ist wirklich eines der wichtigsten Dinge des Designprozesses. Denn zu diesem Zeitpunkt teilen Sie Ihr Design mit dem Kunden und bitten um Feedback. Und Feedback ist äußerst wichtig, natürlich, weil es das Produkt so gestaltet, dass es so ausgeliefert wird , dass es gehen muss. Denn manchmal werden Sie diese klare Vision in Ihrem Kopf haben , wo Sie mit diesem Design gehen müssen, aber andere Male tun Sie es nicht. Und deshalb brauchen Sie den Kunden, damit er dieses Design genehmigen kann, damit er es missbilligt. Sobald Sie es bekommen, sobald Sie das richtige Feedback von Ihrem Kunden erhalten können, desto besser, denn früher oder können Sie das Produkt und das Design so gestalten , dass beide Parteien glücklich sein werden. Sowohl Sie als auch der Kunde, stellen Sie sicher, dass Sie nie 100% mit Ihrem Design zufrieden sein werden. Der Kunde ist vielleicht nicht 100% zufrieden mit dem Design, aber es ist auch in Ordnung, weil, wie gesagt, dies ein kontinuierlicher Prozess ist. Sie werden viel Zeit in diesem Prozess investieren und dann die Verfeinerung erforschen. Wenn Sie, vor allem, wenn Sie mit Fokusgruppen zu tun haben, vor allem, wenn Sie mit Menschen zu tun haben Ihnen Feedback außerhalb dieses Projekts geben. Wie gesagt, Sie suchen eine Zielgruppe in Ihrem Interview mit diesen Personen, ob persönlich oder online, dann werden Sie all das Feedback konzentrieren, das Sie von dieser Fokusgruppe und von diesen Leuten erhalten haben auf dieses Design. Deshalb ist es wirklich wichtig zu verstehen, wie die gemeinsame Nutzung das Projekt gestalten kann und wie die gemeinsame Nutzung das Produkt insgesamt gestalten kann. Die Sache, die Sie Ihren Kunden fragen müssen, wenn Sie der Freigabe beginnen, sind all diese fokussierten Fragen. Also der Fehler Nummer eins, den Designer machen, ist, was hältst du von diesem Design? Der Kunde ist kein Designer. Wenn sie es waren, werden sie dies ohne Sie entwerfen, so dass sie Ihre Hilfe nicht benötigen. Sie brauchen Ihre Hilfe, weil Sie der Designer sind und nicht sie. Sie müssen sie also in eine bestimmte Richtung Ihres Designs zeigen. Wenn Sie beispielsweise mit Drahtmodellen beginnen und Wireframes teilen und diese im Voraus wissen lassen, ist dies nicht das Design, dies ist nicht das endgültige Layout. Dies sind nicht die endgültigen Farben. Dies ist nicht die endgültige Typografie. Dies ist nicht der endgültige Stil dieses Designs. Dies ist nur das grundlegende Layout. Vergewissern Sie sich, dass Sie ihnen diese Schulden sagen. Sie werden anfangen, über das Design anders nachzudenken. Und sie werden sagen, okay, also ist das nur eine Struktur. Was wir an der Struktur ändern müssen. Und dann, wenn sie verstehen, dass, stellen Sie sicher, ihnen spezifische Fragen zu stellen. Also zum Beispiel, was denken Sie über den Abstand zwischen diesen beiden Elementen? Und ich denke, es ist in Ordnung. Glaubst du, wir brauchen mehr Pflicht im Kadett. Dieses Weiß auf Grau funktioniert zum Beispiel gut für Sie. Glaubst du, es wird gut mit dem Publikum funktionieren? Wie gefällt Ihnen dieses Setup? Zum Beispiel, wenn der Text auf der rechten Seite ist, Bilder auf der linken Seite, denken Sie, dass das gut aussieht, oder sollten Sie denken, dass wir sie wechseln sollten? wir das tun, sollten wir das Bild oben, Text auf den Boden legen. Das ist also das Feedback, das Sie von Ihrem Kunden benötigen. Wenn sie sagen, Oh, okay, vielleicht sollten wir diese Änderungen vornehmen, ist das in Ordnung. Und sobald Sie dieses Feedback erhalten haben, können Sie damit beginnen, es auf Ihr Design anzuwenden. Dann, wenn Sie Ihr Design teilen, st ing, stellen Sie sicher, ihre Aufmerksamkeit auf einige dieser Details zu konzentrieren weil die meisten Kunden nicht gerne Farbe aus irgendeinem Grund. Deshalb verwenden wir diese Komponenten. Deshalb verwenden wir diese verbundenen Farben in XD. Denn wenn sie aus irgendeinem Grund nicht gerne färben, können Sie es mit einem einfachen Klick ändern. Linderung des Textes ist nur ein bisschen zu groß, man ist nur ein bisschen zu klein. Achten Sie darauf, ihnen zu sagen, dass es später im Code etwas anders aussehen wird, der Ihnen viel Zeit spart, wenn sie all diese kleinen Dinge ändern. Und es wird zwei DEM zeigen, del, während das Design wird so aussehen, in Zitat, Jugend kann nie 100% genau sein, nur weil die Art, wie der Code funktioniert. So wird es etwa 9697% sein, aber nicht 100. So stellen Sie sicher, ihnen zu sagen, dass auch für die Responsive, wenn sie wollen, wie dieses responsive Design aussieht, aber sie sind nicht sicher über einige Art von Dingen. Achten Sie darauf, ihnen zu sagen, dass Sie es mit dem Entwickler so gut wie möglich für die Website selbst sortieren werden. Deshalb habe ich im letzten ansprechenden Design-Video zum Beispiel für diese Symbole gesagt, können Sie den Text vor diesen Symbolen und diesen Etiketten verstecken. Aber Sie müssen mit Ihren Entwicklern sprechen und Sie müssen es Ihrem Kunden erzählen. Das wird also so sein. Und aus diesem Grund müssen Sie Ihre Argumentation machen, nicht nur das Design machen und ihnen eine Hoffnung für das Beste senden. Sie müssen ihnen also erklären, warum Sie diese bestimmten Arten von Entscheidungen gewählt haben und warum Sie die Dinge so gemacht haben, wie Sie es getan haben. Denn auf diese Weise werden sie ein Design anders betrachten , weil Sie es aus logischer Sicht nähern, nicht nur um die Dinge hübsch aussehen zu lassen. Ich hoffe, Sie verstehen, wie wichtig Feedback ist, wie wichtig das Teilen ist. Und im nächsten Video werden wir in Adobe XD springen. Und ich werde Ihnen alle Funktionen zeigen, die Adobe XD in Bezug auf die Freigabe für Kunden und Entwickler hat . Also sehe ich dich dort. 65. Design: Abschließend möchte ich Ihnen jetzt alle Freigabeoptionen zeigen, die Adobe XD hat. Also noch einmal, wenn Sie hier schauen, haben wir Design, Prototyp und teilen. Und wenn ich meine Ebenen hier verstecke, sieht man das noch besser. So haben wir Prototypen Share entworfen. Und wieder einmal, Design ist, wo Sie all diese Änderungen an Ihrem Design, wo Sie erstellen, wo Ihr Frachtstück Jetzt all diese Elemente, Prototyping ist, wo Sie alle diese verschiedenen Elemente verbinden, , die ich Ihnen während dieses Kurses gezeigt habe. Und schließlich, Sharing ist, wenn Sie diese Entwürfe, Kreationen, Prototypen mit Ihrem Kunden, Entwicklern oder Team von Testern teilen Kreationen, Prototypen mit Ihrem Kunden, möchten. Also lasst uns das schnell durchlaufen. Wenn Sie also auf die Freigabe klicken, können Sie sehen, dass es Ihnen all diese verschiedenen Optionen gibt. Also, wenn ich auf meine Website-Design klicken, essen voll wissen, dass wir diesen Fluss erstellt und es wird mir zeigen, dass der Schuldenfluss verbunden ist. Dort können Sie mit der Freigabe beginnen. Deshalb haben wir alle diese Homepage-Icon. Wenn ich also ganz nah an hier heranzoomen, wenn ich so navigiere, kannst du sehen, dass wir dieses kleine Homepage-Icon hier haben, was im Grunde bedeutet, dass das der Fluss für deine Wireframes ist. Wenn ich darauf klicke, können Sie sehen, dass nichts wirklich passiert. Aber wenn ich auf meine Wireframes klicke, können Sie sehen, dass wir nur eine Option teilen können, was bedeutet, wenn Sie dies mit Ihrem Kunden teilen möchten, können Sie es zu diesem Zeitpunkt teilen, denn das war das einzige Design, das wir tatsächlich in unserem Bericht hatten. Wenn Sie sich erinnern, hatten wir gerade diese 2468 verschiedenen Seiten. Also haben wir die einfach. Wir hatten kein Dashboard und vor allem hatten wir überhaupt kein Website-Design. Stellen Sie also sicher, dass Sie diese Flows teilen können. Deshalb habe ich all diese separaten Flüsse für getrennte Teile des Diskurses und dieses Projekts erstellt . Wenn Sie jedoch alle Bildschirme mit Ihrem Client teilen möchten, erstellen Sie überhaupt keinen Flow. Sie erstellen, erstellen, erstellen, ohne alle diese Flows zu beschriften, wie wir es in diesem Kurs getan haben. Und so können Sie es Ihren gesamten Prozess mit Ihrem Kunden teilen und ohne sie alle diese anderen Dinge bemerken zu lassen. Diese Flows sind äußerst nützlich, insbesondere wenn Sie bestimmte Teile Ihres Entwurfs freigeben. Wie zum Beispiel, wenn ich auf meine responsive Website Design hier klicken, und wenn ich auf meine Seite hier unten klicke. So können Sie sich vorstellen, dass Sie diese spezifischen Teile Ihres Designs zum Beispiel mit Ihren Testern teilen können . So kann ich mein ansprechendes Website-Design mit ihnen teilen und so weiter. Ich kann diese jetzt nicht teilen, wie Sie sehen können, denn zuerst habe ich für diese Seite erstellt, die nur unsere Layoutseite ist, also kann ich sie nicht teilen. Aber wenn Sie mit denen verbunden sind, die alle diese Seiten verbunden haben. Wie wir es zum Beispiel mit unserem Dashboard-Design getan haben , können Sie sie mit Ihren Kunden, Desktop-Entwicklern und so weiter teilen . Apropos Teilen, ich kann auf meine Website-Designs klicken, so dass ich von hier beginnen kann. Denn denken Sie daran, dass dieser gesamte Prozess verbunden ist, weil wir von der Homepage gestartet haben und dann über diese Seiten zu den Anmelde- und Anmeldeseiten weitergehen . Und dann gingen wir weiter hierher. Also, was Dashboard-Design ist. Mehr, Wir gehen durch alle diese verschiedenen Seiten. Also mal sehen, wir haben die Verbindung. So haben wir Website-Design. Wir können es dann etwas anderes nennen. So zum Beispiel, das war eine neue Bank, also kann ich es neue Bank nennen. Website-Design wie diese. Und was Sie hier tun können, sind Dokumenteinstellungen. So können Sie Design Review teilen, was im Grunde ist, wie es wird von Ihrem Kunden überprüft werden. Im Schuldenmodus kann der Kunde Ihnen Feedback hinterlassen, Sie können auf dieses Feedback antworten. Sie können sie auf die spezifischen Teile Ihres Entwurfs verweisen , indem Sie diese Kommentar-Pins ziehen und ablegen. Und dann können Sie Kommentare an bestimmten Stellen in Ihrem Design hinterlassen. Sie können auf diese spezifischen Orte antworten. So können Sie beide, Sie und Ihr Kunde immer auf der gleichen Spur sein. Ok, was wir hier tun müssen, was wir brauchen, um einige Änderungen hier vorzunehmen. So können Sie spezifisch sein mit dem Teil Ihres Designs , den Sie ändern möchten oder den Sie ändern möchten. Im Folgenden haben wir Entwicklung, die für Entwickler geteilt wird. Und in diesem Modus werden sie in der Lage sein, alle diese verschiedenen Farben, die Sie verwenden, alle verschiedenen Schriftarten und verschiedene Schriftgrößen, die Sie verwendet haben, zu sehen . Und sie werden in der Lage sein, alle Bilder zu sehen , die Sie in diesem bestimmten Moment verwenden. Sie können den Code nicht sehen. Wieder einmal können Sie etwas wie Anima verwenden, aber persönlich würde ich es nicht empfehlen, weil es nicht perfekt genug ist. Und Sie werden Ihnen tatsächlich einen Entwicklern mehr Job geben. Und weil sie in Code gehen müssen und dann anfangen, Ihren Code zu verfeinern und zu aktualisieren, was im Grunde nur eine Zeitverschwendung ist. Es wird alles von Grund auf neu codieren müssen. Darunter haben wir Präsentation. Zum Beispiel, wenn Sie Ihr Design einer Gruppe von Personen präsentieren, wenn Sie etwas wie eine Skype Roll, Zoom-Präsentation oder was auch immer tun , dann können Sie in den Schuldenmodus gehen und es beseitigt alle Ablenkungen. Es entfernt alle Symbole, es entfernt alles, und es konzentriert sich nur auf die Präsentation selbst, Benutzertests. Also wieder entfernt es alles andere. Benutzer können nicht auf eine beliebige Stelle außerhalb der Position klicken, auf die Sie festgelegt haben. Das ist so. Sie werden die Benutzerfreundlichkeit Ihres Designs testen. Ist es einfach, auf diese Registerkarte Punkte zu klicken? Ist es leicht zu verstehen, wohin sie gehen müssen? Es ist die Navigation leicht zu verstehen. Alter, Animationen dauern zu lange und so weiter und so weiter. Hier kommt Anwendertests ins Spiel, und hier können Sie XD verwenden, um Benutzertests zu starten. Sie können auch verschiedene Plug-Ins im Plugins-Panel finden, speziell für Benutzertests durch externe Unternehmen entwickelt wurden. Integriert in Adobe XD. Wenn Sie zum Beispiel eines davon verwenden, können Sie dort ein Plug-In finden und dann können Sie die Benutzertests direkt über Adobe XD starten, Feedback in Adobe XD sammeln und es sofort anwenden. Das ist also der Hauptpunkt von Adobe XD: Wie können Sie alles so optimieren, dass Sie so reibungslos wie möglich arbeiten können, nur damit Sie schnell anfangen können. Custom ist, was es sagt. Sie können all diese Dinge anpassen. Und genau hier haben wir jemanden mit dem Link. Wer kann also auf dieses Projekt zugreifen? Jeder, der den Link-Server erhält diesen Link, freigebbaren Link , den Sie mit Ihren Kunden oder einem Entwickler teilen können, kann darauf zugreifen. Jeder, der dann diesen Link sendet, kann auch auf diesen Prototyp zugreifen, was großartig ist, um innerhalb des Unternehmens zu teilen. Und jeder innerhalb des Unternehmens kann auf einen zentrierten Prototyp zugreifen und vielleicht einen Kommentar dazu machen, wenn sie es brauchen. Wir haben nur Leute eingeladen. So können nur Personen, die per E-Mail eingeladen werden auf diesen Prototyp zugreifen und im Grunde dasselbe tun wie jeder mit dem Link. Und schließlich jeder mit Passwort. So können Sie alle diese Passwortschutz. Zum Beispiel, wenn jemand diese Datei versehentlich an jemand anderen in der Organisation sendet , der sie nicht sehen soll. Oder zum Beispiel, Ihre Konkurrenten, Konkurrenten in der Hand mit dieser Datei. Es wird nicht in der Lage sein, es zu öffnen, weil es durch das Mögliche geschützt ist. So lassen Sie sehen, wir können es mit Design Review jeder mit dem Link teilen. Und jetzt, was Sie tun können, ist einfach drücken Sie einen Link hier erstellen. Es wird anfangen, Ende zu schaffen, abhängig von der Anzahl unserer Boards Sie haben und abhängig von Ihrer Internetverbindung, weil es all dies in Adobe Clouds Schulden Weg hochlädt. Und so wird es mehr oder weniger dauern, abhängig von diesen beiden Dingen. Also, wie groß Ihre Datei ist und wie schnell Ihre Internetverbindung ist. Und jetzt wird die beiden Link hochgeladen und jetzt können Sie mit der Freigabe beginnen. Ich benutze absichtlich kostenlose Version von Adobe XD, weil ich bereits einen Premium-Tarif habe. Ich benutze eine kostenlose Version, nur um dies mit Ihnen zu teilen, damit Sie es direkt hier sehen können. Unbegrenzte Freischaltung, begrenzte Freigabe-Links. Sie erreichen die Kapazität für die Linkfreigabe mit Ihren Plan-Upgrades um weitere Links zu veröffentlichen und Premium-Funktionen zu nutzen, damit Sie hier auf Upgrade klicken können. Das bedeutet, dass Sie nur einen Link zur Verfügung haben, wenn Sie eine kostenlose Version von Adobe XD verwenden. Wenn Sie also an zwei Projekten gleichzeitig arbeiten, können Sie diese nicht mit Ihren Kunden teilen. Sie haben nur einen auf einem kostenlosen Plan. Wenn Sie auf Premium Dan upgraden, haben Sie eine unbegrenzte Anzahl dieser Sharing-Links. Sie haben unbegrenzte Anzahl von Optionen und so weiter und so weiter. Aber ich benutze absichtlich diese kostenlose Version während dieses Kurses, um Ihnen zu zeigen , dass alles, was ich hier rot erstelle, auch auf einer kostenlosen Version möglich ist. Also, wenn Sie mit mehreren Clients arbeiten, dann auf jeden Fall ein Upgrade auf den Premium-Plan, weil sie wirklich viele dieser Optionen haben, vor allem Cloud-Dokumente, die viel schneller sein wird, vor allem, wenn Sie Cloud-Bibliotheken verwenden. Aber wenn nicht, wenn Sie nur mit einem Client arbeiten, wenn Sie gerade anfangen, dann verwenden Sie einfach free blend, weil Adobe XD ein fantastisches Lernwerkzeug und eine fantastische Möglichkeit ist , in diese UI-UX-Design-Welt zu gelangen. Jetzt endlich, lassen Sie uns das beenden. Und wie Sie sehen können, wird ein Link erstellt. Sie können hier klicken, um diesen Link zu kopieren. Und Sie können hier klicken, um den Einbettungscode zu kopieren. So können Sie in diesen Code einbetten, beispielsweise in Ihrer Beacons-Präsentation. So können Menschen durch Ihre Beacons-Präsentation blättern und durch Ihre Präsentation klicken , nur um zu verstehen, was Sie mit Ihrem Prototyp gemacht haben. Wenn Sie also Änderungen innerhalb der Registerkarte Design oder Prototyping vornehmen, können Sie zur Freigabe zurückkehren und auf Link aktualisieren klicken. Es ist der gleiche Link, Sie teilen es, Sie treffen nur das Update auf diesen Link. Also keine Sorge, Sie werden diesen Teil eines Links pro Konto nicht überqueren. Sie können diesen Link jedoch einfach aktualisieren, um sicherzustellen, dass der Client die neuesten Änderungen hat. Ein Link selbst, also der Name der Link-Adresse und so weiter. So können Sie hier sehen, also werden sich alle diese Zahlen, 90 Punkte, 918 und so weiter, nicht ändern. Inhalt des Links ändert sich und wird auf die neueste Version aktualisiert. Also noch einmal, Sie können hier klicken. Es wird diesen Link in Ihrem Browser öffnen. Sie können diesen Link direkt hier kopieren und zu Ihrem Browser gehen und ihn auf diese Weise öffnen. Es liegt also wirklich an Ihnen, wie Sie mit diesem Link interagieren möchten. Jetzt zeige ich Ihnen seine Öffnung direkt in meinem Browser. Wieder einmal, abhängig von Ihrer Internetverbindung, je nachdem, wie viele Bildschirme Sie haben, wie viele Animationen Sie haben. Dieser ganze Prozess kann länger oder kürzer dauern, abhängig von all diesen Dingen. Also, wenn Ihr Bildschirm geladen wird und wenn Sie ihn ins Internet hochladen, sieht es tatsächlich so aus. Und um all diese Informationen abzudecken, denke ich, es ist am besten, hier eine Pause zu machen und im nächsten Video zurückzukommen , damit wir erklären können, was all diese Informationen sind, wie Sie mit Ihrem Kunden interagieren können. Und schließlich, wie Sie mit Ihren Entwicklern interagieren können. Also sehe ich dich dort. 66. Teilen des Designs mit dem Kunden: In Ordnung, also hier sind wir, wo wir im vorherigen Video aufgehört haben. Und in diesem Video möchte ich nur alles abdecken, was du hier siehst. Und ich wollte nur all diese Optionen erklären, Schulden, die Sie haben. Also zuerst, starten wir von oben und mehr ROA herum. Du hast deine Arbeit hier. Wenn wir also auf Ihre Arbeit klicken, wird es Sie tatsächlich zu Adobe Creative Cloud bringen und Sie zu Ihrer Arbeit bringen. So können Sie sehen, weil wir auf einem freien Werk auf diesem Konto sind, wie ich sagte, Sie haben nur diesen einen Prototyp. Und hier steht, es ist ein Prototyp und das zeigt an, dass jeder mit dem Link sehen kann. Also im Grunde all diese Einstellungen, die Sie erstellt haben, wenn Sie Ihre Datei teilen, wird es mit der richtigen Sorgfalt angezeigt. Wenn wir also zu unserem Prototyp und zur veröffentlichten Prototypenansicht zurückkehren, können wir zurückkehren und Sie können hier sehen. So haben wir neue Bank Website Design, Homepage Armaturenbrett Design. Deshalb erwähnte ich Dürrediskurs. Wie wichtig es ist, Ihre Layer zu benennen, Ihre Flughäfen zu benennen, damit alle Beteiligten verstehen können, wo sie sind. Das ist also der klare Fall hier. Es ist so neue Bank Website-Design ist der Name des Projekts, das wir kurz vor, Link Sharing. Und schließlich haben wir Homepage-Design, das ist eigentlich diese besondere Homepage. Sie können hier klicken. Und es wird Sie zur Liste aller dieser separaten Seiten führen. Und Sie können das Ihrem Kunden oder Entwicklern zeigen, damit sie verstehen können, OK, das ist Account-Design, nicht Wireframe, sondern Design. Und deshalb habe ich gesagt, dass es wichtig ist, wenn du solche Dinge machst und wie wir es im Diskurs getan haben, deine Dateien entsprechend zu benennen, damit jeder Beteiligte verstehen kann wo er sich in einer bestimmten Zeit oder an einem bestimmten Punkt von Zeit. Es heißt also, dass 15 Bildschirme zu diesem Zeitpunkt aktualisiert werden. Wenn ich also wieder auf ein Homepage-Design klicke, wird es mich dorthin bringen, wo wir aufgehört haben. Das ist unser eigentliches Design. Und du kannst sehen, wenn ich beginne, Eigenschaften zu schweben, Horroreffekte funktionieren bereits. Also im Grunde ist dies Ihr Design in einem Browser. So können Kunden sie sehen. Und es gibt hier einige Befehle, die wir schnell durchlaufen müssen. Also verwerfen Sie im Grunde Teil hier ist für Ihr Design. Und wenn ich beginne zu scrollen, können Sie sehen, wo das Design und n, wo dies direkt hier in der Navigation zeigt, dass diese Negation das Zuhause ist. Wenn Sie also direkt dort klicken, gelangen Sie zu dieser Seite, da dies die Homepage ist. Und Sie können auch auf diese Pfeile links und rechts klicken , um zwischen all diesen verschiedenen Bildschirmen zu interagieren. Auch, wenn ich meine Pfeile verwende oder Tastatur mache, wie Sie sehen können, wird es mich zu den verschiedenen Bildschirmen links und rechts bringen. Und wenn ich zum Beispiel einfach hier klicken möchte, wird es mich zurück auf die Homepage bringen. Vergewissern Sie sich, dass dies viel langsamer funktioniert als auf Ihrem Computer. So zum Beispiel, wenn ich begann zu scrollen, können Sie sehen, dass Scrolls geben, gibt mir diese Art von Gyrus. Sie können also sehen, dass ich scrolle, also hier ist meine Maus, aber sie bewegt sich nicht alles so schnell. Was passieren muss, ist, dass Adobe XD alle diese Seiten durchlaufen muss und durch alle diese Seiten blättern muss, damit es funktioniert. Also keine Sorge, wenn es nicht funktioniert, wenn Sie das erste Mal öffnen, es funktioniert das nächste Mal oder die Zeit danach in der Geschwindigkeit, die beabsichtigt ist. Also sag es nur sicher, dass du das deinem Kunden mitteilst. Denn manchmal, besonders wenn Ihr Client über eine langsame Internetverbindung verfügt, funktioniert dies nicht so, wie es sollte, da es in Adobe XD direkt beim Entwerfen funktioniert. Aber zum Beispiel funktioniert Scrollen vielleicht langsam, aber Sie können sehen, dass diese Navigationselemente und in diesen Symbolen gut funktionieren. So können Sie sehen, dass wir den Hover-Effekt haben und so weiter. Und wir können hier klicken, und die Navigation funktioniert gut. Also, wenn Sie sich erinnern, dass 0.06 hier war, erzählt er Werke, wie es sollte. Wie Sie sehen können, wenn Sie klicken, wo Sie nicht klicken können, im Grunde wie diese, es zeigt Ihnen, wo Sie tatsächlich auf die Seite klicken können. Ich verstehe nicht, warum er mir das nicht zeigt. Ich kann hier klicken, aber vielleicht muss ich schweben, dann wird es mir zeigen. Also schauen wir uns den Abwurf an. Wie Sie sehen können, funktioniert die Animation so, wie sie beabsichtigt ist. Es ist nur dieser Scroll-Teil , der nur ein bisschen zu viel ist. Und aus irgendeinem Grund springt dieser Text auf und ab. Ich weiß wirklich nicht warum. Vielleicht können wir das in unserem Design überprüfen. Aber ich denke, es ist einfach hier auszulöschen. Wie kann es im selben Zustand auf und ab springen? Das ist also wahrscheinlich eine Panne, weil man zum Beispiel hier sehen kann , dass es steht. Wenn ein Hover geht es zu Horroreffekten hoch, runter und dann hoch, wieder runter. Und du bewegst es nach oben und unten, wie du es gesehen hast. Das ist wahrscheinlich nur eine Panne hier. Wenn wir das überprüfen, funktioniert es. Also funktioniert alles großartig. Und lassen Sie uns schnell springen, um sich anzumelden. Sehen Sie, wie das funktioniert. Also funktioniert alles gut. Gehen Sie zum Login und gehen Sie zu unserem Dashboard. Da hast du es. Lassen Sie uns schnell zwischen all diesen überprüfen. So funktioniert Ferritin wie es sollte. So schnell überprüfen DS. Ich mag das immer noch nicht, aber du hast mich das oft gesagt. Mal sehen, funktioniert die Bildlaufgruppe gut. Lassen Sie uns Kredite, Karten sehen und jedes Mal, wenn ein Benutzer nach draußen klickt Wenn ich zum Beispiel hier klicke, können Sie sehen, dass es mir zeigt, wo welche Elemente tatsächlich mit einigen anklickbaren Bereichen verknüpft sind. Also kann ich auf all diese klicken, aber ich kann hier nicht klicken. Sobald ich dort klicke, zeigt es mir in dieser blauen Farbe, wo kann ich eigentlich klicken, damit es mich irgendwo hinbringt? Also haben wir alle diese abgeschlossen und wenn ich auf Abmelden klicke, wird es mich zurück auf die Homepage. Lassen Sie uns jetzt decken, was Sie hier auf der rechten Seite sehen. So können Sie hier sehen, haben etwas zu sagen. Kommentar, um die Diskussion zu starten, kann das Dashboard konnotieren oder kommentieren. Was das im Grunde bedeutet, ist, dass Sie hier einen Kommentar machen können. Also sagen wir, willkommen bei Design. Ich hoffe wirklich, es wird dir gefallen. Und Sie können auf Senden klicken. Und das wird nur ein allgemeiner Kommentar zu diesem speziellen Kunstboard und auf dieser Seite sein. So können Sie Homepage Wunsch sehen, was offensichtlich diese Seite ist, ist, wo sich dieser Kommentar befindet, aber es ist nirgendwo innerhalb des tatsächlichen Designs. Also, was Sie für Schulden tun können, ist hier haben Sie dies erwähnt einen Benutzer, der dies bei Zeichen ist. So können Sie den Benutzer innerhalb Ihres Dokuments solide sagen, dass Sie ein Client sind, heißt RNR, John Doe zum Beispiel. Und sie haben Adobe-Konto. Sie können bei John Doe erwähnen und es wird sie jedes Mal benachrichtigen , dass Sie einen Upload machen, dass Sie eine Linkänderung machen, Haben Sie verdienen HCUP-Daten, Ich sollte sagen,, machen Sie jede gemeinsame Haben Sie irgendeine Änderung? Es wird die Benachrichtigung auf ihrem Konto machen und es wird sie nicht über diese Änderung finden und es wird springen und überprüfen Sie es für sich selbst. Also das ist, was, das ist am einfachsten für. Sie können hier sehen, dass wir einen Kommentar haben, der dieser ist, und dies wird aktualisiert, wenn Sie mehr und mehr Kommentare hinzufügen. Und das, was ich Ihnen zeigen wollte, ist zum Beispiel das. Also lassen Sie uns sagen, dass die gescrollte Disposition, Sie haben diesen Spin. Sie können darauf klicken, halten. Und wie Sie sehen können, können Sie es dort platzieren, wo Sie wollen. Also zum Beispiel kann ich es hier platzieren und so etwas sagen wie: Was denkst du davon, Harvard zu induzieren? Perfekte Pflicht in der grünen Farbe ist zu stark. Zum Beispiel, sollte ich Fettleibigkeit reduzieren und es weniger direkt, glitzernd oder leichter oder höher machen ? Wir wollen es formulieren. Klicken Sie auf Absenden. Und noch einmal, wir haben das. So haben wir Homepage-Design. Es zeigt uns zwei Kommentare. Einer ist der allgemeine Kommentar, Einer ist der spezifische Kommentar. Und wenn Sie direkt hier schweben, können Sie sehen, dass dies blau wird und Sie können es direkt hier schweben und Sie können darauf klicken und es wird Sie zu diesem bestimmten Bereich bringen. Also noch einmal, Sie können dies in jedem Bereich Ihres Designs und Ihrer Notiz tun , wenn es zu scrollen beginnt, es ist nicht da, aber ich muss nach oben gehen. Und hier ist es tatsächlich, so dass sie klicken können, wird sie zu diesem Kommentar zu bringen. Und was sie tun können, ist auf Antwort klicken. Und Sie können auch einen Bin zu bestimmten Teilen Ihres Designs für diesen spezifischen Kommentar und so weiter platzieren. Und schließlich, was sie tun können, ist, wenn wir auf Antwort klicken, und das ist in Ordnung. Klicken Sie zum Beispiel auf „Senden“. Und was wir hier haben, ist, dass ich das löschen kann, ich kann diesen Kommentar bearbeiten, aber die Option, die darauf fehlt, ist vollständig. So können sie, können Sie, Sie sind in der Lage, bestimmte Aufgaben innerhalb von hier zu erledigen. Sagen wir, dass Sie diese Änderung vorgenommen haben. Nehmen wir an, dass Sie die neue Version Ihres Designs hochgeladen und Prototypen aktualisiert werden, delink, Änderung wird vorgenommen, Client wird benachrichtigt, sie sind glücklich und Sie können auf Auflösen Option klicken, die Sie haben werden. Und es wird diesen Kommentar entfernen und er wird sicherstellen, dass er es versteht. Haben Sie das gelöst, nennen wir es Problem, aber sagen wir, Designänderung, Designänderung wird vorgenommen. Dies ist die neue Version. Das ist in Ordnung. Lasst uns jetzt weitermachen. Sie werden also diese Lösung haben. Ich habe es nicht, weil ich es nur mit euch teilen kann. Deshalb kann man es dort nicht sehen. Als nächstes haben wir das hier, damit Sie Leute einladen können. Sie können hier klicken, sie per E-Mail einladen oder sie über ihr Adobe-Konto einladen, was noch besser ist, weil sie mehr Möglichkeiten haben, als nur zu diesem Prototyp zu kommen. Und eine wichtige Sache hier: Ihre Kunden brauchen kein Adobe-Konto, um auf diesen Prototyp zugreifen zu können, oder um Kommentare live zu bekommen, können sie einfach direkt hier einspringen und Kommentare hinterlassen. Was ist, Ich denke, die große Sache, die Adobe-Team gemacht weil diese Menschen sind nicht, dass ihre Kunden sowieso, so dass sie nicht verwenden diese Produkte wie XD, Photoshop, Illustrator und so weiter. Du bist ihr Klient. Also als Designer, und deshalb brauchen Sie dieses Konto, sie nicht, und das ist in Ordnung. Genau hier haben wir die vergrößerte Ebene, so dass Sie zum Standard gehen können, zum Beispiel können Sie sehen, wie das funktioniert. Hier haben Sie die Vollbild-Option. Sie haben Fragen. Dies sind Benachrichtigungen für Ihr Konto und Sie können direkt hier auf Ihr Konto zugreifen. Wir haben alle Bildschirmkommentare direkt hier unten. So kann ich sie verstecken, zum Beispiel, zeigen sie. Ich kann Anmerkungen ausblenden. Also, wenn ein Sprung direkt hier, das ist die Anmerkung. So können Sie diesen orangefarbenen Kreis sehen. Ich kann es einfach verstecken und ich kann Kommentare filtern. So kann ich filtern, zum Beispiel, wer durch den Tag gepostet und so weiter, n durch den Flughafen als auch. Und schließlich kann ich hier unangemessene Kommentare kennzeichnen. Wenn ich will. Lassen Sie mich schnell zeigen Sie nur für das Ende und das, was die Vollbild-Option ist. Tut mir leid, meine Kamera ging da ein bisschen wackelig, aber ich denke, es funktioniert jetzt gut. Also noch einmal, dies ist Ihre Vollbild-Option. Wenn Sie dort klicken, können Sie sehen, wie es funktioniert und Sie können dann Ihrem Client erzwungenen Bildschirm zeigen wenn diese Website tatsächlich veröffentlicht wird, wie sie möglicherweise aussehen könnte, wenn sie veröffentlicht wird. Wie Sie sehen können, funktionieren alle diese Optionen. Jedes einzelne Ding hier funktioniert. Und Sie können zu jeder Seite springen, die Sie wollen. Es wird Sie dorthin bringen und Sie können ihnen zeigen, wie all dies wird funktionieren und aussehen, wie wenn es tatsächlich codiert ist und leben, was Sie tun können, um von hier zurück zu gehen ist Hit Escape und Ihre Tastatur. Und es wird Sie zurück zu dieser vorherigen Seite führen. Also, das geht es im Grunde um die Freigabe mit Ihrem Kunden. Im nächsten Video zeige ich Ihnen, wie das Teilen mit Entwicklern funktioniert. Also sehe ich dich dort. 67. Das Design mit Entwicklern teilen: Also hier sind wir wieder in Adobe XD und ich wollte Ihnen nur schnell zeigen, wie es funktioniert, wenn Sie mit Entwicklern teilen. Also im Grunde haben sie alle die gleichen Funktionen wie Clients, aber sie sind ein bisschen fortgeschrittener, weil sie Entwickler sind , die schließlich verschiedene Dinge benötigen. Dann Klienten. Kunden benötigen ein visuelles Design und deshalb haben Sie sie für diese Designerbewertung freigegeben. Sie müssen Ihr Feedback und Ihre Bewertung zu Ihrem Design geben, damit Sie die notwendigen Änderungen vornehmen können, um das gewisse Goldene sowohl Sie als auch Ihre Kunden zu erreichen , während Entwickler andere Ziele haben. Deshalb, wenn Sie hier auf Entwicklung klicken, können Sie den Export für das Web, den Export für iOS oder den Export für Android sehen . Also, wenn Sie den Export für ein Web wählen, was das im Grunde ist, weil wir hier ein Website-Design erstellt haben. Sie können herunterladbare Assets einschließen, aber ich habe keine Assets markiert, indem ich marc für den Export verwendet habe. Und das kann ich Ihnen schnell zeigen, genau hier in unserem Design. Also, wenn ein Sprung in hier, und lassen Sie uns sagen, dass ich dieses Bild direkt exportieren wollte. Ich kann in mein Ebenenbedienfeld gehen. Also hier haben wir ein glückliches Paar und Sie haben diese Option. So können Sie Shift E verwenden oder Sie können hier klicken. Und es wird diese Bild-Einsicht beinhalten. Wenn ich zum Beispiel zu meiner Heldenform gehe , kann ich auch darauf klicken. Und lassen Sie uns diese Heldenelemente nur als Beispiel verwenden, nur damit Sie sehen können, wie das alles aussieht. Und das können Sie natürlich während Ihres gesamten Designs tun. Ich mache das nicht, weil ich mein Vermögen später exportiere. Und ich werde Ihnen zeigen, wie das auch funktioniert, im nächsten Abschnitt des Diskurses. Aber für jetzt, lassen Sie uns einfach hier exportierbar machen, gehen Sie zurück zu den Aktienoptionen Entwicklung. Und jetzt können Sie sehen, dass wir fünf Vermögenswerte haben. Also, wenn ich hier schwebte, können Sie sehen, dass wir SVG B und G, eins und 2x sowie PDF einschließen können . Also noch einmal, fünf Vermögenswerte. Wenn ich zu meinem Design springen, wenn ich Ihnen zeigen, was ich enthalten, so dass ich dieses Bild enthalten, tut Formen, so dass 2345. So weiß es, wie viele Elemente ich für die Freigabe und für einen herunterladbaren enthalten habe. Also werden wir klicken ihre Entwickler in der Lage , diese Assets direkt aus dem Browser herunterladen. Sie müssen sie also nicht später exportieren und dann auf diese Weise mit ihnen teilen. Also wollte ich dir nur beides zeigen. Ich mag es, den zweiten Weg zu tun , der manuell alle meine Assets exportieren, weil ich dann einen Liter, den Styleguide erstellen. Und innerhalb des Styleguides werde ich alle diese Elemente auflisten, nur keine Bilder. Ich werde alle diese anderen Elemente auflisten, aber Sie können das auch auf diese Weise tun. Also wieder einmal, jeder mit dem Link, können Sie wählen, was Sie wollen genau hier. Sie können hier verschiedene Personen hinzufügen, damit Sie auf Derek klicken können Sie benötigen ein eigenes Adobe-Konto, um auf diese Option zugreifen zu können. Aber wie gesagt, du brauchst keine weitere Verbindung. Dies ist im Grunde der gleiche Link. Sie können einfach auf Update-Link klicken und es wird beendet, starten Sie die Aktualisierung. Und sobald es aktualisiert und erreicht 100 hier. Und dann werde ich Ihnen zeigen, wie das im Browser aussieht. Und jetzt, da es fertig ist, den Link zu aktualisieren, kann ich einfach hier zu meinem Browser anrufen. Ich kann auf Aktualisieren klicken, oder ich kann zurück zum XD gehen und ich kann hier auf Copyright klicken und ich kann es auf diese Weise mit meinem Client teilen. Also jetzt haben Sie hier diese Optionen, die wir vorher nicht hatten, die für die Entwicklung bestimmt sind. Also werde ich es einfach für eine Sekunde laden lassen, und ich werde Ihnen dann erklären, was diese beiden Optionen sind. Also, wenn es geladen wird und Sie direkt hier schweben, können Sie sehen, dass es sagt, wenn wir nur denken, dass es ist, also lassen Sie mich einfach darauf klicken. Es sind Design-Spezifikationen. Also nahm im Grunde Band, verwenden Sie einen Griff zu zoomen, verwenden Sie Control und Mausrad, oder verwenden Sie ein Dropdown-Menü, wenn Sie zoomen möchten. Grundsätzlich bedeutet dies, wenn Sie den Mauszeiger über all diese Elemente bewegen, können Sie klicken und es wird Ihnen alle diese verschiedenen Optionen zeigen. So können Sie die Breite des Textes sehen, Sie können die Höhe des Textes sehen. Sie können die Entfernungen zwischen all diesen sehen. Also, wenn ich wie dieses zum Beispiel schwebe, können Sie sehen, wir sind zu 91 von oben. Wir sind auf 71 von rechts. Und wir sind 3.3.2 von der Unterseite unseres Heldenbildes. Wenn ich meine Taste wähle, können Sie sehen, dass es 366 mit 70. Und Sie können direkt hier schweben und sehen 296 vom Ende dieses Textes. Es ist, was es sagt, 140, es sind 50 hier. Wenn ich hier klicke, sind es 50 hier und so weiter. Sie können das Gleiche grundsätzlich für alle diese Elemente tun. Und wenn Sie auf eines dieser klicken, können Sie den Namen sehen. So Launch für alle erstellt, das ist der Text, aber lassen Sie uns einfach Bild zum Beispiel verwenden. Sie können Bild sehen. So glücklicher Mann, das ist die Breite, das ist die Höhe, das ist das Aussehen. Die Deckkraft beträgt 100%. Das ist zum Teufel. Also haben wir keine Eier, weil es das Bild ist und wir diesen CSS-Code haben. So können sie diesen CSS-Code auswählen und kopieren, wenn sie ihn in ihrem Entwicklungsprozess verwenden möchten . Also im Grunde können sie das auch tun. Sie können darauf klicken und Sie können sehen, dass wir die Grenze dieser Farbe haben. Und wir können die Farbe benennen und ihr dann diese Design-Token Variable geben. Daher ist es für Entwickler viel einfacher, dann mit diesen Design-Token zu arbeiten. Ich habe das nicht getan, weil er dich nicht weiter mit all diesen Optionen verwechseln wollte, was im Grunde nur ein bisschen fortgeschrittener ist und all das. Aber im Grunde können sie diese Farbe einfach verwenden. Und weil wir später alle unsere Farben exportieren, können sie diese Farben auswählen, sie in das CSS einfügen und sie dann einfach so mit ihrem eigenen Namen verwenden. Es musste also keine Design-Token verwenden. Hier. Wieder einmal haben wir Kreis, wir haben in Pixeln, also im Grunde 8080 und wir haben x und y-Achse. Sie können hier klicken und Punkte verwenden oder DP verwenden, wenn sie wollen. Wir haben hier die 6x-Variable, aber sie können auch RGBA verwenden. Wirhaben keinen Strich, wir habenkeine Lücke in einem Schlaganfall gekauft Gapminder verbunden Festival hohe Prozent. haben keinen Strich, wir haben Also alle diese Optionen sind im Inneren enthalten, so dass Entwickler leicht auf sie zugreifen und diese Optionen einfach kopieren können, basierend auf sie in ihrem Zitat, es ist viel schneller für sie, dann so zu arbeiten. Wenn ich hier klicke, können wir sehen, dass dies unsere Komponenten sind. Also im Grunde Haupt nav, seine Lunge Zustand. Also sind wir in diesem bestimmten Zustand auf dieser bestimmten Seite. Und dann können sie alle Optionen im Inneren sehen. So haben wir Rechteck namens nav Bg gewickelt, wir haben Aussehen, so 10101010, rund an allen Ecken, wenn Sie sich erinnern. Fettleibigkeit ist 100% Farbe. Ist dies fff, noch einmal unbenannte Farbe, weil sie ihm nicht das Design-Token gegeben haben. Aber noch einmal können Sie das auch tun, wenn Sie wollen. Es hat diesen Schatten. Wenn Sie also schweben, haben Sie diese Farbe. So können Sie auf diese Farbe klicken, es wird es kopieren und dann können Sie Hintergrund Unschärfe eingefügt, Helligkeit Fettleibigkeit. Und schließlich haben wir CSS dafür. So können Sie auswählen, um zu kopieren, und ich kann auf mein CSS klicken, um es zu kopieren. Und kann zum Beispiel dieses auswählen. Css kopiert, und sie können einfach in ihren Code-Editor der Wahl eingefügt werden. Wieder einmal haben Sie diese Entfernungen, so dass wir 50 von oben, 138, links und rechts, und 70-30 bis zum unteren Rand unseres Designs sind. Sie können auch nach unten scrollen und dies für alle von Ihnen gewünschten tun. Also, wenn ich hier schwebe und es schiebe, können Sie sehen, dass für diesen hier, wir sind, lass uns 100 von hier sehen. Wir sind 100 von hier. Und du kannst, du bekommst das Bild, du kannst das für all diese bekommen. Lassen Sie mich abschließend hier klicken, um Ihnen diese Variablen zu zeigen. So können Sie sehen, lassen Sie mich mich Hub auf die Art und Weise bewegen, wie Sie alle diese Variablen haben. So Stammfarben, Schriftart, Textwerte, Zeichenstile, unbenannten Zeichenstil Stil F3, so weiter Software. Sie haben also diese Variablen und können sie in ihrer Code-Arbeit kopieren und verwenden. Also, das ist es im Grunde. Genau hier auf dem Hauptbildschirm. Wir sind abgeschirmte Details, also haben wir jede einzelne Farbe verwendet und stellen Sie sicher, dass Sie verstehen, dass es nicht nur die Farben, die wir verwendet haben. Das sind also unsere tatsächlichen Farben hier oben. Alle diese anderen Farben werden im Grunde aus diesem Bild, diesen Symbolen, diesem Bild und so weiter gesampelt . Also im Grunde nur um zu verstehen, das sind alle Farben, die in unserem Design verwendet werden, aber Sie werden ihnen unsere Hauptfarben senden. Also werden sie stattdessen diese Hauptfarben verwenden. Dies ist die Größe des Ansichtsfensters, dies ist die Entwurfsgröße. So 1920 von 4959. Das ist also die Gesamthöhe unserer eigentlichen Design-Kunsttafel. Wir haben Charakterformate, also haben wir sie genau hier, und Sie können hier klicken, um darauf zuzugreifen. So Schriftfamilie Poppins, Schriftgewicht, normale Schriftgröße 18. Das sind die Farbe, Zeichenabstand und der Zeilenabstand, die für das CSS wieder sehr wichtig sind, weil sie direkt von hier aus all diese Einstellungen nutzen können . Also noch einmal, wenn Sie wollen, können Sie jede einzelne Sache auswählen, die hier hochgeladen wird und sie können es direkt von hier herunterladen. Aber wenn nicht, werde ich Ihnen im nächsten Teil des Kurses zeigen, zu dem wir später kommen. Wie sie können, wie Sie organisieren, bearbeiten, exportieren Sie alles, und senden Sie ihnen, dass für eine spätere Verwendung. Layout-Raster. Sie können sehen, dass wir sogar das Gitter haben. So Spalten Rinnenbreite, Spaltenbreite, Rand n. Fettleibigkeit. Fettleibigkeit ist im Grunde die Fettleibigkeit dieser Rasterlinien, so dass Sie sie besser sehen können, sobald Sie mit der Gestaltung beginnen. Und schließlich hier haben wir verschiedene Interaktionen für verschiedene Seiten. So haben wir Aktion ist Übergang, Ziel ist Kartendesign. Wenn wir darauf klicken, wird es mich zu dieser Seite bringen. Und ich bin in der Lage, all diese Dinge hier zu sehen. Also, das ist es im Grunde. Gehen wir schnell zurück zur Homepage. Wenn ich von dort aus gehen kann, kann ich auf Menü Knall klicken, um zur Homepage zu gelangen. Und dann, wenn ich hier klicke, haben Sie diese Vermögenswerte genau hier. So können sie einfach auf die Assets klicken. Es zeigt den Download-Button, ich hoffe, Sie können es sehen. Und dann, wenn Sie auf Download klicken, Wie Sie sehen können, hat es bereits mit dem Herunterladen begonnen. Es wird es als SVG herunterladen, das bei weitem das beste Format ist, um später mit den Codern zu arbeiten, schließlich, wenn ich darauf klicke, zeigt es mir, was es ausgewählt ist, Zeigen Sie mir zum Herunterladen und so weiter und so weiter. Aber wenn ich über sie bewegen möchte, zum Beispiel, genau hier wird das Aussehen zu zeigen, wird den Farbverlauf zeigen, weil dies die Gradientenrichtung, Prozentsatz oder Basicity Asset ist . Und schließlich haben sie die Möglichkeit zum Download. Wenn Sie also noch einmal planen, diese Assets direkt von hier herunterladen zu lassen, können Sie, sobald Sie etwas darin positionieren, dass es D betrifft, Sie können später für den Export markieren, wenn Sie Ihr Design zur Überprüfung hochladen und für eine -Entwicklung, werden sie in der Lage sein, hier klicken und die Assets direkt von hier herunterladen. Aber noch einmal, denken Sie daran, dass Sie nur dieses einzelne Projekt auf einer kostenlosen Version von Adobe XD verwenden. Entwickler brauchen Zeit, um dies zu entwickeln. Bis zu diesem Zeitpunkt sind Sie mit dem nächsten Projekt übergegangen und müssen in diesem Projekt von Ihrem Konto und von Ihrem Computer löschen. Und deshalb werden sie nicht mehr auf dieses Projekt zugreifen können. Also die nächste Option, die ich mit dir teilen werde, ist permanent. Und Sie werden in der Lage sein, diese Option mit Ihrem Kunden und Entwicklern zu teilen. Also werden sie in der Lage sein, die Datei auf unbestimmte Zeit zu behalten. Wenn sie sich zum Beispiel dafür entscheiden, diese Datei zu entwickeln, sagen wir, in zwei Jahren, werden sie sie immer noch haben. Aber auf diese Weise müssen Sie diesen Prototyp online halten , damit sie all diese Dinge herunterladen und entwickeln können. Das war's also für dieses Video. Ich hoffe wirklich, Sie verstehen, wie einfach das zu teilen ist, wie einfach es ist, auf Ihre Kunden und Entwickler zuzugreifen, wie einfach und rationalisiert alles gibt. Die Animation funktioniert also gut, die gesamte Interaktion funktioniert so, wie sie sollte, und alles ist an einem Ort. So teilen sich die Designentwicklung, so dass jeder im Team darauf zugreifen kann und jeder an diesem Projekt zusammenarbeiten kann. Im nächsten Abschnitt des Kurses werde ich Ihnen zeigen, wie Sie all diese Assets extrahieren können, wie Sie sie strukturieren, verpacken und sie dann an Ihre Kunden und Entwickler zur späteren Verwendung senden können . Denn wie gesagt, diese Projekte können manchmal Monate dauern, bis sie sich entwickeln. Dieser Weg ist also nicht die beste Option für jemanden, der den kostenlosen Plan nutzt. Wenn Sie kostenpflichtige Plan angeboten Fettleibigkeit verwenden und Sie unbegrenzten Speicherplatz haben, haben Sie unbegrenzte Freigabeoptionen für die Links und so weiter. Wen kümmert es dann? Sie können diesen Link einfach verlassen und sie können später darauf zugreifen, wenn Sie möchten. einmal können Sie es kennwortgeschützt. Jedes Mal, wenn jemand darauf zugreifen muss, muss er das Passwort verwenden und so weiter. Also alles, worüber wir in diesen Lektionen über das Teilen gesprochen haben. Im nächsten Video werden wir also erneut zur Freigabe- und Paketstruktur übergehen und dann endlich Ihre Assets an Entwickler und Kunden liefern. Also sehe ich dich dort. 68. Design erstellen: Bevor wir tatsächlich in den Export springen, und ich zeige Ihnen, wie Sie Assets direkt auf Ihren Computer exportieren und sie dann mit Entwicklern und Kunden teilen können. Ich möchte schnell zwei Dinge abdecken. Nummer eins ist Design-Token und Nummer zwei ist Designsysteme. Beide sind also wirklich wichtig. Beide sind im Konstruktionssystem grundsätzlich kritisch. Wenn Sie sie umsetzen wollen, wollte ich sie absichtlich nicht in diesem Projekt implementieren und ich werde erklären, warum. Aber ich wollte Ihnen nur zeigen, dass Sie diese Optionen auch haben, besonders wenn das Projekt skaliert und größer und größer wird. Wie Sie sehen können, bin ich wieder in meiner Adobe XD-Datei und werde hier reinspringen. Und wie Sie hier sehen können, haben wir genau diese Grundfarben. Und diese Grundfarben sind absichtlich so gemacht, nur um Ihnen zu zeigen, was Sie jetzt mit designten Tolkien's tun können. Design-Token sind also im Grunde Namen Ihrer Farben, Namen aus Ihren Schriften und so weiter. Daher werden Design-Token später von Entwicklern verwendet. Und niemand hat Ihnen das im vorherigen Video im Austausch mit Entwicklern gezeigt. Also, jetzt werde ich Ihnen zeigen, wenn Sie sich erinnern, wir hatten die Schulden unbenannte Farbe und so weiter. Ich werde Ihnen zeigen, wie Sie das beheben können und einige Tipps und Tricks, um Ihr Dachgeschoss noch besser zu verbessern und mit Entwicklern noch besser zu teilen. Lassen Sie uns also beginnen, die Farbe Ihrer Schriftart zu ändern. Sie können, Entschuldigung Ihrer Farbe. Sie können einfach mit der rechten Maustaste klicken und Sie können umbenennen oder Sie können hier doppelklicken, und Sie können sehen, dass es Elementname genannt wird. Wir können es einfach nennen, zum Beispiel einfach weiß. Und sie werden Candice Dash benutzen. Und ich verwende Bindestriche im Grunde wegen des Codes. Wenn Sie also etwas über zwei Code wissen, können Sie keine Großbuchstaben verwenden, Sie können keine Abstände verwenden. Daher können Sie entweder Bindestriche oder diese unteren Bindestriche verwenden. Entweder das hier oder lassen Sie mich Ihnen dieses zeigen. Also entweder eine gerade oder diese untere. Es liegt also wirklich alles an dir. Ich benutze den unteren Teil meines Designs, aber ich möchte Ihnen nur zeigen, dass Sie diese Option auch haben. Als nächstes können wir hier doppelklicken und diesen hellgrau nennen. Wir können das dunkelgrau nennen. Jetzt können wir das zum Beispiel als grün bezeichnen . Und das hier ist Secondary Green. Und das hier, weil es zwischen Grün und Blau liegt. Wir können es so etwas wie, ich weiß nicht, gemeine Farbe nennen . Wir können das anrufen, mal sehen. Dunkelgrau. Wir können das fast schwarz nennen. Und schließlich können wir das eine Gefahr rot nennen. Ich habe absichtlich diese Farben gegeben, diese Namen statt einfach weiß bis grau und so weiter. Nur weil Sie, Entwickler und Kunden in der Lage sein werden, all diese Farben zu verstehen. In einigen Fällen, zum Beispiel, wenn Ihr Kunde bereits einen Teil der Marke hat, Markenboard integriert oder sie haben so etwas wie eine Marke Richtlinien. Es ist großartig, weil Sie alle diese Farben haben oder bereit. Und in den meisten Fällen haben Sie bereits Farbnamen, also werden Sie nur diese Farbnamen als diese verwenden. Und deshalb wird es für Sie Client-End-Entwickler viel einfacher sein , von Dana zu arbeiten, weil sie diese Farben bereits haben. Wenn sie nicht die Farben haben, wie in unserem Fall, werden wir die Farben von Grund auf neu erstellen. Und ich habe Ihnen bereits gezeigt, dass einige andere Farben abtasten, indem Sie ähnliche Farben wie diese kopieren und einfügen und ihnen dann einfach Namen geben. Wieder einmal sind diese Namen wirklich wichtig als Design-Token. Und wieder einmal, ich habe sie absichtlich nicht am Anfang erstellt stand ein Deck zeigt Ihnen, wie wir sie hier erstellen können und wie es einfacher für Entwickler ist, von hier aus zu arbeiten. Auch später, wenn wir mit dem Styleguide beginnen, anstatt einfach weiß, grau und so weiter zu setzen, werden wir diese genauen Namen plus die Hex-Werte setzen. Und ich werde Ihnen das später in einem späteren Video zeigen , wenn wir tatsächlich zum Styleguide kommen. Jetzt kommt der Teil, dies mit Entwicklern zu teilen. Also, jetzt, da wir das erstellt haben, können Sie voran gehen und speichern, weil Sie sehen können, dass wir das hier haben. Ich werde tatsächlich weitermachen, um zu teilen. Klicken Sie auf mein Website-Design. Wir haben bereits den Link, den wir zuvor erstellt haben. Ich werde einfach den Update-Link drücken. Und jetzt, wenn der Link aktualisiert wird, werde ich zu Ihnen zurückkommen und ich werde Ihnen zeigen, dass in der Entwickler-Spezifikation Share-Option, was hat sich zu den vorherigen Versionen geändert. Okay, jetzt, wo das fertig ist, können Sie sehen, dass es aktualisiert wird. Lassen Sie mich Sie schnell auf den Prototyp selbst bringen. Also hier sind wir. Wenn wir hier zu den Entwickler-Spezifikationen wollen, können Sie sehen, dass wir alle diese Assets haben. Jetzt, wenn ich darüber schwebe, können Sie sofort sehen, dass wir den Hex-Code haben , der in diesem Fall alles Fs ist, weil es einfach einfach weiß ist. Und wir haben die Flugzeug-Aufhellung, die wir unserer ursprünglichen Farbe gegeben haben. Neben, dass Sie sehen, haben wir dunkelgrau. Hellgrau, fast schwarz und mittlere Farbe. Wenn ich nun den Mauszeiger schiebe und hier klicke, kannst du zum Beispiel auf diese Schaltfläche sehen, dass es die Hauptfarbe ist. Wenn ich hier klicke, kann man sehen, dass es einfach weiß ist. Wenn ich mehr eins gehe und zum Beispiel klicke hier rechts und gehe tiefer hinein. Mal sehen. Kann ich das tun? Also haben wir hier ein Amin Grün, es ist leicht toll, wenn ich auf diesen Hintergrund klicke. Und wenn wir weiter gehen, und zum Beispiel, klicken Sie rechts hier, können Sie sehen, dass wir das hellgrau haben, aber diese Schaltfläche ist zum Beispiel unsere Hauptfarbe. Wenn ich auf den Hover klicke und direkt innerhalb von dort klicke, können Sie sehen, dass wir das bedeutet grün haben und unter Standardzustand haben wir stattdessen die Hauptfarbe. Das war's also für diesen hier. Und hier können Sie sehen, dass wir innerhalb der CD, CSS, alle diese Werte ändern. Wenn ich zum Beispiel zu meinen Variablen zurückgehe, können Sie sehen, dass wir gefährlich und die Hex-Farbe daneben haben, fast schwarz, dunkel, rassisch. Alle Farben, die wir umbenannt haben, sind hier auf der linken Seite. Diese erscheinen also auch hier in den Optionen des d's zum Teilen. Und Entwickler werden in der Lage sein, einfach diese Variablen zu finden und wählen Sie einfach, Kopieren und fügen Sie sie in ihren Code. Daher ist es viel einfacher für sie, die Farben global zu ändern , wenn Sie diese Farbnamen anstelle von vier DEM haben, wodurch diese Farbnamen später angegeben werden, wenn Sie sich tatsächlich weiter in Ihrem Design- und Entwicklungsprozess befinden. Das war's also. Das sind Ihre Design-Token. Ich hoffe, du verstehst, wie wichtig sie sind. Ich hoffe, Sie verstehen, wie einfach sie umzusetzen sind. Grundsätzlich ist der Tipp hier, sobald Sie anfangen zu arbeiten, sobald Sie beginnen, diese Farben anzuwenden, geben Sie diese Farben Namen, weil es später viel einfacher sein wird , mit diesen Farben zu arbeiten, sobald Sie ihnen Namen geben. Also, das ist es im Grunde für Design-Token. Im nächsten Video werden wir tatsächlich zum Entwurf von Systemen übergehen. Wir haben kein Designsystem für dieses Projekt erstellt, aber ich werde Ihnen ein großartiges Beispiel zeigen. Zeigen Sie, warum sie wichtig sind und wie Sie einen erstellen können. Also sehe ich dich dort. 69. Ein Designsystem erstellen: Abschließend möchte ich Ihnen das Designsystem zeigen, was sie sind. Warum sind sie nützlich in dem, was Sie tun können, um eine für sich selbst zu erstellen? Also hier habe ich dieses kostenlose Designsystem geöffnet, das ich online gefunden habe. Es nennt sich Carbon Design System. Und es wurde von IBM erstellt. Und wenn Sie etwas über Technologie wissen, ist IBM diese große globale Marke, die sich seit Jahrzehnten um Technologie kümmert. Und Sie können hier alles sehen. So können Sie Carbon Design system.com eingeben. Und Sie können alle diese Panels öffnen und erkunden, was es untersucht wird, verschiedene Daten-Explorer und verschiedene Komponenten, verschiedene Elemente, Datenvisualisierung und so weiter und so weiter. Also im Grunde, was ein Designsystem ist, es ist eine Sprache der Marke. Also alles, was Sie rund um das Design tun, nicht nur all diese Elemente, sondern wie Design wird mit Ihrem Kunden sprechen? Wie es geht, um verschiedene Bildschirme anzupassen, versteckt in Position auf dem Markt neben der Konkurrenz. Wie wird zum Beispiel in fünf oder zehn Jahren aussehen , wie es skaliert wird. Nehmen wir an, dass Sie jetzt fünf Seiten haben, aber im nächsten Jahr werden Sie 100 verschiedene Seiten hinzufügen. Sie benötigen also all diese verschiedenen Elemente, um proportional zu skalieren, gleichmäßig zu skalieren und sich an all diese Marktänderungen in all diesen Positionen anzupassen. Deshalb sind Designsysteme formuliert und deshalb empfehle ich Ihnen immer, mit Designsystemen zu beginnen. Designsysteme sind nicht nur für große Marken geeignet, sie können auch für kleinere Marken verwendet werden. Aber stellen Sie sicher, dass für kleinere Marken, gibt es offensichtlich eine kleinere Menge an all diesen Komponenten, kleinere Menge an Geschichte und so weiter und so weiter. Also, wenn wir es nur noch einmal hier zurücknehmen, können Sie sehen, wie Sie entwerfen, entwickeln und beitragen, was passiert. So können Sie ihre Richtlinien überprüfen. Und Sie können sehen, zum Beispiel, trauen Sie sich mit diesem 2x Raster. Und du kannst nach unten scrollen und mit diesen Videos sehen und spielen. War Hill Axt größer ist der organisierende Rahmen dafür, wie es funktioniert und wie es sich an all diese verschiedenen Seiten anpasst. So können Sie mehr darüber lesen. Wenn Sie dieses Raster nicht verwenden und Sie zum Beispiel Bootstrap-Grid verwenden, wie wir, werden Sie diese Dokumentation erstellen, nicht in diesem Fall offensichtlich, aber Sie können es erstellen, zum Beispiel, als separate Eier, eine Datei, als PDF. Sie können eine Online-Webseite erstellen, zum Beispiel für diese Marke und so weiter. Als nächstes haben wir Zugänglichkeit, so genannte leicht unzugänglich. Ihre Website ist für Menschen in Not, zum Beispiel Inhalte. Sie können Stimme und Ton, Konversationsebenen, weniger Konversation, mehr Konversation usw. sehen. Farbe. Was stellt die Farbe in diesem Designsystem dar? Symbole, wie Sie diese Symbole verwenden, können Sie dort sehen oder nicht. Es gibt keine Variation von Symbolen hier. Sie sehen alle ähnlich aus. Piktogramme, Bewegungsabstand hält Typografie. Also offensichtlich, viele dieser verschiedenen Dinge sind, was das komplette und vollständige Design-System macht. keine Angst vor allem, was Sie hier auf der linken Seite sehen , denn wie gesagt, das ist IBM. Sie haben Tausende von Tausenden von verschiedenen Menschen, die für sie arbeiten. Ich ermutige Sie wirklich, Design-Systeme online zu erkunden, die ein wenig kleiner sind als dieses und einfacher zu verstehen, einfacher zu konsumieren sind. Aber ich zeige Ihnen nur, was die Giganten der Branche tun, damit Sie besser verstehen können , was sich in diesen Designsystemdaten entwickelt hat. So können Sie sehen, zum Beispiel, lassen Sie uns Bewegung verwenden. Und Sie können all diese verschiedenen Bewegungen sehen und wie sie in diesem kompletten Paket von Designsystem enthalten sind . So können Sie diesen Antrag hier sehen. So tippen Sie Punkte, erweitern Punkte, Navigationspunkte und so weiter. Also geht alles auf einen Punkt, Punkt tauscht seine wechselnden Kreise aus und so weiter. Und beachte nur, dass wir und diesen Umriss hier haben, also haben wir keine gefüllten Formen. Wir haben die Umrisse. Dies sind bayesische Kurven, also wie sie sich bewegen und so weiter. All diese Informationen sind also innerhalb des Designsystems enthalten. Um also zu vermeiden, dass ich hier stundenlang mit Ihnen spreche, können Sie einfach zu carbon design system.com gehen und ich werde sicherstellen , dass Sie einen Link in der PDF-Datei hinterlassen, damit Sie darauf auch klicken und darauf zugreifen können. So können Sie es überprüfen. Und nun gehen wir zurück zu der Datei und sehen, wie es in Adobe XD-Datei selbst übersetzt. Wie Sie sehen können, haben wir immer noch diese Farben. Und Sie können sehen, dass sie IT-Grade 20 Hover nennen, was bedeutet, dass es grau ist, 20% Deckkraft und es zeigt auf Hover. So können Sie sehen, wie sie mit Design-Token umgehen. Also das ist lila, 60, das ist blau 20. Aber im Grunde bewegen sie sich einfach durch das Design und Sie können all das sehen. Und dort haben wir Charakterstile, viele von ihnen, wir haben verschiedene Komponenten, auch viele von ihnen. Sie schaffen also im Grunde Komponenten für jeden einzelnen Schritt der Designreise. Also, wenn ich Sie hierher bringe, ist das die Datei „Erste Schritte“. Offensichtlich lesen Sie das, wenn Sie wollen. Wie können Sie diese Datei verwenden und so weiter. Als nächstes haben wir Typ-Token. Typ-Token werden in XDS noch nicht unterstützt, aber sie werden in Zukunft definitiv sein. So werden nur Farb-Token unterstützt. Und ich habe dir gezeigt, dass im vorherigen Video diese tiefen Dawkins später definitiv unterstützt werden. So können Sie sich genauso gut damit vertraut machen. Anstatt Ihre Schriftart so aussehen zu lassen, können Sie sie umbenennen. Und dann wird es so etwas aussehen. So können Sie es zum Beispiel Code 01, Code 02 nennen . Und Sie können ihnen diese Art von Hashes und diese Art von geben, nennen wir es Namen. Entwickler werden also einfacher in der Lage sein , sie innerhalb des Codes zu verwenden, anstatt einfach so zu sein. So können Sie zum Beispiel die Nachahmung sehen. Es ist also Mono-Typ Schrägstrich, Mono-Typ Schrägstrich Mono, IBM Typ Schrägstrich Mano. Alle diese sind also Typ-Token. Als nächstes haben wir farbige Token, und das sind die, die ich dir bereits gezeigt habe. Das sind also die Hash-Werte bei Entwicklern, die sie verwenden werden. Dies ist die Rolle, also Standardseitenhintergrund, dies ist der Wert, so weiß und der fff ist auch Hex-Code. So können Sie durch all diese gehen und Sie können Dialog. Dies ist kostenlos, so dass Sie es genauer erkunden können. Wir haben Komponenten, Komponenten, Akkordeon und so weiter. Also, wenn ich auf meine Komponente klicke und zurück zu hier, und mal sehen, wo es Ihnen das besser zeigen kann. Mal sehen. Das ist wahrscheinlich irgendwo unten. Hier ist es. Wie Sie sehen können, haben wir dieses Skelett. Wir haben deaktiviert, geöffnet, fokussiert und schwebt. Also haben sie im Grunde eine einzelne Komponente für dieses bestimmte Element erstellt und dann alle diese Optionen gegeben. Im Standardzustand sieht es so aus. Das ist also ein Drop-down-Menü. Also Akkordeon Artikel schweben. So wie es aussieht, wenn Menschen schweben, konzentrieren Sie sich, wie es aussieht, zum Beispiel, wenn Sie klicken und Sie etwas eingeben möchten, das ist der Fokusstatus, offener Zustand, offensichtlich, wenn es deaktiviert wird. Also, wenn die Menschen nicht darauf klicken können, Skelett, das ist nur eine grundlegende, grundlegende Drahtmodell und Skelett offen. Sie möchten also auch den offenen Zustand für Ihr Drahtmodell anzeigen. Sie unterscheiden sich für alle diese anderen Elemente. So können Sie schnell hier springen und sehen, zum Beispiel, sehen wir vier Tasten zum Beispiel. Oder wenn wir einige Foren finden, Mal sehen Schulden. Also lassen Sie uns sehen, was sie auch hier, lassen Sie uns es auf diesen testen. Also hier haben wir zum Beispiel dieses schöne Drop-down-Menü. Also haben wir Hover, Fokus, Skelett und offen. Und Sie können feststellen, dass eine Vier ab jetzt, sie verwenden die gleichen Farben Tag mit den gleichen Techniken. Sie verwenden die gleichen Overlays, sie verwenden die gleichen Umrisse, also ist alles gleich. Während Ihres gesamten Designs. Hier kommt ein Designsystem ins Spiel. Und im größeren Bild, wenn Sie beginnen, dieses Produkt als Website zu verwenden, hat eine mobile App als Dashboard, was auch immer, es wird aussehen, wie es gehört zu dem gleichen Produkt. So können Sie diese hier sehen, ich bin im Standardzustand. Hier sind wir auf Hover. Sie können also im Grunde sehen, dass sie all diese Zustände geschaffen haben und im Grunde all diese Optionen hier innerhalb dieses Kunstportals vorgestellt haben. Also hier haben wir Standardzustand Horror, Fokus, das ist dieses, Skelett, das ist dieses, offen, das ist dieses hier. So können Sie deutlich sehen, was sie mit diesem Designsystem gemacht haben. Auch hier ist dies eine fantastische Option, um Ihren Kunden und Entwicklern all diese verschiedenen Optionen zu zeigen . Und es ist auch eine fantastische Art und Weise. Zum Beispiel haben Sie dieses Projekt abgeschlossen. Du hast dein Geld genommen, du hast es beendet, du schickst es an die Kunden und Entwickler. Das ist in Ordnung. Jeder ist glücklich. Aber in einem Jahr, zum Beispiel, wenn jemand anderes herkommt und diese Datei bearbeiten will, wird es für sie viel schwieriger sein, das zu tun. Lesen Sie alle Designsysteme an Ort und Stelle oder zumindest Designrichtlinien. So. Ein Designsystem selbst für kleinere Projekte und Produkte zu haben, ist eine fantastische Möglichkeit, Dinge zu erledigen. Hier. Als nächstes kann ich Ihnen das zeigen, damit Sie sehen können, dass wir modale, so verschiedene Dinge haben , die hier und da auftauchen. Wir haben Benachrichtigungen. So zum Beispiel geht etwas falsch Fehler hier und so weiter. Und Sie können für all diese bemerken, sie haben diese verschiedenen Stile enthalten. Also funktioniert alles so, wie es sollte. Alles sieht so aus, als gehöre es zu diesem Projekt. So können Sie sehen, dass alle diese verschiedenen Komponenten für alle diese verschiedenen Stile enthalten . Später können Entwickler diese Encodierung dann integrieren. Gehen wir zum Beispiel hierher und lassen Sie uns sehen. So zum Beispiel, Fokus pro Seite. So können Sie sehen, wir haben diese blaue Umriss Entwickler verwenden können, zum Beispiel, Dicke der Frist, Farbe der Frist, ein abgerundetes Rechteck oder nicht. In diesem Fall ist es völlig gerade und sie können sich sofort an diese Veränderungen in der Kälte anpassen. Jedes Mal, wenn es den Fokus gibt, wie Sie hier sehen können, und diese Änderungen werden gelten. Aber Sie müssen sie immer noch im Design zeigen und Sie müssen sie immer noch in all Ihren Elementen anwenden, nur um dem Kunden, Entwicklern und dann Benutzern, vielleicht sogar Teamkollegen zu zeigen Entwicklern und dann Benutzern, , wie es aussehen wird, wenn es hier ist. Also im Grunde ist es das. Sie können alle diese Dinge überprüfen, all diese Änderungen. Und jetzt lassen Sie uns das minimieren, damit ich Sie zu unserer Akte bringen und Ihnen erklären kann, wie das alles in unserer Akte gemacht werden kann. Also im Grunde, wenn ich Sie zurück zu unserem ursprünglichen Button, zum Beispiel, das ist dieser Mai 1 Rican, geben Sie diese Schaltfläche alle diese gleichen Einstellungen, so können wir zeigen Hover, die wir bereits haben. Wir können den Fokus deaktiviert zeigen. Aber hier haben wir keinen deaktivierten Zustand, da wir die Anmeldung nicht deaktivieren können. Sie müssen dort klicken. Du musst also auch über all diese Dinge nachdenken. Für einige Dinge wie für die Formulare, zum Beispiel, wie Tag im IBM Beispiel gezeigt, müssen Sie all diese Dinge tun, weil nicht alle der Male, die Sie klicken können, sagen wir, dass Sie wollen auf Absenden klicken Schaltfläche, aber Sie haben keine E-Mail-Adresse eingegeben, zum Beispiel innerhalb des Formulars, dann sollte dieses Formular zum Beispiel deaktiviert werden, bis Sie die erforderlichen Informationen hier eingeben. Du siehst also, wohin das geht. Sie müssen all diese verschiedenen Stile präsentieren. den Fall, dass beispielsweise in einem Jahr entscheiden, Kunden beispielsweise in einem Jahr entscheiden,dass sie diesen Login-Button in ein Formular für was auch immer ändern möchten. Sie haben immer noch diesen deaktivierten Zustand, Sie haben immer noch den Fokus ausgewählt Hover und so weiter. So können Sie das für all diese verschiedenen Dinge tun, nicht nur für diese. Sie können dies für diese Arten von Karten tun. Zum Beispiel können Sie dies für diese Karten tun, für diese Q und ein zum Beispiel, und so weiter. So können Sie alle diese Komponenten mit all diesen Zuständen erstellen. Stellen Sie sicher, dass Sie genau die gleichen Einstellungen verwenden. Wenn Sie also Outline verwenden, stellen Sie sicher, dass Sie überall genau die gleiche Gliederung verwenden. Wenn Sie Hover verwenden, wie wir es hier getan haben, stellen Sie sicher, dass Sie genau die gleiche Farbe während Ihres Wunsches verwenden. Und so wird Ihr Designsystem wachsen. Und so wirst du dich entwickeln und in den kommenden Jahren noch größer und noch nützlicher werden . Also, das ist es im Grunde für diesen Abschnitt. Ich hoffe, Sie haben es genossen und ich hoffe, Sie lernen etwas Neues. Und wenn Sie eine Regel getan haben, empfehlen Sie wirklich, dass Sie dieses IBM Design System überprüfen. Also wieder, carbon design system.com, weil es Ihnen viele, viele verschiedene Möglichkeiten und Einblicke in das, was all diese großen Unternehmen tun, wie sie ihre Produkte skalieren. Und Sie können es in Aktion sehen, weil dies auf ihrer Website live ist. Das ist ihre Designsprache. Und Sie können verstehen, was diese großen Akteure tun und was Sie von kleineren Projekten erwarten können. Aber später, wenn Sie in Bierfirma springen, was größere Unternehmen tun, so dass Sie wissen, wo Sie Ihr Wissen anwenden können. Und wenn jemand anderes zum Beispiel sagt: Okay, gib mir Type-Design-Token, du wirst nicht verloren gehen. Jetzt wissen Sie, was Art Design Token sind, wie sie verwendet werden und wie Sie sie auch verwenden können. 70. Erstellen einer Projektpräsentation: Okay, so jetzt, jetzt hat all das abgeschlossen ist. Ich habe noch zwei Dinge mit dir zu teilen. Nummer eins ist die Präsentation, und diese Präsentation können Sie auf Ihrer Website oder in Ihrem Beacons-Profil auf Dribble verwenden. Oder Sie können eine Präsentation erstellen, damit Ihre Kunden ihren Stakeholdern zeigen, ihren Geschäftspartnern zeigen, ihren Teammitgliedern zeigen und so weiter. Damit die Menschen in einem PDF-Formular oder in einem webseitenbasierten Forum verstehen können , wie dieses Projekt aussehen kann und wie dieses Design entstanden ist. So können Sie die Präsentation verwenden, um alle Arten von verschiedenen Dingen zu zeigen. Sie können von Ihrem Denken beginnen. Sie können mit Ihrem Papier von Drahtmodellen beginnen. Sie können von der Website-Architektur beginnen, von der Erkundung, vom Sprechen mit Menschen. Es gibt also viele, viele, viele verschiedene Möglichkeiten, wie Sie diese Präsentation erstellen können und wie professionell Ihre Präsentation sein soll. Die niedrigste Ebene ist also im Grunde nur, alle Ihre Seiten übereinander an einem Tag zu legen . Sie können mit der Präsentation wie tot tun, wenn Sie keine zusätzlichen Elemente benötigen. Aber ich würde Sie wirklich ermutigen, wenn Sie diese Präsentationen erstellen , um zumindest Ihr Denken hinter dem Projekt zu zeigen. So Person, die diese Präsentationen beobachtet, zum Beispiel auf Ihrer Website oder auf Ihrem Beacons-Profil, dribbeln oder was auch immer, kann Ihre Logik, Ihr Denken und Ihre organisatorischen Fähigkeiten hinter diesen Projekte, damit sie besser verstehen können, wie Sie zu diesen Schlussfolgerungen gekommen sind und warum haben Sie die Dinge so aussehen lassen, wie Sie es getan haben? Also in diesem Video werde ich zuerst einige Backends, Beispiele mit Ihnen teilen. Ich werde Ihnen zeigen, was andere tun. Und dann werde ich Ihnen zeigen, wo Sie Mockups in Ihren Adobe XD-Projekten verwenden können? Und ich werde dir diese Mockups zeigen. Und wie können Sie mit diesen Mockups arbeiten, um nur den Ausgangspunkt der Präsentation zu schaffen? Denn Präsentationen können Stunden, manchmal Tage, sogar Wochen dauern, bis sie erstellt werden, je nachdem, wie Komplexität man in der Regel ist. Beginnen wir also mit Beacons, Beispielen, und ich werde Ihnen zeigen, wo Sie Ihre Präsentationen hinbringen können. Okay, hier haben wir ein paar Behance-Beispiele. Und wie Sie sehen können, habe ich einfach in Bankwebsite Design eingegeben weil wir die Bank Website Design gemacht haben und ich wollte Ihnen nur einige Beispiele zeigen. Ich sortierte hier nach kuratierten, was bedeutet, dass es alle diese Tags hat. Und da Website-Design normalerweise im UI-UX-Design ist, sollten Sie sich Dinge wie diese ansehen. Sie können es auch sortieren, indem Sie empfohlen. Und es wird Ihnen einige verschiedene Beispiele hier geben. Es wird ein bisschen genauer sein, aber Sie werden nicht in der Lage sein, kuratiert die ganze Zeit zu suchen. Aber du wirst immer noch in der Lage sein, so kuratiert zu suchen. So diese Person erstellt ihr Design in Adobe XD wird auch in dieser Mitgliedergalerie gezeigt und schließlich in den USA im UX-Design vorgestellt. Also fangen wir eigentlich mit diesem Design an. Ich habe es hier geöffnet und Sie können sehen, dass sie mit Illustrationen beginnen. Wir haben keine Illustrationen für unser Projekt erstellt, aber Sie können deutlich sehen, was sie hier gemacht haben. Sie haben eine vollständige Markenidentität gemacht, was wir nicht getan haben, weil unser Projekt bereits einige Branding im Inneren hatte, wie das Logo, Farben, Schriftarten und so weiter. Also haben sie das alles getan. Sie haben die Logo-Erkundung gemacht. Sie haben alle diese Karten und Kartenlayout, so haben sich nur vorstellen, wie diese Karten aussehen werden, wenn sie fertig sind. Sie haben einige dieser grundlegenden Animationen und sie erstellt Unordnung des Drahtgittermodells ist Stil. Und Sie können einige Karten sehen, die ein- und ausfliegen und wie der Tod abgeschlossen werden kann. Offensichtlich verwenden sie einige fortschrittlichere Tools wie Adobe After Effects, zum Beispiel für all diese Animationen. Aber Sie können dies auch in Adobe XD tun, und Sie können einen Prototyp aufzeichnen , und Sie können diesen als Video exportieren und dann so zeigen. Aber Sie brauchen immer noch einige Werkzeuge wie Aftereffekte, zum Beispiel, nur um diese in diese animierten Mockups zu setzen. Oder Sie können Online-Tools oder einige andere kostenpflichtige Tools verwenden, vor allem, wenn Sie ein Mac-Benutzer sind, weil wir manchmal Windows-Benutzer sind, es wagen nicht so viele Optionen verfügbar. Aber im Grunde können Sie sehen, was sie getan haben, direkt hier an der aufgelisteten alle ihre Kartenbildschirme und Website-Bildschirme und so weiter, Kunden-Illustrationen. Also präsentierten sie Dad. Und Sie können auch hier klicken, um dieses Video zu sehen und alle diese Animationen zu sehen. Und im Grunde sind diese Animationen in einigen getan, ein bisschen fortgeschritteneren Werkzeug, wie wieder, nach Effekten. Oder Sie können so etwas in füllen Mora von wandern Aktie tun. Also hier ist ihre Website und sie haben es so angelegt. Und Sie können sehen, dass sie diese Hintergrundelemente verwenden , nur um das Design ein wenig mehr hervorzuheben. Und sie verwenden diesen eckigen Ansatz. Anstatt sie so zu setzen, haben sie es einfach zu einer Seite angewinkelt, nur um ein bisschen mehr visuelle Interessen zu schaffen. Und Sie können sehen, dass die kombinierten mobilen Seiten sowie mit den Desktop-Seiten im Inneren. Und sie haben diese schöne Animation für das Ende erstellt. Sie können in diesem Fall auch so etwas erstellen, um echte Mockups oder echte Geräteformulare zu verwenden . Und Sie können mit Typografie beginnen. Was ist Topographie? Haben Sie Branding und schwer zu Branding sieht aus wie, vor allem, wenn Ihr Kunde hat das Branding online, so Marke Website und Sie können sehen, dass sie verwendet, und diese Mock-up von unserem Laptop direkt hier bei NDI haben diese längere Präsentation mit diesen Hintergrundelementen erstellt. Zum Beispiel, dan, sie haben diese App vorgestellt und Sie können sehen, dass alles im Branding ist, alles ist in der Art. Und um so etwas zu schaffen, müssen Sie wirklich üben. Sie müssen wirklich all diese professionellen Beispiele erkunden. Und Sie können sehen, einige Animation ist genau hier als auch getan. So können Sie sehen, dass sie Aftereffekte, Adobe Illustrator, InDesign und Photoshop verwenden . Und schließlich haben sie es mit diesem abgeschlossen. Also, um Mock-ups zu verwenden, meine Damen, ich verwende Winkel in Adobe XD. Es ist APEDE Mockup-Service. So können Sie in dieser Menge an Geld sein, um all diese Mock-ups zu bekommen. So können Sie sehen, dass sie 2800 und Mock-ups im Moment haben. Sie sind auch für Sketch XD und Fig Maya erhältlich. Und wenn ich beginne, nach unten zu scrollen, können Sie sehen, wie all diese Mockups aussehen. Sie haben Ton Version echte Versionen haben, dunkle Versionen, Lite-Versionen und so weiter und so weiter. Und Sie können sehen, was sie hier getan haben. So haben Sie 1620 iOS-Geräte, 780 Android-Geräte für 30 Desktop-Geräte und so weiter. Und Sie können die schnelle Vorschau sehen oder direkt hier. All diese Geräte. Jetzt können Sie das mitgelieferte iPhone 11 und Pro sehen. Pro Displays, DR. iMac und Pixel Samsung Geräte. Da das iPhone 12 gestartet wurde, werden sie dies wieder aktualisieren, um auch iPhone 12 einzuschließen. Und einmal, was großartig daran ist, dass sie diese Tapeten in 5K-Auflösung enthalten. So können Sie sie als Desktop-Hintergründe verwenden. Sie können sie als eine Art von Overlays und so weiter und so weiter verwenden. Dies sind die Unternehmen, die waren, verwenden dieses Projekt. Einige Testimonials von den Benutzern direkt hier, häufig gestellte Fragen und so weiter. Wenn dir das gefällt, kannst du keine Todesfälle sein. Und sie haben auch eine kostenlose Version, so dass Sie es ausprobieren können, aber es ist wirklich begrenzt und Sie können die Probe direkt hier von oben herunterladen. Ich werde auch den Link verlassen, damit Sie wirklich schnell darauf zugreifen können. Also, wenn Sie dafür bezahlen, oder wenn Sie eine kostenlose Probe herunterladen, werden Sie nur ein paar Geräte zu bekommen. Aber wenn Sie sich entscheiden, zu bezahlen, sehen sie so aus wie in Adobe XD, sobald sie geöffnet sind. Sie können also direkt hier auf Ihrem Ebenenbedienfeld klicken und sehen, wie viele dieser verschiedenen Geräte es gibt. Ich zeige Ihnen tatsächlich eine etwas ältere Version, aber Sie können sehen, abgewinkelte Mockups waren XD. Und wenn ich hier starte, können Sie sehen, abgewinkelte Mockups waren XD. Das ist also eine etwas ältere Version von width, ältere Geräte, aber es funktioniert trotzdem. Also, damit Sie eines dieser Mockups verwenden können, ob es sich um kostenlose Version oder diese Speed-Version handelt, die ich wirklich empfehle. By the way, müssen Sie auf die Plugins klicken und Sie haben Winkel-Plugin von ihrem Shop zu installieren. Also im Grunde können Sie hier klicken und Winkel von dieser Suchleiste eingeben. Klicken Sie hier, geben Sie den Winkel ein, Eingabetaste oder die Eingabetaste. Und gewagter Howard. Also haben wir dieses Winkel-Plugin genau hier. Ich habe es installiert. Sie können es einfach installieren und dann können Sie es verwenden. Also, wie kannst du diese solide Ich dir das auch zeigen? Hier sind wir in unserem Projekt. Und zum Beispiel werde ich diesen Projektstileguide verwenden. Also lassen Sie mich dahin navigieren. Ich werde Kontrolle D drücken, um es zu duplizieren. Und mal sehen, es wird sich genau hier positionieren, was großartig ist. Und ich werde es einfach so Projektpräsentation nennen. Dann werde ich hineinspringen und alle diese Elemente löschen , weil ich sie nicht mehr brauche. Und jetzt kann ich anfangen, meine Präsentation zu erstellen. So können Sie wieder zu Händen springen und Sie können all diese verschiedenen Präsentationsbeispiele erkunden . Aber ich werde gerade mit meiner Präsentation beginnen und zeigen, wie Sie Ihre Präsentationen direkt in Adobe XD erstellen können , damit Sie jede einzelne Sache haben können , die Sie direkt in Adobe XD erstellt haben. Also zuerst, klicken Sie hier und dann Prototyp und machen Sie das gleiche, wie wir es immer getan haben. So qualitativ hochwertiges Projekt, Präsentation wie das. Springen Sie zurück zum Design. Und zum Beispiel kann ich mein Bild, das ich in diesem Projekt verwendet habe, per Drag & Drop ablegen. Dann kann ich es zum Beispiel hier positionieren. Ich schaffe es genau dort. Und dann kann ich etwas wie ein Rechteck verwenden. Oder mal sehen, vielleicht kann ich so etwas tun. Linearer Farbverlauf und dann ein wenig gedreht. Stellen Sie sicher, dass mein Oberteil dunkler ist. Stellen Sie sicher, dass ihre Position nicht mag. So zum Beispiel, dann kann ich hier klicken. Stellen Sie sicher, dass ich schon Fettleibigkeit den ganzen Weg nach unten. Stellen Sie sicher, dass ich die Fettleibigkeit dieser auch senken. Und dann kann ich das Bild zurückbringen. Ich könnte es hier in der oberen Halle positionieren. Meine Umschalttaste, geh zurück zu meinem Ebenenfenster. Und ich kann zum Beispiel diesen Z-Gradient nennen. Und ich kann die Fettleibigkeit meines Bildes auf, sagen wir 40%, so etwas senken . Und dann kann ich voran gehen und meinen Farbverlauf so erweitern, dass er mein Bild bedeckt. Ich kann so drinnen springen. Und ich kann mich dort einstellen, wo es anders ist. Und so zum Beispiel, wenn es so geht, kann dies so sein. Also bekommst du den Punkt. Sie können diese beiden auch maskieren. So können Sie so etwas erstellen. So Gradient geht oben, offensichtlich macht Anakin Laura sogar noch mehr auf 20% vielleicht. Was ich als Nächstes tun kann, ist, dass ich hier reinspringen kann. Ich kann diesen Text kopieren. So neue Bank für New Age. Ich kann zu meiner Präsentation springen. Ich kann es hier besuchen. Es wird es schön hier positionieren. Und was ich dann tun kann, weil wir unser Logo erstellt haben, kann ich es einfach per Drag & Drop direkt hier. Ich kann es so erweitern, aber ich werde empfehlen, dass Sie verwenden und PNG-Version wie wir. So können Sie es so positionieren, oder 1234, zum Beispiel, nur um die Dinge schön und einfach zu halten. Nun, da dies 1920 ist, können Sie einfach alle Assets verwenden, die wir für dieses Projekt gemacht haben. Und Sie können auch die Größe davon reduzieren, zum Beispiel, jetzt gehen wir weiter. Und wenn Sie das gleiche Layout erstellen möchten, das wir hier haben, können Sie einfach hier springen und zum Ebenenbedienfeld gehen und diesen Text verwenden, um ihn einfach zu kopieren. Gehen Sie zurück zu unserer Präsentation springen direkt hier, zum Beispiel, eingefügt. Und ich kann unsere Schaltfläche entfernen und nennen Sie dies zum Beispiel, ich weiß nicht, sagen wir neue Bank für eine neue Seite. Und mal sehen, weil wir immer noch in einem Stapel sind, kannst du auch drinnen von hier springen und das erhöhen oder verringern von im Grunde ich hier reinspringen kann, das auf, ich weiß nicht, 58 zum Beispiel, oder 68. Nur um es ein bisschen schöner aussehen zu lassen. Und Totholz, das ich tun könnte, ist, dass ich diesen Text natürlich auch ersetzen kann. Es ist also nicht genau der gleiche Text wie dieser, aber ich wollte nur ein schnelles Mockup hier auf unserer Seite einfügen. Also, um das zu tun, werde ich zu meinem Winkel Mockups springen und wann ich einen Laptop benutzen. Also kann ich so etwas verwenden, zum Beispiel, Control C. Ich kann es hier rein lassen, Kontrolle V. Und wie Sie sehen können, ist es extrem riesig. Sie können die Responsivitätsgröße deaktivieren. Sie können Ihre Umschalttaste halten und sie in der Größe auf etwas Schöneres reduzieren. Vielleicht können Sie ein wenig hineinzoomen und Sie können es direkt hier positionieren. Ich werde die Diskette hier positionieren. Und dann, was ich verwenden werde, ist vielleicht eine Form zu erstellen, die in einen Hintergrund gehen wird. Also werde ich meine Elternteile von hier aus verwenden und dann einfach eine Form wie diese zeichnen. Oder ich kann zurück. Fangen wir eigentlich von oben an. Also werde ich hier klicken und alles löschen, und wieder anfangen. Beginnen Sie also mit dem P. Klicken Sie hier, und dann rechts hier, nur damit wir eine besser aussehende Kurve haben. Und dann war das eine so und unten so und dann einfach Kahlo's Forderung wie Seife. Was ich jetzt tun werde, ist hier in meine Form zu springen. Ich werde es von hier aus auswählen. Also mein Held Form, ich werde mit der rechten Maustaste darauf klicken, kopieren und dann zurück zu meiner Form. So können Sie sehen, wie das wirklich einfach ist. Klicken Sie auf Es, klicken Sie mit der rechten Maustaste und Einfügen Aussehen. Wie Sie sehen können, wird es diesen Farbverlauf N einfügen. Also werde ich meinen Text oben so positionieren. Und Sie können bereits sehen, wo das anfängt, etwas Gestalt anzunehmen. Also können wir die Diskette hier positionieren. Sie können dies noch größer machen. Du bekommst das Bild. Was ich Ihnen tatsächlich zeigen möchte, ist, dass ich auch Fettleibigkeit von diesem hier reduzieren kann , wenn ich es nicht mag, um so etwas. Also, was ich Ihnen zeigen wollte, ist das. Alles, was Sie tun müssen, ist Ihren Bildschirm auszuwählen. Und dann, was ich tun werde, ist tatsächlich einige dieser Songs zu benutzen. Denn wenn ich dies minimiere und gehe zurück zu meinem Winkel Mock-ups für das Mac Book. Sie können dies und das sind die Art Boards für das Mockup MacBook. So 1440 mit 900, können Sie tatsächlich kopieren diese Kunsttafel. Springen Sie zurück zu Ihrem Projekt und fügen zum Beispiel irgendwo hier ein. Und dann, was Sie tun können, ist das tatsächlich zu verwenden. So Control C oder Sie können Ihren alten Schlüssel oder was auch immer halten und alle diese Elemente innerhalb Ihres rpart positionieren. Also lasst uns das machen. Ich kann zum Beispiel meinen Helden auswählen und diese sind diejenigen auswählen, SO Control C. Und dann kann ich direkt hier reinspringen. Und ich kann alle diese Elemente löschen. Sollte V steuern, zum Beispiel, um es in zu positionieren. Ich werde ihren ursprünglichen Hintergrund entfernen. Und was ich tun kann, ist eigentlich nur ein bisschen Veränderung anzuwenden. So kann ich zum Beispiel hier reinspringen. Laura, das sinkt das, nur damit ich es näher einbringen kann. Ich kann den gesamten Text nur ein wenig nach oben verschieben und ich kann das hier gekoppelt bewegen, die Wurzelposition, einige dieser Elemente. Das kann also hier sein und das kann hier sein. Das ist in Ordnung. Und das ist es im Grunde. Was Sie als nächstes tun müssen, ist dies MacBook genannt. Also müssen wir die Bildschirmebene auswählen, wie ich es hier getan habe. Sie können zu Plug-Ins springen, in Winkel springen, treffen, Mockup anwenden und einfach das MacBook von Ihren Flughäfen aus lokalisieren. Nun, weil wir viele verschiedene unsere Boards haben, vielleicht wird es ein wenig schwierig sein zu navigieren, aber einfach finden Sie es und es ist bequem am Ende, so ausgewählt und Sie können alle diese verschiedenen Optionen wählen, wenn Sie wollen. Ich werde nicht, Ich bin einfach getroffen gelten und warten, bis es seine Magie zu tun. Und es wird Schuldenmockup in nur ein paar Sekunden anwenden. Offensichtlich, je größer Ihr Projekt ist, wird dies etwas länger dauern, um sich zu bewerben, aber geben Sie es nur ein paar Sekunden. Und wie Sie sehen können, hat es dieses Mockup wirklich schön angewendet. Sie können dieses MacBook-Branding auch aus dem Ebenenbedienfeld entfernen. Aber ich finde, es sieht wirklich schön aus. Nun, was Sie als nächstes tun können, ist einfach anfangen, dies zu wachsen. Und noch einmal, wenn ich Sie zu diesen Präsentationen zurückbringe, können Sie sehen, was sie getan haben. Also benutzten sie dieses Telefon. Und wenn du dich fragst, wie sie das gemacht haben, lass mich dir das auch schnell zeigen. Alles, was Sie tun müssen, ist, zum Beispiel, wählen Sie, Ich weiß nicht. Nehmen wir an, dieses iPhone Control C, Springen hier, Kontrolle V. Und Sie können einfach in Ihre Ebenen-Panel gehen, befindet sich der Schatten hier ist es ein entfernen Sie den Schatten und ist nur ein flaches Modell jetzt, so dass Sie die Kontrolle treffen können D, machen Sie Kopien davon und positionieren Sie es im Raum wie folgt, und füllen Sie dann diese Bildschirme mit Ihren Bildschirmen. So machen sie es. So können Sie es tun. Offensichtlich, je mehr Zeit Sie damit verbringen, desto mehr wird es professionelle Dumouriez aussehen gehen besser aussehen. Also natürlich würde ich empfehlen, dass Sie viel Zeit wie möglich mit Ihren Präsentationen verbringen. Wenn Sie so etwas tun müssen, wenn Sie nur präsentieren möchten , zum Beispiel, diese Webseite, alles, was Sie tun können, ist drücken Sie Control E, Wählen Sie einen Desktop, zum Beispiel. Von hier aus werde ich einfach mein JPEG auswählen, Export drücken. Es wird exportieren. Und was ich tun werde, ist einfach von meinem Desktop hereinzuholen und es direkt hier zu positionieren. So können Sie Ihre Seiten fertig zeigen. So kann ich zum Beispiel eine weitere Seite hier präsentieren. Und wenn Benutzer scrollen auf Strandhänden zum Beispiel, wie in diesen Beispielen, können Sie ihnen zeigen, dass, so dass Sie zeigen können, wie länger Seiten, all diese verschiedenen Elemente. Und Sie können Teile Ihres Designs füllen, indem Sie Dinge wie d verwenden, so dass Sie diese Mockups und so weiter verwenden können. Eine letzte Sache, die ich Ihnen mit diesen Projektpräsentationen zeigen möchte, ist 3D. Und 3D ist eine neue Option in Adobe XD. Und man kann es nicht wirklich als echte 3D bezeichnen, aber es wird 3D imitieren. Also werde ich Ihnen das im nächsten Video zeigen. Also sehe ich dich dort. 71. 3D-in Adobe Xd: Wenn es um 3D geht, ist Adobe XD nicht wirklich für 3D gebaut, aber vor kurzem enthalten sie diese 3D-Option. Und Sie können mit ihm herumspielen, wenn Sie Ihren Projekten ein bisschen Gewürz und ein bisschen mehr visuelles Interesse hinzufügen möchten. Und ich würde es an einigen Stellen wirklich empfehlen, vor allem, wenn Sie diese Präsentationen erstellen. Denn Sie können dann zeigen, wie Ihre Elemente in 3D aussehen könnten und ihnen einfach ein bisschen mehr visuelle Würze in ein bisschen mehr visuelles Interesse als üblich geben. Wieder einmal ist Adobe XD keine 3D-Software oder 3D2 mit irgendwelchen Mitteln, Sie können etwas wie 3D Max verwenden. Sie können so etwas wie einen Mixer verwenden. B hat auch eine eigene Software. Ich denke, es heißt so etwas wie es heißt i dot adobe dimension. Es ist auch ein bisschen abgegrenzt gesucht. Wenn Sie eine echte 3D erstellen möchten, würde ich Ihnen wirklich empfehlen, etwas wie einen Mixer zu verwenden , der kostenlos ist, oder etwas wie 3DS Max oder Autodesk Maya oder so etwas zu verwenden. Aber Sie brauchen diese Tools nicht wirklich, um als UI-UX-Designer zu arbeiten. Das sind nur, wenn Sie Ihr Wissen erweitern und Ihren Arbeitsbereich und Bereich erweitern möchten , so dass Sie die Dosis testen können. Im Moment werde ich Ihnen zeigen, was in Adobe XD möglich ist. erneut sicher, dass dies extrem begrenzt ist, aber es hat einige Verwendungen. Also werde ich Ihnen diese hier zeigen, besonders in Präsentationen. Also hier sind wir wieder in Adobe XD, wo ich Sie im vorherigen Video verlassen. So können Sie sich wieder einmal vorstellen, dass Sie diese Präsentation aufbauen können und Sie können Ihre Kunsttafel ganz nach unten so viel wie Sie benötigen doppelklicken. Lassen Sie mich Ihnen also schnell zeigen, was Sie mit 3D in XD tun können. Beginnen wir also mit einer dieser Karten. Zum Beispiel kann ich dieses wählen, Kind Control C. Oder Sie können es aus Ihrem Säurepanel auswählen. Offensichtlich, wenn Sie wollen und einfach per Drag & Drop. Ich werde es auf diese Weise kopieren. Ich werde hier springen, Kid Control V, um es hier einzufügen. Hier ist es. Ich kann positionieren, es ist irgendwo hier. Und ich kann es auch nur ein wenig vergrößern, wenn ich will, aber es wird so skalieren. Also, wenn Sie das tun möchten, würde ich wirklich empfehlen , dass Sie es als JPEG oder PNG exportieren. Also, um es zu erstellen, um eine 3D zu sein, was Sie hier bemerken werden, ist, dass wir diese 3D-Transformationsoption haben. Wenn Sie also darauf klicken, erhalten Sie dieses Tool direkt hier. So können Sie es manuell hinzufügen, alle diese verschiedenen Optionen. Also für die Rotation, wenn Sie schweben, können Sie sehen, was es tut. Also Exposition, Dies wird breite Rotation sein und dies wird Z-Rotation sein. Also auf allen drei Achsen, oder Sie können einfach manuell so etwas tun. So können Sie es so drehen. Sie können es so drehen. Und das ist, was ich am Ende verwenden werde. So können Sie einen Hintergrundschatten erstellen, beispielsweise in Ihrer Hauptkomponente, und er wird auch hier auf dieser Komponente als Schatten angezeigt. Was ich tun werde, ist, das hier irgendwo zu positionieren. Ich werde Kontrolle D treffen und ich werde sicherstellen, dass ich dieses Duplikat hier im Hintergrund positioniere. Also lassen Sie es uns an unserer Gruppe ausrichten, zum Beispiel, das ist Position, es ist irgendwo hier. Lassen Sie uns im Hintergrund positionieren. Und ich werde auf den Horror-Zustand klicken. Und Sie können sehen, dass es mir den Horrorzustand in 3D präsentiert hat. So können Sie einfach alle von ihnen positionieren, die Sie arbeiten können, wie Sie wollen. Und was ist großartig daran ist, wenn Sie auf eine Karte VG klicken, können Sie zum Beispiel einen Schatten einschließen. Und lassen Sie uns einen schönen großen Schatten einschließen. So 20-20 und 50 zum Beispiel, so etwas. Und wenn ich meine komplette Karte herausziehe, können Sie sehen, dass der Schatten schön in 3D ist und er sich auch zum Abwerfen wendet. Also, was Sie tun können, ist ein nettes kleines Abschnitte wie DES zu erstellen. Also vielleicht irgendwann das, und dann lass uns noch einmal einen Text verwenden. Also werde ich Steuerelement D auf dieser Textposition drücken, zum Beispiel hier. Und Sie können sich vorstellen, wie bestimmte Disc und am Ende als eine separate Art von Abschnitt in Ihrer Präsentation oder in Ihrem Design aussehen . Sie müssen dies nicht nur für Komponenten tun. Sie können 3D-Elemente mit verschiedenen Bildern erstellen. Sie können Entwürfe wie DES erstellen. Also lasst uns noch einen finden. Also lassen Sie uns, ich weiß nicht, nur dieses Bild verwenden oder etwas benutzen. Ja, ja, benutzen wir dieses Bild. Also werde ich reinspringen. Also meine, für Kontrolle C, werde ich zurück zu meiner Präsentation springen. Springen Sie hier rein. Die Control-V-Position kann dort abgebildet werden. Ich werde sofort den Schatten einschließen. So 202020. Diese ist also etwas dunkler und weil meine 3D-Transformation enthalten ist, kann ich einfach in andere Richtung gedreht werden. So etwas wie das. Und Sie können sehen, wie das aussieht. So können Sie es im Raster positionieren, was fantastisch ist. Dann können Sie Control D tun und Felder mit Steuern wie DES zum Beispiel einschließen. So können Sie sehen, wohin das geht. Sie können die Größe auch so vergrößern, so dass sie in 3D zunimmt. Und wenn Sie diese Option herunterfahren wollen, weil Sie sehen können, was ich auswähle, es zeigt mir, dass Sie in 3D einfach hier klicken können und dann können Sie beginnen, es in Echtzeit und in echter Art von Look and Feel zu bearbeiten , wenn Sie wollen. Das ist also das Aussehen und 3D in Adobe XD. Wieder einmal, wie Sie sehen können, ist es wirklich begrenzt, wirklich einfach, aber Sie können es für einige grundlegende Dinge verwenden. Und wenn Sie möchten, dass einige fortgeschrittene Dinge sind wirklich empfehlen etwas wie einen Mixer, denn wieder, es ist kostenlos und Sie können eine Reihe von diesen verschiedenen Tutorials auf YouTube finden, vor allem, so dass Sie ein bisschen mehr über Mixer dort. Aber noch einmal, Punkt dieses Videos ist nur, um Ihnen zu zeigen, wie Sie etwas Gewürz zu Ihrem Design hinzufügen können. Wie Sie Ihre Präsentationsfähigkeiten verbessern können und wie Sie Ihr Design auf die nächste Stufe bringen können. Weil vielleicht ein anderer Designer keine Animationen verwendet. tust du. Mutter-Designer könnten 3D verwenden. Das kannst du. So können Sie sich auf all diese anderen Designer heben und Ihre Chancen verbessern, zum Beispiel einen Job zu bekommen. So können Sie all diese Dinge direkt in Adobe XD erledigen, wie ich es Ihnen gezeigt habe. So können Sie von der Planung über Website-Architektur, Papier-Wireframes, Wireframes in Egg Dxdy Design und Animation, Responsive Design, Projektstil Guide bis schließlich Präsentation beginnen Wireframes in Egg Dxdy Design und Animation, . All diese Dinge können Sie in Adobe XD erledigen. Und wenn Sie einen kostenlosen Plan verwenden, können Sie all diese Dinge kostenlos machen. Das war's also für diesen Kurs. Dies ist das letzte Video dieses Kurses, und ich hoffe, es hat dir gefallen und ich werde dich in der nächsten Lektion sehen. Wir werden ein bisschen mehr Dinge von Adobe XD zu erforschen. 72. Ordnerstruktur: In diesem Teil des Kurses werden wir über den Export Ziel unserer Vermögenswerte für Kunden und Entwickler sprechen. Und ich werde Ihnen zeigen, wie Sie das sicherer machen können. Im Grunde habe ich Ihnen im vorherigen Abschnitt erklärt, wie Sie das teilen können. All das in Adobe XD, wenn Sie es in die Cloud hochladen und Entwickler können im Grunde dann alle diese Säuren herunterladen. Aber noch einmal, wenn Sie kostenlose Version von Adobe XD verwenden, haben Sie nur dieses ein Projekt. Sobald dieses Projekt abgeschlossen ist, haben Sie nicht mehr die Möglichkeit, diese Dateien freizugeben. Im Grunde müssen Sie darauf warten, dass sie dieses Produkt entwickeln, so dass Sie in tern verboten ist, neue Dateien zu erstellen, mit neuen Kunden zu arbeiten. Um das zu vermeiden, können Sie auf Ihren Desktop exportieren und dann einfach alle Dateien in einen ZIP-Ordner legen und dann diesen ZIP-Ordner mit Ihren Clients und Entwicklern teilen. Jetzt gibt es viele verschiedene Optionen, die Sie teilen können, aber ich werde Ihnen meinen Weg zeigen. Und im Grunde werden wir alle diese Assets als JPEG-, PNG- oder SVG-Assets exportieren . Pdf-Facetten sind im Grunde nur für all diese Dateien. Und wie ich Ihnen bereits gezeigt habe, wie zum Beispiel für einen Designbrief, zum Beispiel für einige Projektvorschläge und so weiter. Also all diese Dinge, die Sie in z tun können und diese sind großartig, um dieses PDF zu exportieren. Aber im Grunde diese drei Dateiformate, also JPEG, PNG und SVG ist das, was Sie die ganze Zeit verwenden werden. einmal haben wir ein neues Design der Website der Bank. Das ist der Name unseres Projekts. So kann ich meinen Ordner erstellen. Toilette, zum Beispiel, echte Bank, Website, Design, Vermögenswerte. Qualität, die innerhalb dieses Ordners. Und ich bringe es gleich hierher. Sie werden Ihre Adobe XD-Datei platzieren, offensichtlich, wenn der Client x2 ist. Und innerhalb dieses Hauptordners werden wir einige zusätzliche Ordner platzieren, in denen wir tatsächlich in diese Assets einschließen werden. Außerdem können Sie in diesem Hauptordner etwas wie eine PDF-Datei einfügen, in der Sie Links für die Schriftarten erstellt haben, die Sie verwenden, oder Sie können eine Schriftart herunterladen sie innerhalb des Pakets ablegen. Zum Beispiel, für die Poppins-Schriftart, ist sie in einer ZIP-Datei. Sie können diese Zip-Datei hier innerhalb dieses Ordners ablegen. Und dann kann Entwickler Schuldenschriftart sofort verwenden. Also lasst uns anfangen und ich werde euch zeigen, wie ich Dinge wie so mache. Wenn wir also in ein Website-Design wie dieses springen, haben wir all diese verschiedenen Seiten. Also, wenn wir hier klicken, um diese Seite zu wählen, können Sie sehen, wir haben Homepage-Design. Also erster Ordner, den wir erstellen werden, und ich werde sie in Zahlen zu beschriften, weil wir von der Homepage gehen, ist Nummer eins. Startseite. Dann werden wir weitermachen. Und wenn wir ein wenig hineinzoomen, so dass wir all diese verschiedenen Seitennamen sehen können. Nummer zwei wird Konten sein. Nummer drei wird ein Kredit sein. Anzahl vier Karten. Und lassen Sie mich Control-C, Control-V. Und das wird fünf Inversen sein. Lass uns das noch einmal machen. Das wird sechs digital sein. Und weil, wenn Sie sich erinnern, wir haben die gleichen Vermögenswerte im Grunde auf Login und registrieren. Also, was ich tun kann, ist eigentlich diese beiden Seiten zu kombinieren. Also kann ich so etwas wie sieben Login-Schrägstrich Siam machen. Und nur damit wir die Dosis auf Seiten zur gleichen Zeit runden können, dann können wir zum Dashboard-Design übergehen und sehen, was wir hier haben. Also haben wir Dashboard-Design. Das wird also unser Haftbefehl Nummer acht sein. Um zu entwerfen. Als Nächstes werden wir eine Zählung haben. Also können wir diese Neun auswählen. Dies wird im Dashboard-Konto sein. So wie das. Wir werden noch einen erschaffen. Dies wird also ein Dashboard-Transaktionen sein. Und es wird Nummer zehn sein. Und lassen Sie sie das Video hier schnell pausieren, damit ich all das machen kann und dann können wir von dort weitermachen, damit ich Sie nicht weiter langweilen kann. Okay, jetzt, da das abgeschlossen ist, wie Sie sehen können, haben wir jetzt 14 dieser Ordner. Innerhalb jedes dieser Ordner werden wir verschiedene Größen einschließen. Also lasst uns jetzt die Schulden untersuchen. Wenn ich Sie direkt hier auf unsere Homepage bringe, können Sie sehen, dass wir diese Einheitsgröße haben, die unsere Originalgröße ist, und dann haben wir alle diese anderen Größen. Also lassen Sie uns diese Ordner erstellen. Also, um in meine Valenzstruktur zu springen , werden Sie noch einmal Ihre XD-Datei hier ablegen. Sie gehen, um die ZIP-Datei, die die Schriftarten zum Beispiel, hier, werden Sie in Design-Briefung setzen hier, Projektvorschlag. Also all diese Dokumente, können Sie sie hier ablegen oder Sie können sie anrufen, Zum Beispiel Dokumente, und dann alle in einem separaten Ordner direkt hier mit all diesen anderen Ordnern, es ist alles wirklich an Ihnen. Also innerhalb ihrer Homepage, werden wir eine Liste mit verschiedenen Ordnern erstellen. Also werde ich diese Haupt erstellen Nummer zwei nennen. Das ist also unsere Hauptgröße. Nummer zwei ist groß und Desktops. Nummer drei ist eine große und Geräte. Nummer drei ist zum Beispiel Tabletten. Oder wir können ihm genau die Szene geben, die höher genannt wird, oder Sie wollen. So mittelgroße Geräte Schrägstrich Doublets. Mein Dad. Und schließlich haben wir diese extra kleinen Geräte am Ende von fünf extra kleinen Geräten. Also, was du tun wirst, ist im Grunde, ich denke, du bekommst das Bild. Wir werden alle diese Größen separat exportieren. Offensichtlich, was Sie tun können, ist einfach wählen Sie alle diese Ordner Control C, gehen Sie zurück, steuern Sie v, gehen Sie zurück zu diesem, steuern Sie V, und tun Sie das für alle diese Ordner offensichtlich. Aber weil wir nur diese Größen für die Seite haben, werden wir sie nur für eine Homepage tun. Ich werde auch zeigen, wie Sie das Dashboard exportieren können. Aber im Grunde haben wir nur eine Seite, die Homepage in unserem Fall hat. Aber Sie können sich vorstellen, wenn Sie all diese anderen machen, werden Sie diese auch exportieren. Das ist also im Grunde unsere Struktur. Im nächsten Video zeige ich Ihnen, wie Sie mit dem Exportieren beginnen können , welche Dateiformate wichtig sind und wie Sie entscheiden können, für welches Dateiformat Sie exportieren möchten. Also sehe ich dich dort. 73. Exportieren: Alles klar, jetzt gehen wir zurück und ich werde Ihnen zeigen, wie Sie die exportieren können. Also offensichtlich werden wir hier reinspringen und anfangen, all diese Elemente zu exportieren. Also Ebenen, Panel ist offensichtlich ziemlich wichtig. Ich werde hier reinspringen. Und um mit dem Export zu beginnen, was ich tun kann, ist Hit Control dh. Und das erste, was ich tatsächlich tun werde, ist zu ändern, wohin meine Exportdateien gehen. So können Sie diese Änderung treffen. Und von Ihrem Desktop oder wo immer es ist, können Sie diesen Ordner auswählen, den wir bereits erstellt haben , der diesen Ordner ist. Und wir wollen das im Grunde innerhalb unseres Hauptordners positionieren. Das ist also unsere Homepage. Es ist unser Hauptordner, weil es eine mittlere Größe ist und Sie können einfach diesen Ordner auswählen und dann alle Elemente, die Sie aus dieser Rede exportieren , in diesen bestimmten Ordner gehen. Also, was ich für diesen tun werde, ist SVG zu wählen. Und natürlich haben Sie alle diese verschiedenen Einstellungen, die Sie verwenden können. Sie können mit Ihrem Entwickler sehen, ob Sie eines davon ein bisschen mehr anpassen müssen, oder wenn Sie diese einfach als Standard verwenden können, benutze ich sie fast immer als Standard und ich hatte nie ein Problem. Also im Grunde, wenn Sie auf Export klicken, wird es mit dem Export beginnen. Und das war's. Wir haben diese Namen gegeben. Deshalb sind sie wichtig zu exportieren. Wir haben Telefon-Symbol, wir haben Standortsymbol, und wir haben diese beiden Flaggen. Also Fremd- und Standortsymbol, werde ich auch als SVG exportieren. Aber diese beiden Flyer, zum Beispiel, kann ich als PNG exportieren, was Sie können, gibt es wirklich kein Problem, oder Sie können es als GPX exportieren. Es gibt also diese Einstellungen für JPEGs und PNGs, und lassen Sie uns schnell durch sie laufen. So Format ist JPEG-Qualität ist 100%. Sie können die Qualität senken, um Ihr Bild zu optimieren und es zu verkleinern, wenn Sie möchten. Sie können für Design exportieren, was im Grunde nur diese Einheitsgröße ist. Oder Sie können es für das Web exportieren und es wird in einer Größe exportiert, n doppelt so groß, was einfacher sein wird als für Entwickler später zu verwenden. Also lasst uns das machen. Exportieren Sie es so. Gehen wir nun zu unserem Helden-Sektion N für das Navi. Im Grunde können Sie das Logo exportieren. Also Hit Kontrolle dh. Wir werden es als SVG exportieren, weil wir die Qualität so weit wie möglich halten wollen. Und für die Schaltfläche, im Grunde, exportieren Sie nie auf Schaltfläche so, weil Entwickler werden immer gehen, um die Schriftart selbst in der Schaltfläche einfügen. Also im Grunde exportieren Sie es nie so wie der Ebenenknopf, wie er genau hier ist. Im Grunde müssen Sie diese Schaltfläche wie in ihrem Standardzustand exportieren, wie sie genau hier ist, und im Hover-Zustand exportiert wird. Also hier haben wir Login-Button. Also, was ich tun kann, ist einfach Login-Text zu verstecken, klicken Sie darauf. Sie würde also kontrollieren. Ich werde es als SVG exportieren. Klicken Sie hier. Und ich gehe zurück zu meinem Ordner, der sich befindet, wenn er geöffnet ist, klicken Sie auf Ansicht, großes Symbol, damit Sie es sehen können. Also Login Button hier ist es. Ich werde seinen Namen auf Standard ändern. Weil das der Standardzustand ist. Und jetzt, wenn ich in den Horace-Zustand gehe, kann ich meinen Text noch einmal ausblenden, wieder exportiert, wieder als SVG. Und wenn ich hier reinspringe und das aktualisiere, siehst du, dass wir jetzt einen Login-Button haben. Und ich werde seinen Namen ändern, um zu schweben, nur damit der Entwickler weiß, in welchem Zustand es sich um es handelt. Also kann ich zurückgehen, das zurückbringen, das auch zurückbringen. Und das ist im Grunde ein Zwei. Wir können jetzt eine verschieben, aber bevor wir nav tun, muss BG exportiert werden. Also Hit Control, dh ich werde es als SVG exportieren. Und noch einmal, weil ich dieses nav und das untere als SVG-Dateien exportiert habe, was Sie tun können, ist im Grunde mehrere Dateien auszuwählen und dass Sie als SVGs exportieren möchten, was ich Ihnen jetzt zeigen werde. Also werde ich meinen Helden Bu Jue auswählen, Heldenform. Und ich werde mehrere dieser Elemente oder alle drei auswählen, Heldenform und Held BG. Ich werde sie alle als SVG exportieren. Also hatte er die Kontrolle Lee, ich werde alle diese Einstellungen auf Export halten. Und so können Sie sie viel schneller exportieren, als sie einzeln zu exportieren. Hier, ich werde nur diese Heldenkreise exportieren. Also würde er als SVG kontrollieren, ich will die Moschee nicht exportieren, weil Entwickler verstehen können , wo ich die Moschee setzen und sie können dann wie Schulden exportiert werden. Wenn sie die PNG-Version verwenden möchten, können Sie Control E drücken, und Sie können diese dann als PNG für Web auswählen. So 12 Größen, es ist auf einem x entworfen, so dass sie in dieser bestimmten Größe wissen, wie man es exportiert und wie man von dort bewegt. Sie exportieren den Text nicht. Entwickler werden den Text verwenden. Wir werden das als PNG exportieren. Also hatte er Kontrolle li, wählen Sie PNG hier, wählen Sie den Webhit Export wird es als 1X und 2X exportieren. Und schließlich müssen wir dasselbe für unseren Knopf tun. Denken Sie daran, denn wir haben genau die gleiche Taste während unseres Designs verwendet, wir ändern ihn erst später in unserem Dashboard. Wir werden es Hauptknopf nennen, als ob es bereits hier ist. Also werde ich dasselbe tun. Ich werde MyText Hit Controlling verstecken, exportiert als SVG Hit Export, springen direkt hier und sehen, was es ist. Also ihn für die Haupttaste und benennen Sie es auf Standard, was unser Standardzustand ist. Und Sie können sehen, es ist genau hier, wo wir in Standardzustand eingeben können, wie Sie wollen. Ich werde es einfach so behalten, was das zurückbringt, zurück zum Schweben gehen, das verstecken, Control, Lee drücken, Export drücken und zurück zu hier gehen. Dies wird gemein Button Hover sein. Also noch einmal, Entwickler können wissen, was man ist, und das ist es im Grunde. So gehst du weiter und exportiert alle diese. Nun, wenn es um diese geht, was Sie tun können, ist wählen Sie Ihre Content-Karte und exportiert so, nur ohne irgendwelche Texte. So können Sie alle Texte ausblenden. Sie können sich sogar verstecken, mehr erfahren. Sie können diesen Pfeil sogar ausblenden und ihn so exportieren. Dann können Sie auf die gleiche Weise in den Horrorzustand gehen. Aber was ich eigentlich empfehle, ist, dass Sie alle diese Elemente separat exportieren. So können Sie noch einmal diesen Text einbringen. Und weil wir all dies als SVG exportieren möchten, was ich tun werde, ist eigentlich meine Karte BG auswählen, meinen Pfeil, Pfeil und mein Symbol auswählen. Ich werde verarschen, auf Control E SVG. Und dann gehe ich zurück in den Horrorzustand. Ich werde auf die Karte BG aktuelle Farbe gehen, weil wir jetzt gebraucht. Und ich werde das Pfeilsymbol exportieren, aber ich werde seinen Namen ändern. Also noch einmal, Sie können das tun. Sonst musst du es so machen. Und Auto-Animate-Funktion wird nicht funktionieren. Da wir also DC-3 von hier exportiert haben, können Entwickler es direkt von hier aus verwenden und sie müssen nichts kopieren und einfügen. Weil wir diesen Kreis haben. Sie können den gleichen Kreis verwenden, aber hier ist es ein bisschen anders. Also, weil dies Content-Karte genannt wird, vielleicht können wir ihm den Namen des Inhalts Teil Kreis geben. So tödlich, werden sie in der Lage sein, Arcade-Würfel, Schulden zu verstehen. Oder wenn Sie möchten, können Sie das für alle diese Formen tun. Also statt Kreuzlinie Kreis, können Sie sie Content-Karte nennen, Cross-Content aktuelle Linie Kontaktkarte Kreis, und dann tun Sie es so. Lassen Sie mich auf Kontrolle D drücken, um diesen Kreis zu erkunden , denn wie gesagt, ich werde diese einfach verwenden. Also mal sehen, Content-Karte Kreis und wirklich Massenraten, würdest du es als Maske exportiert sehen? Sie müssen also die Gruppierung dieser Moschee aufheben und sie dann noch einmal gruppieren, um diese zu exportieren. Also lassen Sie mich Ihnen zeigen, dass Aufheben Moschee, verstecken Sie diese Content-Karte Kreis Kontrolle der SVG, das ist in Ordnung. Dann können Sie diese Verschiebung Control M zeigen, um es wieder in die Maske, Maske, und das ist es im Grunde. Also, was ich hier tun muss, ist, dieses Symbol so zu exportieren. Also, wie kann ich das tun? Ich kann einen anderen Zustand dafür erstellen , der viel schneller sein wird, viel einfacher, als Sie diese Zustände einfach wechseln können. Aber schließlich kann ich es nicht so exportieren, wie es hier ist. Also kann ich hier seinen Namen ändern. Aber noch einmal wird es nicht unter automatischen Feinden funktionieren. Also musst du das tun. Also müssen Sie es hier finden. Mal sehen, was es ist. Also P für personalisierte Konten Symbol und ändern Sie seinen Namen auf einen Standard wie das. Und dann geh zurück zu hier. Er würde also noch einmal kontrollieren. Svg exportiert, und jetzt werden wir es Hover nennen. Mal sehen, was es ist. Dies ist die Standardentscheidung für den Mauszeiger. Und jetzt, wieder, werden Entwickler in der Lage sein, auf diese massive Qualität zugreifen, wie Sie sehen können, ohne Sorge, weil wir es als SVG exportieren. Und das ist es im Grunde. Ich werde Sie nicht langweilen mit all diesen Elementen oder vor kurzem weil jetzt dieses Video wird uns Sirene auf wie viele Stunden nehmen. Gehen wir jetzt zurück zu diesem Thema. Und zum Beispiel kann ich für diesen Wechselkurs alle diese Flags auswählen und als JPEGs exportieren. Weil wir England bereits haben, weil wir es von hier weggenommen haben. Wir müssen es nicht exportieren, aber ich werde es trotzdem exportieren. Aber bevor ich es tue, kann ich gleich hier springen und das anrufen, lass uns England jetzt oben sehen. Weil ich sicherstellen möchte, dass der Entwickler die richtige Größe verwendet. Und das wird England 2x top nav sein, so. Denn in der oberen nav haben wir eine Größe und hier haben wir andere Größe. Also, wenn ich ihn von hier auswählen, steuern, dh, ich kann SVG wählen, aber ich werde mit PNGs gehen, Hit Export. Es wird alle zur gleichen Zeit exportieren. Wie Sie sehen können, wenn ich die Aktualisierung getroffen habe, können Sie sehen, dass zum Beispiel Schweiz in zwei Größen ist, Umfragen nach Größen, weil Serbien sich hier nicht wiederholt. Wir können es immer noch so behalten. Aber zum Beispiel kann ich auch den oberen nav Tank machen. Also Serbien, top nav. Ich kann diese auswählen und auch diesen Namen ändern. Also noch einmal, Entwickler weiß, wohin es gehen soll. Lassen Sie ihn alle diese schnell schließen und wir können weitermachen. Also noch einmal, dies hat den Namen des Bildes. Das ist also das Wochenfest. Also werde ich empfehlen, dass Sie es so nennen oder Sie können ihm einen kürzeren Namen geben. So zum Beispiel, so. Du würdest das Festival-Bild wecken. Du kannst Dinge so einfach halten, wenn du willst. Wieder einmal, dieses Bild hier, wie Sie sehen können, wird es nur Big Card Image genannt, aber Sie können es zum Beispiel erstaunlich nennen. In der Investition. Zurück. Nur Bild, das ich weiß, ist ein bisschen viel. Oder Sie können etwas tun, wie zum Beispiel moderne Dienste Image. Also, jetzt hast du das gekürzt oder du kannst es so machen. Es liegt also wirklich alles an dir. Stellen Sie sicher, dass Sie mit Kunden und Entwicklern einverstanden sind, wie Sie diese Bilder exportieren möchten. Und schließlich, noch einmal, Bilder, können Sie sie als JPEG oder PNG exportieren. Png wird generell empfohlen, wenn Sie ein Bild mit einem transparenten Hintergrund haben, wie wir es zum Beispiel tun, wie ich dieses exportiere, wie wir es hier tun. Dies ist das Bild ohne Hintergrund, daher ist es im Allgemeinen bevorzugt, das als PNG zu exportieren oder so zu empfehlen. Aber mit all diesen anderen Bildern, die keine Ausschnitte um sie herum haben, können Sie sie einfach als JPEGs exportieren. Also das ist es im Grunde für all diese dauerhaften oder was Sie zeigen, ist für die Fußzeile, Das einzige, was ich hier exportieren werde, ist der Hintergrund. Aber hier werde ich all diese als SVGs exportieren, Solars springen hinein, ich habe mein Logo bereits exportiert. Wenn ich also hineinspringe, klicke auf L, um mein Logo zu finden. Mal sehen, was es ist. Neugierig. Und wir können es Logo-Farbe nennen, zum Beispiel. Denn hier haben wir das Logo schwarz und weiß. Also, wenn ich jetzt alle diese auswählen, so wählen wir das Logo, Standortsymbol , bilden ein Symbol und E-Mail-Symbol. Wieder einmal habe ich das, also habe ich meinen Standort und fremde Symbole oben. Sie haben die gleiche Größe, also werde ich keine Dosis auswählen. So Lage in der Schriftart, aber ich werde mein E-Mail-Symbol auswählen und ich werde Info-Streifen BG Controlling auswählen. Ich wähle SVG von hier aus, wo es ist, drücke Export und es wird diese als SVG exportieren. Also dort haben Sie es im Grunde Schulden Ihren Export. So mache ich es. So habe ich es immer gemacht. Also, im Grunde kurz gesagt, wickeln Sie Dinge ein , wenn Sie diese Symbole exportieren. Wenn Sie beispielsweise mehrere Zustände haben, müssen Sie Ihren Entwicklern über die Dateinamen mitteilen , dass Sie diese mehrere Zustände haben. So wie wir es hier in Logo und Logo Farbe getan haben. Dasselbe für die Knöpfe. Also Haupttaste und Haupttaste schweben. Was Sie auch tun können, ist ein Designsystem zu erstellen , wie Sie arbeiten, wie ein zeigte Ihnen ein Erwachsenenbeispiel. In diesem Beispiel haben Sie gesehen, dass sie alle diese verschiedenen Elemente übereinander angelegt haben. So können Sie einfach das Element auswählen, das bereits diesen Namen hat. So zum Beispiel, Logo-Farbe oder Schwarz-Weiß oder was auch immer, und exportieren Sie diese verschiedenen Elemente. Ich habe vergessen, dies in Logroll umzubenennen, schwarz und weiß zum Beispiel. Wenn Sie also alle diese vier Entwickler exportieren, werden sie in der Lage sein zu verstehen, was alles ist. Wenn sie es öffnen, wird es genau die gleiche Größe wie im Design haben. Es wird genau die gleichen Farben haben. Es wird genau die gleichen Optionen haben. Und schließlich die gleichen Namen, die Sie für all diese verschiedenen Elemente gedacht haben. Also, das ist es im Grunde für den Export. Sie können sich vorstellen, dass dieser gesamte Prozess, den ich Ihnen gezeigt habe, Sie werden es für all diese verschiedenen Seiten tun. Aber zum Beispiel, hier haben wir, was ist dieses Konto? Sie werden, anstatt in diesem Ordner, Wählen Sie Konten Ordner main, und exportieren Sie dann alle Ihre Assets. Sie sind von dieser Seite. Nun, gehen wir zu reaktionsschnell. Und innerhalb von responsive, werden Sie genau das gleiche tun. Nehmen wir zum Beispiel an, dass Sie alles abgeschlossen haben. Sie haben alle diese in dieser Größe als alle diese in dieser Größe abgeschlossen, alle diese unentschlossen, im Grunde haben Sie alle Seiten in allen Größen. Was ich Ihnen empfehlen würde, ist wirklich einfach. Gehen Sie zur Homepage, exportieren. All diese können dann zu dieser Homepage-Größe gehen, exportieren, diese Homepage-Größe, exportieren diese und das. Und dann, nachdem Sie fertig sind, gehen Sie zu dieser nächsten Seite. Was Sie tun können, ist, anstatt Zeit für den Export all diese zu verschwenden, können Sie einfach exportieren, sagen wir dies einmal. Diese Haupt, lassen Sie sehen, wie wir das nav BG nennen. Sie haben also nur einmal exportiert und dann können Sie diese Elemente einfach zwischen Ordnern kopieren und einfügen. Also haben wir genau das Gleiche oben. Wir haben genau das Gleiche mit der Spitze. Wir haben genau den gleichen Helden mit genau den gleichen Elementen. Haben Sie nur das, was sich ändert, ist dieses Bild und der Speicherort all dieser Elemente von Entwicklern wird alle diese Elemente später im Code ausrichten. Sie werden diese Schaltfläche nicht noch einmal exportieren, da Sie sie bereits exportiert haben. So können Sie einfach hier gehen, wo wir auf die Homepage sind. Ich meine, du kannst deinen Knopf finden. Also Login Button Hover und Login Button Standard. Sie gehen zum Beispiel zu Control C. Dann gehen Sie zu Konten Mai und Kontrolle V. So stellen Sie sicher, dass alle Elemente, die sich wiederholen. So haben wir zum Beispiel hier unten diese neue Bank und all diese Informationen. Kopierte diese Informationen von Ihrer Hauptdesktop-Homepage von hier, und dann gehen Sie einfach in all diese mittleren Größen und drücken Sie Control V . Sie werden das gleiche tun, für alle diese anderen Seiten. Für diesen Abschnitt, vor allem, können Sie sehen, dass wir diese drei Symbole, die sich auf allen unseren Seiten wiederholen. Warum sollten Sie also Ihre Zeit verschwenden und alle von ihnen zwischen all diesen Seiten exportieren, können Sie, wenn Sie wollen. Aber warum sollten Sie Zeit verschwenden, wenn Sie einfach weitergehen und all diese Elemente in Ihrem Design kopieren und einfügen können. So gilt im Grunde das Gleiche beim Exportieren wie beim Design. Wenn Sie anfangen, wird es viel Zeit brauchen, um all diese Prinzipien, Elemente, Farben, Größen und so weiter anzuwenden . Aber wenn Sie losgehen, vor allem mit diesem Beispiel und diesem Beispiel. Also im Grunde, wie ich sagte, wenn wir diese entwerfen, wird sich dieser Abschnitt in der Mitte ändern. Grundsätzlich werden alle diese Organisationen fast genau gleich bleiben. Was du hier im Helden tust, ist das Ändern des Textes und dieses Bild, das ist es im Grunde. Es liegt an Ihnen, wenn Sie die Position dieser drei Elemente anpassen möchten, zum Beispiel in diesen Hintergrundelementen. Aber im Allgemeinen wollen Sie, dass alles in der Mitte ist, was sich ändern wird. Warum sollten Sie also alles exportieren, wenn Sie es einmal exportieren und dann einfach kopieren und einfügen können. So exportiere ich also, und deshalb exportiere ich gerne auf diese Weise, weil es für mich viel einfacher ist, es für Entwickler zu exportieren. Und sie werden in einem Jahr auf diese Dateien zugreifen können, zwei Jahren, zehn Jahren, ist das egal. Ich habe all diese Dateien exportiert und dann schicke ich ihnen Dosisdateien. Bevor ich einschließe, möchte ich das abschließen. So können Sie diese exportieren, wenn Sie einfach als JPEG möchten, aber sie werden nicht zu viel Sinn haben. Aber wie ich dir in den Sharing-Videos gezeigt habe, werden Entwickler, wenn sie auf eines dieser Kunstboards klicken, in der Lage sein zu sehen, all dies sind Grid-Layouts für sich selbst, so dass sie sie sie direkt in Code anwenden können. Was ich Ihnen zeigen wollte, ist das. Im Grunde können Sie alle diese so exportieren, weil dies nur ein Text ist. Sie werden den Text nicht exportieren. Wie für diese Etiketten, können Sie sie so exportieren, oder Sie können einfach innerhalb von hier springen und exportieren Sie sie genau wie dieses Symbol. So können Sie sie als Marke exportieren. Aber offensichtlich Marke wird sich die ganze Zeit ändern , weil die Benutzer nicht immer auf die gleichen Marken gehen. Zum Beispiel, eines Tages könnten Sie zu Starbucks Kaffee gehen, Am nächsten Tag könnten Sie gehen, um den Kaffee kosten sind der Tag nach Dad, Sie könnten zu Kaffee Traum gehen. So werden all diese verschiedenen Coffeeshops hier nicht als Logos erscheinen, sondern nur einfache Texte. Daher werden Sie das nicht exportieren. Sie werden nur dieses Symbol für das Essen exportieren, weil das Essen ins Spiel kommt sowohl zum Essen als auch zum Trinken. Für die Kleidung. Vielleicht haben Sie die Schuhe gekauft, mal sehen, die IT tut es, aber es wird immer noch in diesem Symbol bleiben, weil es die Kleidung ist. Es spielt also keine Rolle, ob XyDA AS H&M hinzugefügt hat, was auch immer, es wird immer noch dieses Symbol behalten. Exportieren Sie daher einfach nur dieses Symbol. Wie bei diesen Hintergrundformen können Sie sie beispielsweise exportieren, wenn Sie möchten, sagen wir von dieser ersten Seite aus, wo sie oben steht. Von hier aus können Sie sie von hier aus exportieren und sie dann so belassen. Sie können dasselbe für die Paginierung tun und einfach in Ihrem Design kopieren und einfügen. Was Sie dafür tatsächlich tun werden, ist, dass Sie innerhalb dieses Diagramms springen können. Und du kannst deine Masken verstecken. Also können Sie dies entweder tun und dann Ihren Kreis so exportieren, oder Sie können einfach die Gruppierung der Maske aufheben, wie ich Ihnen bereits zuvor gezeigt habe. Klicken Sie also mit der rechten Maustaste auf Gruppenmaske und blenden Sie diesen Teil aus. Klicken Sie hier, steuern Sie P, und exportieren Sie es dann als SVG. Ich werde es in den gleichen Ordner exportieren, spielt keine Rolle. Klicken Sie hier, um es zurück zu bringen. Oder Sie können einfach Control Z dreimal drücken, um zurück zu gehen und dann von dort zu gehen. Sie werden diese auch als SVGs exportieren. Und das ist es im Grunde. Das ist alles, was ich dir sagen wollte. Das wird J Berg Logo sein. Sie exportieren es einfach einmal und kopieren und im gesamten Design einfügen , weil es genau das gleiche ist. Sie können diese Symbole exportieren, und das ist es im Grunde. Das ist es für den Export von Schulden, es zum Teilen. Eine letzte Sache, die ich Ihnen zeigen möchte, ist die Erstellung des Styleguides. Und im nächsten Video werde ich Ihnen zeigen, wie wir diesen Styleguide erstellen können, wie Sie ihn anpassen können. Und schließlich, wie können Sie es mit Ihren Kunden und Entwicklern teilen. Saw, wir sehen uns dort. 74. Project: Jetzt kommt nun endlich die Zeit, dieses Projekt zu beenden und den Graham-Diskurs im Grunde zu beenden. Und jetzt ist die Zeit, den Styleguide zu erstellen. Und ich zeige Ihnen, was der Styleguide ist, wie Sie ihn verwenden können und wie wir ihn für Ihr Projekt erstellen können, egal wie groß Ihr Projekt ist. Grundsätzlich ist der Styleguide die Sammlung all Ihrer Elemente und Richtlinien für Ihr Design. So Stil, Style Guide kann extrem riesig mit Tausenden von verschiedenen Elementen sein. Und dort ist es besser, dieses Wunschsystem zu schaffen, das ich dir bereits gezeigt habe. Aber wenn Sie ein kleines Projekt erstellen, wie wir es hier sind, können Sie einfach ein Artboard erstellen und es in Ihre Datei einfügen. Und dann können Sie diesen Styleguide mit Ihren Kunden und vor allem Entwicklern teilen. Also, wie kannst du anfangen? Klicken Sie einfach hier, um einen neuen Flughafen zu erstellen. Und ich werde dieses große erschaffen, also 19-21, und es positioniert es genau hier, aber ich werde es den ganzen Weg unter alles andere hinunterlegen. Also, genau hier, werde ich zu meinem Prototyp ziehen. Ich werde hier klicken, um eine weitere Handlung zu erstellen. Und ich werde es Stylobat oder Projekt Style Guide nennen. Und jetzt kann ich es noch ein bisschen weiter nach unten bewegen. Gehen Sie zurück zu meinem Design, geben Sie ihm einen Namen von Projekten Style Guide. Und jetzt, weil es diese Werte geschaffen hat, die ich nicht wirklich will. Was ich tun werde, ist meinen alten Schlüssel zu verwenden, um meinen rpart hier zu kopieren. Was ich also tun kann, ist im Grunde diese Werte zu sehen, die ich geschaffen habe. Also werde ich die gleichen Werte verwenden. Also werde ich das hier auf 7% senken. Also werden wir die gleiche Fettleibigkeit aus unserem Netz haben. Also 12 Spalten, 6080 bis 1038. Also lasst uns das machen. Also 6080 bis 138, was in Ordnung ist. Jetzt kann ich weitermachen und das entfernen, weil ich es nicht mehr brauche. Und jetzt gehen wir weiter und beginnen mit unserem Styleguide. Was ich tun kann, ist im Grunde alle meine Artikel aufzulisten. Ich werde das zuerst erweitern und das nach oben oder unten verschieben , wie du willst, weil ich es nicht mehr wirklich brauche. Was Sie tun können, ist in Ihre Bibliotheken zu springen, innerhalb Ihres Assets-Panels und sehen, was Sie genau hier haben. Sie haben also Farben, Zeichenstile, und Sie haben alle diese verschiedenen Komponenten, die Sie des gesamten Entwurfsprozesses erstellt haben. Jetzt können Sie hier durchgehen und diese Elemente einfach hier ziehen und ablegen. Oder Sie können durch Ihr Design gehen. Also genau hier, zum Beispiel. Wählen und kopieren Sie dann Elemente von hier aus, und stützen Sie sie dann auf Ihren Styleguide. Also lasst uns anfangen. Was ich zuerst tun kann, ist, dass ich zum Beispiel alle meine Farben auflisten kann . So können Sie t für das Type-Werkzeug drücken, Geben Sie in Farben ein. Oder ich kann ins Kapital gehen. Wie auch immer Sie wollen. Sie können es auswählen und anwenden, zum Beispiel, diese 92, es so. Nur damit es schön sichtbar ist und es gut zu unserem Text passt. So alte Position, die genau da ist. Und mal sehen, vielleicht kann ich so 12345678 positionieren, sagen wir zum Beispiel, dann hat er dich kontrolliert, positioniert ist unten und benutzt. Mal sehen. Ich weiß nicht, 24 regelmäßig. Stellen Sie sicher, dass es so ist. Stellen Sie sicher, dass dies auch so ist. Also, was ich tun werde, ist mal sehen, 123456789. Ich werde ein Rechteck erstellen. Zum Beispiel, wie dies sein kann. Also zwei bis vier Breite, lassen Sie uns zwei bis vier sehen. Also nur ein Grundquadrat und was ich sagte neun. Wiederholen Sie das Raster und erstellen Sie neun Instanzen. Also 2467. Eigentlich ist es viel zu groß, also gehen wir zurück zu diesem Original und machen es vielleicht etwas kleiner. So etwas, denke ich, wird gut funktionieren. Ich werde meine Grenze entfernen. Er würde das Gitter wiederholen und jetzt neun Überdosis erzeugen. Wenn Sie sie also nicht sehen können, können Sie sie einfach wie dieses Aufheben der Gruppierung Raster und C beenden, also 24689. Also werde ich diese beiden entfernen. Also eigentlich diese beiden. Und jetzt können Sie beginnen, indem Sie Ihre Farben anwenden. So kann ich auf diese klicken, damit ich auf diese klicken kann. Das ist einfarbig weiß. Klicken Sie auf das nächste, hellgrau, nächste dunkelgrau. Und dann gehen Sie einfach von dort weiter und wenden Sie alle meine Farbfelder auf schön an. So wie das hier. Was ich tun kann, ist auch hier Namen zu geben, aber ich werde sie einfach auf eine andere Art und Weise organisieren. Also werde ich sie so positionieren. Also noch einmal, von links nach rechts, vielleicht gibt es nur gesammelte Dinge auf wirklich organisierte Weise zu machen, aber es liegt wirklich an dir, wie du das machen willst. Also, jetzt, da Sie alle diese vorgestellt haben, was Sie auch tun können, ist die Farbe Ihrer von Ihrem Styleguide ändern. Unser Bericht. So können Sie hier klicken und zum Beispiel den ganzen Weg schwarz gehen. Und jetzt können Sie es wie DES präsentieren. Wenn Sie also möchten, können Sie in einem dunklen Modus eine neutrale Farbe verwenden, die Sie nicht verwendet haben. Zum Beispiel, weil es nirgendwo in unserem Projekt erscheint , wo wir einfach weiß verwenden könnten. Es liegt alles wirklich an dir und wie du Todesfälle strukturieren willst. Das nächste, was Sie mit Ihren Farben tun können, ist ziemlich einfach. Sie können Control D tun, Bezirke hier positionieren, mehr. Es ist der ganze Weg hier. Und stellen Sie im Grunde sicher, dass dies im Mittelpunkt steht. Und verwenden Sie einfach den Hex-Code dafür. Also geh zurück zu einer Farbe. Rechtsklick. Sie können kopieren oder mit der rechten Maustaste klicken. Mal sehen, es hat die Farben so verändert. Klicken Sie mit der rechten Maustaste auf Bearbeiten. Und jetzt können Sie den Hex-Code selbst kopieren, direkt hier springen, Kontrolle V. Und jetzt können Sie diesen Hex-Code in stützen. So können Sie mehr Wein können Sie die Positionsscheibe genau hier steuern. Rechtsklicken Sie auf Bearbeiten. Und Sie können den Hex-Code von diesem kopieren. Und lassen Sie sie das Video schnell pausieren, damit ich alles fertig machen kann , nur um Ihnen zu zeigen, wie das aussieht. Und jetzt, wo ich die Dosis beendet habe, kann ich als nächstes hier springen. Stellen Sie zum Beispiel sicher, dass dies in der Mitte meines Quadrats so ist, und nennen Sie es einfach weiß. Ich kann sicherstellen, dass es zum Beispiel x 16 ist. So viel kleiner, so dass Sie passen können und ich kann diese Farbe zum Beispiel verwenden. Und Sie können es hier so positionieren. Steuerung D. Und um die Dinge schneller zu machen, können Sie doppelklicken Sie auf Steuerung CDO Club Control V, und ändern Sie einfach diese, um Farbe zu induzieren. Stellen Sie sicher, dass sie sich in ihrer Kontroll-D-Position in der Mitte befinden. Stellen Sie sicher, dass diese Festplatte von der Mitte geht und sie nicht links ausgerichtet ist. Es gibt uns also keine Pannen. Ändern Sie es und wir sollten verfärben und sterben. Und tatsächlich können Sie voran gehen und diese Änderungen für alle von ihnen vornehmen. Das ist also unser mittleres Grün, denn wenn Sie auf diesen Text klicken , wird Schuldenfarbe auf sie anwenden. Also Control D, ich bin sicher, dass es hier ist. Ich kann tun, ist sekundär grün, so. Und lassen Sie uns schnell dasselbe für alle tun. hat ihn hier positioniert. Wie diese Hauptfarbe, dieses dunkelgrau. Ich kann das tun. Fast schwarz, wie Sie sehen können, wenn Sie Tom sprechen wie ich, dann werden Sie in der Lage sein, alle diese Änderungen schneller zu machen und schließlich geändert es wieder hier, richten Sie es und Milchherde, wir haben vervollständigte alle unsere Farben. Jetzt können Sie sie positionieren, zum Beispiel 40 sein. Mal sehen, wo wir sind, 123, Dario es. Und Sie können all diese gute Epidemie auswählen und positionieren, zum Beispiel 81, wo wir hier arbeiten, 80. So gleiche Witten Disziplin, um so zu lösen. Und dann, wenn Sie Ihre Farben fertig sind, können Sie einfach zu den Schriftarten wechseln. Position ist hier bekannt genannt diese Farben. Dann können Sie ein Duplikat von diesem machen, stellen Sie sicher, dass es bei 80 und Qualität Schriftarten oder Topographie ist. Und wie kann man mit Typografie umgehen, ist eigentlich ganz einfach. Lassen Sie mich Ihnen das auch schnell zeigen. So können Sie zum Beispiel zur Wikipedia gehen und englisches Alphabet finden. Und was Sie tun können, ist tatsächlich alle diese Buchstaben auszuwählen, drücken Sie zum Beispiel Control C. Und dann können Sie dieses duplizieren, es dort unten positionieren und die niedrigste Größe finden. Also dieser hier ist, Sie können sehen, dass wir diese Pannen hier haben. Stellen Sie sicher, dass es links ausgerichtet ist, und doppelklicken Sie in Control V. Wenn wir vergrößern, können Sie sehen, dass alle diese Änderungen vorgenommen wurden, aber manchmal können Sie sehen, dass sie aus irgendeinem Grund umgedreht wurden. Also kontrolliere x und dann kannst du sie so positionieren. Also offensichtlich kommt ein Schuldkapital niedriger zuerst und dann kleiner Brief kommt sekundär. Lassen Sie mich das Video pausieren, während ich das für alle mache. Und jetzt, wo ich das getan habe, können Sie sehen, wohin das geht. Stellen Sie also sicher, dass Sie Control D kommentieren, positionieren Sie es nach unten. Sie können auf diesen klicken. Stellen Sie sicher, dass es auch bei 80 ist. Wie diese Steuer-D-Positions-Scheibe unten in 80. Und dann können Sie zwischen all diesen verschiedenen Zuständen klicken. Haben Sie erschaffen? Und wenn Sie Schulden nicht mögen, ist das so viel verteilt, offensichtlich, Miniatur 80. Und lassen Sie uns schnell voran gehen und alle diese beenden, so dass wir springen und zusätzliche Stille dahinter schaffen können . Also, wenn Sie das nicht mögen, ist dies auch ein Tag, Sie können es offensichtlich auf, zum Beispiel, 40 umschalten , so dass Sie genug Platz für all diese haben. So 40 überall. So wie das. Ich weiß nicht, warum es uns gibt. Also haben wir gezeigt, dass das auch 40 ist, weil es den ganzen Weg bis hierher geht. Was Sie tun können, ist offensichtlich schneiden Sie es hier und dann erhöhen Sie den Abstand zu Arno bekannten sucht zum Beispiel, oder, mal sehen, 60. Junge, es ist in Ordnung. Und schließlich, tun Sie das Gleiche hier. Also 40, ich schneide es hier ab. Lassen Sie hier auch Kredit sehen. Und nennen wir es einen Tag. Geben wir das hier. A, zum Beispiel, ich denke, das sieht gut aus. Und im Grunde Schulden ist Ihre Typografie. Sie müssen dies nicht für jeden von ihnen tun, aber wenn Sie wollen, können Sie, und das sind nicht Ihre Lösungen. Also werde ich einfach alle diese Qualitätstopographie gruppieren. Und jetzt kann ich zur nächsten Sache übergehen. Und das nächste, was können Symbole sein. Also kann ich das auf 90 oder 80 positionieren. Ich kann es zum Beispiel Ikonographie nennen. Und wenn sie denken, dass diese nur ein wenig zu offensichtlich sind, können Sie die Farbe dieser ändern. Also lassen Sie uns ihnen diese mittlere Farbe geben, zum Beispiel, nur um sie für all diese zu differenzieren. Jetzt für Symbole, was Sie tun können, ist einfach hier zu gehen, gehen Sie ganz nach unten, und suchen Sie Ihre separaten Symbole und ziehen Sie sie in Position. So zum Beispiel, Reha diesen Pfeil, aber wir werden sie nicht verwenden, weil wir sie für Website-Architektur verwenden. Wir werden tatsächlich den Standort starten. Also ziehen Sie es in die Polizei, wo es ist. Hier ist es. Telefon. Also noch einmal, wir verwenden diesen Stern für unseren Wireframe, aber wir können ihn hier positionieren, wenn Sie wollen. Pfeil-Symbol, E-Mail-Symbol, Online, Empfehlung, Stoppuhr. Und jetzt haben wir diese Symbole solide Missy, Wenn ich ältere C so auswählen und versuchen, alle von ihnen an Ort und Stelle zu ziehen und abzulegen. Ich kann, wie Sie sehen können. Also kannst du das auch tun. Du verstehst den Punkt. Also beginnen Sie mit diesen und dann beginnen Sie feucht links und rechts zu bestellen. Wie kann ich das machen? Ich kann einfach kopieren, sorry, positionieren Disk 80, Position und diese eine zu 80 als auch, so. Stellen Sie sicher, dass dieser zum Beispiel in der Mitte ist, weil er viel kleiner ist. Positionieren Sie es, um mich zu hören, wir haben dafür gesorgt, dass dies hier organisiert ist , sagen wir so. Und dann, was ich tun kann, ist das Gleiche für diesen hier zu tun. Oder ich kann diese zum Beispiel unten positionieren. Und dann stellen Sie sicher, dass alle diese hier sind, denn diese haben die gleiche Größe wie Ds. Ich kann sie hier positionieren, und ich kann sie noch mehr ausräumen. So kann ich sie zum Beispiel geben, ich weiß es nicht. Mal sehen. Vielleicht kann ich sie auswählen. Zeit bis drei, zum Beispiel. Wählen Sie dann diese 1123. Die ausgewählte diese 130. Die gleichen vier D sind die gleichen für reduzieren. Gleiches für diese beiden. Endlich gesehen für Disziplin wie so. Jetzt können Sie diese drei am Ende hier setzen. Wie Sie sehen können, kann es manchmal ein bisschen schwierig sein, sie auszuwählen. Stellen Sie also sicher, dass diese zum Beispiel auch 30 sind , und Sie können sicherstellen, dass sie korrekt aufgereiht sind. Jetzt können Sie diese positionieren, um sicherzustellen, dass sie sich in einem Zentrum wie diesem befinden. Und wir sind, mal sehen, mit 34. Ich kann es abwählen. Ich kann es hier positionieren. Dann erhalten Sie insgesamt das Bild, wohin das geht. Nun, als nächstes können Sie tatsächlich tun, dass wir diese noch haben. Ich weiß also nicht, warum es immer wieder auf und ab springt, wenn ich News wähle. Es ist wirklich nervig. Also kann ich sie hier positionieren , weil sie die gleichen sind wie diese. Also offensichtlich können Sie das hier positionieren, das wählen Sie dieses. Und mal sehen, ich kann es auf 30 positionieren. Ich kann dafür sorgen, dass das auch 30 ist. Und diese wählen dieses aus und stellen sicher, dass dies auch 30 ist. Und schauen wir uns an, ob wir noch mehr von diesen Symbolen haben, die gleich aussehen. Wir haben diese beiden. Also lassen Sie mich Disk Spender auswählen. Ich kann ihn hierher ziehen. Mal sehen, ob sie hier eine entmutigende Aufgabe gut passen können, damit ich das schnell zu niedergeschlagen positionieren kann. Und dann kann ich diese auswählen, um sicherzustellen, dass ich bei 40 bin, zum Beispiel von DES oder sogar mehr, sagen wir 80, so. Und dann stellen Sie sicher, dass dieser 30 von diesem hier ist, so. Und Sie können natürlich alle ausräumen, aber Sie bekommen den Punkt. Du bekommst das Bild, du wirst alle von ihnen in Drag & Drop ziehen. Als nächstes werde ich dasselbe mit diesen drei machen, zum Beispiel. Und ich kann sie hier positioniert auswählen. Mal sehen. Nächstenliebe wird auch 30 sein. Das wird auch Souveränität sein. Und du kannst in alle springen. So Konvertierung, zum Beispiel, kann ich den Text, Beta-Rechnungen und Transfer löschen . Sie können sogar Schreibtischhintergrund ausblenden, wenn Sie möchten. Also lassen Sie nur die Symbole, aber ich werde mit wie Dreck verlassen. Und jetzt werde ich meinen Kreis hier positionieren, weil er offensichtlich zu diesem Bild in Batalden passt , bevor ich sicherstelle, dass es mit diesen in der Mitte ausgerichtet ist. Und im Grunde sind Ihre Symbole drinnen. Vielleicht können wir nachsehen, ob wir noch andere haben. Wir haben dies war so zum Beispiel, ich kann hier klicken. Ich kann es in der Mitte von diesen positionieren, so stellen Sie sicher, dass ich auf einem Territorium wie diesem bin. Kontrolle D. Ich bin wieder um 30 Uhr und traf das. So kann ich wissen, dass ich diesen Zustand erfüllt. Schließlich haben Sie mein Investment-Symbol, das ziemlich viel größer ist als alle diese anderen. Zum Beispiel kann ich es hier positionieren oder ich kann es zum ersten Symbol machen oder was auch immer, aber Sie bekommen den Punkt. Schließlich, was wir auch tun können, ist Kontrolle D zu treffen, um sicherzustellen, dass wir bei 80 von diesem sind. Also und was wir hier tun können , ist, diese Komponenten einzuschließen, so dass Sie diese Komponenten einfach per Drag & Drop ablegen können. So zum Beispiel, können Sie es Held positionieren. Also nennen wir es Komponenten, oder Hauptkomponenten oder Navigationskomponenten oder wie Sie wollen. Sie können es hier positionieren, aber nennen wir es Navigationen wie diese, zum Beispiel. Und dann gehen Sie von unten nach oben. Und mal sehen, wo war unsere erste Navigation? Also mal sehen. Wir können es meinen Nav finden, es ist unsere Position hier. Und 80. Wir können diese Kontaktkarten benutzen. Zum Beispiel. Ich werde nicht, ich kann die Fußzeile einschließen, aber ich werde nicht für Investitionen in Quarantäne gehen. Seitenleiste. Vielleicht können wir die Sidebar reinsetzen, nur um das zu zeigen. Also bei 80 und Sie können offensichtlich Ihren Arm noch mehr so nach unten strecken. Lass mich hierher gehen. Mal sehen, wo wir sind. Wir haben gemein Top jetzt kann ich es ziehen und positionieren, um irgendwo hier zu sein, zum Beispiel. Und wir haben jetzt ein mobiles Top, also kann ich es auch hier positionieren. Dort haben wir alle unsere Navigationen. Was wir als nächstes tun können, ist zum Beispiel mit den Schatten umzugehen , und eine Unschärfe. können wir einbeziehen. Schließlich können wir alle diese farbigen Symbole einschließen. Also lasst uns das machen. Lassen Sie uns das alles bewegen und runter. Das ist also Ikonographie. Und wir können diese Dosis zum Beispiel im selben Ordner positionieren, damit wir die Dinge nicht zu sehr komplizieren. Also, was ich tun kann, ist ein wenig heranzoomen und ich kann finden, wo diese Symbole beginnen. Also fangen sie von hier aus an. Also kann ich es hier ziehen und ablegen. Ziehen Sie diese hier, stellen Sie sicher, dass sie ausgerichtet sind. Oder wir können es hier einfach per Drag & Drop ablegen. Und mal sehen, stellen Sie sicher, dass wir zum Beispiel 30 sind. So wie das. Stellen Sie sicher, dass Ihr Anwalt auch hier ist. Wählen Sie alle aus. Stellen Sie sicher, dass sie ausgerichtet sind, und positionieren Sie sie am Raster. Stellen Sie sicher, dass Sie 80 von hier sind. So, jetzt sind B 80. Und jetzt kann ich alle diese anderen Symbole per Drag & Drop durchgehen , damit ich dieses positionieren kann. Sie können sogar Räume machen, um zu zeigen, dass diese Symbole zusammengehören , während diese ähnlich sind , aber wieder, ein wenig anders und hat auf zusammen gehört. Aber Sie können auch für diese tun, ist verschiedene Zustände zeigen. Es kann also Kontrolle D treffen, dies auf einem Territorium wie diesem positionieren und dann den unterschiedlichen Zustand dieses Symbols anzeigen , weil wir es nicht anders erstellt haben. Was ich tun kann, ist einfach voran zu gehen und sehen, wo meine Farbe ist. Wenn ich mich von hier aus erinnere. War es das hier? Nein. Mal sehen, wo es war. Hier ist es. Das ist also die Farbe. Also bekommst du das Bild. Sie können Variationen dieser verschiedenen Symbole anzeigen, indem Sie deren Stile anzeigen. Durch die Anzeige gibt es verschiedene Variationen mit Farbe, ohne die Farbe und so weiter. Dies war derjenige, den es wie hier positioniert wurde. Kontrolle D. Öffne das buchstäblich. Milchkuh es. Und jetzt können Sie dasselbe für den Rest von ihnen tun. Also lasst uns Seite springen. Ich wähle das aus. Wählen Sie diese aus. Ich weiß nicht, warum es immer wieder auf und ab springt. Es ist wirklich nervig. Aber lasst uns die Macht durch. Er muss also sicherstellen, dass das 30 ist. Und stellen Sie sicher, dass dies auch 30 ist. So wie so. Und schließlich, bewegen Sie das auch auf 30, und Sie bekommen das Bild. Du kannst dasselbe tun, wie wir es mit diesen Mauern gemacht haben. Also bewegen Sie diese Steuerung D mehr Festplatte bei 30 sein. Springen Sie in Ihre Ebenen und sehen Sie, ob dies die Farbe ist, die es ist. Wählen Sie den Rest von ihnen aus. Stellen Sie sicher, dass sie absolut Control D sind, so. Und ich werde auch die Farbe dieses hier verstecken. So wie so. Und ich werde das letzte duplizieren. Und ich werde mich nicht darum kümmern, alle Symbole zu zeigen. Sieht aus, schließen Sie es einfach dort und nennen Sie es abgeschlossen. Aber Sie können den Punkt sehen, und Sie können verstehen, was ich Ihnen zeigen wollte. Also lasst uns das als T6, 80 geben. Vielleicht können wir sogar Position ist, bei 100 zu sein. Also 20 runter für Ds. Ich kann das 20 runterziehen. Dann kann ich diese 20 nach unten bewegen, und ich kann endlich auch meine Farben 20 nach unten verschieben. Also überall haben wir 100. Aber Sie können auch hier tun. Er enthält zusätzliche Elemente. So können zusätzliche Elemente oder sogar zusätzliche Stile sein, zum Beispiel können Unschärfeeffekte Schlagschatten und unterschiedliche Variationen von Schlagschatten sein. So hat zum Beispiel derjenige, der 20% Fettleibigkeit hat, eine 41% hat, 60%. Also empfehle ich immer, dass Sie ihnen zeigen, in die Tiefe Weg wagen. Jetzt, wenn der Entwickler mit diesen tun kann, ist ganz einfach. Sie können beispielsweise diese Symbole auswählen. Also gehen wir gleich hier herum. Und lassen Sie uns sagen, dass ich alle diese Symbole auswählen und exportieren möchte. Ich kann das tun. Wählen Sie einfach alle aus. Hit Control, dh. Vielleicht werden Sie hier einige Probleme haben, weil wir diese bereits exportiert haben. Vielleicht kann ich meinen Ordner ändern. Schon fertig. Nun, mal sehen. Zum Beispiel kann ich das nur benutzen, um es dir zu zeigen. So wie SVG Export und es wird alle diese Symbole exportieren, SVG. Und offensichtlich wird dies für Entwickler viel einfacher zu erreichen sein , weil sie sie wie Schulden im Ordner haben. Alle einige können Sie zum Beispiel in hier springen, und geben Sie diese persönliche als Kandidaten-Konto-Symbol, schwarz und weiß. Und das kannst du für all diese anderen tun. So können Sie, nachdem Sie fertig umbenannt sind, einfach auswählen. Er hatte e im Export kontrolliert, all diese Symbole, damit sie so darauf zugreifen können. Sie können diese Datei auch öffnen. Klicken Sie rechts hier und sehen Sie zum Beispiel, okay, das ist ba pins 24 unregelmäßig, es ist links ausgerichtet und es hat, zum Beispiel, Fettleibigkeit oder 100 und es hat dieses College. Sie haben also auch hier die Möglichkeit. Um alle diese Schriftarten zu erkunden, die Sie verwendet haben. Sie haben die Möglichkeiten, diese Farben zu sehen. Sie haben die Möglichkeiten, diese Hex-Codes zu sehen und sagen, r k. also das ist dieser Hex-Code. Sie können innerhalb von hier springen, Control C drücken und direkt von hier in Code als diese Hex-Code-Farbe angewendet werden. Also, das ist es im Grunde. So verwenden Sie diesen Projektstilleitfaden. Lassen Sie mich endlich diese auswählen. Nennen Sie es und Navigationskomponenten. Verschieben Sie die Disc-Gruppe ganz nach oben, wählen Sie meine Symbole aus und sehen Sie, wo sich alle diese Pfeile befinden. Also hier, Kontrolle g, genannt diese Symbole und verschieben Sie sie hier, oder Ikonographie wie das. Und was ich Ihnen zum Schluss zeigen möchte, ist, dass Sie diese auch als PDF exportieren können. So können sie diese PDF-Werte kopieren. Sie können es von hier aus sehen. Sie können alle diese Symbole, Navigationskomponenten sehen , wie sie aussehen. Natürlich können Sie es als JPEG, als PNG exportieren, aber Sie können es auch als PDF exportieren, um dies zu tun, steuern, wählen Sie das PDF von hier. Also hier ist es. Klicken Sie auf Exportieren und er wird es in diesen Ordner exportieren. Also lass es mich sehen. War es hier? Ja, ist es. Hier ist es. So Projektstil Guide, doppelklicken und lassen Sie mich es öffnen, um Ihnen zu zeigen, wie dieses PDF aussehen wird. Also hier ist es. Wenn ein gutes Steuerelement 0 ist, wird es das Zoomen aufheben und Sie können sehen, wie es aussieht. Aber wenn ich nur ein wenig hineinzoomen, können Sie sehen, dass sie diesen Text immer noch auswählen können, wenn sie wollen, und sie können darauf zugreifen und nach Belieben bearbeitet werden, wenn sie wollen. Sie können schnell auf die Topographie, auf die Farben, auf all diese verschiedenen Symbole, Navigationskomponenten blicken . Und sie können all diese verschiedenen Elemente sehen, wie sie aussehen. Und Sie können auch andere zusätzliche Elemente hinzufügen, die Sie in Ihr Design möchten. Also, das ist es im Grunde für den Styleguide, und das ist es im Grunde für den Diskurs. Ich sehe dich im nächsten Video, wo ich über das Outro sprechen werde, was du außerhalb des Diskurses bekommen kannst. Und ich werde auch über eine Ressource sprechen, die ich noch einmal im Diskurs verwendet habe und Ihnen zeigen, wo Sie es noch einmal bekommen können. Also sehe ich dich dort. 75. Conclusion: Sie haben das Ende des Kurses erreicht. Vielen Dank, dass Sie sich diesen Kurs angesehen haben und ich hoffe wirklich , dass Sie einen gewissen Wert daraus haben und dass Sie verstanden haben, wie einfach Adobe XD zu verwenden ist und wie einfach es wie einfach Adobe XD zu verwenden ist und wie ist, diesen Designprozess zu verwenden, sobald Sie zu FANBOYS kommen. Denken Sie also daran, dass Sie diesen exakten Entwurfsprozess nicht für jedes einzelne Projekt verwenden werden. Aber zum Beispiel, wenn Sie an einem etwas größeren Projekt wie dieses arbeiten, dann empfehle ich Ihnen wirklich, dass Sie diesen Designprozess verwenden , der auch Ihre Einnahmen erhöhen wird, weil Sie Geld rechtfertigen können , das Sie von Ihren Kunden einfach, indem Sie ihnen diesen Designprozess zeigen, was darin involviert ist und alle Schritte, die Sie ergreifen müssen , um ihn zu beenden und um ihn abzuschließen. Also nochmals vielen Dank, dass Sie zugesehen haben. Und ich hoffe wirklich, dass Sie zumindest einige dieser Techniken in Ihrer Arbeit verwenden werden , wenn es um Links und Ressourcen geht , die bereits einige Male in diesem Kurs erwähnt wurden. So können Sie freie Ressourcen so viel wie Sie wollen, so viel wie Sie brauchen. Immerhin sind sie frei. Aber wie ich in einigen der Videos erklärt habe, müssen Sie für einige Ressourcen auf den ursprünglichen Autor zurückverlinken. Andernfalls können Sie später einige Probleme haben. Aber für Premium-Ressourcen, die ich jetzt mit Ihnen teilen, wollte ich nur noch einmal betonen, weil es extrem wichtig ist. Bitte stellen Sie sicher, dass Sie diese Ressourcen nur für Lernzwecke verwenden. Verwenden Sie diese Ressourcen nicht für die Arbeit des Kunden , da dies später zu ernsthaften Problemen führen kann, wenn einer dieser Ersteller oder eingeladenen Elemente beschließt, Sie zu verklagen , weil Sie sie ohne Erlaubnis und ohne Lizenz verwenden. Wieder einmal, wenn Sie möchten, Website, wenn Sie möchten, in VO2 Elemente sind ein Link für Sie entlastet, um es zu überprüfen. Und ich denke, die Preise sind wirklich nicht so teuer, wenn man bedenkt, was Sie auf dieser Website herunterladen müssen und es gibt keine Grenzen. Zum Beispiel gibt es eine Website namens White, und ich habe Ihnen gezeigt, dass ich meine Pick-Icons von der usaid Website bekommen habe und sie dort gekauft habe. Und sie haben auch diese Mitgliedschaftstypen für die Produkt-Downloads, aber Sie sind mit der täglichen Anzahl von Downloads begrenzt. So stellen Sie sicher, zu verstehen, dass, wenn Sie bestimmte Arten von Downloads Heute benötigen, werden Sie verwenden und wichtige Elemente, weil es nur eine viel bessere Investition, weil Sie keine dieser Einschränkungen haben. Sie können einfach so viele von diesen herunterladen und verwenden, wie Sie möchten. Und der Hauptgrund, warum ist eine Menge der Zeiten in Ihnen werden sehen, dass Sie denken, dass die Ressource wird gut passen. 76. Skillshare-Kurs Projekt: Was würde eine Fähigkeit teilen Klasse B ohne Skill Share-Klasse-Projekt. Also für Ihr Skill-Show-Klassenprojekt möchte ich wirklich, dass Sie entweder das gleiche Design erstellen , wie wir es während dieses Kurses getan haben. Und Sie können ein Bild auf die Fertigkeit posten, Projektdateien teilen, oder Sie können etwas Ihr eigenes erstellen, was ich Sie tatsächlich ermutige zu tun, denn das ist eigentlich der bessere Weg, um das zu üben, was Sie während dieses Kurses gelernt haben. Stellen Sie also sicher, dass Sie ein Bild in einer Skill Share-Klasse Projekte veröffentlichen , oder andere Schüler können es sehen. Damit ich es sehen kann. Und ich kann Ihnen zum Beispiel ein paar weitere Rückmeldungen geben. Wie können Sie dieses Design und Ihren Design-Stil oral verbessern? Also ermutige ich Sie wirklich, was Sie machen, von Diskurs-Mischung, um es zu dem Skill-Share-Klassenprojekt zu veröffentlichen. So können sowohl ich als auch andere Studenten es sehen, damit wir diese Gemeinschaft so aufbauen können. Mach dir keine Sorgen darüber, dass jemand anderes deine Arbeit beurteilt. Wir sind nur Freunde hier und wir wollen uns bei diesem Kurs nur gegenseitig helfen. Stellen Sie also sicher, um Skill Show Klassenprojekte zu posten. Also können ich und andere Leute aus dem Diskurs das auch sehen. 77. YouTube-Kanal für mehr Inhalte: Hey Designer, Alex hier und ich wollten mich nur kurz bedanken. Vielen Dank, dass Sie diesen Kurs absolviert haben und ich hoffe wirklich, dass Sie so viel Wert wie möglich daraus haben. Wenn Sie mehr Inhalte überprüfen möchten. Ich habe vor kurzem meinen Youtube-Kanal gestartet, wo Explorer einige Themen, die Designer von Freelancer zu passiven Einkommenstechniken von Web-Design, App-Design, UI-Design, UX-Design interessieren könnten . Wenn Sie also an einem dieser Themen interessiert sind, gehen Sie zu meinem YouTube-Kanal. Ich werde es in PDF verlinken und Sie können einfach dort klicken und es wird Sie zu meinem YouTube-Kanal bringen. Wenn Ihnen diese Inhalte gefällt, stellen Sie sicher, dass Sie sich abonnieren und nachverfolgen, denn ich werde versuchen, wirklich unregelmäßig mit diesem YouTube-Kanal zu sein und so viele Inhalte wie möglich zu applaudieren. Also danke nochmals für meinen Kurs und ich hoffe, Sie auf meinem YouTube-Kanal, Kindertagesstätte, zu sehen. 78. Meine kostenlose Facebook-Gruppe: Er ist ein Designer. Ich hoffe wirklich, dass Sie den Kurs und das Ziel so viel Wert wie möglich aus ihm genossen haben, wenn Sie noch mehr Wert von mir und von der Design-Community erhalten möchten, habe ich eine Facebook-Gruppe gegründet, wo Sie beitreten können ist nur eine Facebook-Gruppe für meine Schüler mitmachen. So können Sie beitreten, indem Sie auf den Link unten klicken. Ordinate, natürlich ist ein Facebook-Konto und es ist eine kostenlose Gruppe beitreten. Die Gruppe wird gebildet, um Ihnen zusätzliches Feedback zu geben , damit Sie Ihre Entwürfe anhängen können indem Sie diesen Kurs befolgen und Beispiele aus dem Diskurs oder einem anderen meiner Kurse verwenden. Oder wenn Sie Ihre eigenen Beispiele für Designarbeiten aus der Vergangenheit oder aus der Gegenwart haben, können Sie diese Werke in die Facebook-Gruppe hochladen und dann Feedback von mir oder von anderen Designmitgliedern erhalten. Ich ermutige Sie auch, wenn Sie einen Job haben, Positionen zur Verfügung, um sie in dieser Gruppe zu teilen. So kann jeder von dieser Gruppe profitieren. Wieder einmal ist die Gruppe kostenlos, es ist einfach, beitreten. Klicken Sie einfach auf den Link in der PDF-Datei. Und ich erwarte wirklich, so viele von euch wie möglich in dieser Gruppe zu sehen, nur um unsere Erfahrungen als Designer zu teilen und ich werde versuchen, einige zusätzliche Videos, einige zusätzliche Tipps und Techniken in diese Facebook-Gruppe zu posten . Aber im Moment fangen wir gerade erst an. Wir werden es nur bilden. Und ich ermutige Sie wirklich, mitzumachen und Ihre beste Arbeit dort zu teilen, andere Designer zu inspirieren oder um zusätzliches Feedback zu bitten. Stellen Sie einfach sicher, wenn Sie um Feedback bitten, wie für bestimmte Dinge, nicht nur, wie Sie von diesem Design denken, denn niemand wird darauf antworten. Wenn sie ihr eigenes Ding machen, werden sie dir sagen, ob es schön aussieht oder es nicht schön aussieht. Stellen Sie sicher, dass Sie nach spezifischem Feedback zu Ihren Entwürfen fragen. Zum Beispiel, mögen Sie diese Farbkombination, denken Sie, ich sollte eine andere Schriftart verwenden? Denken Sie, dass diese Bilder gut mit der Hintergrundfarbe übereinstimmen, zum Beispiel solche Dinge. Stellen Sie also sicher, dass Sie nach spezifischem Feedback zu Ihren Entwürfen fragen , denn es wird viel einfacher für mich und andere Designer in dieser Gruppe sein , Ihnen spezifisches Feedback zu geben , das Sie schneller verbessern können, indem Sie einfach fragen Was hältst du von diesem Design? Also danke nochmals für meinen Kurs und ich hoffe, Sie in meiner Facebook-Gruppe zu sehen. Daguerre.