Webdesign von Grund auf in Adobe Xd – Reisebüro

1. Kurs-Einführung: Hey Designer und mein Name ist Alex und willkommen zu dieser Skillshare Klasse über Website-Design in Adobe XD. Ich bin der Gründer von Web Doughnut, wo wir Design-Sonden für Kreative wie Würfel erstellen. Ich bin auch Lehrer, und bisher haben sich über 30000 Schüler in meinen Klassen eingeschrieben. In dieser Klasse werden wir eine Website für Reisebüro zu entwerfen. Und wir werden behandeln, wie wir mit dem Designbrief beginnen und unsere Zielgruppe erkunden und den Markt, die Wettbewerberanalyse erkunden und sehen, was sie tun und was wir in unserem Design verbessern können. Erstellen Sie ein Moodboard, um den Stil und die Richtung unserer Projekte zu bestimmen. Zeichnen Sie Wireframes auf Papier, um die Struktur zu erkunden und Ideen von unserem Kopf auf das Stück Papier zu setzen. Dann importieren wir diese Zeichnungen in Adobe XD und erstellen Drahtmodelle und teilen sie mit unseren Kunden, um Feedback zu erhalten. Mit diesem Feedback werden wir fortfahren, um Farbe, Bilder, Symbole und vieles mehr zu entwerfen und hinzuzufügen . Mit dem Design werden wir Animationen und Interaktionen hinzufügen, um dem Kunden ein besseres Gefühl des Benutzerflusses und der Übergänge zu geben . Dann erstellen Sie ein Responsive Design und angepasst an die Arbeit auf verschiedenen Bildschirmgrößen, von Desktops bis hin zu Tablets und Telefonen. Schließlich werden wir unsere Dateien mit Kunden und Entwicklern mit verschiedenen Methoden und Techniken teilen. Jeder kann dieser Klasse folgen, aber da es einige fortgeschrittene Techniken und Animationen enthält, Grundkenntnisse von Adobe XD erforderlich, um dieser Klasse ohne Probleme zu folgen. Am Ende dieser Klasse können Sie komplexe Website-Layouts in Adobe XD mit fortschrittlichen Organisationstechniken und Animationstechniken entwerfen . Ihre Skillshare Projektklasse für diese Klasse besteht darin, eine der Seiten zu verwenden, oder wenn Sie möchten, können Sie sogar vier entwerfen. Ich fordere Sie auf, Ihre eigenen Bilder zu verwenden, vielleicht Ihre eigenen Symbole zu verwenden und vielleicht sogar Ihre eigenen Farben zu verwenden, nur um die Dinge ein wenig aufzupeppen, folgen Sie den Techniken und folgen Sie den Richtlinien dieser Klasse, um Ihr eigenes Design. Dann poste das Design in deinen Klassenprojekten für mich und alle anderen, um es zu sehen. Und ich werde Ihnen gerne das Feedback geben. Wenn Sie also Ihre Fähigkeiten und Produktivität verbessern möchten, sparen Sie viel Zeit bei Iterationen und Änderungen und erstellen Sie Designs schneller. Dann seh ich dich im Unterricht. 2. Design: Alles klar, die erste Lektion, mit der wir diesen Kurs beginnen werden , ist mit dem Designbrief. Und ich würde immer empfehlen, dass Sie mit dem Designbrief beginnen , denn auf diese Weise können Sie so viele Details erhalten, wie Sie brauchen, um mit der Arbeit an Ihren Projekten zu beginnen. Und es ist immer am besten, dies zu tun, bevor Sie mit der Arbeit an einem Projekt beginnen , denn auf diese Weise können Sie Ihren Kunden so viele Fragen stellen , wie Sie wollen und wie Sie brauchen, um ein besseres Bild von einer Marke, von einem Projekt oder was sie brauchen. Also werde ich Ihnen unsere Vorlage zeigen, die Sie für private und kommerzielle Projekte verwenden können . Und ich werde Ihnen geben, ihre Vorlage isst Adobe XD-Vorlage und Sie können offensichtlich so viel bearbeitet, wie Sie wollen. Also hier ist es diese Vorlage, genau hier haben Sie kurze Wesentliche. Und genau hier haben wir unseren Brief. Und offensichtlich ist unser Brief die Sache, auf die wir uns in diesem Video konzentrieren werden. Aber Sie können auch kurze Wesentliche erkunden und mehr über all diese Dinge erfahren. Grundsätzlich sind dies nur die Fragen, die Sie an Ihren Kunden stellen werden , um ein besseres Bild von der Marke selbst zu bekommen, um ein besseres Verständnis davon zu bekommen, was sie von diesem Projekt benötigen. Also hier haben wir den ausgefüllten Brief. Wieder einmal erhalten Sie eine leere Vorlage, die Sie mit Ihren Details fühlen können. Aber hier haben wir dies in Kürze mit dem Firmenprofil ausgefüllt. Es heißt Reise-Website-Design. Und Sie können sehen, dass die Frist der 6. April 2020 ist. Ein Unternehmen profiliert, also ist Gravelly ein Reisebüro mit Sitz in Belgrad, Serbien. Sie haben Partner auf der ganzen Welt und ihre Spezialitäten, die Reisen zu großartigen Orten mit Werkzeugen und Erkundung der lokalen Kultur und Küche kombinieren . Die vor allem auf Gruppenreisen konzentriert, aber haben Optionen für individuelle Werkzeuge, wo sie alles von Tickets, Hotel, Essen, Touren, alles in einem exklusiven Paket. Ihre Reisen dauern zwischen drei und 14 Tagen und sie versuchen, sich so viel wie möglich auf Flugreisen zu konzentrieren , weil es ihnen eine Menge Geld spart. Enzym-Zwischen-Touren. Sie haben zehn Vollzeitangestellte, so kleine Unternehmen hier und haben freie Agenten, die mit ihnen aus der ganzen Welt arbeiten, von Reiseveranstaltern über Unterkunftseigentümer bis hin zu Carry Services. Hauptpunkt dieses Projekts ist es, mehr Benutzer auf ihre Website zu gewinnen und eine Zeit zu bestellen, physische Geschäfte zu schließen und alles online zu bewegen. Mobile App-Design ist in Zukunft möglich. Also im Grunde, was wir hier haben, sind einige wichtige und wichtige Merkmale. Nummer 1, sie sind wirklich nicht so groß von einem Unternehmen. Sie haben nur 10 Mitarbeiter. Sie haben nur einen Standort in Belgrad, Serbien. Und ihr Hauptziel für dieses Projekt ist im Laufe der Zeit, sie wollen so viele Menschen wie möglich aus anderen Teilen Serbiens und auch aus anderen Teilen Europas auf ihre Website ziehen , damit sie diese Streifen buchen können. Und weil ihr Hauptaugenmerk auf dem Luftverkehr liegt, ist es für sie viel einfacher, dann auf all diese anderen Länder und später in ganz Europa zu expandieren . Und erweitern Sie unsere Belegschaft, indem Sie einfach den Flug anstelle des Busses nutzen. Denn wenn Sie mit dem Bus oder mit dem Zug reisen wollen, müssen Sie physisch dabei sein. Aber mit den Flugzeugen können Sie Flugzeuge buchen, um von jedem Flughafen der Welt zu fahren, im Grunde zu Ihrem gewünschten Standort. Nehmen wir an, Sie haben zum Beispiel 20 Leute, die Griechenland besuchen wollen und zum Beispiel aus Irland kommen. Dann können Sie eine individuelle Reise in Irland buchen, um nach Griechenland zu gehen. Und sie können die Reiseveranstalter sein, die alle diese Dienstleistungen durchführen und buchen. Also, das ist es im Grunde für diesen Abschnitt. Gehen wir nun zum nächsten Abschnitt über. Und im nächsten Abschnitt haben wir Projekt oder real. Das Projekt konzentriert sich also auf eine Neugestaltung ihrer aktuellen Website, die veraltet und viel zu kompliziert aussieht, um die Benutzererfahrung zu nutzen, oder ihre aktuelle Website erfordert sofortige Änderungen, damit Benutzer bessere Erfahrungen haben, während auf der -Site. Textenthüllung und Bilder sind altmodisch und gesamte Design spricht nicht gut mit der Zielgruppe. Dann versuchen, das Projekt zu erreichen, besteht aus Forschung, Wireframes, Design und Leistungen für den Kunden. Und ihre Hauptprobleme im Moment sind es, mehr Menschen auf die Website zu ziehen. Und wenn sie sind, konvertieren sie sie zu Benutzern, weil viele die Website erreicht haben, aber verlassen, bevor sie zu den Benutzern konvertieren. Dies ist das Hauptziel, weil Lehrpläne sie tun, dass alles im Speicher, wenn die Leute den Standort besuchen. Im Moment ist es also der Job des Agenten. Sie versuchen, so viele Dinge wie möglich online zu bewegen. Also noch einmal, Sie können direkt hier von diesem Projekt sehen oder Sie, was sie brauchen. Und ich würde Ihnen wirklich raten, mit Ihren Kunden zu sprechen und so viele Details wie möglich zu bekommen , weil all diese Details, die Sie hier sehen, ich habe, spreche mit dem Klienten. Stellen Sie ihnen einfach alle diese Fragen. Sie können diese Fragen aus dieser Entwurfsbeschreibung folgen, oder Sie können Ihre eigenen Fragen entwerfen, zu denen ich Sie tatsächlich ermutigen würde, da nicht alle Projekte gleich sind und Sie nicht dazu aufgefordert werden, all diese Informationen für alle Ihre Projekte. Denn manchmal werden Sie nur ein Landing Page-Projekt haben und manchmal haben Sie eine Website mit, zum Beispiel, 50 oder 100, 100 verschiedenen Seiten. Und natürlich für diese Website, die groß ist, brauchen Sie viel mehr Details und viel mehr Informationen als für diesen einzigartigen Landungsstrand. Also unten haben wir Ziele und Ziele. Wie gesagt, Hauptziel dieses Projekts ist es, mehr Benutzer auf die Website zu gewinnen , indem sie die große Benutzererfahrung machen sie bleiben und buchen die Reise. Also noch einmal, Sie können das Muster direkt hier sehen und sie wollen, dass ihre Benutzer große Benutzererfahrung haben , um die Reise zu buchen und so viele Dinge wie möglich online zu bewegen, im Grunde zu vermeiden, dass Menschen in ihren physischen Speicher gehen. Ziel dieses Projekts ist es, Menschen mit großem Angebot zu verfolgen und sie von der Konkurrenz zu nehmen. Und sobald sie ein Kunde werden, so dass sie bleiben eins durch Upselling sie andere Dienstleistungen und Angebote wie Touristen zum Beispiel. Ziel dieses Projekts ist es, die Absprungrate um 30% zu senken. Und Bounce Rate ist im Grunde diese Leute besuchen die Website und verlassen bevor sie zu einem Kauf oder Buchung der Reise oder so etwas verpflichten. Die ersten sechs Monate, sobald die Website geht live, zusätzliches Ziel ist es, 15 Prozent mehr Menschen in dieser Zeit in Kombination mit ihrer Marketing-Strategie zu konvertieren . Und sie werden zusammen mit dieser Seite starten. Also noch einmal, sie wollen diese Absprungrate verringern, erhöhen die Anzahl der Anmeldungen, Anzahl der Buchungen von Reisen. Und sie wollen dies auch in Verbindung mit ihrer Marketingtaktik tun. So zum Beispiel, gewidmet, um unsere Radiowerbung zu buchen, wollten sie TV-Werbespots buchen. Sie wollen Online-Marketing-Tools wie Facebook und Instagram Marketing verwenden. Sie möchten zum Beispiel YouTube-Clips erstellen. Und was sie von all diesen Bemühungen tun wollen, ist, Menschen auf ihre Website zu gewinnen, die wir entwerfen werden. Und dann möglicherweise 30% mehr Menschen in den ersten sechs Monaten dieser Bemühungen zu konvertieren. So ziemlich unkomplizierte Ziele, aber wirklich schwer zu erreichen. Und deshalb sind wir hier, um so viele Benutzer wie möglich durch tolles Design zu konvertieren. Im Folgenden haben wir Zielgruppe. So können Sie sehen, Alter ist von 20 bis 70. Also eine ziemlich große Altersspanne , weil dies ein Reisebüro ist und sie für jeden etwas haben. Sie haben ein paar Reisen, die jüngere Leute bevorzugen könnten. Die haben einige Kämpfer Auswärts Reisen mit älteren Menschen, die sie bevorzugen Geschlecht oder 40 Prozent männlich, 60 Prozent weiblich. Weil aus ihrer Forschung in der Regel 60%, sind sie alle weiblich, weil Frauen in der Regel diejenigen sind, die Bezirke für ihre Ehemänner, für ihre Brüder, für ihre Freunde und so weiter buchen . Land des Wohnsitzes derzeit nur Serbien. Aber wie gesagt, sie wollten die Stadt der Resonanz Belgrad erweitern , weil sie ihr Arbeitsplatz sind, meist Arbeitsplätze mit niedrigeren Einkommen auch bei Kleinunternehmern, vor allem Freiberufler, vor allem für weitere Reisen wie zum Beispiel Thailand, wie zum Beispiel Indonesien Cowboys, Zeug wie das. Weil diese Nischen weit von Belgrad, Serbien, entfernt sind. Medienkonsumgewohnheiten. So 60 Prozent Instagram, weil bezeichnen dies wie viele Anhänger sie haben und wie viele Traktion sie anziehen und alle sozialen Medien. Deshalb haben sie sie auf ein Stück Papier wie dieses gelegt. Feuchte Prozent ist auf Twitter und 10 Prozent auf Tiktok. Tägliche Gewohnheiten, Social-Media-Konsum, liefern pendeln , gesund essen und trainieren am Nachmittag. Schließlich erreichen wir diese beiden Konstruktionsanforderungen. Sie wollen Demenz, Auflösungen in Desktop, kleinere Desktop, Tablet und Telefon zu sein . Und das sind die reaktionsschnelle Größenänderungsauflösung. Dateiformate sind Adobe XD als Hauptprojektdatei, SVG für die Symbole, weil sie sie später skalieren und zum Beispiel im Druck verwenden möchten . SVG ist also der Weg, hier zu gehen. Png und JPEG-Bilder, offensichtlich B und G für die Bilder ohne Hintergründe. Und schließlich, Bier für Design kurze und zusätzliche Projektempfehlung, Design Brief. Siehst du das hier? So kannst du einfach hier springen. Drücken Sie Control E, wählen Sie statt PNG, wählen Sie PDF, wählen Sie Ihr Ziel aus, weil ich das nicht habe und drücken Sie einfach Export. Deshalb wird es als PDF exportiert. Und dann können Sie diese PDF-Datei mit Ihrem Kunden teilen , so dass sie auch diese Designbeschreibung haben. Was wir als nächstes haben, sind Dateiformate. Also, wie gesagt, alle diese erfordern Qualität Palette auf Anfrage zur Verfügung gestellt. Also haben sie eine Farbpalette zur Verfügung gestellt und wir werden sie benutzen. Aber ich werde Ihnen immer noch zeigen, wie Sie die Moodboards verwenden können, um Ihre Farbpalette zu generieren und sich mit Ihrem Kunden zurechtzufinden. Bild-Assets aufgenommen werden, auf Anfrage zur Verfügung gestellt und Associate Copy Dokument auf Anfrage zur Verfügung gestellt und Kommunikation, die wir im gesamten Projekt aufgenommen, weil wir Details dieser Ziele benötigen , um uns zur Verfügung gestellt werden. Schließlich erreichen wir den Haushalt, den Zeitplan und die Aufschlüsselung des Haushalts. Insgesamt ist also zehn K, fünf K vor Beginn des Projekts und fünf Schlüssel nach Fertigstellung, Zeitachsenaufschlüsselung. Also offensichtlich können Sie hier Ihre eigene Timeline haben, aber hier ist, wie meine normalerweise funktioniert. Ein Projektzeitplan ist also drei Monate zusätzliche Zeit für Revisions- und Asset-Änderungen für die Entwickler. Das ist also ein Plus, aber dieses Plus wird auch eine Ladung sein. Darüber hinaus können Sie beispielsweise während der Arbeit eine Revision kostenlos angeben, oder Sie können zwei Divisionen angeben. So zum Beispiel, einer nach den Wireframes und einer nach dem Design, und dann wird jede einzelne Illusion danach mehr aufgeladen. Daher würde ich Ihnen immer empfehlen, dies zu tun denn wenn Sie Ihre Grenzen mit Ihrem Kunden festlegen, werden sie sich stärker auf Ihr Design konzentrieren. Und dann werden sie dir mehr qualitativ hochwertiges Feedback geben. Also, nicht Ihre Zeit zu verschwenden und nicht ihre Zeit zu verschwenden. Deshalb müssen Sie objektiv sein. Sie müssen es ihnen direkt sagen, bevor Sie Adobe XD aktivieren. Wenn Ihre Maschine im Grunde, müssen Sie ihnen alle diese Preise sagen. Du musst ihnen die Zeitachse sagen. Deshalb wissen sie, worin sie sich einlassen. Also, wenn wir gleich zurück hier springen, können Sie auch diese Zeitleiste ändern, so dass Sie die Planung, Forschung, Publikums-Design-Präsentation, diese Abteilung und schließlich Lieferung sehen können Forschung, Publikums-Design-Präsentation, . Das ist also meine Zeitleiste und natürlich kannst du sie ändern, was immer du willst. Sie können die Daten direkt hier ändern, um wie viel jede Phase des Projekts Sie führen wird. Sie können dies in Ihren Namen oder Ihre Website ändern und dies sollte Ihre Mail anstelle des Verstandes sein. Endlich möchte ich Ihnen das nur schnell zeigen. Sie können hier drinnen springen und all diese Dinge ändern , so dass Sie die Farbe ändern können, wenn Sie möchten. Ich wollte hier keine Art von Komponenten erstellen, wie Sie sehen können, jede Art von Farben. Weil ich wollte, dass es für euch so einfach wie möglich zu bearbeiten ist. Vielleicht willst du, dass das, ich weiß nicht, ein Schwebeeffekt ist. Vielleicht möchten Sie dies als 3D erstellen. Deshalb wollte ich das nicht weiter bearbeiten. Und deshalb haben Sie die volle Möglichkeit, diese Vorlage zu bearbeiten. Also im Grunde schuldet es für dieses Video. Im nächsten Video werden wir in die Analyse der Wettbewerber springen. Wir werden einige echte Websites analysieren und ich werde Ihnen zeigen, was mit ihnen falsch ist und was wir versuchen werden , mit diesem Website-Projekt zu erreichen und was wir versuchen, zu vermeiden, indem wir aus diesen Fehlern lernen von unsere Konkurrenten. Also sehe ich dich dort. 3. Analyse von Konkurrenzanalysen: In diesem Video werden wir mit einer schnellen Wettbewerberanalyse beginnen. Wir werden Song-Konkurrenten in diesem Bereich analysieren. Und was am wichtigsten ist, Logo-Konkurrenten, denn dieses Geschäft will vor Ort mit lokalen Unternehmen konkurrieren. Deshalb werden wir untersuchen, was sie richtig machen und was sie falsch machen. Damit wir versuchen können, das in unseren eigenen Entwürfen zu vermeiden. Also, was wir hier haben, sind alle diese Websites. Sie sind auf Serbisch, aber ich habe versucht, sie hier in Chrome mit Rechtsklick ins Englische zu übersetzen und dann ins Englische zu übersetzen. Entschuldigung, wenn Sie ein Serbisch sehen und es nicht verstehen, aber im Grunde werden wir uns nur auf das Design und die Benutzerfreundlichkeit konzentrieren, also spielt es keine Rolle. Also fangen wir mit diesem an. Sie können offensichtlich boxed Layout und all diesen leeren Raum sehen, so dass nicht wirklich alte Schulden anpassen. Nun, Sie können auch sehen, dass Sie nicht wissen, wo Sie sich konzentrieren sollen. Also haben wir dieses Menü, dieses Menü, dieses Menü, wir haben diese Menüs, wir haben diese Bilder, diese Bilder. Also, wo soll ich mich konzentrieren? Führen Sie mich einfach durch diese Website. Und das ist alles, weil diese Unternehmen stinken und Sie werden feststellen, dass das hier eine Art Team ist, Schulden. Und je mehr Informationen sie versuchten zu stopfen, wird die Batterie für die Tiefe sein, was offensichtlich nicht der Fall ist, weil die Nutzer dieser Websites im Grunde die gleichen sind wie die Nutzer all dieser anderen Websites. im Grunde bedeutet, dass sie nur zu ihrem Angebot erreichen wollen und sie wollten nur das Richtige für sie bekommen Wasim Grunde bedeutet, dass sie nur zu ihrem Angebot erreichen wollenund sie wollten nur das Richtige für sie bekommenund einfach mit ihrem Leben weitermachen, scheinen wie bei allen anderen Websites online. Daher unterscheiden sich diese Websites nicht so von all diesen anderen Nischen und all diesen anderen Kategorien. Also, führen Sie Ihre Benutzer durch Ihre Website und zeigte sie Stück für Stück, so dass Sie können sie zu klicken, um zu diesen anderen Bereichen Ihrer Website oder der anderen Bereiche Ihrer Seite zu gehen . Deshalb ist das, was wir hier haben, nicht so gut. Auch, was ich auf allen diesen Websites bemerkte, ist Topographie ist extrem klein, was schwierig ist, wenn Sie sich daran erinnern, dass einige unserer Zielgruppen geht den ganzen Weg zu 70 plus. Daher könnten sie einige Schwierigkeiten haben, all diesen Text zu lesen. Wie Sie sehen können, funktioniert dieser Schieberegler nicht so gut, weil ich nichts ändern kann. Es funktioniert einfach von selbst. Ich muss hier klicken, was von Anfang an nicht offensichtlich ist. Wenn Sie also mit Schiebereglern arbeiten, machen Sie es für Menschen so offensichtlich wie möglich. Wo sollten sie klicken, um zum nächsten Bild zu gelangen, wenn sie überhaupt gehen wollen. Hier haben wir alle diese verschiedenen Kategorien unterteilt. Und ich glaube nicht, dass das alles so gut funktioniert. Lassen Sie uns überprüfen Sie es für eine ansprechende. Und Responsive funktioniert gut bis zu dem Punkt, aber Sie können sofort sehen, dass sie nur diese Box-Layout verwenden und all diesen leeren verlorenen Platz hier auf der rechten Seite, Sie können sehen, dass alle diese Bilder nicht korrekt skaliert werden, -Karte wird nicht korrekt skaliert, Fußzeile usw. Also würde ich nur, wenn Sie Box-Layout verwenden müssen, um es zu verwenden, aber stellen Sie sicher, dass Sie es richtig skalieren. Beginnen Sie mit Responsive Design. Und Sie können direkt hier mit den Social Media Icons sehen, nehmen Sie sie einfach hier raus. Stellen Sie sicher, dass sie sich entweder hier oder innerhalb der Fußzeile befinden. Hier können Sie sehen, wie viel Platz Sie haben. Also gehen wir zum anderen über. Und das ist einer der größeren hier in Serbien. So haben sie die gleichen Fehler, aber die behoben einige von ihnen, wie zum Beispiel, Sie können sehen, dass wir tatsächlich auf diese Paginierungspunkte klicken und zwischen unseren Schiebereglern bewegen können . Und sie haben auch diese hier genau so können wir wählen was wir wollen und wir können auf die Suche klicken. Und es führt uns dorthin, wo es uns zu dieser zufälligen Seite führt, der Suche. Sie können die Suchergebnisse sehen. Es führt uns einfach hier, aber ich möchte nur klicken und die Suchleiste anzeigen, damit ich meine Daten eingeben kann und Sie sehen können, dass sie keine Suchdetails haben. Sie müssen also alle diese durchgehen und dann auf Suchen klicken, was im Grunde den Sinn dieser Suche vermeidet. Vielleicht solltest du nur eine Schaltfläche anstelle dieses Symbols haben. einmal haben wir diese verwirrende Navigation. Und wenn ich hier schwebe, können Sie sehen, dass es diesen unteren Teil bedeckt. Wenn ich also schwebe, können Sie sehen, dass ich diesen unteren Teil nicht anklicken kann, kann ich ihn nicht sehen. Und das ist wirklich großes Problem. Aber wenn ich hier klicke, können Sie sehen, dass ich immer noch nicht alle sehen kann, aber das deckt das ab. Es ist also nur ein massiver Kopfschmerz mit dieser Navigation und es ist viel zu kompliziert, ebenso wie dieser Abschnitt, wieder einmal, alle diese Farben schreien mich wirklich winzige Schriftarten an. Es gibt keine Bilder. So zum Beispiel dieser Sitzungssaal, wie, wie es ist, wie sieht es aus? Ist es r c, ist es ein Berg? Ist es? Ich weiß nicht, im Gegensatz dazu, greifen Sie darauf zurück, was es ist. Auch diese Bilder hier, passen Sie diese Bilder, so dass sie nicht Banner oder dan angemessen skalieren gehen, oder zumindest, wenn sie skalieren Mischung mit Ihren Designern, zum Beispiel, drei oder vier verschiedene Ergänzungen von diese Banner-Bilder, so dass Sie sie in all diesen verschiedenen Abschnitten verwenden können , weil sie hier sind. Und wenn ich mit der Größenänderung beginne, können Sie sehen, dass diese Banner gleich bleiben und dieser Text wirklich schwer zu lesen ist. Wieder einmal, was wir hier haben, ist die Navigation verschwunden und dieser obere Abschnitt ist vollständig verschwunden. einmal haben wir das, was in Ordnung ist. Dies ist großartig, wenn Sie viel Platz sparen möchten. Das ist auch gut. Aber noch einmal, diese verwirrend. Also gehen wir mit Serbien. Und Sie können sehen, dass das hier bleibt, also ist es einfach zu verwirrend. Diese Navigation. Wieder einmal sind Bilder nicht so toll. Sie können sehen, dass Bilder hier nicht skaliert werden. Also, warum? Und sie haben Hover-Effekte. Beachten Sie also, dass dies die mobile Version ist, aber sie haben immer noch Hover-Effekt. Wie wird schweben, wenn Sie Ihren Finger darüber bewegen. Das sollte also wirklich behoben werden. Außerdem können Sie sehen, dass Bilder nicht auf die Größe skaliert werden. Sie können all diesen Text sehen. So funktioniert Blau und Schwarz auf Rot und Weiß wirklich nicht so gut. Wieder einmal, leerer Raum mit nur zeigen, dass dies von einem elisa-Designer oder von jemandem gemacht wird , der nicht weiß, was sie alles so gut machen. Diese Symbole sind viel zu groß, aber zumindest haben sie einige tolle Fußzeile und sie haben diese Zahlungsoptionen, was immer großartig ist. Und schließlich haben sie Social-Media-Symbole hier und zurück nach oben, was immer großartig ist. Also noch einmal, sie tun etwas ist gut, aber viele dieser Dinge nicht so gut. Also gehen wir weiter zu diesem hier namens Big Blue. Und sie haben einige Informationen gut gemacht wie diese, zum Beispiel, wie ich sagte, diese Navigation ist viel besser. Also lass uns mit dem Sommer Cherokee gehen. Sie können sehen, dass diese Navigation wirklich gut funktioniert. Sie haben auch eine Suchleiste, die großartig ist, die sich erweitert, was ich ihnen empfehlen muss. Und schließlich, was sie tun. Aber Sie müssen darauf klicken, um es zu schließen. Wieder einmal, warum kann nicht einfach irgendwo anders klicken und es wird geschlossen. Aber es spielt keine Rolle, zumindest die Gewohnheit, das ist irgendwie ein Albtraum mit all diesen Feldern. Aber noch einmal, wenigstens haben sie sie. Sie haben auch das, aber zumindest haben sie nicht so viele Farben wie diese Jungs. Ganzzahlen haben also grundsätzlich drei Farben. Blau, das ist der Name des Unternehmens, in dem in Ordnung ist, geht mit der Marke weiter. Sie haben zum Beispiel zwei Versionen von schwarzer Farbe. Sie haben zum Beispiel diese goldene Farbe, und sie haben diese Rahmen um sie herum. Wenigstens weißt du, dass das ein Abschnitt für sich ist. Sie haben diese Bilder, aber was ich nicht mag, ist diese durch Spenden und diese Schieberegler bewegen sich in ihrem eigenen Tempo. Sie können zwischen all diesen klicken. Es wird sich ändern, was großartig ist. Aber noch einmal, zu viel von diesen und R würde sie einfach in verschiedene Abschnitte trennen und die Benutzer klicken, wenn sie wollen. Denn so ist das nur ablenkend. Wenn ich es einfach hier lasse. Sie können sehen, dass es im Hintergrund wie verrückt funktioniert. Also mag ich das nicht wirklich. Hier haben sie diese Bilder, was in Ordnung ist, aber ich werde sie einfach viel größer machen, weil man diesen leeren Raum links und rechts hier sehen kann , um diese Bilder zu haben, was gut ist. Und ich mag ihr Layout, also nutzen sie den Raum der klug und nicht nur stopfen diese Bilder wo sie finden können, haben sie Best Buy Board Ziel. Und Sie können diese Liste sehen, die großartig ist. Sie haben Marken, mit denen sie gearbeitet haben oder mit denen sie noch arbeiten. Und sie haben dieses Foto, das nicht so toll ist, aber es kann nicht passieren. Und schließlich, E-Mail-Newsletter, die großartig ist, so dass Sie sich mit anmelden können. Schließlich haben sie hier unten, sie haben so etwas wie ein Logo, und sie haben diese Social-Media-Symbole, die großartig ist und zurück nach oben Symbol hier, die nicht älter ist, sichtbar, aber wenigstens haben sie es. Mal sehen, beim Ändern der Größe. Wie Sie sehen können, funktioniert es wirklich gut. Bleibt auf der Marke. Dies ist leicht lesbar, aber noch einmal, diese Aktionen, diese Bilder sind schrecklich skaliert. Sie können sie hier nicht mehr lesen. Also, was sagt es hier in diesem roten Abschnitt, oder haben wirklich keine Ahnung. Und Sie können noch einmal sehen, dass die Abschnitte nicht so gut sind. Das ist schrecklich. Sie sollten richtig skalieren und nicht so, oder warum skalieren Sie nicht einfach Bilder und legen Sie sie übereinander oder verwenden Sie einfach diese Schieberegler, wie sie hier wirklich tun. Und was wir hier haben, sind D's. Warum benutzen Sie nicht einfach diese Pfeile für all diese? Ich verstehe wirklich nicht. Und schließlich, was wir hier haben, ist, dass diese Bilder wieder so verwendet werden, wie sie sind, sie skalieren nicht richtig. Diese Foren noch einmal, so dass Sie zwei Bildschirme haben. Warum also etwas davon verwenden? Während dieser Abschnitt tatsächlich sehr gut skaliert. Footer skaliert wirklich gut. Forum und Social Media Symbole zurück nach oben ist immer noch genau hier. Und schauen wir uns den Schrecken an. Sehen Sie, ob sie es ausgeschaltet haben. Mal sehen. Ich glaube, sie haben es tatsächlich getan. Ich mag diese Typen, die den Strom nicht ausgeschaltet haben. Sie können hier sehen, Ich denke, datiert für die mobilen Versionen, das ist großartig. Und schließlich gehen wir zu dieser Website über, die für jüngere Menschen und jüngere Zielgruppen ist. So können Sie sofort hier sehen, dass sie einige, ein bisschen andere Techniken verwendet haben, dann alle diese anderen Websites, die ich Ihnen gezeigt habe, können Sie sehen, dass sie große große Texte direkt hier in der Mitte ihres Bildes haben. Sie haben Pfeile links und rechts, was in Ordnung ist. Verwenden Sie sie einfach und lassen Sie mich wählen, was ich tun möchte. Und sie haben Paginierung genau hier. Sie haben schöne und einfache Navigation mit tollen Animationen. Und Sie können sehen, wenn ich hier schwebe, deckt das nicht den ganzen Bereich ab. Es deckt nur ab, was es abdecken muss. Darunter haben sie all diese tollen Karten, die auf Howard wirklich gut funktionieren. Und sie haben separate Hover für ein Hintergrundbild und für die Schaltfläche selbst. Sie haben hier oben klar, was ich wirklich mag, dass sie Video verwenden. Wie Sie bemerken, verwendete keine dieser früheren Websites Video. Sie verwenden nur Bilder und sie verwenden Video, um jüngere Menschen zu verleiten, im Grunde von ihnen zu kaufen, weil sie sich hauptsächlich auf jüngere Menschen konzentrieren, Andys Partyreisen. Und Sie können genau hier sehen, diese Karten sehen wirklich toll aus, aber noch einmal, skalieren Sie sie und füllen Sie den Rest des Raumes. Sie haben ein Zitat hier, aber ich würde einfach zumindest ein Banner verwenden, zum Beispiel, die gesamte Breite Ihrer Website und vielleicht Sie als Reise-Bild, um Menschen mit diesem Zitat zu inspirieren , weil das ist, was Zitate tun sollen auf Websites wie diese. Verwenden Sie also vielleicht ein Bannerbild mit dem Zitat in der Mitte. Wir haben einige Frankreich, die großartig ist, abonnieren, die immer hier bleiben, die wirklich wie, aber es gibt keinen Knopf hier. Also, sobald ich meine E-Mail eingeben sollte drücken Sie die Eingabetaste. Was soll ich tun, wenn ich Mobilgeräte verwende? Denk einfach an Sachen wie Schulden. Dann haben sie endlich diese tolle und tolle Fußzeile. Ich mag es wirklich. Es ist ganz einfach. Also hier ist es ihr Ziel und ihre Standorte, oder sie haben ihre Telefonnummern, sie haben ihre E-Mail-Adresse, sie haben ein anderes Ziel. Also in dieser anderen Stadt genannt Absolventen, und sie haben getrennte Telefonnummern für diese Stadt. Und Sie können die Websites ihrer lokalen Partner sehen. Und schließlich, Social-Media-Icons genau hier. Chat ist derzeit nicht verfügbar, aber zumindest haben sie den Chat, die keiner dieser anderen und tun. Schließlich, wenn ich oben klicke, können Sie sehen, wie das aussieht und im Grunde das ist es. Der Hauptpunkt dieser Erkundungen ist also zu verstehen, was Ihre Konkurrenten tun. Versucht, gute Dinge zu kopieren, aber offensichtlich passen Sie sie für die Marke, für die Sie arbeiten , und versuchen Sie, schlechte Dinge zu vermeiden, wie ich Ihnen hier gezeigt habe. So zum Beispiel, wirklich kleine Topografiebilder, die nicht gut skalieren, wirklich kleine Antipppunkte. Wenn Sie also mit Responsive Design arbeiten und Benutzer irgendwo tippen müssen, stellen Sie sicher, dass diese Schaltflächen groß sind, stellen Sie sicher, dass der Text lesbar ist. Bilder sind klar und stellen Sie sicher, dass Sie Ihre Nachricht bestmöglich kommunizieren , damit Ihre Benutzer Sie von Anfang an verstehen. Und sobald sie auf diese Website kommen. 4. Schaffen eines Moodboard: In diesem Video werden wir Mood Boards für unser Projekt erstellen. Und Moodboards sind im Grunde Derek, nur um dich in die Stimmung zu bringen, wie der Name schon sagt. Und im Grunde sind sie für Sie da, um mögliche Farbkombinationen, mögliche Stimmungen zu erkunden , und dass diese Bilder verwenden, um Ihre in die Stimmung zu bringen. Und im Grunde werden sie deshalb Moodboards genannt. Jetzt können Sie sie für sich selbst verwenden. Sie können sie in einem digitalen Format verwenden oder Sie können beispielsweiseso etwas wie eine vier- oder US-Buchstabengröße erstellen so etwas wie eine vier- oder US-Buchstabengröße und später ausdrucken und Ihren Kunden zeigen. Und natürlich können Sie sie zum Beispiel immer als PDF exportieren und auf diese Weise an die Kunden senden. Jetzt können Mood Boards so aufwendig sein, wie Sie wollen oder so einfach, wie Sie wollen. Sie können zum Beispiel etwas wie zwei oder drei verschiedene Bilder einfügen oder Sie können, ich weiß nicht, Dutzende von verschiedenen Bildern verwenden . Je nachdem, woran Sie gerade arbeiten, können Sie unterschiedliche Logo-Kombinationen verwenden. Da wir beispielsweise an einem Website-Projekt gearbeitet haben, können wir verschiedene Navigationen einbeziehen. Wir können verschiedene für uns und solche Sachen einschließen, um in den Modus zu kommen. Also werde ich Ihnen einige Vorlagen zeigen, die wir im Web Donald verkaufen, das ist meine Firma. Sie können diese Vorlagen mit einem Rabatt erhalten und ich werde den Rabatt in einem PDF hinterlassen. Klicken Sie einfach auf diese Links und der Rabatt wird bereits angewendet. Und nur für die Benutzerfreundlichkeit für Sie, wenn Sie möchten oder wenn nicht, können Sie sie einfach in Adobe XD erstellen. Lassen Sie mich Ihnen schnell zeigen, was ich meine. Also hier sind meine Webseiten, Web, Donald Duck Netz. Und Sie können sehen, dass wir Produkte Abschnitt haben. Und innerhalb dieses Produktabschnitts haben wir all diese verschiedenen Produkte. Und wenn Sie sich für Moodboards entscheiden, sehen sie so aus. Also haben wir dieses Moodboard. Und Sie können sehen, es kommt in Photoshop und XD-Dateiformat. Es kommt in einem Vier-Buchstaben-Abmessungen. Und im Grunde ist das vorher und das ist das Nachher. Sie können sehen, wie einfach sie zu bedienen sind. Sie können Farben sampeln. Sie können verschiedene Bilder einschließen, und das sind die verschiedenen Größen und Sie können sehen, wie viele von ihnen wir haben. Stöbern Sie einfach in unseren Produktbereich. Und ich werde auch den Link in der PDF zu diesen, die ich Ihnen zeige, lassen, so dass Sie leicht navigieren können. Dies sind die Instagram-Einsen und offensichtlich sind sie quadratische. Und es gibt diese rechteckigen für die Geschichten. Wenn Sie sie verwenden möchten, können Sie sehen, wie sie aussehen und wie sie aussehen können. Auf Instagram haben wir Social-Media-diejenigen, die im Grunde das Gleiche sind. Und offensichtlich, da XD Photoshop Dateien nativ unterstützt und Photoshop Dateien öffnet, können Sie einfach jede dieser Dateien öffnen, da XD Photoshop Dateien unterstützt und Sie sehen können, wie sie aussehen. Und offensichtlich haben wir quadratische, wir haben rechteckige für Twitter und Facebook. Und wir haben auch DES will für Pinterest, und Sie können sie offensichtlich für Instagram Stories verwenden. Und schließlich haben wir diese, die für den Druck sind. Und in diesen, denke ich, Skizzenversion ist auch enthalten. Aber wie gesagt, können Sie Ihre Photoshop-Datei leicht öffnen, die ich Ihnen in nur einer Sekunde zeigen werde. Und so sehen sie aus. Und Sie können hier die Illustration sehen, wenn Sie sie ausdrucken, können Sie sie so verwenden und Sie können mit Ihren Kunden kommentieren. Wenn Sie sie also in Adobe XD öffnen, zerlegt, sehen sie tatsächlich aus. Also im Grunde. Ich bin hier auf die Homepage gekommen und habe ein Kunstboard aus Sand AT von 1080 erstellt , das Sie hier sehen können. Und ich ging einfach weiter und öffnete eines dieser Moodboards. Und das können Sie hier von der Homepage aus tun. Und Sie können sich einfach von Ihrem Computer öffnen oder Sie können die Datei XD durchsuchen und Sie können die Datei so öffnen. Dies ist die Datei, die ich geöffnet habe und es ist eines unserer Produkte. Und Sie können sehen, genau hier haben wir Bild-Icons. Ich werde sie einfach Hallo und das gleiche für das Logo tun. Ich werde auf mein Logo klicken und ich werde das Logo meines Kunden verwenden , das tatsächlich für dieses Projekt gebildet wurde. Hier ist es. Und weil ich nicht denke, dass es passen wird und ich nehme es nicht gut skaliert, was es nicht tut. Ich werde einfach Control E drücken und auf meinen Desktop exportieren. Lassen Sie mich schnell wählen Sie es von hier, wählen Sie Ordner, und ich werde es als PNG exportieren. Dann werde ich mein Logo von hier entfernen, und ich werde in die rechte hier schauen, einfach ziehen und ablegen als PNG, so dass ich es leicht skalieren kann, wenn nötig. Ich kann einfach hier in der Mitte positionieren. Sie können auch diese beiden klicken Sie rechts hier und dann rechts hier, um sicherzustellen, dass es sich in der Mitte befindet. Und weil dies das Objekt ist, können Sie leicht seine Farbe ändern und dann können Sie tun, was Sie wollen. Aber konzentrieren wir uns jetzt nicht darauf. Konzentrieren wir uns stattdessen auf diese Bilder. Also ging ich voran und lud einige Bilder von Vergrößern oder Elementen herunter. Und einfach doppelklicken Sie hier und positionieren Sie es zum Beispiel direkt hier. Also kann ich immer reingehen und es zum Beispiel drehen, so. Aber ich glaube nicht, dass das wirklich so gut funktioniert. Aber lassen wir es einfach da liegen. Oder vielleicht können wir dieses Bild per Drag & Drop hineinziehen. Ich denke, das funktioniert viel besser. Und wir können es immer umdrehen, weil unser Logo auf dieser Seite ist. Und wir können dieses erste Bild zum Beispiel auf diesem Bild verwenden. Und ich denke, das funktioniert viel besser, weil Sie die Person im Rahmen hier sehen können. Ich kann immer ein anderes Bild per Drag & Drop drinnen. Und wie gesagt, werden diese Bilder nur für unsere Inspiration verwendet. Und sie werden benutzt und einfach sortiert. Wir können die Farben und in Bezug auf Farben sehen, zum Beispiel, lassen Sie uns hier auf unserem Login noch einmal doppelklicken, und ich kann die Farbe vom Himmel abtasten, zum Beispiel. Und vielleicht sollte ich dunklere von diesem Blau verwenden. Und Sie können sehen, wie das aussieht und die Farben selbst. Sie können einfach auf dieses Farbfeld klicken und Sie können einige Farben probieren nur um eine allgemeine Vorstellung von diesen Farben zu bekommen. Und gehen wir von dem dunkleren Blau. Lasst uns so etwas helleres Blau probieren. Lasst uns unser AN oder etwas dazwischen benutzen, vielleicht so etwas, Erdfarbe. Vielleicht können wir so etwas benutzen und sie dann umschalten. Und Sie können sehen, wie extrem einfach das zu navigieren ist. Und vielleicht können wir eine dunklere Farbe verwenden. Verwenden wir, ich weiß nicht, vielleicht diesen. Und das ist im Grunde unser Moodboard gemacht. Und natürlich kannst du mit ihnen herumspielen, so viel du willst. Aber lassen wir es einfach so. Und Sie können diese auch umschalten. Sie können auf dieses Bild doppelklicken oder Sie können einfach klicken und dann hier erweitern, um das Bestelllayout zu ändern. Wenn Sie möchten, können Sie das für alle diese Bilder tun, die Sie sehen können, einfach klicken und erweitern Entitäten im Grunde, wie diese Mood Boards funktionieren. Nun, weil ich mein Farbschema für dieses Projekt habe und ich werde Ihnen zeigen, dass in einer Sekunde, wenn wir mit dem Design beginnen, ich werde keine dieser Farben besonders verwenden, aber Sie können sich nur vorstellen, dass Sie Mitbewerber Bilder, um einige Farben zu probieren. Sie können frühere Arbeiten Ihres Clients verwenden, um einige Farben zu testen, und dann können Sie diese Farben in Ihrem Design verwenden. Offensichtlich haben Sie gesehen, dass dieses Logo weiß ist und sie verwenden die weiße und die dunkle Version dieses Logos. Aber im Grunde hat es keine Farbe im Inneren. Aber wenn das Logo Ihres Kunden Farbe hat, werden Sie offensichtlich diese Farbe verwenden. Probieren Sie es einfach auf diese Weise. Und noch einmal, wenn Sie möchten, können Sie diese Produkte von unserer Website erhalten. Und ich werde die Links verlassen und das PDF von all diesen, die ich Ihnen gezeigt habe, diskontieren. Wenn Sie aber nicht einfach in Adobe XD springen möchten, erstellen Sie eines davon. Sie müssen nicht 1080 verwenden. Um 1080, wie ich es tat. Sie können 1920 von 1080 verwenden, können Sie noch kleiner verwenden. Sie können größere Anzahl von Bildern, mehr Bilder, weniger Bilder, tun, was Sie wollen mit diesem. Dies ist nur für Ihre Inspiration. Und natürlich können Sie dies mit Ihrem Kunden teilen , der hier zum Beispiel springen und exportieren kann, und dann teilen Sie das mit Ihrem Kunden, und sie können sehen und genehmigen oder missbilligen Ihre Farbauswahl. Also im Grunde, das sind die Moodboards und wie sie funktionieren. Du kannst mit ihnen herumspielen. Sie können alle Arten von verschiedenen Bildern in. Sie können verschiedene Logos einbinden. Sie können zum Beispiel Visitenkarten hinzufügen, je nachdem, was Sie tun, können Sie alle Arten von verschiedenen Bildern einschließen. Sie können sogar Farbverläufe einbeziehen. diesen kannst du machen, was du willst. Wie ich schon sagte, diese sollen dich in Stimmung bringen. Diese sollen Sie dazu bringen, zu verstehen, womit Sie arbeiten und für wen Sie arbeiten, und daher viel einfacher mit Ihrem Projekt fortzufahren. Im nächsten Video werde ich Ihnen zeigen, wie Sie diese Datei einrichten , weil wir bereits mit diesem Moodboard begonnen haben. Ich werde unseren Designbrief per Drag & Drop hineinziehen. Und ich werde Ihnen zeigen, wie wir diese Datei später erstellen werden und was wir als Nächstes tun werden. Also sehe ich dich dort. 5. Projektaufbau: Alles klar, lass uns jetzt weitermachen und unsere Akte aufstellen. Und dieses Video wird ziemlich einfach und kurz sein oder wollte einfach nur schnell durchlaufen, wie ich normalerweise meine Dateien eingerichtet habe. Sie können das gleiche Setup verwenden, aber Sie müssen es nicht. Sie können Ihr eigenes Setup verwenden, wenn Sie möchten. Ich will dir nur zeigen, was ich benutze. Also hier haben wir unsere Designbeschreibung und wie gesagt, Sie werden diese einfach bekommen. Sie werden sich innerhalb der ZIP-Datei befinden, entpacken Sie diese Datei und verwenden Sie sie für Ihre persönlichen oder kommerziellen Projekte. Im Grunde werde ich sie auswählen, Control oder Command C drücken und diese Datei schließen, und hier ist unser Moodboard. Ich werde einfach V genau hier kontrollieren. Und was ich eigentlich tun werde, ist, sie hier auf dieser Seite zu bringen. Und zum Beispiel, positionieren Sie sie irgendwo um 100 zu sein. Ich denke, es ist gut, und bewegen Sie dieses Ende auf 100. Also im Grunde, was wir hier haben, sind kurze Essentials, sind kurz und Moodboard. Und im Grunde werden wir diese Datei von hier aus erstellen. Adobe XD positioniert es standardmäßig in der Mitte, aber ich mag es, dies ein wenig nach oben zu verschieben, nur um mir ein bisschen mehr vertikalen Raum oder irgendwo hier herum zu geben . Nun, was Sie tun können, können Sie, zum Beispiel, li Ihre Papier-Wireframes hier und Sie können hier für Ihre Adobe XD-Wireframes bewegen, dann entwerfen Sie hier, den Export, Prototyping, was Sie als Nächstes tun, vielleicht sogar App-Design, dann können Sie sich nach unten und unten bewegen. Aber was ich wirklich gerne mache, ist, diese Dateien einfach in diese obere linke Ecke der Datei zu verschieben . Also, äh, haben viel größere Realistik-Bildschirm Immobilien genau hier. Und was ich auch gerne mache, ist die Datei lokal sowie das Cloud-Dokument zu speichern. Was mir das erlaubt, wenn aus irgendeinem Grund Adobe XD abstürzt und Cloud-Dokument gespeichert wird, aber mein lokales Dokument ist nicht mit den neuesten Änderungen. Daher kann ich das Cloud-Dokument später einfach hochziehen auf meinem Desktop speichern. Zum Beispiel, wenn ich diese Datei später ohne Internetverbindung bearbeiten muss , während ich unterwegs in meinem lokalen Café bin, wo immer. Daher habe ich wirklich gerne diese beiden Optionen. Also sowohl Cloud-Dokument als auch mein lokales Dokument, und das ist es im Grunde für dieses Video, ich werde Control S treffen und im nächsten Teil werden wir uns auf Papier-Wireframes konzentrieren. Ich werde Ihnen zeigen, warum sie wichtig sind. Wir werden Drahtbilder auf ein Stück Papier zeichnen. Und später werden wir zu dieser Datei zurückspringen. Wir werden diese Papier-Wireframes nur als Referenz in Adobe XD einbringen. Und dann gehen wir später zu einigen echten Wireframes in Adobe XD, die wir dann in Designs verwandeln, die wir schließlich animieren werden. Also sehe ich dich dort. 6. Paper 1: In Ordnung, jetzt werden wir anfangen, Papier-Drahtmodelle zu erstellen. Und wir werden mit der Struktur selbst beginnen. Aber bevor wir es tun, wollte ich nur schnell durchlaufen, was Sie für diesen Prozess brauchen. Grundsätzlich brauchst du jede Art von Papier. Sie haben Rhein Linie rund um Ihr Haus oder Ihr Büro, und Sie brauchen jede Art von Stift oder Bleistift. Sie können sogar farbige Marker verwenden. Sie können Lineale verwenden, aber ich mag es, Dinge freie Hand zu machen, nur weil es für mich viel schneller macht, die Ideen auf ein Stück Papier zu legen. Denn dieser Prozess ist nur ein Startprozess. Später bringen wir dies in Adobe XD ein und erläutern die Elemente selbst unter Design, Position, Skalierung und vieles mehr. Dies ist also nur der erste Teil dieses Prozesses, ist, Ihre Ideen auf ein Stück Papier zu bringen, nur so dass Sie sie auf einem Stück Papier spülen können und dann können Sie später beginnen. Innere, es wird extreme oder Ihre andere Lieblings-Werkzeug der Wahl und starten Sie die Erstellung von Eigengewicht. Das erste, was wir in diesem Prozess erstellen werden, ist die Struktur unserer Seite so. Also werde ich eigentlich mit der Navigation selbst beginnen. Also werde ich so etwas schnell machen. So können Sie sich vorstellen, dass dies der Umriss der Website selbst ist. Also werden wir hier mit dem Logo beginnen. Dann werden wir in Destinationen schreiben. Und Benutzer können tatsächlich auf diese Ziele klicken, um sie zu einem dieser Ziele und Schulden, die sie im Angebot haben, zu bringen. Als nächstes werden wir im Winter für Wintertouren schreiben. Dann werden wir Wellness für Wellnesstüren haben, individuell. Und dies ist die Seite, auf der Benutzer individuelle Reisen buchen können. Sie können wählen, was sie wollen. So können sie von Flugtickets über Unterkunft, Essen und all diesen Dingen, die sie dort sehen werden, wählen. So Aktivitäten und Ausflüge und vieles mehr innerhalb dieses einzelnen Strandes. Wir werden Kreuzfahrten machen. Und du siehst, dass mir der Weltraum ausgeht. Und schließlich werden wir über uns haben. Diese Seite wird also hier oben laufen, also lassen Sie sich nicht von dieser Zeile ablenken. Und schließlich werden wir hier in Flugtickets schreiben. So wie so. Dann werden wir einen Newsletter haben. Und wir werden auch Telefonnummern haben, also 123. Und wir können diese Icons auch hier haben. So kann ich zum Beispiel ein Flugzeug-Icon hier haben. Ich kann hier ein E-Mail-Newsletter-Symbol haben. Und auch ich kann hier ein Telefon-Symbol haben, nur damit, wenn wir das später nach unten skaliert haben, wir das hier tatsächlich haben können. Lass uns sehen. Wir haben das Symbol und den Text auf einem großen Bildschirm, und wir haben nur das Symbol selbst auf den kleineren Bildschirmen, vor allem für diese Telefonnummer. So können Benutzer tatsächlich tippen Sie dort und es könnte sie zu diesem bestimmten Bildschirm bringen. Das war's also für dieses erste Video. Im nächsten Video beginnen wir gerade mit der Homepage selbst. Also werden wir vorwärts gehen, verwenden Sie einfach so etwas. Also vielleicht können wir so etwas für die Navigation erstellen. Und du kannst immer wieder zurückgehen. Und ich ermutige Sie wirklich, für alle Projekte, die Sie tun, um dies zu zerlegen, nur so dass Sie wissen Ihre Navigation tatsächlich aussieht, so dass Sie immer wieder darauf zurückgehen und sehen können , für welche Seiten Sie entwerfen. 7. Paper 2: Alles klar, jetzt, da die Navigation selbst beendet ist, wir nun zu diesem Teil , gehen wir nun zu diesem Teil ,der eigentlich unsere Homepage sein wird. Und weil die Homepage extrem lang sein wird, werde ich zum Beispiel zwei Boxen wie diese erstellen . Also noch einmal, wenn Sie wollen, können Sie das Lineal verwenden, aber ich mag es nicht wirklich, die Lineale zu benutzen, weil ich denke, dass sie langsamer werden. So kann ich einfach einen Umriss wie diesen erstellen. Was wir also anfangen können, ist das, was wir zuvor geschaffen haben. Das wird also unser Logo sein. Das wird unsere Navigation sein. Und wir haben diese auch hier an der Spitze. Das erste, was wir schaffen werden, ist der Heldenbereich wie diese. Und vielleicht können wir Pfeile erstellen, um nach links und rechts zu gehen. Was wir in den Beispielen besprochen haben, die ich Ihnen gezeigt habe. Und vielleicht können wir hier Text erstellen. Und sagen wir, dass dies vielleicht der Standort in Peking ist. Und vielleicht können wir auf den Knopf setzen, der sagt jetzt erkunden. So wie so. Und sie können auf diese Schaltfläche tippen, um auf die Peking-Seite innerhalb des Ziels zu gehen. So können Sie bereits beginnen zu sehen, wie das alles miteinander binden wird. Was wir hier erstellen können, und dies kann der Teil des Heldenbildes sein, oder es kann unter das Heldenbild selbst gehen, abhängig der Größe, für die Sie erstellen, ist, dass wir diese Selektoren erstellen können. Also mal sehen, vielleicht können wir das in fünf Teile teilen. Also 1234, und das wird fünfter. Und dieser erste Teil kann zum Beispiel Ziele sein. Und lassen Sie uns ein Symbol wie das erstellen. Also und Ziel ist nächstes nach oben ist Reisetyp. Also vielleicht können wir ein Symbol Bein erstellen tut So Reise. Als Nächstes können wir Aktivitäten haben. So vielleicht Symbol einer Person, die zu VTS geht. Und schließlich können wir suchen. Und sobald sie auf die Suche tippen, diese Suchleiste, zum Beispiel Kim erstreckt sich diese Suchleiste, zum Beispiel Kim, bis hier, so dass sie alle diese zusätzlichen Felder abdecken kann. Und schließlich können wir einen Knopf für Apply haben. Und es kann alle diese Filter hier anwenden. Also lassen Sie mich schnell ein wenig hineinzoomen damit Sie besser sehen können, was ich hier mache. So können Sie sehen, dass wir alle diese hier haben. Als Nächstes können wir zum Beispiel verschiedene Abschnitte erstellen. So können wir vielleicht einen Abschnitt namens spezielle Angebote hier erstellen. So spezielle Angebote, wie alle diese anderen Websites haben. Und hier können wir zum Beispiel erste Minuten haben. Und hier können wir so eine letzte Minute haben. Und für beide können wir diese verschiedenen Karten haben. Also lassen Sie uns hier auch eine Karte und eine Karte erstellen. Natürlich können wir hier zum Beispiel das Symbol von Uhr haben , und wir können hier eine Szene haben. Und was wir in diesen Angeboten schaffen können, ist, dass wir hier zum Beispiel ein Bild aufnehmen können. Also ziehen wir es so raus. Und Sie können verschiedene Marker verwenden, wenn Sie wollten, nur um anzuzeigen, dass dies Ihr Bild ist. Als Nächstes können wir hier erschaffen. Sterne. Und wir können zum Beispiel von eins bis fünf oder was auch immer sonst erschaffen. Und mit diesen Sternen, was Sie tun können, ist, dass Sie die Lage selbst präsentieren oder Sie können die Hotels selbst präsentieren. Je nachdem, was Sie hier tatsächlich zeigen. Also, wenn Sie mehr unter unseren Sternen sind, was wir schaffen können, ist eine Art Beschreibung. Also lasst uns zum Beispiel Paris hier und hier benutzen . Und wir können hier zusätzliche Beschreibung erstellen. Was wir auch einschließen können, sind zum Beispiel sieben Tage oder 14 Tage. Und vielleicht können wir hier einige verschiedene Symbole einfügen. So sehe ich, und nur um anzuzeigen, dass, zum Beispiel, können Sie zu ihrem Ziel mit dem Flugzeug reisen, mit dem Zug Auto oder Bus oder so etwas. Und schließlich können wir hier einen Preis schaffen. Also lassen Sie uns 1250 sehen und sagen wir 930. Und schließlich können wir hier auf der rechten Seite ein Symbol erstellen. Und vielleicht können wir mit diesen verschiedene Trennzeichen wie diese erstellen. So können wir verschiedene Trennlinien oder so etwas einschließen. Nur um zu trennen, sind diese Abschnitte ein bisschen mehr. Und hier, wie gesagt, können wir nur ein Pfeilsymbol einschließen, das wir beim Hover auslösen können. Sobald sie schweben, können sie dort tippen und sie können zu diesem bestimmten Ziel gehen. Und wir können zum Beispieldiese Abschnitte mal vier machen, diese Abschnitte mal vier machen, also vier insgesamt, zum Beispiel, nur um uns etwas Platz zum Zeichnen zu sparen. Und wir können zum Beispiel zwei Tasten verwenden. So C Alle und alle sehen. Zum Beispiel, sehen Sie Ihren Nachnamen und sehen Sie alles für uns. First-Minute-Angebote, nicht FirstName. Also erste Minute und letzte Minute, sehen Sie alle ersten Minuten, bis Sie alle letzte Minute. Also können wir so etwas tun. Was wir unten tun können, ist, dass wir einen anderen Abschnitt hinzufügen können. Sie können sehen, was ich hier tue. Ich breche diese Seite einfach in verschiedene Abschnitte auf, nur um die Interessen des Besuchers so hoch wie möglich zu halten. Also, was wir hier tun können, ist unsere Play-Schaltfläche, um anzuzeigen, dass dies das Video ist. So können wir es so positionieren. Und wir können zum Beispiel entweder die Autoplay-Funktion verwenden, wie ich Ihnen in einem der Beispiele gezeigt habe, oder wir können ihnen entweder das Anzeigesymbol selbst zeigen und sie dieses Video selbst abspielen lassen. Also lasst uns weitermachen. Und zum Beispiel, für den nächsten Abschnitt, können wir verschiedene Ziele verwenden. Also lassen Sie uns europäische Destinationen so nutzen. Und wir können zum Beispiel eine separate Beschreibung hier einfügen. Und wir können mal 4, vier Kontinente verwenden. So können wir europäische, asiatische, afrikanische und amerikanische Destinationen nutzen. Und innerhalb der amerikanischen Destinationen, können wir, zum Beispiel, Nord- und Südamerika. Und dann können wir sie vielleicht sogar ein bisschen besser teilen, nur damit wir unseren Nutzern die Wahl geben. So können sie sofort wählen, wo sie reisen und an welches Ziel arbeiten wollen? Und in diesen können wir zum Beispiel vier verschiedene Karten wie diese einschließen. Also diese Karten sind vielleicht die gleichen wie diese, nur eine vertikal gedreht. Dies ist, wo wir Adobe XD verwenden können, diese erweiterten Funktionen wie Stacks zum Beispiel, und Responsive Responsive Größe als auch. Also, was wir genau hier tun werden, ist Bilder wie diese aufzunehmen. Wir werden die Bewertung hier einbeziehen. Also werde ich nur einen Stern verwenden, weil wir im Grunde genau das gleiche Layout verwenden werden, ist dieser. Dann werden wir zum Beispiel Paris, Rom, London und Berlin benutzen . Wir werden die Beschreibung dieses Ortes verwenden. Wie gesagt, genau das gleiche Layout wie dieses. Es werden sieben Tage mit den Symbolen sein. Sieben-Tage-Symbole hier Habe ich. Und wir werden den Preis einschließen. Also lasst uns 100 River benutzen, nur um uns ein bisschen mehr Zeit zu sparen. Habe ich, und wir werden das Pfeil-Symbol auf Hover verwenden. Also wird dieses Symbol nicht sichtbar sein, es sei denn, der Hover. Es wird also nur zeigen, wann das Datum tatsächlich schwebt. Darunter. Was wir unsere Pfeile erstellen werden, können sie nach links und rechts gehen, wenn sie wollen. Und schließlich können wir eine Schaltfläche wie diese hinzufügen, um zu sehen oder so können sie alle Destinationen sehen, entweder europäische oder asiatische, afrikanische oder amerikanische Destinationen. Wie ich bereits sagte, können wir zum Beispiel europäische Länder einbeziehen, dass wir afrikanische Destinationen einschließen können. Und dann können wir diese Abschnitte ausbrechen, indem wir so etwas wie ein Bild einfügen. Also lassen Sie uns zum Beispiel rechts positioniertes Bild wie folgt einschließen. Vielleicht können wir es sogar aufpeppen, indem wir eine Hintergrundfarbe wie diese hinzufügen. Und wir können sogar darauf hinweisen und sagen Farbe wie Dad, nur damit wir wissen, was es ist. Oder wenn Sie dies mit Ihren Kunden oder Teamkollegen teilen. Daikin weiß also, was es ist. Also können wir es hier setzen. Und zum Beispiel können wir etwas in wie Buch schreiben, Ihre Traumreise bei uns. Besteuert genau hier. Und schließlich Taste, die besagt, erhalten Sie ein kostenloses Angebot. So kostenlose Zitate wie diese. Und sie können ein kostenloses Angebot für jede Art von diesen individuellen Reisen erhalten, wenn Sie sich genau hier an der Spitze des vorherigen Videos erinnern. So können sie ein kostenloses Angebot für diese bestimmte Reise von dem, was sie wählen, erhalten. Als nächstes können wir zum Beispiel asiatische und amerikanische Truppen unten einbeziehen. Dann, was wir einschließen können, ist ein ganz anderer Abschnitt, der zum Beispiel unsere Top-Destinationen sagt . Wir können hier Links und Rechts Pfeile einschließen. Wir können unsere kurze Beschreibung hier eintragen. Und schließlich können wir, zum Beispiel, drei Karten, dieses Mal. So können wir mit dem Layout so gehen und Sie können sehen, was ich tue. Ich breche einfach das Layout auf. Wir verwenden also nicht wie diese Websites, die ich Ihnen gezeigt habe. Wir verwenden nicht genau das gleiche Layout für alle Abschnitte auf unserer Seite, wir verwenden verschiedene Layouts. Also hier verwenden wir Karten, die so positioniert sind. Hier verwenden wir Karten, die so positioniert sind. Dann brechen wir diese Abschnitte. Und hier verwenden wir drei verschiedene Karten, genau das gleiche Layout, aber einfach anders positioniert. Also, was ich hier tun werde, ist, die ein wenig nach unten zu verlängern. So zum Beispiel, meine Blätter, das kann sein, sagen wir Toskana. Und das kann wieder Aaron oder Paris sein, nur damit wir etwas haben können. Wir können Text einschließen und so etwas wie von und Preis hier sagen. So 998, also Preis 1, 0, 0, 0, 0, und Preis 700. Nur damit wir sagen können, dass sie ändern können, was es sagt direkt hier auf dieser Seite. Was wir als nächstes tun können, ist, dass ich einfach zu diesem leeren Teil der Seite übergehen werde , weil, wie ich sagte, dies ist wirklich eine längere Seite. Also, was ich hier tun werde, ist genau das Gleiche zu tun. So erweitert den ganzen Weg bis hierher. Ich bin einfach den ganzen Weg hinunter bis hierher ausgedehnt. Und sagen wir, Reisende lieben uns. Text hier und hier, wir können Zeugnisse einschließen. Vielleicht können wir hier ein Bild einbinden. Mal sehen, Name. Einige Zeugnis und reiste nach Paris. Was wichtig ist, denn jetzt erhöhen Sie die Chancen, dieses Reiseziel zu verkaufen. Also zum Beispiel, wenn ein Ziel wirklich heiß ist und die Leute wirklich wollen, um es zu gehen, dann vielleicht teilen Sie es direkt hier innerhalb des Zeugnisses mit echten Menschen, die tatsächlich gereist sind, wird es zeigen und geben ein bisschen mehr Interesse an diesem Ziel. Also gehen wir mit 0, einer von vier. Und wir können hier Pfeile benutzen, also links und rechts. Und mit diesen Pfeilen können wir sie als Komponenten in XD erstellen, und dann können wir sie während unseres gesamten Designs verwenden. Was wir als nächstes tun können, ist vielleicht das Layout noch einmal aufbrechen. Also lassen Sie uns sehen, dass ich drei Karten wie diese einschließen kann. Und das kann so sein, so Menstruationsstil Mansuri. So zum Beispiel Wellness. Und sagen wir von und der Preis 998. Und das kann ein Bild im Hintergrund sein. Also habe ich Recht, es Bildbreite, zum Beispiel die Farbüberlagerung, oder acht oder so etwas. Wir können sagen, Kreuzfahrten hier und Skifahren hier. Für die Winterreisenden. Und zum Beispiel von 908 und von 998. Also genau das Gleiche. Dies sind Bilder mit der Farbüberlagerung. So können Sie hier sehen, ich breche einfach das Layout auf und lasse diese Seite aussehen. Ein bisschen interessanter für die Zuschauer. Zum Beispiel können wir schreiben Partner wie diese Websites haben Beschreibung und zum Beispiel, ein Logos direkt hier. Also, das sind Logos, die ich schulden. Und vielleicht können wir genau das gleiche Layout verwenden, das wir hier gemacht haben, aber einfach hochschalten. So Bild, Farbe. Und dann hier, zum Beispiel, Schreiben, gibt es eine perfekte Reise für alle. Ein bisschen Text und Call to Action, die besagt, erhalten Sie ein kostenloses Angebot. So können wir Adobe XD und Stacks verwenden, und wir können zum Beispiel dieses Layout erstellen und einfach kopieren und einfügen Sie es hier, diesem Abschnitt und einfach die Reihenfolge dieser Elemente innerhalb wechseln. Was wir als Nächstes tun können, ist beispielsweise Benutzern und Wechselkurs zu geben , denn das ist wirklich nützlich, besonders wenn Sie in andere Teile der Welt reisen und nicht Ihre Währung verwenden. Also Wechselkurs, sagen wir so. Also drei oder vier werden wir später innerhalb oder ausländischen Designprogrammen sehen, wir können uns den Euro einschließen, und zum Beispiel, britische gebunden. Dann werden wir sehen, was es hier ist. Also USD und wie viel ist Wort in Ihrer eigenen Währung? Gehen wir also zum nächsten Abschnitt, der zum Beispiel Q und a sein kann. So kann ich hier einen weiteren Abschnitt erstellen. Also bereiten Sie sich auf Ihre Traumreise vor. Und ein bisschen Text direkt hier und unten mit uns Kontakt. Habe ich. Und hier, was Sie tun werden, ist eine Frage zu erstellen, die wir ein Plus-Symbol verwenden, und wir werden eine Antwort wie diese erstellen. Und damit können wir sie zusammenbrechen. Also q plus Teiler, q plus und die breitere. Also hier, was sie tun können, ist tatsächlich auf dieses Plus-Symbol tippen. Es wird diesen Abschnitt öffnen. Dann wird es sich von Plus zu Minus oder zwei Akten drehen. Vielleicht können wir es drehen und dann, wenn sie dort tippen, wird es geschlossen und sie können eine dieser zusätzlichen Fragen öffnen und sie können mehr über das Thema erfahren. Alternativ können sie einfach hier auf „Kontaktieren Sie uns“ klicken und sich mit uns in Verbindung setzen. Und vielleicht können wir schreiben, auf dem Laufenden bleiben. Ein bisschen Text hier. Und wir können hier ein E-Mail-Opt-In-Formular erstellen. Also E-Mail und eine Schaltfläche, die sagt abonnieren. Und wir wollen nicht, dass es zu prominent ist, aber wir wollen immer noch, dass Benutzer hierher kommen und sich abonnieren. Schließlich bleibt die Fußzeile selbst übrig. Vielleicht können wir hier ein Logo einfügen. Wir können nav Elemente einschließen. Also sehe ich mir ein bisschen Zeit, sie aufzuschreiben. So Destinationen, Winter-Wellness, individuelle Kreuzfahrten über uns direkt hier, verteilen Sie es über die Seite. Vielleicht können wir einen Teiler einschließen. So schöne und einfache Trennwand wie diese. Und wir können zum Beispiel soziale Media-Symbole einschließen. So Facebook, Instagram und YouTube zum Beispiel, oder LinkedIn oder was auch immer die Agentur hat. Wir können hier das ursprüngliche Urheberrecht einschließen und hier können wir zum Beispiel in Begriffen schreiben. Also Milchherde, das ist unser Blick auf unsere Homepage. Wie Sie sehen können, wird es wirklich lang sein, aber es wird alle entscheidenden Elemente darin anzeigen. Also hier haben wir diese Abschnitte, die wir kopieren werden, wir werden neu organisieren. Sie werden ein wenig neu positionieren. Vielleicht können wir eine Standardkomponente erstellen und sie dann verschieben und neu positionieren auf unterschiedliche Weise, dass wir zusätzliche untergeordnete Komponenten aus dieser Hauptkomponente erstellen können . So kann es für uns während unseres gesamten Designs sehr nützlich sein. Wir können einfach kopieren und einfügen und vielleicht können wir zusätzliches Element zu ihm erstellen. Also da haben wir es. Im nächsten Video werden wir tatsächlich sehen, was passiert, wenn Benutzer auf eines dieser Ziele klicken. Also werde ich Ihnen zeigen, wie Sie das nach genau der gleichen Strategie erstellen können . 8. Paper 3: Jetzt lassen Sie uns voran und erstellen Sie einen Zielstrand. Und du kannst sogar hier schreiben, also diese Nation, genau das. Und lassen Sie uns einen kurzen Überblick erstellen, wie wir es bei der Homepage getan haben. Das NEIN ist wie, dieses Teil leer zu lassen, weil ich immer etwas habe, das mich daran erinnern kann. Also musste entweder etwas mit anderen Designern im Team oder mit meinen Kunden oder mit den Entwicklern teilen . Es ist also immer praktisch, etwas genau hier oder sogar sich selbst zu haben, wenn Sie diese Wireframes erstellen und dann in ein paar Monaten oder so etwas zu ihnen zurückkommen . Also, was wir zuerst tun werden, ist genau das gleiche wie bei früheren Beispielen. Das wird also unsere Navigation sein. Vielleicht können wir einen Heldenbereich einschließen und sagen wir, dass die Nutzer auf der vorherigen Seite auf ein Pariser Angebot getreten sind, das die Homepage war. So können wir in so etwas wie CT der Liebe schreiben, Paris mit dieser schönen großen Schrift und vielleicht einem Knopf, der sagt jetzt erkunden. Und vielleicht, wenn Sie auf diese Schaltfläche „Jetzt durchsuchen“ tippen, kann es sie dann zum nächsten Teil der Seite bringen, was in diesem Fall ein Informationsteil für diesen bestimmten Ort wäre. So können wir etwas schreiben wie Paris besuchen. Wir können hier eine Beschreibung hinzufügen. Also über und dann Text darüber, Aktivitäten. Und dann können wir zum Beispiel verschiedene Icons hier einbinden. So Symbole. Und diese Symbole können so etwas wie Sightseeing-Museen sein oder weil es ein Paris vielleicht River Cruises ist, Radfahren, Essen Gott Orte, um so etwas zu sehen. Darunter werden wir Top-Angebote von Paris haben, die sich von all diesen anderen Angeboten abheben, entweder in Bezug auf den Preis oder in Bezug auf die Popularität oder was auch immer sonst. Und hier können wir alle diese verschiedenen Filter einschließen, aus denen Benutzer wählen können. So können wir fünf von ihnen haben, zum Beispiel, und vielleicht einen Knopf hier am Ende. Also lasst uns mit sechs gehen. Also 1, 2, 3, 4, 5 und dann 6. Dies kann angewendet werden. Und mal sehen, vielleicht können wir sie nach Preis, Dauer wechseln. Also lassen Sie uns hier ein Kalendersymbol verwenden. Aktivitäten. Also noch einmal, in dieser Person zu Fuß oder so etwas, Ausflüge. Also lassen Sie uns mit einem Zeichensymbol gehen. Also links und rechts zum Beispiel, irgendwann tat ich es. Und schließlich eine Bewertung. Und dann kann ich sogar so etwas schreiben. So Bewertung von Exkursionen, Aktivitäten. Und das ist Dauer. Und das ist Preis. Also, was wir dann haben unsere Hotels, die gut mit diesen Filtern übereinstimmen, die Sie hier gewählt haben. So können wir genau das gleiche Layout haben, aber ein bisschen aufwändiger, denn hier haben wir zusätzliche Informationen, einschließlich innen. Also, was ich tun kann, ist eine Karte wie diese zu erstellen, die die gesamte Breite unserer Website umfasst, weil wir hier viel Platz haben. Also, was wir ein Bild hier einschließen können. Dann können wir hier oben eine Bewertung hinzufügen. Und wir können Hotelname sagen. Wir können Adresse direkt hier angeben. So wie das hier. Vielleicht können wir hier sogar eine Website einbinden. Also werden wir sehen, dass, wenn wir anfangen zu entwerfen, dies die Beschreibung und dann 14 Tage sein kann. Und das können die Symbole sein. So sehe ich n und diese Symbole können die gleichen wie auf der Homepage sein. So zum Beispiel, wie können Sie zu diesem Hotel kommen? Sie können entweder fliegen, varchar, mit dem Zug oder mit dem Auto oder so etwas. Und dann werden wir einen Preis einschließen. So 1290, zum Beispiel, von und hier werden wir den gleichen Horroreffekt mit dem gleichen Pfeil haben. Deshalb sage ich, dass Sie eine Karte erstellen und dann mehr von dort aus erarbeiten können. Dann können wir so etwas wie Typ 4 oder so etwas schreiben. Und wir können haben, zum Beispiel, Load More Button darunter oder so etwas. Dann können wir tatsächlich Abschnitte von der Homepage verwenden. Also werde ich das wirklich benutzen. Es gibt also eine perfekte Reise für jedermann. Mehr steuerfrei. Zitat. Dann werden wir Austauschgruß haben. Mein Dad. Und Sie erinnern sich, ich habe einfach drei verschiedene Boxen die den US-Dollar Euro und zum Beispiel das britische Pfund angegeben haben. Und sie können nach links und rechts gehen und scrollen und alle diese Währungen sehen. Und dann können wir Q und einen Abschnitt hier haben. Also Q und a, um die Dinge ein wenig zu beschleunigen, ich werde es nicht zeichnen, weil es genau das gleiche wie auf der Homepage sein wird. Also hier können wir in der Schleife bleiben und wir können diese beiden Felder haben. So abonnieren Sie E-Mail. Endlich, genau hier unten, anstatt alles zu zeichnen, werden wir die Fußzeile haben. Also da haben wir es. Wir gingen voran und bereiteten diese Seite vor. So wie Sie sehen können, es ist ganz einfach, Es ist ziemlich einfach. Als Nächstes werden wir tatsächlich eine Seite erstellen, die uns führt, wenn sie auf eines dieser Angebote klicken. Es wird sie auf eine spezielle Hotelseite bringen. Und auf dieser Seite können sie weitere Features erkunden, wie zum Beispiel, was das Hotel zu bieten hat, was zu Zimmern zu bieten hat? Welche Annehmlichkeiten sind in den Zimmern wie Wi-Fi, Klimaanlage, Mini-Kühlschrank, und so viel mehr Details enthalten. Wir werden damit im nächsten Video herumspielen. 9. Paper 4: In Ordnung, also nächste Seite, wie ich schon sagte, wird Angebot ausgewählt werden. Also lasst es uns hier aufschreiben. So ausgewähltes Angebot. Und ich werde einen Umriss erstellen. Das gleiche, wie ich es vorher getan habe. Aber wir werden etwas Ähnliches wie die Homepage tun, weil wir viele dieser zusätzlichen Abschnitte hier auf der Seite haben werden. Also zuerst, wir werden unseren Nutzern Bilder von diesem Hotel zeigen. Das kann also entweder ein Hotelzimmer sein oder wie das Hotel selbst aussieht. Beginnen wir also mit unserem Logo und unserer Navigation. So wie für alle diese zusätzlichen Seiten neu erstellt. Und lassen Sie uns so etwas wie 1234 oder fünf verschiedene Bilder erstellen. Und das können wir hier einbeziehen. Und wir können zum Beispiel Links- und Rechts-Pfeile einschließen, so dass Benutzer nach links und rechts durch diese Bilder blättern können. Und wie gesagt, kann dies entweder von einem Hotelzimmer oder vom Hotel selbst sein. Beginnen wir also mit den Hotelinformationen. Also fangen wir mit einer Bewertung an. Sagen wir mal, das ist ein Fünf-Sterne-Hotel. Name des Hotels. Zum Beispiel können wir hier eine Website einbinden. Und wir können, zum Beispiel, eine Beschreibung dieses Hotels hinzufügen. Also, wann wurde es gebaut? Wie lange dauert es, bis du dorthin kommst und so was? also nach unten ziehen, werden wir Hotelfunktionen wie diese einbeziehen. Und wir werden diesen Abschnitt in zwei Abschnitte aufteilen. Denn genau hier auf dieser Seite werden wir einen klebrigen Abschnitt haben, was bedeutet, dass dieser Abschnitt, ungefähr so groß sein wird, sich nicht bewegen wird. Und innerhalb des Todesabschnitts, werden wir verwenden, was alle diese anderen Websites tatsächlich verwendet. Also werden wir Informationen wie Check-in, Check-out, Zimmertyp, wie viele Erwachsene, wie viele Kinder und solche Sachen verwenden. Also lasst uns das sofort schaffen, damit es uns nicht von all diesen anderen Diensten ablenkt. Also einchecken, auschecken. Wir werden eine Zimmerkategorie haben. Und zum Beispiel können wir ein Plus-Symbol hinzufügen, so dass sie hier zusätzliche auswählen können. So können sie mit einem Zimmer gehen, Gräbern, drei Zimmern, so was. Dann werden wir so etwas wie Erwachsene haben. Und sie können 12 oder drei Kinder wählen. Gleiche Dinge. Sie also keinen Namen ein. Dann werden wir Dienst haben. Sagen wir also alles inklusive. Exkursionen. Und diese können zum Beispiel alle heruntergelassen werden. Also sag keine Kinder, Erwachsene. Diese Drop-Downs werden es uns ermöglichen, mehr Informationen enthalten zu haben. So können wir in Exkursionen zum Beispiel in Museen schreiben. Und schließlich können wir insgesamt haben. So 1290 zum Beispiel. Und wir werden jetzt ein schönes großes Knopf-Singbuch haben. Und die Vernunft. Und das wird so sein, ist zum Beispiel, dies kann ein klebriges Menü sein, wie ich sagte. So kann dieser Abschnitt scrollbarer Abschnitt sein. Und sobald sie tatsächlich mit dem Scrollen in diesem Abschnitt beginnen, können sie all diese verschiedenen Informationen sehen, die darin enthalten sind. Aber dieser Abschnitt, der klebrig Abschnitt sein wird, wird mit ihnen Schritt halten, egal wo sie auf diese Seite scrollen. So, wie ich sagte, Hotel-Funktionen, können wir verschiedene Symbole enthalten. Dann können wir eine Zimmerkategorie einschließen. Und zum Beispiel können wir zwei oder drei verschiedene Räume haben, also besitze ich keinen. Ich möchte auf drei hinzufügen. Und das können Bilder von diesen Räumen unten sein. Wir können so etwas wie eine Ausstattung haben. Wie ich schon sagte. So können wir verschiedene Symbole einschließen. So zum Beispiel für Klimaanlage, für einen Mini-Kühlschrank, für eine Bar, Wi-Fi, solche Sachen. So können wir unten verfügbare Dienste haben, zum Beispiel Dienstleistungen. Und im Inneren von DAT können wir, zum Beispiel, entweder Brot und Butter, Bed and Breakfast. Also kann ich und B, und B oder, und dann Beschreibung. Und hier können wir so etwas wie alles inklusive und Beschreibung haben. Und Sie können sehen, wenn Sie anfangen, alle diese Informationen zu addieren , wird wirklich lang sein. So weiter. Daher ist es wirklich nützlich, diesen klebrigen Teil Ihrer Seite zu haben. Zum Beispiel, Dan, unten, dass wir etwas wie Reiseplan enthalten können. Und lasst uns sehen d eins und dann Beschreibung, die beiden und dann Beschreibung und Bewegung entlang. Wie viele Tage haben Sie tatsächlich einen Streifen. So können wir unter die verfügbaren Ausflüge fallen. Und wir können verschiedene Icons für verschiedene Ausflüge haben, die tatsächlich verfügbar sind. So kann ich zum Beispiel dieser Seite so teilen. Nur damit wir wissen, dass dies tatsächlich scrollbarer Bereich ist und dies der feste Bereich ist. Also können wir so etwas wie, ich weiß nicht, vielleicht über Hotel oder so etwas haben. Also lasst uns mit über die Lage gehen. Und zum Beispiel können wir eine Karte von diesem Standort und dann Beschreibung direkt hier unten einfügen. Also können wir etwas sagen wie Preis beinhaltet und wir werden das hier tatsächlich setzen, so dass ich keinen zusätzlichen Abschnitt schreiben muss. Also der Preis beinhaltet, und lasst uns das so einbringen. Also der Pfeil hier. Der Preis beinhaltet also. Und dann können wir zusätzlichen Text über das, was im Preis enthalten ist, setzen. Und zum Beispiel können wir in so etwas wie Baumwolle eigene Nutzungsbedingungen schreiben oder irgendwann, die mir versprochen werden. Innerhalb dieser Agentur kann sehen, was enthalten ist, was nicht, und zum Beispiel, was nicht enthalten ist. Und dann können sie auch dort Schulden schreiben. Im Grunde, abgesehen von diesem, scrollen sie nach unten, es wird genau das gleiche sein. Also lassen Sie uns zu diesem Abschnitt am Strand gehen. Und lasst uns hier etwas schreiben. Also, wenn das Scrollen nach unten an diesem Teil der Seite vorbei und passieren, tatsächlich, was sie begrüßen wird, ist genau das gleiche Setup wie auf der vorherigen Seite. Also, was wir werden ein Bild mit einer Farbe haben, perfekte Reise mit Schriftzug. Zitat. Dann werden wir mit diesen drei Tauschnoten haben. Und Sie können hier sehen, warum ich Stift und Papier benutze , weil Sie deutlich sehen können, wie schnell das ist. Und es gibt keine Möglichkeit, dass Sie dies schneller in jeder Art von Software machen können, anstatt nur auf ein Stück Papier zu schreiben. Deshalb liebe ich Menschen, die so sehr einrahmen. Hier werden wir Q und a haben. Also genau den gleichen Abschnitt wie an jedem anderen Strand. Bleiben Sie auf dem Laufenden. Und wie üblich, werden wir E-Mail mit einem E-Mail-Symbol und Abonnieren Button direkt hier haben . Und schließlich werden wir die volle Amtszeit haben. Also Milchherde, das ist RPG. Also, sobald sie auf das Ziel klicken war das wählen, welches Ziel sie eigentlich wollen, dann können sie auf diese Seite gehen, die ihnen alle zusätzlichen Informationen über das Hotel geben wird , über das sie wissen müssen? Und von hier aus, aus diesem klebrigen Abschnitt, der jetzt Buch hat können sie auf das Buch klicken, das wird uns zum nächsten Perlenritual gehen zu entwerfen und zu erstellen, was die Zahlungsseite ist. Und innerhalb dieser Seite werden wir tatsächlich auf drei verschiedene Seiten aufschlüsseln. So wird es für unsere Benutzer viel einfacher und viel schneller für sie zu überprüfen, zu bezahlen und den separaten Weg zu gehen. 10. Paper 5: Wie gesagt, die nächste Seite und der endgültige pH-Wert für uns ist die Zahlungsseite. Also lassen Sie es uns wirklich schnell erstellen. Also lasst uns voran springen und diesen Umriss erstellen. Aber anstatt diesen Umriss als Ganzes zu erstellen, wie gesagt, lassen Sie mich schnell Zahlungen schreiben, weil die Navigation dafür gleich bleiben wird. Und das. Scheint so, als hätten wir es erschaffen. Und hier, was wir erstellen werden, zum Beispiel Reisedetails. Mein Dad. Und wir wollen einen völlig weißen Hintergrund erstellen, weil wir nicht wollen, dass unsere Benutzer abgelenkt werden und diese Seite verlassen, weil wir eigentlich wollen, dass sie ihre Bestellung abschließen. Deshalb werden wir so etwas tun. Zahlung. Und schließlich, Bestätigung. Und das ist entweder ein ausgewähltes und diese beiden sind ausgegraut oder das ist dunkler. Und so können sie es wirklich schön sehen und diese können großartig draußen sein. Also innerhalb der Reisedetails, was wir erstellen können, ist eine Art Karte, wie wir es zuvor getan haben. So Bild, dann können wir eine Bewertung Hotel. Und dann können wir zum Beispiel einschließen. Also die gleichen Informationen wie auf dieser Karte. Dies kann also ein Ziel oder eine Adresse sein. Und hier haben wir alle Informationen, die die Benutzer gewählt haben. So zum Beispiel auch Menschen. Und zum Beispiel, plus eine, die für das Kind zu Hause Typ ist, die zum Beispiel das Zimmer Nummer eins ist und gehen Sie mit dieser Art von Nummer eins Service oder inklusive. Und schließlich Ausflüge? Ja. Und sie können mit der Agentur über diese Ausflüge zustimmen. Vielleicht können wir hier einen Teiler haben und sagen wir 14 Tage. Gleiche Symbole wie wir hatten, und insgesamt 1280 zum Beispiel. Und das ist im Grunde unser erster Schritt. Wir werden den nächsten Schritt machen, nämlich die Zahlung. Und das werden wir jetzt erschaffen. Deshalb sagte ich, stellen Sie sich das als Abschnitt vor. Also lasst es uns hier runter bewegen. Also werde ich das Gleiche haben. So Reise und Details, Zahlungsbestätigung. Und jetzt wird die Zahlung tatsächlich ausgewählt und diese beiden werden ausgegraut sein. Es wird also ziemlich einfach für Benutzer sein zu navigieren, da sie im Grunde nur einen Abschnitt haben und wir ihn später in XD animieren werden. Um zwischen diesen drei verschiedenen Abschnitten zu wechseln. Also für die Zahlung selbst, können wir haben, zum Beispiel, Name des Karteninhabers, und wir können Feld hier haben. Also Name. Dann können wir die Kartennummer haben. Und wir können hier eine Nummer haben. Also 1, 2, 3, 4, 5, 6, 7, und so weiter. Wir werden Verfallsdaten haben. Also, wann läuft der Warenkorb ab? Und 12 bis 24, zum Beispiel. Und schließlich CVC, das ist die Nummer auf der Rückseite Ihrer Karte, so 123 und oder B Breite, PayPal zum Beispiel, oder jede andere Option, die die Agentur wird zu unterstützen. Wir werden den P Now Button hier haben, der sie dann auf die Bestätigungsseite bringen wird, offensichtlich. Also jetzt lasst uns das nochmals notieren. Also Truppendetails, Zahlung und schließlich Bestätigung. Und für die Bestätigung, Lassen Sie uns es wählen. Und hier können wir eine AACN haben, die eine Abkürzung für Icon ist. Ihre Reise wurde gebucht. Haupt dat. Und hier können wir zum Beispiel zwei Textzeilen haben. Und dann können wir zwei verschiedene Knöpfe haben. Also zurück zu Hause, zum Beispiel, mit dem Home-Icon hier, können wir ein PDF-Symbol haben, zum Beispiel Download-Quittung. Denn zum Beispiel sollten Sie diese Quittung in Ihrer Agentur oder am Flughafen oder so etwas vorweisen . Oder vielleicht, wenn Sie an Ihrem Ziel im Hotel ankommen. Vielleicht brauchen sie dich, um sie dort zu zeigen. Deshalb ist der empfangene Download wirklich nützlich. Und Sie können es auch als PDF ausdrucken, oder so etwas. So können Sie es mit Ihnen auf Ihrer Reise mitnehmen. Unter all diesen Informationen, wie ich bereits sagte, stellen Sie sich dies nur als einen einzigen Abschnitt vor. Also unter diesem einzelnen Abschnitt mit drei verschiedenen Bereichen darin, werden wir normale Sachen haben, wie wir es auf vorherigen Seiten getan haben. Also werden wir ein Bild mit der Farbe und der perfekten Reise haben, richtig? Der Text. Zitat. Wir werden Wechselkurs haben. Und wir werden diese drei haben. Wir werden Q haben und eine meine Notizen abonnieren. So gleichen Abschnitt, so dient Web-E-Mail-Box und schließlich Fußzeile, rechts hier unten. Da haben wir es, und das sind unsere Drahtmodelle. Und wenn ich mich ausstrecken und ausstrecken und meine anderen Wireframes und Schulden bekommen , die wir während dieser paar Videos erstellt haben. Also hier haben wir Angebote ausgewählt. Hier haben wir ein Ziel. Hier haben wir unsere große Homepage, und hier haben wir diese Seiten, die wir erstellt haben. Insgesamt können Sie sehen, wie schnell dieser Prozess ist, wie schnell er ist. Du brauchst keine ausgefallene Ausrüstung. Sie brauchen keine ausgefallene Dicke und Sortierung von Papier. Sie brauchen keine Lineale, Sie brauchen keine Art von Markern, spezielle Stifte und Bleistifte und vieles mehr. Du brauchst nur das normale, alte, schlichte Stück Papier. Du brauchst einen Bleistift oder einen Stift, was auch immer du wählst. Ich habe mich für dieses schwarze entschieden, nur damit ihr es besser gegen das weiße Stück Papier sehen könnt , aber ihr könnt alles wählen, was ihr wollt. Nun ist der nächste Schritt für uns, dass Sie ein Bild von all diesen Wireframes machen können, das Bild dann auf Ihren Desktop bringen und es einfach per Drag & Drop auf Adobe XD ablegen können. Oder wenn Sie einen Scanner wie einen Hub haben, können Sie diese Seiten einzeln scannen und sie dann einfach als Bilder auf unserem Desktop speichern und dann einfach per Drag & Drop Adobe XD ziehen, damit Sie sie als Referenzen verwenden können. Sie müssen das nicht tun, wenn Sie dies nicht mit Ihren Kunden teilen, aber wenn Sie Ihre Datei mit den Kunden oder mit den Entwicklern oder Teamkollegen oder solchen Dingen teilen , dann ist es wirklich nützlich, diese Option in Adobe XD, nur damit Sie sie entweder daran erinnern oder sich an diese Ideen erinnern können , die Sie auf Ihren Wireframes haben. Und das ist das Hauptmerkmal hier bei der wichtigen Takeaway aus diesem Papier-Drahtmodellprozess. Das sind nur Ideen. All das, was ich während dieses Prozesses erstellt habe, sind einfach nur einfache Ideen. Also muss nichts genau so aussehen. Und zum Beispiel werden einige dieser Seiten nicht so aussehen. Wir werden sie teilen und sie ein wenig später ändern, wenn wir anfangen, zu erstellen. Aber das ist der springende Punkt. Dies ist nur so, dass Sie Ihre Ideen wirklich schnell auf ein Stück Papier spülen können, schneller als Sie es mit jeder Software tun können. Und dann bringen Sie sie in Adobe XD oder Ihre Favoriten Autor und beginnen Sie dann von dort zu arbeiten. Also, das ist es im Grunde für diesen Abschnitt. Im nächsten Abschnitt, wie ich bereits sagte, werden wir dies in Adobe XD einbringen. Sie können Ihr Telefon verwenden, um ein Bild von jedem dieser sie von Ihrem Desktop auf Adobe XD zu bringen. Oder wenn Sie einen Scanner haben, wie ich, können Sie einfach scandium und dann speichern Sie sie auf Ihrem Desktop und bringen Sie sie in Adobe XD. Also sehe ich dich im nächsten Video. 11. Importieren von Paper: In Ordnung, jetzt, da unsere Papier-Drahtmodelle fertig sind, können Sie Ihr Telefon verwenden, um ein Bild zu machen und es so in Adobe XD zu bringen. Oder wenn Sie einen Scanner wie ich haben, können Sie ihn einfach scannen und auf Ihren Computer bringen und ihn dann per Drag & Drop in Adobe XD ablegen. Und genau das werde ich tun. Jetzt. Warum solltest du das sowieso tun? Nun, nur für den Fall, dass Sie dieses Papier Wireframes mit Ihren Kunden teilen möchten, mit Ihren Teamkollegen, mit Ihren Entwicklern, nur um ein schnelles Feedback zu erhalten. Solche Dinge sind selten passiert, weil diese normalerweise nur für Sie, um einige Ideen auf ein Stück Papier zu spülen , das Sie in Ihrem Kopf haben , wie im Erstellungsprozess erklärt. Aber nur für den Fall, dass einige dieser Leute diese Wireframes sehen wollen. Und um Ihnen das erste Feedback zum Layout selbst zu geben, können Sie sie so mit Ihren Kunden, Teamkollegen oder Entwicklern teilen. Also, um loszulegen, was ich hier habe, ist die Datei, die wir zuvor erstellt haben, und ich werde einfach meine Bilder vom Desktop auswählen, Drag & Drop sie hinein und Sie können sehen, wie sie aussehen. Also lassen Sie mich sie so auswählen und lassen Sie mich ziehen und positionieren Sie sie so. Und lassen Sie mich ein wenig näher hineinzoomen. Also lassen Sie mich sie durch 100 trennen. Ich werde das hier trennen, dann das hier. Das hier, und letztendlich dieses. Und lasst uns schnell durch sie laufen. Also, was wir hier haben, ist unsere Navigation. Und das wird für uns sehr nützlich sein. Gerade wenn wir anfangen, haben wir die Homepage und Sie können sehen und erinnern, dass diese lange Seite war , die wir mit all diesen verschiedenen Abschnitten erstellt haben. Dann, was wir haben, ist der Zielbildschirm. Wenn sie gehen, wenn sie auf eine von ihnen klicken und gehen Sie zu diesem Zielbildschirm. Von hier aus können sie das Angebot wählen, wenn Sie sich erinnern. So ausgewähltes Angebot, und dieses Angebot wird offensichtlich für das Hotel mit all seinen Funktionen sein. Schließlich, sobald der Klick gebucht und wählen Sie alle diese Optionen, es, sie werden hier auf den Zahlungsbildschirm gebracht werden , wo sie offensichtlich gut sind, um ihre Zahlung abzuschließen. Das ist es also für diesen Teil dieser Klasse und für diesen Abschnitt des Projekts. nächste Abschnitt wird eigentlich sein, wir werden anfangen, Wireframes hier in Adobe XD zu erstellen, indem wir diese als unsere Referenzen verwenden. Deshalb haben wir sie in erster Linie erstellt. Nur eine letzte Sache, die man beachten muss. Wenn Sie möchten, können Sie diese in Papierform behalten. Wenn nicht, können Sie sie einfach wegwerfen und sie direkt hier in Adobe XD wieder haben, wenn Sie sie teilen möchten, weil es ganz einfach ist, sie zu teilen, wählen Sie einfach einen Klick Control E. Ziel, können Sie wählen, zum Beispiel, PNG oder JPEG, was Sie wollen, drücken Sie Exportieren, und dann können Sie sie einfach mit Ihrem Client teilen. Oder alternativ, wie du es tust, hast du ein Bild mit deinem Handy geschnappt, du hast sie reingebracht oder du scannst sie so wie ich es getan habe. Und dann können Sie ihnen einfach diese Scans senden und sie können das Feedback zu Schulden geben. Also im Grunde, wie gesagt, sind dies nur der Ideenprozess. Diese sind da, um einige Ideen auf ein Stück Papier zu spülen und jetzt kommt der eigentliche Teil mit Wireframes in Adobe XD. Und ich würde Sie immer ermutigen, wenn einige dieser Leute Sie nicht gebeten haben, ihnen diese Papier-Wireframes zu senden, dann beginnen Sie offensichtlich mit dem Feedback im via Framing Teil des Prozesses in Adobe XD, weil Sie tatsächlich die mit Ihren Kunden und Entwicklern verknüpfen und sie können sofort mit der Analyse Ihrer Entwürfe beginnen. Und dann können sie das erste Feedback zum ersten Entwurf geben, richtig? Trauen Sie sich, denn es ist viel einfacher und Sie können diese Links immer anklickbar machen. Sie können immer einige Interaktionen einschließen, einige Animationen dort, während Sie das nicht tun können, da dies nur die Papier-Drahtmodelle sind. Wie ich im nächsten Abschnitt sagte, werden wir mit Wireframes in Adobe XD beginnen. Also sehe ich dich dort. 12. Projektressourcen: Bevor wir in das Design springen und anfangen, daran zu arbeiten, möchte ich nur schnell erwähnte Ressourcen, denn jedes einzelne Projekt, das Sie erstellen werden, werden Sie einige Ressourcen benötigen. Und in diesem Projekt und in dieser Klasse verwende ich Premium-Ressourcen von Envato Elements. Sie werden diese Ressourcen innerhalb der Datei erhalten , so dass Sie sie für Lernzwecke verwenden können, aber Sie dürfen sie nicht in irgendeiner Art von persönlichen oder kommerziellen Projekten verwenden , weil Sie dafür bezahlen müssen. Ich glaube, der Link unten in der PDF zu dieser Sammlung, die ich verwende. Wenn Sie also Envato Elemente in erkunden möchten, falls Sie sie zum Beispiel für Ihr Portfolio-Design oder für die Kundenarbeit verwenden möchten, müssen Sie diese Artikel kaufen. Aber für den Fall, dass Sie sie nur für Lernzwecke verwenden wollen, nur um diese Klasse zu folgen, ist das in Ordnung. Aber bitte teilen Sie sie nicht herum, weil Sie nicht über die Lizenz verfügen. Und das ist wirklich wichtig zu verstehen, denn wenn jemand Sie mit diesen Gegenständen ohne Lizenz erwischt, riskieren Sie eine mögliche Klage. Also bedenken Sie das im Hinterkopf. Jetzt möchte ich Ihnen diese Sammlung schnell zeigen, was enthalten ist und was Sie in Verwendung von Envato Elements herunterladen können. Hier ist die Sammlung, von der ich gesprochen habe. Wie Sie sehen können, verwende ich eine Premium-Schriftart und ich verwende eine kostenlose Schriftart. Ich benutze Poppins von Google-Schriftart als freie Schriftart. Und ich benutze diese Buck Soda von Envato Elements, die natürlich eine Premium-Schrift ist. Sie können auch größere Versionen dieser Bilder herunterladen, zum Beispiel von hier. Aber du wirst dieses Wasserzeichen oben auf all diesen Bildern bekommen. Also lass es mich aufmachen. Sie können sehen, dass Sie es direkt hier bekommen werden. Jetzt ist das wirklich wichtig und warum ich Envato Elemente für all meine Premium-Arbeit verwende. Sie können sehen, dass sie hier erwähnt haben. So fast sechs K in der Größe. Und auch die Sammlungen sind wirklich riesig, weil Sie diese fantastischen Sammlungen mit diesen Bildern sehen ziemlich ähnlich, weil und das ist der mittlere Schlüsselpunkt, warum ich mit einem Premium-Ressourcen oder die freien Ressourcen. Mit Premium-Ressourcen, vor allem mit Bildern, erhalten Sie diese Sammlungen. Dann können Sie Sammlungen desselben Fotografen verwenden, die in derselben Umgebung mit derselben Beleuchtung fotografiert werden, zwar am selben Tag mit derselben Ausrüstung. Diese Bilder sehen also extrem kohärent aus. Sie sehen aus, als gehörten sie zueinander. Anstatt alle diese zufälligen Bilder von freien Websites wie Unsplash zum Beispiel zu verwenden , endet mit Ihrer Website auf kohärente und suchen inkonsistent und wirklich amateurisch. Mit diesen Ressourcenkönnen Ihre Designs am Ende Premium aussehen, können Ihre Designs am Ende Premium aussehen weil Sie sie von dem gleichen Fotografen verwenden, wie ich sagte, in diesem extrem hochwertigen. Und das Gleiche gilt zum Beispiel für die Icons. Wenn ich also den ganzen Weg nach unten scrollen und zur letzten Seite dieser Sammlung gehe, können Sie sehen, wie viele sie sind. Sie können sehen, dass ich diese Premium-Symbole von diesem gleichen Kerl oder Person oder Firma, was auch immer, diese runden Symbole getan . Und Sie können sehen, dass diese Symbole wirklich so aussehen, als ob sie zueinander gehören. Sie können sehen, dass sie alle wie ein Teil derselben Sammlung aussehen, die sie sind. So sehen sie extrem Premium aus. Und wenn ich einige von ihnen öffne, können Sie alle diese Dateitypen sehen, in denen sie kommen. So können Sie wirklich wählen und wählen, was Sie wollen. Und Sie können sehen, dass alle in diesen genau den gleichen Dimensionen erstellt werden. So 1906 mit 96, was sie extrem einfach zu bedienen macht. Und wie Sie in unserem Design sehen werden, werden wir Umrissversionen sowie die farbigen Versionen verwenden, die noch einmal, Sie werden nicht mit einem dieser drei Symbole zu bekommen. Dasselbe gilt für die Illustrationen. Vor allem, wenn Sie etwas wie andro verwenden, das jeder einzelne Designer auf dem Planeten sieht aus, als würde er jetzt verwenden, nur weil es kostenlos ist. Don, tu das. Wenn Sie Ihre Designs poliert und professionell aussehen lassen möchten, stellen Sie sicher, dass Sie diese Premium-Services wie Envato Elements nutzen. Sie müssen es nicht verwenden, aber ich mag es wirklich, weil im Gegensatz zu so etwas wie ein riesiges Gewicht, zum Beispiel Weizen Envato Elemente, Sie bekommen nicht Download tägliche Grenzen, so können Sie so viele Artikel herunterladen, wie Sie wollen, wo immer Sie wollen. Aber mit so etwas wie, UH, zum Beispiel, beschränken sie dich auf etwas wie 18, vielleicht vier oder acht Gegenstände pro Tag. Was passiert also, wenn dieser Artikel zum Beispiel nicht gut passt, was viel passiert. Und Sie werden sehen, dass, wenn Sie anfangen zu entwerfen, dann stecken Sie fest. Sie müssen auf morgen warten, um etwas anderes herunterzuladen und zu verwenden. Aber mit Envato Elements, können Sie einfach die gesamte Website herunterladen, wenn Sie heute wollen, und verwenden Sie sie einfach in Ihrem Projekt. Wenn es um die Lizenzierung geht, ist es extrem einfach zu bedienen. Also lassen Sie uns sagen, dass ich meine eigenen Ds-Icons verwenden möchte. Zum Beispiel. Ich klicke einfach auf den Download und ich kann einfach hier eintippen. Zum Beispiel, Reisen, ein Reisebüro, das ist dieses Projekt. Ich kann einfach darauf klicken, Hinzufügen drücken und herunterladen, und das ist es im Grunde. Innerhalb dieses Downloads. Wenn Sie hier zu Ihren Downloads gelangen, werden Sie mit einer Lizenz abgedeckt, damit Sie diese Lizenz mit Ihrem Kunden teilen können. Und sie sind abgedeckt, nur für den Fall, dass sie diese Artikel irgendwo sonst online oder im Druck für ein Viertel verwenden müssen, was auch immer sonst. Also bekommen Sie diese Lizenz für sich selbst und Ihren Kunden abgedeckt, was eine weitere tolle Sache an Envato Elementen ist. Und nicht nur verdammt, sondern Premium-Services im Allgemeinen ist, dass Sie mit einer Lizenz abgedeckt sind, aber wenn Sie diese kostenlosen Artikel herunterladen, würden Sie nie wissen, ob jemand anderes den Premium-Artikel heruntergeladen hat, zum Beispiel, und dann riskierst du diese Klage. Stellen Sie also sicher, dass Sie sich mit all diesen verschiedenen Lizenzen und Artikeln vertraut machen. Wie sie sagten, Sie werden alle diese Elemente , die wir innerhalb des Designs verwenden, erhalten . Aber stellen Sie sicher, dass Sie sie für Lernzwecke verwenden. Nur um dieser Klasse zu folgen. Wenn Sie sie irgendwo außerhalb für Ihr Portfolio nutzen wollen, für Ihre Kundenarbeit, müssen Sie für sie bezahlen und sie für sich selbst lizenzieren, wie ich Ihnen gerade hier gezeigt habe. Eine letzte Sache, die ich durchlaufen wollte, bevor wir mit dem Design übergehen, ist, dass ich Ihnen zeigen möchte, was in Envato Elementen selbst enthalten ist. So können Sie genau hier alle diese verschiedenen Kategorien sehen. Also Stock Video-Vorlagen, Musik, die ich für diese Klassen verwende, sowie meinen YouTube-Kanal, Soundeffekte, Grafikvorlagen. Sie können UX- und UI-Kits sehen, und es gibt Tausende von ihnen, die Ihnen helfen, Ihren Workflow zu beschleunigen. Grafikpräsentationsvorlagen, Fotos, Schriftarten, Pfeile, Webvorlagen und weitere Kategorien. Nun, wenn es um Fotos geht, haben sie ihre eigenen Fotos, die im Grunde dieses sind. Aber Sie können auch auf die Website namens 2020 gehen für 50 Millionen zusätzliche Fotos oben auf all diesen Fotos hier auf Envato Elemente, weil sie diese Website besitzen. Und innerhalb von mehr Kategorien können Sie CMS, Vorlagen, WordPress, 3D sehen , und sie haben auch ihre E-Books und Klassen. Also im Grunde ist es, wenn es um die Lizenzen geht, wenn es um diese Dateien geht und was ich für einen Tageskurs verwende. Jetzt wissen Sie, dass Sie diese Elemente, die in der Datei enthalten sind, nur für Lernzwecke verwenden können. So können Sie entlang dieser Klasse folgen und Sie können alle diese Elemente erstellen. Aber falls Sie sie in Ihr Portfolio aufnehmen möchten, oder noch schlimmer, falls Sie mit Ihrem Kunden arbeiten möchten, müssen Sie sie kaufen. Oder Sie können einfach dieses Layout verwenden, das wir in dieser Klasse erstellt haben und einfach auf Ihre eigenen Bilder, Ihre eigenen Symbole und Ihre eigenen Elemente hinzufügen , damit Sie es für diesen Zweck verwenden können. Also lasst uns jetzt weitermachen. 13. Stil-Leitfaden erstellen: Gehen wir nun zu den Drahtmodellen in Adobe XD. Aber bevor wir es tun, müssen wir schnell einige Dinge beenden. Zuallererst müssen wir einen Styleguide erstellen. Und der Styleguide ist großartig, denn im Inneren wird es eine Sammlung von Bildern, von Symbolen, verschiedenen Farben, Schriftarten, Schriftgrößen und Schriftkombinationen geben, und jedes andere Element, das Sie wollen, für beispielsweise Schaltflächen, Schieberegler, alles andere kann innerhalb dieses Styleguide sein, was sowohl für Sie als auch für Ihre Teamkollegen äußerst nützlich ist, weil siediese Elemente einfach aus diesem Styleguide kopierenund diese Elemente einfach aus diesem Styleguide kopieren Ihre -Clients, da sie leicht alle Elemente betrachten können, die Sie in Ihrem Design verwendet haben. Schließlich, und vor allem für Ihre Entwickler, weil sie leicht einen Blick und Export von dort, wenn sie wollen. Aber Sie werden später Features exportieren. Und ich werde mit Ihnen einige Möglichkeiten teilen , wie Sie Ihre Dateien mit Ihren Entwicklern teilen können. Aber das ist nur eine von ihnen und dies ist nur eine der Optionen, die Ihnen in Adobe XD zur Verfügung steht. Bevor wir nun zum Styleguide und zu den eigentlichen Wireframes in Adobe XD übergehen. Ich wollte nur schnell mit Ihnen die anderen Produkte teilen, die wir auf einem Web-Donut haben. Und wir haben auch UX, UX Kinder, die im Grunde Wireframing Kits sind und Sie können diese verwenden, um Ihren Workflow zu beschleunigen. Jetzt müssen Sie diese nicht für dieses Projekt verwenden, aber Sie können sie für Ihre eigenen Projekte in der Zukunft verwenden, sowohl privat als auch kommerziell, wenn Sie es wissen möchten. Ich sage nur, dass dies nur eine Option für Sie ist, wenn Sie möchten, aber es ist nicht obligatorisch für diese Klasse. Also, was wir hier haben, sind all diese verschiedenen UX Kinder. Und auch wir haben UI-Kits, die im Grunde das gleiche sind, aber mit Included echten Texten und Breite enthalten Bilder innerhalb. In uns Kinder in der Regel ist dies nur ein Dummy-Text und in der Regel so etwas wie Lorem Ipsum Text oder so etwas enthalten sein. Aber innerhalb der UI-Kits gibt es einige echte Elemente. Sie können dies mit einem Abonnement bekommen oder wenn Sie noch besseres Angebot wollen, könnte ich vorschlagen, dass Sie auf meine eigene persönliche Website gehen. Und übrigens, ich werde die Links zu allem, worüber im PDF sprechen, lassen und Sie können darauf mit allen Rabatten zugreifen, die ich zuvor erwähnt habe. Und hier können Sie sehen, dass alles an einem Ort ist. Wir haben Kurse und wir haben Mitgliedschaft. Und natürlich sind diese Pakete viel besser. Dann indem Sie einfach meine Website besuchen. Sie haben auch jeden Monat einen 30-minütigen Coaching-Anruf mit mir. Sie haben auch private Facebook-Gruppe. Also, wenn das etwas ist, das Sie interessiert, traf ich mich, fordere Sie auf, es zu überprüfen und alle diese Produkte in all diesen Kursen für sich selbst zu bekommen , wenn Sie interessiert sind, natürlich habe ich auch einen YouTube-Kanal und ich werde es darin verknüpfen PDF auch. Sie können es auschecken, wenn Sie zusätzliche Inhalte wünschen, aber wenn nicht, gehen Sie schnell zu Adobe XD. Und ich möchte Ihnen zeigen, was im Styleguide enthalten ist und was wir verwenden werden. Also hier sind wir in Adobe XD, und wie Sie sehen können, haben wir hier das vorherige Video aufgehört. Also im Grunde haben wir Design kurze Vorlage. Wir haben dieses Stimmungsbrett und wir haben Papierdrahte. Bevor wir nun zu Wireframes in Adobe XD übergehen, ist der Styleguide eine nützliche Sache. Es ist nicht zwingend erforderlich, vor allem, wenn Sie gerade mit diesen Projekten beginnen. Offensichtlich. Oft haben Sie nicht die Farben, Sie haben nicht die Schriftarten, Sie haben nicht die Symbole, Sie werden nur bekommen sie. Aber in diesem Fall, weil ich dieses Projekt bereits erstellt habe, werde ich mit dem Styleguide beginnen. Jetzt ist Styleguide immer weiterentwickelt Sache. Wenn Sie also durch Ihr Projekt fortfahren, Sie mehr und mehr Ressourcen innerhalb erhalten, zum Beispiel Bilder, verschiedene Hintergründe, Schatten, verschiedene Symbole, dann werden Sie diesen Styleguide viel mehr ausfüllen. Aber um loszulegen, können Sie damit beginnen, zum Beispiel einfach Typografie zu verwenden. Also, was auch immer Typografie Stile, die Sie haben, unabhängig von Typografie Farben, Sie können sie einfach in. Und natürlich können Sie in Adobe XD so etwas wie Komponenten erstellen, dass Sie sie später leicht ändern und aktualisierte Styleguide in Echtzeit. Also noch einmal, was wir hier haben, ist dieses Adobe XD-Dokument. Ich werde in mein Dokument springen, das ich bereits erstellt habe, und drücken Sie Control V, Control C, um es zu kopieren, und dann Control V direkt hier, um es darin einzufügen. Und wie Sie sehen können, gibt es hier einige Pannen. Lassen Sie mich das ein paar Mal rückgängig machen und lassen Sie mich reinspringen. Sehen wir uns Bibliotheken an. Und lasst uns hier reinspringen und 1920 unser Brett erschaffen. Ich weiß nicht, warum es das immer tut. Also lassen Sie uns das wirklich duplizieren. Und indem ich das tue, werde ich es hier unten positionieren. Ins Springen, nenn es Stil, geh so. Dann werde ich in mein Ebenen-Panel springen und alle von ihnen entfernen, einschließlich VG. Dann werde ich hier reinspringen und ihm 1920 mal 1080 geben, zum Beispiel Layout. Verwenden wir eine Rinnenbreite von 68. Ich denke, es wird gut. Hier. Ich werde tiefer Fettleibigkeit dieser Gitterlinien senken, um vielleicht sogar auf acht zu drehen. Es ist also nicht zu ablenkend, wenn du zusiehst. Ich denke, das ist gut. Und jetzt werde ich reinspringen. Zuerst werde ich tatsächlich eine Hintergrundfarbe für diesen Styleguide anstelle von Weiß verwenden , nur damit Sie alle diese anderen Symbole sehen können, die nicht sind, die nicht auffallen werden. Also werde ich einfach alle diese Elemente kopieren und einfügen. Hier sind sie. Und im Grunde ist das alles, das ist unser Styleguide. Dies sind die Symbole, die wir verwenden werden. Also im Grunde sind dies alle Symbole, die ich mit Ihnen in der Envato Elements Sammlung teilen . Und im Grunde können Sie diese Symbole verwenden oder Sie können andere Symbole verwenden, die Sie online finden. Grundsätzlich liegt es an dir, was du tun willst. Wie gesagt, Sie müssen die Regeln über die Lizenzen befolgen, damit Sie sie nur streng für Lernzwecke verwenden können. Sie können sie nicht für jede Art von Kundenarbeit verwenden. Sowohl persönliche als auch kommerzielle Projekte sind verboten. Verwenden Sie sie strikt für Lernzwecke. Und lassen Sie mich hier reinspringen. Und lass mich zu Envato Elements gehen. Und Sie können zu meinen Artikeln gehen, nur um Ihnen diese Sammlung noch einmal zu zeigen, so dass Sie in der Lage sein werden, wie er sagte, auf diese Sammlung Link zugreifen wird in der PDF-Datei und einfach Zugriff auf Inkasso und durchstöbern, was ich eingeschlossen habe. Also im Grunde ist dies diese Sammlung, wie Sie hier sehen können. Sie können durch all diese verschiedenen Bilder blättern. Und Sie können diese Illustrationen bekommen, Sie können diese Icon-Packs bekommen. Und im Grunde, was ich getan habe, ist, dass Sie es in der Waschmaschine genau hier sehen können. Und wenn ich zurück zu unserer ursprünglichen Datei wechseln, wo es ist, Hier ist es. So können Sie sehen, dass ich einige Icons aus diesen Packs genommen habe und sie im Grunde hier einfüge. Was ich auch getan habe, ist das Logo zu verwenden. Wir haben den Standardzustand und wir haben den dunklen Zustand, der dieses Datum ist, und ich ziehe das hier hin, damit ihr es sehen könnt. Was haben wir auch unsere Zustände für diese Symbole. Also haben wir den Standardzustand, wenn wir wirklich genau hineinzoomen, denn dies ist das SVG-Symbol, Sie können sehen, wie schön es ist und wir haben auch den Umriss. Also vielleicht werden wir den Standardzustand verwenden. Vielleicht werden wir den Gliederungszustand verwenden. Ich ging gerade voran und entfernt von dieser Farbe aus dem ursprünglichen Symbol, um diesen Umrisszustand zu erhalten. Und Sie können sehen, dass wir für alle Staaten skizziert haben. Nun, eine letzte Sache, die wir tun werden, bevor wir tatsächlich anfangen, Wireframes in XD zu erstellen. Ich werde direkt hier zu meinen Komponenten springen. Und was ich tun werde, ist im Grunde wählen Sie alle von ihnen sind mit der rechten Maustaste und machen glocal, weil sie derzeit mit meiner ursprünglichen Entwurfsdatei verbunden sind , die ich zuerst erstellt habe. Aber ich möchte sie lokal machen und sie direkt hier anwenden , bevor wir tatsächlich mit dem Design weitermachen, was eigentlich tun will, ist, einige Farben zu probieren. Also, was ich tun werde, ist ein Rechteck wie dieses zu ziehen. So zum Beispiel, drei Spalten breit. Ich werde dafür sorgen, dass wir die Ecken nur ein bisschen abrunden, nur damit wir es etwas stilisieren können. Und wir werden das als weiße Farbe verwenden. Dann lassen Sie uns tatsächlich den Text verwenden. Legen Sie es dort hin. Und sagen wir, schlichte Tücher. Wie Schulden und bereit, Poppins dafür zu verwenden und Poppins 24 zu wählen, denke ich. Ich glaube, das funktioniert. Na ja. Er 6, Lassen Sie uns verschieben, zum Beispiel, 60. Ich habe Control D. Stellen Sie sicher, dass das richtig ausgerichtet ist und wir werden im Grunde den Hex-Code verwenden. Lassen Sie mich also schnell den Hex-Code aus dem Originaldokument kopieren und einfügen. Und das ist nur ein Hex-Code für diese weiße Farbe. Vergewissern Sie sich, dass es 40 ist, denn ich glaube nicht, dass es notwendig ist, bei 60 zu sein. Und lasst uns in unser Ebenen-Panel springen und dieses Farbfeld so nennen. Und ich organisiere sie auch gerne. Das ist natürlich Farbe. Legen Sie es hier hin. Das ist schlicht breit, das ist genau hier. Und schließlich, lasst uns all diese Control G gruppieren und ich werde sie Symbole nennen. Das wird offensichtlich ein Logo sein. Und später werde ich dieses Logo exportieren, das an dieser Stelle SVG-Datei ist, aber ich werde es später exportieren. Und ein Drag & Drop zwei weitere PNGs hier, weil wir es nach unten skalieren müssen. Und wenn Sie sich an dem Beispiel erinnern, das ich Ihnen gezeigt habe, als ich anfange, es nach unten zu skalieren wie Sie sehen können, weil dies drei Elemente sind. Sie skalieren nicht zu gut. Deshalb werden wir in kleineren Größen PNG anstelle von SVG verwenden. Also lasst uns jetzt weitermachen und einige andere Farben verwenden. Also lasst es uns hier positionieren. Farbmuster, Sie können es offensichtlich ein bisschen Gitter verwenden, aber ich werde nicht, ich werde es einfach so verwenden. Hoppla. Lassen Sie es uns so positionieren, nur um unser Raster wirklich schön auszufüllen. Die erste Farbe, die wir verwenden werden, ist hauptsächlich blau. So wie das. Ich werde Kopie von der Farbe selbst treffen. Und ich werde tatsächlich hier eingefärbt. Jetzt kann ich auf dieses Muster klicken und ich kann es als Komponente hinzufügen, oder ich kann einfach hier gehen, wo es Farben steht, klicken Sie hier und nennen Sie es einfach weiß. So wie das. Ich kann hier reinspringen, das auch hinzufügen, es Haupt blau nennen, so. Und dann kann ich weitermachen. Das wird schweben und blau sein. Und lassen Sie mich es schnell aus meinem Originaldokument kopieren. Offensichtlich werden Sie sich um diese Dateien kümmern. wählen sie einfach entweder aus Ihrem tatsächlichen Logo, aus Ihrem tatsächlichen Dokument, aus all diesen Symbolen aus diesem Moodboard, das wir erstellt haben. Also im Grunde gehen Sie Ihren Weg um diese zu arbeiten, weil ich sie bereits erstellt. Und um uns ein bisschen Zeit zu sparen, werde ich eigentlich einfach weitermachen und sie direkt hier erstellen. Also werden wir diesen dunklen Text oder noch besseren schwarzen Text nennen, oder nennen ihn fast schwarz. Ich werde diesen Textclip hier kopieren und einfügen, einfügen und ich werde es zu meinen Farben hinzufügen, fast schwarz. Und jetzt, weil wir alle gefüllt haben, Lassen Sie uns sie vor diesem DoubleClick duplizieren und unsere Zeichenfläche erweitern. Das ist es, was ich gesagt habe. Also offensichtlich wirst du diese Zeichenfläche groß sein, wie du brauchst. Geben wir ihm einen Platz von 80 unten. Und mal sehen, vielleicht kann ich jetzt zu dunklem Text übergehen. Vielleicht. Fügen Sie es hier und fügen Sie es hier ein. Und nennen wir es dunkelgrau. So wie das. Lassen Sie uns hier klicken, klicken Sie rechts hier. Ändern Sie seinen Namen so in dunkelgrau. Und wir werden diese Mittelgrau zum Beispiel nennen, oder hellgrau, wie Sie wollen. Und offensichtlich können diese Namen später von Entwicklern als Farb-Token verwendet werden. So leicht, weil es im Code viel einfacher ist, diese Farben zu sehen, dann sie so zu verwenden, wie sie hier sind. Schließlich, was wir gehen, um die Probe einige Farben zu verwenden. Also werde ich die Farbe dieses Sterns probieren, den Sie hier sehen. Also werde ich es Sternorange nennen, nur damit wir wissen, woher es kommt und wofür es verwendet wird. Also klicken Sie hier und da ist es. Klicken Sie, um es hinzuzufügen, benennen Sie es in Stern, Orange, so. Und schließlich werde ich eine weitere Farbe hinzufügen, die im Grunde nur von einigen dieser gesampelt werden wird und wir werden es später als eine im Grunde unterstützende Farben verwenden , so dass wir es für etwas anderes verwenden können und es einfach wissen nennen, Pfirsichfarbe so. Fügen Sie den Hex-Code ein und Sie können sehen, warum ich ihm diesen Namen gegeben habe. Schließlich lassen Sie es uns schnell hier hinzufügen. Ändern Sie den Namen. Derek Gewohnheit. Und schließlich, was wir an dieser Stelle tun wollen, ist, sie alle zu gruppieren. Mal sehen. Also lasst uns diese vier oben setzen. So wie so. Mal sehen, das ist die erste und das ist nur meine OCD. Sie müssen das nicht tun, aber ich mag es, die Dinge organisiert und gut positioniert zu halten. Also werde ich das hier setzen, das hier setzen, da haben wir es und gruppieren sie alle und nennen sie Farben. So haben wir es, Wir haben jetzt unsere Farben, wir sind in der Lage, sie zu probieren. Wir werden auch diese Poppins und eine andere Schriftart verwenden, die die Premium-Schriftart ist. Und Sie können es auf Envato Elements Sammlung erhalten, wenn Sie möchten. Wenn nicht, können Sie natürlich, wie er sagte, einige kostenlose Schriftarten finden, die gut mit der Premium-Schriftart übereinstimmen, die ich verwendet habe. Aber wenn nicht, wie gesagt, können Sie es einfach hier in dieser Sammlung finden und dann verwenden, wenn Sie wollen. Also, das war's vorerst. Wir werden jetzt mit der Erstellung von Drahtmodellen in Adobe XD fortfahren. Und ich werde Ihnen zeigen, wie wir diese Papier-Wireframes in einige Wireframes verwandeln können , die Sie tatsächlich mit Ihren Kunden teilen können , um ein richtiges Feedback zu erhalten. 14. Erstellen von Wireframes in Adobe Xd 1: In Ordnung, jetzt, da der Styleguide erstellt wurde, lassen Sie uns fortfahren und beginnen, unsere Wireframes in Adobe XD zu erstellen. Also das erste, was ich tun werde, ist klicken Sie auf meine Zeichenfläche, springen direkt hier, klicken Sie auf diese 1920 von 1080. Und schließlich geht es weiter, auf hier. Erstens, nur damit ihr das sehen könnt, lasst es uns auf acht senken, also ist es das gleiche wie dieses. Lasst uns in etwas Weites springen wie zum Beispiel 60. Das macht sie, um größer zu sein, was die Breite zwischen unseren Spalten und Spaltenbreiten ist, viel kleiner. Es ist also einfach, damit zu arbeiten. Und lassen Sie uns hier doppelklicken, nennen Sie es Heimatstrand. Und das erste, was ich eigentlich tun werde, ist den ganzen Weg nach unten ausgedehnt. Denn wenn ich hier reinspringe, kann man sehen, dass die Seite extrem riesig wird. Also lasst uns hier reinspringen. Und das erste, was wir eigentlich tun wollen, ist, ein Bild aufzunehmen. Und mal sehen. Wir können zum Beispiel ein Rechteck von 1920 x 1080 wie dieses schaffen, 1920 x 1080 und positionieren. Mal sehen, hier und hier. Lassen Sie uns die Grenze entfernen und geben wir ihr einen Eigennamen. Also sagen wir zum Beispiel, Held, IMG. Lass es uns so lassen. Und geben wir ihm zum Beispiel eine Farbe von dunkelgrau oder noch besser hellgrau, nur damit wir sehen können, was wir tun. Und lassen Sie uns darauf hinweisen, dass dieses hellgrau zum Beispiel die Bildfarbe am Morgen ist. Also lasst uns jetzt genau hier springen. Und wie gesagt, können Sie es von hier aus verwenden, alle diese Stilleitungselemente. Oder du kannst einfach hier springen, das Logo finden, Drag & Drop drinnen ziehen. Was ich eigentlich tun werde. Und ich werde es verschieben, zum Beispiel, 40 von oben, wie Schulden. Nun, das erste, was ich tun werde, wenn ich Sie hier zu unserem Wireframe bringe, können Sie sehen, dass wir eine zweistufige Navigation haben, wie all diese Websites tun, aber wir werden es auf eine viel sauberere Art und Weise tun. Also werden wir diesen Stopp haben , der sagen wird, zum Beispiel, Flugticket , Newsletter und Telefonnummer. Und dieser untere Teil wird eigentlich unsere Navigation selbst sein. Also lassen Sie uns direkt da rein springen und sehen, zum Beispiel, ich kann das Flugzeug-Ticket-Symbol ziehen und ich kann tatsächlich von hier aus springen. Flugschein-Symbol. Und ich brauche noch zwei. Ich brauche einen Newsletter. Hier ist es. Aus diesem Grund ist es wichtig, Ihre Layer nochmals zu benennen. Und schließlich Telefon-Symbol hier ist es, und ziehen Sie es nach innen. Nun, was ich tun werde, ist hier zu springen, wählen Sie alle drei von ihnen und einfach organisieren Sie sie besser so. Stellen Sie sicher, dass alle von ihnen unterhalb des Logos sind und klicken Sie einfach hier, nur so dass sie schön bestellt werden und dass sie in der Linie sind. Schließlich werde ich das Recht hier für jetzt zu bewegen, und ich werde tatsächlich das Textwerkzeug verwenden, klicken Sie hier. Und ich werde in Flugtickets schreiben. Vergewissern Sie sich, dass es von links ist. Und mal sehen, wir werden Poppins benutzen. Und sehen wir Lichter wie Väter und vielleicht 18. Und lassen Sie uns auch eine Farbe von Weiß geben. Ich kann das einfach schließen und ich kann sehen, dass Lee für diesen reinem Weiß benutzt. Ich kann es hier positionieren. Mal sehen, zum Beispiel, ich kann es eine Entfernung von c geben, zum Beispiel, 28 denken wird gut sein. So wie das. Und wählen wir diese beiden aus. Und ich zog ihn einfach aus dem Weg, springe zurück zu meinem Ebenen-Panel, drücke noch einmal Control D. Ich werde auch die Diskette auf 20 verschieben. Stellen Sie sicher, dass es aufgereiht ist. Und duplizieren Sie es noch einmal und positionieren Sie sich hier. Und jetzt werde ich einfach zu induzieren Flugkarten gehen unter Newsletter gehen. Und schließlich werde ich diese auswählen, um sie hierher zu bringen. Und mal sehen. Das wird unsere Telefonnummern Superklasse sein. Sie können einfach in einigen imaginären für Nummer eins schreiben. So 1234567890 zum Beispiel. Und mal sehen. Ich kann zum Beispiel sicherstellen, dass sie sind, sie gehen von rechts, also rechts ausgerichtet. Und das erste, was ich tun werde, ist, es tatsächlich zu meinen Charakterstilen hinzuzufügen. Also haben wir es, Poppins Licht 18 hier. Und lasst uns jetzt weitergehen und erkunden und Ds mehr. Also 20. Und mal sehen, vielleicht können wir sie auf 40 geben. Im Gegensatz zu induzieren, so 40 und dies wird sagen Newsletter, wie Schulden und einfach in diesem Symbol in ein wenig mehr wie Beiträge bewegen und geben Sie es 20, was in Ordnung ist. Dann werde ich endlich diese Flugtickets auch auf 40 positionieren. Stellen Sie einfach sicher. Und es, manchmal sind diese Symbole nicht so toll, also werden wir diese halben Pixel bekommen, aber das ist in Ordnung. Sie können es einfach gruppieren. Korrelieren Sie Flugtickets, Newsletter und schließlich telefonieren Sie so. Und mal sehen, wir können dieses sekundäre Navi nennen. Wenn ich es richtig buchstabieren kann, und ich kann diese unteren Bindestriche sogar so einfügen. Und schließlich, was ich tun kann, ist es in einen Stapel zu legen und wie Sie sehen können, hat Stack es richtig organisiert. Wenn Sie sie also verschieben möchten, können Sie dies tun. Oder Sie können einfach Ihre Umschalttaste gedrückt halten und einfach beliebig erweitern. Und dann zum Beispiel, wenn ich dieses sekundäre Navigationsgerät irgendwo hier positioniere, kann ich hier klicken und das so erweitern oder Shift halten. Und es wird sie so erweitern und bewegen. Also ich denke, es ist wirklich nette Funktion, in diesem Stack in Adobe XD zu haben. Und schließlich, lasst uns sie auf 40 von oben positionieren. Also lassen Sie uns so sehen. Und übrigens, ich halte Alt-Taste oder Wahltaste auf einem Mac, nur um zu sehen, wo ich bin mit meinen Abständen. Also lassen Sie uns jetzt weiter und fügen Sie unsere Hauptnavigation hinzu. Mal sehen, was wir damit machen können. Lasst uns in Destinationen schreiben. Und dafür, Mal sehen, vielleicht können wir Pop in leichten verwenden, aber 24 zum Beispiel. Und lassen Sie uns auch eine weiße Farbe geben. Und lassen Sie es uns auch hier hinzufügen. Und mal sehen, wir können es so positionieren, dass es so richtig ausgerichtet ist, was in Ordnung ist. Mal sehen Destinationen 24 Licht, das ist in Ordnung. Lass uns den Winter sehen. Mehr mit hier und sehen Wellness. Das kann individuell sein. Denn wenn Sie sich erinnern, und das ist ihre wichtigste Verkaufsargument, und sie wollen diese einzelnen Reisen so viel wie möglich verkaufen. Das machen wir also genau hier. Wir haben Kreuzfahrten, und schließlich haben wir über uns. Jetzt endlich, für diesen hier, mal sehen. Was wir auch tun können, ist es hierher zu verschieben und das auf 80 zu verschieben. Bewegt dies auf 80. Und es wird so hilfreich sein, weil es, es zeigt uns all diese Navigation oder Barrieren. So zeigt es uns Entfernungen und zeigt uns , wo alles in Verbindung mit all diesen anderen Elementen steht. Und noch einmal, hier ist mein OCD, weil ich wirklich gerne Sachen organisieren. Also lassen Sie uns dieses Hauptnav nennen. Wie Todesfälle, die genau hier positioniert sind. Mal sehen. Der Tod kann hier zum Beispiel unten rechts positioniert werden. Und wir haben 47 Abstand zwischen diesen beiden, und das ist in Ordnung. Unsere Navigation ist abgeschlossen. Und mal sehen, vielleicht können wir dies und Qualität hinzufügen, zum Beispiel primäre Navigation so, denn das ist unsere Navigation in unserem gesamten Design. Nun gehen wir weiter und fügen einige weitere Elemente zu unserer Seite hinzu. Also, was ich eigentlich tun werde, ist, meine Pfeile zu finden. Und ich kann diese Suche immer benutzen. Also Zeilen, wir haben einen Pfeil nach links, Drag & Drop, Pfeil nach rechts, Drag & Drop. Und ich werde hier reinspringen und diese auswählen, um sicherzustellen, dass sie richtig ausgerichtet sind. Und ich werde auch das Rechteck verwenden, weil dies unser Heldenbereich mit dem Schieberegler sein wird. Verwenden Sie dieses Rechteck. Wählen Sie diese beiden aus. Klicken Sie hier, stellen Sie sicher, dass sie sich in einer Mitte befinden. Dann löschen Sie dieses Rechteck, weil wir nicht mehr brauchen. Schließlich, für diesen Pfeil nach links, werde ich ihn einfach so an unserer Rasterlinie ausrichten. Und tun Sie dasselbe für den Pfeil nach rechts. Also einfach mehr hier und richten Sie es so aus. Als nächstes möchte ich mein Textwerkzeug verwenden. Klicken Sie auf. Zum Beispiel, erkunden, mystisch. Und lasst uns das geben, schließen wir das zuerst. Lass es uns bedeuten, blau zu sein. Stellen Sie sicher, dass es von der Mittelposition aus wie Schmutz ist. C. Zum Beispiel. Mal sehen. 24 Licht ist gut, also werden wir es nicht ändern. Ich denke, es ist gut. Wir können es so lassen. Aber das nächste, was wir tun werden, ist es zu duplizieren. Aber für uns Position in einem Zentrum, duplizieren Sie es. Und nennen wir dieses B-Gen zum Beispiel. Und jetzt werde ich tatsächlich die Schriftart ändern, damit wir diese hier können, was ich tun werde, ist in Schuldprämien-Schriftarten zu springen und sie in Schulden zu ändern. Also denke ich, es nennt sich Nimbus-Ecke. Mäuse Soda. Hier ist es. Und ich werde es auf 200 ändern. So riesig. Ich werde fast schwarze Farbe verwenden. Und lassen Sie uns die Entfernungen zwischen diesen beiden sehen, ich weiß nicht. Wir können zum Beispiel sicherstellen, dass sie richtig ausgerichtet sind, weil wir genug von dem Abstand zwischen ihnen haben. Und schließlich, was wir tun werden, ist, einen Knopf darin einzufügen. Also lass uns mal sehen. Wir können ein Rechteck wie dieses ziehen und wir können es zwei bis vier Wochen machen, 70, zum Beispiel, stellen Sie sicher, dass es in der Mitte ist. Und mal sehen, wir können ihm eine abgerundete Ecken von fünf geben. Wir können die Füllfarbe tatsächlich entfernen, wir werden die Grenze n verlassen, aber wir werden es in weiß halten. Und lassen Sie uns sehen, für die Entfernung können wir es zum Beispiel auf 40 von unseren Texten positionieren. Oder noch mehr. Ähnlich AT, ich denke, das funktioniert gut. Und schließlich in ihm, Ich kann springen, kopieren und ziehen Sie diesen Text Eingabe erkunden. Jetzt können wir sicherstellen, dass es weiß ist. Und lassen Sie uns dieses btn, kleine BG, zum Beispiel, Data Explorer jetzt geben. Stellen Sie also sicher, dass es sich so in der Mitte befindet, und stellen Sie sicher, dass dieser Schaltflächentext so zentriert ist, wie er ist. Und schließlich werde ich tatsächlich Control D treffen und dieses BG und kleine Farbe so nennen . Und mal sehen, zum Beispiel kann ich die Farbe einschließen. Und das hier. Nun, lassen Sie uns noch besser schweben Farbe sehen, weil wir Herakles wenig später verwenden werden. Und eigentlich werde ich die Grenze entfernen und die Fettleibigkeit den ganzen Weg nach unten senken. Also werde ich sie alle gruppieren und so den Heldenknopf nennen. Und ich kann immer Control K drücken, um sicherzustellen, dass ich das als Komponente erstelle. Und wir werden uns etwas später mit Komponenten befassen, aber ich möchte Ihnen nur zeigen, was jetzt möglich ist. Also lasst uns das ein bisschen besser organisieren. Ich werde das hier positionieren. Nennen wir es Helden-Text, so. Und mal sehen. Positionieren Sie es. Wage, ich denke, das ist in Ordnung. Hier. Das Einzige ist, lassen Sie uns etwas mit dem Abstand umgehen. Also tun Sie es zur gleichen Kredit für die Pfeile. Und es ist im Grunde für unsere Heldenabteilung, es ist abgeschlossen. Nun, was für uns noch zu tun ist, ist, dass die untere Navigation hier ist es. Also diese Spende Reise Aktivitäten, suchen und bewerben Sie sich für den Boden. Und das werden wir als Nächstes tun. Aber lassen wir das für das nächste Video, denn dieses ist fast 15 Minuten lang und ich will dich nicht zu viel langweilen. Aber im Grunde, was wir in diesem getan haben, ist, dass wir fertig sind und unser Setup abgeschlossen und wir gingen schließlich zu einem hinzugefügt alle diese verschiedenen Komponenten. Ich habe vergessen, den Text für diesen hinzuzufügen, also werde ich ihn schnell hier hinzufügen. Und wie Sie sehen können, bauen wir jetzt weiterhin diesen Styleguide und bauen unsere mündliche Datei, weil wir, uh, später, wenn wir diese Texte zu unserem Styleguide in all diesen verschiedenen Gewichten hinzufügen . Aber ich werde Ihnen das später zeigen, wenn wir Design fertigstellen und den Styleguide selbst fertigstellen. 15. Erstellen von Wireframes in Adobe Xd 2: Gehen wir jetzt weiter, wo wir aufgehört haben. Und lassen Sie uns diesen unteren Abschnitt erstellen , der genau hier ist. Also lass mich hier reinspringen. Und was wir vor allem tun werden, ist geschaffen, die skizziert. Ziehen wir es also über alle unsere Spalten. Aber stellen Sie sicher, dass ich außerhalb meines Heldentextes bin, weil ich getrennt sein wollte. Ich werde es den ganzen Weg hinunterschieben. Ein Heldentext wird unter unsere Navigation gehen. Wie bei den Pfeilen. Lasst uns sie gruppieren, so nennen wir es Pfeile und positionieren es hier. Also, was uns dies erlauben wird, ist , diesen unteren Abschnitt zu erstellen und wir werden es jetzt die Unterseite nennen, zum Beispiel annelids geben ihm einen Namen von unten jetzt BG zum Beispiel. Und mal sehen, wir können dies eine Breite behalten, aber lasst uns es zum Beispiel auf 1640 erhöhen. Ja, lassen Sie es uns bei 640 behalten, denn das ist die mündliche Breite unseres Rasters. Wie Debatten eigentlich 1644, tut mir leid. Also lasst uns die Grenze entfernen und für die Höhe gehen wir mit 70. So wie mit diesem Knopf. Und schauen wir nach der Entfernung, die wir so etwas wie 60 verwenden können. Also 1, 2, 3, 4, 5, 6. Um von dieser unteren Kante entfernt zu sein. Was ich eigentlich tun werde, ist auch fünf getroffen nur so dass wir abgerundete Kanten wie mit unserem Knopf haben. Das Gleiche hier. Und was wir tun werden, ist, diese anderen Elemente zu verwenden. Also lasst uns reinspringen und sehen, was wir zuerst erschaffen können. Also mal sehen, Destinationen werden unsere ersten sein. Nun, mal sehen. Wir können das für Nationen nutzen. Und lassen Sie mich das wirklich schnell ändern, um Dinge zu knallen. Wir werden noch einmal ein Licht benutzen. Und diesmal werden wir 18 benutzen, wie Punkte. Und wir werden tatsächlich ein Hellgrau verwenden, denke ich. Und das wird ziemlich gut funktionieren, um sicherzustellen, dass beide so zentriert sind. Und ich werde auch dieses Pin-Icon hier benutzen. Mal sehen, wo es ist und warum ich es nicht sehen kann. Also schauen wir es uns genau hier an. Sehen Sie, wo es ist. Ich weiß nicht, warum ich es nicht sehen kann. Versuchen wir es noch einmal. So Pin Icon Kuratoren und stellen Sie sicher, dass es hellgrau ist, zum Beispiel. Oder eigentlich, lassen Sie uns in diesem anderen finden, hier ist es. Also Ziel kann es mir leid tun, ich habe die falsche ausgewählt. Wie Papa zum Beispiel, lassen Sie uns einige Entfernungen zwischen ihnen sehen. Vielleicht kann ich sie einschließen, um 40 zu sein. Also 1, 2, 3, 4 und Destinationen können wir auch positionieren 40 so. Und lassen Sie uns in unser Ebenen-Panel und hochwertige Ziele wie diese springen. Schließlich, was wir tun können, ist die D-Position hier genau zu kontrollieren. Dies kann Journey Typ sein, aber statt zentriert ausgerichtet, Lassen Sie uns es links ausgerichtet halten. Mein Zweifel, das nennt man so diesen Reisetyp. Und lasst uns so sein, dass es so sein sollte. Und mal sehen, was wir hier tun können, ist dieses Ziel Symbol durch Journey Typ Python ersetzen . Also hier ist einfach Drag & Drop es innerhalb weil dies die Komponente wird in Echtzeit aktualisiert. Einfach schieben Todesfälle sind 40 nach rechts, und das ist es im Grunde. Steuerung D, um dieses zu duplizieren, verschieben Sie es nach unten. Das werden Aktivitäten wie diese sein. Mein Vater wähle dieses Symbol, klicke und suche Aktivitäten und Drag & Drop es hinein. Stellen Sie sicher, dass dies 40. Also 1234? Habe ich. Und wie Sie sehen können, werden Namen aktualisiert, wie sie sollten und ändern sich, weil wir diese Symbole geändert haben, drücken Sie die Kontrolle D auf diesem, positionieren Sie sie nach unten. Dies wird nach solchen Ausflügen gesucht werden. Milchkuh es, und verwenden Sie diese und suchen Sie nach Reisen. Mal sehen, wir können dieses Suchsymbol so verwenden und sicherstellen, dass wir 40 so sind. Endlich, was ich tun werde, ist, unseren Hintern zu duplizieren. Jetzt BG drücken Control und D, und ich werde tatsächlich eine Schaltfläche erstellen. Also nennen wir es BTM anwenden. Und mal sehen, wir können ihm so eine Breite von 36, 6 geben. Und geben wir ihm die Hauptfarbe so. Und schließlich positionieren Sie es hier und richten Sie es mit unserem Raster aus. Was ich auch tun werde, ist Poppins 24 Lights zu verwenden, einfach etwas wie Filter anwenden eingeben. Meine Schmutzmischung ist in der Mitte ausgerichtet, stellen Sie sicher, dass es Poppins 24 Zentrum ist. Und mal sehen, wo es hier ist, stellen Sie sicher, dass diese beiden in der Mitte sind. Und schließlich, was ich tun werde, ist ein paar Änderungen zu hören, weil ich nicht will, dass diese beiden Ecken abgerundet werden. Also werde ich einfach hier reinspringen und oben links Rasse auf 0 sehen. Und unten links, was dieser ist, bringen Sie es auf 0. Also haben wir diese beiden abgeflacht und diese beiden abgerundet. schließlich sicher, dass sie in der Mitte sind. Dr. Control G. und klicken Sie auf Anwenden btn. Und da haben wir es. Wir haben das abgeschlossen. Jetzt in unserem Designbereich, werden wir tatsächlich springen und organisieren diese ein wenig besser weil ich immer noch genug Platz für all diese geben wollte. Und wir werden sie später tatsächlich positionieren und einige Trennwände einschließen , wenn wir später zur Entwurfsphase kommen. Aber im Moment, eigentlich, weißt du was, vielleicht sollte ich mich sofort mit Trennwänden beschäftigen. Es ist also viel einfacher für uns, an ihnen zu arbeiten. Also, was ich eigentlich tun werde, ist hier zu springen und drücken Sie Einfügen auf einen meiner Trennwände, die ich zuvor erstellt. So können Sie sehen, Breite ist eins, Höhe ist 70, wie es mit diesem ist. Dies sind die Füllfarben. Also im Grunde die Farbe, die wir bereits haben. Und was ich tun werde, ist tatsächlich sicherzustellen, dass dieser Teiler zum Beispiel, ich weiß nicht, hunderteinhundert, zum Beispiel Pixel von diesem ist. Wie tot. Es Control D. Und stellen Sie sicher, dass das 40 ist. Dann verwenden Sie diese Trennwand. Alles klar da. Stellen Sie sicher, dass dies auch 40 ist. Stellen Sie sicher, dass dies 100 ist. Sie schließlich sicher, dass dies auch 40 von der Trennwand ist. Und wir haben immer noch genug Platz hier. Da haben wir es. Lassen Sie mich das Video schnell pausieren, damit ich diese Trennwände organisieren und Sie nicht zu viel langweilen kann. Also, was ich getan habe, ist einfach diese Trennwände in ihre Mappe aufzunehmen , nur um Sie nicht zu viel zu langweilen. Schließlich lassen Sie mich das alles schnell so gruppieren. Und nennen wir es zum Beispiel Bots auf jetzt. Weil wir Primärnerv haben, haben wir jetzt den Boden, mal sehen, vielleicht können wir ihm etwas anderes geben. Lasst es uns jetzt unten halten und weitermachen. Jetzt werden wir zu diesen Abschnitten übergehen, die im Grunde die gleichen sein werden. So haben wir spezielle Angebote. Wir werden einen Text unten haben. Also lassen Sie uns das wirklich schnell erstellen. Hier sind wir. Also lasst uns spezielle Angebote einschreiben. Ich dreckte. Lass uns fast schwarz hineinspringen und ihm eine Buscoda geben, die genau hier positioniert ist. Und lassen Sie uns scheinen, vielleicht können wir es sogar auf 120 senken und es hier hinzufügen. Und mal sehen, was wir damit machen können. Vielleicht positionieren Sie es auf 150. So wie das. Stellen Sie sicher, dass es in der Mitte ist und lassen Sie uns diese schnell organisieren. Das wird also oberster Abschnitt sein. Alles davon. Da spezielle Angebote gehen, direkt hier unter Control D. Und mal sehen, für dieses, was wir tun können, ist Poppins 24 Lichter so zu verwenden, aber halten Sie es einfach hellgrau zum Beispiel, oder dunkelgrau. Das ist gut. Und ich habe einfach hier hinzugefügt und stellen Sie sicher, dass es nur ein bisschen besser organisieren, damit Sie wissen, was Sie tun. Stellen Sie sicher, dass es zentriert und zentriert ist. Und lassen Sie uns tatsächlich den Text aus dem Originaldokument kopieren und einfügen , nur damit wir die Dinge ein bisschen schneller so halten können. Und mal sehen. Wir können es zum Beispiel Abschnittstitel nennen , mein Dad. Und wir können es in unserem gesamten Design verwenden. Also, was wir hier haben werden, unsere First-Minute-Angebote und Last-Minute-Angebote. Also lasst uns weitermachen und das schaffen. Lassen Sie mich das hier duplizieren. Positionieren Sie es irgendwo hier, stellen Sie sicher, dass es links ausgerichtet ist und lassen Sie uns etwas anderes verwenden. Also lassen Sie uns für diesen Text sehen, vielleicht kann ich 24 Bolzen verwenden. Sieh mal, was es ist. Hier ist es. Und lasst uns die mittlere blaue Farbe verwenden, die links ausgerichtet ist. Und nennen wir es erste Minute, zuerst Control D. und wählen Sie die Last-Minute-Angebote aus. Und lassen Sie uns diese Symbole darin einschließen. Also lass uns mal sehen. Ich habe meine Stoppuhr dort, wo sie ist. Also lasst uns tatsächlich Stoppuhr-Symbol eingeben. Hier ist es. Und mal sehen, ich glaube, es ist Uhr. Und da ist es. So Uhr-Symbol, also für die erste und letzte Minuten, und lassen Sie uns alle auswählen. Und fangen wir mit dieser einen Position an, genau hier. Stellen Sie sicher, dass dies in der Mitte ist und stellen Sie sicher, dass sie zum Beispiel 20 voneinander sind . Und gruppieren Sie es. Und gehen Sie zurück zu hier, rufen Sie es zuerst an, braucht Angebote. Und tun Sie dasselbe für diesen. Stellen Sie sicher, dass es 20 ist. Das und Gruppe Angebote und bietet meine Schulden. Und das ist in Ordnung. Positionieren Sie die Triade hier. Und was ich tun werde, ist, diese beiden Clips hier auszuwählen. Und mal sehen, stellen Sie sicher, dass sie zum Beispiel 80 von diesem Text sind . Also 1, 2, 3, 4, 5, 6, 7, 8. Halten Sie meine Umschalttaste gedrückt. Und Abschnitt mit dem Titel gehen Sie einfach unten. Und weil wir 12 Spalten haben, wird dieser Abschnitt sechs Spalten breit sein. Das wird sechs Spalten breit sein, also achten Sie darauf, sechs zu zählen. Also 1, 2, 3, 4, 5, 6. Es ist dieser hier. Sie sind Harut und das ist schon links. Also, was wir zuerst tun werden, ist tatsächlich die Karte zu erstellen, die Sie gesehen haben. Also bieten Sie eine Karte, die hier genau ist. Also lasst uns hineinspringen und das schaffen. Schnell. Also werde ich sicherstellen, dass es sechs Spalten so breit sind. 1, 2, 3, 4, 5, 6. Und da ist es. Und lasst uns etwas Demenz geben. Also 79 bis mit 39, so einer. Und ziehen wir es hierher und nennen es Karte anbieten. Haben Sie Dario und mal sehen. Geben Sie ihm eine abgerundete Ecken oder fünf. Weiß für die Füllfarbe ist gut. Geben wir ihm einen Schatten von 55 und Ton. Und mal sehen, zum Beispiel können wir es 5% machen. Zum Beispiel, nur damit es schön und leicht ist. Und mal sehen, wir können es auch aus unserem Text auf 40 positionieren. Wie diese Milchherde. Jetzt werden wir ein Bild erstellen, also Control D. Und für dieses Bild, lassen Sie uns den Schatten entfernen und die Farbe einfangen. Also lassen Sie uns das schließen und verwenden Sie hellgrau, denn das ist die Farbe, die wir verwendet haben. Also lassen Sie uns für die Höhe 39 sehen, es ist in Ordnung, aber für die Breite drei, 66, ich denke, es ist gut. Und lassen Sie uns für diese Kanten sehen, also für die obere rechte Seite, werden wir 0 verwenden, weil es diese von unten rechts hier ist. Eigentlich auch Nullen verwenden. So ist es also. Nun, was ich tun werde, ist tatsächlich das Sternsymbol ziehen. Also hier ist es. Und ich werde eigentlich ein Wiederholungsraster verwenden. Sehen wir uns 2345 an. Und das ist in Ordnung. Lassen Sie uns sehen, zwischen unseren Sternen werden einfach die Entfernung haben. Oder zum Beispiel für Pixel zu etwas wirklich Kleines. Oder vielleicht kann ich so fünf benutzen, was in Ordnung ist. Springen Sie einfach ins Innere von hier und schließen Sie unser Wiederholungsraster bis zum Rand. Wechseln Sie zum Raster „Gruppierung aufheben“. Control G für die Sterne und Qualitätsbewertung so. Und du kennst mich, ich organisiere gerne Knie. So wirklich schnell organisieren Sie sie einfach so, wie sie von links nach rechts sind. Und Sie können feststellen, dass alle diese Sterne zwei Zustände haben, was auch das ist, was ich geschaffen habe. Das ist also der ursprüngliche Stern und das sind die grauen Startups. So können Sie zum Beispiel eine Vier-Sterne-Bewertung, Drei-Sterne-Bewertung anzeigen , indem Sie einfach den grauen Zustand einschalten, was offensichtlich enorm hilfreich ist , um Ihre Geschwindigkeit zu erhöhen. Lassen Sie uns ein wenig verkleinern. Ich werde mich hier positionieren. Also Angebot Karte, IMG so. Und mal sehen. Wir können zum Beispiel diese als 60 hier positionieren. Und lass uns 60 so sehen, was in Ordnung ist. Und wir können sie zum Beispiel so positionieren, dass sie 20 von oben sind. So wie das. Und nun beschäftigen wir uns mit den Texten. Also lassen Sie uns sehen, wir passen t Eingabe zum Beispiel, oder unter. Und nur damit wir einige echte Texte haben, mit denen wir arbeiten können. Und mal sehen, wir können etwas wie 36 verwenden, fett, links ausgerichtet. Und lassen Sie uns fast schwarze Farbe verwenden, um sie von allen anderen zu unterscheiden. Hinzugefügt, um zu hören, positionieren Sie es direkt unter. Und lassen Sie uns für den Abstand sehen, den wir 20 von unseren Sternen verwenden können, Control D. Und lassen Sie uns unten sehen, können wir Poppins 18 Licht verwenden. Hier ist es, aber gib es einfach in dieser dunkelgrauen Farbe. Und mal sehen, vielleicht kann ich ihm eine Distanz von zehn geben. Es muss nicht zu viel sein. Und lassen Sie mich diesen Text kopieren und in Milchherden einfügen. Und was ich als nächstes tun werde, ist tatsächlich einen Teiler zu erstellen. Also lassen Sie mich schnell kopieren und einfügen meine Trennwand in hier. Da ist es. Und diese Trennwand, dreihundert vierhundertsechs. Dies ist die Farbe, das ist die Größe. Und Sie können diese geteilt erstellen, indem Sie einfach die Linie verwenden, klicken Sie auf halten, verschieben, ihre Gewohnheit und Sie können die Farbe hier ändern. Da haben wir es. Das ist unser Trennblatt. Lassen Sie uns nun weiter und Control D Position von hier und stellen Sie sicher, dass es 24 Tage links ausgerichtet ist, zum Beispiel, dass diese Reise dauert. Und mal sehen, Poppins 18 Licht. Das ist in Ordnung. Lassen Sie uns nun das Kalendersymbol in das Innere bringen. So wie das. Mal sehen. Vielleicht schaffe ich es auf 20 zu sein. Von hier aus. Das weiß ich. Stellen wir sicher, dass diese wie R. zentriert sind und vielleicht 20 Abstand zwischen ihnen gut sein wird, was genau hier ist. Das ist großartig. Und was ich tun kann, ist, es Tage zu nennen und es zu gruppieren und Qualität so. Und lassen Sie uns es unter eine Bewertung verschieben. Und bewegen wir den Schriftsteller. Und es gibt Gada und der Text bewegt sich auch unter die Bewertung. Also jetzt haben wir dieses organisatorische Muster. Und was ich tun werde, ist ein paar weitere dieser Symbole per Drag & Drop zu ziehen. Also zuerst das Flugzeug, dann ist es der Zug, dann das Auto, und schließlich ist es der Bus. Und Sie können sehen, dass alle nicht verfügbar und Standardstatus haben. Lassen Sie uns sie im Standardzustand für jetzt nicht verfügbar halten. Es ist im Grunde dasselbe wie bei den Sternen, nur eine graue Farbe, um anzuzeigen, dass es nicht zur Auswahl steht. Lassen Sie uns hier positionieren und sicherstellen, dass sie alle richtig aufgereiht sind. Wir müssen das einmal tun und mal sehen, Entfernung zwischen ihnen kann etwa 28 sein. Ich denke, es wird gut funktionieren. Also lasst uns sie schnell so organisieren. Also zuerst, lassen Sie uns dieses Symbol gleich hier ausrichten. Und lassen Sie uns das auf 20 positionieren. Positioniert ist auch 20 sein. Dann schließlich Anzeige Symbol 20 als auch. Und ich kann sie schnell so organisieren. Und sehr Howard Control G, ich werde es den Transport nennen. Und bewegen Sie es genau hier, wo es Tage sagt und wann man eine NANDA benutzt, mach breiter. Stellen Sie sicher, dass es so 20 sind. Und schließlich werde ich das noch einmal benutzen, von wie abhängen, lass uns sehen 18 Licht, das ist in Ordnung. Steuere D noch einmal. Und mal sehen, Poppins, 36 Volt. Wir können es dafür benutzen. So 1250 zum Beispiel, lassen Sie uns sehen Poppins 36 fett, das Haupt blau wie das. Und schließlich können wir es zum Beispiel San unten bewegen. Und das kann hier 20 gehen. Und wir sind 24 runter, wir sind 20 oben. Und wir können sie immer auswählen und sie ein bisschen besser organisieren, was ich jetzt tun werde. Also Transport, wählen Sie diese aus, um sie den ganzen Weg nach unten zu bewegen, was unser Preis sein wird. Also traf Control G. Mein Dad, das wird unser Divider sein. Transporttage, NEU oder Arten nennen diese Mitte mein Dad. Und mal sehen, wir können diese Info nennen. Da haben wir es. Das ist im Grunde unser organisatorisches Muster. Also, was ich tun werde, ist, zum Beispiel, Stapel für diese zu verwenden . Also kann ich einen Stapel wie diesen einschließen. Stellen Sie einfach sicher, dass es dieser ist. Aber was ich tatsächlich tun kann, lassen Sie uns das ändern. Ich kann einen Stapel für diese verwenden, nur damit ich den Abstand zwischen ihnen erhöhen und sie verringern kann, wenn wir anfangen, mit responsiver Größenänderung zu arbeiten. Und es wird viel einfacher sein, zu tun. Also nennen wir es Mitte. Denn dies wird unsere Standardkarte sein und wir werden kopieren und in unserem gesamten Design im Grunde einfügen. Also lasst uns damit umgehen. Und für den Preis lassen wir es einfach so, wie es ist. Also lassen Sie es uns schnell organisieren und gruppieren wir sie. Dies wird, wie gesagt, bieten Karte. Wie Dad, haben wir First und Last Minute Angebote und wir haben Abschnitt Titel genau hier. Wir sind bei 40. Was wir also tun können, ist tatsächlich das Wiederholungsraster zu verwenden. Eine letzte Sache, die ich vergessen habe, ist, dass wir tatsächlich den Pfeil hier hinzufügen, unten. Also lasst uns das benutzen. Nennen wir es Rho, Vg. Lassen Sie es uns den ganzen Weg runter bis hierher positionieren. Lassen Sie es uns zum Beispiel nach unten bewegen. Stellen Sie sicher, dass es genau hier ist. Und lassen Sie uns für die Größe sehen, gehen wir zum Beispiel mit der Breite von 82 und der Höhe von 98 . So wie das. Legen Sie es hier, und wir werden unsere Grenze loswerden. Mal sehen, wir werden ihm die Haupt-blaue Farbe geben. Und mal sehen, vielleicht können wir Moschee benutzen. Also Control D. Und lassen Sie uns für die Breite sehen, die wir zum Beispiel mit zehn gehen können. Und stellen Sie sicher, dass es genau hier ist. Und all das wird in nur einer Sekunde Sinn ergeben. Und mal sehen, ich werde vereinfachen und ein rechter Pfeil hier ist Drag & Drop es hinein. Stellen Sie sicher, dass es zentriert ist. Und ich werde sie einfach auswählen. Also lasst uns meinen Pfeil nach rechts finden. Hier ist es genau hier. Also haben wir das, was wir Mask nennen werden. Und das, was wir nennen werden, Mal sehen, Pfeil BG, was in Ordnung ist. Wählen Sie alle aus, drücken Sie Shift Control M und nur dieser Abschnitt wird links sein, genau hier. Und wir können es Pfeil nennen. So kann dies zum Beispiel unser Standardzustand sein und wir können später auf Included unser Horace Zustand zum Beispiel sein, nur um diesen Abschnitt zu erweitern, so dass wir den gesamten Pfeil sehen können. Und das kann der Standardzustand sein, nur damit wir diesen Abschnitt sehen können. Nun, jetzt, wo die Angebotskarte abgeschlossen ist, können wir zum Beispiel das Wiederholraster verwenden. Oder Sie können einfach steuern D auf diesem. Steuerung D. Wählen Sie dies auf drei Control D und platzieren Sie es hier. Ich werde das Video hier pausieren und organisieren. Und jetzt, da es fertig ist. Von hier nach hier wird das das letzte sein. Was wir eigentlich tun werden, ist weiterzumachen und ich werde diese Schaltflächen hinzufügen. Also für die Böden selbst, Lassen Sie uns unser Rechteck-Werkzeug verwenden und gehen Sie mit drei Spalten breit, zum Beispiel. Und mal sehen, wir können es nennen, zum Beispiel, großen Knopf. Und das wird btn sein. Und Biji, so. Wir werden Farben verwenden, also das gleiche Setup, also BTN große Farbe sein. Also ohne Rand, mit der Füllfarbe von Hover so. Und wir werden auch einen Text verwenden und alles. Erstens, Wartung. Poppins 24 Licht ist, was wir verwenden können. Welches ist das hier? Ja, ja. Und stellen Sie sicher, dass es blau ist. Und für diese beiden werden wir es um fünf so sein und sicherstellen, dass auch dieser Text ausgewählt ist. Das wird so sein. Und das wird zuerst grau sein. So dunkelgrau. Und dann werden wir weitermachen und es hinzufügen, um weiß innerhalb unserer Schwebefarbe zu sein. Also Control G. Mal sehen, und wir können es groß und btn nennen. Und mal sehen. Ich kann es direkt unter diesen drei positionieren. Also alle erste Minute, Mal sehen, vielleicht können wir es positionieren, um ein T wie dieses zu sein. Mal sehen. Eigentlich kann ich das in einem normalen Zustand verwenden und ihm so eine Höhe geben. Aber stellen Sie sicher, dass es den ganzen Weg nach unten so ist. Und sie werden Control K getroffen und geben ihm dann einen Horrorzustand, wie Todesfälle. Und das haben wir gesagt, 72. Eigentlich sollte es 70 sein. Gehen wir also zum Standardzustand. Also 70, dass sich das ausrichten sollte und das hier genau sein sollte. Und stellen Sie sicher, dass es da ist. Da. Wir haben es im Horrorzustand. Hier ist es genau hier, einfach bis zu 70 verlängert. Und Zunahme der Fettleibigkeit in diesem wird, mal sehen, weiße Milchherde sein. Und wir können es schnell testen, indem wir diesen Vorschau-Button hier drücken. Und wenn ich den ganzen Weg runtergehe und schwebe, siehst du, wie unser Knopf aussieht. Ich werde tatsächlich in diesem Hero Button springen und bearbeiten, was dieser ist. Hero Texts Hero Button Standardzustand, ihre Realität im Standardzustand, wir werden dies auf Höhe eins für die Farbe haben. Und positionieren Sie es einfach so, dass es am unteren Rand ist. Und wir werden so einen Horrorzustand schaffen. Innerhalb des Horror-Zustandes werden wir es auf 70 erweitern, erhöhen die Deckkraft Dairy Herde. Und jetzt, wenn wir Preview drücken, und da sind wir. Wenn wir schweben, können Sie sehen, dass es wirklich schön und kohärent aussieht. Und auch dieser Knopf funktioniert gut. Jetzt endlich, weil wir diesen zweiten Knopf haben, unser großer Knopf ist, was ich tun werde, ist eigentlich einfach meinen alten Schlüssel zu halten, ihn genau hier zu positionieren. Stellen Sie sicher, dass es ganz nach rechts ist, wie es hier ist. Und schieben Sie es hier. Ich werde das auch tun. Also letzte Minute bis hier, erste Minute hier, und dann gruppieren Sie diese. Also in der ersten Minute. Und ich werde all diese Spalten mit Aliasnamen so gruppieren. Und da haben wir es, unser Abschnitt ist abgeschlossen. Was ich jetzt tun kann, ist schnell einen Videobereich direkt hier zu erstellen. Und für dieses Heldenbild weiß ich nicht, warum es nicht in unsere oberen Abschnitte ging, also lasst es uns dort hineinschieben. Ihre Realität. Und ich kann tatsächlich machen, dass eine Kopie die Control D-Position antrifft und sie draußen direkt hier positioniert. Stellen Sie sicher, dass wir es sind, lassen Sie uns zum Beispiel 150 sehen. Wir sagen, wie das, was hier richtig ist. Und mal sehen, wir können diesen ersten Abschnitt spezielle Angebote nennen, weil wir das haben. Lassen Sie uns alles gruppieren, drücken Sie Control G. Nennen Sie es spezielle Angebote wie das. Und wir werden das nennen, zum Beispiel Video, Hintergründe oder Promo-Video, noch besser. Promo-Video. Und lasst uns für die Höhe dafür sehen, Lasst uns mit 600 gehen. Wir sind noch bei 150. Ich werde das Play-Icon finden. Play Icon hier ist genau hier. Und ich werde diese tatsächlich auswählen, um sicherzustellen, dass das Play-Icon in der Mitte ist. Und wenn ich Preview noch einmal wirklich schnell, was Sie werden feststellen, dass tatsächlich einen Hover-Effekt für die Anzeige-Taste erstellt. Also habe ich einfach etwas Bewegung für das Symbol selbst hinzugefügt und im Inneren angezeigt. Ich habe es etwas größer gemacht. Und ich Kriterien auch, Sie haben die Deckkraft von 0 für die Hintergrundfarbe. Und wenn Sie schweben, haben Sie die Deckkraft von 50 oder 60 oder so etwas. Also im Grunde sind das die Dinge, die Sie mit Ihren Icons tun können , nur um die Dinge ein wenig aufzupeppen. Wir können dies zum Beispiel einen Namen von Promo-Video geben. Und lassen Sie uns nun zum nächsten Abschnitt gehen, der für das Ziel sein wird. Ich werde das Video hier pausieren und kommen Sie zurück zu Ihnen im nächsten Video, weil Sie sehen können, gibt es eine Menge zu tun hier. Und, aber noch einmal, diese Karten sehen wirklich ähnlich wie diese Karten, die wir gerade erstellt haben. Vielleicht können wir sie verwenden und so bearbeiten , dass wir sie besser organisieren und direkt hier wiederverwenden können. Also sehe ich dich dort. 16. Erstellen von Wireframes in Adobe Xd 3: In Ordnung, Lasst uns jetzt weitermachen, wo wir aufgehört haben. Und wie Sie feststellen können, nimmt uns diese Seite eine Menge Videos zu vervollständigen, weil es wirklich riesig ist. Und wenn ich Sie zu unseren Papierdrahtträgern zurückbringe, ist es natürlich das Größte. Aber sobald wir alle diese Hauptkomponenten erhalten, werden Sie nicht in bemerken, nicht nur in diesem Design, sondern in Ihren Entwürfen oder Rollen, einige dieser Komponenten und Elemente werden sich ändern, werden addieren und Sie werden am Ende wiederverwenden sie die ganze Zeit. Deshalb braucht die erste Seite immer viel Zeit, um zu vervollständigen, weil Sie dann zu all diesen anderen Seiten übergehen werden. Jetzt, wie gesagt, wir werden jetzt mit diesen Destinationen beginnen und wir werden mit diesen Karten beginnen. Also im Grunde werden wir nur dieses verwenden und es wiederverwenden. Also zuerst, lasst uns hier reinspringen. Drücken Sie Control C auf dem Abschnitt Titel-Steuerelement, positionieren Sie es hier neu. Und ich werde meine Umschalttaste benutzen und sie den ganzen Weg nach unten bewegen. Ich sollte das nächste Mal tun, es oben verwenden und dann unten bewegen. Also im Grunde werden wir bei 150 sein, genauso wie bei diesen. Und anstelle von speziellen Angeboten werden wir europäische Destinationen wie Dreck schreiben. Und ich werde einfach Text aus meinem ursprünglichen Design kopieren und einfügen. Und da haben wir es. Das ist wieder unser Abschnittstitel. Das erste, was wir tun werden, ist, eine dieser Karten zu kopieren. Also drücken Sie Control C, Control V Eden und bewegen Sie es einfach so. Das sollte ich beim ersten Mal machen. Also jetzt lasst uns sie tatsächlich positionieren. Vielleicht sollten wir es bei 80 positionieren. Also 80 halten Sie meine Alt oder Option. Sie können sehen, es ist bei 80, was in Ordnung ist. Und jetzt, was ich tun werde, ist eigentlich diese Zielkarte so genannt. Und was ich tun werde, ist, es hier einzugrenzen. Stellen Sie sicher, dass es 36, 6 wie Schmutz ist, und stellen Sie sicher, dass es zum Beispiel 690 in der Höhe ist. Für das Bild, mal sehen, können wir dieses Zielbild so nennen. Und dafür, mal sehen, 36 sechs ist gut, die 60. Aber jetzt haben wir das gleiche Problem wieder. Also müssen wir einen oberen linken und oberen rechten Rand aufrunden. Also oben links, oben rechts, fünf, und diese beiden werden wir bei 0 behalten. Nun endlich, lassen Sie uns alle unsere Informationen und den Pfeil als auch verwenden, also alle davon, und stellen Sie sicher, dass Sie es hier bewegen. Und mal sehen. Jetzt kann ich es tatsächlich 40 nach unten bewegen. Also 1, 2, 3, 4 liegen tot. Und mal sehen, hier endet unser Zielstrom, was in Ordnung ist. Und im Grunde ist es das. Das einzige, was wir tun werden, ist zum Beispiel, alles zu bewegen, ohne den Pfeil auszuschließen, also bleibt er dort, wo er ist. Bewegen Sie also alles 10 Pixel nach rechts. So wie das. Nur damit wir uns ein bisschen mehr Abstand geben. Also, was wir hier sind, sind wir bei 43, damit wir es nur ein bisschen abrunden können. Also drei Pixel nach oben, zum Beispiel, Quelle 6, 8, 7 wird besser für uns so funktionieren. Mal sehen, wir sind bei 40 und das ist in Ordnung. Das ist 40 von hier. Also mal sehen, das ist 20, das ist 20, das ist 40, was in Ordnung ist, wissen Sie, ist wie meine Werte zu runden und runter auf den Dezimalpunkt, weil es viel einfacher ist, Dan weiterzumachen und mehr zu schaffen. Also nennen wir es Ziel, so. Und lasst uns alle auf der Gala lassen, denn es ist viel einfacher und schneller für uns. Wie gesagt, können Sie das Wiederholungsraster verwenden. Ich werde nicht, ich werde einfach Control D. Control D noch einmal treffen . Kontrolle D. Und du kennst mich, ich werde sie so organisieren. Mal sehen, das ist unser erster. Bewegen Sie sich nach oben. Zweitens, 1, dritter, 1, vierter, 1. Das ist in Ordnung. Und wir werden den Knopf hier haben. So großer Knopf, ziehen Sie es hier hinein. Positionieren Sie es hier. Und mal sehen, vielleicht können wir mehr Breite bei 80 sein, wie Schulden. Und statt der ersten Minuten, werden wir in ganz Europa schreiben , Reisen wie diese. Sie werden sicherstellen, dass es zentriert ist. Springen Sie wieder rein. Und wir werden sicherstellen, dass es in der Mitte positioniert ist , doppelklicken Sie auf Control C, weil ich diesen Text kopieren möchte. Gehen Sie zum Horror-Anwesen und Control V im Inneren. Stellen Sie sicher, dass dies ebenfalls zentriert ist. Und stellen Sie sicher, dass es sich in der Mitte befindet. Also, jetzt funktioniert es. Einer von n Sie schweben auch. Also werde ich es hier runterbringen. Und nennen wir diese Kontrolle GIL. Es nennt ihn CTS. Weil das eigentlich Städte sein werden. Und wir werden sicherstellen, dass wir später horizontale Bildlauf verwenden, aber im Moment werden wir es nur so halten, wie es ist. Schließlich werde ich diese Pfeile noch einmal benutzen. Also Pfeil nach links und Pfeil nach rechts, Mal sehen. Und vielleicht können sie sogar hier drinnen springen. Und mal sehen, da sind sie. Aber wir werden sie schaffen, um mit blauer Farbe wie diese zu sein. Und ich tue das nur, um uns ein bisschen Zeit zu sparen. Also ziehen Sie sie direkt hier und stellen Sie sicher, dass sie in der Mitte sind. Also Pfeile und ein großer Knopf wie dieser, Molkerei sind, also sind wir bei 80 noch von oben. Und im Grunde sind diese Pfeile genau die gleichen wie diese Top-Pfeile, aber heute haben nur diese blaue Farbe im Inneren. Und wenn ich auf meinen linken Pfeil klicke, können Sie auf den Hover-Zustand sehen, das einzige, was sich geändert hat, ist die Größe des Pfeils innen und auch die Deckkraft der Farbe dieses Kreises. Also, das ist es im Grunde. Und Sie können diese Pfeile aus der Projektdatei bekommen und sehen, wie ich das gemacht habe. Noch einmal tue ich dies nur, um die Geschwindigkeit zu erhöhen, mit der ich diese Videos erstelle. Control G und wir werden es die europäischen Destinationen nennen. Also lassen Sie mich das aus meinem Originaldokument kopieren und einfügen. Da haben wir es. Jetzt unten, dass wir einen anderen Abschnitt haben, so Control D und stellen Sie sicher, dass wir bei 150 sind. Noch einmal, doppelklicken Sie hier, erweitern Sie das, verschieben Sie es nach unten, und wir werden dieses sonnige Afrika nennen. Mein Dad. Mal sehen. Ich kann tatsächlich so hineinspringen und mich den Originaltext kopieren und ihn hier einfügen lassen. Also unterzeichnen wir Afrika, und wie ich schon sagte, wir werden diese Destinationen vorerst verlassen. Weil wir zum nächsten Abschnitt unserer Seite weitergehen wollen, die tatsächlich Ihre Traumreise gebucht werden wird. Und wenn ich Sie hierher bringe, können Sie sehen, buchen Sie Ihre Traumreise. Dies ist der Text frei Zitat, Bild mit dem farbigen Hintergrund. Also lasst uns wirklich schnell daran arbeiten. So wie das. Beginnen wir zum Beispiel mit dem Bild selbst. Ich kann es direkt da drinnen positionieren. Und schauen wir nach dem Bild, lassen Sie uns etwas wie 930 mit 560 verwenden. Und mal sehen, wir können ohne Rand gehen und für die Füllfarbe können wir die gleiche Farbe noch einmal verwenden. Also mal sehen. Wir können es so positionieren, dass es hier und Kontrolle D noch einmal ist. Und lasst uns das nach unten positionieren. Das wird also blau, blau , so dass farbigen Hintergrund. Und für seine Abmessungen, Lassen Sie uns 930, Breite 560 verwenden. Also im Grunde das Gleiche. Was ich eigentlich tun werde, ist in 40 Pixel nach unten positioniert. Also Shift 1, 2, 3, 4, und lassen Sie uns auf 34 sehen, auch von rechts nach links. Und geben wir ihnen Namen. Das wird also eine Traumreise sein, IMG, und das wird Traumreise und bg Farbe sein, nur damit unsere Entwickler wissen, was es ist, Control G Disziplin unser Image zu sein. Mehr es den ganzen Weg runter. Und jetzt lasst uns an unserem Text arbeiten. Also für unsere Texte, Lassen Sie uns in so etwas wie Buch schreiben, Ihren Traum, Reise mit uns. Und für den Text und die Größe, Lasst uns mit diesem gehen. Gehen wir mit links ausgerichtet, und lassen Sie uns vorerst mit so etwas gehen. Position ist irgendwo hier, Control D. Und mal sehen, was wir gebrauchen können. Und unten können wir Poppins hell 24 und dunkelgrau so verwenden. Also kopiere ich einfach den Text aus meinem Originaldokument und ich werde sicherstellen, dass ich bei 40 bin, nur um unsere Geschwindigkeit ein wenig zu erhöhen. Und schließlich werden wir diesen großen Knopf noch einmal benutzen, Drag & Drop rechts hier, Position rechts hier. Und mal sehen, vielleicht können wir das auf 80 positionieren, nur um uns ein bisschen mehr Platz zu geben. Und im Inneren werden wir schreiben und erhalten eine kostenlose Zitate und stellen sicher, dass wir in einer zentralen C-Position in der Mitte sind. Klicken Sie auf Milchhaarschnitt, und gehen Sie in den Horror-Zustand, Paste Zentrum. Wie das Zentrum, Zentrum Milchgewohnheit und Standardzustand. Was sicherlich tun kann, ist meine Hauptkomponente zu bearbeiten, die diese ist. Und ich kann hier reinspringen und sicherstellen, dass mein Text zentriert ist. Ich kann in meinen Horrorzustand springen und sicherstellen, dass mein Text zentriert ausgerichtet ist. Und deshalb, jedes Mal, wenn ich diese Komponente kopiere, wie ich es hier getan habe, wird es zentriert sein, so dass ich es nicht ständig wiederholen muss. Also da haben wir es. Das wird Text sein. Mal sehen, zum Beispiel, ich kann sicherstellen, dass es so in der Mitte unseres Bildes ist. Und nur auf der Oberseite und Milchherden. Was wir also tun können, ist die Gruppierung aufzuheben, es Inhalt zu nennen und ihm dann einen Stapel wie diesen zu geben, nur damit später, nur damit später, wenn wir Orte mit ihnen wechseln wollen, zum Beispiel fest sagen, dass ich dieses Bild nach hier verschieben möchte. Sie können sehen, wie einfach das ist, oder noch besser, wenn ich einen Stapel wie diesen verwenden oder sie so neu positionieren möchte, können Sie sehen, wie einfache Bereiche für unser Layout und es wird uns enorm helfen. Aber lassen Sie es uns in eine andere Gruppe setzen, nur damit wir wissen, was es ist. Buchen Sie Ihre Traumreise. Und geben wir dem einen Abschnitt mit dem Namen L, es ist jetzt mehr eins. Und was wir werden unsere zwei weitere dieser Abschnitte haben. Aber zuerst sehen wir, wo wir mit dem Abstand sind. Also mal sehen. 150, verengen Sie es. Und ich werde diese einfach benutzen, um Control D zu drücken und sie so zu positionieren. Position, alle von ihnen runter. Das erste wird mystisches Asien genannt. Und der zweite wird Beautiful Americas heißen. Also lassen Sie uns tatsächlich Text für meine Originaldatei verwenden. Finden Sie bei. Wie gesagt, bedeutet dies, ein mystisches Asien zu sein. Lassen Sie mich schnell kopieren und den Originaltext. Fügen Sie das hier rein. Und schließlich vier. Und das wird Beautiful Americas heißen, so. Und lassen Sie mich den Originaltext in Seife kopieren und einfügen. Das nächste, was ich tun werde, was uns viel Zeit oder später ersparen wird, ist, dass Sie sehen können, dass wir alle Europa-Reisen haben. Also werde ich gleich hier springen und es alle afrikanischen Reisen nennen. Springen Sie in den Horrorzustand afrikanischer Reisen. Und Depakote. Und jetzt müssen wir das für all diese tun. Also ganz Asien. Und ich weiß, es ist mühsam, aber es wird uns viel Zeit später sparen, wenn wir tatsächlich anfangen zu entwerfen. Denn viele dieser Elemente werden tatsächlich am Ende ganz bereit für Amerika aussehen. Und mal sehen, vielleicht können wir einen S oder alle Amerikas Tropf hinzufügen. Da. Wir haben es, unseren Staat und ihre Milchherde. Und das ist es im Grunde für diesen Abschnitt. Und mal sehen, vielleicht können wir einen weiteren Abschnitt hinzufügen. Ja, fügen wir einen Unter-Abschnitt für dieses Video hinzu und dann gehen wir zum nächsten. Also werden wir diesen Abschnitt hinzufügen, im Grunde einen. Wieder einmal werden wir diese Karten haben und wir werden diese Pfeile haben. Also unsere Top-Destinationen, und wir werden einen weiteren Text unten haben. Und dann werden wir diese beiden Pfeile hinzufügen, die wir heute schon haben, richtig? Also lassen Sie uns jetzt in einer Anzeige und Dosis bewegen. Also, was ich eigentlich tun werde, ist Doppelklick in Control D, verschieben Sie es außerhalb der Abschnitt-Titelposition, es ist irgendwo hier herum. Und lassen Sie mich hier reinsprangen. Und mal sehen. Ich kann sicherstellen, dass es links ausgerichtet ist. Mal sehen. Wir können in so etwas wie unsere Spitze schreiben, diese Nationen. Und ich kann einspringen und diesen Text ändern, stellen Sie sicher, dass er links ausgerichtet ist. Positionieren Sie es nach links. Da gehst du. Und ich kann hier reinspringen. Verwenden Sie Control D mit den Pfeilen und verschieben Sie sie einfach aus diesem Abschnitt und stellen Sie sicher, dass sie sich in einer Mitte befinden, zum Beispiel hier und nach rechts bewegt, genau dort. Da diese die Hahnpunkte haben, werde ich sie einfach an den Rand schieben. Und Tap Point ist im Grunde nur ein leeres Quadrat, so dass Sie Ihre Animationen später verwenden können. Sie können also einfach einen Bereich ziehen, in den die Benutzer tippen und einfach sowohl die Füllung als auch den Rahmen ausblenden sollen. So ist es viel einfacher als für sie, es zu tippen und dann auf das ursprüngliche Symbol zu tippen. Also werden wir diese beiden behalten und jetzt weitermachen. Und ich werde tatsächlich eine dieser Karten nehmen. Also lasst uns das hier benutzen. Kontrolle C, Kontrolle V. Stellen Sie sicher, dass ich es hier nach unten schiebe. Zielkarte. Ja, das funktioniert gut. Lass uns noch einmal mit AT gehen. So etwas wie das. Und anstelle all dieser Informationen, was ich eigentlich tun werde, ist, dass ich das tatsächlich zu vier Spalten ziehen werde und dies auch zu vier Spalten breit ziehen werde. Was ich tun werde, ist, diesen Text innen zu lassen, also werde ich die Bewertung entfernen. Ich werde das in einen solchen Text umbenennen. Und ich werde sicherstellen, dass beide zentriert und so ausgerichtet sind. Ich werde diesen Mittelteil loswerden und ich werde auch den Pfeil loswerden. Ich werde den Preis so belassen, wie er ist, aber ich kann sie einfach in einem Stapel positionieren, stellen Sie sicher, dass sie so sind. Und lassen Sie uns sehen, vielleicht sollte ich sie positionieren, um 40 zu sein. So etwas wie das. Mal sehen. Ich kann sicherstellen, dass sie bei 40 sind. Wieder einmal geht dieser Text von links. Dieser Text geht von links. Also, was auch immer Sie hier eingeben, wird immer in der Mitte bleiben. Also lassen Sie uns jetzt weiter und positionieren Sie ihn in der Mitte Position auch diesen Text in der Mitte. Stellen Sie sicher, dass dies richtig in der Mitte ist, oder Sie können sie tatsächlich außerhalb positionieren. Klicken Sie hier, dann rechts hier. Und dann wählen Sie einfach diese beiden drücken Control G und stellen Sie sicher, dass sie den Text noch einmal genannt werden. Also, was ich tun werde, ist, dem den Namen der Malediven zu geben, zum Beispiel. Und ich werde das noch ein bisschen mehr Texte geben. Und ich werde auch sicherstellen, dass es in der Größe fixiert ist. Es ist viel einfacher, als diesen Text zu skalieren und nach unten zu verschieben und all diese zusätzlichen Informationen einzubeziehen. Also, was ich tun werde, ist die Abstände von 40 zu geben. So wie das. Stellen Sie sicher, dass mein Text 40 von meinem Preis ist. Dann werde ich sicherstellen, dass mein Preis und alle meine Informationen 40 von unten sind, als ob es hier ist. Und schließlich werde ich sicherstellen, dass dies ein bisschen schmaler ist, weil ich diese Höhe solide S5 und S6 nicht brauche. Da gehst du. Und jetzt werde ich diese Informationen verwenden. 234 Molkerei Herat, Es ist 40 von oben und lassen Sie uns schnell überprüfen. Also wird unser Bild 260 in der Breite sein, was in Ordnung ist. Und Terry Gewohnheit, wir haben unser Zielauto, das 80 von oben ist. Control D, stellen Sie sicher, eine Kopie Control D erstellen, um eine Kopie zu erstellen, und da haben wir es. Also lassen Sie mich diese schnell organisieren. Lassen Sie uns alle auswählen. Hit Control G. Nun nennen wir es Orte zum Beispiel so. Und da haben wir es. Das einzige, was wir tun müssen, ist offensichtlich dafür zu sorgen, dass es sich um 150 handelt. Gleiche wie all diese anderen. Langes Array genau hier. Und ich werde das auch viel erweitern. Und klar können Sie sehen, dass dies der Grund ist, warum dieses Video tatsächlich so lange dauert, um zu erstellen ist, weil all diese zusätzlichen Abschnitte, die wir immer hinzufügen, hinzufügen in und schmal scheint. Und im Grunde, also das ist es für dieses Video, wir werden weitermachen, wo wir aufgehört haben, in diesem , im vorherigen, im nächsten Video. Und wir werden hoffentlich diese erste Seite beenden. 17. Erstellen von Wireframes in Adobe Xd 4: Alles klar, lass uns jetzt weitermachen. Und der nächste Abschnitt, den wir erstellen werden, sind tatsächlich Zeugnisse. Und wenn ich Sie hier zu den Zeugnissen selbst bringe, können Sie Sie sehen. So liebt der Reisende, liebt uns. Und das ist ein weiterer Text. Wir werden diesen Abschnitt mit den Pfeilen erstellen, so dass Sie deutlich sehen können, dass die Pfeile wieder erscheinen. Also lassen Sie uns zuerst, tatsächlich kopieren Sie diesen Abschnitt an der Spitze oder sogar variieren, weil seine Mitte ausgerichtet ist, werden wir diesen Abschnitt verwenden. Also kontrolliere C, Control V, und positioniere es den ganzen Weg runter bis hierher. Also 150 Standorte, wir haben es. Also werde ich diesen Text kopieren und einfügen , nur um die Dinge schön und glatt und schnell zu halten. Da hast du es. Das erste, was wir tun werden, ist, diese Karte zu erstellen. Lassen Sie uns also einige Dimensionen geben und wann wir verwenden, mal sehen, 10 8000. Ich denke, es ist in der Mitte in Ordnung. Und mal sehen, vielleicht kann ich es auf 80 positionieren. Und nur damit wir etwas Konsistenz haben, werden wir es bei fünf behalten. Wir werden die Grenze zu entfernen, einen Schatten von 55, 10. Und mal sehen, wir können fünf gebrauchen. Also im Grunde die gleichen Einstellungen wie für alle diese anderen Karten. Das ist es also im Grunde dafür. Nennen wir es Zeugenausweis. Mein Dad Control D Zeugenbild. Und lassen Sie uns für das Bild sehen, können wir ihm eine Breite von drei 66. Und mal sehen. Wir können zum Beispiel oben links und unten links auf fünf belassen, und diese beiden werden bei 0 sein. Also im Grunde nur diese beiden. Und lassen Sie uns eine Farbe geben, nur damit wir wissen, womit wir arbeiten. Da haben wir es. Und mal sehen, geben wir ihm einen Namen. Zum Beispiel, James Martin. Irgendwann stellen Sie sicher, dass es links ausgerichtet ist. Also lassen Sie uns sehen 36 fett, was in Ordnung ist. Und lassen Sie uns zum Beispiel einen Abstand von 60 von diesem Bild geben. Meine Daten orientierten sich im Grunde an dieser großartigen Zeile Control D. Und ich werde offensichtlich sicherstellen , dass Sie das kopieren und einfügen, weil ich Sie nicht langweilen will, das wird , mal sehen, diese Farbe wird Poppins 18 sein. Und lassen Sie uns ziehen und positionieren und das tatsächliche Zeugnis drinnen, damit ich Sie nicht damit langweilen und geben wir ihm eine Distanz von 40, so. Und eine letzte Sache, ich werde noch einmal zu Control D gehen und das Ziel schreiben, wo sie tatsächlich getropft haben. Also reiste ich nach Oregon. Und das wird unser Hauptblau sein. Und lassen Sie uns sehen, zum Beispiel, 40 direkt von hier und stellen Sie sicher, dass alle diese mit unserem Bild zentriert sind. Da hast du es. Lassen Sie uns jetzt schnell organisieren sie so und so. Und das wird Text sein. Positionieren Sie es unter unserem Bild. Und schauen wir uns Zeugenausweis an. Habe ich. Und was ich tun werde, ist diese Pfeile noch einmal zu benutzen. Also stelle sicher, dass ich sie von hier aus wähle, kontrolliere C, kontrolliere V und positioniere sie den ganzen Weg runter bis hier irgendwo. Und mal sehen, ich kann sie hier mit meiner Karte ausrichten. Und mal sehen, ich kann diese Zahlen tatsächlich erstellen. Solid C. Zum Beispiel habe ich vergessen, den Schatten von meinem Bild zu entfernen, und deshalb zeigt es doppelte Schatten. Also lassen Sie uns erstellen, dass Text 0, 1 und ash und 0 für, zum Beispiel, Warpings 36, fett ist in Ordnung, nur diese Farbe, stellen Sie sicher, dass es links ausgerichtet Mischung sollte genau hier positionieren. Und schließlich positionieren wir es zum Beispiel auf 80. So wie das. Stellen Sie sicher, dass unsere Pfeile in der Mitte sind. Oder benutze das einfach. Schau es dir an und da haben wir es. Wir werden uns etwas später mit diesem Text befassen. Also werden wir uns jetzt nicht damit beschäftigen, sobald Sie tatsächlich zu der Gestaltung Teil gekommen sind, werde ich mehrere Karten erstellen und dann können wir damit herumspielen und bearbeiten. Also mal sehen, wir sind 80 von unseren Symbolen, was in Ordnung ist. Wie man es Zeugnisse nennt. Mein Dad. Und lassen Sie uns tatsächlich zum nächsten Abschnitt gehen, der sein wird, wenn ich Sie direkt hierher bringe, dieser Abschnitt. Also werden wir diese drei Karten in einer Art Mansuri-Gitter haben. Und wir werden eine Seele Wellness Kreuzfahrten und Skifahren geben. Lassen Sie uns also schnell mit Daten umgehen. Und mal sehen, wir können sie zum Beispiel Reisekategorien oder so etwas nennen . Also lassen Sie uns für die Reise Kategorien sehen, Ich kann diese drei Karten erstellen. Also lasst uns das jetzt machen. So wie das. Geben wir ihm zum Beispiel Truppenkategorie. Strom habe ich getan. Und geben wir ihm eine Breite von sechs Spalten. 3, 4, 5, 6, was ist das, was in Ordnung ist. Und lasst uns sehen, für die Höhe, gehen wir Woche zu 420, und lasst uns mit fünf gehen. Und lassen Sie uns alle diese Einstellungen verwenden. Also 55, 10, und geben wir ihm den Hintergrundschatten, Deckkraft von fünf, was in Ordnung ist. Dann werde ich sicherstellen, dass eine duplizierte Reise Kategorie Karte Bild. Weil das Bild so oben sein wird. Und wir werden auch später ein Farb-Overlay hinzufügen. Aber ich kann es jetzt auch hinzufügen, aber ich werde es nicht tun, weil ich Sie nicht mit all diesen Details belästigen werde. Wir werden es für das Design selbst überlassen. Also mal sehen. Was wir hier tun können, ist tatsächlich diesen Text zu kopieren. Also die Preiskontrolle C, Kontrolle V, und stellen Sie sicher, dass ich es den ganzen Weg hierher gezogen habe. Und mal sehen. Was wir im Inneren von hier schreiben können, beginnt. Von, und Sie können offensichtlich die Vorteile sehen, die und die Verwendung unter Responsive Größe und Stack uns gibt, weil es viel einfacher ist, alle diese Änderungen auszurichten und hinzuzufügen und zu ändern. Also 2450 und mal sehen, ich kann zum Beispiel positionieren, dass keine 60 von unten sein. Mal sehen. Also irgendwo hier, sagen wir mal. So 40 und 40, was auch in Ordnung ist. Lass es uns hierher bringen. Und mal sehen, was ich tun kann, ist, diesen Text auszuwählen, zum Beispiel Control C, Control V. Stellen Sie sicher, dass es irgendwo hier ist, positionieren Sie ihn knapp über unserem Preis. Und mal sehen. Wir können sicherstellen, dass es dort weiß ist. Und mal sehen, wir können es auf 20 positionieren und ausrichten. Stellen Sie sicher, dass es links ausgerichtet ist und richten Sie es nach links mit dem Preis selbst aus. Und mal sehen, wir können so etwas wie ein Wellness und Milchherden verwenden. Und lassen Sie es uns wahr geben. Aber man bettet einen Anruf es ein Wellnessreisen. Wir machen Kontrolle D, stellen sicher, dass das unten ist. Mal sehen, vielleicht können wir ihm eine 60 geben, so etwas. Und wir werden diese Kreuzfahrten nennen. Mein Vater und sagen, dass wir das auf 240 ändern wollen, zum Beispiel, so. Da haben wir es. Und lassen Sie uns auch ein Duplikat machen, das auf dieser Seite gehen wird und direkt hier springen wird. Und stellen Sie sicher, dass wir diese nach oben erweitern. Und lassen Sie uns sehen, wie viel. Zum Beispiel können wir sicherstellen, dass es eine Höhe von 900 hat. So wie das. Sie sind Harut. Und hier gehen wir zum Schreiben, Skifahren. Und ausgehend von etwas kleineren wie einem 40 Zentimeter, dass sie zu hören sind und die Position nach unten absteigen. Skifahren. Und das wird Wellness sein. Das würde Kreuzfahrten sein, was in Ordnung ist. Wir können diese drei Reisekategorien gruppieren. Stellen Sie sicher, dass wir bei 150 sind. Mal sehen, 150 sind wir, was in Ordnung ist. Dann, was wir tun können, ist einen weiteren Abschnitt Titel Control V. Stellen Sie sicher, dass wir wieder bei 150 sind, positionieren Sie es den ganzen Weg nach unten. Und wir werden das unsere Partner nennen. Und ich ging, um den Text zu kopieren, ihn einzufügen. Und was ich eigentlich tun werde, ist zu springen und kopieren und fügen Sie die Partner-Logos, die tatsächlich verwendet, weil dies nur einige Dummy-Logos sind, die ich online gefunden habe. Und natürlich können Sie etwas wie Envato Elements verwenden, um mehr professionelle Logos zu finden. Oder noch besser, wenn Sie mit dem eigentlichen Kunden arbeiten, fragen Sie einfach nach ihren Logos. Was ich hier gemacht habe, ist, Sie sehen können, dass ich die horizontale Schriftrolle verwendet habe, was später offensichtlich nützlich sein wird, wenn wir anfangen, zwischen all diesen zu scrollen. Also im Grunde, nennen wir diesen Abschnitt unsere Partner, zum Beispiel Milchgewohnheiten. Und was ich als Nächstes tun werde, wenn Sie sich von unserem Drahtmodell erinnern, haben wir einen weiteren Abschnitt, der genau der gleiche Abschnitt ist wie dieser hier, nur umgedreht. Und genau das werden wir tun. Also drücken Sie Control D. Sicher, es ist 150 und positionieren Sie den ganzen Weg nach unten. Was wir also nennen werden, ist die perfekte Reise für jedermann. Und wir werden tatsächlich innerhalb des Inhalts springen, ihn so umschalten und sicherstellen, dass er so ausgerichtet ist. Und jetzt können wir an diesem zusätzlichen Inhalt arbeiten. Lassen Sie mich also den Text kopieren und einfügen. Je mehr Sie ein Abfrageangebot erhalten, bleibt also gleich. Aber das ist im Grunde der Vorteil, dies zu verwenden. Aber was ich tun möchte, ist wirklich schnell das Bild hier hinzuzufügen und dann diese 40 nach rechts zu schieben. So wie das. Und zum Beispiel, richten Sie meinen Text einfach an meiner Rasterlinie aus. Sie können es hier sehen. Also im Grunde 16, drei, nur damit ich ein bisschen mehr Platz zum Spielen habe, stellen Sie sicher, dass es 150 ist, ist es. Und alle Gewohnheiten. Das nächste, was ich erstellen werde, ist der Wechselkurs. Aber ich werde es nicht wirklich erschaffen. Ich werde kopieren und einfügen, positionieren Sie es an Ort und Stelle. Stellen Sie sicher, dass es genau hier so am Raster ausgerichtet ist. Und ich werde Ihnen erklären, wie ich es geschaffen habe , damit Sie damit spielen können, wenn Sie wollen. Milchherde. Also im Grunde wird Text genau so bleiben wie es ist. So knallen 36 mutig, das ist 24 Licht. Aber in Bezug auf diese, also für die Währungen, was wir haben, sind Euro, USD, großes britisches Pfund, Schweizer Franken, Rubel und Japan für den Yen. Genau das haben wir hier und wie ich sie erschaffen habe. Nun, einfach, wenn Sie hier einchecken, können Sie sehen, dass der Euro 120, Weizen 80. Also, was ich tun kann, ist raus zu springen. Also 120 mit zwei und ich kann die Grenze entfernen. Und was Sie tun können, ist hier zu Ihren Plugins zu springen. Und Sie haben ein Plugin namens UI Logos. Sie können darauf klicken. Und was Sie haben, ist Landflachs. Jetzt müssen Sie erstellen, mal sehen, wie viele. Es basiert also einfach in einem einzigen Land. Aber wenn ich zurückgehe, verwenden Sie das Wiederholungsraster, zum Beispiel, erstellen Sie so viele. So viele. Ich denke, es ist so etwas wie 294 oder so. Also heben Sie die Gruppierung Raster auf und versuchen Sie jetzt können 126 Shapes sehen. Also können Sie im Grunde eines davon verwenden. Und wenn ich zu meinem Ebenen-Panel wechseln, können Sie sehen, dass dies die mongolische Flagge ist. Wenn ich hier anklicke, dann ist dies Finnland, Mexiko, das ist Slowenien und so weiter. So habe ich diese erschaffen. Ich werde dich nicht zu viel langweilen, damit wir die Geschwindigkeit erhöhen können , mit der wir daran arbeiten. Also im nächsten Video werden wir tatsächlich unseren Erstellungsprozess beenden, weil wir dieses Q und eine haben, die ein bisschen schwierig zu erstellen sein wird. Ein Ananda wird dich damit in diesem Video langweilen. Aber schließlich, nach diesem Q und a, das einzige, was für uns übrig ist zu schaffen, wenn wir hier überprüfen. Also hier ist das Q&A. Also haben wir den Text und den Knopf an der Seite. Diese werden ein bisschen knifflig zu schaffen sein. Und auch wir haben das Abonnieren und schließlich haben wir die Fußzeile unten. Also sehe ich dich im nächsten Video. Und im nächsten Video werden wir diese erste Seite endlich fertigstellen und dann zur nächsten Seite weitergehen. 18. Erstellen von Wireframes in Adobe Xd 5: Alles klar, Lasst uns jetzt weitermachen und endlich die Arbeit auf unserer Homepage beenden. Und um das zu tun, wie gesagt, lassen Sie mich wöchentlich hineinzoomen. Wir haben dieses Q und einen Abschnitt , der für uns etwas schwierig sein wird, aber nichts zu großes zu schaffen . Was ich also tun werde, ist das eigentlich zu benutzen. Also werde ich Control C drücken und diesen Text kopieren, weil er perfekt platziert ist, um in diesem Abschnitt zu verwenden. Ich werde es hier positionieren, mehr es den ganzen Weg unten. Und um ein bisschen mehr Zeit zu sparen, was ich eigentlich tun werde, ist das Kopieren und Einfügen in den Text, den ich bereits erstellt habe. Habe ich. Und stelle sicher, dass ich meinen Knopf hier zum Beispiel auf 80 verschoben habe. Und schauen wir es uns an. Ja, 18, Katie geht es gut und lass es einfach so. Das knifflige Bit hier ist also genau hier, was Fragen und Antworten sein wird. Also das erste, was ich tun werde, ist tatsächlich mein Type-Werkzeug klicken Sie hier und sagt so etwas wie, ist meine Truppe national geschützt? Und dafür, Lasst uns so etwas wie Bop verwenden ist 36 fett, aber ich werde es tatsächlich auf 24 Volt ändern , weil ich ein bisschen kleinerer Text brauche, um genau hier zu passen. Und ich werde es zu meinen Charakterstilen hinzufügen und einfach mehr es direkt hier unter meinem 36. Und irgendwie ist es schön organisiert. Was ich auch tun werde, ist sicherzustellen, dass es sechs Spalten breit ist. Also 246, also 123456. Da ist es. Und ich werde auch dieses Symbol einschließen, das ist dieses so enge Symbol. Und später, wenn wir anfangen zu animieren, wird es sich tatsächlich selbst animieren. Es wird also von plus 2 in der Nähe von x gehen , aber wir werden uns etwas später damit beschäftigen. Und wie Sie sehen können, haben wir nur den Standardzustand, weil wir nicht brauchen und nach dem Zustand. Was ich auch verwenden werde, ist ein Teiler. Also werde ich kopieren und direkt hier einfügen. Wieder einmal ist die Breite 702, Farbe ist dieser Standard. Eine Größe ist eins, und ich habe sie einfach mit diesem Ausrichtungswerkzeug erstellt. Lassen Sie mich zurück und ich werde Drag & Drop alle meine Ebenen sind genau hier. Was ich also tun werde, ist im Grunde einen weiteren Text hinzuzufügen. Also mal sehen. Was ich tun kann, ist, wie Pop in Slide für diesen zu verwenden. Und lassen Sie uns die Position in genau hier sehen. Schließen Symbol kann oben gehen, also irgendwo hier herum. Und mal sehen, wir können zum Beispiel Poppins 24 und Lichter verwenden , was das ist. Ich werde diesen Text einfügen. Und mal sehen, zum Beispiel kann ich es auf 60 positionieren. So wie das hier. Und mal sehen, kann ich zum Beispiel. Positionieren Sie meinen Divider auch auf 60, so. Jetzt schauen wir es uns an. Es ist in Ordnung, Alles sieht gut aus. Analyten heben jetzt die Gruppierung auf, drücken Sie Control G. Und das wird sein, ist meine Reise geschützt, zum Beispiel, so. Und was ich jetzt tun werde, ist im Grunde die gleichen Elemente zu verwenden, aber im Grunde bewegen Sie sie ein wenig herum. Und ich werde sie schließen und dir später zeigen, was ich meine. Also zuerst, lassen Sie uns sie erstellen. Also werde ich zuerst treffen, stellen Sie sicher, dass das ganz oben ist, wie es hier ist. Drücken Sie Control D, um es zu duplizieren und stellen Sie sicher, dass dies 60 so gut ist. Hier ist es. Mehr, es ist unten und ich werde es Stornierungsbedingungen so nennen. Und ich werde einfach den Text aus meinem ursprünglichen Design kopieren und einfügen. Mal sehen, nur damit ich dich nicht zu viel langweilen kann. Und bewegen Sie diese Trennwand auf 60. So wie das. Sie sind Harut. Und ich werde das duplizieren, es auf 60 bringen, so. Mal sehen. Der nächste sind solche Partner. Lassen Sie mich also schnell meine Originaldatei organisieren, denn wie gesagt, ich kopiere und füge von Schulden ein. Also mal sehen, wie wählen Sie Ihre Partner so aus? Und dann sehen wir Partner. Wir können den Text kopieren und einfügen. Und lassen Sie uns diesen Teiler in einer weiteren Zeit bewegen. So 60 ist, Sie können sehen, dass Adobe XD intelligent genug ist, um alles, was Sie brauchen, genau hier zu organisieren. Also lasst uns endlich mit einem anderen Abschnitt fortfahren. Und das wird heißen: Entschuldigung, wie funktionieren benutzerdefinierte Reisen? Und schließlich werde ich das hier hineinziehen und letztendlich auch auf 60 verschieben. So wie das hier. Und im Grunde, was wir tun werden, ist, dass wir sie ein bisschen besser organisieren werden. Also zuerst, ich werde dieses Kostüm-Trips so nennen und wissen, dass wir alle unsere Abschnitte haben. Der Standardabschnitt wird sein, alle diese Antworten werden geschlossen. Also müssen wir alle von ihnen für unseren Standardbereich bearbeiten. Und ich werde eine Komponente erstellen. Und später werden wir tatsächlich weitermachen und animieren Es gibt Komponente und erstellen zusätzliche Zustände, sobald wir tatsächlich mit unserem Design beginnen. Also, die ersten Dinge zuerst, ich werde das tatsächlich auf das oberste Werkzeug genau hier verschieben. Und oben positioniert, zum Beispiel, stellen Sie sicher, dass es oben in meinem Text ist, wie es hier ist, also stellen Sie sicher, dass es 60. Und schließlich werde ich auf Ihre Grundhaftigkeit des Textes selbst zurückgehen. Als nächstes werde ich das für alle tun. Lassen Sie uns, lassen Sie mich Ihnen noch einen zeigen und dann werde ich das Video pausieren. So Teiler geht oben und stellen Sie sicher, dass es genau hier geht. Stellen Sie also sicher, dass Sie es mit Ihrem Text ausrichten und stellen Sie sicher, dass Sie 60 von hier aus sind. So wie diese und dann unten Sie im Grunde können Sie 0 auf Ihrer Tastatur zu Zeiten drücken. Und, äh, lassen Sie mich das Video anhalten und diese beiden machen und dann komme ich zu Ihnen zurück. Oder ich sah nicht, dass das abgeschlossen ist. Wir müssen sie ein bisschen besser organisieren, denn jetzt können Sie sehen, dass sie im Grunde getrennt sind und sie einfach hier im leeren Raum sitzen. Also müssen wir sie ein bisschen besser organisieren. Was ich tun werde, ist Augapfel. Also schaltet sich hier irgendwo auf. Stellen Sie sicher, dass es 60 ist und tun Sie dasselbe für diese beiden anderen auch. So stellen Sie sicher, dass unser Augapfel es endete, der obere Rand des Textes geht mit dem unteren Rand unserer Linien sind genau hier. Stellen Sie sicher, dass es 60. Und schließlich tun Sie das Gleiche für diesen letzten. Also eigentlich denke ich, dass ein bewacht das erste Mal Erzählungen wie das. Und da sind wir. Dieser Abschnitt ist abgeschlossen. Also, was wir jetzt tun werden, ist, dass wir es in den Abschnitt stellen werden. So benutzerdefinierte Reisen. Also nennen wir es die häufigsten Fragen, zum Beispiel, so. Und ich werde Control K drücken, um eine Komponente zu erstellen weil dies der Standardzustand unserer Komponente sein wird. Und später wirst du sehen, sobald wir sie animieren, der erste Staat wird eine finanzielle Reise sein. Und es wird zeigen, dass die Textteiler nach unten gehen und alles wird animiert werden. Das wird sich drehen. So werden Sie sehen, dass später, wenn wir tatsächlich zu animieren unsere Elemente sind entworfen und alles andere. Also zuerst, ich werde das gruppieren und es als Inhalt nennen. Und dann wird Khan Fragen der Name unserer Sektionen sein. Also noch einmal, häufige Fragen. Und für den Inhalt werde ich den Stack verwenden. Und Stack wird so sein, weil wir es später vielleicht so verschieben wollen. Deshalb ist der Stack wirklich nützlich. Lassen Sie es uns hier positionieren, organisieren Sie es ein bisschen besser. Es funktioniert gut. Mal sehen, wo wir sind. Also sind wir wirklich weit weg. So 150 Milchgewohnheiten. Und jetzt lasst uns das andere schaffen. Also Control C, Control V. Und für diesen Abschnitt, der unser Newsletter sein wird, Newsletter-Bereich. Wie Sie sehen können, haben wir den Text, unteren Text, E-Mail und abonnieren. So wirklich ganz einfach zu erstellen. Und lasst uns zuerst die erste Position 150 sein. Ich werde den Text kopieren und einfügen, um die Dinge ein wenig zu beschleunigen. Dann werden wir kopieren und einfügen in den Text unten, erlitt eine Schleife. Abonnieren Sie unseren Newsletter, um die neuesten Angebote und Rabatte zu erhalten. Bewegen Sie das unten, stellen Sie sicher, dass es sich um 150 handelt. Also, was ich tun werde, ist eine Eingabe zu erstellen. Also für die Texteingabe, Mal sehen, ich kann mein Rechteck-Werkzeug verwenden. Geh von hier. Irgendwo hier. Stellen Sie sicher, dass es 76 ist, wie alle unsere anderen Tasten. Oder 79 2 wird sein. Also lassen Sie uns es Eingabe nennen. Vg wird die Grenze enthalten und keinen Schatten füllen. Und wir werden die Kanten gerade so lassen. Mehr Breite den ganzen Weg nach unten. Verwenden Sie das Textwerkzeug und verwenden Sie etwas wie geben Sie Ihre E-Mail-Adresse ein. Ihre Gewohnheit. Und für diesen hier, lasst uns sehen, was wir verwenden können. Wir können zum Beispiel 18 Lichter verwenden. Und mal sehen, ich kann es zum Beispiel mit dieser Farbe erstellen. Stellen Sie sicher, dass diese beiden ausgewählt sind. Stellen Sie sicher, dass der E-Mail-Text in die Mitte geht. Aber ich werde tun, ist die Suche nach E-Mail-Newsletter. Hier ist es. Einfach per Drag & Drop in die Position ziehen. Und ich werde sicherstellen, dass Sie das schließen und seine Farbe dahin ändern. Lieber, wie es, und ich denke, es ist ein bisschen klein. Also, was ich tun werde, ist es ein wenig zu transformieren. Stellen Sie sicher, dass es zum Beispiel 42 mit 31 ist. Nat funktioniert viel besser mit unserer Rubrik. Stellen Sie sicher, dass es in der Mitte ist. Ist es. Und schließlich, was ich tun werde, ist sicherzustellen, dass es 40 von dieser Suche ist. Also 1, 2, 3, 4. Und ich werde dasselbe für Schreibtischtexte tun, also stellen Sie sicher, dass es auch 40 ist. Da haben wir es. Und jetzt verschieben wir das nach unten, heben die Gruppierung auf und nennen wir es Texteingaben. Ich dat. Und wir müssen unseren Button erstellen. Also, was wir tun können, ist mal sehen. Vielleicht können wir dieses Top-Wissen verwenden, um tatsächlich einen anderen Knopf zu erstellen. Also lasst uns so gehen. Gehen wir mit 70. Stellen Sie sicher, dass beide korrekt ausgerichtet sind. Und mal sehen, was wir tun können. Wir können es nennen, zum Beispiel, Apply Button oder Big Button oder so etwas. Also wenden Sie btn an, weil es die Aktion sein wird, die verwendet wird, also werde ich in diesem Fall nehmen, um zu abonnieren. Also lassen Sie uns für die Breite 36, 6, Höhe von 70 sehen , was in Ordnung ist. Ich werde überall fünf benutzen. Ich werde die Grenze entfernen. Benutze das bedeutet Blau als unsere Farbe und trage schließlich T und ich drucke so etwas wie abonnieren. Stellen Sie sicher, dass es zentriert und ausgerichtet ist. Und mal sehen, was ich gebrauchen kann. Zum Beispiel, Poppins 24 Lichter, stellen Sie sicher, dass es so weiß ist. Und dann werde ich diese auswählen, um sicherzustellen, dass sie so in der Mitte sind. Siehe. Und ich kann es nennen, zum Beispiel, Abonnieren Schaltfläche. Und sofort können wir es als Komponente Control K erstellen, und wir können einen Hover-Zustand hinzufügen. Und das einzige, was Sie tatsächlich innerhalb des Horrorstatus ändern werden , ist die Farbe des Knopfes zu dieser Hover-Farbe so. Also im Grunde, sobald sie schweben, wird es so bleiben. Als Nächstes werde ich beide so in der Mitte positionieren. Und mal sehen, vielleicht kann ich sicherstellen, dass sie bei 60 sind, zum Beispiel, so. Und ich werde sicherstellen, dass ich es Input nenne. Stellen Sie auch sicher, dass Sie sich in einem Stapel befinden, denn später möchten wir vielleicht so etwas tun. Und schließlich möchten wir diese Texteingabe vielleicht auf so etwas skalieren , damit wir sie zum Beispiel korrekt auf die mobile Größe ausrichten können. Das kann also viel leichter. Stellen Sie sicher, dass es in der Mitte ist. Und schließlich, aus den Texten, können wir ihm etwas Größeres geben, wie 100. Und wir können diesen Abschnitt Newsletter so nennen. Und schließlich, gehen wir nun zur Fußzeile und beenden diesen ersten Teil unseres Designs. Lassen Sie mich das zuerst bis hierher erweitern und sicherstellen, dass es 150 ist, das ist es. Also für die Fußzeile werde ich ein schönes großes Rechteck ziehen, stellen Sie sicher, dass ich keinen Rahmen habe. Also werde ich es das Fußzeilenbild nennen. Ich, dass ich sicherstellen werde, dass es so hellgrau ist, damit wir wissen, dass es das Bild ist. Stellen Sie sicher, dass es in einer Mitte ist, keine Grenze, das ist in Ordnung. Und jetzt lassen Sie uns einige Dimensionen geben. Also für die Höhe, lassen Sie uns mit dem 632 gehen, und stellen Sie sicher, dass wir 150 sind. Doppelklicken Sie hier, damit wir unsere Seite richtig schließen können. Zoomen Sie den ganzen Weg hinein, und stellen Sie sicher, dass Sie es älter schließen, wie für XD, um diese Option zu reduzieren. Aber leider hat es es nicht, also müssen wir uns damit auseinandersetzen. Jetzt. Lass uns Logo machen, Drag & Drop es drinnen. Stellen Sie sicher, dass es so in der Mitte ist. Position in irgendwo hier herum. Mal sehen. Jetzt kann ich im Grunde alle diese Top-Elemente verwenden. Also, was ich tun kann, ist, das obere Abschnitte nach unten zu ziehen, primäre Nav, Hauptnav. Also werde ich den Treffer Control C, Control V benutzen und ich werde sicherstellen, dass es den ganzen Weg nach unten ist, stellen Sie sicher, dass es so in der Mitte ist. Und jetzt kann ich sie einfach in zwei Abschnitte teilen, zum Beispiel. Aber bevor ich es tue, erhöhen wir den Abstand auf 100 zwischen ihnen und dem Logo-Song so. Und mal sehen. Dies kann ein 24. Zuerst wählen wir sie alle aus und stellen sicher, dass sie links ausgerichtet sind. So statt rechts ausgerichtet. Also werde ich zur Position und zum Ziel hier. Und weil mal sehen, 1, 2, 3, 4, 5, 6, können alle von ihnen zwei Spalten breit sein, so. Das kann hier gehen, das kann genau hier gehen. Und dann schließlich kann das über uns an den Enden gehen, genau hier und genau hier. Was ich dann tun kann, ist, sie in links und rechts zu teilen. Und ich mache das nur für die reaktionsfähigen Zwecke. Also die Schreibvorgänge, und das wird so bleiben. Und ich kann es zum Beispiel Hauptnav nennen und einfach die Stack-Funktion verwenden, nur so dass ich dies später tun und sie bei Bedarf weiter vergrößern kann. Und ich denke, es ist viel einfacher, dies zu tun, als sich mit all diesen anderen Elementen zusammenzusetzen. Also lassen Sie uns das Logo auswählen, Lassen Sie uns unsere Artikel auswählen, stellen Sie sicher, dass wir bei 100, also weiß ich, dass. Also VR. Und schließlich, lassen Sie mich noch einmal meine Trennwand verwenden. Ich werde es direkt im Inneren von hier einfügen. Positionieren Sie es in knapp unter unserem Hauptnav. Und Sie können es kaum sehen, weil es diese hellgraue Farbe ist, aber lassen Sie uns die weiße Farbe verwenden, nur damit Sie es viel leichter sehen können. Und es, Lassen Sie uns es nicht bei 100 positionieren, sondern eher bei 80, zum Beispiel. So etwas. Ich denke, es funktioniert gut. Und schließlich werde ich einfach meine Watson-Texte kopieren und einfügen. Fügen Sie es hier ein. Stellen Sie sicher, dass ich den ganzen Weg bis hierher bin. Und ich werde sicherstellen, dass alles weiß ist, nur damit es sichtbar ist. Und wir können es etwas später in ein hellgrau ändern. Also mal sehen, vielleicht können wir uns positionieren, um bei 80 Segelflugzeug zu sein, stellen Sie sicher, dass wir richtig ausgerichtet sind. Und schließlich, was ich habe, sind diese Social-Media-Icons, die ich in einem genau hier platzieren werde, stellen Sie sicher, dass ich hier bin. Und lasst uns sie auch in weiß verwandeln. Ich, die sie bewegen und schließlich positioniert, um genau hier zu sein und mit unseren Texten auszurichten, damit wir das tun können, sie ausrichten, sicherstellen, dass wir bei 80 sind und jetzt 76 sind. Also können wir diese vier Pixel nach unten erhöhen, wenn wir wollen. Also, was wir tun können, ist Control G genannt dies, kaufte einige Informationen, nur so dass wir es haben können. Und wir können den Stack auch hier verwenden. Und was ich auch tun kann, ist zum Beispiel, alle diese Elemente von hier bis hier zu gruppieren. Und nennen Sie es zum Beispiel Fußzeileninfo. Und ich kann sie in einen Stapel legen, wird sie in diesen Stapel setzen. Und was uns dies erlauben wird, ist, sie im Grunde zu erweitern oder zu kollabieren, wie wir wollen. Und es wird die Konsistenz beibehalten und es wird viel schneller für uns sein, es später zu bearbeiten. Schließlich, Kontrolle G für Disziplin Qualität Fußzeile. Und eine Sache, die ich tun möchte, bevor ich Sie verlassen, ist Bodenbildung für Symbole, Control K, Strg-Taste und Strg-Taste für dieses ein, nur damit ich sie als unsere Symbole hinzufügen kann. Und bevor wir gehen, ziehe ich das hier rein. Wo sind Symbole und sehen, wie es zu Hause Symbol ist unsere letzte. Ich werde nur ein wenig hineinzoomen. Springen direkt hier, Facebook, Instagram, YouTube, alle von ihnen sind genau da. Jetzt werde ich sie so positionieren, dass sie den ganzen Weg nach unten sind. Ich weiß nicht, warum XD das macht. Weil ich es hinuntergeklebt habe. Ich weiß nicht, warum es ihnen zeigt, dass sie hier sind, also spielt es keine Rolle. Positioniert und hier sorgt dafür, dass wir auch 80 von hier aus sind. Ich glaube, es waren 80. Schauen wir es uns an. Also lassen Sie uns davon sehen, dass wir bei 80 sind, also verwenden Sie diese 38080. Und schließlich, mit diesem YouTube-Icon AT als gut jetzt wieder organisiert, so gehen sie so. Terry hat es. Wir haben das Design endlich fertiggestellt, für diesen Adobe XD Wireframe. Und Sie können sehen, dass die Seite wirklich ziemlich groß ist. Und wissen, bevor ich dich verlasse, Ich möchte nur eine kurze Vorschau treffen und sehen, was wir bisher erstellt haben, bevor wir auf die nächste Seite gehen, noch einmal, drücken Sie das Play Icon, vergrößern Sie diese. Also, was wir haben, ist, dass wir diesen schönen Hover-Effekt haben. Da haben wir es. Und das, was wir hier tun können, ist eine tiefere Deckkraft dieses Rahmens im Hintergrund. Also lass mich das jetzt machen. Also werde ich in den Helden-Button schauen. Hier ist es. Und im Inneren des Anwesens, was ich tun kann, ist, dies einfach auf 0 zu senken, zum Beispiel. Nur damit es viel angenehmer für das Auge ist. Und jetzt, wenn ich schwebe, können Sie nicht in diesem allgemeinen Hintergrund Formen sehen oder es sieht viel besser aus. Wenden Sie Filter an. Und diese funktionieren, weil, wie ich sagte, sie bereits erstellt, so ist das in Ordnung. Sie können sehen, dass dies gut funktioniert. Sieht wunderschön aus. Das funktioniert gut. Und der Abstand zwischen all diesen Abschnitten funktioniert wirklich gut. So können Sie sehen, dass all diese Symbole schweben und sich ändern. Alles sieht gut aus. Wir haben einige Probleme mit diesem Pfeil nach rechts, aber wir werden ihn später in der Entwurfsphase beheben. Aber im Grunde haben wir alle von ihnen schön aufgereiht und es funktioniert wirklich gut. Es alle diese, wie Sie sehen können, weigert sich der rechte Pfeil einfach zu glänzen. Das sieht toll aus. Das funktioniert wirklich gut. Wir werden das später animieren und, und im Grunde wird es hier erweitern. Deshalb habe ich es hier ganz oben gesetzt. Das funktioniert gut. So können Sie sehen, dass der Horror gut aussieht, und das funktioniert auch wirklich großartig. Also im Grunde das ist es für dieses Video und diese erste Seite, offensichtlich, diese nächsten Seiten werden viel kleiner in der Content-Größe sein. Also im Grunde werden sie viel schneller zu erfassen und zu erstellen sein. Also werde ich Sie im nächsten Video sehen, wo wir tatsächlich auf diesem Zielbildschirm arbeiten werden. Und wir werden von dort weitermachen. 19. Erstellen von Wireframes in Adobe Xd 6: Okay, jetzt, da die Homepage fertig ist, Gehen wir zu dieser Spendenseite. Und bevor wir es tun, lassen Sie uns schnell überprüfen, was wir hier haben. Also haben wir die gleiche Navigation, das gleiche Setup, gleiche Home Held Bild, spucken Sie einfach den Schieberegler aus. Es wird nur ein Bild sein. Und dann haben wir, dass ein Abschnittstitel und dann haben wir über Standortaktivitäten und all diese verschiedenen Symbole. Und schließlich haben wir diesen Abschnitt, der uns etwas Zeit in Anspruch nehmen wird. Wir haben diese aktuelle Zeiten 4, die ziemlich ähnlich sein wird wie die, die wir bereits haben. Und dann sind diese Abschnitte unten im Grunde genau die gleichen wie auf dem Home-Bildschirm. Und das habe ich in einem vorherigen Video gesehen. Es wird viel Zeit in Anspruch nehmen, vor allem mit diesen längeren Seiten, um zu der gleichen Struktur zu gelangen, die Sie später auf all diesen anderen Seiten verwenden werden. Aber sobald Sie dies tun, wird es Ihre Geschwindigkeit verbessern und Ihre Produktivität drastisch steigern. Also lasst uns schnell rüber gehen. Klicken Sie hier. Ich werde Control D drücken, um dieses zu duplizieren. Dann schiebe ich es nach unten. Ich weiß wirklich nicht, warum es das immer tut und es hier einfügen. Volumenkörper halten Alt und positionieren sich hier mit einer Rate. Dann nenne ich es ein Ziel. So wie so. Also das erste, was ich tun werde, ist diese und untere Navigation loszuwerden. Also lasst uns es öffnen und unten wird jetzt gehen, Pfeile gehen zu gehen. Und lasst uns das ändern. Und nennen wir es zum Beispiel Stadt der Liebe. Und lasst uns das in Paris ändern und erkunden. Jetzt Taste wird gleich bleiben. Und wenn ein Treffer Vorschau direkt hier, werden Sie feststellen, dass diese Animationen bleiben die gleichen und die Arbeit genau gleich. Wie gesagt, wir werden diesen Heldenbereich behalten. Also der Abschnittstitel, lassen Sie uns die Gruppierung aufheben. Ok, also für den Abschnittstitel, lassen Sie mich schnell voran gehen und meinen Text aus meinem Originaldokument kopieren. Besuchen Sie Paris. Und lassen Sie uns Steyn das sein, also sehen Sie, was Paris zu bieten hat und wo Sie sagen können. Also das erste, was ich tun werde, ist, gehen Sie voran und löschen Sie dies und löschen, um zu tun, so dass ich viel mehr Platz zum Spielen habe . Und das nächste, was wir tun werden, ist, dass About Abschnitt zu erstellen. Also werde ich meine Tiki hier klicken, um über Paris zu tippen. Und mal sehen, was wir tun können. habe die Leitung verlassen, das ist in Ordnung. Verwenden wir zum Beispiel Poppins 36 fett. Ich denke, das funktioniert gut. Jetzt schauen wir mal, was wir hier tun können. Positionieren wir es irgendwo um eine 100 zum Beispiel. Mal sehen, wo wir sind. 100 und wir gingen auf Position für ein Jahr oder noch einmal, stellen Sie sicher, dass es links ausgerichtet ist, wie es genau hier ist. Also werde ich sicherstellen, dass ich dieses dupliziere und ich werde 24 unregelmäßig verwenden. Dann werde ich ein Textfeld mit fester Größe erstellen. Ich werde es den ganzen Weg bis hierher erweitern. Und mal sehen wir vielleicht drei oder vier Zeilen, so etwas. Und lassen Sie mich weitermachen und schnell einige Informationen über Barrieren kopieren und einfügen. Und es gibt zwei Dinge, die Sie in diesen Fällen tun können. Zuerst können Sie Ihre Box bis zum Rand Ihres Textes eingrenzen , bis sie verschwindet, und dann wieder so zurückbringen. Oder Sie können die automatische Höhe verwenden und es wird automatisch die Höhe für Ihre Texte anpassen , sobald Sie anfangen, es auszurichten. Es wird das tun, was fantastisch ist. Und es wird im Grunde als ein reaktionsfähiger Textabsatz fungieren. Deshalb mag ich das wirklich. Und diese Funktion von Adobe XD, wir werden Auto-Höhe zu halten, wie ich sagte, annelids Gruppe dies, Lassen Sie uns es in der Gruppe positionieren. Wissen Sie über Paris und er hat Abteilungstitel. Und wir werden es so behalten. Das erste, was ich hier vorstellen werde, ist dieser Teiler. Verwenden Sie also einfach Ihr Zeilenwerkzeug so. Und mal sehen, vielleicht können wir diese hellere Farbe für die Grenze verwenden. Also ein hellgrau hier ist es, weil wir nicht wollen, dass es zu aufdringlich ist, wir wollen es einfach und minimal halten. Also lassen Sie mich es auf 40 aus meinen Texten positionieren. So 1234. Habe ich. Und ich werde diesen Divider nennen. Ich werde es duplizieren und ich werde dieses innerhalb meines Abschnittstitels positionieren , also innerhalb von hier. Und ich bringe das nächste viel in irgendwohin hier runter. Also, was ich als nächstes tun werde, ist dieses Textsteuerelement D nach unten zu duplizieren. Also, warum habe ich es dupliziert? Tut mir leid. Ich hätte so über Paris duplizieren sollen. Also mehr mit externen Analysten sehen, vielleicht können wir es 100 von unserem Teiler positionieren. Es zählt aus diesem Text, aber wie gesagt, nur von der Trennwand, dann ist Teiler da. Und genau hier werden wir in Aktivitäten schreiben, um hier so zu haben. Und dann werde ich einige dieser Symbole positionieren, die ich Ihnen vorhin gezeigt habe. Also diese Symbole, weil dies die Aktivitäten Symbole sind. Also, was ich tun kann, ist einfach hier zu springen. So Sightseeing, Museen, Flusskreuzfahrten, Radfahren, Essen. Und das hier. Also werde ich sie einfach kopieren. Springen Sie hier und Bass Stiel rein. Also das nächste, was ich tun werde, ist für jeden von ihnen, ich werde in springen und verwenden Sie die Umrissversion. Also, wie er sagte, habe ich dies getan, weil Symbole in der Regel entweder in Umrissen oder in farbigen Version kommen. Also, was Sie tun können, wenn sie in farbiger Version kommen, die ich Ihnen empfehlen würde, Jungs zum Download, können Sie immer nach innen springen und ein niedriger nach unten die Deckkraft dieser Farbe. Erstellen Sie zusätzliche Komponenten, Datum oder eine Instanz, wie ich es hier getan habe. Und dann können Sie Ihrem Kunden oder Ihren Teamkollegen zeigen Dosis zwei Optionen, so dass sie wählen können. Und Sie können diese beiden auch in verschiedenen Szenarien verwenden. Also, um sie besser zu organisieren, was ich tun werde, ist ein Rechteck zu erstellen. Sie können die Tastenkombination oder schnell hier verwenden. Und dann werde ich klicken und diese neu positionieren. Wählen Sie mein Rechteck aus, klicken Sie hier rechts, klicken Sie dann auf das Rechteck, ziehen Sie es hier, klicken Sie auf dieses Rechteck. Wählen Sie beide, nur um sicherzustellen, dass ich in der Mitte dieser beiden Spalten bin , weil ich möchte, dass Spalten jeweils zwei Leerzeichen einnehmen. Also lassen Sie uns dieses Symbol so wählen. Und dann werde ich das hier positionieren und das hier rausziehen, das hier austrocknen, nach oben. Das ist in Ordnung. Da haben wir es. Also, das ist es im Grunde. Organisieren wir sie jetzt. Ich werde sie unten bewegen, und ich werde sie ein wenig nach oben schieben. Also mal sehen, vielleicht kann ich sie auf 100 positionieren. Also lasst uns sie so ausrichten. Schauen wir uns 100 an. Das ist in Ordnung. Das nächste, was wir tun werden, ist, diese Textposition hier unten zu duplizieren. Und was ich tun werde, ist Poppins 24 Licht zum Beispiel. So up Lassen Sie uns Daten sehen auf, aber verwenden Sie einfach und Tode Text. Und lassen Sie mich springen, kopieren und einfügen und den Text aus meinem Originaldokument. Und mal sehen, vielleicht kann ich es auf 40 positionieren. Irgendwo hier finde ich es gut. Kontrolle D und dann können Sie Museen eingeben. Stellen Sie sicher, dass es in der Zentrumskontrolle D River Cruises, Control D Radwege, und schließlich, kulturelle Touren. Jetzt können Sie mit Ihren Kunden sprechen und sie wissen lassen, dass für jedes Ziel, das sie haben. Zum Beispiel können wir in diesem Fall auf dieser untergeordneten Website auf dieser untergeordneten Website für jedes Ziel, das sie haben, zum Beispiel zusätzliche Symbole erstellen. Also lassen Sie uns gehen 40 ich dies, können wir zusätzliche Symbole erstellen. Also das ist total ich fiel oder Eiffelturm in Paris, weil dies am meisten funktioniert gut. Aber vielleicht möchten Sie eine Art von verschiedenen Symbolen einschließen, dann können Sie mit ihnen sprechen und sehen, ob sie für so etwas interessiert sind. Also, was ich tun werde, ist wählen Sie diese beiden und rufen Sie diesen Ordner Sightseeing. Ich werde diese beiden Positionen hier auswählen. Museen schließen einige mehr und aus. Und das wird Radfahren sein. 18 Note. Und schließlich diese, die Kulturtouristen Position genau hier ist. Jetzt werde ich das Video pausieren und das einzige, was ich tun werde, ist, sie einfach zu bestellen, so dass das Symbol nach oben geht. Und jetzt, da ich das getan habe, wie Sie sehen können, ist das Symbol oben, Text unten. Lass uns schnell voran gehen und uns in Schulden organisieren. Also, was wir diesen Abschnitt nennen können, sind Aktivitäten. Also werde ich die Teiler Aktivitäten und all diese Ordner Solids erste Gruppe Ds gruppieren, nennen sie Aktivitäten und ich werde alles andere zu gruppieren und nennen es Aktivitäten noch einmal. Also jetzt lassen Sie uns weitermachen und ich werde diesen Abschnitt duplizieren , denn wenn Sie sich an einen hier erinnern, was wir haben, ist dies, dann das, was wir mit ICANN erstellt haben, gestoppt Paris Angebote. Das ist es, was du als nächstes erstellen wirst. Verwenden Sie also noch einmal den Abschnittstitel. Und ich weiß nicht, warum dieser Teiler hier reingegangen ist. Mal sehen, wo es um Paris geht, die Luft. Organisieren wir diese Dinge nur ein bisschen. Also sollte es hier drin sein. Also Abschnitt Titel sollte an der Spitze über Paris und dann teilen es sollte innen so sein. Also Abschnitt mit dem Titel Control D noch einmal. Ich werde es hier positionieren. Ich werde all diese Abschnitte loswerden. Ich werde nur einen unteren Teil verlassen, weil wir es tatsächlich benutzen werden. Also von hier bis hier, und mal sehen, vielleicht können wir die Partner loswerden. Mal sehen, was wir hier geschaffen haben. Also haben wir diese dann Wechselkurse. Also, ja, lasst uns die Partner loswerden und einfach in diesen Abschnitten am unteren Ende gehen, sie werden genau die gleichen sein, die wir fertig haben. Das erste, was wir tun werden, ist, genau hier zu springen und Position ist, 150 zu sein. So wie das. Weil ich den gleichen Abstand von hier nach hier halten will, aber diese können bei 100 bleiben, wie wir. Also kann ich all diese Gruppen zusammenfassen. Kontrolle G und Schreiben Besuch Paris. Und dieser Abschnitt Titel wird nach unten gehen. Also, was Sie hier schreiben werden, ist Top Barris Angebote wie so. Dann werde ich springen und in diesen Text einfügen, wie so. Also lasst uns all dies gruppieren, Control G und nennen es unten Info. Und wir können es auch verstecken oder einfach ein Derrick halten, nur damit ich später weiß, dass ich es den ganzen Weg hierher bringen kann. Was wir als nächstes tun werden, ist, diese Kategorien zu erstellen. Also diese Optionen, die Benutzer ergreifen können, bevor sie ihr Hotel wählen. Also für den Preis, Dauer, Aktivitäten, Ausflüge, Belüftung, und schließlich, Filter anwenden, wo es ist. Hier ist es genau hier. So Preisdauer, Aktivitäten, Ausflüge, Bewertung und gelten. Also werden wir diese erschaffen. Und weil es sechs von ihnen gibt, können wir einfach einen Button erstellen. Zwei Säulen wie diese. Und mal sehen, was wir damit machen können. Also das erste, was ist, mal sehen, Lassen Sie uns von Dimension beginnen. Also 22 Für eine Breite 70, werden wir die weiße Farbe verlassen, entfernen Sie die Grenze, aber fügen Sie den Schatten von 55, 10 dieses Mal. Also ein ziemlich größeres. Und dann, was wir pflegten und sicherstellen, dass es fünf ist. Also gehen wir mit dem und Sie können es kaum sehen, aber das ist in Ordnung. Und lasst uns auch um die Ecken und bis zu fünf, was ich denke, es ist gut. Und bringen wir es auf 100 von hier, also Verschiebung und 10 Mal, was in Ordnung ist. Nun, was ich als nächstes tun werde, ist, den Preis so zu tippen. Ich werde Poppins 18 benutzen. Ich werde sicherstellen, dass es links ausgerichtet und hellgraue Position in rechts hier ist und sicherstellen, dass es in der Mitte ist. Es ist Milchherde. Und ich werde einfach dieses Dollar-Zeichen finden. Also mal sehen, was es da ist. Ist es. Einfach per Drag & Drop nach innen ziehen. Jetzt sehen wir mal. Vielleicht kann ich das Dollarzeichen hier in der Mitte positionieren. Und stellen Sie sicher, dass es 40. Und der Preis ist auch bei 40. So wie so. Also mal sehen, ich kann zum Beispiel diesen Eingang BEG aufrufen. Oder mal sehen, Drop-down-Liste BG. Denn später, wenn wir anfangen zu entwerfen, werden wir einige verschiedene Elemente einbeziehen. Tun Sie das, es wird fallen, wie ich Ihnen im ersten Video dieser Klasse gezeigt habe. Also nennen wir es Preis. Jetzt lassen Sie uns weitermachen und einige Kopien erstellen. Also Control D, positionieren Sie es hier, kontrollieren Sie die Position und hier. Und bevor wir weiter gehen, Lassen Sie uns sie umbenennen. Der zweite wird also Dauer sein. Drehen Sie eins wird Aktivitäten sein und duplizieren Sie es. Das hier wird also Exkursionen sein. Und schließlich, in diesem hier wird Bewertung sein. Und für das Ende, einfach duplizieren und rufen Sie es Taste auf Apply Filters Lithium gibt es noch. Also das nächste, was ich eigentlich tun werde, ist, auf meinem Knopf zu beginnen, weil es die einfachste ist. Fangen wir damit an. Wenden Sie Filter so an. Entfernt das Dollar-Symbol, BTN, BG, mein Dad. Das wird also blau sein. Wir werden die Schatten loswerden. Und einfach für den applizierten Filter, lassen Sie uns weiß verwenden. Stellen Sie einfach sicher, dass dies in der Mitte ist, wie es ist. Und ich werde Control K drücken, um eine Komponente zu erstellen. Ich werde einen Horrorzustand schaffen. Das Einzige, was sich im Inneren des Hovers ändern wird, ist die Farbe des Hovers selbst, also hellblau. Und jetzt gehen wir weiter und arbeiten an all diesen. So wie wir gesagt haben, dass dies eine Dauer wie diese sein wird. Und für die Dauer, Lasst uns es finden. Mal sehen. Also lasst uns Kalender sehen. Glaub, es ist dieser hier. Mal sehen, es ist 0 in Position und genau hier. Und ich werde auch sicherstellen, dass es die Farbe in ein hellgrau geändert hat. Mal sehen. So 40. Und lassen Sie uns das auch auf 40 ändern. So, was in Ordnung ist. Nächstes: Aktivitäten. Wir werden meinen Dollarbetrag Symbol auswählen, meine Aktivitäten lokalisieren und ziehen Sie es und legen Sie es hinein und sehen 40. Und das ist 35. Also 1, 2, 3, 4, 5, Milchherde. Und dieser nächste wird Exkursionen sein. Suchen Sie mein Symbol und ziehen Sie es hinein. Mal sehen, wir sind 40 von hier. Ja, und hier sind wir 31. Also jetzt sind wir bei 40. Und schließlich wird das unsere 18. Und für die Bewertungsskala befindet sich das Sternsymbol. Hier ist es. Und ziehen Sie es nach innen. Ich werde sicherstellen, dass es so in der Mitte ist. Und dann werde ich sicherstellen, dass es 40 ist, die ich verwenden kann, und 33. Also lasst uns so gehen. Und das letzte, was ich ändern möchte, ist das. Also werde ich nur verwenden und D Umriss. Und für den Umriss werde ich diese Farbe verwenden, nur damit wir gehen und einige Konsistenz mit all diesen verschiedenen Symbolen haben. Dario es. Und jetzt lassen Sie uns tatsächlich sicherstellen, dass diese ein bisschen besser in Call it Filtern so organisiert werden. Also haben wir oben Abschnitt, was tut mir leid, Abschnitt Titel, das ist dieser. Wir haben Filter. Besuchen Sie Paris ist dieser Abschnitt genau hier. Und schließlich müssen wir jetzt diese Karten entwerfen. Also lasst uns sie überprüfen. Sie können sehen, wir haben das Bild hier und wir haben die Bewertung, den Namen. Wir haben Adresse hier, und dann haben wir im Grunde die gleichen Informationen wie vorher, mal 4. Also lasst uns reinspringen und Schulden schaffen. Was wir also tun können, ist tatsächlich Disziplin zu nutzen. Damit wir das in der Akte kopieren können. Und ziehen Sie es hier, eingefügt, direkt hier positioniert, und sehen Sie, vielleicht können wir, ja, ich denke, 100 ist ein guter Weg zu gehen. Also, was wir damit tun können, ist, dass ich hier klicken und ziehen kann. Wie Sie sehen können, Responsive, Responsive, Resize ist ausgestorben, aber nicht wirklich so gut. Also, was ich tun werde, ist das zuerst in Hotelkarte umbenennen. Und hier nannte dies auf Hotelkarte vg, denn sobald Sie es später exportieren, wird es offensichtlich ein bisschen anders sein. So können wir tatsächlich den Pfeil und die Hotelkarte auswählen und einfach skalieren. Und diese beiden werden im Grunde gleich bleiben. Das nächste, was das Bild wird gleich bleiben. Das wird gleich bleiben. Der Name wird gleich bleiben, aber wir werden tatsächlich loswerden dieses, dieser Teiler. Also zweiter Teiler, lass es uns entfernen. Und dieser Teiler wird sich im Grunde bis hierher erstrecken , so dass wir genug Platz haben. Also zwei hier. Dann werden wir eigentlich tun, dass ich diesen Stapel loswerden kann. Also mal sehen, in der Mitte dieses Stapels, lasst uns es loswerden. Und was ich tun werde, ist tatsächlich meinen Preis irgendwo hier zu verschieben, zum Beispiel. Also gebe ich mir genug Platz, wenn sich dieses Symbol später erweitert, was in Ordnung ist. Und was ich als Nächstes tun werde, ist tatsächlich die Tage zu bewegen. Also zuerst wird diese Gruppe ganz los. Lassen Sie uns nun so in die Mitte unseres Textes gehen. Ich werde die Tage hier verlassen und ich werde zum Beispiel den Transport nutzen , der von hier nach hier ausgewählt wurde. Und dann benutze das und das, um sicherzustellen, dass es in der Mitte ist. Werde das Rechteck los, und da haben wir es. Also denke ich, das funktioniert gut. Jetzt das nächste, was ich werde, um meine Trennwand von hier ausgewählt verwenden, stellen Sie sicher, dass es 40. So wie das. Ich denke, das ist gut. Und eine letzte Sache, die ich tun werde, ist tatsächlich diesen Text für die automatische Höhe zu verwenden. Und mal sehen, ich werde den Text aus meinem Originaldokument kopieren und einfügen. Und dann werde ich meine Höhe auf irgendwo hier ausdehnen. Ich denke, es wird gut funktionieren. Und lassen Sie mich den Text umwickeln, damit wir ein bisschen mehr Spielraum haben. Und wenn wir es hier überprüfen, sind es tatsächlich 46. Mal sehen, was wir tun können. Vielleicht können wir das in vier sechs Pixeln verschieben. So, hier haben wir 26 und lassen Sie uns überprüfen, es hier sind wir bei 24, was in Ordnung ist. Also, ja, wir können es so lassen. Eigentlich. Das letzte, was ich verwenden werde, ist diese Texte Control D. Stellen Sie sicher, dass es vollständig draußen ist und stellen Sie sicher, dass es automatische Breite ist. Also, was ich tun werde, ist in mein Originaldokument springen, kopieren und mal sehen, basierend in der Adresse. Also werde ich wieder in die Info springen. Und ich werde dafür sorgen, dass ich es so mit meinen Sternen sähe. Es ist also in der Mitte. Und mal sehen, ich kann zum Beispiel sicherstellen, dass es 60 von diesem rechten Rand ist, so etwas. Also werde ich sicherstellen, dass es richtig ausgerichtet ist. Also, wenn eine Änderung alle diese Adressen später gehen, um nach links zu erweitern. Und eine letzte Sache, die wir hinzufügen möchten, ist in diesem Standortsymbol. Also dieses Pin-Icon, Drag & Drop es hier. Stellen Sie sicher, dass Sie die Farbe darauf ändern. Also, jetzt mal sehen, vielleicht kann ich sicherstellen, dass es 20 von hier ist. So wie so. Dann werde ich das Letzte, was ich tun werde, gruppieren, um es Position zu nennen, es zu positionieren. Ja, lass es uns bei der Bewertung belassen, aber ich werde den Stapel benutzen. So können Sie sich später zum Beispiel vorstellen, dass dies die erste Straße an der Ecke 24 ist. Sie können sehen, dass das Symbol 20 Pixel von hier entfernt bleibt, und es ist skaliert. Egal, was Sie hier eingeben, es wird sich erweitern. Es wird seinen Abstand vom Text halten. Im Grunde das gleiche, wie Sie es in den Stapel genau hier setzen. So haben wir es definiert und ich denke, es sieht gut aus. Also lassen Sie uns weitermachen und duplizieren. Also kann ich dies tatsächlich auf den tatsächlichen Hotelnamen ändern. Hier drin. Wir können dies zum Beispiel auf 14 Tage ändern. So wie so. Ich denke, das funktioniert gut. Und was ich tun werde, ist mein Wiederholungsraster zu benutzen und vier davon zu erstellen. Und ich werde die Gruppierung aufheben. Sicher, dass dieser hier oben kommt. Dies ist die Nummer 2, das ist die Nummer vier und das ist die Zahl 3. Da haben wir es. Also das letzte, was wir in diesem Abschnitt brauchen werden, um es zu beenden. Also lasst uns zuerst alle diese Abschnitte gruppieren. Also mal sehen. Wir können zum Beispiel qualitativ hochwertige Hotels, denn all dies werden Hotels sein. Also lassen Sie uns all dies auswählen. Also haben wir Abschnitt mit dem Titel Filter, Hotelkarten, Control G. Ich werde es Kartelle nennen und dann einfach alles in die Gruppe legen, in den Stapel. Und mal sehen, genau hier. Ich werde eigentlich nicht. Lass uns das später machen, wenn wir den gewünschten Zustand erreichen , weil ich dir zeigen werde, warum. Es ist großartig, wenn Sie Stacks aktiviert haben. So kann es Ihnen wirklich helfen, Ihre Responsive Design Bemühungen später zu erreichen. Also lass uns 150 sehen, so. Und ich werde mit der rechten Maustaste die Gruppierung aufheben oder Sie können es einfach in einer Gruppe lassen, weil wir später in alle diese anderen Seiten kopieren und einfügen werden . Also werde ich es aufrunden. Wieder einmal hasse ich es wirklich, dass XD diese Option nicht hat , um die untere Kante Ihres Designs zu runden. Aber im Grunde ist es das. Wir haben diese Seite fertig gestellt. Es dauerte uns ein wenig weniger als die vorherige Seite, weil wir bereits alle diese Elemente. Der nächste wird uns ein bisschen mehr nehmen weil wir all diese scrollbaren Abschnitte erstellen müssen. Aber wie gesagt, weil wir alle diese Elemente bereits erstellt haben, wird es etwas einfach zu erstellen sein, also wird es nicht schwierig sein. Aber das letzte, es wird wirklich einfach sein. Das war's also für dieses Video, und wir sehen uns im nächsten. 20. Erstellen von Wireframes in Adobe Xd 7: Lassen Sie uns nun auf die nächste Seite gehen, die Angebot ausgewählt werden wird. Aber bevor wir es tun, lassen Sie es uns schnell überprüfen. Also hier haben wir, statt der Heldenabteilung, werden wir den weißen Abschnitt haben. Also werden wir die Gesamtfarbe unserer Navigationselemente in diese wirklich hellgraue Farbe ändern , die wir verwenden. Wir werden einige Bilder direkt hier mit einigen Pfeilen, Nan, Bewertung, Hotelname und Website mit der Beschreibung haben. Und dann unten werden wir all diese verschiedenen Hotelfunktionen haben , die uns eine meiste Zeit in Anspruch nehmen werden. Und wir werden diesen Abschnitt hier haben, bleibt, und er wird sich nicht ändern. Ich werde das zeigen und wie wir das erreichen werden. Und auch wir werden diesen Abschnitt haben, der genau der gleiche sein wird wie bei diesen vorherigen. Also, um loszulegen, werde ich einfach sicherstellen, dass ich meine Alter-Option-Taste verwende, zoomen und dieses ausgewählte Angebot aufrufen. Dann werde ich hier reinspringen und sicherstellen, dass es mein Logo zu dunkel ändert. Und dann mal sehen, ich kann mein Hauptnav benutzen und ich kann diese Gegenstände in dunkelgrau ändern. Mache hier einen Sprung rein, ändere all das in dunkelgrau. Klicken Sie hier, und löschen Sie diese und klicken Sie rechts hier, löschen Sie all dies. Also im Grunde sind wir jetzt mit diesem Abschnitt links. So wird es viel mehr lesen, viel besser auf dem Bild. Und dann vorher. Also, was ich tun werde, ist ein Bild zu erstellen. Also, um loszulegen, werde ich einfach ein r zeichnen, das drei Spalten breit ist. Ich werde mit der rechten Maustaste klicken und das Aussehen einfügen , nur um Ihnen zu zeigen, wie es auf dem Originalbild aussieht. Also, was wir hier haben, ist 55, 10. Also im Grunde der gleiche Schatten, wie wir zuvor einen US gemacht haben. Fünf ist der Eckenradius und die Größe ist 36, sechs mit 305. Also werde ich dieses Karussell Bild Nummer 1 nennen. Ich werde sicherstellen, dass Sie dieses Steuerelement C auswählen und ich werde auch sicherstellen, dass es aufruft, weil wir später im Entwurfsprozess selbst Bilder verwenden werden. Also mal sehen. Wir können es irgendwo positionieren, ich weiß nicht, 100 zum Beispiel oder 80. Vielleicht ist es gut. Ich denke, AT, funktioniert gut, aber lass es uns bei 100 tun, nur um uns ein bisschen mehr Atemraum zwischen der Navigation und all diesen verschiedenen Bildern zu geben . Also mal sehen, wir können zum Beispiel sechs verschiedene Bilder erstellen . Also, was ich tun kann, ist, die Gruppierung aufzuheben und sie Karussellbilder zu nennen. Stellen Sie also sicher, dass ich mich so unter meinen oberen Abschnitt bewege. Und dann mache ich diese Duplikate. Und der Grund, warum ich es in die Gruppe gesteckt habe, ist einfach, weil Sie, wenn Sie in einer Gruppe sind , Gegenstände außerhalb Ihrer Zeichenfläche auf die Grundplatte legen können. Sie werden sich überhaupt nicht bewegen. Sie werden gleich dort bleiben. Also Nummer zwei und das ist Nummer drei. Das wird also Nummer vier sein. Und Sie können sehen, dass ich einfach die gleichen Abstände zwischen allen benutzten benutze. Also unsere Rinnenbreite, wenn Sie sich erinnern, für unsere Zeichenfläche, ist 60. Und das ist es, was Adobe XD als Abstände verwendet. Also wird es noch eine mit 60 verwendet und das wird in Nummer 6 abgebildet werden, so. Also das nächste, was wir brauchen werden, diese zwei Pfeile, Feststoffe, finden sie. Sie befinden sich in jedem dieser Abschnitte. Also lasst uns in die Kontrolle C springen und ich werde sicherstellen, dass ich sie hier oben gelernt habe. Also werde ich eine, im Grunde eine Distanz des Denkens, Sechzigern verwenden im Grunde eine Distanz des Denkens, , die ziemlich gut funktionieren. Also mal sehen. Wir bekommen 60. Also noch einmal, wegen dieser Hahn zeigt einfach Niger Pfeil hier. Und wir werden sicherstellen, dass wir es 60 hier drüben positionieren. Richtig? Diese Karussellbilder sind so vervollständigt. Und natürlich für diesen nächsten Abschnitt werden wir diese anderen Abschnitte im Grunde kopieren und einfügen. Deshalb kopiere ich diese Seite, weil dies perfekt zu dem passt, was wir brauchen. Ich werde den Titel des Abschnitts loswerden. Hier. Ich werde den Namen des Hotels eingeben. Ich werde einspringen und kopieren und einfügen die Informationen aus meinem Hotel so. Und dann werde ich sicherstellen, dass ich beide direkt über meine Trennwand schiebe. Legen Sie das da hin. Und wir werden das wegen des Hotels nennen. Also, was ich tun werde, ist, diesen unteren Abschnitt loszuwerden und ihn einfach nach draußen zu legen. Also mal sehen. Vielleicht kann ich das hier schreiben. Heben Sie die Gruppierung auf. Haben Sie meinen obigen Hotelbereich dort und ich kann sicherstellen, dass es 100 ist, also so. Und schließlich, was ich tun werde, ist auch, dass ich es in einen Stapel legen kann, wenn ich will, aber ich werde das nicht tun. Ich werde mich nicht mit all diesen Details beschäftigen. Ich werde das einfach verwenden und ich werde die Texte von MyLocation verwenden. Also das und der Text, Mal sehen, Control D und Control C. Control D. Also werde ich diese beiden verwenden. Sie können Control X drücken, wenn Sie möchten. Um sie außerhalb dieses Abschnitts zu schneiden. Springen Sie hier zu diesem Abschnitt Kontrolle V. Und was ich tun werde, ist einfach meine Bewertung zu verwenden, positionieren Sie es hier. Und mal sehen, zum Beispiel, ich kann sicherstellen, dass es 20 ist, weil ich glaube nicht, dass es viel höher sein muss. Und stellen Sie sicher, dass dieser Text gut an unserem Raster ausgerichtet ist. Dann werde ich sicherstellen, dass das in der Mitte ist. Und ich werde einfach die Dummy-Website-Texte wie so stellen Sie sicher, dass es wieder richtig ausgerichtet ist. Stellen Sie sicher, dass es den ganzen Weg nach hier geht und Terry Gewohnheit haben wir über Hotelbereich. Jetzt werde ich es bei 100 so positionieren. Und hier werden wir Schuldenabschnitt haben, die sich nicht bewegen wird, aber dieser Abschnitt wird Salz bewegen. Lassen Sie uns das schnell loswerden, weil wir es nicht brauchen werden. Wir werden all das brauchen. Also lasst uns sie direkt reinlegen. Also von hier nach hier. Aber ein paar Informationen. Und noch eine Sache, die ich tun werde, ist, das den ganzen Weg bis hierher auszudehnen, nur um mir hier mehr Platz zu geben als hier, denn wir werden diesen Raum brauchen. Das erste, was ich tun werde, ist, das auf 100 von hier zu positionieren. Und im Inneren von hier werde ich in Hotelmerkmale wie diese schreiben. Dann werde ich diesen Teiler loswerden oder noch besser, ich kann ihn einfach nach unten bewegen, um irgendwo hier herum , weil ich möchte, dass dieser Abschnitt schmaler wird. Ich will, dass es sechs Säulen breit ist. Also 2, 4, 6, wollte ich hier enden. Also werde ich eigentlich meinen Teiler greifen, klicken und halten Sie die Umschalttaste bis hier schreiben so 1, 2, 3, 4, 5, 6. Ja, das ist in Ordnung. Einfach bis hier erweitert. Jetzt werden wir diese Trennwand viel in unserem gesamten Design verwenden. Lassen Sie uns also schnell weitermachen und diesen Abschnitt entwerfen. Und dann im nächsten Video werde ich zurück und entwerfen in diesem richtigen Abschnitt, weil es manchmal ziemlich schwierig sein wird. Also, was Sie tun werden, ist tatsächlich verwenden Sie diese Aktivitäten, setzen Sie sie in einen Stapel klicken Sie hier. Und eigentlich nein, lasst uns sie außerhalb des Stapels lassen. Für jetzt. Ich werde diese drei benutzen. Positionieren Sie sie hier, stellen Sie sicher, dass dies in der Mitte ist. Und dann werde ich diesen Rechteck-Trick noch einmal verwenden. Also benutze es bis hier. Stellen Sie sicher, dass es zwei Spalten breit ist, wie es ist. Wählen Sie mein Fahrrad aus. Dann klicken Sie noch einmal darauf und nutzen Sie mein Essen aus. Positionieren Sie es hier und nutzen Sie so kulturelle Touristen. Jetzt werde ich es loswerden. Und jetzt werde ich damit beginnen, alle diese Symbole zu ändern. Also das erste, was wir eigentlich ändern werden, ist das kostenlose Parken. Als nächstes ist ein privates Fitnessstudio. Der nächste ist der Concierge. Da es sich also um Hotelmerkmale handelt, haben Sie dies im Inneren des Hotels selbst, nicht innerhalb des Zimmers. Diese Informationen werden ein wenig weiter nach unten kommen , weil Sie Ihre Zimmer wählen müssen. Also, was wir hier haben, ist Wi-Fi-Zugang. Also lasst uns weitermachen und alle diese auch ändern. Das wird also kostenlos parken und ich werde das Video hier pausieren, also störe ich Sie nicht damit, alle meine Ordner umzubenennen. Okay, jetzt, da ich das getan habe, ist das Letzte, was wir tun müssen, diese Symbole umschalten. Also muss ich sie hier finden. Also muss ich mein freies Bellen finden. Und mal sehen, was es hier ist. Ziehen Sie es einfach an die Stelle des vorherigen Symbols und stellen Sie sicher, dass Sie es in der Mitte des Textes positionieren. Verwenden Sie die Gliederungsversion, und fahren Sie fort. Dies ist das private Fitnessstudio, also hier ist es. Stellen Sie sicher, dass es genau da ist. Und was ich tun werde, ist tatsächlich zu messen. Also, ich mit 40, ich muss 40 hier sein. So und verwenden Sie die Gliederungsversion. Weiter oben mehr 12 Concierge, Drag & Drop es und sehen 23, 40, verwenden Sie die Umriss-Version und Jumpin rechts hier. Wir sind am privaten Pool. Es ist also hier, es ist genau hier. Und das ist wirklich die nette Funktion von Adobe XD. Ich mag wirklich, wie sie es gemacht haben, weil Sie jederzeit leicht zwischen all diesen verschiedenen Icons wechseln können. Also ein Zimmerservice wie dieser. Verwenden Sie den Umriss, stellen Sie sicher, dass er sich in der Mitte befindet. Und dann endlich zum Wi-Fi-Symbol. Hier ist es. Aber ich muss zuerst mein Icon hier auswählen. Schauen wir es uns an. So kulturelle Touren Symbol, dies wird Wi-Fi-Symbol wie das sein. 40. Stellen Sie einfach sicher, dass es in der Mitte ist. Also da haben wir es. Wir haben diesen Abschnitt beendet. Sie können sehen, wie einfach und einfach das war. Jetzt ist das Letzte, was ich tun werde, tatsächlich sicherzustellen , dass diese drei unten 80 von oben sind. Also lasst uns das jetzt machen. Und wenn wir überprüfen, sind es 85. Jetzt sind es 80, was großartig ist. Und etwas stimmt nicht gut mit dem Stop-Symbol Solids schnell überprüfen, dass aus. Also werde ich das mit meinem kostenlosen Parkplatz machen. Aus irgendeinem Grund richtet es sich nicht aus. Und es ist besser, das jetzt, dann später in der Entwurfsphase, diesen Concierge zu beheben . Nun lasst uns tatsächlich, während wir hier sind, diese untersten. Und es gibt einige leichte Änderungen an ihnen. Denn manchmal, wenn Sie diese Symbole ändern, wird Ihre Position nur geringfügig ändern. So Milchgewohnheiten, das ist jetzt komplett und wir können diese Symbole setzen und vielleicht 100 sehen, so etwas. Ja, mal sehen, wir können den Teiler benutzen und ihn auf 40 positionieren. So wie das. Da drin haben wir es. Das Hotel verfügt über Abschnitt ist fertig. So wie so. Als Nächstes werden wir eine Zimmerkategorie haben. Also werde ich diesen Abschnitt duplizieren, ihn nach unten verschieben. Mal sehen, vielleicht können sie es auf 100 positionieren, so. Und ich werde es als Set nennen, unsere eigenen Typen. Jetzt werde ich diese Aktivitäten loswerden, aber ich werde den Teiler einlassen. Was ich tun werde, ist die gleichen Einstellungen für die Bilder zu verwenden. Also noch einmal, zwei Spalten breit, so etwas, dann würden wir sehen, dass wir fünf ohne Grenzschatten haben können , also 55, 10. Und wir können die gleiche 5% Fettleibigkeit verwenden. Und was wir das nennen können, ist zum Beispiel ein OEM-Typ Bild eins. Ich werde es hier positionieren. Und lassen Sie uns sehen, wie weit wir zum Beispiel mit 40 gehen können. Und lassen Sie uns schnell voran gehen und seinen Namen ändern, damit Sie sehen können, dass es so ist. Und lasst uns jetzt weitermachen und einige Texte hinzufügen. Aber zum Beispiel kann ich das sogar duplizieren, es hier unten positionieren. Mal sehen. Wir können benutzen, ich weiß nicht, warum das alles außer Betrieb ist. Lasst uns hier nachsehen. Ich denke, das ist in Ordnung. Also vielleicht müssen wir es auch hier ändern. Tut mir leid, aber besser sicher als Leid. Ich sage, das ist in Ordnung. Ok. Also lasst uns hier weitermachen. Und wie gesagt, wir werden eine Zimmerkategorie haben. Also zuerst, ich werde Poppins 24 Bolzen so verwenden und sicherstellen, dass es dunkelgrau ist. Lassen Sie uns 24, 24 mutig sehen. Okay, und lass uns sehen, hellgrau. Dunkelgrau funktioniert gut. Nennen wir es klein. Und schauen wir nach der Entfernung, die wir auf 20 setzen können. Also genau hier. Und dann Control D, um es zu duplizieren. Und dafür werde ich Poppins 18 benutzen. Und ich werde das gleiche dunkelgrau verwenden, um zu verbessern halten, kopieren und fügen Sie diesen Text. Ich werde es automatisch hoch machen und es hier positionieren , so dass es mit diesem wirklich gut skaliert. So cool. Als ob Dad Privatsphäre wollte, und das ist in Ordnung. Und positionieren Sie, dass auch 20 sein. Lassen Sie uns schnell organisieren es so klein, wenn zwei oder unten bei allen Arten. Also hier ist es. Das wird überhaupt klein sein. Steuerung D, um es zu duplizieren, genau hier positioniert und Control D Position ist genau hier. Dieser zweite Raum wird Präsident heißen. Dann wird diese letzte Amtszeit als Exekutive bezeichnet. So wie so. Also für den Präsidenten. Und wir werden auch Text aus meinem ursprünglichen Design kopieren und einfügen. Es ist nicht wie dieses Laufzeitabbild. Nummer zwei, ich werde auch umbenannt, weil es später viel einfacher sein wird, wenn Sie sie exportieren. Und das werde ich Ihnen später zeigen, wenn wir zum Exportteil kommen. Also Executive, wieder einmal, Dinge, die Sie tun können, während Sie entwerfen, tun Sie sie, weil später werden sie sich wirklich schnell stapeln und Daniel wird wirklich stecken. Und ich weiß nicht, wo man die Zeit findet, um all diese Aufgaben zu erledigen. Also, was hier zu tun, genau hier sind die Zimmertypen. Und jetzt denke ich, es ist der gute Zeitpunkt, diese Datei zu speichern. Also drücken Sie Control S, oder wie gesagt, wenn Sie es in der Cloud verwendet haben, wird es automatisch sparen. Also im Grunde, sobald es auf Speichern klickt, was ich tun werde, ist, diesen Abschnitt zu duplizieren und ihn nach unten nach hier zu verschieben. Positionieren Sie es hier runter. Und ich werde diesen Raum nennen, sind viele t's wie also ändern Sie dies in ein Zimmer. Ja. So wie so. Das erste, was ist eine Klimaanlage. Und lassen Sie mich schnell voran gehen und kopieren und einfügen alle diese. Das wird eine Küche sein. sind also offensichtlich die Dinge, die sich im Raum selbst befinden. Kabel-TV. Das wird ein Sicherheitsschloss sein. Und endlich haben wir eine Mikrowelle. So wie so. Jetzt werde ich das Video pausieren, damit ich meine Ordner umbenennen kann. Und jetzt, da ich das getan habe, lassen Sie uns schnell weitermachen und alle diese Symbole ändern. Also noch einmal, ich werde sie auswählen und sehen uns Klimaanlage. Deshalb ist es immer nützlich, alle diese Symbole zu speichern. Also, Sie haben Klimaanlage, ich kann Drag-and-Drop Umrisse. Mal sehen, Wir sind bei 40 Küche ist der nächste, aber wie immer, Ich habe vergessen, es zu wählen. Also Küche. Und da gehst du. Es ist 40 Umriss Waschmaschine Hotline und stellen Sie sicher, dass es in der Mitte mit unserem Text. So wie so. Danke Dawn ist Kabelfernsehen. So TV, dass 40 skizziert sicher, um ihre Haarschnitt Umriss zu sperren und stellen Sie sicher, dass es in den zentralisierten Daten. Dann haben wir endlich dieses Mikrowellen-Symbol. Noch einmal, stellen Sie sicher, dass es in der Mitte ist und ich werde es tatsächlich hier lassen. Sie können sehen, dass es 62 Wörter sind, wie es in der Mitte von diesen aussieht, also werde ich es einfach dort lassen. Also noch einmal, nur schnell Augapfel es stellt sicher, dass sie alle in der Mitte sind. Ein Wagen Rasterlinien, die sie zum Glück hier sind. Und ich werde sie alle wirklich schnell schließen. So wie so. Und im Grunde todet es, der nächste Abschnitt wird verfügbare Dienste sein und im Grunde wird nur ein grundlegender Text sein. Mal sehen, was wir kopieren können. Wir können zum Beispiel diesen Abschnitt direkt hier kopieren. Also Control D, Arzt bei sind genau hier und stellen sicher, dass Sie voran gehen und löschen Sie die Bewertung zum Beispiel. Und in diesem, und ich werde es den ganzen Weg nach unten positionieren, knapp über unserer unteren Uniform. Stellen Sie sicher, dass wir bei 100 sind, als wären wir wie Dreck. Und wann man diese verfügbaren Dienste wie Schmutz nennt. Und ich werde auch sicherstellen, dass diese Trennwand loswerden. Ich werde eine Trennwand von hier verwenden, die hier positioniert ist. Stellen Sie sicher, dass ich es irgendwo hier unten, zum Beispiel, weil dieser Abschnitt wird ein bisschen länger sein. Also, was wir hier tun werden, ist, mal sehen. Wir können dieses Symbol benutzen. Zuerst müssen wir das duplizieren. Nennen wir es ein Bed & Breakfast Service. Mal sehen Poppins 24 Licht, aber ich werde es Auto Breite zu diesem zu halten. Und mal sehen, das wird Poppins 18 bis irgendwo hier sein. Mal sehen. Ich kann es dabei behalten. Also sechs, ich kann hier positionieren und einfach um meinen Text, wo wir Funktion Abendessen hören, Concierge, Service ist dort begrenzt, wie es dann endlich, zum Beispiel, können wir es bei 20 halten. So etwas. Ich denke, es funktioniert gut. Aber anstelle von Poppins 24 werde ich es auf 18 ändern. Also, bis ich dunkelgrau gemacht habe. Jetzt mal sehen. Ich denke, das funktioniert gut. Also wieder 20 und was ich hier tun werde, ist das Schuldensymbol. Mal sehen, wo es ist. Wenn ich es wirklich reingebracht habe, habe ich Frühstücks-Ikone gemacht, ich werde es hier bringen. Die Position ist genau hier. Und ich werde sicherstellen, dass diese beiden bei 40 sind und gehen, um sicherzustellen, dass das bei 100 ist. Mein Text nur so hatte ich genug Platz, um damit zu spielen? Und eine letzte Sache, die ich tun werde, ist sicherzustellen, dass dies skizziert wird. So Frühstück Symbol, wir werden diesen Abschnitt verfügbar Dienstleistungen nennen. Dann werde ich das hier positionieren und qualitative Bed and Breakfast so. Ich werde ein Duplikat davon machen. Ich werde den unteren Teil nach unten verschieben. Und mal sehen. Zum Beispiel kann ich sicherstellen, dass es 40 zu so etwas ist. Und was ich tun kann, ist diesen All-inclusive-Service zu nennen. So wie das. Gehen Sie ein wenig schnell vor und kopieren Sie meinen Text und fügen Sie ihn auf meinen Schreibtisch ein. Schließlich werde ich diese Trennwand nach unten bewegen und wann, um sicherzustellen, dass es wieder 40 ist. Und das ist es im Grunde für diesen Abschnitt, benennen Sie dies einfach in All-inclusive-Dienst um. Und ich kann diesen Abschnitt schließen und weitermachen. nächste ist der Reiseplan, aber ich werde pausieren. Ich werde das Video hier stoppen und wir können mit dem nächsten Video fortfahren , nur damit ich die Dinge ein bisschen besser organisieren kann, aber wir haben nicht zu viel mehr Informationen da unten. Was wir haben, ist die Reise fade und wir haben Ausflüge zur Verfügung. Wir haben Lage, Preis beinhaltet N Stornierungsbedingungen. Also, das ist es für dieses Video, wir werden jetzt zum nächsten übergehen. 21. Erstellen von Wireframes in Adobe Xd 8: Lassen Sie uns nun mit dem nächsten Abschnitt fortfahren , der Reise geplant sein wird. Also werde ich Control D bei diesem hier treffen. Stellen Sie sicher, dass ich die gleiche Entfernung habe. Also auf 100 positionieren Sie sich hier unten und rufen Sie diesen Reiseplan an. Dann drinnen, und nennen wir es Trip. Und das wird im Grunde d eins sein. Dies wird zum Beispiel in D zwei bis 13 sein. Und wir werden noch einen Tag 14 schaffen. Bevor wir es tun, werde ich diese beiden Symbole so loswerden. Ich werde sicherstellen, dass diese bei 40 voneinander sind. Und ich werde eine weitere letzte Kopie für hier machen. Also 123. Das wird Tag 14. So wie das. Dann werde ich sie alle umziehen, um 100 von hier zu sein. So wie das. Und wie gesagt, wird eins sein. Das werden die beiden sein, 13. Und das wird d 14 sein, weil wir uns vorstellen, dass dieser Dienst 14 Tage gedauert hat. Ich kann schnell voran gehen und einen Teil dieses Textes kopieren und einfügen. Und endlich noch eins. Habe ich. Lasst uns jetzt weitermachen und sie ein bisschen besser organisieren. also noch einmal sicher, dass dies bei 40. Und ich benutze echte Kopie hier, nur damit wir nicht zu viel Zeit später im Design verschwenden, weil der Wireframing-Abschnitt uns tatsächlich die meiste Zeit nehmen wird. Jetzt, da das abgeschlossen ist, können wir zu verfügbaren Exkursionen übergehen. Und wegen Schulden brauchen wir einen Abschnitt mit Symbolen. Also traf Control D. Ich werde es verfügbare Exkursionen nennen. Ich werde es den ganzen Weg hinunterziehen und sicherstellen, dass es 100 sind. Und das wird Museen, Flusskreuzfahrten, kulturelle Touren und Ballonfahrten sein. Das wird die Erkundung der Stadt sein. Und schließlich Campingausflüge. Und weil Sie diesen Prozess schon ein paar Mal n Sie sehen, was ich getan habe? Ich werde alle diese Symbole ersetzen und ich werde alle diese Ordner umbenennen und dann werde ich wiederkommen. Okay, jetzt, da ich das getan habe, können wir zum nächsten Abschnitt übergehen. Und der nächste Abschnitt wird ziemlich einfach sein, er wird nur eine Karte und eine Hotellage enthalten. Aber vorher, lassen Sie uns schnell überprüfen und sehen, ob unser Teiler hier bei 40 ist. Sehen Sie es ist, was großartig ist. So verfügbar Exkursion, ich werde es den ganzen Weg hierher bewegen. Und für diesen, den ich eigentlich verwenden werde, ist dieser Abschnitt. So gut Control D, denn ich brauche nur ein paar Dinge davon. Oder vielleicht sogar eine Rolle. Wir können das vielleicht benutzen, weil es bereits ein Bild hat. Ja, machen wir das. Also hat Ihr Handy etwas mehr Zeit. Hören Sie ihr genau hier zu. Und das nächste wird als Set Hotel bezeichnet. Alkylierung. Wind, um es hier runter zu bewegen. Und wenn Sie sich fragen, wie das alles funktionieren wird, sich keine Sorgen, sobald wir diese Abschnitte abgeschlossen haben, werde ich Ihnen erklären. Also, wie gesagt, das ist und Hotellage wie Papa. Und dafür werde ich verwenden, Mal sehen, Poppins 24, aber ich werde eine regelmäßige verwenden. Finden wir in der rechten hier oder Pins 24, nicht Licht. Eigentlich. Licht ist irgendwie gut, So angewendet, um Schmutz zu verwenden. Und was ich tun werde, ist hierher zurückzukommen und DCE 2 zu entfernen. Ich werde das außerhalb einer Gruppe stellen, und ich werde die benutzen und sie in einen Holländer bringen. Dann für unsere Karte werde ich 7, 9 bis Woche 3, 0, 3. Es ist also schön groß. Und schließlich werde ich diesen Text auf 40 setzen. Es war auch die Trennwand. Irgendwann, dann für unsere Texte, werde ich diesen hier benutzen. Ich werde es einfach hier ausstrecken, was gut funktioniert. Und schließlich werde ich hier einfach in rot über den Standort schreiben. Und dafür, was Sie verwenden können, ist ein Plugin. Also mal sehen, was ich hier habe. Ich habe dieses Plug-in namens Fancy Maps. Und was ich tun kann, ist Zuteilungen von Paris ähneln. Ich kann hier klicken. Und dann, wenn es falsch ist Paris, können Sie es stylen. So können Sie eine Karte wie diese auswählen. Sie können eine Karte wie diese auswählen, und Sie können in die Stadtebene zoomen, etwa so und klicken Sie auf Karte anwenden. Es wird seine Magie wirken. Und wie Sie sehen können, wird es das finden. Das Problem ist, dass Sie nicht schwenken können. So können Sie vielleicht nur ein wenig mehr vergrößern um das Pariser Schild loszuwerden und dann auf Karte anwenden klicken. Und es wird das Paris selbst loswerden. Also kann ich hier reinspringen und meine Pin-Standortkarte finden. Hier ist es. Ich werde es direkt hier ziehen und ablegen. Und ich werde dieses Kartenbild nennen. Herbstkarte und BG, wie auch immer Sie es nennen wollen. Und ich werde es in eine Gruppenqualitätskarte einfügen. Und ich werde diesen Text zum Beispiel nennen. Und nur um die Dinge etwas besser zu organisieren. Und das ist es im Grunde. Die nächsten beiden Abschnitte werden im Grunde die gleichen sein. Sie werden alles über den Text sein. So sparen Sie sich ein bisschen mehr Zeit, Lassen Sie uns schnell kopieren und fügen Sie sie in genau hier. Und ich werde sie hierher ziehen, nur damit ich dich nicht langweilen kann. Aber im Grunde, wie Sie sehen können, sind diese Abschnitte genau die gleichen und sehen genau so aus wie all diese anderen. Und mal sehen, das funktioniert nicht für uns. Also werden wir das ändern zu Pop ist 36 fett. Also Preis beinhaltet, wird vier Stifte sein, 36 Volt. So wie das hier. Und wir werden es so hochziehen. Das wird 36 mutig sein. Bewegen Sie es so nach oben. Und mal sehen. Wir können das auf 100 und nach unten auf 100 verschieben. Und im Grunde sind diese Abschnitte abgeschlossen. Wie Sie sehen können. Was ich tun werde, ist, sie alle zu gruppieren. Also werde ich es eine Reiseinformation nennen, zum Beispiel, weil es alle Informationen über unsere Reise enthält. Also über unser Hotel, wo wir wohnen, über die Zimmerkategorien, über all das. So Stornierungsbedingungen und über Hotel und direkt unten. Also von Hotelfunktionen bis hin zu Stornierungsbedingungen traf Control G. Und wie gesagt, ich werde es eine Reiseinformationen nennen. Nun, was ich tun werde, und wenn Sie sich fragen, wie wir tatsächlich nach unten skalieren werden und wie das alles aussehen wird. Es ist eigentlich ziemlich einfach, weil wir nur Scrollgruppen in Adobe XD verwenden. Also lassen Sie uns sagen, dass ich es zum Beispiel behalten möchte, indem ich es zuerst in eine Gruppe setze. Also diese eine vertikale Schriftrolle. Und Sie können natürlich wählen, wo Sie es an der Spitze enden wollen, ich wollte nur irgendwo hier enden, also direkt über meinem Hotel verfügt. Und unten wollte ich gleich hier enden. Ich möchte, dass die Leute sehen, dass sie Zimmer sind und es diese Namen oder die Zimmer gibt, aber sie können auch weiter nach unten gehen. Und Sie können immer sicherstellen, dass, um dies zu erweitern oder zu verengen oder zu tun, was Sie wollen. Ich werde auch in Reiseinformationen umbenannt. Also, wenn ich Vorschau, wo ich höre, und ziehen Sie es hier, wenn wir nach unten scrollen, können Sie sehen, dass es direkt dort bleibt. Es wird also ein schöner und großer Abschnitt sein. Und der nächste Abschnitt, den wir eigentlich entwerfen werden, ist dieser Abschnitt hier rechts. Also dieser Abschnitt, wie Sie sehen können, Benutzer können leicht nach unten scrollen, leicht navigieren, während dieser Abschnitt wird setzen bleiben, Es wird sich nicht ändern und es wird die Verkäufe zu verbessern und massiv, weil sie kann nicht über diesen Teil hinaus scrollen, mussten sie durch diesen Teil scrollen. Sie können dies sehen und dann erhöht es das Potenzial von ihnen tatsächlich buchen die Reise und tatsächlich mit dieser Funktion mehr als einfach überspringen gehen gehen auf die nächste Seite. Also, was ich tun werde, ist, diese unterste Information zu verschieben , weil wir jetzt damit fertig sind. Und ich werde zum Beispiel mit hier herumziehen und diese Seite auf ungefähr hier ausschneiden, damit wir uns näher an uns herankommen können. Also mal sehen. Vielleicht kann es dies in so etwas bewegen. Sehen Sie, wo wir sind. Also sind wir bei 95, c 100. Jetzt sind wir bei 150. Also, jetzt, wenn ich Vorschau nur drücken, um Ihnen zu zeigen, Hier ist es. So kann der Abschnitt immer noch hier sehen. Und sie können damit interagieren. Aber das bleibt gleich und das bleibt bestehen. Dafür haben wir entworfen und das ist es, was wir angestrebt haben. Eine größere Conversion und ein größerer Aufenthalt in diesen Abschnitten und hoffentlich viel mehr Anmeldungen und viel mehr Buchungen. Das war's also für dieses Video. Im nächsten Video werden wir zurückkommen und diesen Abschnitt entwerfen, der voll von Feldern in Formularen sein wird. Es wird ziemlich mühsam sein. Also werde ich es für das nächste Video belassen, anstatt in dieses Video einzubeziehen. Und wir sehen uns im nächsten. 22. Erstellen von Wireframes in Adobe Xd 9: Lassen Sie uns jetzt voran und entwerfen Sie diese Sidebar. Und um das zu tun, werde ich mein Rechteck verwenden und sicherstellen, dass ich sechs Spalten breit bin, so. Ich werde auch die gleichen Einstellungen verwenden. Also ohne Rand und wann man Schatten benutzt. Also 55 Zone, im Grunde der gleiche Schatten. Und ich werde sicherstellen, dass ich 5% Deckkraft habe. Und ich werde es Sidebar BG nennen. Ich werde es auch direkt unter meine Reiseinformationen setzen, so dass es hier auf der rechten Seite bleibt. Was ich tun werde, ist, einige Elemente zu recyceln und sie zu verwenden. Das erste, was ich benutzen werde, ist dieser große Knopf. Und ich kann hier gehen, nach Big BTN suchen, Drag & Drop direkt hier. Ich werde das schließen. Und bevor ich weitermache, werde ich verwenden und Preis. Mal sehen, ob ich diese Preiskontrolle C schnappen kann, kann ich hier reinspringen. Control V, ich kann es direkt hier positionieren, und ich kann in meinen Ordner springen, ihn direkt hierher ziehen. Und mal sehen, wo der große Knopf hier ist er. Und lassen Sie es hier fallen. Ich schreibe jetzt im Buch, ändere das auf 1290. Bevor ich weitermache, lasst uns schnell sehen, ob wir auf dem richtigen Weg sind. sind wir. Lassen Sie uns es innerhalb des Horrorstatus ändern sowie Buch jetzt in den Standardzustand gehen. Und diese beiden werde ich sicherstellen, dass sie in der Mitte sind. Also lasst uns zuerst zentrieren sie im Landesinneren ausrichten und lasst uns sie in der Mitte so positionieren. Das erste, was ich ändern werde, ist die Entfernung. Also lasst uns sie tatsächlich gruppieren, stellen Sie sicher, dass sie in der Mitte sind. Großer Knopf. Stellen Sie sicher, dass es auch in der Mitte ist. Und dafür stellen wir sicher, dass es 40 runter ist. Also lassen Sie uns tatsächlich diese beiden schnell hier auswählen, 1, 2, 3, 4. Und dann tun Sie dasselbe für diesen. So wie Todesfälle. Also hier werden wir all diese Felder haben. Und lassen Sie mich Ihnen das sehr schnell zeigen, damit Sie hier sehen können. So haben wir Check-in, Check-out, die falsche Art, Erwachsenenservice, Ausflüge und insgesamt. Also im Grunde die gleichen Informationen, die wir gerade hier entworfen haben. So können Benutzer einfach aus diesen Angeboten hier auf der linken Seite auswählen. Sie können wählen und sie können diese Angebote hier auf der rechten Seite anwenden. Schließlich wird das den Preis in Echtzeit aktualisieren. Und dann können sie auf Buch klicken Schaltfläche, und dann können sie auf die nächste Seite gehen, die wird die Zahlungsseite sein, und wir werden das als nächstes entwerfen. Das erste, was ich benutzen werde, ist das. Also werde ich diesen Preis verwenden, zum Beispiel, ich werde hier reinspringen. Klicken Sie auf, um basiert. Und ich werde das auch so positionieren, dass es 40 ist. Und dann werde ich es knapp über meinen Preis bewegen. Das wird also Exkursionen genannt. Und ich gehe von unten nach oben, weil wir einige Elemente später ändern werden. Also zuerst für Schuldenausflüge, was wir tun wollen, ist dies zum Beispiel die Eingabe vg nennen. Aber noch besser, Lassen Sie es bei Dropdown BG lassen, weil es so war. Das erste, was ich ändern werde, ist die Breiten von 500, acht, ich werde ändern, dass 70 wird für die Höhe sein. Also, das ist in Ordnung. Und lassen Sie uns einfach dieses Pfeilsymbol verwenden. Also mal sehen, Pfeil nach unten, ich werde es an Ort und Stelle ziehen und ablegen. War es? War es nicht. Und ziehen Sie es hierher. Hier ist es. Und ich werde es hier belüftet , weil ich dieses Dollarzeichen entfernen werde. Wir werden es nicht brauchen. Und ich werde sicherstellen, dass das 40 ist. Und es wird zum Beispiel alles inklusive sagen. Weil Schulden, zum Beispiel, die Option, die Benutzer gewählt haben. Und dann werde ich sicherstellen, dass dieser Pfeil 40 von rechts ist. Also 1, 2, 3, 4, so. noch einmal sicher, dass alle von ihnen so in der Mitte sind. Das sind sie. In einer letzten Sache werde ich die Sidebar UND Exkursion auswählen, stellen Sie sicher, dass sie in der Mitte sind. Und schließlich, stellen Sie sicher, dass sie 40 von hier sind als nächstes, wenn ich dupliziert, also Control D und positionieren Sie es nach oben. Wie Sie sehen können, wird es wie dieser Bug sein, bevor wir weitermachen. Was ich hier oben brauche, ist der Text selbst. Also werde ich verwenden, zum Beispiel, dass Poppins 24. Also werde ich es duplizieren. Und mal sehen, stellen Sie sicher, dass es zum Beispiel 20. Und ich werde sicherstellen, dass es mit meiner Eingabe übereinstimmt. Also mein fiel auf BG, ich werde das hier auf Inklusive positionieren, sie nur ein bisschen bestellt. Das wird, wie ich sage, Poppins 24. Also lasst uns das runterbringen. Poppins 24 Lichter Stellen Sie sicher, dass es ausgerichtet ist und stellen Sie sicher, dass es 20 ist, so. Und schließlich Mischung, es ist diese dunkelgraue Farbe, die es alles inklusive ist. Und wir werden es nennen, Entschuldigung, das sollte Exkursionen sein. Und das wird Museen sein. Also Ausflüge. Museen, das ist in Ordnung. Noch einmal, nur eine kurze Überprüfung, bevor wir weitermachen. Das ist großartig. Das ist 40, das ist in Ordnung. Jetzt ist Service das, was als Nächstes sein wird. Also noch einmal, stellen Sie sicher, dass wir bei 40 sind. Das ist Service. Und ich mache das, denn wenn Sie Adobe XD duplizieren, legt es an die Spitze. Weil ich mein Layout bereits kenne, weiß ich schon, wie es aussieht. Ich gehe von unten nach oben. Weise ist es viel einfacher. So Service. Und hier werden wir in all inclusive schreiben, so. Und dann Control D. Ich werde es hier setzen. Es wird sagen, Erwachsene. Und wir werden in zwei so schreiben. Und für dieses hier, weil wir es halb so groß machen wollen, solide C, können wir es sagen, so Dropdown BG, wir können es zum Beispiel zwei bis vier sein. Es ist also nur halb so weit wie die ursprünglichen Einlässe. Die Vielleicht kann ich das tun. Keine Änderungen. Versuchen wir es jetzt. Da ist es, 1, 2, 3, 4. Da haben wir es. Wir haben Erwachsene zur Kontrolle D. und ich werde das bewegen und es Kinder nennen. Das wird so Erwachsene sein. Das werden also Kinder sein. Und sagen wir zum Beispiel eins. Also kommt nur ein Kind mit ihren Eltern zusammen. Also lasst uns es mit diesem und all seiner Linie das mit diesem ausrichten. Also haben wir den Abstand von 60. Das ist also der Abstand zwischen unseren Dachrinnen. Wie ich bereits erklärt habe. Wieder einmal sind wir bei 40, also ist das in Ordnung. Ich werde das duplizieren und es so nach oben verschieben. Positionieren Sie es für mich. Sicher, es sind 40 und das wird so zu Hause sein. Und ein Zimmertyp wird zum Beispiel Präsident sein. Weil diese Leute ihr Zimmer brauchen, weil sie mit Kindern unterwegs sind. Also mit einem Kind, in diesem Fall, der Zimmertyp. Schließlich, was wir hier einschließen wollen, ist das Plus-Symbol. Also lasst uns danach suchen. Ich glaube, es nennt sich nah. Ja, das ist es. Drag & Drop es einfach hier hinein. Ich werde es schließen. Und dann werde ich mich hier befinden. Also eine Zimmerkategorie hier ist es. Schließen Sie das Symbol, legen Sie es hinein und stellen Sie sicher, dass es damit ausgerichtet ist. Ein Kuppel-Typtext wie dieser. Und stellen Sie sicher, dass es ganz nach rechts geht, so. Wie gesagt, wir haben den Anzapfpunkt im Inneren. So schließen Symbol, weil es gedreht ist, gibt es uns die Illusion, dass es Klopfpunkt hat. Also im Grunde schuldet es. Jetzt ist das einzige, was für uns noch zu tun ist, diese Buchung oben zu erstellen. Also für den Check-in und Check-out, schließlich, werden wir dat erstellen. Um das zu tun, werde ich eins davon duplizieren. Also lassen Sie uns zum Beispiel unsere Erwachsenen benutzen , weil wir zwei haben werden. Und lassen Sie es uns so nach oben bewegen. So wie so. Und mal sehen, was ich ändern kann. Zum Beispiel kann ich das löschen. Ich kann da hineinspringen. Und ich werde das später ändern und verschiedene Animationen darin einschließen. Aber vorerst. Lassen Sie uns schnell einschließen, also werde ich die Höhe auf 118 ändern, so dass. Und dann werde ich es 40 bewegen. Und mal sehen, wir sind in der Entfernung von 18 von oben. So können wir vielleicht sogar die Größe dieses gesamten Hintergrunds erhöhen. Oder wir können diese Entfernungen auf 20 verringern, oder wir können etwas später damit herumspielen. Aber jetzt lassen wir es einfach und sehen, wo wir sind. Also werden wir diese Überprüfung meiner DAT-Daten nennen. Und innerhalb des Check-ins werde ich tatsächlich den Dropdown-Pfeil loswerden. Ich rufe das an, überprüfe ihn. Kontrolle D. Ich werde dieses bekannte und zum Beispiel 22. März positionieren. Also, wenn er will April 2021. Und ich werde dies auch zu dunkelgrau ändern , nur um sie ein wenig mehr zu unterscheiden. Und lassen Sie uns ihnen zum Beispiel eine Entfernung von 20 geben. Und buchen Sie sie so ein. Und stellen Sie sicher, dass wir 40 von diesem Rand entfernt sind, was wir sind. Das ist also unser Check-in. Und wir müssen auch eine Kasse entwerfen. Also werde ich es schnell duplizieren, stellen Sie sicher, dass unser Licht so aufleuchtet. Das wird ausgecheckt. Und sagen wir, es ist zum Beispiel 28 April, und nennen es einen Tag. Ich werde später einen Kalender entwerfen und Ihnen nur schnell zeigen, wie ich es gemacht habe. Aber bevor wir es tun, werde ich es schnell hier lassen. Das bestimmt also im Grunde, wie lange die Leute hier bleiben werden. Also im Grunde, je länger die Menschen im Hotel bleiben , desto größer ist der Preis wird vier auf das Zimmer selbst sein. Also, wenn sie diese Informationen aktualisieren, wird es den Preis unten aktualisieren und auch die Anzahl der Menschen, sorry, die Anzahl der Menschen, die in diesen Raum kommen, wird offensichtlich bestimmen, wie viele Betten tun sie brauchen, Zimmertypen oder wie groß der Raum ist, um loszulegen? Exkursionen. Wenn sie keine Ausflüge haben, Dan, können sie zum Beispiel keine wählen, und der Preis wird sinken. Du bekommst die mündliche Idee. Also eine letzte Sache, die ich tun möchte, ist die Größe dieser Sidebar BG tatsächlich zu erhöhen. Also, was ich tun werde, ist, alle meine Elemente zu verwenden. Leg sie hierher, 1, 2, 3, 4 runter. Und dann werde ich meine Sidebar BG so aufstellen. Nimm den Knopf, lege ihn 40 runter und bringe ihn dann runter. Weil ich nicht weiß, wie Matt, du kannst Matte benutzen, wenn du willst. Jetzt endlich, das ist abgeschlossen. Ich werde sie alle gruppieren, es Sidebar nennen. Und natürlich werden wir dies später erstellen, um Drop-Down-Menüs zu sein und alle möglichen verschiedenen Dinge zu sein. Aber im Moment lassen wir es einfach wie gesagt in, weil wir es behalten werden, wie es ist. Eine letzte Sache, die ich tun möchte, ist, es mit diesem zu verbinden. Also würden wir Hotelfunktionen. Also können wir das dann mit diesem Abschnitt direkt hier ausrichten, also bleiben beide genau so, wie sie sollten. Also, wenn ich Preview drücke und wenn es direkt hier springt, können Sie sehen, dass dies hier bleiben wird. Und offensichtlich können Entwickler es an Ort und Stelle reparieren. Stellen Sie sich also vor, es ist genau hier und dieser gesamte Abschnitt auf der linken Seite wird nach unten scrollen und Benutzer können offensichtlich alle diese Informationen sehen , bevor sie auf die Schaltfläche Buch jetzt drücken. Also lassen Sie uns das schließen. Und der Abschnitt, den ich vergessen habe, in hier zu bringen, ist, wenn eine Show Sie. Wir werden also ähnliche Hotels haben, die wir hier in diesem Abschnitt nicht aufgenommen haben, innerhalb des Papier-Drahtmodells. Der ähnliche Hotelabschnitt ist im Grunde da. Nur um Ihnen einige andere Optionen zu geben, denn diese Agentur arbeitet mit all diesen verschiedenen Hotels. Offensichtlich ist es ihnen nicht wirklich egal. Sobald Sie etwas buchen. Sie, sie wirklich, sie bekommen ihr Geld zurück, so dass es ihnen egal ist, ob Sie dieses Hotel oder ein anderes Hotel buchen. Offensichtlich, je teurer das Hotel ist, desto mehr Geld bekommen sie. Aber sie sind natürlich Kindertagesstätte für Sie, etwas anstatt gar nichts zu buchen. Also, was ich hier tun werde, ist hier zu springen, drücken Sie Control C. Ich kann diesen Abschnitt kopieren. Lassen Sie mich all diese Dinge schließen. Kontrolle V, bewegen Sie das hier. Und ich werde sicherstellen, dass das bei 150 ist. Von diesem. Ich werde es direkt unter meine Seitenleiste setzen. Ich werde ähnliche Hotels wie das eintippen. Und nur ohne zwei T's und nur eins. Und ich werde meinen Text kopieren. Und was wir hier genau tun werden, ist im Grunde die gleichen für den Standort zu verwenden. Also die gleichen wie hier für diese Städte. Und würde Control C verwenden, um eines von diesen zu kopieren. Springen Sie hier, treffen Sie Control V und sehen, von da an können wir zum Beispiel 100 sein, so. Und das wird Hotel sein. Und natürlich werde ich es ein wenig ändern , weil ich zum Beispiel drei verschiedene Hotels einbeziehen möchte. Lassen Sie uns das hier erweitern. Und mal sehen wir können, zum Beispiel, mal sehen, sagen wir, dass ich in diesen Tagen bewegen möchte. Also in diesen Tagen, den ganzen Weg bis hier, zum Beispiel, um 10 Pixel zu sein, weil alle diese oben genannten Informationen sind 10 Pixel als auch. Und dann, weil das in einem Stapel ist, kann ich es einfach erweitern, um hier zu sein. Und dann kann ich meinen Teiler auf der Unterseite bewegen, um die gleiche Breite wie dieser zu haben und dasselbe für die oberen Trennwände oder so etwas tun. Und offensichtlich, weil ich ein bisschen mehr Informationen hinzufügen muss, was ich eigentlich tun werde, ist in Absprache einen Stapel für diesen gesamten Abschnitt. Also gehen wir weiter hier runter. Und dieser ganze Abschnitt wird der Stapel sein. Also, was ich jetzt tun werde, ist tatsächlich diese Informationen für die Adresse zu verwenden. Also in diesem, werde ich es tatsächlich kopieren. Also traf Control C. Und ich werde direkt hier in meinem Stapel reinspringen und es hier oben platzieren. Also Control V, ich werde es hier setzen. Ich werde sicherstellen, dass es links ausgerichtet ist. Und mal sehen, vielleicht kann ich es 20 machen. Und dann setzen Sie es hier und dann stellen Sie sicher, dass diese beiden 20 sind, wie Sie sehen können, denn wir sind in einem Stapel, alles ist wirklich gut skaliert. Also werde ich sicherstellen, dass diese Informationen enthalten und ich werde nur sicherstellen, dass es 18 ist. Ich werde es auf automatische Höhe schneiden und ich bringe es zurück zu irgendwohin hier. So schneidet es unsere Texte hier wirklich schön. Und dann werde ich es noch 10 Pixel runterbringen. Also haben wir hier viel mehr Platz. Ich werde den Namen des Hotels kopieren. 24 Tage. Sagen wir, das werden eigentlich 12 Tage so sein. Nun, weil das abgeschlossen ist, erhöhen wir den Raum wie Dad. Und schließlich lassen Sie uns etwas anderes sehen. So im Jahr 1960, zum Beispiel, für diesen speziellen Fall, und das wird Preis sein. Das war's für unser Hotel. Jetzt machen wir noch zwei Kopien. Also Control D und das wird Hotel. Und schließlich auch Hotel da drin. Und wir können ihnen sogar Namen geben, wenn wir Hotel eins, Hotel zwei und schließlich Hotel drei lösen wollen . Gruppe, die alle kontrollieren G. Das wird Hotels sein. Und schließlich können wir diese Bodenbildung jetzt einbringen und sie auf 150 bringen. Dunkel wie hier. Schließen Sie unsere Zeichenfläche bis zur Fußzeile unten ab. Also den ganzen Weg bis hier und da haben wir es. Diese Informationen auf dieser Seite und Abschnitten sind ausgefüllt. Wie Sie sehen können, dauert es manchmal ein bisschen Zeit, bis Sie fertig sind. Manchmal wird es viel einfacher zu vervollständigen sein. Aber durch die Verwendung dieser fortgeschrittenen Techniken oder wie ein Scroll-Gruppen und wie Scroll-Punkte und eine Breite, all diese festen Elemente, wie Sie sehen können, werden Sie wirklich schöne Seite bekommen, vor allem, wenn Sie bereits wissen, wie Ihr Layout wird aussehen, wie all das mit nur ein paar Animationen aussehen wird. Sie können dies jetzt mit Ihrem Kunden teilen. Und sie können einfach mit ihren Pfeiltasten auf ihrer Tastatur links und rechts durchblättern . Und sie können Ihnen ein paar erste und grundlegende Rückmeldungen über dieses Layout, über diese Farben, über die Topographie, über die Größen geben, mögen sie den Stil dieser Symbole? Wenig wie der Stil dieser Hintergründe, Schatten und all diese zusätzlichen Elemente, die ein Feedback geben können. Und sie können zu dir sagen: Mögen sie es oder nicht? Das war's also für dieses Video und diese Seite. Schließlich werden wir im nächsten Video zu dieser letzten Seite übergehen, die unsere Zahlungsseite sein wird. Und wir werden es hoffentlich in einem einzigen Video vervollständigen. Also sehe ich dich dort. 23. Erstellen von Wireframes in Adobe Xd 10: Lassen Sie uns jetzt mehr ein Ende entwerfen unsere Zahlungen grün, das wird unser letzter Bildschirm für unseren Wireframe sein. Ich werde einfach meine Alt-Taste zeigen und ziehen, um sie zu duplizieren. Ich werde es eine Zahlung nennen. Und das erste, was ich tun werde, ist das tatsächlich zu löschen und dies zu löschen, alle diese Abschnitte mit Ausnahme des unteren Abschnitts zu löschen. So wie wir es für alle unsere Seiten getan haben, und ich werde es vorerst hier lassen. Als nächstes werde ich es hier zusammenfassen, Control G und es Watson schmerzhaft nennen. Und lassen Sie es einfach so für jetzt. Was wir hier machen werden, besteht aus drei Teilen. So Trip Details, die gehen, um alle Details, die die Benutzer haben hier gebucht aufgelistet. Es wird aus Zahlung bestehen. Wer sind Benutzer, die in der Lage sein werden, ihre Zahlungsmethode zu wählen? Und schließlich wird es aus Konformation sein, die aus dem Bestätigungsbildschirm sein wird. Und sie werden in der Lage sein, ihre Wahl zu bestätigen. Das erste, was wir entwerfen werden, ist die Karte, die zu halten wird oder alle diese Informationen. Also mal sehen. Wir können es irgendwo um 100 Pixel setzen. Also im Grunde das gleiche wie die Breite hier. Also, nur um die Konsistenz zu halten, werde ich diesen Abschnitt kopieren und einfügen und dann diese Behauptung ausrichten. Also dort haben wir es ungefähr 100. Und ich werde sicherstellen, dass und tote Abwerfen. Also nennen wir es eine Zahlung. Kann g sein ich werde es hier verschieben. Und wie wir sehen, ist es ungefähr 100, ist 774 in der Höhe so. Und wir können alle die gleichen Informationen verwenden. Also fünf ohne Schatten, 55, 10, schließlich 54, die Deckkraft. Als nächstes werde ich drei Details wie das eintippen. Und ich werde es hier ändern. Zuallererst werde ich wählen, lassen Sie uns die Details der Reise sehen. Ich kann Poppins 36 fett zum Beispiel verwenden, damit. Und ich werde es so ausrichten und so. Und dann ziehe ich um 40 runter. Also 1, 2, 3, 4. Und ich werde es auch für die A von links nach rechts verschieben. Also 1, 2, 3, 4. Als Nächstes werde ich es duplizieren. Positionieren Sie das hier. Ich nenne es Bezahlung so. Und weil wir 12 Spalten haben, werden wir sicherstellen, dass das so ist. Das beansprucht also vier Spalten. Grundsätzlich wird diese Zahlung bis vier Spalten n. Schließlich, wenn wir es eine weitere Konformation duplizieren. Dies wird auch vier Spalten dauern. Also 1, 2, 3 und 4. Jetzt Bestätigung Embayment, wir werden es auf ein hellgrau senken. Und wir werden diese Dinge auch ein bisschen besser so organisieren und öfter so runter gehen. Da Reisedetails derjenige sind, der ausgewählt wird, wird die Zahlung als nächstes kommen und schließlich Bestätigung. Also lassen Sie uns Informationen von unserer Hotelkarte verwenden. Also diese, ich werde es schließen, positionieren Sie es hier. Stellen Sie sicher, dass es irgendwo hier ist. Und mal sehen, vielleicht kann ich es bewegen, um zu sehen. Ich weiß es nicht. Ich denke an so etwas wie 80. Ich denke, das wird gut. Also 12345678 von diesen, das ist in Ordnung. Wir werden schnell einige dieser Informationen ausrichten und schnell einige von ihnen loswerden. Also haben wir das Hotel, wir haben ein Ziel, wir haben die Bewertung, wir haben das Hotelbild. Lassen Sie mich es so hinunterschieben. Aber hier werden wir alle diese anderen Elemente ändern. Also zuerst werden wir Informationen wie Leute einschließen, zum Beispiel, wie viele Menschen sind in einem, wie viele Leute tatsächlich diese Reise buchen? Lassen Sie uns also schnell voran gehen und die Gruppierung dieser Informationen aufheben. Also werde ich das hier verlassen, aber ich werde das loswerden. Also für DAT, verwenden wir so etwas wie zwei Erwachsene plus ein Kind. Und ich werde auch hier klicken, damit ich es so verschieben kann. Er könnte D kontrollieren und mal sehen, vielleicht 20. Aber zuerst, ändern wir es auf 24. Und mal sehen, wir können das dunkler machen, ich kann es leichter machen, nur um es ein wenig zu differenzieren. Und mal sehen, ich kann das auf 20 bringen. Aus irgendwelchen Gründen. Manchmal gibt es mir diese halben Pixel. Also weiß ich nicht, warum es das tut. Also mal sehen. Ich kann das so früh bringen. Ich denke, es wird gut funktionieren. Und dann können wir diese Abschnitte auf 40 nach unten verschieben. Und dann können wir das in die Mitte bringen. Mal sehen. Ich kann das verwenden und ich kann insgesamt schreiben. Und schauen wir es uns so an. Ich kann es in einen Stapel legen, kann einen Stapel wie diesen verwenden. Und ich kann sicherstellen, dass es in der Mitte ist. Also 26 und es ist 40 von hier, es ist 56 von hier, mal sehen, 41, also sind es 40 unten, aber 27 von hier. Also lasst uns diese Position hier benutzen. Lassen Sie uns diese Symbole, wo sie sind. Und wir können das zum Beispiel loswerden. Und dann kann das hier, 1, 2, 3, 4, 5, 6. Also ist es im Grunde genau das gleiche wie dieses. Ich werde einfach verlängern. Diese beiden hier und das ist die Schönheit dieser Layouts, weil sie ganz einfach zu ändern sind. Sie sind ganz einfach zu umgehen. Und wir werden Leute hier eingeben. Und ich werde das gruppieren, es Leute nennen. Dann werde ich Control D benutzen, weil wir vier davon haben werden. Wir werden eine Spalte leer Allel und gehen direkt nach hier zum Beispiel, und sammeln diese. Ich denke, es funktioniert gut. Das ist also 18 bis 24, was in Ordnung ist. Dies wird sagen, falscher Typ. Also tippen Sie nicht. Und es wird Präsident Raum retten. Also im Grunde, was auch immer wir hier in der Sidebar ausgewählt haben, wir werden einfach sicherstellen, dass Sie hier auf dem Bildschirm der Zahlung bestätigen. Also werde ich das duplizieren, stellen Sie sicher, dass es genau hier ist. Also habe ich 1 leere Spalte. Das wird ein Dienst sein. Und der Service wird alles inklusive sein. Tiefe. Und schließlich werden wir hier noch eins haben. Und wir werden diese Exkursionen nennen. Nun, ich werde nur eintippen. Ja. Aber Sie können mit Ihrem Kunden sprechen, wenn er benutzerdefinierte Ausflüge hier wollen. So zum Beispiel Museen, Wandern, Sightseeing. Also all diese Dinge mit drei Punkten am Ende zum Beispiel. Also lassen Sie es hier bei 60 von rechts schneiden. Ich denke nur, dass Ja für diesen Abschnitt völlig ausreicht. Und ich denke, es wird ganz schön aufstehen. Jetzt, da wir all diese Informationen haben, werde ich das im Grunde benutzen. Also haben wir diese Hotelkarte. Ich werde hier reinspringen und meine große Taste benutzen und Drag & Drop an Ort und Stelle. Ich werde das schließen, zurück zu meinem Ebenen-Panel und ich werde es hier positionieren. Stellen Sie sicher, dass es so in der Mitte ist. Und mal sehen, vielleicht schaffe ich es und bin bei 14 unten. Also lasst es uns zuerst so positionieren. Also 1, 2, 3, 4. Was wir hier haben, ist 94, was im Grunde in Ordnung ist. Vielleicht wäre es besser, es bei 100 zu haben, aber ich denke, es ist in Ordnung. Vielleicht können wir auf diese Karte vielleicht auf sechs Pixel schneiden. Also mal sehen, wir sind bei 39 eins. Also weiß ich es nicht. Vielleicht, aber wir sind bei 40. Lassen Sie uns es also einfach so und lassen Sie uns nicht zu viel damit herumspielen , weil dies im Grunde der Zahlungsabschnitt ist. Also werden wir Hoteldetails haben und dann werden wir Karteninformationen haben. Also lasst uns zuerst diese Schaltfläche ändern, um fortzufahren. Zahlung nahm, weil die Zahlung ist der Bildschirm, der Bildschirmbereich, den wir als nächstes entwerfen werden. Also fahren Sie mit der Zahlung fort. Und was ich tun werde, ist im Grunde diesen Knopf zu duplizieren. Ich werde diese beiden gruppieren. Ich werde es Hoteldetails nennen. Wie Schulden. Und im Grunde, was ich tun werde, ist, dass ich das verbergen werde. Und ich werde die Karteninformationen entwerfen oder später. Aber vor einem verstecken es, Ich möchte nur schnell Indies zeichnen, die Richtlinien sind. Weil ich im Grunde die Konsistenz all dieser Elemente beibehalten möchte, und ich möchte, dass all diese Elemente in diesem Ballpark wie ein hier sind. Also Hoteldetails, ich kann sie jetzt einfach verstecken. Und wir haben diesen Knopf, der jetzt in Lohn schreiben wird, aus irgendeinem Grund ist es ärgerlich, also lasst es uns überprüfen. Ich weiß nicht, warum. Das tut es. Ich weiß nicht wirklich, warum es sich nicht zeigt. Wie Sie sehen können, haben wir hier einen Fehler. Wenn ich also zu schweben gewechselt habe, können Sie sehen, dass sich nichts ändert. Also lassen Sie mich schnell mein Dokument speichern und darauf zurückkommen weil es offensichtlich eine Art Bug mit einem Adobe XD gibt. Also oder vielleicht hat es das geändert. Also lassen Sie es uns überprüfen. Ja, es änderte diesen Knopf, also war es kein Käfer. Also lasst uns das in bringen und ging zum Schreiben sind hier, weiterhin zur Zahlung. Und mal sehen, ob es hier gleich geblieben ist. Ja, das hat er. Also werde ich die Deckkraft tatsächlich senken aber sie verstecken, damit es nicht alles hier drin zeigt. Ich werde jetzt im Lohn schreiben. Jetzt ist es gut und manchmal können diese Dinge passieren und Sie werden bemerken, dass später, wenn wir tatsächlich zu animieren Phasen unseres Designs kommen. Es wird also ziemlich schwierig sein, sich zurechtzufinden, aber wir werden einfach all diese Elemente verstecken. Sie können sich also vorstellen, dass Benutzer auf Zahlung klicken. Sie werden zu diesem Bildschirm kommen. Also lassen Sie mich das hier sogar hinweisen. Damit werde ich das verstecken. Also hier sind wir auf dem Bezahlbildschirm. Was wir brauchen unabhängige Bildschirm sind einige Kartenoptionen. Also lasst uns diese benutzen. Und wann man diesen Dienst zum Beispiel benutzt , weil er schön weiß ist. Und lasst es uns gleich hierher bringen. Kontrolle V. Ich werde es irgendwo hier platzieren, sind ungefähr so sind wir zum Beispiel vier Säulen breit. Lass uns das machen. Ja, wir sind vier Säulen breit. Also werde ich den aktuellen Ordnernamen sagen. Und jetzt lassen Sie uns einen zufälligen Namen wie JSON Meilen verwenden und wird älter Name Control D sein. Ich werde diesen hier positionieren, aber bevor ich es tue, bin ich, was ich den Dropdown-Pfeil entfernen soll, weil wir nicht brauchen es. Und anstelle von Dropdown-BG wird dies Eingabe vg sein, weil es InputField an Ort und Stelle sein wird. So wie so. Und das wird die Kartennummer sein. Also Kartennummer. Und lassen Sie mich schnell. Kopieren Sie meine Nummer und fügen Sie sie hier ein. Also hier ist es. Jetzt werde ich diesen noch einmal duplizieren und sicherstellen, dass ich bei bin, mal sehen, ich denke, 40 wird ziemlich gut werden. Also mal sehen, ja, 40. Lassen Sie uns die gleiche Konsistenz wie diese behalten. So wird dies Ablaufdatum wie das und wann so etwas wie 12 Monate 2025 sein. Ich denke, das ist gut. Also Ablaufdaten, ich werde es unten unter meine Nummer bewegen und schließlich bewegen Sie diese untere hier um hier. Und das wird C VC sein, was von Ihrem Code zurück ist. Also CVC-Code. Und geben wir eine Zufallszahl wie 1, 2, 3. Und schließlich, was wir hier brauchen, ist die Möglichkeit für sie, zum Beispiel mit PayPal zu bezahlen. Also lassen Sie uns schnell hineinspringen, duplizieren, und legen Sie es um mehr mit hier. Und was ich tun werde, ist tatsächlich alle von ihnen zu benutzen. Und es stellt einfach sicher, dass sie so in der Mitte sind. Und schließlich Tod dx, die wir duplizieren. Ich werde es richtig positionieren. Deshalb werde ich jetzt sicherstellen, dass es um 18 Uhr ist. Es ist dies oder oder mit PayPal bezahlen. Stellen Sie sicher, dass es zentriert ausgerichtet ist, stellen Sie sicher, dass es so ist. Und ich werde sicherstellen, dass es auf der Leitung steht. Es ist 62, aber es spielt keine Rolle, weil wir es später runterbringen können , oder wir können die Größe erhöhen, damit du tun kannst, was du willst, aber ich werde es einfach so behalten. Also werden wir sie alle gruppieren, sie runterbringen. Ich werde diesen Strom für Mation so nennen. Und jetzt ist der nächste Schritt für uns die Konformation. Also wird die Konformation wirklich ganz einfach sein. Es wird also nur zwei Texte haben und es wird eines dieser Symbole haben, aber es wird zwei verschiedene Schaltflächen enthalten. Also werde ich eine Kopie machen. noch einmal sicher, dass ich meinen Knopf reinbringe. Stellen wie diese wechseln. Doppeltippen, um auf 0 zu senken. Dies wird unser großer Button sein und wir werden es tatsächlich ein wenig ändern und eine weitere Kopie machen. Aber bevor wir es tun, lassen Sie uns schnell mit diesem Abschnitt beschäftigen. Also, was ich brauche, ist Ihre Reise wurde Text gebucht. Also ist es schwach eingetippt. Ihre Reise ist also so gebucht worden. Und ich werde sicherstellen, dass es 36 mutig ist. Irgendwann werde ich es in der Mitte positionieren. Und das, und natürlich können Sie sich vorstellen, dass dies der Bestätigungsbildschirm ist. Also in der Mitte, Ihre Reise wurde gebucht Control D. Lassen Sie uns weiter nach unten und lassen Sie uns dies zu 18 verwenden. Ich werde einen Text fallen lassen, stellen Sie sicher, dass er grau ist. Jetzt sehen wir mal. Was ich tun kann, ist zum Beispiel, Mischung, dass sie 40. So, stellen Sie sicher, dass es in einem Zentrum ist, das ist in einem Zentrum wie diesem. Und ich werde sicherstellen, dass es irgendwo hier ist. Und lassen Sie uns jetzt schnell dieses Symbol einschließen. Also das Symbol, das ich verwenden möchte, ist det von einem Globus. Also lassen Sie es mich schnell finden genau hier in dieser so Weltreisenden Ikone. Also werde ich mich positionieren und wagen, dass es in der Mitte ist. Verwenden Sie die Gliederungsversion. Und mal sehen, vielleicht kann ich bei 80 sein, irgendwo hier. Und lassen Sie uns das hier schnell so einrichten , dass wir genug Platz haben, so dass es im Grunde für diesen Abschnitt, das einzige, was für uns zu tun bleibt, ist, diese Tasten zu entwerfen. Also werde ich ein Symbol darin einschließen. Aber bevor ich es tue, möchte ich sicherstellen, dass Sie dies links ausrichten. Ich werde schreiben und herunterladen erhalten. Weil sie in der Lage sein, Download erhalten offensichtlich. Und ich werde in PDF-Symbol eingeben, Drag & Drop es an Ort und Stelle. Dann werde ich es so positionieren, dass es so drinnen ist. Wählen Sie es und diese Seite und diese beiden, die Mitte ist es. Also noch einmal, ich werde tatsächlich mischen, um es richtig zu machen, so. So 1234. Mal sehen, ob das breit genug ist oder auch. Mal sehen, weil all das zu gut, um in der Mitte zu sein. Wir denken, das sieht gut aus. Also, was ich tun werde, ist Kontrolle C für beide zu drücken, in meinen Horrorzustand zu springen, Kontrolle V, ich werde jetzt zahlen löschen. Und für diese beiden werde ich mich einfach so umdrehen und zu weiß machen. Dann gehen wir zurück in den Standardzustand. Und ich mache tatsächlich eine Kopie davon, positioniere sie hier. Und auf dieser Kopie werden wir ihn wieder schreiben. So werden die Benutzer in der Lage sein, zurück von diesem Button, Home-Icon, Droge und ersetzen in diesem zu springen . So wie so. Ich werde sicherstellen, dass ich bei 40 bin, was ich im Grunde bin. Aber schauen wir es uns noch einmal so an. Und ich werde das schließen. Wählen Sie beide aus und stellen Sie sicher, dass ich mich in der Mitte meiner Schaltfläche befinde. Wie werden sie nicht einfach in eine Gruppe gesetzt und stellen Sie sicher, dass sie in der Mitte der Gruppe sind, und drücken Sie einfach Control C, um sie zu kopieren. sprang in den Horror-Zustand Control V Ich werde diese beiden löschen, diese beiden bringen und sicherstellen, dass sie weiß sind wie. So. Gehen Sie zurück zum Standardzustand anterior, wir haben es. Das letzte, was wir tun müssen, ist, diese Informationen zu gruppieren, einfach neben unseren Icons und neben unseren beiden Buttons erstellt. Also da haben wir es. Dies wird der Text für eine einfachere Organisation sein, offensichtlich Feststoffe und gruppieren sie und nennen diese Konformation so. Ich werde es auf 0 senken und wann ich das zurückbringen 100, was in Ordnung ist, und das wird 0 sein. Ich bringe das zurück und bringe es bis zu 100 Fahrtdetails. Ich werde es zu schwarz und Konformation zu diesem hellgrauen. Das letzte, was ich tun möchte, ist tatsächlich all das gruppiert. Also werde ich es einfach als Zahlung nennen. Und wir werden meine untersten Informationen einbringen. Und mal sehen, wo wir genau dort sind. Also 1, 2, 3, 4 als bringen zu 150, was in Ordnung ist. Und lassen Sie uns schließen unsere, unser Brett endlich, um diese Seite zu beenden, offensichtlich, später, Ich werde diesen Abschnitt animieren und ich werde sicherstellen, dass diese Animationen schön und glatt sind, wie Sie in der erste Video von der Einführung dieser Klasse. Also im Grunde werden wir auf Registerkarte zwischen all diesen verschiedenen Zuständen animieren. Aber im Grunde ist es das für den Wireframing-Bereich. Wie gesagt, es ist ziemlich lang für dieses spezielle Projekt, weil wir eine Reihe von diesen Elementen auf dieser Seite und auf dieser Seite haben . Deshalb hat es so lange gedauert, das zu erschaffen. Im nächsten Video werden wir eigentlich mit dem Design selbst beginnen, wir werden mit und Navigation beginnen, weil es ziemlich komplex in diesem Projekt ist, wie alles mit diesen anderen Elementen. Wir fangen damit an. Und dann, nachdem wir es beendet haben, werden wir mit dem Design all dieser anderen Abschnitte fortfahren. Und ich werde Ihnen einige wirklich komplexe und interessante Interaktionen zeigen. Also sehe ich dich dort. 24. Adobe Xd: Adobe XD hat seine Fehler hier und da, aber das Team arbeitet hart mit den regelmäßigen Updates. Sie aktualisieren die Software jeden Monat. Manchmal sind diese Updates nur einige kleinere Fehlerbehebungen, aber manchmal gibt es einige wichtige Überholungs-Updates, wie Sie in gesehen haben, wie Sie tatsächlich in der Mitte dieser Klasse sehen, wenn sie die Benutzeroberfläche aktualisiert haben. Also gingen wir jahrelang von diesem Hamburger-Menü in das oberste Menü, wie ihr Kopf auf einem Mac , im Grunde, manchmal werden Sie einige Pannen sehen und Sie werden sie in dieser Klasse sehen. Aber verstehen Sie nur, dass einige dieser Störungen auf meinem Ende sind , weil ich Aufnahmesoftware auf Adobe XD verwende. Ich benutze zwei Fenster von Adobe XD gleichzeitig, beide Dateien sind riesig. Ich verwende die Audioverarbeitung für dieses Mikrofon. So ist es ein Prozess natürlich, um das Video. Also, all diese verschiedenen Optionen machen eine Anstrengung auf meiner Maschine. Und deshalb wirst du hier und da einige Bugs sehen. Wenn es um Fehler auf Ihrem Computer geht, sollten Sie keine Fehler sehen, solange Sie Adobe XD regelmäßig aktualisieren. Also, wo immer Sie sehen, dass diese Updates verfügbar sind, stellen Sie sicher, dass Sie es aktualisieren und stellen Sie sicher, dass es auf der neuesten Version sein. Daher gibt es eine gute Möglichkeit und eine gute Chance, dass Sie gehen, um diese Fehler zu vermeiden. Aber wie jede andere Software da draußen und nicht nur Adobe-Software oder andere Software. Sie werden hier und da ein paar Bugs sein. Aber wie auch immer, Adobe XD ist meiner Meinung nach immer noch eines der besten Werkzeuge seiner Klasse, vor allem für UX-Design, weil Sie all diese verschiedenen Optionen in einem Tool haben. So wenige Bugs hier und da werden nicht die Rückseite von XD und alle seine Funktionen und Funktionen bestimmen . Deshalb wollte ich Sie nur wissen lassen, dass Sie hier und da einige Fehler sehen werden, besonders beim Speichern, vor allem bei der Dateneingabe und vor allem bei Texten. Zum Beispiel werden Sie einige Fehler in dieser Klasse sehen, die zum Beispiel einen Ordner umbenennen oder Ordnerstruktur umbenennen, hier und da kopieren. Aber ich habe in der Bearbeitung versucht, all diese Fehler zu beheben. Sie werden sie also nicht so sehr sehen, wie Sie es wahrscheinlich tun würden, wenn Sie hier bei mir sind und direkt mit mir an diesem Projekt arbeiten. Auch in einigen Fällen ändere ich meine Meinung. Als Designer versuchen wir immer, die bestmögliche Lösung für unser Projekt zu finden. Und in diesem Fall ändere ich meine Meinung über die UX einige Male. Daher mache ich einige Änderungen und deshalb versucht XD, mit mir die ganze Zeit Schritt zu halten. Also seien Sie sich dessen bewusst. wirst du nicht so oft sehen. Aber ich als Designer und als Content-Creator, immer versuchen, nach Perfektion zu streben, was im Grunde unmöglich ist, aber ich tue mein Bestes hier, um dies so einfach und angenehm für euch Jungs zu machen , die wie möglich. Sie sehen also diese Fehler nicht, Sie sehen diese Störungen nicht und Sie sehen diese Posen und Fehler von Adobe XD nicht. Also wollte ich es dir nur wissen lassen. Und mit allem, was gesagt wird, gehen wir zurück zum Design und beginnen wir mit der Erstellung von Design in Adobe XD. 25. Navigation erstellen: In Ordnung, jetzt, wo die Drahtmodelle endlich fertig sind, gehen wir nun zum Design. Und bevor wir tatsächlich mit dem Design übergehen, gibt es ein Schlüsselmerkmal, das wir entwerfen müssen , nämlich die Navigation, denn dieses Projekt wird in Bezug auf Navigationen und Animationen ein wenig komplex sein . Nichts zu verrückt, aber es erfordert eine Menge zusätzlicher Arbeit, anstatt nur diese grundlegenden Navigationen, die Sie von Seite zu Seite nehmen werden. Und das wird ein separates Drop-Downs enthalten. Das erste, was ich anfangen muss, ist, dass ich diese Heldenseite hier benutzen werde. Und ich werde es tatsächlich kopieren und auf diese Seite schieben. Um loszulegen, werde ich einfach meine Alt-Taste gedrückt halten, wie wir es bisher getan haben, und einfach duplizieren und irgendwo hier positionieren. Nun, weil wir später auch ein ansprechendes Design haben werden. Deshalb positioniere ich es hier. Sie können sich also vorstellen, dass wir diese drei hier haben werden. Und wenn wir auch genug Platz für das responsive Design haben, später, wenn Sie möchten, können Siespäter, wenn Sie möchten,ein mobiles Erlebnis direkt hier für die mobile App gestalten , zum Beispiel, wenn Sie daran arbeiten. Aber wie ich für dieses Video sagte, werden wir uns streng auf die Navigation konzentrieren , weil es ein wenig komplex sein wird. So Homepage, ich werde in InDesign eingeben nur damit wir wissen, dass dies das eigentliche Design ist. Also, was wir zuerst tun würden, ist, dass ich es öffnen werde. Und im oberen Teil haben wir das Heldenbild. Und ich kann damit beginnen, Bilder einzubringen. Und nur damit das alles wirklich schön hervorsticht, das werde ich eigentlich tun. Also habe ich all diese verschiedenen Bilder für den Heldenbereich vorbereitet und so weiter. Also, was ich hier habe, ist das erste Bild. Also lassen Sie mich Drag & Drop in diesem Bild. Also werde ich es zum Beispiel Heldenbild Nummer eins nennen. Ich werde es zwei Mal duplizieren. Das wird also Nummer 1 sein, das wird Nummer zwei sein, und das wird Nummer drei sein. Also werde ich die Deckkraft dieses ersten senken, zum zweiten gehen und mein zweites Bild finden. Also lass mich mal sehen. Dies ist mein zweites Bild, das ist das Bild von Paris. Aber leider hat es wieder dasselbe getan. Also lassen Sie uns dieses schnell verstecken. Und dann ziehen Sie mein Bild hier auf dieses zweite, so. Das wird also Nummer 2 sein. Ein Weg, um niedriger als die Fettleibigkeit versteckt n für die Nummer drei, die in Peking sein wird. Ich werde es direkt hier ziehen und ablegen. Jetzt, wo wir alle unsere Bilder haben, werde ich sie so zeigen. Mal sehen, das ist Paris. Ich weiß nicht, warum es das tut, aber lassen Sie uns mitbringen, dass das ganze Gada, Paris und Peking sein wird. Also diese drei Bilder. Bevor wir weitermachen, muss ich etwas erschaffen. Eine Unschärfe. Also, was ich tun werde, ist, eines dieser Bilder zu duplizieren, Control D. Und ich werde es das primäre Navi nennen und Unschärfe wie dieses. Also, was ich tun werde, ist eine Farbe zu verwenden. Zum Beispiel, dieses hier, mal sehen. Also 300, 300, 300. Ich denke, das funktioniert gut. Und ich werde die Hintergrundunschärfe n für den Betrag einschließen, den ich 25 verwenden werde. Hier, ich werde 50. Also ein ziemlich großer Wert. Und hier werde ich 65 so benutzen. Und ich werde die Fettleibigkeit bei 100 behalten. So können Sie sehen, dass diese wirklich schön hervorstechen. Und was wir jetzt tun werden, ist im Grunde Heldenbild wird sowieso untergehen. Also werden wir im Grunde einfach diesen Helden, Helden-Texte und nach unten bewegen . Wir werden Pfeile und runter bewegen, so. Und wir werden nur mit dieser Unschärfe übrig bleiben. Also primäre nav Unschärfe. Das nächste, was wir tun werden, ist die Arbeit mit unserem primären Navi. Also haben wir unser Hauptnav und unter den Zielen werden wir einen Selektor erstellen. Also werde ich ein Rechteck verwenden und ein schönes großes Rechteck wie dieses ziehen. Es wird also eine Höhe von zwei sein. Es wird keine Grenze enthalten und die Füllung wird weiß sein. Der ganze Sinn ist also, die gleiche Entfernung wie dieser Text zu sein, so. Und ich werde einfach um die Ecken zu fünf sein. Jetzt in Bezug auf die Entfernung, können wir es zum Beispiel bei 10 sein. Also Schicht und in der Stadt. Es wird also zeigen, dass dies das ist, was ausgewählt ist. Also nennen wir es wie Punkte oder Selektor, so. Um es hier zu sagen. Und das nächste, was wir eigentlich tun werden, ist, dass wir die Gruppierung aufheben. Also werden wir alles in einer Gruppe haben und wir werden dasselbe für sekundäre Navigationssysteme in ein bisschen tun, aber lassen Sie es uns schnell nach oben bewegen, zum Beispiel, nur um es aus dem Weg zu halten. Das nächste, was ich tun werde, ist tatsächlich diesen Tab-Punkt für unser Logo zu erstellen. Erstellen Sie also einfach ein Rechteck wie diesen hochwertigen unteren Tap Point so. Und ich werde die Grenze entfernen oder die Füllung entfernen. Und das ist es im Grunde. Sie können es zum Beispiel einfach auf das nächste Pixel Ihres Logos aufrunden . Nur so hebt es hervor und es ist leicht angreifbar. Also werden wir das für unser Logo behalten und wir können es ein Logo nennen. Habe ich. Also für unsere Destinationen, müssen wir diese Destinationen erstellen. Und lassen Sie uns das auch schnell aus dem Weg bringen, weil es sich verstecken wird. Also für diese Ziele, Lassen Sie uns diesen Text schnell duplizieren. Ich werde es hier runterziehen und sicherstellen, dass es so ausgerichtet ist. Und ich werde sicherstellen, dass es 80 von meinem Selektor so ist. Und mal sehen, wir können es so etwas wie Reiseziele in Europa nennen. Poppins 24 Licht ist gut, und lassen Sie uns dat finden. So Europa, hier ist es, Europa Destinationen Symbol. Ich werde es hier positionieren. Und ich werde sicherstellen, dass es in der Mitte ist, so. So wie das. Ich werde es schließen. Und schließlich kann ich es zum Beispiel auf etwa 20 bringen. Mal sehen, wie das aussieht. Ich denke, das funktioniert gut mit unserem Logo, sorry, mit unserem Symbol. Und jetzt lasst es uns hierher bringen. Und mal sehen, ob wir bei 80 sind. Das sind wir. Und das ist großartig. Der nächste Schritt für uns ist also, diese Destinationen tatsächlich in Europa zu schaffen. Also lasst uns das alles nach unten bringen. Also dieser Nation Selektor. So Europa, Ikone Destinationen in Europa. Lassen Sie uns das kopieren. Also Control D, ich werde es hier positionieren. Und diese Destinationen werden etwas kleiner sein. Also ein t. Und zum Beispiel können wir sie so etwas wie 40 von hier setzen. Stellen Sie sicher, dass sie links ausgerichtet sind. Also wird das erste Paris sein. Weil es sechs von ihnen sein wird. Sie gehen zu jeder nehmen zwei Spalten. Also können Sie entweder ein Wiederholungsraster verwenden, wenn Sie wollen, was ich eigentlich so aussehen werde. Also 23456, was in Ordnung ist. Und im Grunde werde ich einfach den Raum vergrößern , so dass ich sie ungefähr hier herum legen kann, irgendwo um das Gitter aufheben. Also wird der zweite London sein. Das hier wird Prag sein. Der nächste wird da sein. Und schließlich wird hier Barcelona sein. Lassen Sie sie nicht schnell mit unserem Gitter ausrichten. Das hier, das hier, das ist in Ordnung und Barcelona ist in Ordnung. Und schließlich haben wir noch eine und wir werden es hier in der Mitte dieser Stop-Texte wie diese platzieren . Stellen Sie sicher, dass es richtig ausgerichtet ist. Und du wirst C. Alle eingeben . Ich werde sicherstellen, dass es unterstrichen ist und ich werde es hier positionieren , weil Benutzer in der Lage sein werden, wenn sie auf die Ziele tippen, werden es Ziele in Europa sehen und sie werden in der Lage sein, alle. Ich vermisse hier etwas. Also ja, vermisst Lissabon, das ist ein Vier-zu-Eins. Also werde ich die so bewegen. Und ich werde zu Hause meinen Dad benutzen, meinen Dad jetzt, ich habe sie alle. Lassen Sie uns das Video schnell pausieren, damit ich sie organisieren kann. Und jetzt, da ich es getan habe, Lasst uns weiter gehen. Also, was ich hier meine, ist der Teiler. So können Sie eine von denen verwenden. Oregon macht einfach so. Und für den Teiler selbst. Lassen Sie uns die Farbe von Weiß verwenden und lassen Sie uns die Fettleibigkeit zum Beispiel auf 40 senken. Nennen wir es Divider. Finden Sie das. Und lasst es uns reinbringen. Und ich werde so etwas wie 20 von hier aus benutzen. So wie das funktioniert gut. Und das letzte, was ich tun werde, ist dieses C alle Texte zu verwenden und als Komponente erstellt, also Steuerungstaste. Und das Einzige, was ich einschließen werde, ist Schweben. Und für die schwebende Farbe werde ich Schulden schweben und blau verwenden. Also im Grunde werden die Leute in der Lage sein, zu schweben. Also sehen Sie alles, nennen Sie es so. Und im Grunde werde ich es gruppieren und Qualität Destinationen, Europa irgendwann, und ich muss dies in breitere in so. Und dort haben wir es im Grunde für die Destinationen belastet. Ich werde das Video pausieren und alle diese anderen Ziele kopieren und einfügen. Und jetzt, wo ich Dreck gemacht habe, kannst du sehen, wie sie alle aussehen. Wir haben also Europa, Asien, Afrika und Amerika genau hier. Also werde ich sie alle gruppieren, Control G treffen und sie Destinationen nennen. Ich werde zwei Mal 0 bekommen. Und schließlich werde ich es verstecken, damit es nicht mit irgendetwas anderes korrumpiert, was wir versuchen zu tun. Also im Grunde, lassen Sie uns jetzt zum nächsten gehen, was Winter sein wird. Offensichtlich wird sich das bewegen und schrumpfen, um den Wintertext zu passen. Also für den Winter selbst, werden wir einige Illustrationen haben. Also werde ich eins aus dem ursprünglichen Design kopieren und wann ich es hier platzieren soll. So haben wir Winter-Illustration. Ich gehe hier nach rechts, und ich werde sicherstellen, dass es eine lokale Komponente von hier ist. Also Rechtsklick machen lokal. Und was ich genau dort machen werde, ist, den Text zu benutzen. Also werde ich das Textwerkzeug hier verwenden, com mit uns eingeben und erkunden, um sicherzustellen, dass es so links ausgerichtet ist. Und es wird Poppins Licht 18 wie es ist, aber ich werde einfach diese blaue Farbe verwenden. Und ich werde es hier neben unserer Illustration setzen. Also lasst uns 2, 4, 6. So wie das. Ich denke, das ist in Ordnung. Und schließlich kann ich es sagen, zum Beispiel, so etwas. Ich denke, das funktioniert gut. Control D und ich können so etwas wie Winterwunder eingeben. Und ich kann hier springen und 120 US-Weißen verwenden, mehr mit und unten. Also 12, zum Beispiel, ich denke, es wird ziemlich gut funktionieren. Und schließlich werde ich diesen Text im Grunde aus meinem Originaldokument kopieren und einfügen. Lassen Sie es uns schnell an den Rand unseres Textes verschieben, um zu glauben, dass es gut wird. Mal sehen, hier reduzieren 37. Also werde ich die 20 IDAT behalten. Und schließlich werde ich auch den großen Knopf verwenden, der die Suche verwendet wird. So große Taste, Drag & Drop. Da haben wir es. Also große Taste, bewegen Sie es den ganzen Weg unten in diesem Text. Positionieren Sie es hier und stellen Sie sicher, dass wir diesmal 40 sind. Und innerhalb des Standardzustands auf diesem, was wir tun werden, ist, dass ich diese Farbe verbergen werde. Für diese Grenze. Ich werde einfach diese Farbe auswählen. Und hier werde ich jetzt Explorer eingeben. Und ich werde hier reinspringen, das schließen und meine weiße Farbe so verwenden. Also werde ich es auswählen und in meinen Horrorzustand gehen. Und statt dessen, aus irgendeinem Grund, nervt es immer weiter. Also lassen Sie uns dieses Springen löschen, erkunden Sie jetzt Schulden es zurück in den Standardzustand. Und Sie können sehen, wie das aussieht. Also im Grunde, was ich jetzt tun werde, ist das organisiert. Also werde ich es Text nennen. Ich werde diese beiden gruppieren. So wird es Winter werden. Und was ich eigentlich tun werde, ist, sie auszuwählen, klicken Sie hier und stellen Sie sicher, dass sie in der Mitte und Milchgewohnheiten sind. Dies ist also, was angezeigt wird, wenn die Benutzer auf Winter klicken. Also werde ich auf meine 0 Taste doppelklicken und ich werde das Video hier pausieren, damit ich in Wellness individuelle End-Kreuzfahrten passen kann , weil das genau die gleichen Einstellungen und genau das gleiche Aussehen und Gefühl wie der Winter sind . Also werde ich dich damit nicht langweilen. Okay, jetzt, da ich das getan habe, lass mich dir schnell zeigen, was ich erschaffen habe. Also haben Sie diese Ziele gesehen, und Sie haben gesehen, wie das aussieht. Also lassen Sie mich es schnell verstecken. Als Nächstes ist der Winter. Also habe ich das erschaffen und du hast das gesehen. Also gehen wir nun zum Wellness. Grundsätzlich genau das Gleiche, nur eine andere Illustration. Und das sagt, starten Sie entspannt statt Buch jetzt zum Beispiel. So können Sie einfach diejenigen um diese Call-to-Aktionen wechseln. Wir haben individuelle Reisen, also Gary und gehen, wohin der Teil Ihnen folgt und Sie können uns hier kontaktieren, um Ihre individuelle Reise zu massen. Und schließlich haben wir diese Kreuzfahrten. Also, wenn ich das zurückbringe, haben wir exotische Kreuzfahrten Buch angesammelt. Schließlich, was wir brauchen ist, kontaktieren Sie uns für diesen Abschnitt über uns. Also, was ich tun werde, ist, diesen Textabschnitt hier zu duplizieren. Ich werde das verstecken. Ich werde das direkt unter uns positionieren. Also, was ich tun werde, ist eigentlich alle von ihnen zu verstecken. Also stören sie meine Eingabe nicht. Ich kann leicht tippen. Also lassen Sie uns tatsächlich den Text aus meinem ursprünglichen Design kopieren und einfügen , weil es viel einfacher für uns ist, es so zu beenden. Ich, dass, und schließlich, lassen Sie uns gehen und kopieren Sie den Text. Und hier werden wir sagen, kontaktieren Sie uns. Mein Dad, kopiere das, geh in den Horrorzustand. Und Sie können im Grunde sehen, ist einfach Kopieren und Einfügen zwischen allen Ihren Zuständen. Nun, was wir hier brauchen, ist die Karte und ich werde schneiden. Und fügen Sie in der Karte, die ich ursprünglich in meinem Design verwendet habe, einfach schnell erklären Schulden und sehen, was ich dort getan habe solide und schnell. Wählen Sie diese beiden aus. Klicken Sie hier. Oder noch besser, vielleicht sogar nicht. Vielleicht kann ich einfach die Karteninformationen hier ganz oben auf diesem Text lassen. Ich denke, das ist in Ordnung. Also im Grunde ist diese Karte die Karte dieser Straße, die in Belgrad ist. Und ich benutze den Stift, im Grunde genau das gleiche Setup wie in diesem Bildschirm. Wenn Sie sich erinnern, scrollen wir den ganzen Weg nach unten und ich habe Ihnen gezeigt , wie Sie Ihre Karte mit der ausgefallenen Karte generieren können. Also habe ich genau das Gleiche gemacht, genau das gleiche Setup hier. Aber in Bezug auf diese, wenn ich hier klicken, können Sie sehen Poppins light 18, genau die gleiche Schriftart wie wir immer verwendet. Und der Abstand zwischen diesen Symbolen und es ist 20 Pixel. Grundsätzlich ist dies nur eine E-Mail, wo Menschen Kontakt aufnehmen können, sie können direkt dort klicken, um eine E-Mail direkt zu senden. Wenn sie sich auf einem Handy oder einem Tablet befinden, können sie direkt dort klicken, um sie direkt zu kontaktieren oder wenn sie das verbunden haben, zum Beispiel, sagen wir, dass die Agentur etwas wie WhatsApp Viber oder so etwas verwendet . Sie können direkt dort klicken und direkt mit der Agentur über die Website Kontakt aufnehmen . Und schließlich ist dies die Adresse der Straße. Also lassen Sie mich schnell hier springen und stellen Sie sicher, dass ich all dies lokal machen, weil ich bereits einige davon habe. Ich werde sie offensichtlich später reparieren. Aber im Grunde ist es das. Dies ist die Karte in 4D, das ist der Text. Ich werde sie gruppieren, nennen es „Über uns“. Und das ist es im Grunde. Nun, das Letzte, was wir hier tun müssen, ist, diese oben zu animieren. Also sekundäre nav, Lassen Sie uns sie als Komponente erstellen. Also drücken Sie Control K, Control K, Steuerungstaste genau dort. Also, was ich mit ihnen machen möchte, ist einfach eine Art Interaktion hinzuzufügen. So können Sie zum Beispiel beim Hover den Horrorstatus verwenden. Und wenn wir zum Beispiel schweben, können wir sie hellgrau machen. Und das können wir auch einen Horrorzustand verwenden. Und wir können sie hellgrau machen. Und das kann Horrorzustand sein. Und wir können sie hellgrau machen. Aber was wir auch tun können, ist einen zusätzlichen Zustand namens „Dark State“ zu schaffen. Innerhalb des dunklen Zustands können wir sie zu dunkelgrau erstellen, die wir dann auf Seiten wie DES verwenden können. So können wir leicht zwischen all diesen Zuständen wechseln. Ich werde dunkel klicken und ich werde dunkelgrau verwenden. Und schließlich für diesen, klicken Sie und dunkel. Und ich werde dunkelgrau verwenden. Gehen wir zurück zum Standard, zurück zum Standard und zurück zum Standard. So können Sie sehen, wie einfach das funktioniert. Nun endlich, was wir tun können, ist tatsächlich mit der Erstellung dieser Animationen beginnen. Also mal sehen. Was ich tatsächlich tun kann, ist meinen Selektor so zu verstecken. Und was ich auch tun kann, ist zweitrangig, jetzt ist es in Ordnung. Aber was ich tun kann, ist zu sehen, also ist das 1080. Also werde ich es zum Beispiel auf ein Pixel in der Höhe senken. Sie können es also nicht wirklich sehen. Und lassen Sie uns mitbringen, was Sie brauchen werden, ist eine Art Farbüberlagerung hier. Also lasst uns eigentlich tun und Dreck. Also lassen Sie uns Farbüberlagerung sehen. So kann ich zum Beispiel in diesem Bild duplizieren und es zum Beispiel Hero-Bildfarben-Overlay nennen . Was ich tun kann, ist diese wirklich dunkle Farbe zu verwenden. Also gehen wir hier nach hier, fast schwarz. Und wir können es auf 70 senken. So können Sie beispielsweise 7 auf Ihrer Tastatur drücken. Und was sind die Gewalttätigen wirklich an diesem Text ist, dass es weiß sein sollte , so dass es auffallen mehr zu hören. Und auch was ich nicht mag, ist die Position, also denke ich, sie sollte höher gehen. Also lassen Sie uns das wirklich schnell Feststoffe machen und dies tun, und dann das. Jetzt können wir dieses Rechteck auswählen und wir können wählen, ob es so primärer Nerv ist. Hier ist es. So können wir diese drei auswählen. Klicken Sie hier, um es eine Kerbe aufzurufen, nur damit wir es in der Mitte positionieren können. Und Sie sehen bereits, dass es viel mehr Atemraum hat als vorher. Aber ich werde tun, ist eigentlich alle diese Gruppen, drücken Sie Control G, nennen Sie es Heldenbild, zum Beispiel, weil das wird viel einfacher Abschnitt zur Höhe sein. Jetzt gehen wir zurück zu unserem primären Navi und wir haben unten jetzt geliebt. Also primäre nav, wir werden es zum Beispiel gruppieren, Control G in drücken, es Haupt nav nennen, so. Und was ich tun kann, ist eine Komponente zu erstellen. Ich weiß nicht, warum es das immer macht und lass es mich schnell herausfinden. Noch ein Mal. Molkereiherden Control K, um es als Komponente zu bringen, Seife, um Sie schnell durch diese Komponente laufen. Das ist unsere Navigation. Es wird unsere Hauptkomponente sein, und es ist jetzt in seinem Standardzustand, was bedeutet, dass noch nichts ausgewählt ist. Wenn ich Sie also zum vorherigen Beispiel zurückbringe, können Sie sehen, dass diese hier oben funktionieren, aber nichts von ihnen tut. Und weil wir im Standardzustand sind, ist noch nichts wirklich passiert. Also, was Sie als Nächstes tun werden, ist, unseren ersten Staat zu schaffen und wir werden es Destinationen nennen. Innerhalb unserer Reiseziele, was wir tun werden, ist, diese Unschärfe von zuerst einmal zu erweitern, also 1920 um 1080, so. Und wir werden springen. Es ist einseitig primäres Navi. Wir werden den Selektor zurückbringen und wir werden unsere Ziele so zurückbringen. Also im Grunde wird das unser erster Staat sein, unser zweiter Staat, und wir werden ihn von hier aus erschaffen. Newsfeed, wir werden es Winter nennen oder sorry, bevor wir es tun, wissen Sie, was wir tun können? Klicken Sie auf Löschen innerhalb eines Ziels. Wir können alle diese auswählen. So Winter Wellness Einzelkreuzfahrten über uns und fallen sie zum Beispiel auf 40 Prozent, oder sogar weniger, sagen wir 20 Prozent oder so etwas. Ich denke 40. Ja, lass uns 20% gebrauchen damit wir zurückgehen und jetzt erschaffen können, wessen Zustand wir es Winter nennen werden. In diesem neuen Staat werden Destinationen 20 sein. Der Winter wird 100 sein. Also drücke ich nur 0 auf meiner Tastatur. Selector wird sich hier bewegen. Und wir werden das tatsächlich in der Größe senken, um genau hier zu passen, so. Diese Destinationen gehen also nach unten. Also 0 und ein Winter wird hier auftauchen. Und im Grunde werden wir weitermachen und dasselbe für alle anderen tun. Ich werde Wellness schaffen. Innerhalb der Wellness von Wesley, lassen Sie uns mit Destinationen Winter beginnen. Also 20, Wellness, 100. Bewegen Sie den Selektor in Wellness genau hier. Einfach erweitert, um zu hören. Wellness-Inhalte werden zeigen. Winter-Inhalte werden nicht angezeigt, also ist es so. Dann werden wir die nächste erstellen, die individuell ist. So wie das. Im Inneren des Individuums. Wieder einmal das Gleiche. Feststoffe gehen mit individuellen, 100, Wellness 20. Gehen wir mit dem Selektor. Also lasst es uns hier bewegen. Sehen Sie, ob es sich trifft. Es erweitert es ein wenig, so. Also im Grunde Individuum wird zeigen, Wellness wird sich so verstecken. Nun gehen wir zum nächsten Staat, der Kreuzfahrten sein wird. Also lasst uns hier reinspringen. Wieder einmal, Kreuzfahrten 100, einzelne 20. Darüber hinaus ist der Selektor hier. Und du wirst später sehen, wenn wir animiert haben, wird es eine wirklich dynamische werden. Es wird wirklich cool aussehen. Also Kreuzfahrten, ich denke, das ist in Ordnung. Und schließlich bringen wir das hier rein. Lassen Sie uns das verstecken. Und schließlich, lassen Sie uns unseren endgültigen Zustand schaffen , der über uns geht. Und in Über uns. Wir werden dies im Grunde auf 100 Listen auf 20 bringen, unseren Selektor lokalisieren und es hier ändern. Und im Grunde erweitern Sie dies bis an den Rand unseres Gitters. Ich bringe uns Abschnitt zurück und ich werde meine Kreuzfahrten verstecken. Im Grunde ist das alles. Das ist das einzige, was wir hier in unserer Homepage animieren werden, Design Navigation. Also jetzt kommt das nächste, und wir müssen alle diese zusätzlichen Elemente animieren. Was wir also tun werden, ist in den Standardzustand zu wechseln. Ich werde zum Prototyp wechseln. Und hier werde ich im Grunde auf den Standardzustand tippen, klicken Sie auf unser Ziel. Also werde ich tippen. Übergang wird automatisch animieren, Zustand wird Ziele sein. Wir werden das einfache In-Out benutzen. 0,4 Sekunden. Und dann müssen wir im Grunde alle diese anderen mit genau den gleichen Einstellungen animieren. Also Winter, wir werden Winter-Wellness nutzen. Wir werden Wellness Individuum verwenden, wie der Name schon sagt, Kreuzfahrten wie das und über uns, werden wir hier klicken. Lassen Sie uns also schnell durch diese Zustände scrollen und sehen, was es animiert. Also haben wir all das über uns und all diese anderen. Aber das Problem ist, wir haben nicht diese primären Nabs, niave Artikel. Also im Grunde, Das ist das Problem mit Adobe XD meiner Meinung nach, denn in jedem dieser Zustände müssen Sie leider hineinspringen und dies im Grunde von Hand tun. Das wird also individuell sein, das wird Kreuzfahrten sein. Zumindest hilft es Ihnen, sich an diese Einstellungen zu erinnern. Ich weiß nicht, warum. Es zeigt mir über uns und nicht durch scrollen, sondern automatisch animieren und über uns. Also werde ich das Video hier pausieren und all diese anderen machen und dann zurückkommen und Ihnen das Endergebnis zeigen. Okay, jetzt, da ich all das getan und alles animiert habe, ist die einzige Sache, die ich noch erwähnen wollte, das Logo selbst. Also innerhalb des Logos, was wir erstellt haben, ist diese Tap-Punkte. Also hier bin ich in diesem, was der Zielstaat ist. Also ein Logotyppunkt, Sie können darauf klicken und es wird es in den Standardzustand bringen , der im Grunde eines dieser Elemente ausgelesen wird. Lassen Sie uns also schnell zum Standardzustand zurückkehren und ich kann schnell durchschauen und sehen. So Winter Wellness, das ist fein einzelne Kreuzfahrten, weil Sie sehen können, ich habe die gleiche Animation für alle von ihnen. Ich wollte dir nur ein bisschen Zeit sparen. Also gehen wir in den Standardzustand und lassen Sie uns Vorschau drücken und sehen, was wir bisher haben. Also hier sind wir. Wir haben all das, was wir geschaffen haben. Wir haben diesen Horace-Staat. Also lasst uns auf unser Ziel klicken. Sie können sehen, wie es aussieht. Lass uns in den Winter gehen. Sie können sehen und das funktioniert gut, aber ich sollte dies vielleicht ändern und diesen weißen Hintergrund aus dem ursprünglichen Standardzustand Wellness entfernen . Und hier ist das Problem, denn innerhalb dieser tief verschachtelten Komponenten haben wir keinen dieser Hover-Zustände. Ich weiß wirklich nicht warum. Und ich habe tatsächlich an das Adobe XD-Team geschrieben, aber sie kamen immer noch nicht zu mir zurück. Das einzige, was sie sagten, ist, dass wir daran arbeiten und wir werden Sie wissen lassen, aber im Grunde können Sie es in zwei Staaten erstellen. Stellen Sie sich hier vor, zum Beispiel, ich habe diese Hover-Zustände, aber hier habe ich es, und hier habe ich es nicht. Also in keinem dieser anderen kann ich ihren Nachlass nicht nutzen. Ich weiß wirklich nicht warum, aber im Grunde funktioniert das bisher. Und schließlich, in einem dieser Zustände, wenn Sie auf das Logo klicken, wird Sie zurück in diesen Standardzustand bringen. Das war's also für dieses Video. Im nächsten Video werden wir weitermachen und ein Design und diesen Heldenbereich. So können wir auf diesen Pfeilen schweben und wir können zwischen diesen Heldenbildern wechseln und dann später zu dieser unteren Navigation weitergehen . Also sehe ich dich dort. 26. Design erstellen: Lassen Sie uns nun mit unserem Design fortfahren und beginnen, indem wir diesen Heldenbereich ändern und ihn animieren. Also, wenn ich hier doppelklicke, um es zu öffnen und in unseren Heldentext zu springen. Wie Sie sehen können, haben wir nur einen Sowjet, wir werden das ändern und drei haben. Also lassen Sie mich das zu mehr Kleidung duplizieren. Also hier auf Test zwei und hier ein Text drei, weil wir gegangen sind, um es zu animieren. Also lasst uns damit beginnen, dieses zu wechseln. Das ist also das Peking und wir werden es dort lassen. Aber lasst uns schnell den Heldenknopf loswerden. Und bringen wir den Heldenknopf nach draußen. Dann werde ich es hier positionieren, weil ich nur den Text animieren möchte, wenn diese und Emissionen passieren. Ich will nicht mit zwei Knöpfen rummachen, ich will es nur dort halten, wo es ist. Also für diesen, weil es ein Peking-Glanz ist, verbergen Sie schnell das, das und das. Also werden wir das so organisieren, dass es Nummer eins ist, wie Dreck. Und dann zum Beispiel möchte ich Paris einbeziehen, das entehrt wird. Also nennen wir diese Nummer zwei. Und schließlich, lasst uns das sehen. Nein, lasst uns das Nummer zwei geben, denn das ist Paris. Also mal sehen. Wir haben Peking. Wir haben Mercado, der unter drei arbeiten wird. Und das wird Barrieren sein. Also setzen Sie es hier. Ich habe mich nur verwirrt. Also wieder, wir haben ein Peking, wir haben Paris, und schließlich haben wir es vergessen. Also sind wir gut zu gehen. Das ist Peking als CRD, daher müssen wir jetzt eine Textnummer 2 für Paris erstellen. Also lasst uns das ändern. Wie ich schon sagte, wird dies Barrieren sein. Und mal sehen, hier können wir zum Beispiel in so etwas wie CTO der Liebe schreiben. Dann können wir das verbergen und wir können jetzt zum Regather übergehen. Schnell, springt genau da. Und wir werden in etwas schreiben, Magisches, Ägypten, zum Beispiel. Und lasst es uns einfach da lassen. Jetzt unter Finanzierung, was ich mit diesen Texten tun wollte, wie Sie sehen können, werde ich eine Maske verwenden. Und deshalb habe ich sie alle eingeschaltet, weil ich sehen wollte, wie breit der breiteste Text ist, was in diesem Fall die Hagana ist, um einfach unser Rechteck zu benutzen und einfach eins so herauszuzeichnen. Dann können Sie auf Ihre Fettleibigkeit senken, zoomen Sie nur ein wenig, um zu sehen, wo die Ränder Ihrer Texte sind. Zum Beispiel, irgendwo beim Hören, muss dies nicht zu spezifisch und genau sein. Es ist gut, so zu gehen. Ich werde es Maske nennen. Bedeutet, was ich tun kann, ist es zurück zu 100 Verstecken, Gefühl und Grenze zu bringen , denn wie er sagte, das wird nur unsere Maske sein. Also werde ich sie alle auswählen. Shift Control, M verschiebt Befehl auf einem Mac. Ich nenne es Textmoschee zum Beispiel. Habe ich. Und was ich tun werde, ist, den ersten Text in zu lassen meine Umschalt- und unteren Pfeil zu verwenden, um diese beiden nach unten zu schieben. Irgendwo hier. So können Sie vielleicht 20 Pixel unten sehen, nur damit Sie sie nicht sehen. Dann werde ich mein Heldenbild eins zurückbringen. Ich werde sie alle zurückbringen, die Fettleibigkeit dieser beiden senken. Wenn Sie also einen hohen Schreibtisch haben, sehen Sie keine anderen. Und das wird nur unser erster Zustand oder unser Standardzustand sein. Also lasst uns das jetzt machen. Also, was ich tun werde, ist im Grunde drücken Sie die Steuerungs- oder Befehlstaste. Oder Sie können auch direkt hier klicken, wenn Sie möchten. Also genau hier, um es als Komponente zu erstellen. Und jetzt möchte ich einen neuen Zustand erstellen. Das wird also zum Beispiel Bild zwei sein. Dann innerhalb davon werden wir das auf 0 senken, dies auf 100 bringen, innerhalb unseres Textes gehen. Und ich werde meine Peking-Text nach oben verschieben. Aber bevor ich das tue, möchte ich mein Paris in die Polizei bringen , nur damit ich mich so leicht aufstellen kann. So ist es perfekt aufgereiht und dann einfach aus dem Weg ziehen Sie Ihr Peking aus dem Weg. Nun endlich, springen wir hinein und erstellen Bild drei, wie dieses. Und für das Bild drei, natürlich wirst du das auf 0 senken, das bis zu 100 bringen, in deinen Text springen und den Text Nummer drei bringen. So wie das. Bis alles perfekt ausgerichtet ist, bewegen Sie Paris einfach aus dem Weg, bis es oben ausgerichtet ist. Und das ist es im Grunde. Wenn ich also zwischen ihnen klicke, haben wir Standardzustand , der Peking, Varus und Hoegaarden ist , was alles gut funktioniert. Jetzt lassen Sie uns sie schnell animieren. Also Standardzustand, ich werde in meinen Prototyp springen, meine Pfeile suchen. Und in meinem Horace Zustand, auf meinem Pfeil nach rechts, werde ich zum Hover wechseln und dann klicken und würde Tippen, Übergang, Auto, animieren verwenden. Und ich werde den Zustand wählen, Standardzustand. Wie Sie sehen können, haben wir sofort ein Problem. Also lassen Sie mich in meinen Standardzustand und in mein Design springen , weil ich vergessen habe, das zu erstellen. Also hier sind wir in unserem Standardzustand innerhalb der Pfeile und wir müssen diese Schrittpunkte erstellen. Also lasst uns schnell springen und einen erstellen. Also so etwas, ich werde einfach diese Qualität geliebt Hahn Punkt verstecken. Oder wir können diese Abkürzung verwenden. So linker Pfeil zeigt. Und ich werde es duplizieren. Kontrolle D, ich werde es bis zu einer Tür bringen, richtig? So wie so. Also den ganzen Weg bis hierher. Zoomen Sie rechts in mehr Wochen, nur so dass es so passt. Und ich werde es über den rechten Pfeil setzen und würde einfach diese links nach rechts ändern Dario gehen. Und jetzt, was ich tun möchte, ist einfach zu sehen, ob Adobe die MAI Schulden Updates ist. Also innerhalb unseres Pfeils, hier sind wir. Und lassen Sie uns schnell überprüfen Bild Nummer drei Pfeile, wagen VR. Also lassen Sie uns jetzt schnell einen Prototyp machen. Was ich noch einmal tun wollte. Also innerhalb unseres Standardzustands möchte ich schnell in meine Pfeile springen. Tabulator-Punkt nach rechts. Gehen Sie zum Prototyp. Ich werde darauf klicken. Tippen Sie auf Automatisch animieren. Ich werde diesen Zustand Bild Nummer 2 wählen, weil ich will, dass es gehen. Dann werde ich meine Zustände auf Bild Nummer zwei umstellen. Und dann werde ich noch einmal zwei Pfeile gehen. Jetzt auf der linken Seite, werde ich auf Auto animieren Ziel-Standardstatus tippen , weil ich zurück gehen wollte, Leichtigkeit. Ich möchte einfache Notiz für alle von ihnen verwenden. Also Nullpunkt für und wann die gleichen Einstellungen verwendet werden sollen. So diszipliniert, um zu Bild 3 zu gehen. Und gehen wir zurück, weil ich dies von Leichtigkeit aus ändern möchte , um in out und Nullpunkt für zu erleichtern. Schließlich möchte ich zu Bild Nummer drei gehen. Und auf diesem, auf den Pfeilen, werden wir diesen nicht tippen. Wir werden das hier nur benutzen. Und wir gehen zu Bild Nummer zwei ist 0.4. Also, das ist es im Grunde. Gehen Sie zurück zum Standardstatus klicken Sie hier. Weil ich eine schnelle Vorschau starten möchte und sehen möchte, wie all das aussieht. So können Sie sehen, dass wir immer noch einen Hover auf diesen Pfeilen haben , weil Hover funktioniert, egal was Sie davor setzen, solange Sie nicht die Gefühlsfarbe haben. Wenn ich also direkt dort klicke, kannst du sehen, dass Text schön animiert wird. Wir können zu Nummer 3, Nummer 2 gehen. Und hier sind wir. Wenn Sie denken, dass es ein bisschen zu schnell ist, was ich denke, können wir es vielleicht auf 0,6 ändern, zum Beispiel für die Geschwindigkeit. So können wir hier in Standard-Zustandspfeile gehen, Pfeil nach rechts. Anstelle von, lassen Sie uns sehen, anstelle von 0,4, können wir auf 0,6 oder sogar 0,8 gehen, wenn Sie wollen. So können Sie Ihre Animation wirklich verlangsamen. Pfeile. Klicken Sie darauf, 0.6, diese 1.60. Dann können wir zu Nummer 3 gehen. Suchen Sie die linke, 1,60 rechts hier. Gehen Sie zurück zum ersten, und das ist im Grunde alles, was Sie tun werden. Wir werden einfach all diese Dinge testen, die Ihr Klient ist. Sie können sehen, es ist nicht wirklich alles, was Major, aber es wirklich in dieser Art von Verlangsamung Effekt bringen und wirklich erleichtert in diesen Übergängen dahinter nicht mündlich erlaubt Ihren Benutzern. Also werde ich zu Qualität für dieses Video gehen, weil das nächste Video wird uns die Schaffung von Todesfällen einbeziehen. Also sehe ich Sie dort und auf welcher zeigen, wie Sie ein Drop-Downs erstellen können. 27. Design erstellen: Alles klar, Lassen Sie uns jetzt voran und erstellen Sie dieses Drop-down-Menü. Und um es zu erstellen, was ich verwenden werde, sind im Grunde zwei Funktionen. Ich werde Repeat Grid und diese scrollbaren Gruppen verwenden. Also hier haben wir unten nav. Und im Grunde, was ich tun werde, ist hier für diese Suche zuerst zu springen, und ich werde einschließen und Papa schließen Symbol. Also werde ich hier reinspringen. Wen soll man schließen? Hier ist es. Mehr geschrieben direkt hier. In der Nähe von hier. Und mal sehen, positionieren Sie es einfach in der Mitte und vielleicht 20 von hier. Also, was ich später tun werde, wird gedreht, um es zu animieren. Aber vorerst werde ich es hier behalten, wie es ist. Was Sie brauchen werden unsere Hintergründe für all diese Bereiche. Also zuerst werde ich dieses Original verwenden. Ich werde Control D drücken, um es zu duplizieren. Und ich werde es in all diesen Solidus stecken. Und was ich tun werde, ist im Grunde darauf einzugrenzen, hier und hier, bis zum nächsten Rand. Also sind wir bei diesen Trennwänden Lügen. Und ich werde es suchen legi nennen. Ich werde es kopieren drücken, hier einfügen. Und ich werde einfach diese eine Aktivität nennen. Steck es in meine Aktivitäten, mein Dad. Dann schieben Sie es einfach hier. Also noch einmal zum nächsten Rand. Und genau hier werde ich noch einmal Control D treffen und es nach draußen stellen. Warum brauche ich als nächstes ist Reisetyp. Also werde ich es hier positionieren. Morbid, hier an Ort und Stelle, hier positionieren. Qualität, Reise, Typ, VG, sie sind verletzt und bringen sie einfach in meinen Reisetyp, wie Dreck. Und schließlich haben wir noch einen für die Destinationen. Also Control D, um es zu duplizieren. Und ich werde es Destinationen nennen. Nun, warum ich das tue, ist, weil ich alle von ihnen animieren und Drop-Downs erstellen muss und wird viel mehr Sinn in nur einer Sekunde, wenn wir tatsächlich anfangen, alle diese Milchherde zu animieren. Also, jetzt, wo wir all das haben, was ich tun kann, ist, diesen angewendeten Filter Hit Control K zu verwenden und im Grunde alles, was ich tun wollte, ist einen Hover-Zustand zu erstellen. So wie so. Also im Grunde erstellen wir Zustände innerhalb von Zuständen innerhalb von Komponenten. Also im Grunde, was auch immer Sie nicht mit diesen kleineren Komponenten beginnen können , weil dieses gesamte Dropdown-Menü eine Komponente an sich sein wird. Oder Sie können es einfach in den Ordner legen, wie es hier ist. Und dann innerhalb dieses Ordners kann jeder einzelne einzelne einzelne einzelne einzelne Komponenten sein und Sie können mit dem tun, was Sie wollen. Also das erste, was ich tun werde, ist die Suche zu verwenden und ich werde es auf allen von ihnen positionieren. Und deshalb habe ich diesen Hintergrund benutzt. Weil ich es erweitern und den ganzen Weg nach hier verschieben möchte. Was ich also tun werde, ist im Grunde meinen Standardzustand zu erstellen , der dieser sein wird. Und um das zu tun, ist das einzige, was ich tun möchte, mein Kleidungssymbol zu benutzen, das ich gleich zwei weitere hier gehe. Und es ist einfach unten die Fettleibigkeit auf 0. Wie Sie sehen können, ist es jetzt ein Plus, aber im nächsten Zustand werden wir es so drehen. So kann es geschlossen werden und Benutzer können dann darauf tippen. Wie gesagt, Standardzustand, werde ich es reduzieren. Dann, was ich tun werde, ist im Grunde die Steuerungstaste drücken. Weil dies unser Standardzustand sein wird. Neuen Status erstellen, angeklickt. Innerhalb des angeklickten Status. Was ich tun werde, ist im Grunde meine Suche BG, Suchsymbol und Suche nach Reisen. Und ich werde es den ganzen Weg hierher bringen. Lassen Sie uns sehen, was wir unter Suchsymbol haben. Also haben wir 40. Und lassen Sie uns das auf 40 Jahre bewegen. Nun, ich denke, es waren 40, also können wir schnell nachsehen. War es? Ja, war es. Ok. Also hier haben wir Standardzustand, dann haben wir geklickt Zustand, wie so. Und für den angeklickten Zustand werde ich das zurückbringen. Geben Sie also 0 ein, um zu 100 zu gehen und einfach so gedreht zu werden, also ist es ein x. Also, was wir haben, ist diese Suchleiste. Wenn Sie sich von der Konkurrenzanalyse erinnern, das ist der Wunsch, dass ich Größe stark erstellt, weil diese Suchleisten wirklich schwer zu bekommen. Halten Sie sich fest. Also hier, was wir haben, ist die Suche nach Reisen ohne Unterbrechung. So können Benutzer einfach auf Suchen tippen, zur Seite gehen oder einfach schließen, wenn sie überhaupt nicht suchen möchten. Also, was werden wir als nächstes tun, ist animiert gehen zum Prototyp. Sie können das gesamte Feld auswählen, da unabhängig davon , wo es verwendet Schritt hier wird zu erweitern. Klicken Sie also direkt hier. Verwenden Sie den Tippen automatisch animieren, gehen Sie zum Zustand der geklickten. Erleichtern Sie sich 0.6, weil wir all diese anderen verwenden können. Dann geklickt. Benutzer können nochmals überall tippen. Tippen Sie also auf Auto animieren und gehen Sie zum Standardzustand ist in out, und lassen Sie uns eine Vorschau anzeigen und sehen, wie es aussieht. Also hier ist es. Sobald eine Registerkarte, können Sie sehen, es schön erweitert und beachten Sie dieses Schließen Symbol. Sie können sehen, wie glatt es ist, wie schön es ist. Und hier haben wir diesen Hover-Effekt, wenn sie Filter anwenden wollen. So können Sie sich vorstellen, okay, ich möchte suchen, klicken Sie hier. Es dehnt sich aus, sieht schön aus. Ich habe getippt, was ich will, klicke auf Filter anwenden und es wird dich zu dieser bestimmten Seite bringen. Lassen Sie uns jetzt mehr abgenutzt und alle diese anderen animieren. So können sie alle ein bisschen knifflig sein. Also würde ich zeigen, wie Sie eins machen können und dann alle diese anderen kopieren und einfügen , so dass wir nicht zu viel Zeit verschwenden. Also hier haben wir Destinationen und wir haben dieses Ziel Symbol. Also, was ich tun werde, ist meine Ziel-Texte zu verwenden , die links ausgerichtet ist 18 Poppins Licht. Ich dupliziere es Control D. und ich werde es irgendwo hier positionieren, zum Beispiel. Und mal sehen, vielleicht kann ich es so positionieren, dass es gut mit meiner Ikone ist. Dann kann ich es zum Beispiel 20 Pixel nach unten verschieben . Hey, also, und was ich tun kann, ist meinen Teiler drücken Control D, und ich werde es so drehen. Und mal sehen, ich möchte so etwas wie dieses messen , denke ich, wird gut sein. Lassen Sie uns es also auf 200 in der Breite auslaufen. Positionieren Sie es hier. Stellen Sie sicher, dass es beispielsweise zehn Pixel nach unten ist. Also, weil Sie es nicht sehen und das lassen mich meine Destinationen BG erweitern. Deshalb haben wir es schließlich erschaffen. Also hier haben wir Sand, vielleicht 20, ja, ich denke, 20 funktioniert besser. Also werde ich diesen und meinen Teiler hier und unten auswählen. Dann benutze ein Wiederholungsraster und ich werde es Ziele nennen. Also lass uns noch ein Mal sehen. Wir sind 40 aus unserem Text. Also werden wir das für all diese anderen behalten. Also wieder, wir haben Destinationen und das ist, was Sie tun können. Sie können einfach den ganzen Weg hinunterfahren, wo immer Sie wollen. Und lassen Sie uns das so erweitern, dass wir nur sehen können, was wir haben, damit wir richtig enden können. So, damit ich es hier abschneiden kann. Und hier kommt der Spaß ins Spiel. Was Sie also tun können, ist Textelemente zu verwenden. Also, was für ein Held hier, lass es mich schnell öffnen. Ich habe eine Liste von Städten und ich habe einfach Notepad auf meinem Windows verwendet. Sie können verwenden, was Sie auf einem Mac wollen, und es wird gut funktionieren in einem einfach in all diesen Städten getippt. Dann ziehe ich diese Datei in Adobe XD, lege sie auf meine erste Stadt, lege sie hinein, und Molkerei hat all diese Städte. Also, weil ich wirklich mag, wie das aussieht, aber ich will nicht, dass es bis hierher geht. Was ich tun kann, ist einfach hier klicken. So vertikale Bildlauf. Nun, was ich tun werde, ist nach Bangkok erweitert und für beispielhafte Rechte hier, so dass ich es direkt vor meinen Texten schneiden kann. Was ich tun kann, ist, diese Städte zu nennen. Also weiß ich, was es ist. Und schließlich, benutze meine Ziele BG und senke es einfach auf einen Punkt, vielleicht irgendwo hier herum. So Höhe von 500 zum Beispiel. Ich glaube, es wird funktionieren. Na ja. Dann klicke auf meine Städte und schneide es auf etwa hier herum. Ich denke, es ist gut. Jep. Und jetzt lassen Sie uns die Vorschau drücken und sofort sehen, wie das aussieht. Sobald es geöffnet ist, können Sie scrollen und es wird dort bleiben. Ich denke, es sieht wirklich schön aus. Aber eine Sache, die ich denke, es fehlt, ist eine Art Hintergrundschatten weil man sehen kann, dass es hier nicht zu gut vor dem weißen Hintergrund steht. Also lasst uns das als nächstes tun. Also hier haben wir diese Städte und das Letzte, was wir brauchen, ist die Maske. Du weißt also, dass das 70 war, so. Also, was ich tun werde, ist, diesen Schatten einzuschließen. Also 55 Sen, und ich werde zu fünf gehen. Und jetzt kann man nichts sehen, im Grunde mindestens zwei hier. Das Einzige, was Sie sehen können, ist der Schatten hier, aber wir werden das in nur einer Sekunde loswerden. Was wir im Grunde brauchen, ist eine Maske, so können wir zu Zielen BG gehen, drücken Sie Control D, und nennen Sie dies eine Maske. Was ich tun werde, ist, es hier zu setzen. Ich werde den Schatten loswerden und die Füllung loswerden. Also werde ich diese Maske benutzen. Mal sehen. Wir werden die Masken, Masken, CTs und Destinationen benutzen . Oder wir können die Maske im Grunde so auf den gesamten Tank legen. Wählen Sie alles aus, drücken Sie Shift Control. M wird alles maskieren. Also werde ich es einfach Destinationen nennen. Und ich werde jetzt im Grunde eine Komponente erstellen. Aber bevor ich auf den Destinationen BG mache, möchte ich meinen Schatten verstecken, weil ich nicht will, dass er gesehen wird. Und im Grunde möchte ich eine Maske erweitern oder nur ein kleines bisschen hier. Wenn wir es also erweitern, werden Sie in der Lage sein, den Schatten unten zu sehen. Es gibt bis wie dieser PID-Steuerschlüssel, um eine Komponente zu erstellen. Erstellen Sie einen neuen Zustand Qualität geklickt meine Schulden. Innerhalb des angeklickten Zustands wollen wir dies im Grunde erweitern. Was wir also gegeben haben, glaube ich, es waren 500 hier. Und erweitern Sie einfach unsere Maske bis hierher und bringen Sie unseren Schatten zurück. Also, wenn ich es schließe, gehe zu hier, ich gehe zum Prototyp Tab. Wir werden einfach zu verwenden und out-Zustand wird angeklickt, bewegen Sie sich auf klicken, klicken Sie irgendwo außerhalb, gehen Sie zum Standardzustand. Also egal, wo Sie geklickt haben, Griffe, drücken Vorschau und sehen, wie das aussieht. Sobald wir hier sind, können Sie sehen, dass es sich gut ausdehnt. Lassen Sie mich das noch einmal zeigen. Es ist wirklich auffällig, aber das Problem ist, dass ich immer noch nicht sehe, dass Schatten alle Schulden. Nun, ich finde es gut, aber ja, lass es uns einfach da lassen. Ich denke, es funktioniert gut, ich schalte übrigens zwischen meinen Monitoren, weil der, den Sie sehen, den niedrigeren Kontrast hat. Also schalte ich nur zwischen ihnen. Sieh nur, wie es aussieht. Und ich denke, es sieht gut aus und ich denke, es funktioniert gut. Lass es uns einfach dabei belassen. Was ich als nächstes tun werde, ist genau die gleichen Einstellungen zu verwenden und an diesen beiden zu arbeiten. Und wenn ich sie fertig habe, werde ich zurückkommen und Ihnen die Ergebnisse zeigen. Okay, jetzt, da sie alle fertig sind, lassen Sie mich Ihnen schnell die Struktur zeigen. Das ist die, die ich dir im Detail gezeigt habe, diese Nation. So wie Sie sehen können, ist alles genau da. Ich benutze einfach genau die gleiche Struktur und Elemente. Also einfach kopiert und in all diese anderen eingefügt. Also, wenn ich Ihnen zeige, dass hier die für den Reisetyp ist. Wenn ich es öffne, hier ist diejenige für die Aktivitäten. Genotyp hat nicht zu viele Aktivitäten, hat auf viel. Und Sie können natürlich viel mehr Destinationen oder sogar viel mehr Aktivitäten einbeziehen. Schließlich gibt es eine Suche nach Reisen, die wir bereits gemacht haben. Und in Bezug auf Animationen ist jede einzelne Animation genau die gleiche. Also die, die ich hier benutzt habe. So Tab Auto animieren Leichtigkeit in 0.6 Sekunden für beide Zustände werden sowohl für alle diese verwendet. Wenn ich also die Vorschau sehr schnell anklicke, kannst du sehen, wie das aussieht. Damit wir hier reinspringen können. Das ist also das, was wir für Destinationen gemacht haben. Sie können einfach den Reisetyp nach oben und unten scrollen. Sie können sehen, dass es nicht zu viele gibt. Also, für den Fall, dass Sie wollen, egal, so jede im Grunde Reise, die Sie wollen, können Sie direkt dort klicken. Aktivitäten. Also schwimmen, kreisen, und Sie können sehen, wie viele sie genau dort sind. Und schließlich, suchen Sie nach Reisen. Wir haben diese schöne Animation. Sie können es schließen und wir haben Filter anwenden. So ist es für dieses Video, Sie können sehen, wie einfach das war. Eine letzte Sache, die Sie tun können, um dies zu markieren, ist im Grunde innerhalb des Staates. Vielleicht können wir sie umdrehen und wir können sie von dieser helleren Farbe auf die dunklere Farbe wechseln. Aber ich denke nicht wirklich, dass das notwendig ist. Aber Sie können es erkunden, wenn Sie wollen. Gehen Sie von dieser Farbe für Ziel und das Symbol zu dieser dunkleren Farbe wenn Sie möchten und sehen, wie das aussieht, sobald sie angeklickt und erweitert werden, können Sie auch mehrere Hover-Effekte für alle diese Texte hinzufügen. Aber lassen Sie uns nicht in zu viele Details mit Toten gehen, vor allem, wenn Sie eng an Ihrem Zeitplan sind und der Kunde ist Staat auf einem Budget, Ich würde wirklich nicht empfehlen, das zu tun, weil Sie mit all diesen Emissionen spielen können, wie viel, wie Sie wollen. Und Sie können sehen, dass Sie wirklich einige einfache und diese wirklich komplexen einbeziehen können. Aber es hängt alles am Ende des Tages vom Budget des Kunden ab und wie viel Geld sie für diese Projekte ausgeben müssen. Daher können Sie die Menge all dieser Animationen bestimmen , die Sie in dieser Klasse tun können Ich zeige Ihnen einfach all diese Emissionen, die Sie tun können. Und im Grunde können Sie alle öffnen, wenn Sie das mögen möchten. Im Grunde spielen Sie herum, wie Sie wollen. Ich zeige Ihnen einfach alle Optionen, die Adobe XD zu bieten hat , ohne eine einzige Codezeile zu schreiben. Das war's also für dieses Video. Im nächsten Video wollen wir zu den speziellen Angeboten übergehen, und ich möchte Ihnen endlich zeigen, wie wir dieses Symbol erstellen können, um auf Hover-Effekt zu bewegen und es im Grunde mit all diesen anderen Elementen zu kombinieren . Also sehe ich dich dort. 28. Design erstellen: Gehen wir nun zum Abschnitt „Sonderangebote“. Und wie Sie sehen können, und wenn Sie sich erinnern können, hier ist, wo wir all diese verschiedenen Elemente erstellt haben. Wir haben sie alle eingeschlossen. Und wie ich sagte, zum Beispiel für diese Transport-Bilder, so dass, wenn ich hier in der Mitte klicken, mittleren Transport, können Sie sehen, dass Blaine Zug Auto, und Bus, alle von ihnen haben nicht verfügbar Staaten. Wie gesagt, habe ich das nur zum Beispiel geschaffen, wenn Sie aus Belgrad abreisen , denn diese Agentur befindet sich wieder in Belgrad, Serbien. Und Sie wollen nach Haggada verlassen, das ist Ägypten, zum Beispiel, unsere Autofahrt ist nicht verfügbar oder es ist vielleicht nicht verfügbar, aus irgendeinem Grund, vielleicht ist es zu weit, gibt keine Straßen was auch immer. Daher haben Sie alle diese Optionen. Wieder einmal können diese Optionen möglicherweise auf Hover gesetzt werden und Sie können zum Beispiel einen Tooltip anzeigen. Und wenn Sie schweben, können Sie Ihre Zuschauer wissen lassen, zum Beispiel, wenn sie an einem Ziel ankommen, gibt es keine Zugfahrten für sie verfügbar oder es ist nicht im Angebot enthalten. Es ist also nur mit Ihnen da, um mit Ihrem Kunden zu sprechen, um ihnen all diese verschiedenen Optionen zu erklären, die sie mit diesen Symbolen haben. Aber die wichtigsten in Schlüsselpunkt genau hier. Und was ich versuche zu sagen ist, es ist immer großartig, wenn du kannst, all diese verschiedenen Zustände für deine Symbole zu haben nur damit es Bohnen Dinge ein wenig später ist. Also, was ich zuerst tun werde, ist, wie Sie wissen, wir haben unsere Angebotskarten und wir haben First-Minute-Angebote und Last-Minute-Angebote. Was ich also tun werde, ist, dass ich alle diese Karten löschen werde, aber ich werde sie für jetzt behalten, weil ich meine Hauptkomponenten erstellen und dann verteilen und später bearbeiten möchte . Also habe ich das gerade in einem Wireframing-Abschnitt gemacht, nur damit wir eine Struktur haben, nur damit wir verstehen, wohin das Design gehen wird. Jetzt, wo wir all das haben und jetzt, wo wir entschieden haben, wie es aussehen wird, können wir jetzt weitermachen und vielleicht all diese verschiedenen Informationen einbeziehen. Also, weil wir ihre Gada erschaffen haben, und ich werde es so lassen, wie es ist. Das erste, was ich tun werde, ist eigentlich, dass ich hier in der Mitte für unseren Transport springen kann . Und zum Beispiel, Zug ist nicht verfügbar. Und zum Beispiel, Bosse nicht verfügbar. Zum Beispiel, vielleicht können Sie dorthin mit dem Flugzeug und mit dem Auto, sagen wir. Damit wir weitermachen können. Und was ich tun werde, wenn Sie sich erinnern Angebot Auto, BG hat diesen Schatten von 5% der Basizität, Ich werde es im nächsten Zustand zu erhöhen. Aber bevor wir weitermachen, brauchen wir ein Bild. Also werde ich ein Bild drinnen ziehen und ablegen. Und ich werde es oder gada nennen, Bild so. Und was ich auch tun werde, ist als Komponente erstellt. Also mal sehen, vielleicht können wir es etwas Besonderes nennen. Bieten Sie Karten an. Er würde den Schlüssel kontrollieren. Und was wir tun werden, ist einen Hover-Zustand wie den innerhalb unseres Horace Staates zu schaffen, die einzigen zwei Dinge, die ich tun möchte, ist mit unserer Angebotskarte, BG, oder sogar wir können es Sonderangebot Karte nennen. Nur so hatte er die Dinge konsequent? Und ich habe das im Standardzustand geändert. Sobald wir also im Horrorzustand sind, können Sie sehen, dass es aktualisiert wurde. Also innerhalb des Horrorstatus können Sie darauf klicken. Erhöht sich auf 8%. Zum Beispiel, nur sortiert, können Sie ein wenig mehr darauf aufmerksam machen. Jetzt können wir zum Pfeil LBG gehen und ich kann unsere Maske hier erweitern , so dass die Breite 82 ist und dass es wirklich schön bedeckt. Also, wenn ich in den Standardzustand gehe und eine Sache weniger, die ich ändern möchte, ist das Bild selbst. Wenn wir darauf klicken, möchte ich doppelklicken, damit ich in die Bildmaske gehen kann. Dann halte ich die Umschalttaste Alt und klicke mit der linken Maustaste in eine der Ecken , egal welche einfach nur leicht so erweitert wird. Wenn Sie also zwischen Standardstatus und Horace-Status wechseln, sieht alles so aus, als würde es sich erweitern. Also werde ich meine Vorschau treffen. Bringen Sie es hier rein. Geh nach hier. Und Sie können sehen, wenn wir auf dem Schweben sind, wie es aussieht. Also wieder einmal, wir haben diesen schönen Hintergrundschatten und wir haben dieses Bild neben unserer Ikone bewegt. Vielleicht wollen wir vielleicht sogar diesen hybriden Zustand hier löschen. Vielleicht ist das nicht wirklich alles, was nötig ist. Vielleicht können wir den Pfeil einfach so behalten, wie er ist. Ich glaube nicht, dass der Horrorzustand hier so schön funktioniert, weil wir den ersten Schritt haben , der seinen zweiten Schritt sieht, der schwebt, dann den dritten Schritt, der genau hier ist. Aber vielleicht können wir es sogar lassen, nur damit wir zeigen, dass dies möglich ist. Tun Sie in diesem Zustand. Lass es uns einfach lassen und sehen, wohin es von dort geht. Der nächste Schritt für uns ist also, Abwürfe tatsächlich zu duplizieren. Also, was ich tun werde, ist meine Alt halten, ziehen Sie es Position ist genau hier. Alt und ziehen Sie es, positionieren Sie es hier, wie Dreck. Also werde ich es hier schieben, dann schieben Sie das hier. Und dann werde ich das Gleiche tun. So alte Position und diese hier und dann ALT hier. Alles klar hier. Dann werde ich diese drei organisieren. Wählen Sie also alle aus. Und ich werde Control X tatsächlich drücken, um sie außerhalb der ersten Minute Angebote zu verschieben und diese beiden Karten zu löschen, weil wir sie nicht brauchen. Gehen Sie zur letzten Minute, drücken Sie Control V, fügen Sie ihn an Ort und Stelle, Positionierung und genau hier, und löschen Sie dann diese drei Karten hier. Also, was haben wir? Grundsätzlich, wenn ich hier klicke, um in den Vorschaumodus zu gehen, was Sie haben, sind alle diese Karten. Wie Sie sehen können, funktionieren Hover-Effekte wirklich gut. Wir haben es ihnen gesagt. Und im Grunde wird alles, was Sie in dieser Hauptkomponente ändern , in alle diese zusätzlichen Komponenten aktualisiert. Also zum Beispiel, wenn ich die Ecken mehr ausrunden. Es wird in alle diese Komponenten aktualisiert. Wenn ich zum Beispieleine Farbe von einem dieser Symbole ändert, eine Farbe von einem dieser Symbole ändert, wenn ich die Farbe des Textes ändere, wenn ich alles in dieser Komponente mache, um alle diese anderen Komponenten zu aktualisieren. Aber n ist, dass Sie in einer Sekunde sehen werden, sobald Sie beginnen, alle diese untergeordneten Komponenten zu aktualisieren , die von dieser übergeordneten Komponente kamen, die diese ist, wird es nicht zurückkehren Dosisänderungen. Also noch einmal, was immer Sie in der kargen Komponente tun, die die Hauptkomponente ist, wird in Ihrem Kind Komponenten aktualisieren, aber es wird nicht umgekehrt funktionieren. Was auch immer Sie in diesen untergeordneten Komponenten ändern, es wird nicht diese übergeordnete oder Hauptkomponente propagieren. Also lasst uns mit dem zweiten beginnen. Und zum Beispiel kann ich hier vielleicht in Tokio schreiben. Also kann ich in diese eine Qualität springen, Tokyo. Habe ich. Ich kann hineinzoomen. Sehen Sie Entdecker und das Land der aufgehenden Sonne durch Schmutz. Und mal sehen, vielleicht können wir das Flugzeug einfach hier lassen. Also für den mobilen Transport, werden wir nur das Flugzeug verlassen, aber alle diese anderen werden nicht davon essen, verfügbar für Dislokation. Eines der Tage vielleicht können wir in 14 Tagen statt 24 setzen, also 14. Und wir können das auch auf 50 erhöhen, Sinn für mich, ja, 58 Ich denke, funktioniert gut. Deshalb haben wir es in Stapel gesetzt. Der Preis wird viel höher sein. So zum Beispiel, $2430 in diesem. Und was Sie tun können, ist, dass ich diese Aktie als Ihr Image bezeichnen werde. Ich lasse mich mein Tokyo-Bild nicht innerhalb meines Ordners finden. Sehen wir uns Tokio an. Ich werde es drinnen ziehen und ablegen. Was Sie in diesem Fall tun können, weil wir all diese Informationen haben , die geändert werden, dann lassen Sie uns auch etwas Gewürz dazu bringen. Lasst uns in unsere Bewertung gehen. Suchen wir den weniger Stern, der dieser ist, und stellen Sie ihn in einen grauen Zustand. So haben wir zum Beispiel eine Vier-Sterne-Bewertung für diese. Was ich jetzt tun werde, ist, dass ich sie alle auswählen werde. Statt der Pfeil auf Control C, springen Sie in meinen Horace Zustand, QED Kontrolle V. Und dann werde ich alles löschen, außer dem Pfeil. Also im Grunde haben wir alle diese Informationen. Und jetzt innerhalb unseres Bildes werde ich doppelklicken, um den Maskenmodus zu öffnen, Control M zu verschieben, damit ich es ein wenig vergrößern kann, zum Beispiel zwei hier. Und dann können wir, wir wollen zwischen unseren Staaten. Und Sie können sehen, wie einfach das ist. Es wird zeitaufwendig sein, weil wir all diese verschiedenen Staaten haben. Aber wenigstens hast du diesen schönen Effekt. Also wieder, wir haben die Hoegaarden, wir haben das Tokyo auf, und alles funktioniert wie es sollte. Also, um Sie nicht mit zu vielen dieser Details zu langweilen, werde ich das Video hier pausieren. Ich werde den Rest von ihnen machen und dann werde ich zurückkommen , damit wir an diesem Video hier unten arbeiten können. Und jetzt, da alle von ihnen abgeschlossen sind, das Lithium schnell hier zu gehen, um Vorschau und Sie können sehen Sie so Regatta, Barris, Kroc oder Tokyo, Gerste und Taipeh. Und natürlich habe ich einige Änderungen an ihnen vorgenommen. So können Sie sehen, dass wir für den Typ a zum Beispiel das Auto und ein Flugzeug hier haben. Wir haben hier nur eine Busfahrt. Wir haben drei von ihnen anstelle des Flugzeugs hier, wir haben diese beiden genau hier, wir haben das Flugzeug. Also nur die Vielfalt für den Kunden, um vor allem zu überprüfen. Und Sie können überprüfen und klicken Sie direkt hier von jedem dieser. Und sie können wirklich gehen wie diese Pfeile, weil ich denke, die Pause der Client und zwang sie auf diesen Bereich klicken. Sie können aber auch diese gesamte Karte anklickbar machen , wenn Sie möchten, dass sie auf die nächste Seite gehen. Also lassen Sie uns jetzt schnell an diesem Promo-Video arbeiten, damit ich das von einem Video schließen kann. Also die einzige Sache, die ich hier machen möchte , ist, mein Bild darin zu ziehen und abzulegen. Mal sehen, vielleicht können wir sogar ein Farb-Overlay einschließen weil ich nicht denke, dass das alles schuldig ist. Ich glaube nicht, dass es gut abhebt, also Control D, werde ich dies in Promo-Video-Overlay umbenennen. Und lassen Sie uns die gleiche Farbe verwenden, die wir verwenden. So fast schwarz und ich kann sieben auf meiner Tastatur schlagen. Lori runter auf 70. Jetzt sieht es viel besser aus. Also im nächsten Video werden wir im Grunde genau das gleiche tun , wie wir es für Verwerfen getan haben. Wir werden nur eine Komponente aus dieser Karte erstellen und Dan transformieren sie im Grunde in all unseren Designs. Also im Grunde kopieren und in alle von ihnen eingefügt. Und das wird unseren Workflow massiv beschleunigen. Aber ich werde Ihnen auch erklären, wie Sie das auch tun können. Also sehe ich dich dort. 29. Design erstellen: Lassen Sie uns nun zu den Zielen gehen und ich werde der Erstellung dieser Zielkarte beginnen. Also noch einmal die gleiche Geschichte, wie es mit diesem Abschnitt hier war. Wenn Sie diese als Wireframes erstellen, ist es wichtig, so viele Informationen wie möglich einzugeben, um Ihren Kunden so viel Kontext wie möglich zu geben, und dann rechtzeitig zu erklären , wie sie einmal aussehen werden Sie sind fertig. Aber Sie wollen nicht Ihre ganze Zeit im Voraus investieren. Und zuerst, weil Sie es schön und kurz halten wollen und Sie ihnen so viel Kontext wie möglich geben wollen, wie ich sagte, ohne all diese Informationen in, wie all diese Bilder, all diese -Animationen, all diese Übergänge, weil Sie den Kontext niedrig halten möchten und Sie die Struktur und das allgemeine Erscheinungsbild Ihres Designs bestimmen möchten. Bevor Sie mit all diesen zusätzlichen Informationen fortfahren und alle diese zusätzlichen Informationen in. Also, bevor wir zu diesem Abschnitt übergehen, habe ich gerade bemerkt, dass Sie alles für eine Minute sehen können, aber ich habe das nicht in letzter Minute geändert. Also lassen Sie mich das in allen letzten Minuten schnell machen. Ich werde es kopieren. Geh zurück in meinen Horrorzustand. Geh zurück hierher oder Last-Minute-Milchgewohnheiten. Und jetzt können wir zu den Zielen übergehen. Wieder einmal werde ich das Gleiche tun. Ich werde eine Komponente aus dieser erstellen. Ich werde das Video pausieren und ich werde ausfüllen, und nicht nur diese, sondern all diese anderen, nur um ein bisschen Zeit in diesem Video zu sparen. Aber wie gesagt, ich möchte Ihnen so viel Kontext wie möglich zu diesem Gesamtdesign, ungeordneter Struktur und zu diesem Gesamtfluss geben, nur damit Sie verstehen können, wie Sie das voranbringen können. Ich möchte Ihre Zeit nicht verschwenden, indem all diese Karten neu erstelle, denn wir werden acht Karten in diesem Abschnitt für Abschnitte mit acht Karten in vitro Informationen gesuchthaben acht Karten in diesem Abschnitt für Abschnitte mit acht Karten in vitro Informationen gesucht . Wie gesagt, ich will nicht zu viel von deiner Zeit verschwenden. Also, um zu beginnen, was wir eigentlich noch einmal tun werden, werde ich voran gehen und diese drei löschen, weil wir wissen, dass, wenn ich auf unsere Kunsttafel doppelklicke, wir wissen, dass die Rinnenbreite 60 ist, also ist das der Abstand, den wir zwischen unseren Karten haben werden. Also, um loszulegen, was ich eigentlich tun werde, ist die Pfeile zuerst zu machen. Denn wenn ich auf meinen linken Pfeil klicke, können Sie sehen, dass wir Standardstatus in Hover haben. Wenn wir zum Prototyp gesprungen sind, können Sie sehen, dass auf dem Standardzustand haben wir den Mauszeiger ausgewählt Auto animieren, Leichtigkeit in out und 0,3 Sekunden. Also werde ich das auch auf dem rechten Pfeil tun. Also werde ich klicken, ich werde anstelle der Registerkarte verwenden, ich werde den Hover verwenden. Automatisch animieren. Jedoch, Leichtigkeit und Nullpunkt drei Sekunden. 3.3, Entschuldigung, 0.3. Drücken Sie die Eingabetaste, nur weil ich die Konsistenz beibehalten möchte. Und später, wenn ich ihn kopiere und einfüge, werde ich dasselbe für all diese anderen Pfeile tun. Also, weil wir es wagen, gehen wir mit dem Design und wieder, gehen wir zurück in die Städte. Ich werde die Gruppierung aufheben und ich werde es Zielkarte so nennen. Das erste Ziel ist Paris genau hier. So Träger. Und ich werde Explorer eingeben. Die Stadt der Lichter so. Und statt 24 Tage können wir uns zum Beispiel mit etwa sieben Tagen beschäftigen. Dann wieder einmal, hier ist dies, wo es nützlich ist. Weil wir stapeln würden eingeschlossen. Ich kann einfach hier zum Beispiel springen, und sagen, ich will bei 24 sein, Ich möchte bei 65 Vielleicht. Ich denke, das ist gut. Ich denke, das sieht gut aus. Und Sie können immer direkt in springen und diese Werte direkt hier ändern, anstatt einfach darauf zu klicken, dann nach links und rechts zu ziehen, können Sie immer, wie gesagt, einfach klicken und den Wert hier eingeben, den Sie wollen. Eine letzte Sache ist, dass wir den Preis dafür ändern werden, werden 450 sein, so. Also hatten wir das Paris und geben wir ihm zum Beispiel vier Sterne. Also Bewertung für Sterne, denke ich, das ist gut. Und anstelle von Zielbild, nennen wir es Paris Bild. Ing, denn wie gesagt, wir werden mehrere davon haben und wir werden verschiedene Ziele innerhalb einschließen. Also lassen Sie mich schnell in meinen Bild-Ordner springen. Also Pharaonen hier und ziehen Sie es hinein. Und im Grunde sieht so mein Bildordner aus. Ich werde diese Bilder einfach per Drag & Drop hineinziehen. Ich habe auch diese Partner-Logos. Ich habe auch diese Flaggen, wie ich dir gezeigt habe. Und im Grunde können Sie es auch tun. Jetzt habe ich sie als diese Dimensionen exportiert, also ursprüngliche Dimensionen innerhalb der Datei. Aber noch einmal, wenn Sie wollen, um die volle Dimension dieser Bilder zu erhalten, verwenden Sie sie für Ihr Portfolio oder für Ihre Kundenarbeit. Gehen Sie zu den Envato Elements und erhalten Sie das Abonnement für ihre Selbst wird es wert sein, weil Sie gehen, um all diese massiven Bilder zu bekommen. Ich denke, dieses Originalbild war so etwas wie acht K oder so etwas. Aber hier, exportiert, wie Sie sehen können, ist es nur 366 Wochen bis 60 wird genug für dieses Projekt sein. Aber wie gesagt, wenn Sie wollen, können Sie das tun und das Abonnement für sich selbst und erkunden Sie alle diese Bilder, die ich Ihnen jetzt für jetzt gezeigt, drücken Sie die Steuerungstaste für diese Zielkarte. Und wenn ich Sie hier mitnehme, können Sie sehen, wir haben spezielle Angebotskarte und wir haben Zielkarte. Also denke ich, es ist in Ordnung. Jetzt lassen Sie uns die Staatsmacht schweben. Ich werde es öffnen und noch einmal, nur Bild. So Shift Alt und Linksklick. Sie müssen innen doppelklicken, um auf die Maske zuzugreifen. Denn wenn Sie dies nicht tun und Sie die Umschalttaste Alt so tun, wird es die Gesamtgröße Ihres Bildes erhöhen. Also wird es so nach draußen gehen. Aber sobald Sie doppelklicken innerhalb geht, um den Bildmaskenmodus zu betreten, Umschalttaste Alt, und Linksklick erhöhen Sie es nur leicht. Wieder einmal werden wir zu den Pfeilen übergehen. Entschuldigung, so dass diese Tradition Karten, wir sind in der Hover-Zustand, also werde ich auf Pfeilmaske gehen. Und ich werde es hier erweitern. Und ich bin endlich, ich werde hier weitermachen und das auf acht einschließen. Und das ist es im Grunde. Die nächste Sache ist also, zurück in den Horrorzustand zu gehen. Und wir werden wiederholtes Gitter verwenden. So können Sie das Wiederholungsraster verwenden oder Sie können einfach Alt oder Option und dann ziehen und ablegen Sie sie an, wie Sie wollen. Aber ich werde Wiederholungsraster nur um der Konsistenz willen verwenden. Wie gesagt, ich brauche acht von ihnen. Also 2, 4, 6, 7, noch eins. So wie das hier. Und ich werde sie in einer Gruppe hochwertiger Städte wie diese positionieren. Und ich werde zu meinem Wiederholungsraster springen, Raster aufheben. Sie bleiben also innerhalb des Ordners selbst. Sie bleiben in der Zeichenfläche selbst. Der Hauptpunkt hier ist, das konsistente Aussehen und Gefühl zwischen ihnen zu erhalten. Wie Sie sehen können, bleiben sie in unserer Zeichenfläche. Wenn Sie also Preview-Client drücken, wissen 100 Benutzer, dass sie mehr Karten sind, um hier zu sein, so dass sie diese Pfeile verwenden können, um nach links und rechts zu gehen. Also, was ich jetzt tun werde, ist, das Video zu pausieren, damit ich sie organisieren kann. Du weißt, wie ich gerne Sachen mache. Also werde ich diese 1 zuerst setzen, ich werde diese 1 Sekunde setzen. Und jetzt, da ich das getan habe, muss ich den gleichen Abstand zwischen ihnen einschließen. Also werde ich 60 halten Shift verwenden, um diese zu deaktivieren, Shift zu halten, gedrückt halten, Shift halten, Shift halten und dasselbe für alle diese anderen tun. Also halte ich einfach die Umschalttaste gedrückt, um zu ziehen, halte dann die Umschalttaste gedrückt und klicke, um die Auswahl aufzuheben und ziehe sie dann einfach nach hier. Also zuerst, wenn wir Preview nur, um diese europäischen Destinationen zu sehen. Und wenn ich den ganzen Weg nach unten scrolle, können Sie sehen, dass, sobald ich Hover gedrückt habe, alles so funktioniert, wie es sollte, aber Sie können nicht alle diese anderen erreichen. Also, wie kann man das ändern? Es ist ganz einfach mit Ihrem Ordner ausgewählt und ich werde diesen Titel kopieren. Was Sie tun können, ist einfach horizontale Scrollen zu verwenden, klicken Sie rechts dort. Und es wird an den Rand gehen, genau hier. Aber genau hier, was ich tun werde, ist im Grunde nur ein bisschen Platz hier auf der linken Seite zu lassen. Also, jetzt, wenn ich Preview drücken und wir zu dieser Phase unseres Designs kommen hier ist es. Jetzt, wenn Sie klicken und ziehen, wie Sie sehen können, können Sie immer noch alle diese Karten wie diese sehen, und Sie können immer noch ein bisschen Ablagerungen hier jetzt sehen, das nur verwendet wird, weil Ihre Benutzer darauf hinweisen, dass sie einige mehr Karten sind um genau dort zu sein. So können sie diese Pfeile unten anklicken und sie können immer noch so auf sie zugreifen. Das war's also für diesen Teil. Ich werde es in Städte wie diese umbenennen. Und ich werde jetzt reinspringen und all diese Städte ändern. Ich werde alle diese Namen sowohl für den Standardstatus als auch für den Hover-Status ändern. Und was Sie auch tun können, ist, wenn Sie Ihre Städte kennen, können Sie den Namen dieser Karte ändern. Also können wir das auch hier tun. So können Sie in die erste Minute Spezialangebot Karte springen. Ich kann es entweder so belassen oder ich kann hier doppelklicken. Und qualitativer Ricardo. Nun, das wird nicht enden direkt hier hinzugefügt weil wir nur spezielle Angebotskarte als unsere Hauptkomponente verwenden. Das wird dir nur helfen, die Dinge hier ein bisschen zu organisieren. Tokyo und ich werden das in Bali umbenennen. Sie können das auch hier tun. Also Paris, Charkow. Und schließlich haben wir Typ B, ihren Kopf. Und jetzt, wo das abgeschlossen ist, wie gesagt, werde ich weiter unten gehen und ich werde zuerst 1 tun, nur um es dir noch einmal zu zeigen, also Paris. Und sagen wir, dass dies zum Beispiel London sein wird. Also London, und ich werde hier reinspringen. Ich gehe, der Wald fängt an, also nenne ich es London. Ich werde sagen, Explore und zum Beispiel, Geschichte von London. Für die Tage werden wir zum Beispiel auch 70er Jahre haben . Also denke ich, dass das in Ordnung ist. Aber hier werden wir nur das Auto entfernen, also nicht verfügbar. Und im Inneren des Paris, zum Beispiel, können wir das auch tun. Also lassen Sie uns Moodle sehen, Moodle Transportwagen. Wir können es loswerden. Und sobald du das tust, wenn wir in den Staat Horace gehen, wird es auch dort sein, aber ich werde es auch hier entfernen. So Transport Auto Notizen zur Verfügung, Milchgewohnheit, und es sollte auch in allen diesen anderen aktualisieren. Vielleicht muss ich die Datei nicht speichern und dann wird sie aktualisiert. Aber egal was, wie Sie sehen können, wir haben das 1, vor allem, den Preis aktualisiert , also lasst uns es auf 820 ändern, mein Vater. Und jetzt, was ich tun will, ist das gleiche wie zuvor. Zunächst einmal, ändern Sie das in London. Gehen Sie zu meinem Bild-Ordner und suchen Sie London. Drag & Drop mein Bild hinein. Wählen Sie nun alles außer dem Pfeil Control C. Springen Sie zu meinem Horror-Zustandskontrolle V, und löschen Sie dann alles außer dem Pfeilende Ziel aktuelle BG. Jetzt werde ich hier doppelklicken, Shift-Kontrolle und erhöhen Sie es. Geh zurück zu hier. Und jetzt, wenn wir die Vorschau drücken, nur um es dir zu zeigen , aber zuerst muss ich das wieder in den Standardzustand bringen. Also, wenn wir jetzt zurück zu hier gehen, scrollen Sie den ganzen Weg nach unten. Sie können sehen, wir haben Paris, wir haben London. Die Preise sind unterschiedlich. Also, wenn ich hier schwebe, wenn ich direkt hier schwebe, und ich kann einfach zwischen ihnen wechseln und wir werden das später animieren. Das werde ich dir im nächsten Video zeigen. Also für dieses Video, Das war's. Ich werde jetzt voran gehen und sie alle ändern. Und dann werde ich im nächsten Video zurückkommen und dir zeigen, wie das aussieht. Und dann können wir zu all diesen anderen Abschnitten unseres Designs übergehen. Aber sie sind nur Punkt, um all das in einem einzigen Video zu erklären und ihre Schulden hinzuzufügen. Wie ich schon sagte, verschwenden Sie Ihre Zeit, indem Sie Stunden und Stunden ausgehen , um all diese verschiedenen Zustände zu ändern. Also sehe ich dich im nächsten Video und dann wirst du sehen, wie sie sich alle ändern, sowie all diese anderen. 30. Design erstellen: Willkommen zurück und wir werden weitermachen, wo wir das vorherige Mal aufgehört haben. Also, im letzten Video, habe ich dich mit diesen gelassen und ich mache voran und beende sie. Also habe ich weitergemacht und dann das mystische Asien gefüllt, schöne Amerika. Also im Grunde haben wir jetzt einen vier großen Kontinent. So haben wir europäische, afrikanische, asiatische und amerikanische Destinationen. Und im Grunde ging ich voran und schuf sie alle. Also, wenn ich Preview und Springen direkt hier, vergrößern Sie diese wirklich schnell, ich kann nach unten gehen. Sie können sehen, dass wir Paris, London, Rom, Prag haben , und ich kann all diese ziehen. Wir haben auch das gleiche für Afrika, so dass alle diese Destinationen gut funktionieren. Wir haben das gleiche für Asien und wir haben das gleiche für Amerika. In der Bearbeitung, die fixiert sind, ist der Hover-Effekt auf alle diese Pfeile. Also alle diese richtig, Pfeile hier, die Sie sehen können. Jetzt arbeiten sie alle so, wie sie sollten. Eine letzte Sache, die ich behoben habe, sind die CTs. Also in jeder Stadt, ging ich voran und benutzte dies eine so horizontale Schriftrolle. Und ich habe diese linke Kante an den Rand unseres Gitters gekappt. Das ist im Grunde alles, was ich getan habe. Was wir also als nächstes tun werden, bevor wir zu einer dieser nächsten Phasen übergehen, ist, dass ich im Grunde eine Animation für sie erstellen und im Grunde zwei verschiedene Zustände erstellen werde. So können Benutzer entweder hier durchblättern oder noch eleganter hier auf diese Pfeile klicken und dann nach links und rechts gehen. Was wir also tun werden, ist im Grunde, dass wir diese ganze Sache in die Komponente umwandeln können , wenn wir wollen. Aber ich werde das im Grunde tun. Europäische Destinationen. Oder noch besser. Ja, lass uns das tun, nur um Zeit zu sparen. Also drücken Sie die Strg-Taste und erstellen Sie diese ganze Sache als Komponente. In diesem Inneren haben wir diese verschachtelten Komponenten für die Schaltfläche und für die Pfeile. Also werden wir nur noch einen weiteren Zustand hinzufügen. Qualität geklickt. Zum Beispiel, wie wir es vorher getan haben. Und innerhalb des angeklickten Staates werden wir in unsere Städte springen. Klicken Sie auf unseren Städteordner und ziehen Sie einfach, bis die Stadt genau hier rechts an dieser Rasterlinie ausgerichtet ist. Wenn wir also zwischen ihnen und Standardstatus und Klicks Datum scrollen, ist das das einzige, was sich ändert. Lasst uns jetzt weitermachen und dasselbe für Afrika tun. Also Control K, um einen neuen Aufruf zu erstellen angeklickt. Und ich werde diesen Text kopieren. Ein Auditing, das wir tun werden, ist, wie ich schon sagte, in Städte zu springen und diesen Ordner direkt hier zu verschieben. Schließen Sie dann die gesamte Sicherung. Umgezogen nach Asien, Steuerungstaste. Hinzufügen eines neuen Status Qualität angeklickt. Und an diesem Punkt, wenn Sie alle diese verschiedenen Elemente hinzufügen, all diese verschiedenen Bilder, können Sie sehen, wie Adobe XD ein wenig langsam läuft. Und vor allem in meinem Fall und Schulden, Ich benutze Wand dieser Programme und Software auf Adobe XD, so dass ich tatsächlich alle diese Lektionen aufzeichnen kann. Sie können sich also vorstellen, dass Ihre etwas schneller laufen wird. Aber deshalb ist es wichtig, diese Bilder zu optimieren. Und deshalb ist es wichtig, sie so zu haben. In Bezug auf die Bildoptimierung wird das, was ich unter Windows verwende, als Unruhen bezeichnet. Und ich bringe es schnell rein. Also hier ist es. Es heißt Riots. Grundsätzlich ist das einzige, was ich mache, ein , das ist übrigens kostenlos. Ich glaube, es heißt Bild oben Tim auf Mac. Ich werde versuchen, es auszugraben und ich werde es in der PDF-Datei lassen, damit ihr Zugang dazu habt. Aber ich werde immer empfehlen, dass Sie Ihre Bilder optimieren. Was das Ihnen erlauben wird, ist eine niedrigere Bildgröße. Es wird nicht mit der Auflösung verwirren, nur um die Größe zu reduzieren. Ihre Software, Adobe XD, wird also in diesem Fall viel reibungsloser und schneller laufen, da Sie diese Bilder später optimieren wird es wichtig sein, weil Sie diese Assets an Ihre Kunden und Entwickler senden werden. Also, was auch immer Sie Ihren Entwicklern diese riesigen Dateien schicken, sie müssen das später tun. Also im Grunde ist es deine Aufgabe, das für sie zu tun. Grundsätzlich werden Sie Ihr Bild direkt hier auf das ursprüngliche Bild ziehen und ablegen, klicken Sie auf Optimieren n geht, um es zu optimieren, entschuldigen, Sie müssen nicht klicken, auch Sie können es einfach hier ziehen. Es wird beginnen, automatisch zu optimieren, und dann wird es Ihnen zeigen, dass genau hier. einzubringen, habe ich ein Bild hier auf meinem Desktop, damit ich es hier per Drag & Drop ablegen kann. Es wird Ihnen zeigen, dass Sie es optimieren können beginnen. Also, wie Sie es optimieren wollen? Dies ist die ursprüngliche Auflösung. Also, oh tut mir leid, Originalgröße. Ich möchte auf Ja klicken, es wird es optimieren. Und da dies bereits optimiert ist, wird es nicht angezeigt. Es ist ein riesiges Potenzial. Also lass mich tatsächlich zurück zu meinem Computer gehen und ein Ohr finden. Also hier ist mein Bild von meinem Computer. Und das werde ich Ihnen an einem echten Beispiel zeigen. So hier können Sie sehen, dass das Originalbild 2,5 Megabyte optimiert ist von 1,7. Das letzte, was Sie tun müssen, ist einfach auf Speichern klicken. Es wird zu diesem Ziel sparen. Es wird so aussehen, als wäre es seltsam hier und es wird aussehen, als würde es verzerrt. Aber glaub mir, es ist nicht, es ist nur, dass die Vorschau, die so aussieht. Eine letzte Sache daran ist vor allem bei Projekten, die so groß sind wie dieses, an dem wir in dieser Klasse arbeiten. Wenn Sie mehrere dieser Bilder haben, haben sie diese Stapelfunktion. Also im Grunde können Sie genau das Gleiche tun. Batch, importieren Sie alle Ihre Bilder, die Sie wollen. Klicken Sie auf Speichern. Es wird sie speichern und jeden von ihnen zum bestmöglichen Wert optimieren. Im Grunde, das ist es für die Bilder. Jetzt gehen wir weiter und animieren alle diese. Also werde ich zum Prototyp für europäische Destinationen gehen. Ich werde meine Pfeile finden, einen rechten Tabulatorpunkt. Ich werde darauf klicken. Also werden wir tippen, Auto animieren, wählen Sie den Zustand, geklickt, einfach und aus und Nullpunkt, sagen wir sechs Sekunden, nur so dass wir diesen schönen Fluss haben. Und jetzt können wir wieder in den angeklickten Zustand zurückkehren, unsere Pfeile wieder finden. Jetzt linker Stepppunkt. Verwenden Sie dieselben Einstellungen, wechseln Sie jedoch zum Standardstatus. Und Milchherden. Jetzt können wir zum Standardzustand zurückkehren. Es war Afrika. Verwenden Sie Pfeile. Also rechts, Tab, Punkt, klicken Sie rechts hier. Wechseln Sie zum angeklickten Zustand. Wechseln Sie zu unserem angeklickten Zustand. Pfeile, linken DAP-Punkt klicken Sie rechts dort. Ich gehe in den Standardzustand. Wie Sie sehen können, Adobe XD, mindestens drei Mitglieder, alle diese Einstellungen, so dass Sie sie nicht eingeben müssen. Wieder einmal, was nicht immer der Fall war, mussten Sie all diese Dinge tun. Es war also wirklich eine lästige Pflicht. Aber jetzt ist es viel besser, Dandy, verbessere dich, Dad. Ich wünsche nur, dass sie das weiter verbessern werden. Und sie sagten, sie werden sehen: Ich vertraue ihnen, weil sie alle diese Veränderungen durch die ganze Zeit mit diesen Zuständen. Zum Beispiel müsste ich das Video nicht pausieren und dann zurückgehen und all diese Bilder bearbeiten. Vielleicht werden sie, es wird eine weitere Option in der Zukunft geben, dass Sie einfach diese Bilder ziehen können und Sie müssen es nicht zu all diesen Zuständen manuell hinzufügen und alle von ihnen ändern. Also gehen wir endlich zurück hier, um Staaten und Pfeile nach links zu zeigen klicken. Klicken Sie dort rechts. Wir gehen in den Standardzustand ist in unserem 0.6 und gehen zurück zu unserem Standardzustand. Und wir können zurück zum Design gehen, Preview drücken. Mal sehen, wie das alles aussieht. Wir können direkt hier zu unseren europäischen Destinationen gehen, unseren Pfeil finden, darauf klicken, und es wird wechseln, um zu hören, wie es hier ist. Klicken Sie auf, wird wechseln, um zu hören. Das funktioniert immer noch, Hover-Effekt funktioniert immer noch. Lasst uns das schnell für alle tun. So funktioniert es. Es funktioniert genau hier. Gehen wir zurück zu hier. Es funktioniert. Und ich werde immer empfehlen, dass Sie Ihre Designs überprüfen weil manchmal gibt es Störungen auf der XD-Seite, aber die meisten Male gibt es einige Fehler, die Sie zum Beispiel vergessen haben, einzuschließen und solche Sachen. Also, bevor wir zu diesem Abschnitt mit unseren Top-Destinationen für dieses Video gehen, Ich möchte beheben und eine schnell hinzugefügt diese einfachen Elemente wie diese auf, zum Beispiel. Also buchen Sie Ihre Traumreise. Ich suche nur mein Bild in meinem Bild-Ordner und ziehe es in einen Kanarienvogel. Positionieren Sie es, wenn ich will, aber ich denke, das sieht gut aus. Ich will nicht als nächstes zu tun ist direkt hier springen, also gibt es eine perfekte Reise für jeden sehen könnte. Ich werde es hineinbringen und ich werde eigentlich, anstatt zu träumen und wann ich das ändern soll, um perfekt aussehen zu lassen. Und der Grund, warum ich das tue, ist, dass wir das später exportieren werden. Es ist also am besten, alle diese Bilder jetzt zu ändern und ihre Namen zu ändern. Es ist also viel einfacher, später zu exportieren. Endlich werde ich zu unserer Fußzeile springen. Und für unsere Fußzeile wird eigentlich ganz einfach sein. Wir werden Fußzeilenbild haben, das in diesem sein wird. Also lassen Sie mich es in meinem Ordner betrachten. Und da ist es, und ziehen Sie es an Orten, genau wie Mädchen herumliegend, Chilling. Also, was ich tun werde, ist dupliziert. Also dasselbe noch einmal, wir gehen hier zu fast schwarz. Wir werden es Fußzeile nennen. Farbe, Overlay und Malerei, wie wir es mit dem Video gemacht haben, werden wir es einfach auf 70 Prozent senken. Und das ist es im Grunde für dieses Video. Das Letzte, was ich für dieses tun kann, bevor ich zu diesem übergehe und mit diesem und dem hier fertig bin, was uns die meiste Zeit in Anspruch nehmen wird. Dieser Abschnitt unten, vielleicht kann ich Sie mit diesem Abschnitt verlassen. So Reise Kategorien, können wir vielleicht mehr 12 Schulden. Und das kann ich wirklich schnell machen. Also lasst uns da reinspringen. Also, was wir tun werden, ist, alle drei von ihnen so zu öffnen. Also rufen wir diese Wellness-Karte an. Wir werden das hier Skifahren nennen und das hier Kreuzfahrten nennen. Und wir werden das so Kreuzfahrten Karte Farbe Ordnung geben , Lee. Und wir werden diesen Abschnitt hier im Grunde kopieren. Halten Sie es hier, dann verwenden Sie dies als Keaton-Strom. Obwohl klicken Sie rechts hier, fügen Sie es wie so ein, und fügen Sie es hier ein, aber ich muss es kopieren. So bekannter Schal, der genau hier in ihm springt, und das ist es im Grunde. Nun, für diese farbigen Überlagerungen, was wir tun wollen, ist es im Grunde auf 50 Prozent zu senken, zum Beispiel. Also lasst uns das machen. Klicken Sie rechts dort, Gehe zurück zu 50. Gehen Sie zu diesem, klicken Sie darauf, gehen Sie zurück zu 50. Und schließlich klicken Sie auf diesen, ändern Sie seine Farbe, gehen Sie zurück zu 50. Und jetzt haben wir unser Image. Also werde ich das benutzen. So vielleicht können wir tun, wie Skifahren Strom und dann Ski-Karte, Bild, Kreuzfahrten, Karre geht Gag Bild und so weiter. Vielleicht können wir das tun. Lassen Sie uns schnell verstecken und diese farbigen Overlays, ich kann sie auf 0 bringen. 0. Jetzt werde ich das duplizieren. Also Wellness Guard, IMG, Sie bekommen diese Karte Kreuzfahrten Karte. Und schließlich, in dieser, so Schema-Karte, bin ich G. Jetzt müssen wir diese verstecken, und nur damit wir nicht die Pannen haben, die ich im Heldenbereich erklärt habe. Also lassen Sie mich meine Bilder finden. Also werden wir mit Wellness Bild beginnen. Also werde ich es per Drag & Drop an Ort und Stelle. Da ist es. Ich gehe zu Kreuzfahrten und ziehe es ab. Und schließlich werde ich mein Ski-Bild m bringen, Iso. Ich werde meine Farbe oder nur 50 Prozent bringen, das in 50 Prozent bringen und das endlich bei 50 Prozent in Position bringen. Und jetzt, was wir tun können, ist mal sehen, auf dieser so Wellness, Wellness Reise zum Beispiel. Kreuzfahrten Reise, mein Vater, und schließlich Skifahrt. Damit wir hier abheben können. Also drücken Sie die Steuerungstaste, Control K hier, und die Steuerungstaste rechts hier, um diese als Komponenten zu erstellen. Und schließlich, das gleiche wie all diese anderen, aber wir werden nur ihren Nachlass haben, so leid, nicht den Staat selbst. Also schweben und Dreck. Und im Inneren des Howard, was wir tun werden, ist schnell verstecken diesen Doppelklick auf unser Bild. Also im Grunde dasselbe. Vergrößern Sie einfach das Bild innerhalb der Maske ein bisschen so. Gehen Sie zurück zum Standardzustand, Kreuzfahrten, dasselbe. Erstellen Sie also einen Hover. Im Inneren des Hovers werde ich meine Farbe mündlich verstecken. Und der Grund, warum ich diese Hintergründe zum Beispiel verlassen habe, ist vielleicht möchte ich eine Art Farbüberlagerung darüber hinzufügen. Vielleicht möchte ich ein paar Hintergrundschatten hinzufügen. Vielleicht möchten wir all diese verschiedenen Elemente hinzufügen. Also lasst es uns einfach vorerst dort bleiben, und vielleicht wollen wir später wieder darauf zurückkommen. Es ist also immer am besten, diese Option von Anfang an zu haben. Also hier werde ich einen Horrorzustand verwenden. Noch einmal, Horror. Mal sehen. Also vielleicht kann ich mich verstecken, doppelklicken Sie hier und vergrößern Sie es. Und eigentlich habe ich schon eine Idee. Also, weil sie bereits diesen Schlagschatten haben, werde ich es erhöhen, um zu helfen, im Grunde haben die gleiche Wirkung wie wir mit all diesen anderen Karten tun. Deshalb haben wir es nur als Option. Vielleicht möchten wir es später bearbeiten, wie wir es in diesem Fall tun, aber nicht im Standardzustand. Ich wollte es um fünf behalten. Wagen Sie sich. Ich will in den Staat Horace gehen und es dann öffnen. Gelegen, ändern Sie es in so. Wechseln Sie zum Standardstatus zurück. Und schließlich in unserem Wellness, möchte ich in Horace Staat gehen und dann dort ändern, um Milchgewohnheiten zu essen. Und das ist alles, was wir für dieses Video tun werden. Wie Sie sehen können, haben wir ziemlich viel getan. Als nächstes werden wir uns mit den Top-Reisezielen beschäftigen, und dann werden wir uns mit diesen Zeugnissen auseinandersetzen. Und schließlich mit diesem Abschnitt, der eigentlich die schwierigste in Bezug auf Animationen sein wird, weil wir mit einer Menge von zwei verschiedenen Zuständen zu tun haben. Aber es wird nicht so schwierig sein. Es ist nur zeitaufwendig. Aber bevor wir das tun, lassen Sie uns schnell eine Vorschau, was wir bisher getan haben. Also haben wir das alles beendet. All dies sieht gut aus, wie Sie sehen können, Bild sieht hier gut aus. All das sieht gut aus. Wir werden uns später damit beschäftigen. Und jetzt haben wir das hier. Was mir offensichtlich nicht gefällt, ist, dass wir diesen Text von hellgrau zu weiß ändern müssen. Also werde ich das jetzt tun. Also lokalisieren Sie sie. Also werde ich mich ändern, das wird einfacher. Weiß, weiß bis weiß. Und dann werde ich zurückwechseln. Okay, das ist in Ordnung. Also schweben, schweben und schweben. Das ist weiß, weiß, weiß, was in Ordnung ist. Also folgte es im Grunde ein dem Standardzustand, wie es sollte. Aber wie er sagte, immer ändern und immer. Wenn Sie Änderungen vornehmen, überprüfen Sie immer, ob sie angewendet wurden. So wie es im vorherigen Video gesagt, wenn Sie eine dieser Karten ändern möchten, wenn Sie zum Beispiel direkt hier springen. Jetzt wissen wir, dass dies die erste Karte für das Paris war, die ich erstellt habe. Aber wenn ein Springen hier und ändern Sie dies zum Beispiel rot, wie Sie sehen können, wird es nicht in Echtzeit über alle von ihnen aktualisiert, wie es sollte. Was wir tun können, ist mit der rechten Maustaste darauf zu klicken. Die Hauptkomponente wird es hier zeigen. Und jetzt in dieser Hauptkomponente, wenn ich es öffne, weil wir die Namen all dieser Autos geändert haben, zum Beispiel. Jetzt, wenn ich es auf Rot umstelle, können Sie sehen, dass es sich ändert und es wird in Echtzeit über alle von ihnen aktualisiert. Und zum Beispiel, wenn ich zurück Kontrolle zed, vielleicht möchte ich die Ecken auf 10 runden, 80 Prozent zum Beispiel. Und Sie können sehen, wie diese Ecken genau hier unten aussehen. Aber vielleicht will ich das nicht tun. Vielleicht will ich runden, ich weiß nicht, vielleicht möchte ich das auf, sagen wir, 500 erweitern. Und wenn ich hier zurückschaue, kannst du es sehen. Und es zeigte, dass Veränderungen in Echtzeit in allen von ihnen. Stellen Sie also sicher, dass Sie mit der rechten Maustaste auf Hauptkomponenten für jede beliebige Komponente bearbeiten klicken. Wenn Sie sicherstellen möchten, dass es für alle Ihre Entwurfsänderungen korrekt angewendet wird. Also, das ist es für dieses Video, Ich werde Sie in der nächsten sehen, wenn wir mit einem Umschalten diese fortsetzen und diese Änderungen vornehmen. 31. Design erstellen: Lassen Sie uns weiter, wo wir das vorherige Video aufgehört haben. Und nun gehen wir weiter und beenden diese Homepage, die wegen ihrer Länge wieder die schwierigste sein wird. Und weil wir bereits viel von der Arbeit hier auf der Homepage gemacht haben, wird es viel einfacher sein, denn wenn Sie sich von diesen Wireframes erinnern, alle diese unteren Abschnitt im Grunde, dass wir nur kopieren und einfügen. Und dieser Abschnitt hier ist im Grunde fast fertig, so wird es viel einfacher auf diesen nächsten Seiten. Also lasst uns jetzt zu unserem Top-Ziel übergehen. Und was ich tun werde, ist dasselbe wie vorher. Ich werde das hier aufmachen. Lassen Sie mich zuerst alle diese Top schließen, damit es uns nicht stört Ziel. Und nennen wir es zum Beispiel top. Diese Spendenkarte. Und was ich drinnen machen werde, ist ein bisschen anders als vorher. Ich werde all diese Gruppen gruppieren, Control G drücken, es Inhalt nennen. Habe ich. Und ich werde einen Stapel einschließen. Es wird den Stapel erkennen, wie er von oben nach unten geht und wie zuvor. Sie können den Stapel zwischen ihnen offensichtlich erhöhen oder verringern. Aber was ich eigentlich tun werde, ist keine Schulden. Also lasst uns alle zusammenfassen. Ich denke, das wird viel mehr Spaß machen. Inhalte wie dieser. Und jetzt füge das in einen Stapel ein. Also, wenn Sie sich bewegen, einer von ihnen wird den aktuellen in Echtzeit aktualisieren, wie Sie sehen können, und es wird es verantwortungsvoll skalieren. Und das ist besonders wichtig später, wenn wir zum Responsive-Größenänderungsteil dieser Klasse kommen. Also, wie ich sagte, ich werde das tun, für diese gewährt die Zielkarte. Also nennen wir es die erste Top-Zielkarte, Vg. Also können wir wissen, sobald wir mit dem Export beginnen, wieder, wir haben den gleichen Schatten oder fünf, wir werden es im Hover-Zustand erhöhen. Also zuerst, lassen Sie uns unsere Komponenten erstellen. Also drücken Sie die Steuerungstaste. Gehen wir zu unseren Hover-Staaten. Eigentlich wissen Lassen Sie uns zuerst mit dem Inhalt selbst befassen. Und ich werde dieses Top-Zielbild nennen. Wählen Sie dieses Top-Zielbild, Milchherde. Und ich gehe zurück zu meinem Image-Ordner, suche die Malediven. Und ich werde es so reinbringen. Als nächstes werden wir im Grunde diesen Hover-Zustand erstellen. Also geh mit dem Schweben. In unserem Horace-Zustand kann ich hier doppelklicken und mein Bild vergrößern. Und im Grunde gehen Sie hier runter und erhöhen Sie den Schatten auf solche Hilfsmittel. Und der Grund, warum ich alles in Hubbard steckte, stelle dir mal vor, dass deine Kunden dieses Layout nicht wirklich mögen. So wollen sie zum Beispiel, dass Sie zwischen den Preisen wechseln. Vielleicht wollen sie den Preis an der Spitze anstelle dieses Textes setzen. Deshalb ist es wirklich, das alles in einem Stapel zu haben. Zeitsparend, denn stellen Sie sich vor, dass sie sagen, Okay, setzen Sie den Preis oben. Wer sagte, mach dir keine Sorgen. Klicken Sie hier und ersetzen Sie es einfach so. Und da hast du es. Sie haben Ihr neues Layout mit nur einem Klick. Diese Tipps sind also sehr zeitaufwendig, besonders später, wenn Sie dieses Projekt erweitern, wenn Sie viel mehr Details damit eingehen. Und ich denke wirklich, dass diese Tipps und Techniken sind wirklich riesig Zeitersparnis ist, wenn es um die Arbeit geht, vor allem an einem großen Projekt. Also lasst uns diese löschen und ich werde dasselbe tun, wie ich es vorher getan habe. Hit Control G. Und ich werde es nennen, zum Beispiel Ziele. Und was ich tun werde, ist meine alte Schlüsselposition zu halten, diese hier, macht es 60. Und das sollte genau hier gehen. Das ist alt, wieder hier. Und weil sie 44 Säulen breit sind, werden wir diesmal sechs davon erschaffen. Also lass uns mit 69 Dreck gehen. Ich werde mich hier positionieren. Und ich werde diese einfach auswählen, um es herauszufinden, meinen alten Schlüssel zu halten. Stellen Sie sicher, dass sie hier 60 sind und positionieren Sie sie an den unteren soliden Sämaschinen. Das und das hier. Nun, was ich tun werde, ist in den ersten zu springen, rufen Sie es in nicht DVS oder einfachere schimmelige Blätter. Und lassen Sie mich das Video hier pausieren, damit ich all diese Informationen ausfüllen und zurückkommen kann. Und jetzt, da ich all diesen Inhalt einbrachte und eine Lesung einfügte, lass mich dich schnell durch führen, damit du für den Hover sehen kannst, habe ich im Grunde genau das Gleiche für alle gemacht. Das einzige, was ich getan habe, ist, anstatt diesen Text hier zu verwenden, wie diese oder feste Größe, wie diese oder feste Größe, ich ändere es in die automatische Höhe, nur so dass es später viel einfacher skalieren kann , wie Sie auf der responsiven Größenänderung sehen können. Und es wird diesen Text runterdrücken. Es wird später viel einfacher sein, es zu entwerfen. Sobald wir zu einem Responsive Größe Teil dieser Klasse erhalten. Schließlich, innerhalb des Inhalts sehen Sie so nichts wirklich geändert, alles blieb gleich und enthalten Bilder für all diese verschiedenen. So können Sie für die Toskana sehen und so weiter, so weiter. Also lasst uns das endlich ändern und ersetzen. Also das erste, was ich wirklich tun möchte, ist gehen Sie zu meinem rechten Pfeil, gehen Sie zu einem Prototyp klicken Sie hier, und ich werde Hover wählen. Ich werde Ease Out wählen. Und 0.3, wenn Sie daran denken, nur die gleichen Einstellungen wie diese zu haben. So ist aber unser 0.3 und da hast du es. Also gehe ich zurück zu meinen Standorten, gehe zurück zu Design, doppelklicke hier, Qualität, oben, oben, an unserer Spitze, da ist die Nation von diesem Hit Control K. Und im Grunde das einzige, was ich bin gehen, um genau hier zu tun ist, einen neuen Zustand zu verwenden. Also klickte auf meine Schulden. Und davor können wir in den Standardzustand gehen und unser Ziel verwenden. Und tu das Gleiche. Erstellen Sie also horizontale Bildlaufgruppe. So können wir dann später in unserem Responsive Design anpassen lassen Zweifel und wir werden es und Ziele wie das nennen. Also jetzt, wenn wir wieder auf geklickt wechseln, sollte es übersetzen. Es hat es einfach geöffnet und unsere Liste Nationen zu diesem Punkt genau hier verschoben. Da haben wir es. Also können wir in den Standardzustand zurückkehren und zum Prototyp gehen, nach unseren Pfeilen suchen, richtig? Tab-Punkt werden es verwenden. Verwenden Sie also die Registerkarte automatisch animieren. Klickt ist der Zustand einfach jetzt und 0,6 Sekunden. Jetzt können wir zurück zu geklickt, finden Sie unsere Pfeile, Links-Schritt-Klick-Kriterien, und verwenden Sie Standardzustand 0.6 ist in out. Wechseln Sie zum Standardzustand, und lassen Sie uns jetzt schnell eine Vorschau anzeigen und sehen, wie es aussieht. So kann ich den ganzen Weg nach unten gehen all diese verschiedenen Abschnitte vermeiden. Und hier sind wir genau da. So schweben. Aus irgendeinem Grund funktioniert dieser Pfeil immer noch nicht, also werde ich ihn überprüfen, aber zumindest funktioniert die Animation so, wie sie sollte. Also muss ich dies überprüfen, weil Sie sehen können, dass dieser linke Pfeil gut funktioniert. Also lassen Sie uns Standard-Zustandspfeile sehen, einen Pfeil nach rechts. Wir können Hover verwenden und gehen zu Horace Zustand ist 0.3 itemsets. Dann können wir gehen, um Zustand klicken und linken Pfeil ist bereits da. Also lassen Sie uns eine Vorschau erneut anzeigen und gehen den ganzen Weg hinunter zu diesem Abschnitt, der hier ist. Und jetzt funktioniert es gut. Also noch einmal, wenn ich darauf klicke, wird es zu verschiedenen Orten wechseln, was in Ordnung ist. Gehen wir zurück zu Design. Und was ich als nächstes tun werde, ist tatsächlich auf Speichern. So steuern Sie S oder Befehl S auf einem Mac. Oder noch einmal, wenn Sie ein Cloud-Dokument verwenden, wird auf medizinisch speichern. Was ich als Nächstes tun werde, ist, dass ich an diesen Zeugnissen arbeiten werde. Im Testimonial Abschnitt werden wir also im Grunde vier verschiedene Bilder haben. Also werden wir als Nächstes an ihnen arbeiten. Also kann ich hier klicken, und wir haben bereits dieses erste erstellt. Vielleicht sollten wir sie duplizieren. Also traf Control D, Control D, Control D. Ich habe gesehen, dass wir für und vielleicht können wir sie sogar nennen. Also Zeugniskarte Nummer eins, da ist die Mono-Karte, Nummer 2, Zeugniswagen und Nummer drei und schließlich Zeugnis Kohlenstoffnummer 4. Also werde ich auf die erste klicken, finden Sie in das erste Bild und Milchherde Zeugnis abgebildet. Ich werde es verstecken. Klicken Sie auf das zweite ist ein individuelles Bild Nummer zwei. Also gehen wir männlich, weiblich, männlich, weiblich. Also lassen Sie uns ein Bild Nummer drei machen. Und noch einmal, für D ist, können Sie verschiedene Plugins verwenden, aber ich fand es viel einfacher, mich so zu organisieren. Weil ich aus jahrelanger Arbeit all diese verschiedenen Bilder gesammelt habe, die ich dann in meinem Design verwenden kann. Also noch einmal, weil wir diesen ersten haben, werde ich diese durchziehen, und ich werde die Namen von ihnen ändern und ich werde in einer Sekunde wiederkommen. Und jetzt, da ich das getan habe, kann ich es dir sehr schnell zeigen. Also das ist Nummer eins, Nummer zwei, Nummer drei, Nummer vier. Derek Zeugnis blieb gleich, aber Sie können, wenn Sie diese Zeugnisse ändern wollen , und ich ermutige Sie wirklich dazu, weil es viel realer ist, wenn Sie all diese verschiedenen Zeugnisse haben anstatt nur eines, wie ich es in diesem Fall tue. Also, bevor wir weiter gehen, will ich nur meine Pfeile finden, Pfeil nach rechts , zum Prototyp gehen, sofort reparieren. Also schweben Sie automatisch animieren, ich werde gehen, um zu schweben ist aus. Das war's. Also, das ist jetzt behoben. Und lasst uns jetzt weitermachen und mit diesen Briefen für einen Anfang arbeiten. Was ich also tun werde, ist, dass wir zwischen ihnen wechseln werden. Also werden wir haben, dass dieser 04 wird bleiben. Das werde ich fixiert bleiben. Nur das wird sich ändern, also brauchen wir vier Kopien davon. Also lassen Sie uns 1234 dafür gehen, eine weitere für diese, und eine weitere für 0 für, alles wird viel mehr Sinn in einer Sekunde machen. Also werde ich die unten verstecken. Also 1234, also 0, 1, werde ich das verstecken und dann verstecken. Und wenn ich sie alle verstecke, siehst du, was ich tue. Also 2, 0, 2, und dann verstecken. Ich hatte 01. Ich werde hier doppelklicken, 0, 3. Ich habe 0 hinzugefügt. Dafür. Ich werde es verstecken. Jetzt für diesen hier brauchen wir Justizlinie. So wie das. Ich kann es verstecken. Und schließlich 0, 4, und ich kann das auch verstecken. Jetzt werde ich meine 04 verschieben. Ich werde meine Linie zu etwas bewegen wie, mal sehen, ich denke, 10 funktioniert wirklich gut so. Dann bringe ich all diese rein. erneut sicher, dass alle von ihnen ausgerichtet sind. Es wird also viel einfacher und in meiner Liste positioniert sein und sicherstellen, dass sie 10 voneinander entfernt sind, so wie sie hier sind. Was wir also tun werden, ist, dass wir offensichtlich eine Maske machen werden. Also lasst uns ein Rechteck wie dieses machen. Und ich werde es Moschee nennen. Und was Sie tun können, weil sich nur der Damm ändert. Sie müssen es nicht bis hierher positionieren. Sie können es zum Beispiel einfach hier positionieren. Aber was ich wirklich mag, ist, alle meine Texte einzubeziehen , damit alles im Grunde in einer Zeile bleibt. Sie können die Fettleibigkeit und den Sirup senken, sehen, wo es ist. So kann es nur ein bisschen präziser sein. Sie können Phil und Rahmen ausblenden und Sie können alles wählen Shift Control M oder Shift Command M auf einem Mac. Und wir können es Textmaske nennen, zum Beispiel. Jetzt in unserem ersten Zustand und unserem Standardzustand werden wir nur die Nummer eins haben, damit wir diese aus dem Weg bringen können. Kann sie hier positionieren und dann zum Beispiel 10 Pixel nach unten. Also 0, 1 von 4. Und ich glaube nicht, dass das wirklich gut funktioniert. Schauen wir es uns an. Es sind 19 aus irgendeinem Grund wegen der Vier. Ja. Lassen Sie es einfach da. Ich denke, es ist in Ordnung. Was wir also als nächstes tun werden, ist, dass VR diese gruppieren wird. Also löse sie alle auf, Control G, und ich werde es so die Manion nennen, so. Nun, was wir tun werden, ist einfach horizontale Scroll-und erweitert nur um hier, nur so dass wir diesen Hintergrundschatten hier sehen können. Oder es kann sogar ein bisschen mehr tun und sehen, wo wir hier sind. Also nur bis zum Rand Ihres Bildes. Und dann kann ich es in ein Zeugnis umbenennen. Es ist also die gleiche Idee. Ich werde die benutzen, sie ein bisschen nach draußen schieben. Und mal sehen, wir können vielleicht Positionierung 40 zum Beispiel sein. Sind 60. Ich denke, das ist gut. Jetzt können wir mit den nächsten weitermachen. Und ich kann dafür sorgen, dass die 60 Jahre gut sind. Stellen Sie sicher, dass das draußen ist, und stellen Sie sicher, dass es auch 60 sind, wie diese Milchherde. Nun, da das fertig ist, oder Sie können sie einfach bewegen, wie die Buchstaben tun. Es liegt wirklich an dir, wie du das machen willst. Was wir als nächstes tun wollen, ist Control K in unseren Zeugnissen zu treffen. Und wir können zum Beispiel diesem Staat Zeugnis geben. Und was wir natürlich tun können, ist in unsere Zeugnisse zu springen und wir werden sie alle weitermachen. Also wähle ich sie so aus. Und da, da haben wir es. Also nur damit sie sich ziemlich gut mit unserem Raster ausrichteten. Und in unserer Textmaske wollen wir Nummer eins und Nummer 2 auswählen. Zunächst einmal Position Nummer 2 an seiner Stelle wie Schulden. Mehr. Nummer eins aus dem Weg, mein Vater, zum Beispiel, erstellen Sie ein neues Zeugnis. Dieses Mal wird es Nummer drei sein. Nummer drei, so. Innerhalb unserer Testimonials können Sie sich einfach Ihre Mappe packen. Wir können sie hier positionieren. Und nur um etwas genauer zu sein, kann ich so einziehen. Und schließlich gehen Sie zu Ihrer Textmaske und tun Sie das Gleiche. Also bewegen Sie Nummer drei an Ort und Stelle, bis es sich genau dort trifft. Und dann mehr Nummer zwei aus dem Weg, bis es mit Nummer eins trifft. So können Sie sehen, wohin das geht. Es ist wirklich ganz unkompliziert. Schließlich werde ich diesen Text verwenden und einen weiteren Zustand erstellen , der endgültig sein wird. Also Testimonial Nummer 4, springen Es ist entweder bei Testimonials, verwenden Sie Ihren Ordner und klicken Sie direkt hier und positionieren Sie diese einfach , um sich mit Ihrem Raster perfekt auszurichten. Und dann Benutzer Textmaske und gehen Sie zu Nummer 4. Und es scheint, es an Ort und Stelle mit diesen zu positionieren. Stellen Sie sicher, dass Sie wieder richtig aufgereiht sind. Bewegen Sie das so aus dem Weg. Und das Letzte, was ich überprüfen möchte, ist Nummer zwei. Sieh mal, ob ich es habe. Habe ich nicht. Wie Sie sehen können, genau hier. Also werde ich es nur so einen Strich bewegen. Also haben wir es. Wir gehen jetzt zu Prototyping dicht, also Zeugnisse. Ich werde zum Prototyp übergehen und wir werden natürlich Pfeile benutzen. Also Pfeile, richtig? Tabulator-Punkt. Wir werden Tab Auto animieren verwenden, wählen Zeugnis Nummer zwei ist 0,6 Sekunden. Also noch einmal, das gleiche Animations-Timing. Gehen wir mit einem Zeugnis an die Helden. Der rechte Tabulatorpunkt. Testimonial 3 links zu diesem Zeitpunkt werden wir ein Zeugnis haben, das ist die Standardeinstellung, die Nummer eins ist. Gehen wir zu Nummer 3 und benutzen dasselbe. Also Pfeile, die diesen Punkt verlassen, werden uns zu Nummer zwei bringen. Richtig? An diesem Punkt wird uns auf die Nummer vier bringen. Und schließlich in einer Nummer vier, werden wir nur einen linken Pfeil und einen linken Schritt Punkt haben , der uns auf Nummer drei bringen wird, Milchherde. Gehen wir zurück zum Standardzustand und überprüfen Sie schnell und sehen, was wir hier haben. Wenn wir also den ganzen Weg nach unten ziehen, wo sind unsere Zeugnisse hier? Sie sind nett und groß. Also, was wir tun werden, ist hier zu schweben. Wie Sie sehen können, schaukeln Pfeile. Klicken Sie abschließend auf. Es wird sich ändern. Zahlen werden sich wirklich schön ändern. Klicken Sie hier und hier. So funktioniert alles, wie es sollte statt r. Pfeil rechts noch einmal. Also weiß ich wirklich nicht, warum es so stur ist. Also müsste wirklich schnell gehen. Testimonial. Also Zeugnis, ich werde es nach rechts Pfeil finden, klicken Sie darauf und verwenden Sie meinen Hover. Gehen Sie zu den Horrorzuständen, gehen Sie entspannt und 0,3 Sekunden. Dann geh Zeugnis drei. Wieder einmal weiß ich wirklich nicht, warum es mir das antut, aber wie Sie sehen können, werden Sie manchmal diese hartnäckigen Adobe XD-Bugs haben. Weil ich es nicht tue, verstehe ich es nicht. Ich habe es im Standardzustand behoben. Es sollte sich auf all diese anderen Staaten ausbreiten. Aber wie Sie sehen können, ist es immer noch nicht. Aus irgendeinem unbekannten Grund. Da haben wir es. So Standardzustand und kaum gehen. Also im Grunde schuldet es. Und ich werde das Video hier pausieren, damit ich dich nicht langweilen und dich mit zu vielen Informationen überwältige. letzte Etappe, die wir haben werden, ist das hier. Also werde ich Sie im nächsten Video sehen, wo, wenn wir endlich diesen Abschnitt beenden werden, und ich kann tatsächlich über es in diesem Video gehen. Aber wie gesagt, ich will dich nicht zu sehr überwältigen , weil diese Videos lang sind, wie sie sind. Denn wie Sie sehen können, gibt es viel zu viele Informationen für mich, um in ein einziges Video aufzunehmen. Also werde ich Sie in der nächsten sehen, wenn wir endlich diese Seite und abgedeckt Schreibtisch Abschnitt beenden werden. 32. Design erstellen: Lassen Sie uns schließlich fortfahren und diese Seite beenden, indem Sie an diesem Abschnitt arbeiten. Und ich werde es einfach umdrehen, weil du gesehen hast, dass wir es als Komponente haben. Vielleicht können wir es im Standardzustand bearbeiten, wagen, aber was ich eigentlich tun werde, ist mit der rechten Maustaste auf Komponenten aufheben, dann Control G und schließlich werde ich es nennen, Mal sehen. Ich weiß nicht, warum, wenn es das getan hat. Also mal sehen. Ich werde es in eine Gruppe setzen, damit sie nicht so wegfliegen wie sie es taten. Und ich werde diesen Text auswählen oder mit der rechten Maustaste auf OK auf Gruppenkomponente jetzt und jetzt den Zustand, wo sie sein sollten, Ich werde die Steuerungstaste drücken, um diese häufigsten Fragen zu erstellen. Und ich werde einen neuen Zustand zu schaffen , der heißt, ist meine Reise. So beschützt. Und das werden wir natürlich für alle tun. Also im Standardzustand sind alle von ihnen geschlossen. Im ersten Zustand wird der erste geöffnet und alle von ihnen werden nach unten verschoben. Also, wie kannst du das machen? Sie können das mit dem Stapel tun, wenn Sie wollen, aber ich werde nicht, ich werde einfach nicht übermäßig kompliziert. Ich werde mich so damit auseinandersetzen. Also zuerst, weil es offen ist, werden wir das hier umstellen. Dann werden wir diesen Text zurückbringen. Also auf 0. Wir werden die Trennwand so nach unten an den Rand unserer Texte verschieben, so wie so. Shift 1, 2, 3, 4, also sind es 40 Pixel nach unten. Mein Dad. Und dann werden wir einfach all diese anderen wie diese auswählen und auch 40 nach unten verschieben. Entweder das oder wir können sogar einen weiter gehen, zum Beispiel, also vielleicht 80, nur um uns ein bisschen mehr Platz zu geben. Also lassen Sie uns 1234 sehen. Ich denke, das funktioniert noch besser, weil Sie sehen können, wegen dieser Quintessenz, es schneidet nicht zu viel von hier weg, aber wir können vielleicht sogar 60. Und jetzt ist es viel näher an hier. So können Sie nur wenige Pixel nach unten sehen. 40 und 60 sind also die Werte, die wir tatsächlich abdecken werden. Also, was Sie tun werden, ist in unseren Standardzustand zu gehen. Klicken Sie hier, neuer Zustand. Und von hier aus werden wir Stornierungsbedingungen gehen , weil das unsere nächste sein wird. Finden Sie Stornierungsbedingungen und tun Sie das Gleiche. Drehen Sie das also nach links, um in Rente zu gehen. Also, so werde ich das zurückbringen. Ich werde meine Trennwand benutzen und Julian wird all diese so nach unten schieben, nur um uns ein bisschen mehr Platz damit zu geben. Also werde ich meine Trennlinie verwenden, diese 1234, und sie den ganzen Weg zurück bringen, bis sie bei 60 ist, so. Und da haben wir es. Lassen Sie uns nun wieder in den Standardzustand übergehen. Jetzt in diesem wird Ihre Partner sein oder wählen Sie Ihre Partner. Habe ich. Und für die Partner, für uns, lassen Sie uns diese benutzerdefinierte Reise aus dem Weg den ganzen Weg nach unten bewegen , so dass wir etwas Platz haben, um mit schließen Symbol zu arbeiten. Also werde ich einfach meine Umschalttaste so halten. Und ich werde das zurückbringen. Ich dat. Und mal sehen. Ich kann meine Trennwand ganz nach unten 1234 bewegen. Und ich werde das wieder auf 60 bringen, so. Und schließlich gehen wir zurück zum Standardzustand und erstellen noch einmal einen neuen Status. Und das wird ein benutzerdefinierter Zweck sein und dasselbe dafür tun. So benutzerdefinierte Reisen, ich werde dieses Symbol drehen, um Städte wie das zu lesen. Bringt seinen Rücken und bewegt meine Trennwand und 40 runter, mein Dad. Und das ist es im Grunde. Das einzige, was uns jetzt noch übrig bleibt, ist offensichtlich, es zu Prototypen zu entwickeln. Also, was ich zuerst tun werde, ist zum Prototyp zu gehen. Und in meinem Standardzustand möchte ich von diesem Standardzustand aus tun, ich möchte auf jeden von ihnen klicken, um dorthin zu gelangen, wo ich hingehen möchte. Also, was das bedeutet, ist, wenn Sie hier klicken. Und zum Beispiel können wir sogar ein bisschen tiefer gehen, aber ich denke, es ist in Ordnung. Klicken Sie dort rechts. Also werde ich Schritt Auto Animate verwenden, wählen Sie den Zustand, also ist meine Reise geschützt? Wir gehen einfach und raus und 0,6. Also wird es sich an diese Einstellungen erinnern. Klicken Sie auf diese, tun Sie das gleiche, aber diese Stornierungsbedingungen, diese ist für die Partner sah, lassen Sie uns hier gehen. Und schließlich, benutzerdefinierte Reisen. Ich gehe gleich hier hin. Jetzt. Ich werde so zu diesem Teil gehen. Also mit diesem, ist meine Reise geschützt, ich werde es verwenden, um in den Standardzustand zurückzukehren, weil ich möchte, dass es geschlossen wird. Stornierungsbedingungen werden uns natürlich dorthin bringen. Also Stornierungsbedingungen, dies wird uns zu den Partnern zu bringen. Ich bin tot. Und schließlich, dies wird uns zu benutzerdefinierten Reisen führen. Gehen wir zum nächsten. Also Stornierungsbedingungen, wieder einmal, dieser wird uns zu nehmen, ist meine Reise geschützt Stornierungsbedingungen wird uns in den Standardzustand bringen, weil wir wollen, dass es geschlossen wird. Partner wird uns zu den Juniorpartnern und schließlich zu maßgeschneiderten Reisen bringen. Es wird uns zu Kundenreisen führen. Und schließlich, lassen Sie uns mit wählen Sie Ihre Partner. Also hier ist meine Reise. Erkannt. Stornierungsbedingungen, dass Partner, wir gehen, um Standardzustand zu gehen. Wieder einmal wollten wir schließen. Und dieser wird zu Custom Trips gehen. Und nun endlich, lassen Sie uns mit dem letzten Zustand umgehen. Also schließlich, dies wird sein, ist Madrid geschützt Stornierungsbedingungen. Und übrigens, ich wähle sie von hier aus aus, weil Sie sehen können, dass sie sich überlappen. Also will ich nicht, dass es irgendwelche Pannen hat, weil es für mich viel einfacher ist, so. Wählen Sie Ihre Partner ist dies. Diese ist Stornierungsbedingungen und Sie können auf sie klicken und hier sehen, was Sie ausgewählt haben. Und dann endlich benutzerdefinierte Reisen. Wir möchten, dass es in den Standardzustand versetzt wird, weil wir schließen wollten. Und jetzt gehen wir weiter und sehen, was wir geschaffen haben. So können wir zurück zu Design gehen. Klicken Sie hier rechts und dann auf den Standardstatus. Und wieder einmal, der Grund, warum ich sie in einen Stapel wie diesen gelegt habe, diese beiden Abschnitte sind später, ich kann hier klicken und Sie können sehen, dass sie genau hier kommen und sie werden alle diese Animationen im Inneren enthalten halten. Also gehen wir zurück in die Zeiten und lassen Sie uns endlich zurück. Sehen Sie, was wir haben. Mein Vater, lassen Sie uns den ganzen Weg nach unten gehen und unser Q&A ausfindig machen. Wenn Sie also genau dort klicken, können Sie sehen, dass es sich öffnet und das dreht sich von einem Plus, um wirklich schön zu schließen. Das macht das Gleiche. Und du kannst hier einige Störungen sehen, je nachdem, wo du so klickst. Also, wenn ich hier klicke, können Sie sehen, es öffnet sich diese. Vielleicht sollten wir hier keine Masken benutzen müssen. Aber wenn Sie zum Beispiel direkt dort klicken , öffnet sich es in diesem. Stellen Sie also sicher, dass Sie das Ihren Kunden mitteilen. Und vielleicht können Sie sogar auf diese Symbole klicken. Aber jetzt, weil es entdeckt. So können Sie einige Probleme hier sehen, aber Sie können Ihren Kunden sagen und nur darauf achten, und offensichtlich ist dies nur für eine Wagnis Bequemlichkeit. All diese Prototypen, und natürlich für Entwickler Bequemlichkeit, nur so wussten sie, was Sie von diesem Design wollen? Also noch einmal, Sie können ihnen sagen, zum Beispiel, wenn dies, wenn Sie hier klicken und es öffnet, ist es, weil dieser Text überlappt. Stellen Sie also sicher, dass Sie zum Beispiel irgendwo hier klicken . Es wird dann diese ein und dieselbe Geschichte für diese eine öffnen. Also endlich, das ist es für diese Seite, das ist es für dieses Video. Eine letzte Sache, die ich tun möchte, ist, sie alle zu benutzen. Also drücken Sie Control G. Ich werde sie in eine Gruppe setzen, nennen Sie es Homepage so. Und ich werde den Stapel benutzen. Und der Grund, warum ich den Stapel verwende, Sie können sehen, dass er 150 erkennt, ist später, wenn Sie mit dem responsiven Design beginnen, es ist viel einfacher, Stapel zu verwenden, besonders wenn Sie diesen Abstand zwischen Ihren Elementen reduzieren möchten, zwischen Ihren Abschnitten. Besonders beim mobilen Design, bei dem Sie nicht wirklich 150 Pixel zwischen all diesen kleinen Abschnitten benötigen. Sie können zum Beispiel mit 80 oder 60 weggehen oder zentral, dass es viel einfacher ist, den Abstand zwischen ihnen zu reduzieren, wenn Sie einfach zum Beispiel Abschnitt Ihrer Homepage auswählen, zum Beispiel Abschnitt Ihrer Homepage auswählen, Umschalttaste gedrückt halten und Reduzieren Sie sie einfach so. Sie können sehen, wie das funktioniert. Und natürlich ist Stack großartig, denn wenn Sie zum Beispiel das hier platzieren möchten , können Sie das einfach tun und einem Kunden zeigen, wenn er einige schnelle Änderungen wünscht. Wie gesagt, das ist es für dieses Video. Wir sehen uns in der nächsten, wenn wir mit der Zielseite beginnen werden. 33. Design erstellen: Gehen wir nun zum Zielstrand. Und das wird hoffentlich viel einfacher sein als dieses. Also, was ich tun werde, ist meine Alt-Taste zu halten und sie hier zu ziehen und zu sehen, was wir hier haben. Ich glaube, es waren 70 dazwischen. Ja, das ist es. Also halte ich meine Alt-Taste und du kannst hier sehen, da steht 70. Also werde ich es auf 70 ziehen, genau hier. Nennen Sie es Ziel InDesign. Dasselbe wie wir hier hinten getan haben. Und was ich tun werde, ist hier klicken, verwenden Sie meinen oberen Abschnitt, also klicken Sie darauf. Und mal sehen. Ja, lassen Sie uns den gesamten oberen Abschnitt kopieren. Lass uns gleich hier springen. Und ich kann drinnen klicken, und ich kann zum Beispiel Control V drücken, damit ich meinen gesamten oberen Abschnitt in. Was ich als nächstes tun werde, ist mein Hintern jetzt entfernt, weil ich es nicht mehr brauche. Mein Heldenbild, weil ich es nicht brauche. Ich werde mein altes Primärnav so entfernen. Und was ich tun werde, ist mein Heldenbild zu benutzen und ich werde es duplizieren. Ich werde es Hero Bild Farbe Overlay nennen. Tue ich nicht. Und weil das Paris sein wird, werde ich dieses Barris-Heldenbild nennen. Dann werde ich mein Farb-Overlay ausblenden, in meinen Bilderordner springen ihn hierher ziehen. Bringen Sie mein Farb-Overlay zurück. Und mal sehen, ich kann die gleichen Einstellungen verwenden. Also kann ich gleich hier gehen. Fast schwarz. Und mal sehen, 70% wie Dad. Schließlich werde ich in meinen Text springen und ihn in weiß ändern , weil ich denke, dass es mehr wie Schulden abhebt. Und da haben wir es in diesem oberen Abschnitt ist im Grunde getan Navigation funktioniert genau das gleiche wie hier. Aber hier haben wir Gerechtigkeit Image. So können Sie sich vorstellen, dass die Leute zum Beispiel hier schweben und dann klicken und dann auf diese Seite kommen , um Paris ein bisschen mehr zu erkunden. Damit wir weiter unten gehen können. Und zum Beispiel kann ich hier hineingehen, alle diese hier zum Löschen auswählen und dann den ganzen Weg hier runter gehen. Mal sehen, was wir wählen können. Zum Beispiel von hier. Also von hier nach unten Control C, kann ich direkt hier Kontroll-V kommen und sie einfach alle mit einer solchen Verschiebung nach unten bewegen. Und das ist es im Grunde. Eine letzte Sache, die wir ändern müssen ist dieser Abschnitt mit dem Hotel und auch mit diesem. Lassen Sie uns zuerst mit diesen Filtern umgehen. Was wir also mit den Filtern machen können, ist im Grunde dasselbe wie auf der vorherigen Seite. So können wir sie grundsätzlich als Komponente verwenden und dann können wir sie nach unten erweitern. Also haben wir den Preis gesunken BG, wir können ihn einfach den ganzen Weg nach unten verlängern, so. Und dann können wir all diese Informationen haben. Und was ich eigentlich tun werde, um sich ein bisschen Zeit zu sparen , ist, dass ich meinen Text verwenden werde. Und ich werde hier klicken, Control V, ich werde gleich hier positionieren. Das sind also nur meine Originaltexte, die ich verwendet habe. Oder noch besser, machen wir das noch einmal. So kann es hier zum oberen, oberen Abschnitt kommen. Ich kann unten nav öffnen. Ich kann meine Ziele benutzen. Ich kann hier gehen, meine Städte benutzen, Control C. und ich kann all diese Dinge schließen. Ich kann hier gehen, nur um Ihnen zu zeigen, wie Sie all diese verschiedenen Elemente verwenden können. So kann es zu meinem Drop-down-Menü gehen, drücken Sie Control V Ich kann positionieren, es sind genau hier. Stellen Sie sicher, dass ich bin, zum Beispiel 20 unten. Dann, was ich tun kann, ist in meinen Teiler mit einer Verschiebung springen, zum Beispiel, mehr es irgendwo hier herum. Und weil wir im Wiederholungsraster sind, sollte es all diese ändern. Also lassen Sie mich diesen Abschnitt schnell ausblenden, so dass Sie ihn tatsächlich sehen können. Wie Sie sehen können, hat es die Änderung propagiert. Also, wenn du dieses änderst, wird es sich durch alle so ändern. Und was ich tun werde, ist jetzt diese Änderungen zu verwenden. Zum Beispiel doppelklicken und ich werde etwas wie Dollarzeichen eingeben. Ich muss ändern und speichern, weil, und dann zurückkommen, weil Adobe XD wieder einige dieser Störungen hat. Aber wie Sie sehen können, kann ich nicht einmal tippen. Also lassen Sie mich mein Dokument speichern und kommen Sie zurück. Und jetzt, da es sich selbst repariert hat, sobald ich es geändert habe, werde ich dies auf solche Preise ändern. Und mal sehen. Ich kann zum Beispiel in diesem ersten zu Dollarzeichen 100 zu 500 ändern. Und dieser nächste kann 500 bis 100 sein. Das tue ich nicht, oder wir können sogar unser Schild hier einfügen. Also für beide, zum Beispiel. Und das kann von 100 bis 1500 sein. Und dieser kann von 1500 bis 2000 sein. Und schließlich können wir auf diesem letzten schreiben, zum Beispiel, mehr als zwei Schlüssel von 2000 Hierarchie wollen. Und im Grunde können wir unser Gitter einfach bis zu diesem Punkt schließen. Also kann ich es einfach ganz nach hier ziehen. Ihre Gewohnheitspreise, das ist in Ordnung. Mal sehen, wo ist unser Dropdown da ist es. Und ich kann einfach dasselbe tun. Also traf Control D. Ich kann diese Moschee nennen. Aber bevor ich all diese Dinge erledigen muss, kann ich das Video hier pausieren und im Grunde das gleiche tun, wie ich es vorher getan habe und alle machen. Und dann kommen wir zurück und treffen sie und beenden im Grunde in diesem Abschnitt. Okay, jetzt, da ich sie alle an Ort und Stelle habe, möchte ich dir nur schnell eine bessere Bewertung zeigen. Denn innerhalb der Bewertung, anstatt all dieser, was ich tun wollte, ist die tatsächlichen Sterne. Also werde ich hier klicken. Ich werde die Gruppierung des Rasters aufheben und ich werde alle auswählen, außer dem ersten. Und so eine Qualitätsbewertung. Dann werde ich wieder hineinzoomen und ich werde mein Sternsymbol finden. Ich werde hier klicken. Klicken Sie auf den Stern, ziehen Sie ihn hier. Gehen Sie zurück zu meinem Ebenenfenster und positionieren Sie es dort, wo der Text oben so ist. Dann werde ich den Text entfernen, stellen Sie sicher, dass dies 40. Eigentlich sollten wir es auf 20 positionieren, weil wir es nicht brauchen, um 40 zu sein. Also 20. Und was ich tun werde, ist unser reaktionsfähiges, sorry, wiederholtes Raster hier zu verwenden , um fünf von ihnen so zu erstellen. Stellen Sie sicher, dass Sie den ganzen Weg nach hier schneiden. Und dann wegen der Abstände, Lassen Sie uns den Abstand auf etwa fünf reduzieren. Ich denke, es wird ziemlich gut genug sein. Und mal sehen, wir können es so eine Bewertung nennen. Und wisst, dass wir unser Wiederholungsraster haben. Was wir tun können, ist, beide zu gruppieren und daraus Wiederholungsraster zu erstellen. So können wir es auch Rating nennen. Und dann können wir die ersten Sterne nennen. So wie das. Wir können sogar diese Sterne aufheben, tun, was immer Sie wollen, mit ihnen, wie Sie wollen. Und für diesen zweiten, was wir wollen, ist, fünf von ihnen zu haben. Also 3, 4 und 5, und schließen Sie es unten rechts hier ab. Also wollen wir natürlich von Nummer eins zu Nummer fünf gehen. Wir werden hier doppelklicken. Stellt sicher, dass alle grau sind. Aber wie Sie sehen können, haben wir hier noch einige Probleme. Ich weiß nicht, warum XD mir das antut. Also werde ich die Gruppierung aufheben und diese nur, um sie dabei zu haben, aber ich werde das hier behalten. Und jetzt lasst uns sehen, was wir können. Wir können hier ein Wiederholungsraster machen. Also 12345, und lassen Sie uns das unten schließen. So haben wir jetzt wieder einmal genau diesen. Und sobald Sie reinspringen, haben Sie alle diese Sterne. Was wir als nächstes tun können, ist es so zu versuchen. Also mal sehen, das sollten zwei sein. Lass uns zwei vor zwei sehen. Sieh dir das an. Eins. Es ist immer noch eine Charge. Also lassen Sie uns die Gruppierung aufheben, heben Sie die Gruppierung des Rasters auf. Also, was wir hier haben, sind fünf verschiedene Gruppen. So können wir jetzt leicht in dieses springen. So Standard gehen wir Standard, Standard. Manchmal, wie Sie in diesem Beispiel gesehen haben, können Sie sie als Ausgangspunkt verwenden und dann können Sie die Gruppierung später aufheben und zu allen springen. Aber noch einmal, keine Sorge, dies ist nur für Ihre Kunden und Entwickler, um zu verstehen, was Sie tun. Im Grunde später werden Sie nur einen von ihnen exportieren. Und im Grunde können Entwickler ihre Arbeit erledigen, sie neu organisieren und später positionieren. Und Sie können ihnen sogar Namen geben, die einen trennen. Dies kann sein oder auch essen, und dies kann Bewertung 3 sein, dies kann Bewertung für sein. Schließlich essen Disk und B. Durch. Jetzt. Lassen Sie uns fortfahren und alle animieren. Also, was ich tun werde, ist für jeden von ihnen, wie Sie im Preis gesehen haben, werden wir diesen Text kopieren, die Moschee kopieren. Also springen Sie innerhalb der Dauer, Dropdown-Liste BG, kopieren Sie es nach oben, benennen Sie es in Maske um und tun Sie das gleiche für Aktivitäten. Moschee, positionieren Sie es nach oben. Ausflug in die gleiche Moschee Position nach oben. Schließlich, Bewertung Control D und verschieben Sie es nach oben rechts dort. Also, was ich tun werde, ist über sie zu maskieren oder nutzlos oder Shift Control M Ich werde diesen ersten Preis nennen. Schichtkontrolle M. Für diese werde ich sie Dauer nennen. Dann Aktivitäten, Shift Control M. Ich werde sie Aktivitäten nennen. Wählen Sie diesen Text Shift Control M Exkursionen. Und schließlich sind wir übrig mit essen Schnee. Shift-Steuerung. Wählen Sie Bewertung, Molkerei sind. Also lassen Sie uns jetzt gehen und Komponenten für jeden von ihnen erstellen. Also kontrollierte sie Schlüssel für Disziplin. Oder wie gesagt, Sie können einfach auf Displays klicken direkt hier, wenn es einfacher ist, aber für mich ist es nur ein Muskelgedächtnis. So Steuerungstaste für jede Tiefe. Was Sie also für jeden von ihnen tun werden, ist das Erstellen eines geklickten Status. Also werde ich für jeden von ihnen zu Control K gehen. Ich werde einen angeklickten Zustand für DS1 erstellen, Exkursion, geklickt und schließlich bewertet, so. Nun, weil wir diesen Schlagschatten haben, was ich tun möchte, ist innerhalb des Standardstatus für jeden von ihnen. Also gehen wir zurück. Eigentlich sollte ich das zuerst tun, aber manchmal, wenn ich rede, ist mein Gehirn langsamer als meine Menge. Also im Grunde sind wir bei 2, 2, 4, also vielleicht, 20, 30 bis 35. Mal sehen, wo wir sind. Ich denke, 234, wir können mit 240 gehen. Ich denke, es ist gut genug für die Maske selbst. Lasst uns das Gleiche für diesen machen. So lokalisieren Sie die Moschee 240 in der Breite, nur so dass wir den Schlagschatten später sehen können. 240. Tun Sie es ist dasselbe für den Ausflug. So und Sie können sehen, warum ich diese Videos pausiere, nur damit ich Sie nicht mit zu vielen dieser Details langweilen kann. 240, und das ist es im Grunde vorerst. Nun gehen wir und geben Sie einen Clicker-Zustand für jeden von ihnen ein, so dass wir sie erweitern können. Angeklickt. Habe ich. Also gehen wir innerhalb des Preises und einfach, wir werden zuerst unser Dropdown erweitern und sehen, wo es in diesem Fall ist. Also zu so etwas, das 450 ist, nennen wir es. Und wir können dasselbe für die Maske tun. So erweitert, wie es zum Beispiel wagen, denke ich, es ist in Ordnung. Also für 70. Ja. Und lasst uns weitermachen und dasselbe für die Dauer tun. Also mal sehen, wir können das Gleiche tun. Also für das Dropdown können wir 40 bis 50 verwenden und für die Maske können wir für 70 verwenden. Jetzt gehen wir weiter und machen dasselbe für die Aktivitäten. Für die Aktivitäten, Lassen Sie uns sehen 450 oder Maske für 17. Finden Sie das. Und gehen wir zu Ausflügen über. Weil das viel kleiner ist. Wie Sie sehen können, haben wir nur zwei davon. Wir können es hier so grob augapfel. Und dann mit Moschee etwa hier herum zum Beispiel. Und das gleiche für die Bewertung, weil es viel kleiner ist. Wir können ein Dropdown-Menü verwenden und erweitert, um etwa hier herum. Und dann tun Sie das gleiche für die Moscheen oder erweitert, um etwa hier herum. Nun, da Sie das getan haben, was ich tun werde, ist, alle von ihnen in einem Winter zu verwenden, ändern Sie die Farbe für das Symbol und für den Text selbst. Also, was ich tun werde, ist nach innen zu springen und würde Dollar-Symbol und einen Preis verwenden und es in dunkelgrau ändern. Mein Vater wird sich aus irgendeinem Grund nicht ändern. Also werde ich retten und noch einmal zu dir zurückkommen. Alles klar, jetzt ist es behoben und ich kann sie tatsächlich ändern. Also, was ich tun würde, weil es eine Moschee im Weg, Ich würde einfach wählen Symbol und den Text und gehen Sie zurück zu hier und ändern Sie es wie Papa, es ist ein bisschen mehr zeitraubend, aber was können Sie tun? Adobe XD hat manchmal seine Möglichkeiten. Also werde ich es dort ändern. Und im Grunde, warum ich das tue, ist nur um anzuzeigen, dass dies ausgewählt ist. Was kann auch, was kann das auch Ihrem Kunden geben? Einfache Idee, wenn sie das Gleiche auf der Homepage machen wollen. Und es gibt Ihnen als Designer auch eine Vorstellung davon, was Sie tun können, um die ausgewählten Elemente zu erkunden. Nun, da wir alle diese Filter an Ort und Stelle haben, können wir in den Standardzustand für alle von ihnen gehen. Nun, da wir alle unsere Animationen und Reha abgeschlossen haben, wenden Sie Filter Schaltfläche, Standardzustand, Horace Zustand. Also werden wir es standardmäßig belassen. Gehen wir zum Prototyp. Und so, wenn sie direkt dort klicken, tippen, wir verwenden Auto Feind Zustand wird angeklickt. Erleichtern Sie sich 0,6 Sekunden. Wir können es ändern geklickt, klicken Sie rechts hier und gehen Sie zurück zum Standard, Zustand. Dauer, das Gleiche. Klicken Sie also direkt dort. Klicken Sie auf Status, wechseln Sie zu geklickt, klicken Sie hier rechts, und kehren Sie zu den Standardstatusaktivitäten zurück. Also noch einmal, machen Sie sich keine Sorgen um die Gegend. Es ist wichtig, einzuschließen. Es verwendet auch Verpassen Sie es nicht. Also Klopfpunkt ist ziemlich groß. Zurück, um zu klicken und klicken Sie rechts hier und gehen Sie zum Standardstatus. Und schließlich für die Bewertung würde dies zurück auf Standard. Klicken Sie für die Bewertung, es wird Sie nehmen, um automatisch animieren. Es wird Sie auf geklickt zu bringen, wechseln Sie auf geklickt klicken Sie rechts hier. Es wird Sie zu Standard bringen, Zustand, schalten Sie es zurück, und lassen Sie uns schnell eine Vorschau dieser Seite. Also noch einmal, wir haben diesen schönen Knopf hier. Und wenn ich Sie hierher bringe, können Sie sehen, dass die Navigation wirklich gut funktioniert. All dies funktioniert so, wie es sollte. Klicken Sie hier, wie Sie sehen können, es erweitert sich schön. Es funktioniert, wie es sollte. Für alle von ihnen. Es war großartig und schweben funktioniert hier. Gut. Konzentrieren wir uns jetzt schnell auf diese Hotelkarten und ich werde versuchen, sie so schnell wie möglich durchzulaufen. Also im Grunde, was wir mit ihnen wollen, ist, dass wir wollen , dass sie dasselbe tun, wie wir es vorher im Grunde getan haben. Also wollen wir, dass sie all die Dinge zeigen , die alle diese anderen Karten auf den vorherigen Seiten gezeigt haben. Also im Grunde wollen wir eins erstellen, diese Elemente erstellen und Dan im Grunde anpassen und unten so. Also werde ich die erste Karte zeigen. Ich werde die entfernen. Aber lassen Sie mich sehen, es sind 50 Pixel hier aus irgendeinem Grund. Mal sehen, vielleicht können wir 60 später einschließen. Also lasst es uns löschen. Also haben wir Erwachsene Strom und lassen Sie mich springen und ich werde Hotel Bild Nummer 1 verwenden. Das wird also das Hotel orange führen. Wir haben die Info, die gut ist und Teiler. Also ist alles da, wo es sein sollte. Ich will die nur etwas nach unten bringen. Ich sehe ihn wirklich nicht hier. Also vielleicht hier, dann positionieren Sie das hier. Und dann mal sehen, wir sind, wo zehn Pixel, 20 Pixel zum Beispiel. Und verschieben Sie einfach die Hotelkarte dorthin. Wenn es so ist. Also mal sehen, 10, 12, 20. Ja, lasst es uns vorerst hier lassen. Ich denke, es ist in Ordnung. Für mich noch besser, wir können diese 10 Pixel einfach nach oben bewegen und jetzt haben wir viel mehr Atemraum. Und schließlich werde ich dieses Bild nach unten schieben, so dass es sich trifft. Jetzt, da wir unseren ersten Abschnitt abgeschlossen haben, werde ich Steuerungstaste als Komponente erstellt drücken. Wir werden Hover-Zustand haben. Mein Dad in den Schweben, dasselbe wie vorher. Also werde ich dies erhöhen, um zu löschen. Ich werde meinen Pfeil wechseln, meine Maske ausfindig machen. Hier ist es. Und ich werde mich hier einfach in zwei positionieren. Also sind sie verletzt , wenn sie in unseren Standardzustand zurückkehren und schließlich dasselbe tun wie zuvor. Halten Sie also die Alt-Taste gedrückt, positionieren Sie sie hier, und lassen Sie uns sehen, 60 Pixel. Ich denke, es ist in Ordnung. Also für bis Karte Nummer eins, und das ist Hotelkarte Nummer 2. Das wird Hotelkarte Nummer drei sein. Mein Dad. Und schließlich wird dies Hotelkarte Nummer 4 sein. Und ich werde an diesem zweiten arbeiten, nur um dir zu zeigen, wie das aussehen wird. Also lassen Sie mich schnell einige Elemente kopieren. Angesicht einer Min. Ich werde dasselbe für diesen Text tun und lassen Sie uns schnell durchlaufen. Ich bringe es hierher zurück. Und bringen Sie das hier zurück, zum Beispiel, ich denke mal, mal sehen, vielleicht kann ich sogar meine Texte hier erweitern, damit es meinen Teiler nicht ablenkt. Lassen Sie mich das neue und Ziel kopieren, was genau hier ist, weil es in einem Stapel ist, es wird sich gut bewegen. Dann, für die Bewertung, werden wir ihm diesmal vier Sterne geben. Habe ich. Statt 14 Tage werden wir 12 Tage haben, zum Beispiel mein Vater. Und statt 1250 werden wir, mal sehen, 960 wie Zweifel haben . Wieder einmal werden Bilder von Envato Elemente, auf denen umbenennen Sie dies Hotel Bild Werkzeug aufgenommen und wählen Sie alles außer dem Pfeil. Hit Control C. Geh zu meinem Entsetzen, mach es auf und kontrolliere V. Und ich werde alles noch einmal löschen, außer dem Erwachsenen. So Lieber, wie es Sie sehen können, wie einfach und einfach Disk ist. Lassen Sie mich das Video pausieren und tatsächlich nominieren ging, um das Video zu pausieren. Lassen Sie uns sie schnell beenden, damit ich dieses Video beenden kann. Das ist also mit dem Hotelbild Nummer drei verbunden. Dies wird abgeschnitten Bild Nummer vier. Und mal sehen. Dies kann auch Forrest Sterne zum Beispiel haben. Mal sehen, Bewertung vier Sterne. Klicken Sie auf Kopieren. Nicht lokalisieren. So wie das. Und es sind Klauen belüftet. Kann endlich, lassen Sie uns schnell unsere Beschreibungen kopieren. Also mal sehen. Ich habe das Richtige nicht kopiert. Molkerei WER? Terminus Löwe, das hier. Und lassen Sie uns noch einmal sehen, lassen Sie uns diesen Text zum Beispiel so anpassen . Und mal sehen, vielleicht können wir es sogar ein bisschen weiter bis hier ausdehnen. Mal sehen, 30, ich denke, es ist gut. Anstelle von 14 Tagen, was wir tun können, ist die neunziger Jahre, zum Beispiel, mein Vater Schließen Sie alles. Und für den Preis haben wir 740. So offensichtlich geht es von der teuersten nach oben, zum billigsten fügt die Flasche hinzu. Aber offensichtlich werden diese Hotels an der Unterseite viel schlimmer sein als diese an der Spitze in Bezug auf Qualität der Unterkunft, Servicequalität und so weiter. Das ist also, was Nummer drei sagt. Ich werde alles außer dem Pfeil auswählen Control C Zurück zu meinem Hover Control V Ich werde alles außer dem Pfeil löschen und zu meinem Standardzustand zurückkehren. Und schließlich, Hotelkarte Nummer 4. Lassen Sie uns zuerst ein Bild leisten. Und lassen Sie uns mit den Informationen darin umgehen. Lassen Sie mich den Standort sehr schnell kopieren. So wie das. Und für diesen kann zum Beispiel Rating sein, sagen wir drei Sterne. Also 12. Also da haben wir es, drei Sterne, das ist der Name, das ist die Adresse analytisch. Schließlich kopieren Sie die Beschreibung des Hotels und ich müsste einige dieser Dinge anpassen , damit ich es nicht tue und ich werde diese beiden hier positionieren. Ich werde sehen, ob es passt. Ich kann es sogar hierher bringen, und das gibt mir ein bisschen mehr Platz. 14 Tage ist in Ordnung. 740 wird ein Preis sein. Und natürlich können Sie mit diesen Symbolen herumspielen, wenn Sie destillieren wollen, haben, wenn eine Show Sie, dies haben immer noch diese beiden Zustände. So kannst du mit ihnen herumspielen, wenn du willst. Aber ich denke, es sieht ziemlich gut aus. Wählen Sie also alles außer dem Symbol aus. Tut mir leid, die Pfeilmilchherde, und das war's. Das Elastin, das ich tun möchte, ist sie zu erhöhen. Also doppelklicken und erhöhen Sie sie ein wenig so. Und dann innerhalb des Hover und tun Sie das gleiche für diesen. Also Shift Alt, Linksklick, ich bezweifle, und mache das gleiche für diesen in der Hover Shift Alt links und schließlich den Standardzustand. Mal sehen, ob wir es tatsächlich hier mit nicht gemacht haben. Also manchmal geht man von hinten nach vorne mit diesen Dingern und da haben wir es. Das letzte, was ich tun möchte, ist im Grunde eine Änderung in diesen Fragen der Abstände. So können wir von 400 Position all das nach unten gehen. Und ich kann mit so etwas wie 150 gehen. Mein Dad und geh einfach runter. Wo ist meine Fußzeile? Doppelklicken Sie auf den leeren Bereich meiner Zeichenfläche und erweitert um etwa hier herum. Da haben wir es. Eine weitere Sache, die wir tun können, ist, sie zu gruppieren, wie wir es mit diesem gemacht haben. Drücken Sie Control G, um sie in eine Gruppe zu setzen. Und wir können diese Gruppe Ziel so nennen. Und endlich die Vorschau, um zu sehen, was wir haben. Also noch einmal, wenn ich hier schwebe, funktioniert Menü und Bewässerung wie es sollte. Das funktioniert alles gut. Das funktioniert gut, so können wir auf diese klicken und sie funktionieren gut. Ich bezweifle, dass das Hover aktiviert wird. Sieht wirklich gut aus. Der Abstand ist gut. Bearbeitung funktioniert so, wie es sollte. Derek Gewohnheiten in diesem funktioniert, wie es sollte. Weil wir gerade kopiert und eingefügt haben. Es funktioniert alles, wie es sollte. So sieht alles schön und sauber aus. Also im Grunde ist es das für dieses Video. Im nächsten gehen wir zu dieser Seite und wir sehen uns dort. 34. Design erstellen: Lassen Sie uns nun fortfahren und erstellen Sie den ausgewählten Angebotsbildschirm. Also noch einmal, ich werde einfach meinen alten Schlüssel verwenden. Stellen Sie sicher, dass Sie es hier einfügen, ausgewähltes Angebot und wann Sie diese Keimlinie so ändern. Und zuerst, wählen wir unsere Navigation aus. Also lassen Sie uns tatsächlich den gesamten oberen Abschnitt kopieren. Es ist viel schneller. Drag & Drop es direkt hier. Siehst es hier probieren. So Milchherde. Und innerhalb dieses Stops-Abschnitts werde ich das loswerden. Ich werde den Heldenbereich loswerden. Innerhalb eines oberen Abschnitts haben wir unser Hauptnav. Also, was Sie in diesem Hauptnav tun werden, ist im Grunde alle diese Dinge zu ändern. Also werde ich hier reinspringen, mein Logo gehen und es dunkel machen. Und im Haupt- und Standardzustand. Was ich tun werde, ist den gesamten Text zu verwenden und ihn in dunkelgraue Farbe zu ändern. Ich werde auch zum sekundären Nav gehen und wählen dunkel für alle von ihnen wie und dass sie Herat sind. Also, jetzt noch, wenn Sie klicken, wird es zu aktualisieren und zu weiß zu wechseln. Aber wenn Sie auf einem weißen Hintergrund sind, wird diese Farbe sein. Also lassen Sie uns den oberen Abschnitt sehen und ging, um den alten loszuwerden. Wir haben Karussell, also Karussellbilder. Und lassen Sie mich meine Bilder schnell per Drag & Drop hineinziehen. Also das ist Nummer eins, Nummer zwei, Nummer drei. Und wieder schien, wie mit all diesen alten Seiten, Ich habe sie alle von Envato Elemente. So Karussell Bild. Wir haben auch diese Bilder. Das sind also kleinerer Raum. Also habe ich nicht Nummer 1. Das ist Nummer zwei. Und schließlich ist das Zimmer Nummer 3. Und im Grunde sind das mehr oder weniger alle Bilder, die wir brauchen werden, außer für einen ähnlichen Hotelabschnitt hier. Also lassen Sie uns daran arbeiten und wir können dann weitermachen, dies außer Wissen zu animieren. Lassen Sie uns diesen Abschnitt schnell animieren, weil es nicht so schwierig ist. Das Einzige, was wir noch einmal brauchen werden, dieser Pfeil nach rechts verursacht uns Probleme. Also werden wir Hover verwenden und wir gehen, um zu schweben, lindern 0,3 Sekunden, so dass wir die gleiche haben. Und lassen Sie uns dies als Komponenten drücken Sie die Steuerungstaste. Wir sind wieder in unseren Design-Standardstatus. Wir werden noch einmal innerhalb des angeklickten Status geklickt verwenden. Und das Einzige, was noch einmal ist, dass sich diese Bilder so nach hier verschieben werden. So können wir jetzt Prototyp Petco zurück zum Prototyp, gehen Sie zurück zu Pfeilen, rechts, Tab-Punkt, klicken Sie darauf. Wir werden Wasserhahn benutzen. Autonomie ist in, aus als Zustand geklickt. Und 0,6 Sekunden, so scheinen wir, als hätten wir es getan. Und schließlich können wir nun in den angeklickten Zustand wechseln. Verwenden Sie einen linken Tabulator, weil wir möchten, dass er zurück zu hier geht. Also wollen wir in den Standardzustand 0.6 Todesfälle in Ordnung gehen. Und Standard-Zustands-Kind-Vorschau, nur um zu sehen, was wir bisher haben. Also haben wir den Hover auf beiden. Klicken Sie, es wird sich verschieben. Klicken Sie, es wird sich verschieben. Ich finde, es sieht gut aus. Und jetzt gehen wir zum nächsten Abschnitt über. Wieder einmal haben wir diese Räume direkt hier, und Sie können doppelklicken, wenn Sie in diesen Bildern hinzufügen möchten. Aber ich werde sie einfach verlassen, so wie sie hier sind. Was ich werde mich auf diese ähnlichen Hotels konzentrieren und nicht verlassen diesen Abschnitt für das Ende, weil es die schwierigste auf dieser Seite. Also, was wir hier haben, ist, dass wir vollständige Informationen für diese haben. Und wir werden im Grunde eine Komponente daraus erstellen. Also mal sehen. Ähnliches Hotel. Unsere Hotels. Ich habe so ähnliche Hotels, aktuelle BG, ähnliche Hotels, IMG, Molkerei gehen. Also werde ich mein Bild Nummer 1 fallen lassen. Also mal sehen, vielleicht kann ich diese Bilder verwenden , die wir zuvor für die Destinationen verwendet haben. Also mal sehen. Ich kann mit, zum Beispiel, Hotel Nummer 1 gehen. Aber lassen Sie uns sagen, dass sie in diesem Hotel ausgewählt haben. Also das erste. Also gehen wir eigentlich mit dem, was Dell Nummer zwei. Wenn sie zum Beispiel diese ausgewählt haben, kamen sie auf diese Seite, dann können wir ihnen diese drei zeigen, diese drei Karten zum Beispiel. Lasst es uns da drin lassen. Und jetzt werden wir, weil wir diese Informationen hier haben, werden wir diese als unsere sekundäre Information verwenden. Lassen Sie uns also schnell eine Komponente erstellen. Die Steuerungstaste ist, was Sie verwenden werden. Horace Zustand. So schweben. Und innerhalb unseres Ernteabschnitts schien es wieder so zu sein, als hätten wir es immer getan. Also acht hier, werden wir den Preis aufzeigen. Also wird der Pfeil so auftauchen, unser Ego. Und schließlich wird das Bild nur ein wenig zu verbessern, um in nur ein wenig zu zoomen. Gehen Sie zurück zum Standardzustand und halten Sie nun die Alt-Taste gedrückt, machen Sie ein Duplikat. Halten Sie den alten Schlüssel, machen Sie ein Duplikat. Das wird also wieder ein Hotel oder noch besseres Hotel sein. Nur damit wir von der vorherigen Seite wissen. Hotel drei und schließlich Hotel für. Nun, in diesem zweiten, was ich tun werde, ist schnell und ziehen Sie in das Bild. Und ich werde dasselbe für diesen hier tun. Mein Dad. Und jetzt kann ich mich darauf konzentrieren, diese Änderungen vorzunehmen. Also zuerst, dieser erste, ich, zweite wird die Bewertung von vier Sternen haben, also nicht fünf Sterne. Also kann ich in meinen Horace Staat gehen und meine Bewertung auf vier Sterne ändern, so wie es ist. Das ist also großartig. Der zweite wird vier sein, aber dieser dritte wird eine Bewertung von drei haben. Konzentrieren wir uns jetzt auf diesen zweiten. Also werde ich tatsächlich noch einmal kopieren, Informationen aus meinem ursprünglichen Design. Also selbst ein bisschen Zeit. Ich werde es hier kopieren. Und schließlich wird die Beschreibung dieses Hotels direkt hier gehen. Statt 12 Tage werden wir uns auf neun Tage konzentrieren. Neun Tage. Und mal sehen, was wir mit diesem Abstand machen können. Vielleicht können wir es auf zwei oder sechs erhöhen. Ich denke, es ist in Ordnung. Und die Preise sind ein 20. Schauen wir es uns hier an. Es ist eigentlich nicht, es ist 740, also lasst uns das benutzen. Also 740 und wir benutzten 744, das letzte. Also lasst uns das noch einmal machen. 49 Tage. Und das ist, was C eigentlich neun Tage und 14 Tage für diesen letzten ist. Also 14 Tage dreckte ich. Und schließlich werde ich dasselbe tun. Kopieren Sie also die Informationen aus meinem ursprünglichen Design, fügen Sie das hier ein. Mein Dad. Und schließlich, kopieren und fügen Sie meinen Text in Milchherde. Das war's also für diese ursprünglichen Zustände. Auf diese. Ich werde alle schließen, so dass ich diese eine Info schließen werde. Und schließlich kann ich im Grunde die Namen ändern. Dies wird, mal sehen, Hotel oder ähnliches Hotel in Bild sein. Lassen wir es uns lassen. Dies wird ähnliche Hotels Bild zwei und ähnlich Hotels Bild drei sein. Mein Dad. Also, was ich tun werde, ist, alle von ihnen auszuwählen. Oder was ich denke, ist, dass dies sein kann, weil es Hotel auf ähnliche Bilder sagt, Hotel-Tool. Das sind ähnliche Bilder, Hotel drei. Und das ist ähnliche Bilder Hotel für, nur weil wir dieses Hotel geschaffen haben, um Hotel drei Hotel für. Also werde ich diesen Namen einfach kopieren. Geh zurück in meinen Horrorzustand. Wie Dreck und im Inneren werde ich den Namen so ändern. Und lassen Sie uns einfach sehen, ob es sich zeigt. Es funktioniert nicht, also müssen wir es noch einmal aktualisieren. Also statt Horace Datum, doppelklicken Sie rechts hier, und gehen Sie in Ihr Bild, vergrößern. Es. Sieht toll aus. Schauen wir es uns jetzt an. Funktioniert immer noch nicht. Gehen wir also weiter und gehen Sie zurück zum Standardzustand, kopieren Sie ihn von hier, gehen Sie in den Horrorzustand, fügen Sie ihn hier ein. Also noch einmal, ich weiß nicht warum, wegen der Stapel. Ok. Also im Grunde ist es genau hier. Also werde ich das alte entfernen und ich werde innen doppelklicken, es ein bisschen so vergrößern. Gehen Sie zurück zum Standardzustand, und jetzt lassen Sie uns Vorschau drücken und sehen, ob es jetzt angezeigt wird. Es hat immer noch einige Probleme zwischen diesen Bildern. Also, was ich eigentlich tun werde, ist zurück zu Standard, Zustand, wählen Sie alle meine Elemente, Kontrolle C. Also statt der anstelle des Pfeils, müssen wir sie noch erweitern fertig, nicht wahr? Ja, aber das können wir später ändern. Was wir also tun werden, ist von Bild 2 hier zu gehen. Also Bild in von Mill, kopieren Sie es, gehen Sie zu schweben basiert es. Und wo es tat, klebte es. Oh mein Gott, ich verwirre mich selbst. Also werde ich diesen in vier Mitte entfernen. Ich werde das loswerden. Und doppelklicken Sie in. Mal sehen, ob es jetzt funktioniert. Ähnliche Hotels, okay. Mal sehen, ob die Animation jetzt funktioniert. Es funktioniert immer noch nicht. Also lass mich noch etwas tun. Das ist also nur eine Problemlösung. Das ist es, was ich täglich mache. Und das wirst du auch tun. Also, was Sie tun werden, ist wählen Sie alles, steuern Sie C, gehen Sie zum Hover, wählen Sie alles gelöscht. Also offensichtlich anstelle des aktuellen BG Control V, um es einzufügen und einfach zu Orten wie diese zu wechseln. Und dann, was wir tun werden, ist, das nach oben zu positionieren. Jetzt haben wir das gleiche Problem, das wir vorher gemacht haben. Also mal sehen. Ich verstehe immer noch nicht. Also, jetzt haben wir ein anderes Problem, das ist, dass wir es nicht außerhalb des Stacks legen können, weil Sie sehen können, es ist, es ist, es ist, es ist, es ist, es ist, es ist, es ist Was wir also tun müssten, ist im Grunde wieder von vorne zu beginnen. Also, was ich tun werde, ist ein paar Mal zurück zu gehen. Mein Dad, und ich werde im Grunde dasselbe Bild ziehen und ablegen. Also geh zurück in den Standardzustand, mein Dad. Und das werde ich auch. Verwenden Sie diesen Namen. So ähnliche Hotels, zumindest Informationen sind korrekt. Oder ein ähnliches Hotelbild und das ist der Name. Standardstatus. Ich werde das gleiche Bild noch einmal per Drag & Drop ziehen. Also bin ich hier angesiedelt, ist es. Gehen Sie in den Horror-Zustand zu gehen und ziehen Sie ein 10. Doppelklicken Sie. Vergrößern Sie es Terahertz. Und jetzt kann ich sehen, ob ich es endlich zum Laufen bringe. Ja, Sie können sehen, dass das Bild jetzt glatt ist und der Übergang glatt ist. Aber wieder einmal, es wird eine echte Herausforderung sein, all das zu verändern. Also, was ich tun werde, ist die basierte Bearbeitung unterhalb der Bewertung. Bewertung wird bleiben, wo es ist. Wir werden nur manuell aktualisiert, weil wir sehen können, dass wir hier vier Sterne für unsere Sterne haben, wir haben nur drei Sterne hier. Also werden wir die Bewertungen manuell aktualisieren. Machen wir das jetzt. Also im Inneren von hier können wir zur Bewertung gehen und diese entfernen. Also, jetzt haben wir drei. So dass, wann, wenn wir ziehen und ablegen, wird es viel einfacher. Also, was ich tun werde, ist, alles zu kopieren. Und Preiskontrolle C, ich, dass ich in den Horrorzustand gehen werde, der alles direkt unten hier basiert. Ich werde meine Informationen so entfernen. Dann werde ich mein Bild entfernen. So bleibt dieses Originalbild dort, wo es ist. Und ich werde sehen lassen, behalten Sie diesen Preis. Entfernt dies zum Beispiel in vier, weil wir neun Tage in halten müssen. Mein Vater hat diesen Preis abgenommen und jetzt haben wir, was wir brauchen. Also, wenn ich zwischen ihnen wechseln, ist diese Information korrekt, außer für den Preis. So kann ich den Preis Handbuch Jahre oder so ändern. Also 740. Und das, und das, weil es im Horrorzustand ist, können wir diesen Preis auch manuell ändern, um 1740 wie jetzt getan, gehen wir zurück zu hier und wir können an diesem Bild arbeiten. Auf dem Standardzustand wird der Schaden also als bahnbrechendes Hotelbild 3 bezeichnet. Ich kann in den Horace Zustand zurückkehren und dieses Bild umbenennen. Und dann einfach aus meinem Ordner, ziehen Sie das Bild im Doppelklick und ich kann es vergrößern. Und sofort. Bevor wir weitermachen, lassen Sie uns schnell überprüfen, ob es funktioniert. Das sollte es jetzt. Ja. Es funktioniert also. Alles bleibt so, wie es sollte. Also, jetzt lasst uns an diesem dritten arbeiten und beenden wir das endlich. Also Preis, wir haben die DAT geändert. Mal sehen, wir sind in einem Horrorzustand. Gehen wir zum Standardzustand. Wieder einmal werde ich alles wählen. Hit Control C, geh zurück in meinen Horrorzustand. Hit Control V gehört gerade zu meinem Bild. Also werde ich dieses Bild loswerden, aber bevor ich es tue, werde ich mein oberstes Bild umbenennen. Also werde ich es loswerden. Befreien Sie sich von dieser Information. Und das loswerden. Mal sehen, 14 Tage sind richtig, also werde ich es verlassen. Preis ist richtig, aber ich werde es löschen 12 Tage gelöscht, und halten Sie diese Informationen in. Also noch einmal, ich werde einfach mein Bild hier ziehen und ablegen, doppelklicken, um die Moskauer Zone zu betreten, es zu vergrößern und Milchherde. Tut mir leid über all diese Probleme, aber als ich entwarf, hatte ich dieses Problem nicht. Adobe XD entscheidet daher manchmal, dass das, was Sie tun, vielleicht nicht das Beste ist, also versucht es, Sie zu bekämpfen. Aber falls Sie denken, dass Sie Recht haben, müssen Sie und damit umgehen, und Sie müssen dagegen arbeiten nur um Ihr Mitspracherecht zu haben, weil dies die Software ist, es ist kein Mensch gesucht. Du musst dagegen arbeiten. Und nun endlich, lasst uns an dieser Sidebar arbeiten und diese Seite beenden. Also mal sehen, wir sind 149 unten aus irgendeinem Grund. Also schauen wir uns alles an. Bewegen Sie es. Mal sehen, eigentlich werde ich diese unterste Information auswählen. Werde es los. Wählen Sie es von hier aus aus. Also von hier nach hier, kontrolliere C, schließe es, kontrolliere V und verschiebe es so 150 nach unten. Mal sehen, ob es unsere Fußzeile abgeschnitten hat. Ich glaube, das hat ihm nicht gefallen. Was ich tun werde, um dich nicht zu lange mit diesen zu langweilen , ist eigentlich zu kopieren und zu erklären, was ich getan habe. Also werde ich meine Sidebar öffnen. Ich werde mein Originaldokument und mein Originaldesign öffnen , nur um Ihnen zu zeigen, was ich getan habe. Also werde ich all diese Informationen kopieren. Ich werde hier reinspringen. Ich werde es einfügen mit meinen ursprünglichen Informationen aufstellen. Und dann gehe ich den ganzen Weg runter, bis auf den Preis und entferne ihn. Und jetzt, da eine Gewohnheit, kann ich zwischen ihnen gehen und erklären, was f getan hat. Also hier, lassen Sie mich einfach überprüfen, ob es die ursprünglichen Übergänge beibehalten hat. Hat es nicht. Also müsste ich die Übergänge und später einschließen. Was ich hier gemacht habe, ist, dass Sie sehen können, dass ich in dieser Überprüfung meinen Standardzustand habe und meinen Kalender habe. Und was ich für diesen Kerl getan habe, und ich benutze einfach das Wiederholungsraster. Also, wenn ich reinsprang, können Sie hier sehen, wie eine Woche. Und für diese Daten verwenden Sie einfach einen Kreis mit der Hauptfarbe. Dies ist das Wiederholungsraster. Also im Grunde wirklich grundlegendes Zeug wirklich. Und ich tat dasselbe für diesen. Also, wenn ich hier reinspringe, können Sie sehen, dass ich auch Kalender habe. Nun, was ich für all diese anderen getan habe, für den Raumtyp, zum Beispiel, es immer noch den Standardzustand beibehalten, aber es zeigte mir nicht den offenen Zustand. So geklickt Zustand. Was ich hier habe, ist im Grunde genau dasselbe, wie wir es zuvor getan haben. Lassen Sie uns die Stummschaltung schnell aufheben, damit ich es Ihnen zeigen kann. Also für den Check-in, werden wir haben, zum Beispiel, geklickt Zustand. Also lassen Sie uns die gleiche Art von angeklickten innerhalb des angeklickten Status tun. Mal sehen, wir können zum Beispiel unseren Kalender so zeigen. Und das ist es im Grunde für diesen. Also kasse, ich kann auch einen Clicker-Zustand erstellen. Wie DAD, innerhalb der Clique-Zustand, kommen kurz mein Kalender. Das war's. Für die Zimmerkategorie können wir erstellen. Klicken Sie auf die Zustände. Wenn es sich entscheidet, so zu arbeiten. Und für den falschen Typ, was wir wollen, ist, dass sich diese Eingabe ändert. Also zuerst, das Pfeilsymbol wird sich drehen. Ich kann es auf diese Weise drehen. Also habe ich meinen Input BG, der im Grunde genau das Gleiche skalieren wird, wie wir es bisher getan haben. Wir werden unsere Masken irgendwo hier vergrößern. Zum Beispiel, Derek Gewohnheit. Wir können in den Standardzustand zurückkehren, Erwachsene. Also für uns, lassen Sie uns den angeklickten Zustand erstellen. Innerhalb des angeklickten Zustands werden wir unseren Pfeil drehen, wie wir es mit dem oberen getan haben. Eingang BG. Ich werde es den ganzen Weg bis irgendwo hier erweitern, zum Beispiel Maske. Ich werde es so schweben. Ich gehe zu den Kindern. Neuer Zustand, geklickt I dat Eingänge und Pfeil nach unten. Und stellen Sie sicher, dass Sie diese Pfeile drehen, um sie in die gleiche Richtung zu drehen. Denn wenn du es nicht tust, wird es wirklich zeigen und es wird später wirklich lästig sein. So Masse. Und Sie können das genau an der gleichen Stelle tun. Aber ich denke, das wird unabhängig funktionieren. Sli, Service geklickt Zustand. Und ich werde überhaupt in genau die gleiche Richtung runter gehen. Texteingabe BG, Mal sehen, Maske. Ich werde es entmaskieren, Vg eingeben, es ungefähr hier positionieren, zum Beispiel, dann erweitern Sie unser Maskottchen ein bisschen nach unten. Und schließlich, lassen Sie uns mit Exkursionen umgehen. Fügen Sie einfach einen neuen Status hinzu. Und noch einmal, Ich verwende den Namen für alle von ihnen angeklickt , nur damit die Entwickler wissen, Liter oder wenn Sie ihnen diese Dateien senden, wie alle von ihnen im Grunde gehen und Hub alle von ihnen werden aussehen. Also werde ich es an unserer Hintergrundform ausrichten. Und das ist ein Scroll-Gruppen, so dass sie in der Lage sein, nach unten zu scrollen, gehen Sie zurück, um den Staat und Molkerei klicken, wie zu verkaufen. Jetzt lassen Sie uns sie animieren und diese Seite beenden. Also zuerst für den Check-in. Ich werde es auswählen, aber wie Sie sehen können, nimmt es wirklich eine riesige Menge an Platz ein. Also mal sehen. Ja, lasst uns einfach hier klicken. Standardstatus, tippen Sie auf Automatisch animieren. Es wird gehen, um den Klickstatus ist jetzt 0.6 und klickte im Grunde die gleiche Sache. Gehen Sie einfach in den Standardzustand. Dan, für die Kasse können wir dasselbe tun. So richtig. Wie das innerhalb des geklickten Zustands kann es in den Standardzustand wechseln. Und einfach, lassen Sie es uns einfach wieder hierher bringen. Ein falscher Typ. Sobald sie direkt dort klicken, werden sie in den angeklickten Zustand gebracht. Eine Treppe in angeklickt, es geht, um sie in den Standardzustand Umschalten zurück, die hier als auch Erwachsene. So können Sie sehen, viele dieser Aufgaben sind wirklich repetitiv und wirklich langweilig, aber alle Teil dieses Jobs. Siehst du, ich schätze, ich werde es draußen stellen , weil es beschlossen hat, wieder eine eigene Meinung zu haben. So geklickt Zustand, wenn Sie in geklickt sind und zurück zum Standard gehen. Stellen Sie sich vor, wenn Adobe XD nicht alle diese Einstellungen beibehalten würde, würden Sie verrückt werden. Und so war es, als es gerade angefangen hat. Aber zum Glück arbeitet das Team wirklich hart mit all diesen Updates und Änderungen. Von Zeit zu Zeit schlagen sie wirklich den Nagel auf den Kopf mit all diesen nützlichen Funktionen. Und natürlich können Sie Ihre Stimme hinzufügen, indem Sie zur Benutzerstimme gehen. Und sie können einfach auf alle Menschen hören und was die Leute sagen. Und Dan, vermeiden Sie diese Änderungen oder wenden Sie diese Änderungen an, je nachdem, ob sie sie anwenden müssen. Also noch einmal, was wir haben, ist das hier. So funktioniert es wirklich gut. Und ich habe das nicht gezeigt. Sobald Sie auf eines dieser klicken, wird es wieder in den ursprünglichen Zustand umgewandelt, sowohl wenn Sie dort klicken, es geht zurück zu diesem dunkleren Zustand. So steht es wirklich schön vor einem weißen Hintergrund. Also, hier, wenn ich klicke, wird es den Kalender nehmen. Felsen waren da. Nun, aber hier ist unser Problem. Sie müssen also irgendwo hier klicken. Und das habe ich gesagt. Also müssten Sie einen Weizen Ihres Klienten darüber sprechen. Vielleicht können wir den Kalender vielleicht über oder Sonnenschein setzen, Dad, denn all diese anderen funktionieren gut. Aber wir haben einige überschneidende Probleme mit dem Kalender. Also, wenn ich hier auf Beispiel klicke, wird es zeigen. Aber wieder einmal, Kalender ist das Thema hier. Also weiß ich es nicht. Vielleicht können Sie mit Ihrem Kunden sprechen, ihnen einfach erklären, wie all das funktionieren wird, oder vielleicht sogar verstecken Sie es direkt dahinter, so dass es nicht alle diese Probleme aufwirft. Aber im Grunde, wie Sie sehen können, können Sie zum Beispiel irgendwo außerhalb von hier klicken. Und dann wird es zeigen, und vielleicht können Sie irgendwo hier für die Erwachsenen klicken. Wissen Sie. Vielleicht können Sie die Registerkarte Punkt hier für die Erwachsenen sah Dan, es wird sich so zeigen. Also lasst uns das wirklich machen. Das werde ich zeigen. So gehen Erwachsene zurück zu Design. Ich werde meine Maske benutzen. Und ich werde es nur ein bisschen bis hierher erweitern. Also, jetzt wird das unsere Klopfpunkte sein. Wenn wir also zurück zur Vorschau gehen, gehen Sie zurück zu hier. Wenn ich hier irgendwo klicke, können Sie sehen, es öffnet sich diese Erwachsenen. Also muss ich das Gleiche für hier tun, aber das muss ich nicht mal, weil es hier geöffnet ist. Und nun endlich, scrollen wir nach unten und sehen, was wir bisher haben. Also haben wir diese Arbeit abgeschlossen, wie sie wirklich schön sollten. Und dann haben wir einen Hover im Hover, was ich wirklich mag. Wir haben diesen Knopf und diese funktionieren, wie sie sollten. Also noch einmal, Sie können den gleichen Trick hier tun. So können Sie Ihre Maske erweitern und Sie können Ihrem Kunden sagen, einfach klicken Sie in diese Bereiche sind draußen, nur so dass sie das vollständige Bild davon bekommen , wie all dies funktioniert. Und im Grunde ist es das für diese Seite. Tut mir leid, das in der Mitte. Aber wie er sagte, in meinem ursprünglichen Design funktionierte es früher ohne Probleme, aber aus irgendeinem Grund hier funktioniert es wirklich nicht vom ersten Mal, also weiß ich nicht wirklich, warum diese Dinge geschehen. Lassen Sie uns fortfahren und alle unsere Informationen zusammenfassen. Also klicke auf Control G und ich werde es als ausgewähltes Angebot nennen. Mein Dad hat sie in einen Stapel gesteckt. Und es wird den Stapel nicht erkennen. Aber noch einmal, Sie können in springen und ändern Sie diese Abschnitte, weil zwischen allen von ihnen sind 150. Aber genau hier an der Spitze sind wir bei 80 Forum, genau hier. Es erkennt es von hier aus. Also 100, weil wir diese Pfeile haben. Stellen Sie also sicher, dass Sie das im Hinterkopf behalten. Was das sein wird. Wir können es zum Beispiel einen Hotelinformationsbereich nennen . Und wir werden all das im Inneren neu erstellen lassen. Und das ist es im Grunde für den Festplattenbildschirm. Nochmals, tut mir leid, aber manchmal werden Sie feststellen, dass Sie wollen, werden Sie es tun, richtig? Zum Beispiel verwenden Sie ansprechende Größenänderung, sagen wir, und es funktioniert, dann versuchen Sie es beim nächsten Mal. Aber Adobe XD lässt Sie nicht zu, weil es denkt, dass Sie versuchen, etwas anderes zu tun. Und im Grunde war das das, was genau hier das Problem war. Aber Ihre Aufgabe als Designer ist es, all diese Probleme zu lösen , die auftauchen und auf Ihren Weg kommen. Also mag ich das wirklich. Ich habe Ihnen gezeigt, dass all diese Fehler leicht behoben werden können. Sie müssen nur diesen einfachen Mustern folgen oder was auch immer Sie tun. Der erste Zustand, stellen Sie sicher, dass Sie im zweiten Zustand wiederholen, stellen Sie sicher, dass alle Ihre Layer korrekt benannt sind. Sie sind also der gleiche Name zwischen den Staaten und alles wird funktionieren, wie es sollte. Im nächsten Video werden wir endlich auf diese Seite gehen. Wir werden es entwerfen und wir sehen uns dort. 35. Design erstellen: Lassen Sie uns jetzt voran gehen und beenden Sie unseren Designprozess, indem Sie diesen Zahlungsbildschirm entwerfen. So das Gleiche wie zuvor. Halten Sie Ihren alten Schlüssel, stellen Sie sicher, dass er 70. Vergrößern. Und ich werde es ein Zahlungsdesign nennen. Und dann werde ich einfach hier reinspringen, benutzter oberer Abschnitt Hit Control C, weil dies der weiße Hintergrund ist, also wie es hier ist. Ich werde es entfernen und dann Kontrolle V drücken, um es hier einzufügen. Sie sind Herat. Also im Grunde haben wir jetzt alle die gleichen Details, weil dies unser Hotel war, unser ursprüngliches Hotel, dieses hier. Also werde ich einfach hier auf die Hotel-Karte springen und ich werde es Hotel aktuell nennen, IMG. Habe ich getan. Und ich werde auch in meinen Bild-Ordner springen und ich werde es das gleiche Bild sperren. Und ich werde es im Grunde so hineinziehen , damit wir wissen, dass es dieser ist. Also Uli sagen Union Hotel hier, reduzieren. All diese Bilder trauen sich. Also im Grunde ist dies das gleiche Bild wie dieses. Und du wirst dein neues Hotel sehen. Stellen Sie also sicher, dass Sie alle Ihre Informationen an Ort und Stelle haben. Und die Schulden, sie sehen die gleiche endete, um aussehen, wie sie sollten. Also im Grunde ist es das. Und das einzige, was wir auf dieser Seite tun müssen ist, diese unteren Informationen von dieser Seite zu bringen. Zum Beispiel werde ich Control C drücken. Gehen Sie zu dieser Seite, drücken Sie Control V. Stellen Sie sicher, dass wir hier sind und sehen wir 150, das ist in Ordnung. Ich werde es in die untere Eisengruppe ziehen und ablegen. Und eine Sache weniger ist natürlich, diesen Abschnitt zu animieren. Also, was ich tun werde, ist die Steuerungstaste zu drücken. Um dies als Komponente zu erstellen. Neuer Staat wird die Zahlung sein. Innerhalb der Zahlung, was wir tun werden, ist dies auf 0 zu senken, bringen Sie die Karteninformationen auf 100, gehen Sie zur Zahlung, ändern Sie die Farbe in schwarz, und das wird hellgrau sein. Das ist im Grunde alles. Und schließlich, erstellen Sie einen neuen Zustand, um so zu bestätigen. Und innerhalb der Konformation werden wir das auf 0 senken und das auf 100 bringen. Und schließlich, wählen Sie diese fast schwarz, und das wird hellgrau sein, und das ist es im Grunde. Also lassen Sie uns jetzt voran und Prototypen es. Wenn Sie einen Prototyp hätten, werde ich die Zahlung auswählen. Klicken Sie darauf und mal sehen, wir können auf die Zahlung Abschnitt gehen ist in unserem 0.6. Das ist in Ordnung. Und klicken Sie hier, dass wir zur Bestätigung gehen können. Fahren Sie mit der Zahlung fort. Und ich werde Fahrtdetails auswählen, um in den Standardzustand zu gelangen. Konformation ist Information. Und schließlich, Bestätigung. Gebrauchte Zahlung gehen an die Zahlung. Trip Details wird unser Standardstaat und Milchkuh es sein. Jetzt lassen Sie uns schnell Vorschau drücken und sehen, was Sie haben. Also, sobald Sie auf Zahlung klicken, wird es leicht wechseln. Und ich glaube nicht, dass das zentriert ist, also ist es tatsächlich. Aber mal sehen, was wir damit machen können. Ich finde das nicht wirklich so attraktiv. - Konformation. Es funktioniert gut. Das funktioniert so, wie es sollte, und das funktioniert, aber Sie müssen ein wenig warten, bis XD aus irgendeinem Grund entsperrt. Versuchen Sie also, sie von der Seite anzugreifen. Also versuchte, von hier zu kommen, anstatt direkt von hier. Also manchmal wird es nicht funktionieren. Also noch einmal, Zahlungs- und Trimdetails, alles sieht so aus, wie es sollte. Lassen Sie mich schnell die Schuldenzahlung überprüfen und sehen, was wir dort haben. Also entwerfen bis zum aktuellen Zeitpunkt, lassen Sie mich meine Hoteldetails Karteninformationen verstecken, und mal sehen, was wir dort haben. Also ist alles gut, aber ich finde es nicht so schön, weil es ausgeglichen ist. Versuchen Sie also, wenn Sie diesen Entwurf neu erstellen, versucht, etwas anderes mit diesen Formularfeldern zu finden. Also entweder bewegen Sie sie alle nach links oder setzen Sie den Kartennummer-Text in die Mitte des Feldes oder Sonntag, dass der Tod vielleicht einen wirklich schöneren, schöneren Blick dazu bringen würde. Aber lassen wir es jetzt einfach so und verschwenden Sie nicht zu viel Zeit. Aber das ist es im Grunde vorerst. Lasst uns schnell zwischen Zuständen wechseln und das war's. Das ist in Ordnung. Und als eine bestimmte Schulden es für die Entwurfsphase. Also in der nächsten Reihe von Videos, werden wir an der Responsive Design arbeiten. Ich werde Sie nicht zu sehr mit einem ansprechenden Design für alle Seiten stören. Stattdessen konzentrieren wir uns nur auf die Homepage, weil sie die größte ist. Und ich möchte Ihnen zeigen, wie all diese Änderungen Ihr Responsive Design beeinflussen, sobald Sie für all diese verschiedenen Bildschirmgrößen entwerfen. Und ich werde Ihnen einige Tipps und Tricks zeigen, die Sie verwenden können, insbesondere mit Responsive Responsive Resize Funktion in Adobe XD. Das wird Ihnen wirklich helfen, wenn Sie mit diesem ansprechenden Design beginnen. Also sehe ich dich dort. 36. Erste Schritte mit Responsives Design: Jetzt, da wir unser Design fertiggestellt haben, ist es an der Zeit, zu einem reaktionsfähigen Design zu gelangen. Aber bevor wir es tun, möchte ich nur kurz erwähnen, was es ist und wie Sie Responsive Design angehen können. Grundsätzlich ist Design, wenn Sie es tun, die Art und Weise, die wir in dieser Klasse gemacht haben, Spalten und Inhalt. Grundsätzlich alle Inhalte, die Sie haben, werden Sie in diesen Spalten verteilen. Es spielt keine Rolle, ob Ihr Layout 4861216 Spalten hat, es spielt keine Rolle. Das Einzige, was zählt, ist der unendlich skalierbare Inhalt . Was das bedeutet, Sie haben, zum Beispiel, in 12 Spalten Layout, Sie haben das Bild, das 12 Spalten breit ist. Dann müssen Sie in der Lage sein, es auf kleinere Größen wie Ihr Handy zu skalieren, zum Beispiel vier Säulen breit oder sechs Spalten breit oder acht Säulen breit zu sein . Also müssen Sie das im Hinterkopf behalten, wenn Sie anfangen zu entwerfen. kann man später nicht anpassen. Ich meine, das kannst du, aber es wird viel schwieriger all diese Dinge im Hinterkopf zu behalten, sobald du anfängst zu entwerfen. Deshalb habe ich in dieser Klasse alle meine Elemente zum Beispiel in die Stapel gelegt. Ich stelle sicher, dass ich konsistente Abstände zwischen ihnen habe, nur weil eine neue Schulden, wir werden diese für die Reaktion später entwerfen. Wenn es um Responsive Design als Ganzes geht, müssen Sie mit Ihren Entwicklern sprechen weil Ihre Präferenzen manchmal gut genug sind. Nehmen wir an, dass Sie zum Beispiel innerhalb der 12 Spalten für den Desktop entwerfen möchten , innerhalb der acht Spalten für das Tablet und vier Spalten für mobile, manchmal mit den Entwicklern, das ist in Ordnung für sie. Also müssen Sie nur diese Größen erstellen , weil sie wissen müssen, wo die Haltepunkte sind, was bedeutet, wo sich die Bildschirmgröße ändert, wo sie von Desktop zu Tablet, Handy und so weiter geht . Sie müssen also all diese verschiedenen Größen entwerfen, damit sie wissen können, wie breit das Bild ist, wie breit die Schaltfläche ist, wie breit der Text ist, wie viel Text innerhalb des bestimmten Elements ist und so weiter. Daher müssen Sie für alle diese Größen entwerfen. Jetzt verwenden einige Entwickler gerne ihre eigenen Größen, ihre eigenen Stile, ihre eigenen Richtlinien. Bevor Sie also mit dem Responsive Design beginnen, sollten Sie unbedingt mit Ihren Entwicklern sprechen. Stellen Sie sicher, dass Sie sie fragen, welche Größen sie unterstützen werden. Weil einige Entwickler gerne unterstützen, zum Beispiel diese riesigen Bildschirme wie TVs zum Beispiel. Andere unterstützen gerne nur einfachen Desktop, der in diesem Fall 1920 von 1080 ist, so etwas wie wir es entworfen haben. Und einige andere Entwickler unterstützen auch gerne jede einzelne Größe. Zum Beispiel 1920 von 1080 Dan, 1280 von 860 und so weiter und so weiter. So gehen sie von dieser riesigen Größe den ganzen Weg hinunter auf kleinere Größe. Während andere Entwickler zum Beispiel drei Hauptgrößen entwerfen, wie ich sagte, zum Beispiel Desktop, Tablet und Handy, nie in Größen für iPads entworfen , weil das nicht die richtige Größe ist. Auf diese Weise, die Sie gerade für den iPad-Bildschirm selbst entworfen, stellt sicher, dass Sie sich mit diesen Rasterlinien vertraut machen. Sie können Websites wie Bootstrap verwenden und Sie können Angular erkunden, zum Beispiel, nur um zu sehen, was andere Designer da draußen tun. Was schaffen sie Mischung, um sich vertraut zu machen, was einige dieser Rasterlinien sind, was einige dieser Gittergrößen, unsere Mischung, um Systeme zu erkunden, wie ich sagte, wie Bootstrap, versucht. Verwenden Sie so etwas wie Designsysteme. Achten Sie darauf, 8 Gitter zu verwenden. einfach vertraut, wenn Sie gerade erst mit all diesen Dingen anfangen. Aber mit der Zeit, sobald Sie die Arbeit daran beginnen, wenn Sie ein paar Projekte unter Ihrem Gürtel haben, dann werden Sie die Größe und den Abstand bestimmen, die für Sie, Ihren Stil, Ihren Workflow, und Daniel wird es auf Projekte anwenden, die vorankommen. Aber wieder einmal, sobald Sie mit diesen Dingen im Sinn zu entwerfen beginnen, also Spalten in quantitativer, also Spalten in quantitativer,wird es viel einfacher für Sie sein, diese Methode auf jede Art von Rastergröße, jede Art von Abstand, jede Art von der Rinnenbreite, Spaltenbreite. Es spielt keine Rolle, solange Sie diesen Ansatz von Responsive Design im Auge haben. Nun, damit beginnen einige Designer gerne mit mobilen Größen, was in Ordnung ist. Ich fange gerne an, zum Beispiel mit Desktop-Größen. Was wir bisher entworfen haben und was wir bisher geschaffen haben, spielt in der heutigen Zeit keine Rolle, solange Sie diesen Ansatz im Auge haben, diesen skalierbaren Ansatz. Denn wieder einmal können Sie die Breite Ihres Bildschirms nicht ändern, aber Sie können die Höhe ändern. Und das ist, warum, zum Beispiel, ein mobiles Gerät können Sie endlose Klebstoffe Crawlen auf Facebook oder Instagram, zum Beispiel, weil der Inhalt auf die Bildschirmhöhe passt, Es passt sich nicht an die Bildschirmbreite. Die Breite bleibt gleich, aber sie passt sich an die Bildschirmhöhe an. Deshalb ist dieser ansprechende Ansatz wichtig. Und wenn Sie es lernen, wenn Sie anfangen, es anzuwenden, werden Sie die Vorteile früher als später zu ernten. Gehen wir nun zurück zur Adobe XD-Datei und ich werde Ihnen die Größen zeigen, die verwendet werden, und sie werden in diese Übungsdatei aufgenommen werden. Achten Sie also darauf, es zu überprüfen, stellen Sie sicher, es zu erkunden und stellen Sie sicher, es zu verwenden und es selbst zu testen. Sehen Sie, ob es für Sie funktioniert. Wenn nicht, ist es wirklich egal. Sie können die online finden und Sie können verschiedene verwenden , die für Sie und Ihren Arbeitsstil passen. Also lassen Sie uns jetzt auf Adobe XD-Datei wechseln. Ich werde dir zeigen, was ich meine. Also, was wir hier haben, ist die Adobe XD-Datei, an der wir gearbeitet haben. Und ich werde einfach auswählen, einige davon sind Boards aus meinem ursprünglichen Design. Ich werde sie kopieren und dann werde ich es hier einfügen. Also hier sind diese Zeichenflächen und ich werde Ihnen in einer Sekunde zeigen, was sie sind. Und ich habe immer noch dieses Problem, das ich vorher habe. Lassen Sie mich das rückgängig machen. Und lassen Sie mich zum Beispiel versuchen. Lassen Sie mich hier schreiben. Und lass mich eins nach dem anderen machen. So zum Beispiel, ich kann, Es ist immer noch da drin konfrontiert. Es spielt also keine Rolle. Ich werde sie auf meine eigene Art erschaffen. Also, was ich tun werde, ist meine Zeichenfläche zu benutzen, einen neuen Flughafen zu erstellen. Oder wenn ich das tue, wird es das einfach wieder tun, wie es getan hat. Also, was ich eigentlich tun werde, ist, das zu benutzen und dann werde ich es duplizieren, indem ich meinen alten Schlüssel halte. Und ich werde alle Inhalte in meinem Dad entfernen. Und ich werde es nennen, Mal sehen. Große Desktops. So, oder 1200 Pixel. Und lassen Sie uns diese Rasterlinie entfernen. Ich dat. Und lasst uns jetzt anfangen, daran zu arbeiten. Also, was du hier haben wirst, anstatt 1920, werden wir 1440 so haben. Dann werden wir noch 12 Spalten haben, aber jetzt wird die Rinnenbreite 30 sein, weil dieser Abstand viel geringer ist. Wir werden hier 65 haben und hier werden wir 165 haben. Jetzt manchmal wird XD gegen dich kämpfen, aber du musst vorwärts gehen Sortierungen gut, mit 30, die 65, mit 16, 5, was ich denke, ist einfach in Ordnung. Bevor wir weitergehen, lassen Sie mich erklären, was das ist. Dies ist also im Grunde für die kleineren Desktop-Größen, vielleicht für die Laptops, die, mal sehen, 14 Zoll oder 13 Zoll oder so etwas sind , weil wir diese Größe haben wollten, die dazwischen geht, diese großen Größen für große Desktops und kleine Größen für Tablets, zum Beispiel, weil wir die Kontinuität unserer Website wollen und deshalb wollen wir, dass sie in etwa so aussieht. Lassen Sie mich zum nächsten gehen. Also werde ich ein 1084 benutzen, dieses auch, nur damit ich es schließen kann, damit es uns nicht zu sehr ablenkt. Und ich werde es auch hier verschieben. Denn genau hier unten, werde ich diese ursprünglichen Websites und Größen verwenden. Also will ich es nur aus dem Weg halten. Also wieder, wir haben große Desktops oder eine 1200 Pixel. Und du hast gesehen, dass ich immer noch 12 Spalten benutze. Ich benutze immer noch Rinnenbreite. Aber jetzt von 30, also war es 60, also ist es halb Papa in und Spaltenbreite ist 65. Ich verwende immer noch die verknüpften Ränder von 165, die diese sind. Es sind 165 von dieser Seite und 165 von dieser Seite. Sie können jedoch beliebige Ränder verwenden, die Sie möchten. Es liegt wirklich alles an dir. Jetzt duplizieren wir diesen. Ich halte meine Alt-Taste und stelle sicher, dass es 70. einmal, wie es vorher war. Nun, das werden große Geräte bis zu 992 sein. Was das sein wird, Es sind nur die kleineren Laptops und diese großen Tablets, zum Beispiel, in der Landschaftsgröße. Also noch einmal möchte ich all diese unterstützen. Aber noch einmal, wenn Sie an einem echten Projekt arbeiten, stellen Sie sicher, dass Sie mit Ihrem Kunden darüber sprechen, welche Größe sie unterstützen werden. Also, wie ich zu Beginn dieses Videos sagte, vielleicht wollte nicht alle diese unterstützen. Vielleicht wollen sie nur 1920 mal 1080 und bewegen sich dann direkt auf Tablet-Größen. Also noch einmal, stellen Sie sicher, dass Sie mit ihnen sprechen, stellen Sie sicher, dass Sie sehen, welche sie unterstützen werden. Und offensichtlich hängt das Projektbudget und wie viel Sie berechnen werden davon ab, wie viele dieser Größen Sie in dieser Klasse haben. Wir werden nur die Homepage anpassen, weil es die größte ist, um all diese Größen. Aber stellen Sie sich vor, dass Sie zum Beispiel 20 Seiten haben . Es ist nicht dasselbe, wenn sie diese 20 Seiten in drei Größen wollten. Und wenn sie wollen, dass diese 20 Seiten zum Beispiel 10 verschiedene Größen. Es ist also nicht das Gleiche. Sie müssen mit ihnen sprechen, welche Größen sie unterstützen werden, bevor Sie das Projekt starten. Wenn Sie zum Entwurfskurzvideo zurückkehren und die Entwurfskurzvorlage öffnen, können Sie sehen, dass alle diese Größen, von denen ich spreche, in der Entwurfsübersicht aufgeführt sind. Und das ist ein großer wichtiger Teil des Design-Brief- und Designprozesses selbst ist es, mit Ihrem Kunden und seinen Entwicklern darüber zu sprechen , welche Größen sie unterstützen werden. Denn es hängt nicht nur davon ab, wie viel Sie für dieses Projekt berechnen werden. Es hängt auch weitgehend davon ab, wie viel, wie lange wird es dauern? Denn wieder einmal, je mehr Größen Sie haben, desto länger dauert es, alle diese verschiedenen Zeichenflächen und Bildschirme an all diese Größen anzupassen . Jetzt gehen wir zurück und erstellen eine andere. Wie ich schon sagte, wird das bis zu 992 sein. Und mal sehen, es wird 1024 sein, so. So können Sie sehen, dass es beginnt, kleiner und kleiner Knopf direkt hier zu bekommen. Sie können 88 Spalten verwenden, aber ich werde immer noch 12 verwenden, nur um es Ihnen zu zeigen. Also werden wir 30 verwenden und wir werden 50 für die Spaltenbreite verwenden. Also gehen wir wieder zurück, genau hier. Also 30, 50, und lasst uns 47 hier benutzen. Stellen Sie sicher, dass wir 47 sind. Du kannst sehen, dass XD dich bekämpfen wird, aber du musst dabei bleiben. So 12305047. Und Sie können sehen, dass, weil XD ein Werkzeug ist, ist eine Software, es wird nicht sofort erkennen, was Sie versuchen zu tun. Also, Sie müssen nur verfolgen und überzeugen. Also werde ich meinen alten Schlüssel halten diesen noch einmal duplizieren. Und jetzt fangen wir an, in Tablet-Territorium zu gelangen. Nun, das sind bis zu 76, acht Pixel in der Breite. So können Sie diese als sehen, zum Beispiel, Portrait für iPad, Portrait für Microsoft Surface und Tabletten Dosis. Das sind also die Breite von 768 so. Und es werden jetzt acht Säulen haben. Wir haben also viel mehr Platz zwischen unseren Spalten. Sie werden 29 für die Rinnenbreite sein, sie werden 64 Spaltenbreite und schließlich 42 für diese Ränder sein. Also noch einmal, 296042. Und jetzt, da wir diese beendet haben, Lassen Sie uns jetzt eine letzte Dimension erstellen, die für mobile Bildschirme sein wird. Jetzt, wie gesagt, ist es nicht wirklich erforderlich und es ist nicht wirklich eine gute Idee, für Telefone zu entwerfen, zum Beispiel eine gerade für iPhone, gerade für eine Galaxie, gerade für Google Pixel. Weil Menschen, die Telefone verwenden, die nicht diese Schriftarten sind, werden keine gute Erfahrung haben. Aus diesem Grund kodieren Sie Ihre Unterstützung dieser Haltepunkte, damit Ihre Inhalte gut skaliert werden. Zum Beispiel, wenn Ihre Benutzer diese riesigen Telefone haben, vielleicht wird es sich als dieses öffnen. Wenn sie diese wirklich kleinen Schriftarten haben, wird es sich als diese öffnen. Also ist es wirklich alles abhängig von all dieser Größe. Gehen wir also und stellen Sie sicher, dass die Breite 375 beträgt. Stellen Sie sicher, dass wir jetzt vier Spalten verwenden. Stellen Sie sicher, dass wir 30 verwenden. Es gibt eine 61 und 20 hier. Also werde ich sicherstellen, dass es funktioniert. Also noch einmal, 3061 und wir werden 20 unten verwenden. Also Derek, oh, und jetzt können Sie sehen, dass wir diese vier Spalten haben. Jetzt, wie unsere Inhalte skaliert werden, werden Sie in nur einer Sekunde sehen. Aber im Grunde werden wir nur das gleiche Layout, das wir auf unserer Homepage haben, an all diese verschiedenen Größen anpassen . Also das erste, was ich tun werde, ist tatsächlich diese Homepage zu benutzen, meine Alt-Taste gedrückt zu halten und sie hierher zu ziehen. Und dann werde ich reinspringen und es reaktionsschnell nennen. Oder noch besser, nennen Sie es hier diese Abkürzung. So Homepage im Design und in diesem, weil wir alle diese anderen Abkürzungen verwenden werden, M, bevor wir zu Design und responsive Design bekommen, möchte ich nur mein Hauptnav, primäre nav und mein Logo verwenden . Also werde ich mein Logo exportieren, weil ich dafür PNGs verwenden möchte, weil dieses Logo, wie ich bereits erklärt habe, weil es diese drei Elemente im Inneren hat, wenn eine ganze MMA-Umschalttaste, man sieht, dass es nicht so gut skaliert, wenn ich die Umschalttaste und Alt halte und die linke Maustaste klicke, wie Sie sehen können, fangen alle an zu bündeln. Also, was ich tun werde, ist, drücken Sie Control oder Command E. Wählen Sie meinen Desktop, zum Beispiel, und exportieren Sie ihn einfach als PNG. Und dann gehe ich zurück und finde mein Logo. Ich bringe es zurück hierher. So hier herum. Und ich werde es einfach hier positionieren. Stellen Sie sicher, dass es sich an der gleichen Stelle wie das ursprüngliche Logo befindet. Ich werde es unter meinen Papa Punkt verschieben und wann ich auf meinem Logo Löschen drücken soll. Lassen Sie uns jetzt schnell erkunden. Also Ziele, primäre Nav-Logo, wie Sie sehen können, hat es es nicht aktualisiert, also muss ich das manuell tun. Also, was ich tun werde, ist ein Logo von meinem primären Navi zu verwenden, drücken Sie Control C. Und dann eine Hälfte, um das für all diese anderen und all diese anderen Zustände zu tun , werde ich springen, ein Logo zuweisen, Control V drücken Position genau hier. Und es wird es einfach an der gleichen Stelle positionieren. Also werde ich das weiter machen. Ich werde es in all diese anderen Staaten einfügen. Und im nächsten Video werden wir weitermachen , wo wir hier aufgehört haben, und wir werden anfangen, unsere Inhalte an all diese reaktionsfähigen Designgrößen anzupassen. Auch eine letzte Sache, die ich erwähnen möchte, bevor wir in das tatsächliche responsive Design kommen , ist manchmal werden Sie die weniger Inhalte verwenden. Also in einigen dieser Fälle, wie zum Beispiel, diese Zielkarten, wenn Sie sich erinnern, weil wir links- und rechts-Pfeil verwenden, haben wir insgesamt acht für diese kleineren Größen verwendet, die Sie verwenden und teilen können. Zum Beispiel, ich weiß nicht, zwei nach zwei. So müssen Benutzer einige Male tippen. Aber was ich wirklich gerne mache, ist, ohne ihre Zeit zu verschwenden. Zum Beispiel können wir von acht in diesen größeren Größen zu sechs in diesen kleineren Größen zu vier in diesen Medien gehen , zum Beispiel, Tablet-Größen, eine einzige Karte auf mobile Größe. So können sie zwischen all diesen Karten nach links und rechts blättern und trotzdem auf die Schaltfläche tippen. Also müssen Sie auch über Hover-Zustände nachdenken, und wir werden über sie reden, sobald wir tatsächlich zu diesen höheren Staaten kommen und sie anpassen. Also, wie Zustände in den Mobil- und Tablet-Größen offensichtlich nicht notwendig sind , weil Sie nicht mit der Maus dort schweben können. Also werden wir sie entfernen und unsere Inhalte werden ein bisschen anders aussehen , als es auf unseren Schnabelgrößen für Desktops ist. Also werde ich Sie im nächsten Video sehen und ich werde weiter an diesem Logo arbeiten. stützen es in allen unseren Staaten, so dass wir sie später leicht anpassen können. Also sehe ich dich im nächsten Video. 37. Erstellen von Responsive Design 1: Okay, jetzt, da ich fertig bin, mein Logo anzupassen und dieses Be und Jean in alle Staaten einzufügen. Beginnen wir jetzt mit der Arbeit an der Responsive Design. Also, was wir hier haben, ist die Responsive Design-Option für die Art Board selbst. Aber ich würde Ihnen nicht empfehlen, es zu verwenden, denn wenn ich mich auswählte und dann hier mitten auf meinem Kunstboard aufwachsen würde, und dann anfangen, an meinem responsive Design zu arbeiten. Sie können sehen, dass einige Elemente gut funktionieren, andere aber nicht. Und sie zerquetschen endlos, aber Sie können es für einfachere Seiten verwenden. Zum Beispiel Landingpages mit nicht zu vielen Details und Optionen. Aber wie gesagt, wir werden es nicht verwenden, weil wir mehrere Zustände haben, wir haben mehrere Optionen für jeden dieser verschiedenen Abschnitte unserer Seiten. Deshalb wollte ich alles von Hand machen und Ihnen nur den gesamten Prozess zeigen. Also, was ich eigentlich tun werde, gibt es zwei Möglichkeiten. Sie können tatsächlich zwei verschiedene Wege darüber gehen. Die Methode Nummer eins ist also, dass Sie einfach hier gehen und alle diese Elemente von dieser Seite kopieren können. Dann gehen Sie hier und fügen Sie sie hier ein. Erweitern Sie diesen Flughafen den ganzen Weg nach unten, und passen Sie dann einfach Element für Element oder auf die andere Weise an, wie ich es getan habe und wie ich es tun werde, ist, dass Sie Ihren alten Schlüssel halten, Ihre Kopie ziehen können , wie wir es bisher getan haben. Und dann werde ich einfach alle diese Einstellungen auf diese Zeichenfläche genau hier unten wiederholen . Also werde ich tun, das ist ganz einfach. Sie können zuerst mit der Breite beginnen, also 1440, klicken Sie rechts hier, so dass wir bezweifeln, eine Responsive Größenänderung auf. Also werde ich arbeiten 40 dort verwenden, drücken Sie die Eingabetaste, und Sie können sehen, dass es nach unten skaliert ist. Und einmal ein Hover, können Sie den Umriss unserer ursprünglichen Zeichenfläche sehen. Als nächstes werde ich alle diese Einstellungen anpassen. Also 365165. Also 30 bis 65 und dann 165 genau hier. So wie das. Und jetzt, da wir es haben, können Sie immer überprüfen. So 123065165365165, alles ist in Ordnung. Jetzt können wir tatsächlich anfangen, an unserem Design zu arbeiten. Wie können Sie sich dem nähern, ist einfach. Sie können Element für Element tun, wie wir es tatsächlich tun werden, weil ich fand, dass es am einfachsten und genauesten wichtig ist, um daran zu arbeiten. Oder was Sie auch tun können, ist einige dieser ähnlichen Elemente wie dieses zu tun, zum Beispiel einfach klicken, ziehen Sie es hinein, und das ist es im Grunde für all diese einfacheren Elemente. Sie können diesem auch die gleiche Methode nähern. Sie können sich diesem nähern, weil es wirklich nicht so schwierig ist. Vielleicht legen Sie es einfach so in die Mitte, zum Beispiel. Sehen Sie, ob es richtig ausgerichtet ist, endet es im Grunde zu diesem Abschnitt. Es gibt keine Arbeit mehr zu tun. Sie können auch die kleinsten Abschnitte ausführen, insbesondere diese Partnerabschnitte. So kann ich es zum Beispiel hier in der Mitte positionieren. Ich werde sicherstellen, dass es genau hier ist. Und dann werde ich sicherstellen, dass es genau hier ist. Und dann kann ich in meine Partner-Logos springen, meine Shift-Taste halten. Und da wir Stacks verwenden, können Sie sehen, wie das folgende Layout verantwortungsvoll wirkt und skaliert. Sie können auch tun, ist, ohne Shifts zu halten, klicken Sie einfach rechts hier und dann passen Sie sie so an. Es liegt also wirklich alles an dir. Wie Sie sehen können, sind einige Elemente wirklich einfach zu tun, aber Sie müssen dies auch hier anpassen. Also, wenn ich jetzt auf diesen Abschnitt klicke, geht es nicht nach draußen. Wie es heißt, sind einige Elemente wirklich einfach, es wie dieses zu tun, zum Beispiel einfach angepasst an hier. Klicken Sie hier, stellen Sie sicher, dass dies hier ist. Und dann verwenden Sie die Währung in einfach angepasst hier, zum Beispiel, Sie können es auch hier erweitern, nur so dass die Benutzer wissen, dass es viel mehr zu sehen gibt links und rechts. Und auch dieser Abschnitt ist zum Beispiel wirklich ziemlich einfach. Also werden wir es in der Mitte anpassen klicken Sie rechts hier und machen Sie diese Änderungen für jetzt. Was ich also tun kann, ist, das hier reinzuziehen und dann zu sehen, wo mich das zum Beispiel so hört . Was ich also tun kann, ist einfach zu erweitern und es zum Beispiel lange Spalte breit zu machen . Und dann kann ich es hierher bringen. Dann kann ich hier reinspringen und die Größe reduzieren. Stellen Sie sicher, dass mein Abonnentext in der Mitte ist. Springen Sie in meinen Horrorzustand und passen Sie dann einfach meinen Horace-Zustand an. Stellen Sie sicher, dass Sie sich in der Mitte anmelden. Gehen Sie zurück zum Standardzustand, und das war's vorerst. Wie ich schon sagte, du kannst all diese Dinge so machen, oder du kannst sie umgekehrt machen. Es liegt also wirklich an dir, wie du dich wirklich anpassen wirst. Dies stellt sicher, dass dies 40 wie und Todesfälle ist. Oder jetzt, weil wir kleiner sind, können wir sogar auf 20. Und lassen Sie uns voran und konzentrieren uns jetzt auf eine schwierigere Aufgaben zur Hand, die im Grunde Navigation und diese Drop-Down-Menüs und diese Karten vor allem ist, was wird uns und die größte Menge Zeit in Anspruch nehmen. Also zuerst, lasst uns mit unserem Heldenbereich arbeiten. Also werde ich in unsere Heldenbilder springen, alle auswählen und sie einfach hierher bringen. Und dann, was Sie tun können, ist, Ihren Helden zu verstecken und dann zu jedem von ihnen zu springen. Doppelklicken Sie darauf, und fokussieren Sie einfach den Bereich, den Benutzern angezeigt werden soll. Wie dieses zum Beispiel kann ich dieses verstecken, dieses zurückbringen und doppelklicken und vielleicht einfach dorthin schieben. Ich kann es auf 0 senken, diesen einbringen, und vielleicht verstecken wir uns. Dieser hat sich getrennt. Also will ich, dass diese Boote so in der Mitte sind. Das ist in Ordnung. Bringen Sie das zurück. So wie so. Und bringen Sie das zurück. Okay, also werde ich 0 basierend auf diesem Bild verwenden, 0 basierend auf diesem Bild. Und ich werde einfach mein Farb-Overlay zurückbringen und Molkerei haben es. Sie können dies auch mehr anpassen, wenn Sie möchten, aber ich denke, es wird gut funktionieren. nächste Schritt ist, diese Pfeile anzupassen, denn wieder, Sie können sich Ihren Weg um von diesen Elementen arbeiten , die einfacher zu justieren sind und bewegen Sie sich auf diese Elemente, die schwieriger zu justieren sind. Also werde ich meinen Araber so hineinziehen und auch immer mit dem ersten Staat anfangen. Also lassen Sie uns unsere Text-Maske so in der Mitte zu sein, wie diese. Lassen Sie uns unseren Knopf so in der Mitte bewegen. Und was wir jetzt tun können, ist auch die Größe dieser Schaltfläche auf so etwas zu erweitern. Gehen Sie, um zu schweben, so etwas. Das ist in Ordnung. Und dann verschieben Sie es einfach in die Mitte, so dass es im Grunde zu unserem neuen Layout passt. Also, jetzt, da wir all das behoben haben, Lassen Sie uns jetzt an unserer Navigationssoftware zu mir arbeiten, lassen Sie uns schnell alles schließen und daran arbeiten. Also zuerst, ich werde mein Logo hierher verschieben. Und was ich tun werde, weil ich all diese Textelemente habe. Was ich tun werde, anstatt sie hierher zu bringen, werde ich sie ungefähr hier runterbringen. Und dann, zum Beispiel, mehr als 20 unten von meinem Logo. Ich denke, das ist in Ordnung. Und dann werde ich reinspringen und das hier anpassen. Und dann werde ich sie alle auswählen. Mein NG-Klick hier, das wird sie gleichmäßig über unser Netz verteilen. Jetzt können Sie Rasterlinien folgen, wenn Sie möchten. Also Winter hier positionieren, Wellness hier positionieren. So nimmt jeder von ihnen zum Beispiel zwei Spalten ein. Aber das werde ich nicht tun. Es ist viel einfacher zu tun. Abbringen. Was Sie auch tun können, ist dies in die Mitte zu verschieben, so jetzt, weil wir viel mehr Platz haben. Und was wir tun können, ist zum Beispiel die Gesamtgröße unseres Logos zu reduzieren. Also lassen Sie uns in unser Logo springen und halten die Umschalttaste gedrückt. Wir können es hier positionieren, denn wie gesagt, brauchen wir nicht so viel Platz für unser Logo. Wir können unseren Tab-Punkt in die Mitte unseres Logos bringen. Bringen Sie das hier rein und verwenden Sie alle diese Gegenstände. Und jetzt bringen Sie sie in 20, zum Beispiel. Und ich denke, das wird gut funktionieren. Also, das ist alles Schulden, all das ist abgeschlossen. Was ich tun kann, ist das, was am zeitaufwendigsten und was ich Ihnen schnell für diesen ersten Zustand zeigen werde, und dann werde ich weitermachen, sie selbst tun und dann zu Ihnen zurückkommen und Ihnen zeigen dass Sie , um dies für alle Ihre anderen Staaten zu tun. Also zuerst, was wir brauchen, ist, diese Ziele so anzupassen, dass wir sie zurückbringen können, sie zuerst auf 101. Dinge bringen, sie wie DOS zeigen können. Und ich werde auch meine primäre jetzt Blur verwenden, stellen Sie sicher, dass es 1080 zum Beispiel ist, nur damit ich alle meine Elemente so angepasst sehen kann. Und hier könnte der Stapel zum Beispiel nützlich sein. Also mal sehen, dass ich diese Elemente wie dat, CEO, wie Schmutz auswählen und sie in einen Stapel legen möchte. Also sehe ich Europa so. Legen Sie sie in einen Stapel. Und im Inneren des Stapels, was Sie tun können, ist einfach auf einen Geruch klicken und einfach den Abstand zwischen ihnen anpassen. Und halten wir unsere Umschalttaste gedrückt. Bestimmte Darrell wird gleichmäßig so skalieren. Und mal sehen, es sind 115 so. Also werden wir diesen Abstand für alle von ihnen verwenden. Und mal sehen, ich glaube, einer von ihnen fehlt. Welcher ist es? Mal sehen. Irgendetwas fehlt hier. Also lass uns mal sehen, dass mir etwas entkommen ist, denn wie du siehst, zeigt es mir dort. Es ist eine Trennwand, tut mir leid. Du musst immer diese Dinge überprüfen und sehen, wohin sie dich bringen. Also Divider mit ist dies. Also 11 und 10. Also, was ich zuerst tun werde, ist in diesen Teiler zu springen. Basierend auf diesem Wert. Ich werde diese schließen, springen in diese Trennwand, Basis, diese Trennwand Größe. Und schließlich, für Nord- und Südamerika, haben wir dort keine Trennwand. Also lasst uns sie gruppieren. Amerika. Und ich werde auch in SEO drinnen fallen, wie wir es mit einem Europa getan haben. Das ist richtig. Und fiel in alle von ihnen und springen in Afrika. Also lasst uns uns daran erinnern und das Europa sehen. Also sind es 115. Ich werde den gleichen Wert verwenden, den gleichen Wert. So 115, wie Sie sehen können, funktioniert es ziemlich gut, aber wir können auch hineinspringen und diese anpassen. Also folgen Sie einfach der Regel dafür sind 108 abhängig von einem verdammt. Wie viele Buchstaben sind tatsächlich in all diesen anderen. Also für Afrika Stack, lasst uns hier bei USU, dem Stack und 115 springen . Und lassen Sie uns für diese letzte sehen, ich kann es ungefähr hier anpassen. Und noch einmal, tun Sie das gleiche für die Nord- und Südamerika, Stapel 115. Und wie Sie hier sehen können, müssen wir sie ein wenig überlappen. So können wir zum Beispiel diese letzte anpassen. Und dann können wir hier klicken, nur damit sie sich nicht zu sehr überlappen. Ich werde zurück gehen und zuerst schlugen die Dinge zuerst ein wenig und dann passen Sie das hier irgendwo an. Jetzt, wo ich damit zufrieden bin, werde ich sie verstecken. Also werde ich Mizuki doppeltippen, um sie zu verstecken, und ich werde all diese anderen zeigen. Also werde ich zuerst den Winter zeigen. Eine, die ich tun werde, ist es zum Beispiel hier anzupassen. Und dann werde ich den Textsprung in hier benutzen. Und mal sehen, zum Beispiel, vielleicht kann ich das in der Größe senken. Mal sehen, 120, was in Ordnung ist. Aber vielleicht kann ich sie sogar noch etwas bewegen. Also lasst uns hier klicken. Eigentlich, lassen Sie uns diese Bezeichnung verstecken. So haben Destruktoren nicht auf der Störung geendet. Also werde ich es einfach in diese Zeile bringen, genau hier. Ich werde auf meine Illustration klicken und ich werde einfach meine Umschalttaste halten und an hier angepasst, stellen Sie sicher, dass beide so zentriert sind. Und im Grunde schuldet es über den Winter. Jetzt können wir innerhalb des großen Knopfes springen und einfach an hier anpassen. Gehen Sie in den Horrorzustand, angepasst an hier, stellen Sie sicher, dass es passt. Es. Sieht es, ob es sich auf der Rasterlinie befindet? Ist es. Also im Grunde ist das in Ordnung für den Winter. Ich werde auf meine 0 doppelklicken, meine Wellness zurück einschließen und dasselbe im Grunde tun. Also werde ich meine Texte benutzen. Sehen Sie, wo es passt. Also genau hier. Und was ich tun kann, ist die automatische Höhe zu verwenden, könnte einfach einige von ihnen anpassen. Ich kann voran gehen und meine Illustration verstecken, nur so dass ich sehen kann, wo der Text und wie Derek. Derek. Mal sehen, was wir hier haben. Also haben wir 40, was großartig ist. Ich kann zurückgehen und meinen Text hier anpassen, ihren Kopf. Also für die Wellness-Illustration selbst, und wenn Sie das nicht sehen können, können Sie einfach die Breite anpassen, sie zurückbringen und diese dann wieder so zurückbringen. So dasselbe, wie wir es vorher getan haben. Was wir tun können, ist einfach unsere Illustration so anzupassen oder sie hier zu behalten, weil ich nicht möchte, dass sie zu breit ist. Mixture Text ist hier. Dann passen Sie die Breite unseres Textes noch einmal an. Und dann verschieben Sie das einfach, indem Sie 40 so verwenden. Und wählen Sie einfach diese beiden und bringen Sie sie so. Oder Sie können sogar weniger Text verwenden, wenn Sie möchten. Für die Wellness-Texte hier liegt alles wirklich an Ihnen und wie Sie sich dem nähern möchten. Bringen wir dieses Individuum zurück, richten Sie es hier aus. Ich werde den Text in irgendwohin bringen. Zum Beispiel sehen Analyten in der Abbildung, wird es passen? Es? Ist annelids verwenden Sie einfach die Texte, um die Größe abzuschneiden. Ich werde hier klicken und angepasst und ungerecht in diesem wie DAT, und bewegen Sie einfach unsere Schaltfläche und verschieben Sie es so. Bitte beachten Sie, dass, wenn Sie zum Beispiel den gleichen Button verwenden, hier mehr erfahren und nicht andere wie wir. Und dann können Sie einfach die gleiche Taste einmal anpassen und dann in Ihrem gesamten Design verwenden , so dass Sie einfach wieder in hoher DID zeigen können. Es wird also viel schneller sein als dieser Ansatz. Aber ich wollte so persönlich wie möglich für diese Jungs sein. Deshalb verwenden wir alle diese verschiedenen Tasten. Und natürlich bringt es diese Art von visuellen Interessen auf Ihre Seite. Wenn Sie diese Tasten N erhöht die Wahrscheinlichkeit der Klickbarkeit weil Sie alle diese interessanten Schaltflächen anstatt ein mehr über alle Ihre Seiten lernen. Also bedenken Sie das. Bei einigen Projekten werden Sie eine Schaltfläche haben, die für alle Ihre verschiedenen Zwecke und Seiten genau gleich sein wird und so weiter. Daher könnten einige von ihnen in einigen Fällen etwas anders aussehen. Jetzt nähern wir uns dem Ende. Ich werde mich in diesem Abschnitt wirklich schnell beschäftigen. Lassen Sie uns das aus dem Weg ziehen und ich werde meine Karteninformationen für jetzt verstecken. Mehr, wenn die Texte ungefähr hier herum, doppelklicken Sie, stellen Sie sicher, dass es automatisch die Höhe wieder angepasst ist, und lassen Sie uns es hier ändern. Mal sehen, lasst uns reiben und sicherstellen, dass wir 40 sind und unseren letzten Knopf anpassen. So wie das. Da hast du es. Wieder einmal sind wir bei 40. Und jetzt für den Karten-Info-Text, was ich tun kann, ist, in meine Karte zu springen. Ich kann es hier anpassen, zum Beispiel, kann sicherstellen, dass es auf der gleichen Straße wie es war. Und jetzt, was Sie tun können, ist, sie tatsächlich in die Gruppen aufzunehmen. Also mal sehen, das wird gemappt werden. Dies wird Newsletter sein, das wird Telefon sein. Und schließlich wird das Adresse sein. Jetzt, wenn sie da sind, können Sie sie in eine Gruppe legen und sie in einen Stapel legen. Aber bevor ich das mache, möchte ich sicherstellen, dass sie so ausgerichtet sind. Also werde ich mein Telefon benutzen, es hier ausrichten und meine Adresse verwenden, zum Beispiel eine Ausrichtung auf hier. Stellen Sie sicher, dass es 20 runter ist. Jetzt kann ich sie so gruppieren und sehen, was die Stapel Ufer zeigen. Ich denke, das ist in Ordnung. Wie Sie sehen können, wenn Sie so klicken, wird es in der Mitte positionieren. Ich werde versuchen, es zu überschreiben. In Milchherden ist das in Ordnung. So ist dieser Abschnitt jetzt abgeschlossen. Sieht in Ordnung aus. Und ich kann mich nicht um 0 anpassen, Qi verstecken es. Und im Grunde, was ich jetzt tun werde, kopieren Sie bitte alle diese Informationen und fügen Sie sie im Grunde in all diese anderen Informationen ein. Aber bevor ich das mache, was ich mit meiner Nav Unschärfe machen werde, werde ich es wieder zu einem bringen. Dann werde ich alles auswählen, außer der Nav Unschärfe, drücken Sie Kontrolle C. Gehen Sie zu meinen Zielen, Staat. Öffnen Sie sich. Sehen Sie hier, wo die Unschärfe jetzt ist. Ich werde mein primäres Navigationsgerät entfernen, Control V drücken, um alle meine Informationen einzufügen. Und ich werde einfach mein Ziel in diesem ersten Zustand zeigen, wie diese Milchherde. Jetzt gehe ich in den Winterstaat. Tun Sie das Gleiche. Also löschen Sie diesen, zeigen Sie alles andere. Und das erste, was ich tun werde, ist meinen Selektor zu verwenden. Bewegen Sie es hier, bis es sich mit dem Winter trifft. Bringen Sie einfach alles in so und Milchherde und stellen Sie sicher, dass alle 20 sind. Also lasst uns sie so auswählen. 20. Und bevor wir mit dem Winter fortfahren, Lassen Sie uns zu den Zielen gehen, öffnen Sie sie. So Winterkrankheit, individuelle Kreuzfahrten. Und übrigens halte ich einfach die Kontrolle, um sie alle so auszuwählen. Geh zurück in den Winter, Derek. Oh, es ist der ganze Winter ausgewählt und finden Sie einfach Ihren Winter. Hier ist es, und bringen Sie es zurück, so dass es zeigt. Also werde ich das Video hier pausieren, während ich den Rest von ihnen mache. Und ich werde zurückkommen und Ihnen zeigen wie wir hier nach oben ziehen und all diese anderen Abschnitte anpassen können. Und jetzt, da ich das alles fertig habe, lass mich dich durchführen, um zu sehen, wie es aussieht. Also hier haben wir die wichtigsten. Nun, dies ist der Standardstatus. Wir haben die Destinationen, offensichtlich die gleichen wie vorher. Wir haben den Winter, wir haben das Wellness, wir hören das Individuum. Also im Grunde alles, was ich in diesem Video erklärt habe, ging ich einfach voran und tat es. Eine letzte Sache, die ich erwähnen wollte, sind Animationen. Also, weil wir uns verändert haben, alles, die Größen ersetzt haben, haben wir alles aus dem Weg gebracht. Wir haben das Logo von der ursprünglichen SVG zu diesem B und G geändert, und auch innerhalb dieser Zustände, zum Beispiel für dieses Individuum, sagen wir, wir bewegen sie alle herum. Wir ändern die Kontakt-Position und den Abstand usw. All diese Animationen sind verschwunden. Wenn ich also auf den Prototyp klicke und Sie das nicht innerhalb des Standardstatus sehen können, können wir immer noch zu ihnen gehen. Wenn ich mich also in einem Vorschaumodus öffne und du siehst , dass das Vorschaufenster jetzt etwas kleiner ist als es war. Sie können sehen, dass der Hover-Effekt immer noch funktioniert. Aber zum Beispiel, als ich versuchte, hier zu klicken, bringt es uns zum ursprünglichen zweiten, zweiten Raum und zweiten Animation. Wie Sie sehen können, passt es nicht gut zu diesem ersten. Zuerst müsste ich also unsere Texte anpassen. So können Sie sehen, dass sich der Text hier bewegt. Also muss ich es in der Mitte positionieren, wie Sie wollen, genau hier und all diese Informationen andere Hälfte, um ein Animat wieder aufzunehmen, aber viel wichtiger für dieses Element an der Spitze, wenn ich auf Winter klicke, Sie können sehen, dass ich nirgendwo anders klicken kann. Das ist wirklich das Hauptproblem, dass Sie alle noch einmal animieren müssen, mit Ausnahme dieser Hover-Zustände, weil wir sie überhaupt nicht geändert haben. Sie sind, sie bleiben gleich und dieser Knopf bleibt gleich. Aber wie er sagte, werden wir alle noch einmal animieren müssen. Also im Grunde, um Ihre Zeit zu befreien, Wenn ich Satellit sagen kann, dass Sie zum Helden gehen und sie auswählen können. So kann der obere Abschnitt jetzt einen Prototyp verwenden und dann einfach auf einen von ihnen klicken und den Übergang sehen. Also im Grunde, weil wir überall den gleichen Übergang verwendet haben, tippen Sie automatisch animieren, erleichtern Sie 0,4 Sekunden. So können Sie das verwenden oder Sie können 0.6 verwenden. Es liegt an Ihnen, wie Sie sich darauf einstellen möchten. Aber im Grunde müssten Sie das tun. Jetzt werde ich das animieren und im nächsten Video wiederkommen. Aber für dieses Video möchte ich es nur auf einem Heldenbild beenden. Also möchte ich meine Hero-Text-Moschee und -Knopf benutzen, Control C drücken und ich benutze auch tatsächlich, lasst uns die Bearbeitung benutzen. Von der Heldenmaske bis zum letzten Bild Control-C. Springen Sie in das Bild auf Basis überall, alles oben. Dann entfernen Sie alles vom Schreibtisch, Textmaske unten so. Ich werde die Deckkraft dieses Bildes auf 0 senken. Das wird bei 100 sein. Also lassen Sie es zurück und sehen, wie es im Standardzustand aussieht. Weil ich mich nicht erinnere, ob es dieses Bild zu einem Bild drei war, wenn sie bei 100% im ersten Zustand waren. Also lassen Sie uns die Animation sehen. Ja. Also müssten wir in den Standardzustand gehen und sie auf 100 bringen, beide so. Und dann, als ich meinen Prototyp startete und hier klicke, können Sie sehen, dass diese Animation viel besser aussieht. Jetzt, da du das im Standardzustand gemacht hast, im zweiten Zustand, kann ich zu meinem Heldentext gehen und ich werde meine zweiten Texte für Paris so einbringen . Ich werde das hier so rausnehmen. Und jetzt kann ich alle diese Elemente auswählen, Control C, Sie springen in den Zielzustand, steuern V, und löschen Sie einfach alle von ihnen nach unten. Ich bringe das auf 0. Und das sollte bei 100 sein. Aber es war nicht aus irgendeinem Grund im zweiten Staat. Gehen wir zurück und reparieren es. Das sollte also bei 100 liegen, nur um Konsistenz willen. Und es sollte bei 100 sein. Das ist in Ordnung. Schließlich ändern wir diesen Text, so dass mehr Texte Nummer 3 vorhanden sind, genau hier herum, und bewegen Sie dann Text Nummer zwei aus dem Weg, so. Und das ist es im Grunde. Lassen Sie uns endlich noch einmal Preview drücken und sehen, wie all das aussieht. Also, wie die Macht funktioniert gut. Und jetzt können Sie sehen, dass all diese Bilder an Ort und Stelle bleiben, aber Sie können sehen, dass es bei diesem nicht funktioniert, also müssten wir es noch einmal animieren. Also im Standardzustand Prototyp, kann ich in meine Pfeile springen und sehen rechten Pfeil Tab Punkt ist jetzt einfach 0.6. Gehen wir also zu Bild Nummer zwei. Das ist also der knifflige Teil bei all diesen, weil wir ihre Plätze ändern, wir bewegen sie herum. Das ist das Problem mit ihnen. Also, wenn wir hier klicken, werden wir Auto-Animationen verwenden. Wir gehen zum Standardzustand Lockerung und 0,6 Sekunden. Und wir werden hier klicken und gehen Sie zum Bild 3, verwenden Sie die gleichen Einstellungen, und gehen Sie dann zu Bild Nummer drei Pfeile links. Und auf diesem gehen wir in den vorherigen Zustand, und das ist es im Grunde. Wie gesagt, es kann ein bisschen lästig sein, alle auf einmal zu animieren. Aber das ist das Hauptproblem, das ich mit Adobe XD im Allgemeinen habe, ist, weil, wenn Sie mit der Arbeit an diesen Animationen beginnen, anstatt sie zum Beispiel einzeln animieren zu lassen und diese Animationen dann überall dort zu behalten, wo Sie sie platzieren, Wie auch immer Sie sie Größe haben, wissen Sie, dass Sie alles auf einmal animieren müssen. Aber die gute Nachricht ist, dass das Team hart daran arbeitet , um diese Anpassungen für die zukünftigen Versionen Adobe XD vorzunehmen, damit wir unsere Geschwindigkeit noch mehr verbessern können und das nicht für alle tun müssen. Sie können sich also vorstellen, dass ich jetzt reingehen und all diese verschiedenen Zustände animieren werde, wie ich es in der Originalgröße getan habe. Aber in der Zukunft, hoffentlich wird es eine Zeit kommen, wo Sie, wo Sie alle von ihnen animieren wollen. Adobe XD behält diese Einstellungen weiterhin bei. Also sehe ich dich im nächsten Video. Und wie gesagt, ich werde fortfahren und alle von ihnen animieren, wie ich es in der ersten getan habe. Und im nächsten Video werden wir uns mit diesem unteren Navi beschäftigen. Also sehe ich dich dort. 38. Erstellen von Responsive Design 2: In Ordnung, jetzt, da ich diese und Emissionen erstellt habe, lassen Sie uns schnell überprüfen und sehen, wie es aussieht. Grundsätzlich genau das gleiche wie zuvor. Also alle diese anderen bleiben gleich und Sie können zwischen ihnen klicken und der Selektor wird sich ändern. Sie können auf Ihr Logo klicken, es wird wieder hier. Hover funktioniert. Und wie Sie sehen können, sobald Sie hier klicken, wird es Sie dorthin bringen. Konzentrieren wir uns jetzt auf Rookie auf diesen. Aber bevor wir es tun, möchte ich nur kurz etwas erwähnen. Ich habe keine Animation zwischen all diesen verschiedenen Seiten erstellt weil Sie nicht direkt von hier nach hier nach hier gehen können, weil ich sie für das Ende behalten möchte. Und ich möchte Ihnen das erklären, diese Verbindungen zwischen den Seiten, bevor wir tatsächlich mit dem Sharing-Teil dieser Klasse beginnen. Deshalb werden wir das für das Ende behalten. Und ich werde offensichtlich diese Seiten verbinden und zeigen alle Methoden, die Sie für Schulden verwenden können. Aber bevor wir weitermachen, lassen Sie uns jetzt an diesem Abschnitt genau hier arbeiten. Also in dieser unteren Navigation und noch eine Sache, weil diese Emissionen jetzt so eingebacken werden, die Holzarbeiten später, wenn wir das tatsächlich auf andere Größe skalieren. Also mach dir keine Sorgen darum zu sehr. Wie ich schon sagte, wir werden an diesem hier arbeiten. Und dafür, was ich eigentlich tun werde, ist für jeden von ihnen, außer für die Suche, werde ich diese Symbole loswerden, weil Symbole Platz nehmen. Also werde ich das loswerden. Und ich werde dies als 24 Beispiel positionieren. Und dann werde ich ihnen zwei Spalten in der Breite wie folgt machen. Ich werde meine Ziele BG erweitern und bringen Sie es hier Tiere, die auf meine Maske klicken und erweitert, um irgendwo hier herum, zum Beispiel. So wie das. Und dann tun wir dasselbe für die Verhaftung von ihnen. Also werde ich hier klicken, unseren Teiler öffnen und ihn zum Beispiel näher an so etwas bringen. Und hier haben wir es. Also, was ich tun werde, ist alles zu benutzen. Also im Grunde kann ich sogar die gleichen Moscheen benutzen. Drücken Sie Control C, springen Sie in mein Klicks Datum, öffnen Sie sich, Control-V, löschen Sie das alte und erweitern Sie einfach das neue nach unten. So kann ich es zum Beispiel hier erweitern. Und dann kann ich meine Maske hierher bringen. Und mal sehen, ob unsere Animationen funktionieren. Klicken Sie also zurück zur Standardeinstellung. Standardmäßig wird auf Klicken geklickt. So können Sie sehen, dass es auf diese Weise funktioniert , wenn Sie nicht zu viel mit Positionen herumlaufen. Wenn ich also direkt dort klicke, wird es es den ganzen Weg nach unten erweitern und es wird gut funktionieren. Und Sie können es immer noch lesen. Es steht in Destinationen, also denke ich, dass wir gut sind. Also werde ich das Video pausieren und den Rest reparieren und dann zurückkommen. Und jetzt, da ich diese großen behoben habe, wie Sie sehen können, habe ich die zwei Spaltenbreite für alle von ihnen gemacht nur die Maske geht ein wenig nach draußen, so dass der Schlagschatten zeigen kann. Lasst uns jetzt reparieren und Tode. Zunächst einmal, und bringen Sie es zurück hierher. Ich benutze diesen Button und machte es drei Spalten und ich wollte Ihnen diese Suche zeigen. Also werde ich die Suche bringen, die BG genau hier sind. Also zwei hier. Und ich werde das auch viel näher bringen. Also werde ich das Suchsymbol verwenden und nach Reisen suchen. Ich werde sicherstellen, dass es zum Beispiel 20 ist. Und dann bringen Sie das bisschen näher hierher, und bringen Sie dann unsere Kleidungs-Ikone hierher. Ich kann es auch zurückbringen, nur so dass Sie es irgendwo hier sehen können, zum Beispiel INT und dann auf 0 herunterbringen können. Das ist also unser Standardzustand, und ich werde einfach die Bearbeitung kopieren, die ich hier gemacht habe. Gehen Sie zu unserem angeklickten State-Kit-basiert direkt hier, und löschen Sie dann alle diese anderen. Also das erste, was wir natürlich tun werden, ist, dies zurück zu bringen eine durch das gedrehte. Es ist also so, wie es vorher war. Dieser Anstieg BG wird sich erweitern, um genau hier abzudecken. Und wir werden diese beiden einfach hierher und dann 22 hierher bewegen. Dann lassen Sie uns schnell überprüfen und sehen, ob es funktioniert. Das tut es. Und schließlich, lasst uns die Vorschau treffen und sehen, wie alles jetzt aussieht. So Destinationen. Und lassen Sie uns sehen, dass der Hintergrundschatten schön zeigt. Alles sieht gut aus. Suche es funktioniert, Es zeigt und schließlich Filter anwenden funktioniert, wie es sollte. Also, jetzt, da dieser obere Abschnitt abgeschlossen ist, Lasst uns weiter gehen und an diesem arbeiten, denn wie gesagt, diese Abschnitte am unteren Ende werden das, was am schwierigsten ist. Und vor allem lassen Sie es uns so ausrichten. Und sie werden sehr herausfordernd sein, denn offensichtlich haben Sie all diese Informationen im Inneren. Also zuerst, lassen Sie uns diese an der Spitze ausrichten. Also in diesen Abschnitten werden sechs Spalten breit sein. Mal sehen, wo es ist. Also 246, also müssen sie hier enden. Und deshalb müssen sie vielleicht etwas breiter sein. Also, was ich zuerst tun werde, ist mein Bild zuerst zu verwenden, stellen Sie sicher, dass es drei Spalten breit ist. Dann benutze alle meine Inhalte, meine Dosis, und stelle sicher, dass es genau hier ist. Und dann sehen wir, 1, 2, 3, 4, 5, 6. Also müssten wir es hier noch schneiden. Nehmen wir an, zum Beispiel, genießen Sie das schöne Ägypten so. Und dann können wir zum Beispiel hier reinspringen und das benutzen, es als Stapel positionieren. Und mal sehen, zum Beispiel, vielleicht kann ich sie alle in Aufheben der Gruppierung setzen und dann einen Stack verwenden, der so positioniert ist, und es funktioniert nicht so. Also im Grunde, was ich tun müsste, ist hier reinspringen und dann unseren Transport positionieren. Es kommt unten. Aber wie Sie sehen können, wird es mir nicht erlauben, dies zu tun. Es besteht also eine gute Chance, dass ich die Gruppierung aufheben und sie in die Mitte legen muss. Aber in einem Stapel und warum jetzt und positionieren Sie sie so. Dann springen Sie einfach nach innen, stellen Sie sicher, dass sie so ausgerichtet sind, und bewegen Sie sie hier, so dass sie mit der Kante ausgerichteten Position übereinstimmen. Hat diese Zeile genau hier, stellen Sie sicher, dass der Preis genau hier ist. Und dann werde ich das natürlich wieder hierher bringen und diesen BG zurück hierher bringen. Jetzt kann ich diese beiden bewegen, so positioniert und Trennwände bewegen sie hier an den Rand. Sehen Sie, wo wir sind. Und zum Beispiel kann ich sogar die Breite von ihnen reduzieren. Tun Sie so etwas, denn jetzt brauchen wir sie nicht so groß zu sein. Und natürlich kann ich diese untere Trennwand nach unten positionieren und diese Symbole bis zu 20 bewegen . Ich glaube nicht, dass wir sie viel mehr brauchen. Ich kann das entweder in positionieren, um 20 zu sein. Und c. Sie zeigen sich nicht, wie sie sollten. Also mal sehen, vielleicht können wir sie so reinbringen und sie dann zehn nach links verschieben und dann auf einen von ihnen klicken und ihn zurückbringen, auf einen anderen klicken. Also dieser untere. Es ist ziemlich schwierig, diese Trennwände auszuwählen, weil sie ziemlich klein sind. Und das ist es im Grunde. Also, was ich jetzt tun werde, ist, unsere Inhalte insgesamt anzupassen. Also lass es uns mit dem Wagen machen. Also lassen Sie uns sehen, vielleicht können wir die Höhe von 437 machen. Sehen Sie, wie das funktioniert. Ich denke, das funktioniert gut. Dann passen Sie einfach die Höhe unseres Bildes ein wenig an. Und lasst uns 40. Vielleicht können wir uns mit 20 und dann 20 runter beschäftigen. Das ist in Ordnung. Richten Sie das so aus. Und mal sehen, der Inhalt ist 20 von den Top 22 hier, 22 hier, also sieht alles gut aus. Abschließend kann ich zum Beispiel mein Bild einfach so anpassen. Und was ich als nächstes tun möchte, ist im Grunde alles auszuwählen. Kontrolle C. Gehe in den Horror-Zustand, kontrolliere V, füge alles ein. Einfach, Sie können fortfahren und den alten Inhalt löschen. Ich werde innen doppelklicken und einfach mein Bild so vergrößern. Und ich werde auch reinspringen und meine Erwachsenenmaske erweitern, um hier herum. Wie gesagt, ist dies das zeitaufwendigste an diesem Design. Weil Sie sich vorstellen können, dass, wenn wir nicht alle diese Änderungen hatten, all diese Hover-Effekte innerhalb von Hover-Effekten, all diese Schlagschatten ändern sich mit den Horacs-Zuständen, besonders hier. Wenn ich hier klicke, kannst du sehen, dass es um fünf Uhr ist, sollte es um acht sein. Wenn wir also kein komplexes Design wie dieses hätten, wäre es viel einfacher zu justieren. Also noch einmal, wenn ich auf diesem neuen Design nach unten scrolle, können Sie sehen, wie das aussieht, aber diese Wände sehen so aus. Also ein weiterer Teil, den Sie nehmen können, ist dieses genaue Design verwendet, drehen Sie es in den Stapel und dann positionieren Sie das Bild oben darauf. Aber nur Dan statt 3.52 zum Beispiel. Sie können diesen Ansatz tun, wenn Sie wollen, aber es liegt alles wirklich an Ihnen und wie Sie diese Dinge angehen möchten. Also für jetzt werde ich voran gehen und all diese mit denselben Techniken und gleichen Methoden ändern . Und diese gehen dann zu sechs Spalten genau hier. Also 12345 und dann sechs hier. So können Sie sehen, wie wir sie anpassen werden. Mal sehen 3, 4, 5, 6. Also sollte dieses Gericht genau hier enden. Also lass mich meinen Hintergrund und meinen Pfeil mitbringen. Also hier, lassen Sie uns noch einmal zählen. Also 123456, was in Ordnung ist. Und dann müsste ich meine Trennwände einbringen. Also mal sehen, ich kann das in zwei grob hierher bringen. Also lassen Sie uns mit 240 so gehen und verwenden Sie diese einfach auf 40 als auch. Und jetzt ist alles innerhalb unserer Inhalte korrekt ausgerichtet. Also, was ich tun würde, ist in den Horace-Zustand zu springen und das hier reinzubringen . Mal sehen. Also 123456 und dann gehen Sie in die Mitte, verwenden Sie unsere Trennwände und verwenden Sie einfach 40 so. Und das ist es im Grunde. Wie gesagt, das ist es für dieses Video. Ich springe voran und ändere all diese, denn wie gesagt, ich will euch nicht zu viel Länge langweilen, all diese Änderungen, aber wir werden immer noch die gleiche Distanz halten. Und weil wir in einem Stapel sind, wenn eine Show, dass, so werde ich alle diese auswählen. Sie können sehen, dass der Inhalt auf der Unterseite nach unten skaliert wird. Und das wollen wir damit erreichen. Also werde ich Sie im nächsten Video sehen, sobald ich diese fertig bin , und dann können wir weiter an den nächsten Abschnitten arbeiten. 39. Erstellen von Responsive Design 3: In Ordnung, Also jetzt habe ich diesen Abschnitt abgeschlossen ist. Lassen Sie mich Ihnen in der Vorschau zeigen, wie es aussieht. Also, wenn ich hier nach unten scrolle, können Sie im Grunde sehen, dass es genau so aussieht wie es vorher war. Also haben wir den Hintergrundschatten, wir haben Bilder, die hineinzoomen und wir haben diese Schaltfläche direkt hier mit dem Hover. Und ich habe auch die Breite dieser beiden Tasten angepasst. Also im Grunde habe ich dasselbe getan, wie ich es dir gezeigt habe, für diese erste Karte. Und jetzt gehen wir voran, weil wir dies abgeschlossen haben und Sie können die Breite dieses Videos anpassen, wenn Sie wollen. Aber für diese Größe lassen wir es einfach so. Lasst uns jetzt weitermachen und mit diesen Zielkarten umgehen. Also noch einmal, wie gesagt, diese Zielkarten werden sich an unser Layout anpassen. Also, wenn wir dort hineinzoomen. Also lasst uns einfach die Decks wirklich schnell anpassen. Stellen Sie sicher, dass es so in der Mitte ist. Und was wir mit den Städten machen werden, ist offensichtlich, wie ich schon sagte, ich werde einige Karten entfernen, weil wir sowieso alle Europa-Reisen Button unten haben , also können wir das tun. Also, was ich tun werde, ist sechs davon zu haben. Jetzt, da Benutzer klicken können, werden sie drei mal drei sehen. Also werde ich diese beiden hinten loswerden. Und ich werde auch in die afrikanischen Städte springen und diese beiden hier loswerden. Und ich werde auch nach Asien gehen, CTs, und die letzten beiden loswerden. Und endlich haben wir Amerika. Und ich werde das Gleiche tun, und ich mache das jetzt, nur damit ich es später nicht vergesse, denn manchmal haben wir all das, besonders wenn Sie einen engen Termin einhalten, kann es extrem schwierig sein. Also lassen Sie uns jetzt an einer europäischen Städte arbeiten. Also zuerst, wählen wir den Ordner aus und verschieben Sie ihn hier an Ort und Stelle. Ich werde auch unsere Scrollgruppe zwei hier anpassen. Also nur bis zum Rand unseres Gitters. Und im Grunde, was ich tun werde, ist, jede Karte auf Freiheit für Spalten in der Breite anzupassen. Was ich also tun kann, ist das einfach zu tun und es wird sich gut anpassen. Das einzige, was nicht funktioniert, und Sie können es einfach ein bisschen besser ausrichten, ist zum Beispiel, Sie verwenden 60 genau hier. Und dann können wir, zum Beispiel, positionieren oder Teiler hier, so. Und zum Beispiel, Laura, das auf 340, vielleicht. Ich denke, das wird gut funktionieren. Aber der Punkt ist, all diesen Inhalt auf der linken Seite auszurichten und stellen Sie sicher, dass Sie es anpassen , zum Beispiel, 10 Pixel nach links, und dann die Größe hier in der Mitte anpassen, solide C , hier können wir etwas wie 5000 denken, Ja, 50 sieht gut aus. Und was wir tun können, ist einfach diesen ersten Teiler hier auszurichten. Es ist 32018 Größe. Und dann können wir dasselbe für diese zweite tun. Also 328. Also haben wir 53, 28. Das ist es, was wir im zweiten Zustand tun werden. Also geh so. Also lass uns mal sehen. Ich werde einziehen und diese beiden und das Bild anpassen. So wie so. Also mal sehen, das ist in Ordnung. Also lasst uns reinspringen und das benutzen. Also können 328 und ich hier reinspringen. Energie muss auf 15 gehen. Und bevor wir noch weiter trauern, springen wir hinein und sehen, ob das unsere Animation durcheinander gebracht hat. Hat es nicht. Was großartig ist. Und deshalb sage ich immer, immer überprüfen Sie Ihre Animationen und sehen Sie, ob alles so funktioniert, wie es zwischen Ihren Staaten sein sollte. Also lasst uns jetzt weitermachen und dasselbe für London anpassen. Also nochmals, direkt hier zu springen. Und ich werde in diesen einspringen und ihn hierher bringen. Also für die London, ich werde diese beiden, sorry, Ende Bild selbst angepasst an hier verwenden . Diese werden gleich bleiben. Lasst uns schnell nach Paris gehen. Mittlere Trennwand ist 328. Also werde ich die 1 zuerst benutzen. Also 3, 28, so. Und mal sehen, ich kann das auch auf 50 einstellen. Meines Dads. Das ist großartig. Und wir können zu unserem Standardzustand und Ziel, Pfeil und Bild springen. Richten Sie es hier aus, gehen Sie in die Mitte. Das wird 50 sein. Und diese beiden werden 320, acht sein, was großartig ist. Und nun endlich, passen wir das letzte für Rom an. Ich werde das Gleiche für hier tun. Und übrigens, ich kann einfach in den Horror springen, wenn ich das tun will. Aber was ich wirklich mag, ist, zuerst Anpassungen im Standardzustand für alle von ihnen vorzunehmen, dann in den Terrorstaat zu springen und sie dann anzupassen. Wagen Sie sich. Wir können hier auch 50 benutzen, weil es gut funktioniert und dann ins Pferdehaus springen wird. Und mal sehen. Also hier können wir sie auf 328 einstellen. Klicken Sie hier, stellen Sie sicher, dass es 50. Und weil wir diese im Voraus angepasst haben, wird es gut funktionieren. Bevor wir also mit diesen anderen fortfahren, möchte ich einfach schnell schweben und sehen, ob sie alle so funktionieren, wie sie sollten. Das funktioniert, das funktioniert, und das funktioniert, und sie sehen wirklich toll aus. Aber wenn Sie hier klicken, wird es Sie zum vorherigen Abschnitt führen. Das ist also nicht das, was wir tun wollen. Was wir eigentlich tun wollen, ist, den Abstand für alle korrekt anzupassen. Also, was ich tun werde, ist DC-3 hier zu bewegen. Also, bis sie sich ausrichten und dann diese drei verstecken. Und bevor ich weiter gehe, kann ich zum Beispiel meine Pfeile einfach an Ort und Stelle dorthin bewegen. Und ich kann meinen Knopf auch bewegen und sicherstellen, dass er zum Beispiel vier Spalten breit ist. Ich kann es hier anpassen und innerhalb des Horrorstatus, es funktioniert großartig. Und jetzt kann ich mit diesen drei Karten umgehen. Also in diesem Video werde ich alle von ihnen reparieren und dann werde ich zurückgehen und alle anpassen und dann zurückkommen und dir zeigen, wie sie alle aussehen, damit wir mit diesen anderen Abschnitten weitermachen können. Und wie ich schon oft sagte, liegt es nur daran, dass ich nicht zu viel Zeit verschwenden will, denn sonst könnte dieser Kurs so etwas wie, ich weiß nicht, zehn Stunden lang oder so etwas sein. Also lasst uns hier 50 versuchen. Wie Sie sehen können, weil wir 10 Tage haben, funktioniert es nicht so gut. Also lasst uns versuchen 40. Ich denke, 40 funktionieren besser. Und wir können immer noch mit 328, vier hier tun. Denk daran, es ist 40. Insofern des Horror-Zustandes können wir diese so zurückbringen. Gehen zitiert eine Mühle, das wird 240 sein. Und diese beiden sind 328. Was großartig funktioniert. Gehen wir zurück zum Standardzustand, bringen Sie diesen hier zurück. So wie so. Ich werde diese drei reinbringen, wie in der Mitte. Gehen wir mit 328. Und hier, weil wir das Gleiche haben, werden wir 40 oder sehr Erde benutzen. Wir können hier 50 benutzen, weil wir nur eine in den Tagen haben. Oder wenn Sie die Konsistenz behalten möchten, können Sie es zum Beispiel tun, 40 für diese 44 Tage. Es liegt also wirklich an dir, was du mit ihnen machen willst. Nun, da das abgeschlossen ist, wir weiter, um zu schweben und bringen wir das hier zurück. Und es sind wieder 320 acht. Und diese Trennwände sind im Grunde die größte Aufgabe hier. Es liegt also wirklich alles an dir. Wenn Sie den Teiler verwenden möchten, wenn Sie dies nicht tun, aber wenn Sie dies tun, denken Sie daran, dass sie eine kleine lästige Aufgabe sein können, anzupassen. Im Gegensatz zu all diesen anderen Inhalten, die viel einfacher zu justieren ist, indem Sie dies einfach tun. Wenn ich zum Beispiel mehr von diesen Trennwänden, mehr als von dieser Seite, können Sie sehen, dass sie sich den ganzen Weg bewegen und sie sich nicht als das Hemd anpassen, das heißt, ich denke, ein großes Problem in XD, aber sie werden es in zukünftigen Updates beheben. Und lassen Sie uns endlich im Horrorzustand sehen, lassen Sie uns das beenden, damit ich Ihnen zeigen kann, wie man sie auf dem Gitter ausrichtet. Also 328 so. Und mal sehen, hier können wir 50 benutzen und es einen Tag nennen und sagen, dass wir jetzt alles abgeschlossen haben. Jetzt endlich haben wir 30 Abstände zwischen jedem von ihnen. Also werde ich diese auswählen, sie so verschieben. Dann bringe ich die zurück. Und für diese, ich werde ihn einfach auf 30 bewegen. Ich werde diese Scroll-Gruppe anpassen, um hierher zu kommen. Und was ich auch tun werde, ist im Grunde zu springen und ich kann einfach diese ganze Gruppe benutzen , weil wir die beiden Staaten haben, wenn Sie sich erinnern. Was ich also tun kann, ist und direkt hier springen, alle meine Informationen auswählen und dann zu meinem angeklickten Zustand springen. Kit-basierte Steuerung V, und entfernen Sie dann alle von ihnen so. Und dann innerhalb unserer Städte, was ich tun kann, ist, sie einfach in Richtung Rand zu schieben. So wie das, so. Und mal sehen, ob das richtig ist. Das ist es. Also, was Sie auch tun können, wenn Sie wollen, können Sie diese Zeile nur ein wenig anpassen, wenn Sie wollen. Aber ich glaube nicht, dass es notwendig ist, weil diese Seite sowieso flach ist. Wenn wir also jetzt zwischen unserem Standardzustand und unserem angeklickten Zustand wechseln, können Sie sehen, wie das aussieht. Lassen Sie uns also schnell zur Vorschau springen und sehen, ob die Animation funktioniert. Hier sind wir. Also sieht alles gut aus. Wenn ich schwebe und klicke, wird es zu übersetzen, um hier wird schön und sauber aussehen. Und wenn ich zurückgehe, müsste ich klicken und einen Übergang in diesem Zustand erstellen. Gehen wir also zum angeklickten Zustand. Aber eigentlich, bevor wir tun, lassen Sie uns schnell sehen, so europäische Ziele Pfeile, rechts, Schritt C, was wir verwenden. Tippen Sie also auf Auto, animieren Sie die Ziele schnell und einfach. Jetzt 0.6. So können wir gehen, um Zustand klicken. Suchen Sie unsere Pfeile linken Schrittpunkt, klicken Sie rechts Dara, tippen Sie auf Autonomie, gehen Sie zum Standardzustand, erleichtern Sie sich und Nullpunkt 86. Also, jetzt endlich, bevor wir dieses Video beenden, Lassen Sie uns eine Vorschau noch einmal, sehen, wie es aussieht. Also werde ich nach Europa gehen. Genau da. Horror, klicken Sie. Es funktioniert. Howard Klick es funktioniert. Und offensichtlich funktioniert diese Schriftrolle nicht. Mal sehen, warum die Designstädte und das funktionieren sollten. Ich verstehe es nicht. Warum es nicht funktioniert. Hier ist es. Wie Sie sehen können, gibt es manchmal einige Fehler mit Adobe XD, aber im Grunde funktioniert es. Und wenn ich hier klicke, können wir es auch zurückbringen. Also Derek, oh es, und auch all diese schwebenden Effekte der Arbeit, wie sie sollten. Unsere Taste funktioniert wie es sollte, und alles ist so verbunden. Und auch dieser Text zwischen Ihrem Staat bleibt an der Spitze, so sieht es schön und sauber aus. Sie können auch darüber nachdenken, die Höhe des Abschnitts anzupassen, so dass Sie die Höhe der Karten anpassen können, wenn Sie möchten. Sie können dies einfach tun, indem Sie die Höhe dieses Bildes anpassen und dann die Höhe aller dieser Abschnitte anpassen. Wenn ich in Paris gehe, zum Beispiel, Nehmen wir an, dass, wenn Sie das tun, Sie können einfach die Höhe aller dieser anderen Abschnitte anpassen, wenn Sie möchten. Sie können sie auch in eine Gruppe einfügen, den Stapel verwenden und dann, wenn Sie das anpassen, wird es automatisch angepasst. sind also nur einige der Optionen, die Sie tun können und Sie verwenden können. Aber ich werde nicht, ich denke, es sieht gut aus, wie es sollte genau hier. Wie ich schon sagte, was ich jetzt tun werde, ist voran zu gehen und an diesen drei zu arbeiten. Also Afrika, Asien und Amerika. Und dann werde ich zurückkommen und Ihnen die Ergebnisse zeigen. Und dann werden wir an all diesen anderen Abschnitten unserer Seite arbeiten. 40. Erstellen von Responsive Design 4: Okay, jetzt, da ich all diese Änderungen vorgenommen habe, lass mich dich schnell durchführen und dir zeigen, wie sie aussehen. Also im Grunde das gleiche wie in all diesen anderen Layouts und das gleiche, wie wir es hier getan haben. Ich habe genau das Gleiche gemacht und genau die Stapes, gleichen Schritte für alle. Ich wollte dich nur nicht mit Details langweilen. Nun, lassen Sie uns an diesem Abschnitt arbeiten, die buchen Sie Ihre Traumreise und ging, um es genau hier zu positionieren. Und mal sehen, vielleicht machen wir den Weg. Also werde ich mein Bild hier positionieren und dann zwischen den Abschnitten springen. Und mal sehen, ich kann sogar die Größe meines Bildes reduzieren. Breite, zum Beispiel, sehen, wie das aussieht, und dann kann ich die Änderungen hier anwenden. Mal sehen, ob ich beide auswähle. Und schrumpfen Sie einfach den Begriff wie diesen. Mal sehen, vielleicht zwei für so etwas. Und dann kann ich sie zurückbringen und Position sehen, diesen Inhalt hier positionieren. Und dann schauen wir mal. Bringen Sie das Bild in so etwas wie vier Spalten breit vielleicht. Bis NYC. Dies eigentlich, lassen Sie uns ein wenig näher zoomen, nur so dass wir alle diese Details fein abstimmen können , bevor wir tatsächlich weitermachen und die Größe reduzieren. Jetzt können wir hineinspringen, beide auswählen und den Bedarf einfach verkleinern. Ich doppelklicken auf mein Bild an jeder Position hier. Und deshalb haben wir all diese Inhalte wie Redo hier. Das nächste, was ich tun werde, ist tatsächlich klicken Sie hier. Ich werde sicherstellen, dass es automatische Höhe ist, weil wir es später skalieren werden. Ich werde hier klicken. Stellen Sie sicher, dass dies auch eine automatische Höhe ist, nur weil wir diesen Text später kopieren werden, verschieben Sie ihn um alle diese anderen Größen. Und deshalb möchte ich es so erforschen, und ich möchte es so halten. Wie Sie sehen können, hält Stack immer noch den Abstand von 150 zwischen allen unseren Abschnitten. Und wir können es dort behalten, oder wir können es später ändern. Es hängt alles davon ab, was wir tun wollen. Gehen wir also zu unseren Top-Destinationen. Ich werde es hier ausrichten. Und im Grunde werde ich dasselbe tun wie mit all diesen Karten. Zunächst einmal bringen wir die Pfeile und positioniert hier herum. Also sind sie da. Und im Grunde werde ich dasselbe tun. Also zuerst, für die Destinationen, werde ich es hierher bringen. Jetzt sehen wir, ob es an unserem Gitter ausgerichtet ist. Das tut es. Also zuerst, denn wieder haben wir drei Karten, können wir sie so einstellen, dass sie vier Spalten breit sind. Also werde ich ins Innere dieses springen und wir können es so einstellen, dass es hier so vier Spalten breit ist. Und ich denke, die Texte, die Sie hier sehen keine Rolle, solange sie verständlich und lesbar sind. So können Sie von hier aus springen und diese so anpassen, wie Sie wollen. Also mal sehen, vielleicht kann ich es hier anpassen. Ich könnte das tun. Es spielt keine Rolle, solange es Sinn macht. Also mal sehen. Wir werden vier Textzeilen in der Höhe halten. Was ich also auch tun kann, ist, den Inhalt von hier zu verwenden, also Control C. Und im Grunde das einzige, was wir hier gemacht haben, was anders ist, ist in diesem Hintergrundschatten. Also werde ich hier gehen, hier klicken und dann acht für den Hintergrund flach verwenden. Und ich werde auch doppelklicken und dieses Bild in nur ein wenig zu hier vergrößern. Jetzt, da das abgeschlossen ist, kann ich in den Standardzustand zurückkehren und diese beiden einbringen. Also, wie Sie sagten, vier Säulen breit. Also genau hier, stellen Sie sicher, dass es Sinn macht. Das tut es. Und ich kann auch gehen, um zu schweben, weil es keine Änderungen erfordert. Und Sie können sehen, dass wir immer noch diese beiden Staaten haben. Und Text ist vier Zeilen in der Höhe. Also kann ich zurück zu diesem hier. Und Sie können mit einigen dieser Elemente sehen, es ist viel einfacher zu justieren, weil sie alle diesen Raum natürlich anpassen und füllen. Jetzt werde ich dasselbe tun, wie ich es mit den vorherigen gemacht habe. Also werde ich diese Position genau hier nutzen. Und ich werde an mehr arbeiten. Also Michelle, und stellen Sie sicher, dass es hier vier Säulen breit ist, sofort haben wir das Problem. Also, was ich tun werde, ist, das zu benutzen. So St genauso wie eine Abkürzung zum ursprünglichen Namen. Also jeder ist immer noch weiß, was es ist, aber in sagt nur Pestis statt des vollständigen Namens. Also dieser Derek raus. Und ich gehe zurück zur Standardstatusposition hier. Und für ein Sydney werde ich sicherstellen, dass es vier Säulen so breit sind. Gehen Sie zu Horace Date, stellen Sie sicher, dass es vier Spalten breit ist. Und Sie können sehen, wenn Sie mit diesen einfachen Elementen entwerfen, zum Beispiel ohne Trennwände und ohne all diese komplexen Animationen, ist es wirklich ganz einfach, dieses Ding zu tun. So, wie Sie sehen können, ist es wirklich ziemlich entspannend, um dies zu tun und wirklich ganz einfach. Also endlich, was wir tun werden, ist, sie so aus dem Weg zu bringen und all diese Typen reinzubringen. Und dann auf 30 neu positionieren, stellen Sie sicher, dass es hier sein sollte. Und dann schien einfach wie mit anderen, wähle deinen Inhalt aus, kopiere ihn, gehe zum geklickten Zustand, basierte ihn hier und lösche dann den alten Inhalt. Und das einzige, was ich hier machen möchte zwei meine Ziele und einfach die Ziele hier zu bewegen. Gehen Sie auch zu Prototyp, gehen Sie zwei Pfeile, einen linken Tab-Punkt klicken Sie darauf, weil wir zurück zu Auto animieren wollen, wählen Sie den Standardzustand, einfach in unserem 0.6. Also, das wird die gleiche Hand bleiben, gehen Sie zurück in den Standardzustand, und da haben Sie es. Gehen wir nun zu diesem Abschnitt über, der Zeugnisse ist. Jetzt in unseren Zeugnissen möchte ich zu unseren Zeugnissen selbst gehen. Denn du siehst, dass dieser Hintergrund, wenn ich dir zeige, wenn ich hier auf meine Karte klicke, nicht den ganzen Weg nach hier geht, was ich wirklich möchte, dass er geht und erweitert. Also, was ich tun werde, ist, diesen Text zu kopieren, es Kontrolle C. Dann heben Sie die Gruppierung auf. Go Control G noch einmal und basiert in, und ich werde den Stack verwenden. Was ich also innerhalb des Stapels tun werde, ist, dass ich einfach diese Kartenbreite anpassen werde . Also werde ich es hier anpassen. Also Breite davon, so 11, 12. Und dann werde ich in die zweite springen. Basierend auf Schuldenwert. Und Sie können sehen, dass sich der Stapel automatisch entsprechend anpassen wird. Also werde ich es dort einfügen. Und ich werde das Gleiche dafür tun. Also, was wir jetzt tun können, ist entweder die gleichen Änderungen in allen von ihnen zu tun, wie ich es tun werde. Oder Sie können einfach kopieren und einfügen Domain, wenn Sie möchten. Also, was ich tun werde, ist die gleichen zu benutzen. Außer zum Beispiel für den Helden oder das Wissen. Lasst uns alle verwirren. Wie Sie sehen können, hat es sie hier auf eine nette Art und Weise organisiert. Also lassen Sie uns Zeugnisse sehen. Wir müssten das leider noch einmal tun, also heben Sie die Gruppierung auf, Sie können die Qualitätsaussagen von Control G treffen. Mein Dad. Und wir werden die gleiche Entfernung einschließen. Aber fangen wir mit einem Zeugenwerkzeug an, denn es ist dieses. Also werde ich es so einfügen. Ich werde das Gleiche bei diesem ersten machen. Habe ich. Und mal sehen, ob wir zu unserem Standardzustand zurückkehren, zu Referenzen gehen und sehen, dass die Entfernung von 60 ist. Das ist also die Entfernung, die wir für diesen hier benutzen werden. Also Zeugnisse. Also stapel, ich werde 60 verwenden, bezweifle ich. Und dann, was ich tun werde, ist, sie einfach alle zu schieben, so dass dieser zweite den Raum schön füllt. Versuchen wir es so. Ich habe es so und jetzt, wo wir das haben, lassen Sie mich hier reinspringen, kopieren Sie diesen Wert. Also sind wir hier. Und jetzt gehen wir zur nächsten Wache. Also werden wir das Gleiche dafür tun. Ich füge es so ein. Und schließlich, tun Sie das gleiche dafür. Also kleben Sie es hier rein. Nun, was ich tun kann, um diese Art von Verwirrung zu vermeiden, ist, einfach ein Kontroll-C im Testimonial Abschnitt zu verwenden und zu Testimonial Nummer 3 zu gehen, entfernen Sie dieses, fügen Sie es hier ein, und ich kann sie einfach so anpassen, dass ich in dieses passt. Und das wird uns vermeiden, Animation für den Text zu erstellen, was im Grunde ist. Die anspruchsvollsten von ihnen alle in diesem speziellen Abschnitt. Und geh zurück zu hier, lösche diesen. Control V positionieren Sie es hier oben. Denn noch einmal müssen Sie das für die Autoanimate Sakes tun. So muss es gleich und Schmutz neu positionieren und sehen, wo es ist. Ich muss es noch ein bisschen nach hier schieben. Was ich daran nicht wirklich mag, sind die Pfeile, also besteuere ich das gerne. Ich denke, es ist gut. Aber für die Pfeile, Gehen wir zurück zum Standardzustand. Arbeiten wir dort an ihnen. Also, was ich tun werde, ist, sie einfach hier zu positionieren und Control C zu drücken und in den zweiten Zustand zu gehen, Kontrolle V. Und wenn man sie nach unten positioniert, lösche die alten. Kontrolle V. In diesem, löschen Sie die alten und bewegen Sie sich einfach in neue nach unten. Und schließlich, Staat Nummer vier, werde ich dasselbe tun. Er hat ihn also hierher gebracht. Ich habe die alten entfernt, Milchherde. Und jetzt lassen Sie uns schnell an unserer Animation arbeiten. So Prototyp, wie Sie wissen, haben wir hier nur ein D's. Also auf dem rechten Pfeil, wir haben einfach jetzt 0.6. Das ist es, was wir für alle schaffen werden. Also Zeugnis, um Ihre Pfeile zu finden, linker Schrittpunkt wird uns in den Standardzustand bringen, rechts. Tab Point wird uns zu Zeugnis 3 bringen. Mehr abgenutzt, um Zeugnis drei werden unsere Pfeile finden. Hier sind wir. Klicken Sie hier. Sie werden zur Zeugenaussage gehen, das wird uns zum Zeugnis 4 bringen. Und schließlich zum letzten gehen. Und in diesem letzten werden wir linke Endpunkte verwenden, um zum vorherigen zu gehen, was Zeugnis drei sein wird. Und da haben wir es. Bevor wir weitergehen, möchte ich nur schnell überprüfen und sehen, ob wir all diese und Emissionen haben, oder? Also fangen wir mit diesem an. Also haben wir, wie haben wir alles, was großartig ist, und es funktioniert, wie es Hemd ist. Wirklich zufrieden damit. Also mal sehen, wir haben das hier im Schweben gelassen, also werden wir das reparieren. Und das funktioniert so, wie es sollte, also sieht alles gut aus. Und schließlich schauen wir uns diese Zeugnisse an. Und sie sehen gut aus. Gehen wir zurück, sehen für die Zeilen so 32. Und schließlich eine, was in Ordnung ist. Also lasst uns das schnell beheben. Wie gesagt, wir haben die Toskana hier verlassen. Also Destinationen, Toskana, wir haben es in den Horrorstaaten gelassen. Klicken Sie einfach auf den Standardstatus und ich kann eine schnelle Überprüfung durchführen und sehen, ob ich einen von ihnen verlassen habe und sie sind auch keine. Und schließlich müssen wir zu den angeklickten State Destinationen gehen. Und mal sehen, die Malediven sind in der Standardeinstellung. Standardwert. Und Sie können sehen, dass die Toskana auch hier im Schrecken ist. Sie müssen es also in beiden Zuständen ändern, damit Sie jede Art von vermeiden können. Verwirrung und jede Art von Störungen in der Zukunft. Mal sehen, was wir haben. Wir haben alle diese Abschnitte abgeschlossen. Lasst uns jetzt zur Disziplin übergehen. Und was ich im Grunde tun werde, ist das gleiche für Reisekategorien zu tun , wie wir es für all diese anderen getan haben. Ich werde sie einfach anpassen und sicherstellen, dass sie sechs Spalten breit sind. Und ging zu NIJ Dares, lassen Sie uns 1, 2, 3, 4, 5, 6. Also noch eins. 23456. Das ist in Ordnung. Und ich werde das hier hier verschieben und mich an hier anpassen. Im Grunde, wie Sie sehen können, ist das einzige, was tatsächlich anpassen wird, die Bildbreite, so. Und lassen Sie uns schnell den Hover für diese machen. Also werde ich sie auswählen. Stellen Sie sicher, dass sie eine Sechs sind. Und ich werde sicherstellen, dass ich in allen in den Standardzustand zurückkehre. So wie so. So funktioniert gut, wir haben die Partner beendet, und jetzt lassen Sie uns mit diesem umgehen, so dass wir die gleichen Dimensionen wie vorher verwenden können. Also kann ich hier gehen und sehen, dass mein Bild 514 in der Breite ist. Also lassen Sie uns die gleichen Einstellungen für diesen Abschnitt direkt hier verwenden. So Bild, ich kann mit 514 gehen. Irgendetwas hat dort nicht funktioniert. Mal sehen. Vielleicht können wir das auch manuell machen. Also, mal sehen, vier von ihnen so. Ich denke, das ist in Ordnung. Und vielleicht können wir das sogar so anpassen, dass es sich mit dieser Rasterlinie ausrichtet, einem See, der genau hier ist. Lassen Sie mich nachsehen. Und das ist großartig. Und eine letzte Sache, die ich vergessen habe, für diese Abschnitte zu tun, ist, die Tasten anzupassen. So können Sie in diesen sehen, die Dinge bewegen sich viel schneller. Lassen Sie uns mit diesem umgehen. Ich werde hier klicken und nur meinen Knopf dort, wir haben es. Und im Grunde schuldet es für diese Abschnitte. Wie ich bereits sagte, werden einige von ihnen viel einfacher sein. Einige von ihnen wie dieser wird viel schwieriger. Aber bevor wir zu diesem übergehen, möchte ich auf meine Zeichenfläche doppelklicken, die ganz nach unten erweitert ist, damit ich an meiner Fußzeile arbeiten kann. Lassen Sie mich zunächst diese beiden anpassen. Also werde ich in diesem Bild zu tun sieht gut aus. Und beschäftigen wir uns jetzt mit der Fußzeileninfo selbst. Lassen Sie es uns zuerst so an unserem Raster ausrichten. Ich werde mein Logo verwenden, wenn ich kann, und es in der Mitte meiner Kunsttafel positionieren. Ich weiß nicht, warum ich das nicht tun darf. Also lasst uns ein Rechteck verwenden. Ich werde hier ein Rechteck benutzen. Aber bevor ich es tue, lassen Sie uns schnell den Abstand zwischen sehen. Es sind also 100. Okay? Also lasst uns ein Rechteck verwenden. Wirklich schnell. Wählen Sie und ein Logo. Stellen Sie sicher, dass das Logo in der Mitte oder ein Verschieben unseres Rechtecks ist. Und jetzt für die Fußzeile Info, wir könnten es auf 100 von oben positionieren. So wie das. Also ist es jetzt bei 100. Und lasst uns jetzt mit dem Hauptnav befassen. So wie Sie sich erinnern, haben wir das alles mit Absicht gemacht. Also, was ich tun kann, ist vielleicht, sie am Gitter des Abstands von zwei auszurichten, wie es tut. Und so. Dann kann ich dasselbe für diese tun, diese. Also mal sehen, vielleicht kann ich es hier ausrichten und dann dasselbe tun für das, das und das. Und vielleicht kann ich es sogar hier erhöhen und vielleicht das hier setzen und sehen, was wir hier tun können. Vielleicht kann das hier bleiben und dort bleiben. So ist es schön und gleichmäßig verteilt. Also, was ich als nächstes tun werde, diese nahen, diese beiden. Ich werde in meine Divider von Bereichen springen hier ist einfach bringen Sie es hier, schließen Sie dies und arbeiten Sie dann auf meinem Boden erzwungen. Also, was ich hier tun werde, ist, dass zuerst, reduzieren Sie den Abstand viel wie Schmutz. Und dann zum Beispiel kann ich diese Begriffe vielleicht nennen. Mal sehen. Vielleicht können wir so daran arbeiten. Also mal sehen, genau da. Ich versuche nur darüber nachzudenken, wie wir das anpassen können. Also lasst uns tatsächlich hier klicken und den gleichen Abstand verwenden, sagen wir 40. Oder vielleicht etwas Größeres. Also vielleicht 80. Katie funktioniert besser. Also, jetzt lasst es uns aus dem Weg nach hier ziehen. Und da haben wir es. Wir haben unsere Fußzeile abgeschlossen. Nun, das letzte, was ich tun möchte, ist hier doppelklicken und es unten schließen. Und jetzt können wir weitermachen und an diesem Abschnitt direkt hier für das Q&A arbeiten. Also das erste, was ich tun werde, ist, es hier zu verschieben und dann muss ich alle von ihnen anpassen, um alle meine Informationen darin passen zu können. Aber damit werde ich mich jetzt nicht beschäftigen. Ich werde etwas anderes tun. Ich werde meinen Stapel tatsächlich benutzen, ihn so umdrehen. Und dann werde ich den gesamten Abschnitt in der zentralisierten zu positionieren weiß, dass ich sicher bin, dass meine Daten in der Mitte sind, ungefähr hier. Und ich werde als nächstes tun, ist sicherzustellen, dass alle diese zentriert sind. Ich werde sicherstellen, dass meine beiden Texte, unser Zentrum so ausgerichtet sind. Und ich werde auch sicherstellen, dass ich meinen Text in diesen Text umwandle , damit ich ihn erweitern und den Rest meines Raumes so ausfüllen kann. Dann gehe ich rein und passe mich an. So wie so. Wie gesagt, das sind diese langweiligen Bits in dieser ersten Stufe. Aber später, wenn wir auf andere Größen gehen, wird viel einfacher zu justieren sein, weil es geht, um alle von ihnen so zu halten, können Sie sogar dies in einer Zeile tun, wenn Sie wollen, aber ich werde es so halten. Ich meine, mal sehen. Vielleicht können wir es bei 60 behalten. Ich denke, das wird gut. Lassen Sie uns endlich versuchen, es jetzt anzupassen und sehen, ob es ja ist, ich denke, es wird gut. Siehe Wagen und Milchherde. Und schließlich, lasst uns an diesem Knopf arbeiten. Lassen Sie es uns so positionieren. Und dann wie diese Gewohnheit wagen. Und schließlich, lassen Sie uns damit umgehen. Ich werde es nicht zu sehr für uns alle ändern. Ich werde es zum Beispiel in 100 bringen. Und dann werde ich es einfach zentrieren, weil ich nicht denke, dass es notwendig ist es links und rechts oder was auch immer ist und es noch besser zentrieren kann, was ich tun kann, ist das zentrierte zu verwenden. Also werden wir sowieso die 100 der Distanz benutzen. Stellen Sie sicher, dass es in einem Zentrum ist. Entfernen Sie unser Rechteck wie folgt, und bewegen Sie es dann schließlich nach unten. Also mal sehen, ich kann hier reinspringen und drucken 100 eingeben, so, und da haben wir es. Eine letzte Sache, die ich tun werde, ist, das nach unten zu bringen. Aber bevor ich mich bewegen, Lassen Sie uns schnell überprüfen, ob es funktioniert. Es sollte funktionieren, weil wir gerade die Plätze gewechselt haben. Also mal sehen, es funktioniert und es ist großartig, weil es den Inhalt nach unten schiebt, was wir in erster Linie wollten. Jetzt merke ich hier ein Problem. Sie können sehen, dass in diesem Feld nicht den ganzen Weg zur Linie geht. Also werde ich den gesamten Eingang 2 hier verschieben und sehen, was wir als nächstes tun müssen. Also Texteingabe, ich werde dies einfach verschieben, um hier aufzurichten. Und jetzt haben wir es an Ort und Stelle, weil ich versehentlich verschoben habe, wahrscheinlich vorher. Also werde ich das einfach ausdehnen, es unten schließen, wie in Milchkuh es, wir haben unsere komplette Seite. Nun, wenn Sie nicht wollen, dass dieser Abstand so ist, weil wir diese Summe haben, so viel Platz hier. Sobald das alles geschlossen ist, können Sie es zum Beispiel auf 100 bringen, wenn Sie möchten. Aber ich werde mich nicht damit beschäftigen, denn wie er sagte, ich werde es lieber mögen, dass alles konsequent und kohärent aussieht und dann den Platz hier ändert. Und Derrida hat ich 150 für alle benutzt. Wie gesagt, Sie können tun, was Sie wollen, können Sie verwenden, was Sie wollen. Und das ist es im Grunde für diese Größe. Im nächsten Video werden wir zur nächsten Größe bewegen. Ich werde Ihnen zeigen, wie der gesamte Prozess aussehen wird. Es wird genau das Gleiche sein wie alles, was ich dir gezeigt habe. Dass sich die Dinge tatsächlich ändern und vorwärts bewegen, wenn wir auf Tablet-Größe gehen. Das ist also das Wichtigste in diesem Bereich. Und dann schließlich werden wir meistens für eine mobile Größe angepasst. Und das ist, wo es am meisten anders aussehen wird als all diese anderen Größen. Wie gesagt, ich sehe dich im nächsten Video, wo wir an dieser nächsten Größe arbeiten werden. 41. Ein Responsive Design erstellen: Gehen wir nun zu dieser nächsten Größe. Und diese Größe wird tatsächlich ein paar Änderungen enthalten. Es wird nichts zu Großes wie es sein. Es wird hier für die Tablet-Größe und vor allem für die mobile Größe sein. Weil, wie gesagt, wir werden die meisten dieser Komponenten für die kleineren Größen wegen der Bildschirm Immobilien entfernen . Aber für diese großen Geräte, bis zu 99 zwei, werden wir tatsächlich zukünftige Interessen machen, die unser Leben später für all diese mittleren Geräte viel einfacher machen werden. Also zuerst, was ich tun werde, ist, meine Alt-Taste zu halten und das hier rüber zu ziehen, so. Stellen Sie sicher, dass es nach oben ausgerichtet ist. Dann werde ich diesen Text an der Spitze kopieren. Ich klicke hier. Und auch ich mache das, nur weil ich weiß, welche Größe es ist. Später, sobald ich beginne, dies an meine Entwickler zu exportieren. Also, wenn ich hier rechts klicke und du kannst 1024 sehen, also das ist, was wir zuerst tun werden. Also 10, 24, so. Dann haben wir noch 12 Spalten. Also 30, 50, 47. Und das sind die Werte, also 30, 50, und wann man hier 47 eingeben muss. Also lasst uns noch einmal gehen. 3050 und 47. Also da haben wir es. Also, jetzt erste Dinge zuerst, lasst uns an unserem Top-Navigation ersten Song arbeiten und wann man hineinspringt, benutze mein Hauptnav und ich werde in meine primäre nav springen und auch meine Unschärfe verwenden. Also werde ich hier gehen und nach 1024 schauen. Also werde ich in meine primäre Nav-Unschärfe springen. Und für den Duit, verwenden Sie 1024 so. Und dann werde ich das für meine Zweitperson öffnen. Jetzt. Ich kann es immer noch so verwenden, wie es ist. Ich kann es hier reinbringen. Und ich kann sie zum Beispiel auch auf 20 senken, vielleicht. So etwas wie das. Ich halte Shift so, dass wir nur ein bisschen mehr Platz für unser Logo haben, das wir tatsächlich hier bewegen werden. Auch für alle diese, Lassen Sie uns sie auswählen. Also werde ich auch meinen Selektor auswählen, so dass er sich mit unserem Text bewegt. Winter Wellness, individuelle Kreuzfahrten Tier tut. Bringen wir sie hier hin. Dann werde ich uns hierher bringen. Und ich werde versuchen, das zu tun, was ich vorher getan habe. Also wähle sie alle aus, verteilte sie so. Und es funktioniert immer noch mit dieser Schriftgröße sowjetische haben, um die Schriftseiten zu ändern, bis jetzt. Aber wir werden es etwas später ändern. Ich werde einfach mein Logo hier schieben. Das erste, was wir tun werden, ist, dass wir unser primäres Navigationsgerät erweitern und den ganzen Weg hinunter bis hierher verwischen, zum Beispiel, also 10 , 76, damit wir leicht sehen können, was wir hier tun. Beginnen wir also mit unserem Ziel. Also werde ich sie öffnen und sie verstecken und sie hierher bringen und sehen, wo wir bei ihnen sind. Also sind wir bei 42. Vielleicht kann ich 60 gebrauchen. Und dieses Mal, denke ich, es funktioniert gut. Und was ich tun werde, ist dasselbe, was wir zuvor getan haben. Also werde ich in meine Ziele springen. Und mal sehen, ich habe eine automatische Option hier, aber ich werde nur überprüfen, welche besser funktionieren. Also bis so, denke ich, funktioniert gut. Dann werde ich dasselbe für Asien tun. So. Ziemlich schwierig manchmal mit einigen von ihnen, aber wie seine Show Sie in einer früheren Größe, Sie können das manuell tun, wenn Sie wollen, vor allem ein dort unten für Amerikas Schulden und schließlich für Amerika. Lass es uns genau hier machen. Das ist also das Problem. Wir werden in einen Song laufen, gehen, um sie irgendwo hier zu lassen, zum Beispiel, nur gesehen, dass die grob nach oben ausgerichtet, Ich kann immer so etwas tun und dann in SEO springen und ich kann es bewegen manuell, um ihren Code zu hören. Jetzt, wo wir unser Ziel haben, werde ich sie verstecken. Klicken Sie hier. Ich bringe meinen Winter zurück. Und die Sache mit diesem ist, was du tun wirst , ist, diese Illustration loszuwerden. Weil Illustrationen auf größeren Bildschirmgrößen wagen , so dass Sie all diesen Bildschirm Immobilien haben und Sie können es viel einfacher verwenden. Aber wenn Sie zu diesen niedrigeren Bildschirmgrößen kommen, müssen Sie nicht alle diese verschiedenen Elemente verwenden. Also im Grunde, was ich tun werde, ist zu springen, meine Winterillustration zu löschen dann in meinen Text zu springen. Ich werde die Belüftung zentrieren. Ich werde hier klicken, damit ich sie alle so ausrichten kann. Und ich werde auch meine Schaltfläche auswählen, sicherstellen, dass alles in der Mitte ist, und dann einfach meinen Text hier in die Mitte bringen, so. Dann genauso wie zuvor. Ich werde hineinspringen und meinen Knopf anpassen, damit ich ihn hier positionieren werde. Und mal sehen, 2, 4 Ich denke, ist gut genug. Das ist es. Und tun Sie dasselbe für den Hover. Mein Dad ist Derek 0. Also jetzt haben wir den gleichen Abstand, wir haben die gleichen Elemente, wir haben den gleichen Text nur ohne die Illustration selbst. Was Sie tun können, ist tatsächlich können Sie die Höhe anpassen, wenn Sie möchten. Sie können positionieren und dieser Text ist etwas tiefer nach unten, wenn Sie möchten. Aber wenn ich die Vorschau nur sehr schnell anklicke, können Sie sehen, wie das aussieht wie eine Säge. Ich halte meinen Text immer gerne dort oben, denn er hält die Aufmerksamkeit des Betrachters und des Besuchers viel mehr. Wenn der Text höher nach oben ist, dann Gewinne nach unten, weil dann können sie ihre Bemühungen direkt hier konzentrieren. Und wir werden immer noch unsere Hover-Effekte behalten weil wir hier immer noch eine Breite zur Maus haben, da dies immer noch Desktop-Größen sind. Lassen Sie uns unseren Winter senken. Gehen wir zum Wellness, um es zu verbergen und dasselbe zu tun. Löschen, Illustration, positionierten Text, stellen Sie sicher, dass er zentriert ist, ausrichten, alles auswählen. Stellen Sie sicher, dass es in der Mitte ist. Und dann bringen Sie einfach Text in die Mitte genau dort, Milchherde. Und tun Sie dasselbe für die Tasten. Ich werde es genau hier aufstellen. Und wenn Sie sicherstellen, dass Sie dies verwenden und für Lambdas gehen Sie immer von links nach rechts mit diesen Tasten, so dass Sie keine dieser Störungen und Fehler haben. Und übrigens, während ich diese Klasse aufnahm, startet Adobe XD ein Update, damit Sie die. Hamburger Menü genau hier, aber Sie haben alle diese Optionen genau hier. Also, statt Hamburger und dann alle diese anderen Optionen, Es ist das gleiche, wie es auf einem Mac ist. Also können Sie im Grunde direkt hier schweben und jede dieser Optionen verwenden, wenn Sie möchten. Beide Rechtsklick-Optionen funktionieren immer noch so, wie sie waren. Und das Adobe XD-Team startet diese Updates von Zeit zu Zeit. Und im Grunde gibt es manchmal kleine wie dieses, aber manchmal sind sie ein bisschen größer und etwas größer. Also, halten Sie einfach Ihre Augen für diese Updates geschält , so dass Sie immer auf dem neuesten Stand laufen. Und ich würde immer empfehlen, dass Sie Ihr XD aktualisieren, wann immer Sie können, oder wenn Sie es haben, können Sie es so einstellen, dass es automatisch aktualisiert wird. Wenn Sie über ihr Cloud-Abonnement verfügen, wenn Sie nicht die kostenlose Version von XD verwenden. Alles klar, jetzt, da Individuum fertig ist, habe ich anderthalb Kreuzfahrten über uns zu reparieren. Lassen Sie mich also meine Kreuzfahrt-Illustration löschen. Ich werde sicherstellen, dass alle diese zentriert sind. Das ist zentriert. Ich werde meinen Text ganz hierher bringen, so. Und ich werde meinen Knopf hier reparieren und dann vier benutzen. So, halten Sie ihre Gewohnheiten. Und ich werde es verstecken. Und dann arbeiten Sie mit Über uns Abschnitt. Nun für diesen Abschnitt über uns, was Sie tatsächlich tun können, ist, dass ich das Gleiche für den Text tun werde. Also werde ich alle auswählen, stellen Sie sicher, dass sie zentriert ausgerichtet sind, stellen Sie sicher, dass die Schaltfläche auch in der Mitte ist. Und ich werde meinen Text den ganzen Weg an diesen Rand bringen, genau hier, so. Also im Grunde verschuldete Autos, Mal sehen, ich habe vier von ihnen im Grunde leer. Also, was ich vielleicht tun kann, ist es ein bisschen mehr einzugrenzen. Also lass uns mal sehen. Ich werde zunächst meine Karte ausblenden und sehen, dass dieser Text tatsächlich ein Problem macht. Was ich also tun kann, ist einfach meine Texte so zu gruppieren und die vier Spalten für meine, für meine Karte leer zu lassen . Aber bevor ich es tue, haben wir 40 hier, also werden wir einfach unsere Taste für Pixel nach unten bewegen. Aber bevor wir es noch einmal tun, stellen wir sicher, dass es vier Spalten breit ist, so. Und so. Dann werde ich jetzt mit 40 umziehen, lass es uns so sehen. Und schließlich werde ich nur sicherstellen, dass alles so zentriert ist. Jetzt bringen wir unsere Karteninformationen zurück. Und im Grunde, was ich hier tun werde, weil wir diesen Stapel haben. Wenn ich mich erinnere, werde ich in meine Gruppe springen, wir haben den Stapel zur Verfügung. Und ich werde meinen Stack hier im Grunde wieder aktivieren , so dass wir im Grunde zwei Stack-Optionen haben. Ich bringe das so nach links. Und mal sehen, von hier bis hier haben wir 20. Also können wir das auch tun. Ich kann hier 20 eingeben. Also haben wir 24 diese beiden und 24 das unten unten. Und schließlich für die Karte, ich werde nur auf innen doppelklicken und positionieren, um bei vier zu sein , und passen Sie meine Karte P90 irgendwo hier herum an. Ich denke, das ist gut. Und da haben wir es. Das ist unsere Navigation abgeschlossen. Aber ich kann auch tun, ist vielleicht unseren Text ein wenig schieben. Bewegen Sie es also einfach, bis es besser an unserer Rasterlinie ausgerichtet ist, zum Beispiel hier. Nur damit wir etwas mehr Platz zwischen unserer Karte und unserem Text haben. Und wir brechen keine Regeln, aber lasst uns es tatsächlich leicht nach links bringen, so. Und ihren Hut. Also, was ich jetzt noch tun muss, ist dasselbe zu tun. Also muss ich im Grunde alle diese Elemente kopieren und einfügen. Aber Navigationen oder sollten tatsächlich funktionieren, weil ich mit dieser Top-Navigation nichts anderes gemacht habe. Grundsätzlich kann ich diese einfach an der Spitze massiv C reorganisieren. Mal sehen, ich kann ein sekundäres Logo verwenden. Und lassen Sie mich alle kopieren, außer dem primären Navi verschwommen. Das wird also um 1024, 10, 76. Also lassen Sie uns alle kopieren. Ich das, und für diese erste, werde ich meine Unschärfe zurück zu einem bringen, so. Und in diesem Standardzustand, Mal sehen, wir werden tatsächlich den Selektor verstecken. Es wird also am 0 I sein, dass wir zu den Nationen gehen werden. Das, und wenn Sie Ihre Animationen behalten möchten, können Sie im Grunde alles anpassen. Noch einmal, wie gesagt, aber ich werde mich nicht darum kümmern. Ich werde alle von ihnen entfernen und die Animationen später wieder machen , weil ich finde, dass es viel einfacher ist. Also 10 zu 24 und es tut es bei 10, 80, was in Ordnung ist. Also im Grunde Ziele und ich werde meine Ziele zeigen und wir werden all diese anderen verwenden, bringen sie auf 20. Gehen Sie zur Winterbasis 10, alles davon, und dann gehen Sie vor und entfernen Sie alles außer der primären jetzt Unschärfe. Also werde ich es so auf 24 bringen. Ich werde, mal sehen, meine Winterzufriedenheit mitbringen. Und jetzt Destinationen und all diese anderen, die mit 20 waren. Und ich werde in meinen Selektor mehr springen, die auf genau hier stattgefunden hat. Es ist zeitaufwändig. Aber wenn Sie alles richtig machen wollen, dann müssen Sie wirklich einspringen und all diese Dinge tun. Lassen Sie uns das alles löschen, basierend auf den neuen Informationen. Das wird ein Wellness. Also das, das, und mal sehen. Alle diese anderen Zeilen werden 20 sein. Selector wird sich so zum Wellness bewegen. Mal sehen. Und ich werde es einfach hier verschieben, meine Wellness-Inhalte einbringen, es so zeigen. Und ich werde mit diesem Individuum beenden und dann werde ich das pausieren, damit ich die Navigationselemente machen kann. Sie können die Animationen machen, ohne Sie zu langweilig zu machen. Also mal sehen, wir sind in einzelnen Staaten oder wir werden alle von ihnen bis auf 20 verbergen, außer für das Individuum. Ich werde meine Selektorposition hier verwenden. Komm schon, hier, wir bringen meine individuellen Inhalte ein und ich werde einfach meinen Selektor anpassen, bis er passt. Und sehen Sie direkt da rein, um meine Schichten Tafel und Milchherde zu bringen. Und hier müssen wir das an Dan 24 anpassen, richtig. Dann gehen wir zu Kreuzfahrten. Löschen Sie alles, basierend auf. Also alle diese werden 20 Selektor sein und lassen Sie uns Kreuzfahrten mitbringen. Grundsätzlich ist dieser Selektor der mühsamste, mühsamste von allen, weil man ihn anpassen, bewegen muss, aber alles zugunsten einer guten Animation. Und beenden wir sie endlich mit über uns. Also werde ich sie alle entfernen. Zunächst einmal wird dies 1024 sein und es ist für bewachte in den vorherigen Kreuzfahrten anfallen? Ich denke. Also mal sehen, vor jetzt Unschärfe. Ja, also 1024. Und Sie können schnell zwischen all diesen Zuständen springen und sehen, zum Beispiel, für einzelne, Sie können sehen, ob Sie es für Wellness getan haben für alle von ihnen Feststoffe gehen über uns und lassen Sie uns daran arbeiten. Also über uns, ich werde alle von ihnen auswählen und neue 220 bringen, verwenden Sie meinen Selektor. Mehr waren hier zu schreiben, bringen meine über Aufgabeninhalte. Bringen Sie das auf 1024, das ist in Ordnung. Und schließlich arbeiten Sie an unserem Selektor. So wie so. Und da gehen wir. Es ist so, jetzt, dass alle unsere Staaten, unsere fertig, was ich tun werde, im Grunde hier reinspringen, zum Prototyp gehen und sehen. Wenn ich auf den ersten klicke, habe ich Typ auto animate, leichtere in 0.4 Sekunden. Das ist also der, den ich in all diesen anderen Staaten verwenden werde. Also lasst uns zu Zielen gehen. Sie können sehen, dass es all diese und all diese bewahrt hat, was großartig ist, aber es hat nicht alle diese anderen behalten. Also lasst uns hier gehen und mal sehen. So Destinationen wird nicht ein Winter ausgewählt werden. Klicken, tippen, automatisch animieren. Wir gehen in den Winter, lassen uns rein, raus und 0,4 Sekunden. Und im Grunde jetzt, wo Adobe XD sich erinnert hat, oder Sie müssen es tun, ist einfach voran und verbinden Sie alle von ihnen. Also das ist individuell, das ist Kreuzfahrten IDAT über uns, und das war's. Und schließlich für das Logo, können Sie jetzt auf das Logo selbst klicken. Sie müssen nicht wirklich auf das Logo an diesem Punkt klicken, weil es das PNG sowieso geht zurück in den Standardzustand zu gehen. Also werde ich das Video hier pausieren, während ich all diese Zustände mache und dann wiederkomme. Okay, jetzt ist das fertig. Gehen wir zum nächsten Abschnitt, der offensichtlich unser Heldenbereich sein wird. Also lasst uns auf das nächste n. im Grunde das einzige, was wir tun werden. Aber bevor ich das mache, lass mich diesen Grund jetzt hier schnell bewegen , damit er uns nicht zu sehr ablenkt. Das einzige, was wir tun werden, ist tatsächlich diese Pfeile zu bewegen. Also gehe ich nach links Pfeil-Tab-Punkt, und ich werde sie hier verschieben. So wie so. Und ich werde das auch hier tun. Positionieren Sie es so bis zum Rand. Und ich werde unseren Text in die Mitte bringen. Lassen Sie uns mit Hero Button und Textmaske gehen. Stellen Sie sicher, dass sie sich in einer Mitte befinden. Und schließlich, was ich mit meinem Knopf tun werde, ist erweitert zwei hier und zwei hier. Und das ist es im Grunde. Sie können alle diese Bilder natürlich anpassen, aber ich denke, das funktioniert gut. Dieser hier funktioniert immer noch gut. Und mal sehen, dieser dritte funktioniert eigentlich ziemlich gut. Also werden wir einfach all diese Bilder hinterlassen. Also noch einmal, dies wird vier für den Standard und für Hover wie folgt sein. Und Pfeile und Text werden in der Mitte kommen. Also ohne weitere Änderungen an ihnen, sind nur gehen, um sie einfach alle an den Absender auszurichten. So wie das. erneut sicher, dass meine Taste vier Spalten breit ist, so. So können Sie manchmal mit diesen Zuständen sehen, können Sie sie leicht anpassen. Sie können all diese Dinge viel einfacher machen. Also mal sehen, das ist auf die Linie, die in Ordnung ist und eine rechte einfach angepasst. Wo ist sie? Hier? Das ist es. So wie das. Damit du deine Bilder hängen lassen kannst, wie ich es hier tue. Oder Sie können sie einfach alle wieder so reinbringen, wenn Sie wollen. Also lassen Sie uns das eigentlich nur für alle Staaten tun , weil es das Bild nicht zu sehr verändert. Alles, was ich hier sehe, ist, dass Sie tun können, was Sie wollen, denn wenn Sie dieses Bild exportieren, wird es sowieso auf die Breite des Flughafens sein. Es spielt also keine Rolle. Es ist nur so, dass es dich nicht ablenkt, während du arbeitest. Also mal sehen, Korallengarten Mittelpfeile. Bewegen Sie sie so. Lassen Sie mich meinen zweiten Pfeil hierher bewegen. Und wenn du denkst, dass ich manchmal viel zu schnell gehe , ist nur wegen der Erfahrung. All dies wird zu einer Art Muskelgedächtnis. So fangen Sie an, alle diese Verknüpfungen kennen zu lernen. Und du fängst an, sie zu lernen, sobald du anfängst zu arbeiten. Und je mehr Projekte Sie haben, desto einfacher wird es dazu führen, sich an all diese verschiedenen Änderungen anzupassen. So zum Beispiel, diese neue Änderung, die gerade in diese neue Version von XD gebracht. Ich habe nicht einmal bemerkt, dass jemand es auf Twitter gesagt hat und ich habe es einfach wirklich schnell ausgecheckt und es ist nichts zu großes wirklich. Also lasst uns voran gehen und es ausgecheckt haben. Sehen Sie, ob wir alle diese Animationen haben. Und jetzt können Sie sehen, im Gegensatz zu diesem Menü oben, haben wir alle diese Animationen beibehalten, weil wir einfach angepasst was wir zuvor hatten und das einfach so an Ort und Stelle verschieben. Alle diese Animationen blieben also genau gleich. Während mit diesem hier. Wenn ich hier rechts klicke, können Sie sehen, dass die Animation noch funktioniert. Aber weil wir den Inhalt so angepasst haben, wie ich erklärt habe , mussten wir sie anpassen, während alle oben noch funktionieren, wie sie sollten. Denn wie gesagt, wir bewegen den Inhalt einfach ein wenig näher mit diesen Stacks. Nun endlich, gehen wir weiter und arbeiten an dieser unteren Navigation. Also, was wir hier tun können, ist zum Beispiel die US 30 von ihnen und verwenden Sie einfach zwei für den Knopf. Also lass mich dir zeigen, was ich meine. Ich werde diesen Hintergrund direkt hierher bringen, stellen Sie sicher, dass er hier links positioniert ist, wie er ist. Dann werde ich meinen Knopf benutzen. Ich werde es hier positionieren und einfach Lüge eingeben. Ich werde keine Filter benutzen. Und dann werde ich meinen Knopf benutzen und ihn einfach nach hier verschieben. Lassen Sie mich ihre Suchleiste ausblenden, damit Sie sehen können, wie die Schaltfläche aussehen wird. Also sind wir wirklich ziemlich klein und ziemlich winzig, aber es wird seine Arbeit so tun, wie es sollte. So wenden Sie sich an und passen Sie einfach unsere Taste hier an. Wenn Sie zwischen den Zuständen wechseln, können Sie sehen, was wir haben. Also lassen Sie uns jetzt die Suche zum Beispiel ausblenden. Und ich habe es getan, nur damit wir zum Beispiel drei Spalten für jeden von ihnen haben können. Also werde ich meine Ziele benutzen. Und für diesen ersten Zustand werde ich meine BG bis hierher erweitern. Also richtet es sich mit diesem. Ich werde auch meine Trennposition direkt hier verwenden und meine Maske verwenden und sie einfach bis hier erweitern. Und im Grunde das Einzige, was Sie hier ändern werden, ist das. Also lasst uns das Gleiche hier machen. So Destinationen und Maske, wir können beide gleichzeitig auswählen und direkt hier positionieren. Also lassen Sie uns Ziel verwenden und es mit unserer Rasterlinie ausrichten. Als würde diese Maske nur ein bisschen nach draußen gehen. Und schließlich haben wir diese Trennwand, die hier einfach gehen wird. Und was Sie tun können, ist diese Inhaltslinien erweitert, wenn Sie wollen, aber ich werde sie nur so halten, wie sie Genotyp sind. Lassen Sie es uns auch anpassen. Also werde ich es hier verschieben, damit es richtig aufrichtet. Ich werde es auch für ihre Pflichten dasselbe tun. Also 123, so. Mal sehen. Also lassen Sie uns für den Typ sehen, wir werden es tatsächlich ändern und Qualität einfach so eingeben. Und dann werden wir eigentlich zwei Rasterlinien verwenden , nur damit wir etwas mehr Platz für die Suche haben. Und lassen Sie es uns anpassen. Also werden wir es festhalten lassen und auch die Trennwand zur gleichen Zeit bis hierher bewegen. Passen Sie die Maske an und nur ein bisschen an hier. Und vielleicht können wir uns anpassen und das Quantum unten. So kann ich meine Trennwand benutzen und bewegen. Die Linien sind genau hier, denke ich, und es wird gut. Aber Sie können sehen, dass wir hier eine individuelle Reise haben, die genau hier geht. Also werde ich das entfernen. Ich werde das entfernen. So geht es individuell. Vielleicht kann ich diese Kreuzfahrt sogar entfernen, um den Typ zu verwenden. Wir können sie für alle so entfernen. Und was ich tun werde, ist einfach Kopie für alle von ihnen zu verwenden. Also lass uns mal sehen. Ich werde eigentlich nur Kopie für diese verwenden und sie später in unserem angeklickten Zustand anpassen. Also werde ich es auf US-basiert öffnen. Verschieben Sie es hier unten. Also lass uns hier sehen. Wenn ich kann, hat es das da drin gelassen. Also lasst uns gelöscht. Klicken Sie hier und sehen Sie, es ist immer noch Pasta ist es an die Spitze? Ich weiß nicht, warum es das immer tut. Also lassen Sie uns eigentlich, weil Sie sie an der gleichen Stelle haben müssen , damit diese Animation tatsächlich funktioniert. Lassen Sie uns schnell daran arbeiten und ich werde Ihnen einen Weg zeigen. Also Typ wie Dreck, ich werde meine BG-Teiler verwenden, zog sie hierher. Ich werde meine Maske benutzen, um sie genau hier zu bewegen. Und ich werde das kopieren. Wechseln Sie zum Standardstatus, öffnen Sie ihn und drücken Sie Einfügen. Also, jetzt ist es an genau der gleichen Stelle wie im zweiten Zustand. Also, jetzt, wo ich sie anrufe und wenn ein Treffer in meine Vorschau, werden Sie sehen, wie das funktioniert. So geben Sie, können Sie klicken und Sie können sehen, dass es an genau der gleichen Stelle bleibt. Nun, weil wir diesen Raum haben, was wir tatsächlich tun können, ist vielleicht alle unsere Inhalte direkt hier zu schieben, wenn Sie wollen. Das wird uns hier viel mehr Platz geben, denn mit diesen Aktivitäten werden wir im Grunde dasselbe haben. Es liegt also an dir, wenn du sie ausfüllen willst, aber ich lasse sie einfach so, wie sie hier sind. Ich denke, es wird gut funktionieren. Also für die Aktivitäten werde ich es hier verschieben. Genau da. Und lassen Sie uns für die Aktivitäten sehen, können wir auch haben. Mal sehen. Bg und unser Teiler können hier zum Beispiel gehen, ich denke, es wird gut funktionieren, und das wird hier gehen. Also mal sehen, ich glaube nicht, dass wir hier zu viele Änderungen vornehmen müssen. Ich glaube nicht, dass wir hier überhaupt etwas ändern müssen, ich denke, das ist in Ordnung. Und schließlich, für die Suche, lasst uns daran arbeiten. Also, was ich tun werde, ist meine Box genau hier auszurichten. Und dann werde ich meinen Standardzustand einbringen. Ich bringe das hier rein. Und ich werde einfach die Suche benutzen, weil ich keine Belüftung verwenden muss. Ich bringe das auf 100 zurück. Positionieren Sie es hier. Stellen Sie sicher, dass es 20 ist , so bringen Sie es auf 0. Dann gehe ich in den angeklickten Zustand. Und lassen Sie uns in den angeklickten Zustand sehen, ich kann es hier reinbringen. Also CBG schließen Symbol, ich kann einfach zwei von ihnen direkt hier bewegen, und ich kann einfach eingeben. Oder noch besser, wir können hier nach Reisen suchen und dann im Standardzustand suchen. Mal sehen, ob sie funktionieren. Ich denke, das sollte funktionieren. Irgendetwas stimmt hier nicht. Ich weiß nicht, warum es das tut. Wie Sie sehen können, bewegt es dies weiter. Also lassen Sie uns im Standardzustand sehen, ich werde es hier verschieben. Und ich werde mein BGP manuell auf hier einstellen. Ok? Und jetzt gehen wir zum angeklickten Zustand. Und ich werde das anpassen, so positionieren. Und dann benutze nur meine Suche BGN, mein Kleidungssymbol, und schiebe sie hier. Mal sehen, ob es funktioniert. Das tut es. Sie können das Feld also nicht einfach verschieben. Sie müssen die Elemente im Inneren manuell anpassen. So kennt der XD tatsächlich die Entfernungen zwischen all Ihren Artikeln im Inneren. Also jetzt, wenn ich hier klicken, können Sie sehen, es sagt Suche nach Reisen. Während hier nur sagt, dass die Suche gilt, funktioniert immer noch. Und wenn wir auf die Aktivitäten klicken, sehen sie gut aus. Der Typ sieht gut aus. Wieder einmal, wenn Sie wollen, können Sie dies einfach auf hier erweitern. Wenn du willst. Destinationen, sie haben gut funktioniert. Also wirklich alles bis zu dir. Jetzt gehen wir weiter und gehen zum nächsten Abschnitt. Und ich werde Ihnen zeigen, was wir hier tun werden. Zuallererst ist es einfach, es an unserem Raster auszurichten. Stellen Sie sicher, dass es ausgerichtet ist. Was ich hier tun werde, ist, zuerst, unseren Text so an der Mitte auszurichten. Grundsätzlich werde ich zwei verschiedene Zustände für diese Karten erstellen. Also in diesem werden wir im Grunde Tabs verwenden. Also erste Registerkarte wird erste Minute Angebote sein und der zweite Tab wird Last-Minute-Angebote sein. Also, was ich mit diesem hier machen werde, ist sicherzustellen, dass es sechs Spalten breit ist. Also 1, 2, 3, 4, 5, 6. Also wird es genau hier gehen. Und dann werde ich es verlassen, weil es der erste Staat sein wird. Ich werde klicken und das hellgrau verwenden, um anzuzeigen, dass dieses ausgewählt ist. Also, weil dieses Video ein bisschen länger läuft, ist es jetzt fast eine halbe Stunde entlang. Lass es uns hier aufhalten. Und dann im nächsten werde ich zurückkommen und Ihnen erklären, wie Sie im Grunde zwei Registerkarten für diese Abschnitte erstellen können . So können Benutzer zwischen der ersten und der letzten Minute wechseln, und dann können Sie etwas Platz auf ihnen sparen. 42. Erstellen von Responsive Design 6: Gehen wir jetzt voran und machen diese. Und um das zu tun, was ich tun werde, ist die Gruppierung aufzuheben. Also werde ich die Gruppierung in dieser ersten Minute aufheben. Ich werde die Gruppierung in letzter Minute aufheben. Und ich werde die Last-Minute-Angebote in First-Minute-Angebote nutzen und eine Gruppe sie wie diese. Ich werde sie zum Beispiel Tabs nennen, weil sie das sind. Und dann werden diese Karten, wir werden eins nach dem anderen anpassen. Also zuerst, lassen Sie uns mit diesen hier umgehen. Also lasst uns zuerst, dass wir sie hier links ausrichten, damit sie nicht ablenken. So wie so. Und schließlich, für die Knöpfe, was wir tun werden, ist, dass wir uns zuerst damit beschäftigen. Also lassen Sie uns zwei sehen, wir können vier Spalten verwenden. Sie sind also die gleichen wie all diese anderen Tasten. Und lassen Sie uns auch für diesen verwenden. Also lass uns 2, 4 genau hier sehen. So wie das. Und was ich tun werde, ist meine beiden Tasten hier auszurichten. Wenn also die ersten Minute-Angebote angezeigt werden, wird dieser Button meins zeigen. Aber wenn die letzten Minuten geklickt werden, wird dies angezeigt, also im Grunde zwei Schaltflächen an genau der gleichen Position. Also mal sehen, ich werde sie so aufstellen. Und nennen wir sie Knöpfe so. Und mal sehen. Ich werde diese drei jetzt einfach verstecken, weil wir sie vorerst nicht brauchen. Erste Dinge zuerst, lasst uns an unserem Hintergrundsong arbeiten, gehen, um alle von ihnen zu öffnen und gingen, um es direkt hierher zu bringen. Und dann werde ich das hier mitbringen. Und auch ich werde dieses letzte benutzen und es hierher bringen. Dann, was ich tun werde, ist tatsächlich die Größe unseres Bildes zu erhöhen. Und vielleicht kann ich fünf Spalten für die Bildbreite verwenden. Und lassen Sie uns diesen ganzen Inhalt zum Beispiel hier verschieben. Also lasst uns 1, 2, 3, 4, 5. Das ist in Ordnung. Und ich denke, die Bildposition ist ziemlich gut, wie sie hier ist. Lassen Sie uns jetzt den Inhalt zurückbringen. Ich werde es hier verschieben. Zuerst müssen wir uns mit diesem beschäftigen. Also werde ich diesen Stack verwenden. Und lasst uns sehen, wie Aiken den Abstand auf, ich weiß nicht, etwas ganz Großes vergrößert . Mal sehen Eigentlich können wir es manuell erhöhen und dann sehen, wo es passt. Positionieren wir zum Beispiel dieses Bus-Symbol, um diese Rasterlinie zu treffen. So etwas wie das. Ich denke, das funktioniert gut. Dann gehen wir zu unseren Divider-Analysten, die auf diese Rasterlinie erweitert wurden, und verwenden Sie auch die andere. Aber bringen Sie es zurück, so dass es 20 ist, so. Und dann werde ich diese beiden hier positioniert auswählen. Und dann werde ich Shift und unten Pfeil verwenden. Also 1, 2. Und ich werde das mitbringen. Um zu hören. Also stellen sie Schicht 12 auf, damit ich sie zurückbringen kann. Und dann kann ich mein Bild an den unteren Rand unserer Karte bringen, die genau hier und da ist, haben wir es. Jetzt haben wir eine völlig andere Option, völlig anderes Design für die gleiche Karte. Also, was ich tun werde, ist genau das Gleiche. Also werde ich sie alle auswählen, Control C drücken, den Horrorzustand gehen, QED-Kontrolle V, und dann hineinspringen und sie alle so töten. Dann doppelklicken Sie auf mein Bild, vergrößern Sie mein Bild. Ich werde meine Maske so öffnen. Und ich werde auf meinen Hintergrund klicken. Klicken Sie hier, klicken Sie auf die Acht, so. Und Milchherde. Jetzt beginnt im Grunde der gleiche Prozess. Sie müssen alle diese Elemente kopieren und einfügen. Aber bevor wir es tun, mal sehen, wir haben 40 zwischen diesen beiden. Bringen wir sie gleich hierher. Und zuerst, lassen Sie uns die Höhe so einstellen, dass die Höhe 387 ist. Also, dafür werde ich drinnen klicken. Die Höhe wird drei sein, 87 Prozent sind. Und ich werde hier reinspringen. Höhe wird sich 8, 7 zurückziehen, so. Und dann passen Sie einfach mein Bild auf die neue Höhe. 87. Ich werde das Gleiche hier machen. Also 387, richtig, das, und da haben wir es. Also, jetzt werde ich das Video hier noch einmal pausieren und daran arbeiten. Also, wie ich sagte, dass Sie zu sehr mit all diesen Details stören und Sie Jungs nicht langweilig, indem Sie mir zuzusehen, wie ich sie alle so anpasst. Und ich werde wiederkommen, wenn ich DC-3 fertig bin und auch diese drei hier, die ich versteckt habe. Und dann werde ich zeigen, wie wir Animationen zwischen allen erstellen können. Und jetzt, da ich diese abgeschlossen habe, lass mich dir zeigen, wie du sie kreierst. Aber davor, lassen Sie mich es Ihnen schnell zeigen. Also hier haben wir Standard-Hover. Und wenn ich diese drei verstecke, sehen Sie, dass wir Paris haben. Also hier Standard und Hover, und wir haben diese Tasten und der Abstand ist 80, während zwischen all diesen Autos die Entfernung 40. Also lassen Sie mich diese 3 zuerst bringen, und dann werde ich diese unteren drei auswählen, die hinter diesen drei sind, drücken Sie 0 auf meiner Tastatur zu zwei Mal, damit es sich senken kann, Sie sind im Grunde zu 0. Außerdem kann ich zu meinen Tasten gehen und für die Last-Minute-Angebote, die hinter diesen ersten Minute-Angeboten stehen, werde ich auch die Deckkraft auf 0 senken. Ich werde das grau halten, das bleibt blau. Und was ich tun werde, ist Qualität, zum Beispiel Sonderangebote. Und lasst uns Sonderangebote sehen. Lassen Sie uns sehen, dass große Geräte Control K drücken, um eine Komponente dieses gesamten Abschnitts zu erstellen. Aber es ist kurz bevor wir es tun. Lass uns Gada sehen und zum Standardzustand zurückkehren. Das ist also unser Standardzustand für diese gesamte Komponente. Also werde ich einen neuen Staat schaffen und den Tod neu nennen. Ein Last-Minute-Angebote. Das und dann für die Last-Minute-Angebote, offensichtlich werden wir die verschiedenen Dinge zu schaffen. Das wird also so hellgrau sein. Das wird ein Hauptblau sein. Wir werden diese ersten drei verstecken. Also Doppelklick sind 0, Qi. Und auch wir werden diese Schaltfläche ausblenden, diese Tasten anzeigen oder für die letzte Minute. Und wir werden diese drei zeigen. Wieder mal. Schließlich gehen wir in den Standardzustand, verwenden Sie unsere Prototyping-Funktion. Klicken Sie auf unsere Last-Minute-Angebote. Klicken Sie darauf. Tippen Sie auf Auto, animieren, einfach jetzt 0.6 zum Beispiel. Und wir können zum Last-Minute-Angebotsstaat gehen. Dann können wir die Staaten hier wechseln, doppelklicken Sie hier, wählen Sie die ersten Minute-Angebote, klicken Sie darauf und gehen Sie zum Standardzustand 0.6, einfach und aus und automatisch animieren. Gehen wir zum Standardzustand und drücken Vorschau, nur damit wir sehen können, wie es aussieht. Also lassen Sie mich zurück zu hier. So können Sie sehen, dass diese noch funktionieren und das Zoomen in Features noch funktioniert. Das funktioniert immer noch sehr gut. Wenn ich also auf Unsere Last-Minute-Angebote klicke, können Sie sehen, dass es uns braucht, um die erste Minute oder zwei hier zu hören. einmal, alle ersten Minuten. Klicken Sie hier und alle Last-Minute-Angebote. Also da haben wir es. Das ist der Abschnitt n. Jetzt gehen wir weiter zu diesem Videobereich. Denn wir sind immer noch in einem Stapel für diesen gesamten Inhalt. Sie können sehen, wenn eine hohe Raten 150, 150. Für das Video selbst kann ich es unten auf hier senken. Und was ich auch tun kann, ist mein Video einzubringen , weil ich es nicht brauche, um so groß auf dieser kleinen Größe zu sein. So zum Beispiel, so etwas. Aber wie Sie sehen, ist Stack diese Intelligenz, so dass es den Abstand zwischen ihnen hält. Lassen Sie mich zunächst diesen gesamten Abschnitt so ausrichten. Und ich werde meinen Knopf hierher bringen und sicherstellen, dass er vier Spalten breit ist, direkt dort schweben. Und als ich ein Wind zu tun war, klicken Sie auf meine Pfeile und bringen Sie sie direkt an den Rand, genau dort. Dann werde ich meine Städte nutzen und sie so am Netz ausrichten. Und es ist einfach, das den ganzen Weg rauszubringen. Also Cities, ich werde sie so an der Rasterlinie ausrichten. Und dann kann ich das hier reinbringen und es abschließen. Und auch auf dieser rechten Seite werde ich das Gleiche für hier tun. Also im Grunde, was wir hier tun können, ist genau das Gleiche. Wir werden nur diese Karten anpassen. Und mal sehen, wir haben sechs davon, was in Ordnung ist. Und lasst uns dasselbe tun. Also werde ich diese drei benutzen, sie alle hier bringen und sie dann verstecken, damit sie an diesen drei arbeiten und dann einfach dieselben Anpassungen an diesen vornehmen können . Also, was wir genau hier machen werden, ist im Grunde ganz einfach. Was wir haben, sind diese und wir müssen sie individuell anpassen wie wir es für alle getan haben, wegen dieser Trennwände. Nun, was ich dafür tun kann, ist, dass ich diese Trennwände loswerden kann und dann wird der Inhalt viel mehr skalieren. Italien. Lassen Sie mich Ihnen diese Option zeigen. Wenn ich nun auf Mein Paris klicke, können Sie sehen, dass der Inhalt viel besser skaliert wird. Aber wir haben immer noch dieses Problem, das wir beheben können, indem einfach ausrichten und dann rechts hier klicken und dann unseren Abstand zwischen diesen senken, wenn wir wollen. Mal sehen, wie können wir das tun? Was ich genau hier tun werde, ist, Gehen wir zurück zum vorherigen Layout mit unseren Trennwänden. Was ich hier eigentlich tun werde, ist, diese Tötung ihrer Ikone loszuwerden, die uns viel mehr Platz geben wird. Und es wird uns viel frei, mehr frei oder Layout zu unseren Abschnitten ermöglichen . Also lassen Sie uns den Pfeil und Zielkarte und Bild 24 Spalten bringen. Wieder einmal so. Dann werde ich in meine Mitte springen und dann einfach diesen Inhalt irgendwo hierher bringen. Schließlich werde ich einen meiner Trennwände verwenden und meine Umschalttaste bis hier halten. Und 262 ist die Größe. Also 262, manchmal wird es funktionieren, manchmal ist es keine Anwaltschaft oder haben eine Reihe von diesen Themen, die sie normalerweise nicht haben. Ich wusste nicht wirklich, was passiert ist. Haben sie ein Update gestartet, dass es nicht funktionieren wird oder Zinedine, die ich nicht weiß. Aber das spielt keine Rolle. Was Sie tun können, ist, dass Sie es senken können, wie in einem der vorherigen Videos erklärt. So können Sie all dies noch einmal in einen Stapel legen. Also drücken Sie Control G und legen Sie es dann in einen Stapel. Dann klicken Sie hier und passen Sie einfach das Bild so an, dass Sie diesen Quantenweg nach oben bringen können, wenn Sie wollen. kannst du tun, wenn du willst. Aber ich weiß es nicht. Lass uns so etwas sehen. So Höhe kann irgendwo etwa 200 Materie sein, noch vielleicht ist es gut. Ja, lass es uns angelegt machen. Also lassen Sie die Höhe b bis zu 100, und lassen Sie uns all dies in einen Stapel legen. Also, was ich tun werde, ist tatsächlich hier zu retten und dann wieder zu kommen, wenn ich alle fertig bin. Aber bevor ich das tue, lass mich in meinen Schrecken springen und dir zeigen, wie das aussehen könnte. Also im Grunde, mit dem Hover, alles, was wir bisher getan haben, wird genau das gleiche sein, aber mit dem Hover, dieses Bild wird auch schweben, wird auch nur ein wenig hineinzoomen. Sie müssen es also wie zuvor sowohl für Standardstatus als auch für Deaths Hover-Datum anpassen. Das ist es, was wir jetzt tun werden. Also lasst uns schnell gehen. In unserem Standardzustand, könnte Kriterien Control C, gehen Sie zu unserem Horrorstatus, klicken Sie rechts hier, und dann Control V. Wählen Sie alle unsere anderen Inhalte, und dann lassen Sie mich einfach hier überprüfen. Also denke ich, ja, es ist acht. So sehen wie alle diese anderen hier, um es zu löschen, und ich werde sicherstellen, dass ich doppelklicke, zoomen Sie hier wirklich schnell. Dann öffne dich, meine Maske, erweitert bis hier. Klicken Sie hier. Bringen Sie das noch einmal auf acht und Milchherde. Wenn ich jetzt zwischen unseren Städten wechsle, siehst du, wie das aussieht. Nun, offensichtlich ist dieser gesamte Prozess unglaublich mühsam, wie Sie wahrscheinlich sagen können. Aber je mehr dieser Animationen du einfügst , desto schwieriger wird es sein, desto mühsamer wird es sein. Also behalten Sie all diese Dinge im Hinterkopf, wenn Sie von Anfang an entwerfen. Denn wenn Sie zu diesem Punkt kommen und wenn Sie anfangen zu erhöhen und zu erhöhen all diese Dinge wird offensichtlich viel schwieriger sein, all diese Dinge zu verwalten. Also zuerst, lasst uns das auf 200 runterbringen. Entschuldigung, ich habe den Stapel nicht aufgenommen, also zuerst den Stapel einschließen und dann auf 200 bringen, so und springe hinein. Dadurch wurde das Kalendersymbol entfernt. Bringen Sie die beiden hierher. Und dann mal sehen, wir können diese c London und Zielkarte bewegen. Ich kann sie vier Säulen breit machen. Ich kann auch zu hier springen und das hier zu bewegen. So wie so. Und dann lassen Sie uns das sehen, oder ich hasse diese Trennwände wirklich, aber was können Sie tun? Also für die Mitte kann ich innen doppelklicken und positioniert oder direkt hier. Mal sehen, was wir hier hatten. Also haben wir 33 eines Tages, so dass wir die gleichen Einstellungen hier haben können. Ich kann 33 springen, Enter drücken und dann diesen Teiler benutzen, den ganzen Weg hierher bringen. Wie gesagt, hängt es wirklich von Ihrem Layout ab, was Sie damit machen, wie Sie es anpassen. Aber im Grunde sieht es so aus wie hier. Also Control C in unserem Londoner Horace-Staat, Kontrolle V. Lassen Sie uns diese drei beenden und dann werde ich zurückkommen und Ihnen zeigen, wie sie alle aussehen. Und ich werde Ihnen auch zeigen, wie die Animation selbst aussieht, wenn sie fertig ist. Also Arrow, ich werde es hier erweitern und das auf acht bringen. Lassen Sie uns jetzt schnell zwischen Standardstatus und Horace Staat und Paris überprüfen. Standardmäßig schweben, es sieht gut aus. Also lasst uns jetzt an unserem Rom arbeiten. Wieder gruppieren Sie alle, stellen Sie sicher, dass sie sich in einem Stapel wie diesem befinden. Doppelklicken Sie hier und stellen Sie sicher, dass Sie bei 200 sind. Und dann klicken sie hier. Ich werde die Tage so loswerden. Ich werde sagen, es sind 33, so. Ich werde es nach links ausrichten. Verwenden Sie die Trennwand. Und definitiv denke ich, dass Formschichten viel bessere Option sind als diese Linien für Trennwände. Denn geformte Terroristen werden immer folgen, was Sie tun, und Sie können sie immer anpassen, unterziehen. So gibt es wirklich keinen Bedarf für diesen Pfaff rund um Ihre Trennwände. Also mag ich diese Ausrichtungen n in der Zukunft wirklich nicht oder benutze definitiv Shape-Ebenen. Denn wie gesagt, Shape-Ebenen, wie Sie übrigens sehen können, mit diesem Bild, es bewegt sich einfach schön. Es funktioniert nur so, wie es funktioniert, wie es sollte. Also denke ich wirklich, dass Formebenen in Zukunft viel bessere Option für alle diese Trennwände und Linien sind. Kontrollieren Sie C, U und Unzufriedenheit schweben und dann Control V, springen Sie hinein, entfernen Sie alles, und bringen Sie das zurück auf acht. Also, und lassen Sie uns unseren Pfeil zurück zu hier. Und schließlich, lassen Sie uns doppelklicken, um hier auf dieses Bild zu vergrößern. Und da haben wir es. So Standardzustand, Horror-Zustand. Also schließlich, was ich damit machen will, ist offensichtlich, sie wieder rein zu bringen. Also werde ich sie auf 80 positionieren, als hätten wir einen zwischen dem Text und ihm. Und schließlich, für den Text selbst, Lassen Sie uns es in die Mitte genau hier verschieben. Sehen wir uns diese Städte an, wo sie geschlossen sind. Das gefällt mir. Und das ist es im Grunde. Ich gehe weiter und arbeite an diesen drei überrascht Amsterdam, Venedig. Und ich werde auch an all diesen anderen arbeiten. Lassen Sie mich sie zunächst so ausrichten. Also lasst uns sie an unser Netzlicht bringen. Das hier. Bringen Sie unsere Top-Destinationen, bringen Sie diese noch einmal ins Zentrum, oder sogar, um später so gut angepasst zu hören. Bringen Sie die beiden her, unsere Partner. Also noch einmal, offensichtlich mit diesen Ihren Gegenständen, ist es viel einfacher zu tun. So kann es einfach auf hier eingestellt werden. Und Sie können die Schriftrolle anpassen. Und Gruppe 2 hier, stellen Sie sicher, dass der Text zentriert ist. Und das Gleiche für diese hier. Also wagen Sie es und stellen Sie das hier. Und das sollte zum Beispiel einfach direkt nach hier gehen. So können Benutzer leicht scrollen und Todesfälle. Ich glaube nicht, dass wir damit zu viel arbeiten werden. Stellen Sie diesen Text einfach hier ein. Und mal sehen, Sie ermutigen zu sein, einfach bewegen Sie diese letzte Zeile hier. Hamlet sieht, dieser Knopf kann in der Mitte sein. Also lassen Sie uns einfach alles auswählen. Stellen Sie sicher, dass wir in einem Zentrum sind. Das sind wir. Mal sehen, die Entfernung ist 40, also wird dies auch 40 sein und stellen Sie sicher, dass Sie vier Spalten oder diesen Knopf verwenden. So können Sie die Struktur deutlich sehen. Alles wird in der Mitte sein und das wird in der Mitte sein. Also kann ich tatsächlich diese beiden auswählen und hier klicken und sicherstellen, dass sie in einer zentralen Linie sind, die. Und schließlich, klicken Sie darauf, stellen Sie sicher, dass es hier ausgerichtet ist und klicken Sie rechts hier. Die nächste ist in der Mitte. Und dann noch einmal, das Gleiche mit diesem einfach an hier angepasst. Und ich werde sicherstellen, dass, wenn ich es hier lege, Mal sehen, denn wie Sie sich erinnern, müssen Sie nach unten von links nach rechts tun. Also 1234, und im Staat Horace, 1234, so. Und dann gehen Sie einfach zurück und erweitern Sie das, bis der Knopf die Kante direkt dort trifft und da haben wir es. Der Schuldenabschnitt ist abgeschlossen. Also nennen wir es uns einen Tag für dieses Video, weil ich zeigen wollte, wissen Sie, ich will Ihnen das zeigen und dann werde ich es einen Tag nennen. Also zuerst, dieser Abschnitt, werde ich ihn hierher verschieben und ich werde es tun. Also buchen Sie Ihre Traumreise. Wir sind am Inhalt, der in einem Stapel ist. Also, was können wir eigentlich damit machen? Ich kann es zum Beispiel so positionieren, dass es oben ist. Also lassen Sie uns sagen, dass ich dieses Bild an die Spitze stellen möchte. Wie kann ich das machen? Wechseln Sie zuerst zu diesem vertikalen Stapel, springen Sie dann in den Inhalt und bewegen Sie einfach Ihr Quantum so. Es wird die gleiche Konsistenz zu halten wird den gleichen Effekt zu behalten, die gleiche Sache im Grunde. Erweitern Sie also einfach Ihr Bild so. Stellen Sie sicher, dass Sie Ihre Maske wieder an ihren Platz bringen. Und dann für diese Traumreise, was wir tun können, ist es im Grunde nach links auszurichten , zum Beispiel so. Und stellen Sie sicher, dass Sie das gleiche für hier tun, aber richten Sie es an dieser Rasterlinie aus. Nun für den Text, Lassen Sie uns nach innen gehen und es zentrieren ausgerichtet. Da wir das hier ausrichten, kann ich einfach hier schweben. Also da hast du es. Und dann kann ich einfach meine Inhalte verwenden und sicherstellen, dass sie zentriert sind. Und dann kann ich diese einfach auswählen, um sicherzustellen, dass sie so zentriert sind. Nun, wir haben all diesen leeren Raum dazwischen. Also werde ich es tatsächlich auf 100 reduzieren, zum Beispiel, einfach diesen Abschnitt schweben und dann können Sie es anpassen. Und jetzt zwischen diesen beiden sind es 150, was in Ordnung ist. Bevor ich dich verlasse, werde ich das Gleiche für diesen Abschnitt hier tun. So springen Sie einfach in den Inhalt. Achten Sie darauf, diese vertikale Polsterung zu verwenden. Ich werde einspringen und mein Bild hier erweitern. Und dann den ganzen Weg bis hierher. Stellen Sie sicher, dass dies nach links geht. Stellen Sie sicher, dass dies zu diesem Anstieg geht. Sie schließlich sicher, dass der Text so zentriert ausgerichtet ist. Und stellen Sie sicher, dass Sie es zunächst an der linken und Rasterlinie wie folgt ausrichten, damit wir unseren Knopf anpassen können, ihn vier Spalten breit zu machen. Also ist es das Gleiche, wie wir es vorher genau dort gemacht haben. Und schließlich, wählen Sie es aus, stellen Sie sicher, dass alles später in der Mitte ist, um beide für sie auszuwählen. Stellen Sie sicher, dass sie sich in einer Mitte befinden, klicken Sie hier und passen Sie dies dann auf 100 an. Aber Sie können auch tun, ist offensichtlich klicken Sie hier und dann verwenden Sie 100, drücken Sie die Eingabetaste, und da haben wir es. Offensichtlich bleibt das als 150. Egal, wie viele dieser Stapel Sie haben, sie werden einfach schön nach unten anpassen. Und jetzt, da wir unsere Inhalte so haben, müssen wir unseren Flughafen ganz nach unten erweitern , damit er unsere Fußzeile aufnehmen kann. Wie gesagt, ich gehe jetzt weg und arbeite an diesen drei und beende dann Abschnitte, die genau die gleichen Einstellungen für alle unten verwenden. Also Europa, Asien, Amerika, und was ich meine, Afrika. Und dann komm im nächsten Video zurück und erkläre dir, wie wir das alles abrunden können? Wir werden zuerst an diesen Zeugnissen arbeiten, dann an diesen drei Karten, die ganz einfach sein werden. Schließlich werden wir die Fußzeile wiederholen und dann diese Größe beenden. Oh, noch eine Sache für unsere Top-Destinationen. Lassen Sie mich Ihnen zeigen, wie wir daran arbeiten können. Also zuerst Dinge zuerst, für diesen ersten Zustand, werde ich es einfach Top-Ziele bewegen und dann meine Pfeile wieder so einbringen. Weil dieser hier ganz einfach sein sollte, weil wir, wie Sie sich erinnern, nicht zu viel mit ihnen gemacht haben. Also lassen Sie mich die beiden hier schließen. Also, was ich tun werde, ist das Gleiche für alle von ihnen zu tun. Also mal sehen, wir werden an vier Spalten so sein. Aus irgendeinem Grund. Mal sehen. Das Gleiche mit dem Inhalt ist hier nicht richtig, während der Text nicht richtig ist. Also lasst uns darauf klicken und die automatische Höhe sehen. Malediven. Ich weiß nicht, warum sie nicht in der Mitte sind. Es sollte so sein, aber es bricht irgendwie das Ich weiß nicht, was passiert ist. Feststoffe haben sie so gewechselt. Also vier Säulen breit. Und dann, wann ich hier reinspringe und einfach mein Bild hier erweitern soll. Und das sollte so in der Mitte sein. Ich weiß also nicht, warum das passiert ist, aber wie Sie sehen können, können Sie ganz einfach anpassen. Was wir hier tun können, ist auch die Höhe unseres Bildes anzupassen, wenn wir wollen. Aber ich werde mich nicht mit zu viel beschäftigen. Was ich schließlich tun werde, ist unsere Inhalte so auszuwählen. Geh zu unserem Horace Date, genau da. Springen entscheiden treffen Kontrolle V Ich werde es von hier entfernen. Und was ich tun werde, ist ein wenig zu zoomen und dann das auf acht zu bringen. So wie das. Wechseln Sie zum Standardstatus zurück. Und ich weiß nicht, warum du gesehen hast, dass ich Inhalte hier kopiere. Dann werde ich schweben. Und jetzt steht es dem Inhalt gegenüber. Also weiß ich wirklich nicht manchmal diese XD mit all diesen Problemen. Aber im Großen und Ganzen ist es nur, weil ich all diese andere Software verwende , weil ich meine y aufnehmen muss, muss ich dieses Video aufnehmen. Ich muss eine Art von, die ich nicht weiß, all diese verschiedenen Tools im Hintergrund ausführen , also ist es wahrscheinlich alles bis zu dem. Also möchte ich Ihnen schnell zeigen, weil Sie sehen können, dass dieser Text wirklich wild läuft. Also lassen Sie es zuerst reparieren, bringen Sie es hier, zum Beispiel, weil wir innerhalb dieser vier Spalten sein werden, die wir sollten, das ist in der Mitte. Dann bringe ich das und das ins Zentrum. Dann werde ich meinen Text wirklich entfernen. Lassen Sie uns zwei hier sehen, also und stellen Sie sicher, dass dies in der Mitte ist. Was ist überhaupt eine Rolle? Sie können einfach alle auswählen und direkt hier klicken und sicherstellen, dass sie sich in einem Zentrum wie diesem befinden. Klicken Sie abschließend auf den Inhalt. Springen Sie in einen Horror-Zustand basiert. Löschen Sie die alte. Was sind die neuen? Doppelklicken Sie, vergrößern Sie die Maske, und klicken Sie schließlich rechts hier, und bringen Sie sie dann auf acht. Und Milchherde geht in den Standardzustand und wir gehen mit diesem. Lassen Sie uns zuerst mit diesen Röhren umgehen. Also, denn ich werde sicherstellen, dass dies in der Mitte eines Drecks ist. Ich weiß nicht, warum. Mit Adobe XD passiert heute etwas wirklich Seltsames. Ich weiß nicht warum, aber es weigert sich, aufzugeben. Also lassen Sie uns unseren Text so ausrichten und machen wir es auch mit dem Preis, sehen, ob es so ist, es tut, was großartig ist. Versuchen Sie es endlich so. Etwas wirklich Seltsames passiert. Es zeigt also, dass meine aktuelle BG zwei hier ist. Aus irgendeinem Grund. Während ich erweitert und überprüft dies, wenn ich klicke und alle meine Elemente auswähle , klicken Sie rechts hier. Es reduziert die Größe. Also habe ich wirklich keine Ahnung, warum er das tut. Aber es spielt keine Rolle. Wir werden damit einschalten. Also werde ich es hier ausrichten. Und mal sehen, alle von ihnen sind in der gleichen Größe, was großartig ist. Und was ich tun werde, ist das Video hier pausieren. Also langweile ich dich nicht mit all diesen Details weil ich mich langweilig mit dem Urlaub dieses Andocken, weil ich immer wieder das gleiche mache. Also werde ich, wie gesagt, das Video hier pausieren, damit ich diesen Abschnitt beenden und dann zurückkommen kann , um Ihnen die Animation und alles zu zeigen. Und dann werde ich das Video pausieren. Und das Video, tut mir leid, damit ich all diese anderen Bereiche reparieren kann , und dann können wir zurückkommen. Wie gesagt, ich werde das Video pausieren, damit ich diese drei reparieren kann und dann zu dir zurückkommen kann. Und jetzt, da ich das getan habe, lass mich dich wieder auf den neuesten Stand bringen. Also werde ich diese drei auswählen. Hold Shifts sind die gleichen wie wir es vorher getan haben. Ich werde sie aus dem Weg bringen. Stellen Sie sicher, dass sie 30 sind. Klicken Sie dann rechts hier und stellen Sie sicher, dass diese an der Kante abgeschnitten ist. Stellt sicher, dass es hier abgeschnitten ist. Es ist, was großartig ist. Und schließlich, was ich tun werde, ist offensichtlich alle meine Ziele zu nutzen. Also werde ich auf Steuerelement C klicken dann zu meinem angeklickten Zustand gehen. Und was ich hier tun werde, ist Control V zu drücken, damit ich sie hier einfügen kann. Du löschst, und dann werde ich sie wieder hierher bringen. Ich werde auch die Änderung an dem Text vornehmen, den ich zuvor gemacht habe. Also unsere Top-Destinationen, und ich werde auch meine Pfeile direkt an Ort und Stelle bewegen, haben es gerade gesehen. Ich kann versuchen, meine Animation am Laufen zu halten, damit ich sie nicht noch einmal wiederholen muss. Ich denke, das ist in Ordnung. Und lassen Sie uns in den Standardzustand gehen und sehen, ob die Animation korrekt funktioniert. Ich hoffe wirklich, dass es das tut. Wie Sie sehen können, haben wir wirklich viel in diesem Video gemacht. Und ich mag, wie diese mit diesen kleineren Bildern funktionieren , denn jetzt kann der Inhalt hier viel besser passen. Aber ich muss dies auf die Standardschaltfläche ändern. Wir werden uns später damit auseinandersetzen. Dieser Abschnitt ist, Sie können sehen, dass es jetzt wirklich einfach zu lesen ist. Und hier sind wir. Also endlich, lassen Sie uns schnell überprüfen. Es funktioniert. Alles funktioniert und wir können direkt dort klicken. Und das Einzige, was ich hier gemacht habe, ist für den Monson Michelle, ich habe den Text geändert, aber er ist immer noch nicht zentriert. Also müssen wir das reparieren. Aber lassen Sie uns einfach die Animation überprüfen und sehen, ob es funktioniert. Das tut es, was großartig ist. Also werde ich den Monson Michelle ändern. Großartig hier und Destinationen. Mal sehen. Ich kann es hier verschieben. Etwas stimmt mit diesem Text nicht. Wie Sie sehen können, ist das mein Vorteil. Also ist es eigentlich der Hintergrund, wieder Tricks zu spielen. Aus irgendeinem Grund, wie Sie sehen können, kann ich es hier nicht ausrichten. sind also all die Bugs von Adobe XD und diese wirklich fortschrittlicheren Techniken, wie Sie sehen können, ist es ein Ausreißer hier, wirklich viel zu viel. Also lasst uns versuchen, es so zu tun. Also Breite ist 290 und hier ist es 290 eins. Also gehen wir mit 90 IDAT, und jetzt sieht der Text so aus, wie er sollte. Also, was ich tun werde, ist, all das wieder so zu bringen, und dann kopieren und fügen Sie es noch einmal ein. Sie also von der Standardeinstellung bis zum geklickten EntfernenSie also von der Standardeinstellung bis zum geklicktendiese und bringen Sie diese wieder ein. Positionieren Sie sie rechts unten, so dass sie genau gleich aussehen. Und schließlich, verschieben Sie diese Ziele hier. So Milchgewohnheiten, Todesfälle. Das ist unser Design für jetzt, das war's für dieses Video. Wieder einmal laufen wir ziemlich über eine halbe Stunde, aber wie Sie sehen können, gibt es eine Menge Inhalt zu zeigen. Und auch eine letzte Sache, die ich mit Ihnen für dieses Video teilen möchte, sind diese Bilder. Wenn Sie denken, dass sie zu groß sind, können Sie einfach hier springen und die Höhe Ihrer Bilder anpassen. Also sind wir in einer Höhe von fünf, mal sehen 520. So können wir die Dinge aufrunden, hier doppelklicken , neu positionieren und dann dasselbe für die untere tun. Also werden wir es auf 520 positionieren, so. Und weil wir in einem Stapel sind, wie Sie sehen können, folgt der Inhalt wunderschön. Das war's also für dieses Video. Ich werde jetzt voran gehen und alle diese ändern und im nächsten Video zurückkommen , damit wir diese Seite beenden und dann zu diesen anderen Seiten weitergehen können. 43. Erstellen von Responsive Design 7: Lassen Sie uns jetzt fortfahren und beenden Sie diese Seite. Und bevor wir es tun, möchte ich nur unsere kurzen Details mit Ihnen teilen. Also lassen Sie uns sagen, ich ging voran und beendete all diese, also werde ich einfach voran gehen und diese kopieren. Und ich wollte Ihnen nur zeigen, was am besten für diese Zeilen und diese Guides funktioniert. Nehmen wir also an, wir wollen seine Größe zum Beispiel weiter auf drei Spalten reduzieren. Also über diese Trennwände, wie er im vorherigen Video sagte, denke ich, es ist am besten, wenn Sie diese verwenden. Verwenden Sie also einfach das Rechteck. Und dann, wenn Sie anfangen, die Rechteck-Größe wie folgt zu reduzieren, wird einfach dem Layout folgen. Sie können sich also vorstellen, dass wir es trotzdem schaffen. Also werde ich die Farbe für die Füllung so verwenden. Ich werde die Grenze entfernen. Ich werde die Höhe zum Beispiel auf zwei reduzieren. Und Sie können sich vorstellen, und wir können es sogar so weiter nennen. Und sagen wir, wir wollten unser Layout so anpassen, dass es drei Spalten breit ist. So kann ich einfach meine Trennwand auswählen. Ich kann mein Bild auswählen, und ich kann meinen Preis hier auswählen. Also mein Pfeil und meine BG-Karte, wenn ich die Größe verkleinere, können Sie sehen, dass alles folgt. Aber wir haben hier unten ein Problem mit diesen Trennwänden, weil sie Elide sind, das Beste, was zu tun ist, ist, zuerst die Breite von ihnen anzupassen. Also, was ich damit meine, ist zu suchen, loszuwerden, nur um dir zu zeigen, was ich meine, ein bisschen besser. Nehmen wir an, Sie wollen sie reduzieren. Und lassen Sie uns sagen, dass wir wollen, dass sie eine unvereinbarte Linie hier nur als Beispiel berühren. So können Sie darauf klicken, halten Sie Ihre Schicht und sagen, es ist zwei bis sieben. Also werde ich diese eins auf zwei bis sieben zum Beispiel anpassen. Und dann lassen Sie uns sagen, dass ich dies noch weiter auf etwas wie sagen wir, dass wir nur 3D eingeben wollen. Also drei Tage. Und jetzt wollen wir das hier erweitern. Das ist also der bessere Weg, denn diese Trennwände sind Linien und sie sind wirklich schwer zu verwalten als reaktionsschnelle Re-Size-Option. Deshalb sage ich, stellen Sie sicher, dass Sie sich zuerst mit ihnen befassen , bevor Sie zu all diesen anderen Inhalten übergehen. Denn jetzt, wenn wir es skaliert, wenn ich mein Bild auswähle, wenn ich mein Symbol hier für den Hover-Effekt und verwalten wählen Sie meine BG, zum Beispiel. Ich kann sie verschieben und Sie können sehen, dass der Inhalt wunderschön skaliert wird , während all dies bleibt. Deshalb sage ich einfach sicherstellt, dass Sie die Änderung für diesen Teiler vornehmen , bevor Sie alle diese anderen Änderungen n erneut anwenden, es ist mein oberster Tipp. Verwenden Sie diese Linien nicht als Trennlinien. Stellen Sie sicher, dass Sie immer das Rechteck-Werkzeug verwenden, da es viel besser folgen wird, wenn Sie mit dieser Responsive-Größenänderung arbeiten. Und noch eine Sache, die in dieser Klassenansicht der Arbeit mit diesen Stacks und mit diesen Gruppen zu beachten ist. All dies sind erweiterte Optionen, die vor relativ kurzer Zeit in Adobe XD eingeführt wurden. Daher lernen wir alle, wie dieses Tool wächst, da dieses Tool aktualisiert wird, denn dies ist eine brandneue Funktion, die erst vor ein paar Monaten eingeführt wurde. Und einige dieser Funktionen sind nicht einmal für diese Responsive Größe gedacht. Es gibt einfach nur für die Gestaltung gedacht, aber alle von uns als Designer erforschen all diese Optionen die ganze Zeit. Also, wenn Sie stecken bleiben, wenn Sie versuchen, etwas zu tun, es nicht funktioniert, versuchen Sie es umgekehrt. Versuchen Sie etwas anderes, versucht, es an Ihren Workflow anzupassen, und deshalb werden Sie viel bessere Optionen haben. Wie gesagt, ich habe sie alle gemacht. Und, und lassen Sie mich schnell zeigen, zum Beispiel, in dieser Karte, was ich getan habe, ist offensichtlich alles in der Content-Karte enthalten. Ich ging hinein und reduzierte die Höhe dieses Bildes auf 200. Dann ging ich in meine mittlere Mappe. Ich reduzierte die Trennwand auf 66. Das habe ich für alle getan. Und dann reduziere ich das Ziel zwischen diesen beiden, 230, also zwischen Tagen und den Symbolen. Und wie gesagt, wenn Sie noch weiter gehen wollen, können Sie tun, was ich gerade getan habe. So zum Beispiel, anstelle von 12 Tagen, können Sie einfach 12 d schreiben und die Leute werden verstehen, denn das ist im Grunde offensichtlich Abkürzung von Papa und die Mehrheit der Menschen verwenden, dass, vor allem in der mobilen -Apps. Und natürlich, im Horrorzustand, was ich getan habe, ist einfach den Hintergrundschatten von acht enthalten. Also ging ich in das Ziel BG, klickte rechts hier 8% und erweiterte dies einfach auf AD2, so 82 in der Breite, so dass Sie diesen Pfeil ein bisschen deutlicher sehen können. Und schließlich, doppelklicken Sie hier und einfach erweitert diese Bilder und das ist es im Grunde. Ich habe sie einfach alle ausgerichtet. 30 ist das Ziel zwischen jeder der Karten und eine einfach kopiert und eingefügt diese Effekte. Und im Grunde für die zweite Animation hier, alles, was ich getan habe, ist einfach diese für den linken Tab-Punkt zu verwenden, tippen Sie auf Auto animieren, Standardzustand. Also, das geht zurück und einfach alle meine Städte verschoben und alle meine Karten verschoben. Sie können also sehen, dass die letzte hier Carta Hannah ist. Aber wenn ich hier klicke, ist es Miami. Also habe ich sie einfach nach links und rechts bewegt, im Grunde genau das, was ich vorher getan habe. Deshalb habe ich gesagt, dass ich nicht zu viel von deiner Zeit verschwenden will. Ich möchte mit dieser Klasse so schnell wie möglich bewegen, ohne dabei etwas Tempo zu verlieren. Was wir also mit den Testimonials tun werden, zuerst den Text genau hier ausgerichtet. Und ich werde auch das ausrichten, die Scroll-Gruppe ist. Ich habe den Namen fast vergessen, also werde ich ihn einfach an den Rasterlinien ausrichten. Mal sehen, ob das richtig ist. Ich glaube, das ist es. Ja. Wie gesagt, richten Sie es an unseren Rasterlinien aus. Und deshalb ist das einzige, was übrig bleibt, diese Zeugnisse nach innen zu bringen. Ich wähle mein Zeugnis aus und bringe es hierher, also an den Rand. Und genau hier, was ich tun werde, ist einfach die Größe zu ändern. Aber bevor ich das mache, lassen Sie uns schnell mit den Pfeilen umgehen. Also werde ich einfach die Pfeile so hineinbewegen. Und das kann ich für alle tun, bevor wir überhaupt Fortschritte machen. So Zeugnis, ich kann einfach doppelklicken, ändern Sie meine Pfeile, bewegen Sie sie zu hören. Ich kann zum Zeugnis drei gehen, und ich mache diese Dinge gerne, denn wenn sie sich wiederholen, ist es besser, sie eins nach dem anderen zu machen. Also, wenn du zum Beispiel Pfeile machst, wie ich es jetzt tue, ist es am besten, sofort mit ihnen umzugehen. Dann kommen zwei dann nach ein paar Versuchen zurück und dann vergessen, was Sie dann so etwas getan haben. Wie Sie sehen können, bleiben die Zahlen gleich. Unsere Animation wird sich also nicht ändern. Die Pfeile bleiben gleich und jetzt werden wir uns mit unserem Wagen befassen. Also werde ich diese Karten öffnen, Zeugenausweis Nummer eins. Und das Einzige, was ich hier tun werde, ist, zuerst einmal, lassen Sie uns die Größe der Karte reduzieren. Bringen wir es gleich hierher. Dann werde ich auf meinen Text klicken, der in automatische Höhe umgewandelt wurde. Und ich werde es im Grunde auf hier ändern und dann so etwas anpassen. Ich bin nicht hierher gefahren. Und ich werde es aktualisieren. Nur mein nächster Urlaub sollte passen. Mal sehen, ohne meine so für den nächsten Urlaub. Und sehen wir 40 genau hier. 40 genau hier. Ich werde diesen Text einfach kopieren, denn wenn Sie sich erinnern, haben wir genau das gleiche Zitat für alle von ihnen verwendet. Also werde ich hier auf dieses konvertierte Doppelklick Control V klicken. Aber ich sollte es immer noch so machen, weil es die Breite ist, die sich ändern wird. Also mal sehen, Breite ist fünf oder vier. Also, wenn ich es hier ändern kann, also 500 für, mal sehen, ob es funktioniert. Das tut es. Also lassen Sie uns 1234 Zeilen sehen. 1234 Linien, die groß ist, und Ziel ist genau hier. Also 5, 4. Ich werde direkt hier springen, konvertiert, dann Datei für gehen, dann klicken Sie rechts hier, Kontrolle V, so. Denn dann wird es in diese konvertierten Texte einfügen oder fünf oder vier. Klicken Sie nun auf Control V und stellen Sie sicher, dass Sie sie so tun. Ich werde zur ersten Karte springen. Mal sehen, was das ist und das Ziel. Also ist es, die Breite ist 930. Also kann ich weitermachen und all das ändern. Und weil wir hier einen Stapel verwenden, werden sie sich anpassen. Also lassen Sie uns mit 930 I gehen, dass, und Sie können sehen, dass es sich schön anpasst. So können wir mit geschlossenen Tags gehen, gehen Sie mit diesem. So 930 Bild wird sich nicht ändern, es wird gleich bleiben. Wir ändern nur die Breite dieser Karten. Also lass uns 930 so sehen. Und da haben wir es. Auch die Entfernung bleibt gleich. Aber zwei, du wirst es ändern. Sie können sehen, dass es den ganzen Weg bis hier geht. Ich werde es so an meine Kunsttafel zurückklemmen. Und noch einmal, Jacke ist es funktioniert, es ist gut. Also, was ich tun werde, ist, ich denke, du rätst an dieser Stelle, kopiere einfach diesen Text oder ich muss es nicht einmal. Ich kann es einfach in der Mitte positionieren, aber ich werde Zeugnisse und die Texte kopieren oder ich werde mich nicht zu sehr mit ihnen beschäftigen, diesen Zustand gehen. Klicken Sie hier. So entfernt Abschnitt Titel und Zeugnisse. Und von diesem werde ich zum Beispiel einfach alle meine Karten auswählen und diese dann verschieben, um sie an meinen Rasterlinien auszurichten. Also nur ein bisschen mehr so. Und dann werde ich diesen Abschnittstitel kopieren. Also muss ich das nicht zweimal tun. Also Control V, Sie können sehen, dass es Enten sind. Es ist auf diese zweite fixiert. Lassen Sie uns nun unsere Zeugnisse zu diesem dritten bringen. Und im Grunde mache ich das, nur damit ich sie nicht animieren muss. Schließen Sie sie erneut, wählen Sie den Abschnittstitel an ihm und fügen Sie ihn schließlich hier ein. Und springen Sie in die Zeugnisse. Und schließlich schieben Sie das letzte nach hier. Sehen Sie einfach ein Ausrichten. Sieht gut aus. Und das ist es im Grunde. Jetzt lassen Sie es uns überprüfen und sehen, ob es funktioniert. Also lasst uns unsere Vorschau treffen. Es sollte funktionieren, weil wir diese Pfeile nicht geändert haben. Wir haben einfach ihren Platz verlegt. Hier sind wir. So funktioniert Schrecken immer noch, was großartig ist. Sie können sehen, dass dies immer noch funktioniert und es passt in die Gesamtheit unseres Bildschirms. So können Sie sehen, dass Zahlen funktionieren, alles funktioniert, was großartig ist. Also gehen wir jetzt zu diesen Abschnitten direkt hier. Wieder einmal, weil wir 12 Spalten haben, werden wir sie 66 teilen. Also werde ich in diesem doppelklicken, um es zu reduzieren. Also 1, 2, 3, 4, 5 , 6, und Ziel wird 60 bleiben. Das wird sich also nicht ändern. Ich werde es anpassen und weil es nur ein Bild ist, passt es sich gut an. Was werden Sie tun, ist meine Farbe zu verstecken, Overlay, doppelklicken Sie auf meine Karte und verwenden Sie Shift 1, 2, 3, 4, 5 zum Beispiel. Und es ist wichtig, sich daran zu erinnern, denn wenn Sie in Hover gehen, dann öffnen Sie es, verstecken Sie das. Doppelklicken Sie auf 1, 2, 3, 4, 5, damit das Bild an genau der gleichen Stelle bleibt. Sie können sehen, es ist immer noch eine vergrößert auf Hover, aber das Bild bleibt an der gleichen Stelle. Also gehen wir hierher, um zu schweben, weil wir das überhaupt nicht geändert haben. Es sollte gut funktionieren und es tut. Ich bin damit zufrieden. Und schließlich, Schema-Reisen, ich werde mit hier zu bewegen, positionieren Sie es bis zum Ende unseres Rasters und tun Sie das gleiche für den Hover. Wenn ich es ändere, können Sie sehen, dass es immer noch funktioniert und aussieht, wie es sollte. Also, jetzt gehen wir weiter. Und was uns im Grunde bleibt, ist nur die Fußzeile. Also die Fußzeile, Fußzeile ändert sich ziemlich viel, offensichtlich, wie Sie in diesen Größen sehen können. Aber im Grunde, was ich tun werde, ist, das zu verstecken. Ich werde hier doppelklicken und dieses Mädchen so positionieren, dass es grob in der Mitte ist, aber vielleicht ein bisschen nach links so versetzen, nur damit wir unser bisschen mehr visuelles Interesse bringen können. Und lasst uns versuchen, sie auszurichten. Also lassen Sie uns Bild sehen. Und versuchen Sie, diesen Inhalt so in der Mitte zu positionieren. Und mal sehen, was wir mit all unseren Informationen machen können. Also zuallererst. Lassen Sie uns mit diesem Hauptnav umgehen. Was ich also tun werde, ist tatsächlich eine andere Art von Stack zu verwenden. Ich werde das hier benutzen. Und dann werde ich sicherstellen, dass ich so positioniert bin. Und mal sehen, die Entfernung hier ist 100. Vielleicht können wir es auf vielleicht 60 reduzieren, weil wir noch Desktop-Bildschirm haben, aber jetzt ist es viel kleiner. Also werde ich ins Innere dieses springen und ich werde es neu positionieren. So zum Beispiel hier. Und vielleicht kann ich das so ins Zentrum bringen. Dann werde ich dasselbe für dieses tun es so ins Zentrum bringen. Und ich bin mit diesem Ergebnis zufrieden. Jetzt für diese beiden werden wir sie einfach reduzieren. Sie können zum Beispiel etwas wie 40 tun. Ich denke, es wird gut funktionieren. Ja, ich denke, das funktioniert gut. Und Sie können sehen, dass wir immer noch das gleiche Problem mit dem Teiler haben, aber dieser ist einfach, weil Sie es einfach an Ihren Rasterlinien ausrichten und es einen Tag nennen können. Aber wenn Sie das nicht tun möchten, dann empfehle ich Ihnen wirklich, dass Sie Rechteck-Werkzeug verwenden und das als Teiler verwenden. Lassen Sie uns das als 60 wie diese verwenden , damit wir hier den gleichen Abstand haben können, Empfindlichkeiten hier drin. Und lasst uns das Gleiche hier machen. Ich könnte auch Shift verwenden, aber wie gesagt, manchmal entschied ich mich, diese zu verwenden. Nun für diesen, lassen Sie es uns schnell hier ausrichten. Also, was ich mit diesen tun werde, ist, Mal sehen unten Info. Ich kann es so umschalten. Ich kann, Es wird ein bisschen schwierig sein, auf diese Symbole klicken. Ich kann sie zum Beispiel so positionieren. Stellen Sie sicher, dass mein Instagram zum Beispiel in der Mitte ist. Dann werde ich den Abstand zwischen ihnen auf 60 reduzieren, so. Und was ich tun kann, ist, sie im Grunde anzupassen, wie ich will. Vielleicht kann ich das hier positionieren. Mal sehen, vielleicht können wir sie alle nach links bewegen, so. Und dann klicken wir hier und verschieben diese beiden einfach hier. Und dann endlich, erweitern Sie unsere Fußzeile. Also mal sehen. Vielleicht kann das sogar 240 sein, aber lassen Sie es uns so behalten. Weil wir 60 haben, haben wir 60 hier. Und mal sehen, was wir haben. Wir haben, glaube ich, 100 von oben. Also mal sehen. Ja, benutzen wir 80 nur ein bisschen. Also, was ich als nächstes tun werde, ist meine Fußzeileninformationen zu verwenden und zum Beispiel dupliziert, aber ich mag diese Allgemeinen Geschäftsbedingungen nicht. Also, was ich versuchen werde, ist vielleicht, es hier zu positionieren und dann das hier zu erweitern. Sie können sehen, wie einfach diese Stapel zu verwenden sind, besonders wenn Sie nicht die gleichen Abstände zwischen Ihrem Artikel haben möchten. Also sind sie wirklich ganz einfach, wenn man sie aufhängen kann, offensichtlich. Also, wie ich sagte: Nun, ich werde tun, denn was wir hier gemacht haben, haben wir 80. Ich werde diese Informationen duplizieren und einfach Shift und Bottom Pfeil acht Mal verwenden. Und dann bewegen Sie mein Bild und nach unten, bis es hier trifft und verschieben Sie auch meine Farbüberlagerung. So wie so. Und dann löschen Sie diese Kopie, die ich erstellt habe und Milchherde, wir haben unsere Fußzeile abgeschlossen. Jetzt, da alles fertig ist, doppelklicken Sie einfach hier. Positionieren Sie es hier, und da haben wir es. Das ist also unsere Seite. So sieht es aus. Wie Sie sehen können, sind einige Elemente wirklich ziemlich schwierig, wie diese zu verwalten. Aber noch einmal, wie ich mehrmals in dieser Klasse sagte, wenn Sie nicht zu viele dieser Effekte haben wollen. Denn wieder einmal haben wir den einfachen Hover, wo dieses Bild vergrößert, wo sich dieser Pfeil erweitert. Und dann haben wir noch einen Hover innerhalb dieses Pfeils. Wenn Sie nicht alle diese Elemente möchten, können Sie einfach ein einfacheres Layout verwenden, wie wir es hier hatten. Also im Grunde alles, was sich hier ändert, ist Zoomen des Bildes und dann Schlagschatten im Hintergrund. Das musst du nicht mal tun. Sie können einfach den Schlagschatten im Hintergrund verwenden, der die meisten Bedürfnisse genügt. Aber noch einmal wollte ich Ihnen dieses wirklich ziemlich komplexe Layout zeigen. Aber Sie können deutlich von all diesen Einstellungen und kommen herum, um all diese verschiedenen Optionen zu erkennen . Es wird viel Zeit brauchen, um N zu meistern und zu ändern, um Änderungen an all diesen Elementen vorzunehmen. Denken Sie also daran, besonders wenn Sie mit Ihrem Projekt beginnen, stellen Sie sicher, dass Sie all diese Zeitkosten berücksichtigen, da es Zeit kostet. Und Sie können sehen, wie lange es dauert Gerechtigkeit zu schaffen, eine Seite und machen es reaktionsschnell. Und wir haben noch drei weitere Seiten in diesem Projekt. Offensichtlich werden sie nicht so knifflig sein wie diese Homepage. Deshalb habe ich dir Homepage gezeigt, weil du dann einfach alle diese verschiedenen Änderungen auf all diese anderen Seiten anwenden kannst. Aber Sie können sich vorstellen, wie gesagt, stellen Sie sicher, dass all das in genau hier von Anfang an in diesem Brief zu berücksichtigen. Stellen Sie also sicher, dass Sie beim Einbeziehen des Budgets darauf achten, dass Sie das innerhalb des Budgets berücksichtigen, für wie viele Auflösungen sie wollen. So können Sie Desktop, kleine Desktop, Tablet, Telefon sehen , und schließlich, stellen Sie sicher, dass Sie das in die Projektzeitleiste aufnehmen, weil offensichtlich wird es viel mehr und viel länger dauern , als wenn Sie, zum Beispiel, nur tun, sagen wir, drei verschiedene Größen oder zwei verschiedene Größen. Das war's also für diese Seite. Im nächsten Video gehen wir auf diese Seite, die Doppelseite ist. Und darin werden wir Hamburger-Menü erstellen. Das wird also eine ganze Reihe zusätzlicher Herausforderungen und Veränderungen schaffen , die wir gemeinsam angehen werden. Also sehe ich dich dort. 44. Erstellen von Responsive Design 8: Beginnen wir mit der Tablet-Größe. Und wie ich in mehreren dieser vorherigen Videos sagte, Es wird viel anders sein, weil wir jetzt alle unsere Staaten entfernen. Da alle unsere Horace Staaten, Das ist, weil wir nicht in der Lage, auf Tablets jetzt auf einigen Tablets mieten, offensichtlich Windows-Tablets, vor allem Sie, werden eine Fähigkeit haben, die Maus zu verwenden, zum Beispiel, und zu schweben und auch auf einigen anderen Tablets wie Samsung-Geräte zum Beispiel. Sie haben Schulden DAX-Option. So können Sie dies auf diesen Geräten tun, aber auf den meisten Geräten können Sie keine Maus anschließen. Und deshalb, all diese Geräte, weil sie Touchscreens haben, ist es viel besser, Ihre Designs für Touch-Erlebnis zu optimieren. Also gehen wir mit 76 acht genau hier. Also lasst uns das schnell auf 768 ändern. Und was wir hier tun werden, ist, mal sehen, wir werden acht Spalten verwenden. Also lasst uns hier reinspringen, wäre es, bis acht zu gehen. Und genau hier werden wir 296042 verwenden. Also 29, 60, und 40, dies zu tun 8296042. Und im Grunde ist das Gemälde, das sich ändern wird, unsere Navigation selbst. Also werden wir das Hamburger-Menü erstellen. Aber bevor wir es tun, ist das, was ich eigentlich tun will, hier reingesprungen. Und lassen Sie uns schnell einige Dinge organisieren, weil wir keine zusätzlichen Dropdowns innerhalb von Dropdowns innerhalb dieser Menüs machen, denn das würde nur eine Verwirrung schaffen. Also kann ich Ihnen ein Beispiel geben. Wir haben jetzt das Ziel. Wenn Benutzer dort tippen, wird der Zielbereich geöffnet. Also lasst uns auf Schulden klicken. So wird es alle diese zusätzlichen Optionen öffnen. Und wir sehen, wir haben alle diese zusätzlichen Hover-Optionen. Wir haben alle diese Trennwände, wir haben alle diese Optionen. Wenn sie zum Beispiel auf einen Winter klicken, haben wir alle diese plus die Schaltfläche, die schweben wird und alles andere. Wir werden nichts davon direkt hier tun, innerhalb der Tablet-Version und innerhalb der mobilen Version, nur wegen des Platzes. Das einzige, was wir haben werden, ist das Menü-Symbol hier. Also, wenn Sie auf sie treten, wird es nur öffnen diese so Destinationen, Winter Wellness und so weiter. Und sobald sie zum Beispiel auf die Zielseite klicken, bringen wir sie zur Zielrede, wo sie verschiedene Optionen wie diese erkunden können. So können sie all diese verschiedenen Optionen für Destinationen sehen, eher diese. Und Sie können sich vorstellen, dass es hier auf der linken Seite ein Menü oder genau hier oben sein wird, wie wir es hier getan haben. So können sie verschiedene Ziele nach Preis, Dauer der Reise, Aktivitäten und so weiter wählen. Daher können sie klopfen und diese Optionen verwenden. Also, das ist, warum wir sparen Platz auf einer Tablet-Version, weil wieder, Sie können nur vorstellen, Benutzer können auf die Ziele tippen. Und dann innerhalb der Destinationen haben wir all diese Möglichkeiten. Dies sind zusätzliche Dropdown-Menüs unter zusätzlichem Dropdown-Menü. So erzeugt es nur eine Menge Verwirrung. Es schafft nur eine Menge unnötiger Unordnung. Und deshalb möchte ich sie alle entfernen und einfach reinlegen. Eine einfache fiel aus. Also, was wir zuerst tun werden, ist, einige dieser Dinge anzupassen. Also gehen wir hier und ich werde es, mal sehen. Also haben wir 76 8. Ich werde anpassen, dass für einen primären Enabler 76 8 so sind. Und mal sehen, vielleicht kann man die Größe meines Logos nur ein wenig reduzieren? Zum Beispiel, springen Sie nach innen zu meinem Login, halten Sie meine Umschalttaste gedrückt und passen Sie zum Beispiel so etwas an, weil ich nicht möchte, dass es viel zu groß ist. Und lassen Sie mich schnell meine Logo-Tap-Punkte anpassen, damit es nicht zu sehr auffällt. Aber wir werden es in diesem Fall nicht animieren, weil wir Schuldenmenü-Symbol haben werden . Jetzt, um loszulegen, werde ich all diese einfach so nach unten bewegen. Und wir werden unsere primäre jetzt Unschärfe zurückbringen, nur weil wir sehen können, was wir auf diese Weise etwas besser machen. Und ich werde es auf einen Schwimmer hier ausdehnen. Also 10, 75, ich denke, es wird gut. So wie das. Und das ist in Ordnung. Ich werde es einfach so bewegen. Und lasst uns wirklich erweitert sehen, wohin bringt es uns? Also 1018, okay. Und wie gesagt, wir werden diese Gegenstände einfach hier behalten. Und weil wir 20 haben, können wir zum Beispiel 50. Aber auch wichtig 60. Weil wir jetzt viel mehr Platz haben, um herumzuspielen , weil wir ihn hier reingebracht haben. Oder was wir tun können, ist, dass Sie sie so teilen können. Dann können Sie innen doppelklicken. Stellen Sie sicher, dass dies in der Mitte, dieser Newsletter. Und bewegen Sie es zum Beispiel einfach hier und bringen Sie es hierher zurück. Auf diese Weise haben wir viel mehr Platz, aber wie gesagt, ich denke, so sieht es ein bisschen besser, ein bisschen sauberer und ein bisschen enger zusammen. Das nächste, was ich tun werde, ist tatsächlich die Logo-Linie erstellt. Also, um das zu tun, werde ich einfach irgendwo hier klicken. Verwenden Sie zum Beispiel mein Rechteck-Werkzeug, springen Sie direkt hier und erstellen Sie diese schöne und einfache Linie. Mal sehen, zum Beispiel, und Analysten verwenden, zum Beispiel, 56 Wochen, neun. Ich denke, das ist ein bisschen zu groß. So zum Beispiel 56 mit fünf. Mal sehen. Ja, ich glaube, das funktioniert. Ein Tod sieht etwas besser aus. Und ich kann einfach ganz hineinzoomen. Klicken und halten Sie die Umschalttaste gedrückt, damit ich diese abgerundeten Kanten erstellen kann . Meine Grenze entfernt. Und mal sehen. Ja, ich denke, das funktioniert wirklich gut. Lassen Sie uns es tatsächlich hier positionieren und sehen. Ich denke, das ist gut. Nennen wir es Zeile. Drücken Sie zum Beispiel die Position „Control D“ und „C“. Ich denke, Bräune ist viel zu viel. Mal sehen, vielleicht acht. Ja, Kontrolle D noch einmal. Acht. Cert und einfach so ausrichten, weil wir es in nur einer Sekunde animieren werden. Also, was ich tun werde, ist Gruppe es getroffen Control G, Qualität und Menü. Ich sehe, ja, Für Menü-Symbol, drücken Sie Control K, um es als Komponente zu machen. Und dann mal sehen, wir können diese beiden Gruppen sind nicht gruppiert, sondern positioniert ihn so. Und mal sehen, wir sind 34, vielleicht schaffen wir es ein bisschen mehr. Mal sehen, 40. Ja, ich denke, das ist gut. Denn jetzt verlassen wir den Platz hier an der Spitze für die notwendigen Browser-Käufer oder Sachen wie das, die gehen, um in verschiedenen Tabletten kommen. Zunächst einmal, was ich tun werde, ist, dass wir diesen Standardzustand haben, und ich weiß nicht warum. Es zeigt mir diese Bearbeitungs-Hauptkomponente. Ich weiß nicht, warum. Aber trotzdem, lassen Sie uns einen neuen Zustand schaffen. Ich werde es angeklickt nennen. Und innerhalb dieses angeklickten Zustands werde ich es in dieser Zeilenposition genau hier verwenden. Verwenden Sie diese Linienposition rechts hier, Mittellinie, die Sie nicht sehen. Also lassen Sie mich hervorheben, dies zu schreiben. Das ist also die Mittellinie. Ich werde einfach meinen alten Schlüssel halten und ihn den ganzen Weg hineinbringen bis er im Grunde diesen kleinen Kreis schafft. Also den ganzen Weg bis hier zum Beispiel. Und ich kann zwei Mal 0 drücken. Lassen Sie mich die beiden zurückbringen. Grundsätzlich auf diesem ersten werde ich es zum Beispiel drehen, so. Also lassen Sie uns sehen, dass 60 C45 führen, um mit 60 zu gehen und sehen, wie das aussieht. Halten Sie einfach die Umschalttaste gedrückt, bis Sie 60 erreichen. Ich denke, das ist zu viel. Also 45, und bringen Sie das auf 45. Ich denke, das funktioniert gut. Also jetzt haben wir Standard und wir haben geklickt. Also lasst es uns entfernen. Wenn wir zurück zu hier, zu unserem Menü Menü-Symbol, jetzt haben wir den geklickten Zustand. Du kannst es sehen. Also lasst uns schnell Prototyp bei. Also, wenn Benutzer rechts hier klicken, wird es mit dem Tippen automatisch animieren, geklickt Status, Lockerung und Nullpunkt gehen . Lassen Sie uns mit 0.4 gehen und sehen, wie das wie ein onclick-Zustand aussieht. Wieder einmal, sobald sie auf Kriterien klicken, DAP automatisch animieren, Nullpunkt für annelids vereinfachen, kehren Sie zum Standardzustand zurück. Lassen Sie uns Vorschau auf es wirklich schnell drücken, um zu sehen, wie es aussieht. Da haben wir es. Wir haben diese schöne und schnelle Animation. Wenn Sie denken, dass es zu schnell ist, können Sie es auf 0,6 reduzieren. Aber ich denke, es wird so gut funktionieren. Und wie ich schon sagte, wie Sie sehen können, haben wir jetzt eine gute Menge an Platz genau hier an der Spitze. Also lassen Sie uns unsere Artikel anpassen. Gehen wir zurück zum Design. Und was ich hier tun werde, ist im Grunde entweder sie auf eine Seite zu stellen oder sie hier nach links zu legen, zum Beispiel. Aber weil wir diese in der Mitte haben, auf der Unterseite, werde ich tatsächlich dasselbe für DES tun. Also ich gehe, was ich tun werde, ist die Auswahl tunesisch zu verwenden und im Grunde alle diese Ordner zu entfernen, weil wir sie nicht mehr brauchen werden. Ich werde alle diese Gruppen sollten Gen kontrollieren, genannt ihn, zum Beispiel Menüpunkte. Das Und dann benutze einfach den Stapel. Verwenden Sie diesen Stack und passen Sie meine Menüpunkte grundsätzlich so an die Mitte meines Kunstboards an. Wo 36, so stellen Sie sicher, dass wir 40 sind. Meine Dad Analysten bringen sie jetzt runter. Ich glaube, ich werde sie tatsächlich auf 80. Also mal sehen wie Schulden und wir haben 110. Also lassen Sie es uns so nennen. Also sind wir 100 und dann haben wir diesen leeren Raum unten. Also, was ich hier tun werde, ist tatsächlich Rechtsklick und Aufhebung der Gruppierung Komponente. Ich werde noch einmal Control G treffen es Hauptnav nennen. Aber Tablette. Dieses Mal, Ike, die Strg-Taste gedrückt. Und ich werde einen neuen Zustand schaffen. Aber in diesem Standardzustand, was ich tun werde, ist in hier zu springen, primäre nav Unschärfe wird bis zu einem Pixel gehen. Diese Menüpunkte verschwinden. Secondary Items, Ich werde sie verstecken und Menü wird so bleiben. Das letzte, was wir tun müssen, ist, tatsächlich den Tab-Punkt für unsere Menü-Taste zu erstellen. Also, um das zu tun und würde einfach direkt dort klicken, springen Sie in unseren Menü-Button. Und zum Beispiel, erweitert auf so etwas. Entfernen Sie den Rahmen, entfernen Sie die Füllung, verwenden Sie das Auswahlwerkzeug, bringen Sie es in, ich kann es sogar so lassen. Es spielt keine Rolle, denn wir werden auch den offenen Zustand animieren, sich ein wenig in der Höhe erweitern wird. So zum Beispiel wird so etwas in Ordnung sein und wir werden es einen Menü-Tab-Punkt nennen. Mein Dad. Dann gehen Sie zu unserem Zustand 2 , der unser angeklickter Zustand sein wird. Und dann drinnen, Mal sehen, ich kann das auf 1080 erweitern. Ich meine, dass ich meinen geklickten vom Standardstatus in den Status auf dem Menü-Symbol, sekundärem Nav ändern kann , es zurückbringen und Menüelemente angezeigt werden. Wir werden sie wieder so zurückbringen. Dann gehe ich zum Prototyp, öffne meinen Menüpunkt. Ich werde darauf klicken. Verwenden Sie den geklickten Zustand, vereinfachen Sie den Nullpunkt. Lassen Sie uns mit 0.6 gehen, weil wir das Menü schließlich öffnen. Und es sollte unsere Animation gut laufen lassen. Das Menü öffnet sich also schneller als der Rest. Menü-Symbol wird schneller animieren als der Rest des Menüs selbst. Aber ich denke, wir werden damit durchkommen. Also lassen Sie es uns überprüfen und gehen Sie zurück, um auf Status, primäre nav, Menü Registerkarte Punkt, und verwenden Sie dann genau die gleichen Einstellungen. Standardzustand drücken Sie Vorschau, und lassen Sie uns sehen, wie das aussieht. Wenn ich hier klicke, können Sie zunächst sehen, dass wir eine Panne hatten, aber das ist nur mein Computer, weil ich all diese Dinge im Hintergrund laufe. Aber wie Sie hier sehen können, läuft es wirklich reibungslos. Und all diese Gegenstände zeigen sich wirklich schön. Sie können sogar eine Maske einschließen, wenn Sie Maske sortieren möchten , wird Ihnen noch bessere Option geben. Also verstecken Sie einfach alle diese Elemente. So setzen diese Textelemente in einer Moschee es zum Beispiel irgendwo hier herum. Und dann, wenn Sie rechts hier klicken, wird die Maske den ganzen Weg nach unten erweitern, wie wir es für einige dieser vorherigen Elemente getan haben. Okay, lass uns jetzt weitermachen. Also, das ist es für diesen Teil 1 Ich werde als nächstes tun, ist das Heldenbild. Also lassen Sie uns für das Heldenbild selbst sehen, was ich tun werde, ist mal sehen. Zum Beispiel kann ich ein bisschen ein anderes Layout erstellen. Also mal sehen. Vielleicht kann ich einfach den Text-Explorer-Button verwenden, aber ich werde zum Beispiel meine Stimmung, meine Symbole unten verschieben. Also lasst uns das zuerst machen. Ich werde meinen Text hier ausrichten. Ich gehe zu Bild Nummer 2. Ich werde meinen Text verwenden, ihn an der Mitte ausrichten. Bild Nummer 3. Verwenden Sie meine textbasierte Suche, um zu überprüfen, ob alles so funktioniert, wie es sollte. Das tut es. Gehen wir also zurück zum Standardzustand und sehen, was wir mit diesen Symbolen tun können. Also zuerst, was ich tun werde, ist alles hier am unteren Rand unserer Textmaske zu positionieren . Und mal sehen, oder vielleicht noch besser, ich kann sie runterbringen. So 12345678, zum Beispiel. Dann werde ich meinen Text in die Mitte verschieben. Lassen Sie uns sehen, dass meine Schaltfläche auf vier Spalten breit ist, so. Und mal sehen, was ich für diese tun kann, ist, dass ich darüber nachdenke, wie kann ich mich dem nähern? Also mal sehen, wir sind bei 80. Und zum Beispiel kann ich sie durch nur eine Spalte teilen. So wie das hier. Und dann geh so. Nur um die Animation am Laufen zu halten und zu sehen, ob die Ausrichtung korrekt ist. Vielleicht können Sie mich einbetten, ich kann sie in der Mitte ihrer Säule genau hier positionieren. Also denke ich nur, was wird nicht ablenken der Benutzer will Tag Tab. Also müssen wir ihnen genug Platz zwischen diesen beiden geben , damit sie den Platz für ihre Zunge haben, zum Beispiel, nur um diese auf dem Bildschirm zu tippen. Aber wir wollen es immer noch schön und sauber aussehen lassen. Deshalb habe ich das getan. Also müssen wir sie alle in allen unseren Staaten ausrichten und sicherstellen, dass dies bei vier ist. Also lasst uns das schnell machen. Also Bild Nummer 2, ich werde den Heldenknopf direkt hier setzen. Stellen Sie sicher, dass es um vier Uhr ist. Ich sollte das auch dafür sein. Gehen Sie mit unseren Pfeilen und richten Sie sie einfach aus, um zu hören und zu sehen. Dies ist bei 80 und 18, dass wir das auch zu 80 erstellt haben. Wenn ich mich richtig erinnere. Ja. Also lasst uns das Gleiche tun. Und Zoos linken Pfeil Position zu hier und gehen mit dem rechten Pfeil Position hier. Und ich werde einfach sicherstellen, dass es am Rande ist. Ist es. Und um es nach links Pfeil zu gehen, sehen, ob es an der Kante ist. Ist es, was in Ordnung ist. Und jetzt bleibt uns nur noch Bild Nummer drei übrig. Also lasst uns das wirklich schnell beheben, manche so. Und schließlich bringen Sie die Pfeile noch einmal nach unten. Also werde ich mich so aufstellen. Und MIT sollte 80 von hier aus verwenden. Springen Sie ins Innere von hier, und stellen Sie sicher, dass Sie sie hier ausrichten. Und das hier bis hierher. Also verwende ich einfach Umschalt- und Pfeiltasten auf meiner Tastatur. Stellen Sie sicher, dass Sie diese nach oben ausrichten. Stellen Sie sicher, dass Sie diesen ausrichten. Ich bin Derek, wie es und jetzt, was ich nicht mag, ist der ganze leere Raum hier. Was wir also tatsächlich tun werden, ist angepasst, um zum Beispiel 100 von oben zu sein. Also, was ich tun werde, ist in den Standardzustand zu gehen. Und weil wir alle diese Optionen sowieso ausgewählt haben, werde ich meine Heldenmaske, Textmoschee, einen Heldenknopf und Pfeile auswählen . Ich werde sie hier ausrichten. Mal sehen, ungefähr zwei hier. So 12345678910, oder noch besser und gehen Sie zu 150. Jetzt gehen wir mit einem Begriff. Also mal sehen. Ich weiß nicht, was ich denke. Ja, ich denke, ich sollte einen Divider benutzen, weil das für mich in meinen nächsten Staaten viel einfacher wird . Also lasst uns hier positionieren und 100 gehen, so. Und ähnlich wie ich hier schreibe, klicken Sie und ziehen Sie meinen Teiler hierher. Es wird also am oberen Rand meines Helden-Textes stehen. Als nächstes gehe ich zu Bildnummer, um alle diese auszuwählen und sie einfach so nach oben zu verschieben. Foto Bild Nummer drei Wählen Sie alle diese aus, klicken Sie auf und verschieben Sie sie so nach oben. Und jetzt lassen Sie uns schnell eine Vorschau anzeigen und sehen, wie es aussieht. Also, wenn ich hier klicken, wird schön Übergang wie folgt. Und wenn Sie denken, dass diese Bilder nicht so gut funktionieren, können Sie sie anpassen. Aber was ich jetzt mag, ist, dass wir diese Yachten noch sehen können. Wir können diese Hütten noch sehen. Wir können den Strand der Leute sehen und sehen, wie die Leute hier ringen. Das ist also großartig. Und hier sehen wir den Flusssand in Paris. Das ist großartig. Und endlich hier in Peking können wir noch das Grübchen sehen. Das ist in Ordnung. Das funktioniert so, wie es sollte. Also achte nicht auf diese Störung. Weil, wie Sie sehen können. Wenn ich anklicke, verschwindet es. Es geht also nur um meinen Computer. Wie ich gesagt habe, können Sie diese Bilder anpassen, aber ich werde sie behalten, wo sie sind. Und das Letzte, was wir anpassen werden, ist diese untere Navigation. Also das erste, was ich tun werde, ist, diesen Knopf zu ändern. Also, weil dieser Knopf nur eine Spalte breit wagen, sorry, zwei Spalten breit, genau hier. Ich werde es tatsächlich unten verschieben und eine Art von diesem separaten Look erstellen. Also mal sehen, wir können das hier verschieben. Mehr Breite zu 100 zum Beispiel. Und dann verwenden Sie, Anwenden Taste, positionieren Sie es direkt hier. Stellen Sie sicher, dass wir zum Beispiel 40 so sind. Und was ich tun werde, ist tatsächlich ziemlich verändert. Also werde ich fünf für alle Winkel verwenden, für alle Kanten. Beachten Sie, verschieben Sie es hier. Erweitert, um beispielsweise vier Spalten breit zu sein. Dann gehen Sie in den Horror-Zustand, erweitert um vier Säulen breit als auch. Und auch drinnen von hier und stellen Sie sicher, dass alle von ihnen 5 sind. Da wir jetzt mehr Platz haben, werde ich Filter anwenden verwenden, die meinen Text kopieren. Springt in meinen Horace Zustand. Basierend in anwenden Filter und Molkerei haben. Also jetzt für all diese, Lasst uns das schnell anpassen, weil wir es nicht brauchen, um so weiß zu sein. Was du eigentlich tun wirst, ist einfach einige davon anzupassen. Also im Grunde, für die Suche, die die Haupt sein wird, werde ich eigentlich zwei Spalten verwenden. So etwas wie das. Und ich werde diese beiden hierher bringen. Ich werde auch meine Nähe hierher bringen. Also den ganzen Weg bis zum Rand und dann 12, denn wieder wird es den ganzen Weg bis hierher erweitern. So können wir jetzt in den angeklickten Zustand gehen. Und lassen Sie uns hier anpassen. Und lassen Sie uns eine Suche BG und schließen Symbol den ganzen Weg hier. So wie das. Lass uns zwischen ihnen gehen. Und ich müsste es hier noch ändern. Also, das, und das wird hier weitergehen. Bringen wir die Suche ein. Setzen Sie es auf 10 zum Beispiel, und wann Sie diese beiden so hineinbringen. Und jetzt mal sehen, ob wir es geschafft haben. Ja, jetzt sieht es toll aus. Also, bevor wir weitermachen, lassen Sie es uns schnell überprüfen und sehen, wie es hier aussieht. Klicken Sie also auf eine Suche direkt dort. Aber das ist nicht richtig ausgerichtet. Mal sehen, was du falsch gemacht hast. Und zuallererst werde ich diesen Horror-Zustand tatsächlich entfernen , weil wir ihn für diese Größe nicht brauchen , weil wir auf der Tablet-Größe sind. Also, was ich tun werde, ist, es tatsächlich zu kopieren. Wir befinden uns in einem Standardzustand. Ich werde die Gruppierung aufheben. Ich werde sagen, nennen Sie es einfach anwenden Taste und ich brauche diese Komponente tatsächlich nicht dort. Gehen wir zurück zur Suche und sehen, was wir falsch gemacht haben. Also auf dem Kleidungssymbol, werde ich diese auswählen, um hier zu klicken, um es direkt hier an diesen Rand zu setzen. Ich werde sicherstellen, dass es 20 nach links ist, so. Und dann werde ich den gleichen inneren angeklickten Zustand machen. Also werde ich es hier setzen. Und mal sehen, ich kann es zurückdrehen. Also gibt es so. Ich mache diese Kante und schiebe dann 1, 2 und schließlich so gedreht. Also, jetzt gehen wir zwischen ihnen. Ich werde meine Vorschau noch einmal treffen. Klicken Sie dort rechts. Und wie Sie sehen können, bleibt es jetzt dort, wo es nicht sein sollte. Hier steht die Suche nach Ausflügen. Alles dehnt sich gut aus. Also, was können wir hier wirklich anpassen? Wir können es so lassen, wie es ist. Wenn du willst. Lassen Sie uns eine Vorschau noch einmal. So können wir es so lassen, wie es ist, oder Sie können es noch mehr anpassen, wenn Sie wollen. Aber ich denke, ich werde es einfach so behalten. Wir können springen, es ist aus Booten Taten und einfach anpassen diese und geben vor allem der Art von Bit mehr Platz nach links und rechts. Aber es gibt eine gewisse Breite, um es nur um die Zeit willen zu halten. Und was ich tun kann, ist, das alles auf 80 zu verschieben. Also lassen Sie mich schnell wählen, dass einige unten nav. Wie Sie sehen können, sind wir bei 100 hier, also lasst uns es 20 nach oben bewegen. Und so sieht es in einer Prämie aus. Und übrigens, ich habe das nicht erwähnt. Wenn Sie zwei Bildschirme auf Ihrem Computer haben, können Sie tatsächlich eine Live-Vorschau erstellen. Und ich muss diese Erkundung jetzt auch entfernen. So können Sie eine Live-Vorschau erstellen, öffnen Sie einfach diese Vorschau klicken Sie hier, um es bis zur Desktop-Vorschau zu öffnen. Und dann können Sie diese Desktop-Vorschau auf den zweiten Bildschirm stellen und Sie können in Echtzeit entwerfen. Also lasst uns zum Heldenbild gehen. Gehen wir zu unserem Helden-Button. Und ich werde einfach meinen Text kopieren und mit der rechten Maustaste darauf klicken. Komm schon, taucht auf. Komponente aufheben, Control G. Und tut mir leid wegen all dieser Störungen, aber es ist nur meine Maschine. Es läuft nur ein bisschen langsam, weil ich zwei Versionen von XD, zwei Bildschirme von XD. Und ich führe auch all diese Software drauf. Ich führe diese vorherige von ihrer Audio-Software ist all diese Dinge. Deshalb können Sie all diese Störungen von Zeit zu Zeit sehen. Aber Sie sollten nicht all diese Störungen haben, wenn Sie anfangen, daran zu arbeiten. Also, jetzt entfernen wir das. Also jetzt, wenn ich Preview klicke und dann zurück zu hier, geh zurück zu hier. Sie können sehen, dass wir nur diesen leeren Knopf im Inneren haben. Wir müssen auch den Hover-Zustand von diesen Pfeilen entfernen. Was ich also tun werde, ist Aleve es im Hover-Zustand und dann die Gruppierung aufheben. Also lasst uns das machen. Lassen Sie uns schnell unsere Pfeile in Horace Zustand ändern, Pfeil nach rechts in Horace Zustand. Und ich werde zum Beispiel einfach die Gruppierung der Komponente aufheben. Nennen Sie es, richtig. In diesem Stadium, Control C. Ich werde die Gruppierung der Komponente Control G aufheben. Sie werden Pfeil nach links sein. Und es ist schnell Vorschau und sehen, ob es immer noch funktioniert. Wenn ich hier klicke, können Sie sehen, weil wir auf dem Horror-Anwesen waren, können Sie immer noch darauf klicken, weil wir nicht wirklich Pfeile animiert haben. Wir haben diese Punkte animiert. Gehen wir also voran und machen Sie das für Bild Nummer zwei. Also werde ich meine Pfeile öffnen. Ich werde die Gruppierung der Komponente Control G hier aufheben, Pfeil nach links. Tut mir leid, muss zuerst auf Botulinum in meinen Horrorzustand wechseln. Sie auf diese Weise mit der rechten Maustaste auf die Gruppierung der Komponente Steuerelement G, Pfeil nach links , Aufheben der Gruppierung der Komponente Steuerung G und oder Pfeil nach rechts. Und schließlich, lassen Sie uns das für den ersten Zustand tun, für die Standardstatuszeilen, Lassen Sie uns zum Hover wechseln. Wechseln wir zum Schweben. Also kontrolliere C auf Gruppe, kontrolliere G. Dort hast du es. Und schließlich Gruppierung der Komponente hier aufheben, Control G. und ich werde diese Milchgewohnheit mit dem rechten Pfeil umbenennen. Jetzt können Sie sehen, wie einfach es ist zu arbeiten. Nur weil Sie auf einer Tablet-Version all diese Horrorzustände loswerden. Also im Grunde wird das unseren Job viel einfacher machen , weil wir nicht unsere Staaten haben werden, zum Beispiel für diese Karten und diese Karten hier. Also, was wir genau hier machen werden, und ich werde in nur einer Sekunde springen und all das im nächsten Video erklären. Aber lassen Sie mich Ihnen das schnell an einem echten Beispiel zeigen. Also zum Beispiel, gehen wir mit Abschnitt Titel. Lass es uns gleich hierher bringen. Und was ich tun werde, ist, das auch ein bisschen näher zu bringen. Da wir also acht Spalten haben, haben wir keine 12 Spalten mehr. Jeder von ihnen wird vier Spalten aufnehmen. Und gehen wir zurück zu hier. Also Spezialangebot Karte, Pfeil und er ja, nur die beiden werden sie hier reinbringen. Ich werde in die Mitte springen. Weil wir hier auf dem Stapel sind. Ich werde meinen Stapel wirklich anpassen, sehen, wo mich das hinführt. Und mal sehen, zum Beispiel kann ich mein Bild schmaler machen. Lassen Sie uns es also so einstellen, dass es vier Spalten breit ist. Und dann werden wir all unsere Inhalte hierher verschieben. Jetzt haben wir ein bisschen mehr Platz für unseren Stack, um damit zu spielen. Also kann ich es hier anpassen. Aber wenn Sie denken, dass es zu nah ist und Sie dieses Symbol aus irgendeinem Grund loswerden möchten, dann können Sie, und Sie können es so anpassen. Aber ich denke, es wird so funktionieren oder so. Nun endlich, für diese Trennwände, die das ärgerlichste an diesem Layout sind, Lassen Sie uns sie hier bewegen. Und wenn Sie alle diese anderen anpassen, erinnern Sie sich einfach an den Wert für diesen Teiler. Also sind es drei vor zwei. Also lassen Sie uns nach dem Hintergrund sehen. Ja, wir sind da. Und wie er sagte, weil wir den Schwebeeffekt selbst loswerden, was wir eigentlich tun werden, ist, dass Sie tatsächlich in den Schwebevorgang direkt hier springen können. Und lasst uns das machen. Das sollte ich eigentlich tun. Also sind wir jetzt in Horrorzustand für all diese, wie Sie sehen können, werde ich in meinen Pfeil und den rechten Pfeil springen. Du hast mich sicher reingelassen, damit du sehen kannst, wann es mir etwas besser geht. Und lassen Sie uns unser Bild auf vier anpassen und lassen Sie uns alle unsere Inhalte noch einmal hier verschieben. Jetzt klicken wir hier und bringen einfach alle diese Jungs in etwa hier herum. Und positionieren Sie es hier. Also 313, kopiere es und springe direkt hier bei der 13 Dairy Gewohnheit ein. Also, was ich jetzt tun werde, ist unsere Maske beiseite zu springen , weil wir jetzt im Horace Staat sind. Was ich tun werde, ist klicken Sie hier, klicken Sie rechts hier. Und dann statt 8%, werde ich zu 5% gehen. Und was Sie tun können, ist, dass Sie diese Bilder ein wenig vergrößert lassen können, wenn Sie möchten. Aber das Wichtigste ist das hier. Also gehe ich zu meinem rechten Pfeil und gehe zu meinem Horroreffekt. Wählen Sie aus. Also Control C oder Rechtsklick und Aufheben der Gruppierung Komponente. Sie können auch tun, ist es so lassen. Ich denke, es sollte bleiben. Es besteht also keine Notwendigkeit für uns, etwas anderes zu tun. Ja. Weil wir es nicht vom Hover zurück animiert haben. Also wird es auf einem Hover bleiben. Und ich denke, es sieht so gut aus. Wenn Sie es nicht so lassen möchten, können Sie es einfach wieder in den Standardzustand wechseln, also so. Wenn Sie also auf Vorschau klicken, wird es in dieser Standardstufe bleiben, aber Sie müssen es entfernen. So doppelklicken Sie auf Control C oder klicken Sie mit der rechten Maustaste auf die Gruppierung der Komponente Control G, um mit zurück und basierend im Namen, so Pfeil nach rechts und Milchgewohnheit. Also, wie er im nächsten Video sagte, wir werden mit all diesen spielen und animieren diese beiden und schließlich vier Toten-Taste am unteren Ende, wir können es jetzt viel weißer machen, weil wir diesen Raum haben. So positionieren und hier zum Beispiel. Und ich werde sicherstellen, dass es vier Säulen breit ist. Aber noch einmal, weil wir jetzt zu diesen beiden ziehen, können Sie sehen, wenn ich diese verstecke und dieses hier zeige, können Sie sehen, dass wir diese beiden bewegt haben und sie so funktionieren. Also, was ich tun werde, ist, das alles für uns zu nennen, Minuten, BTN. Und ich werde mit der rechten Maustaste darauf klicken, Gruppierung der Komponente Control G aufheben, um sie wieder zu gruppieren. Also alle erste Minute. Und ich werde dasselbe für diesen hier tun. Aber auf diesem, anstatt zuerst werde ich es Klasse nennen. Habe ich. Lassen Sie mich das hier verstecken. Wie Sie alle erste oder letzte Minute sehen können, funktioniert alles wie es sollte. Und lassen Sie uns diese untere verstecken. Und Milchkuh, Es ist, also das war's für dieses Video. Wie gesagt, wir werden diese im nächsten Video anpacken. Wir werden uns anpassen und wir können das Video in diesem machen , weil es wirklich ganz einfach ist. Und ich werde auch die Höhe ein wenig einstellen. Und wegen des Stapels wie üblich passt sich das Layout gut an. Also werde ich Sie im nächsten Video sehen, wenn wir unsere Arbeit an dieser Tablet-Größe fortsetzen werden. 45. Erstellen von Responsive Design 9: Okay, machen wir jetzt weiter, wo wir aufgehört haben. Und bevor wir es tun, denke ich nur an etwas, weil wir all diese Pfeile überall so aussehen. Sie werden hier in diesen Staaten so aussehen. Und auch wir haben sie hier als diese blauen. Ich denke, dass das Zurückgehen sie tatsächlich hier ändern sollte. Also in allen unseren Heldenstaaten, also für das Heldenbild, da, werde ich in meine Pfeile springen und ich habe meine sogenannte Farbe. Ich werde es einfach auf 0 reduzieren. Und ich werde das gleiche für hier tun, nur um die Konsistenz von ihnen zu behalten , weil ich nicht denke, dass diese Optionen nur in diesem Abschnitt so toll aussehen ohne sie in all diesen anderen Abschnitten zu ändern. Also drücke ich nur zwei Mal 0 und ich werde sie hier schließen. Gehen Sie zurück zu Nummer 3 und finden Sie sie hier. Und Milchgesundheit. Jetzt gehen wir schnell zu den speziellen Angeboten über. Und unter speziellen Angeboten, was ich eigentlich tun werde, ist, zum Beispiel in dieses zu springen und alle diese Einstellungen zu sehen. Also werde ich eine plötzliche Mitte springen. C, der Abstand von 2002 zum Beispiel, und Teiler ist bei 3, 1, 3. Also werde ich das für diesen verwenden. Also zuerst, springen Sie hier rein, bewegen Sie alle meine Informationen, um mehr von meinem Pfeil nach hier und meinen Hintergrund zu hören. Also werde ich springen zugewiesen meine Trennwand, verwenden 313 Schmutz und ich werde in hier springen und 22 und Derek haben es. Es ist also viel schneller und Sie kopieren und fügen einfach alle diese Elemente ein. Also werde ich die verstecken, auftauchen, diese drei. Also lasst uns in unser Paris springen, aber ich muss sie so verstecken, damit ich das hier bearbeiten kann. Lasst uns hier erschaffen. Und ich werde reinspringen und das alles bewegen. Und ich werde diese auswählen, um sie zur gleichen Zeit zu bewegen, zwei hier. Und ich werde meine Maske öffnen. Positionieren Sie es hier und doppelklicken Sie auf diesen Pfeil. Klicken Sie mit der rechten Maustaste auf Gruppierung der Komponente Control G aufheben, und nennen Sie sie einen Pfeil nach rechts Und mal sehen, was hier richtig ist, war 313. Und hier können wir 22 verwenden. Und das ist der große Vorteil und die Macht der Verwendung dieser Stacks, weil Sie sie einfach anpassen können, wie Sie wollen. Und es wird folgen, während immer noch die gleiche Distanz wie Sie hier sehen können. Also ich mag diese Funktion wirklich, aber wieder, wie all diese Funktionen scheinen, wird es in der Zeit besser werden und es wird viel einfacher zu bedienen sein. Je mehr Sie es verwenden und desto mehr werden sie im Laufe der Zeit aktualisiert. So nah, dass ich hier in die Mitte springen werde. Verwenden Sie 313 und lassen Sie uns 2250 verwenden, diese eine Molkerei Howard und einfach in geistige Hero 3, 1, 3 gegangen , und verwenden Sie 22 für diese. Und jetzt sind die Schulden fertig. Eine, die ich tun werde, ist bringen Sie diese zurück, wählen Sie alle drei Q zu 0 MCI-Board, so dass ich sie zurück bringen kann. Ich werde mein Haggadah Control C auswählen oder mit der rechten Maustaste die Gruppierung der Komponente Control G aufheben und zurückbringen. Tun Sie dasselbe für Tokio. Und ich tue das, weil wir, wie ich erklärte, keine Horrorstaaten mehr haben. Also wird es viel schneller für uns sein, all diese zu erstellen nur weil wir nur einen Zustand verwenden, wollen nur einen Blick im Grunde beschneiden namens Rechtsklick aufheben. Und schließlich für ein Klicken Sie auf Gruppierung aufheben. Und da hast du es. Also, wenn Sie sich erinnern, haben wir Standardstatus und wir haben Last-Minute-Angebote. Also, was ich tun werde, ist eigentlich das gleiche, wie es immer in dieser Klasse getan hat, ist wählen Sie alle meine Elemente, Control C. Springen Sie in die Last-Minute-Angebote basierend in die Spitze, und entfernen Sie dann alle alten. Also, was ich hier tun werde, werde ich zuerst in meinen Standardzustand gehen. Und diese drei werden an der Spitze bleiben, während diese drei versteckt werden. Dann werde ich in die Last-Minute-Angebote springen. Dann diese drei nach oben, wir versteckt werden und diese drei werden zu zeigen, während diese Tasten. Also mal sehen, in der ersten Minute werde ich es verstecken. In letzter Minute werde ich es zeigen. Ende. Die Animation sollte eigentlich funktionieren, weil wir die Dosierung nicht geändert haben. Also, wenn ich hier klicke, können Sie sehen, dass es zurück zu hier. Aber aus irgendeinem Grund hat es nicht animiert. Also lassen Sie uns Standard-Zustands-Prototyp gehen. Und mal sehen, was wir hier hatten. Ich denke, es war, ist in unserem 0.6. Also lassen Sie uns schnell zu den Last-Minute-Angeboten gehen und ich werde wählen, diese ist in unserem 0.6 Standardzustand. Lassen Sie uns eine Vorschau anzeigen, um zu sehen, wie das aussieht. Also in einem Klick hier, um zur ersten Minute zu gehen, klicken Sie, um zur Last Minute zu gehen. Aber in den Last-Minute-Angeboten habe ich vergessen, den Text zu ändern. Also hier hatten wir, hier sind wir im Standardzustand. Wir haben erste Minute Angebote ausgewählt. Wenn wir in den letzten Zustand bewegen, Last-Minute-Overs, was ich tun werde, ist, um sicherzustellen, dass dieser hier in Hauptblau blüht. Und stellen Sie sicher, dass dies hellgrau ist. Also jetzt, wenn ich zum Prototyp gehe und klicke, um es in der Vorschau zu sehen, sind wir in den letzten Minuten. Wir sind in der ersten Minute und Sie können die Veränderungen sehen. Und wenn ich nach unten scrollen, können Sie sehen, dass wir alle erste Minute ohne Schweben haben, wir müssen auch die Hubbard hier entfernen. Also lasst uns weitermachen und das tun. Also werde ich in unser Promo-Video-Play-Icon springen. Ich werde sicherstellen, dass ich im Standardzustand bin, Text kopieren, die Gruppierung der Komponente Control G aufheben und das ist im Grunde, was Sie die meiste Zeit im Grunde nehmen wird, in diesen sind diese Symbole nicht. Da wir gerade hier europäische Destinationen haben, werde ich eigentlich nur die USA, Europa, so. Und dann verwenden Sie Abschnitt betitelt positionieren Sie es in der Mitte. Und was ich hier tun werde, ist. Vielleicht können wir vier von ihnen haben, sagen wir, oder sogar sechs von ihnen, aber wir können die Größe von ihnen anpassen. Also, was ich zuerst tun werde, ist, meine scrollbare Gruppe auf Hyrum anzupassen. Und dann werde ich meine Städte anpassen. Mal sehen. Ja, ich denke, wir können 6 gebrauchen. Also, was werden wir für jeden tun? Diese haben im Grunde vier Säulen breit. Es wird also nicht wirklich all diese großen Änderungen erfordern. Also zuerst, springen Sie nach innen zu jedem und einfach Sie schweben. Mein Dad, mein Dad. Und was wir auch tun können, ist, dass wir in jeden Inhalt springen. Also diese Gruppe Pfeil und rekapieren diesen Pfeil nach rechts. Was wir tun können, ist zum Prototyp zu gehen und einfach für jeden, klicken und ziehen Sie es nach draußen. Klicken Sie also auf und ziehen Sie es nach außen für den Hover. Oder wir können sogar sehen, wie wir es entfernen können? Keiner. Lassen Sie uns eine Vorschau darauf sehen und sehen, wie es aussieht. Damit ich damit runtergehen kann. Da steht Paris. Ich kann drauf schweben. Sie müssen also einfach keine auswählen. Es wird nicht den Schrecken zeigen, es wird nicht so aussehen. Und für diese unteren können wir, wie ich sagte, Sie können es so lassen oder Sie können wechseln, um zu schweben, wenn Sie größeren Pfeil wollen. Es liegt also wirklich alles an dir. Sie können also einfach „Keine“ für jeden von ihnen auswählen. Und ich kann auf diese klicken. Ich kann Hover auswählen. Also lasst uns mit keiner gehen. Dann. Ich kann diese auswählen, Ziel keine und Ziel keine, so dass wir sie nicht aufheben und all diese Dinge tun müssen. Keiner. Und schließlich neun hier. Und Dario es. Also, das ist es im Grunde. Ich werde dasselbe für diese tun. Also in meinen Pfeilen werde ich mit keinem gehen, weil ich nicht will, dass es sich ändert, um zu schweben. Genau hier. Ich werde keine gehen und ich werde sie einfach verlassen, wie sie sind, richtig. Teilen. Ob wir auch tun können, ist das Gleiche für den Button zu tun. Also gehen wir zurück zum Design. Und vor allem lassen Sie uns anpassen, um zum Beispiel vier Spalten breit zu sein . Ich werde es so anpassen. Und ich werde auch dasselbe für den Hover tun, nur für den Fall, dass Sie später zum Beispiel Ihre Meinung ändern und Sie den Horrorzustand aus irgendeinem Grund verwenden möchten. So können Sie zum Prototyp gehen und gehen. Wenn ich nun auf Vorschau klicke, sollte es für alle so bleiben, damit wir die Möglichkeit haben , die Gruppierung nicht alle aufzuheben. Also lass uns mal sehen. Es ist da. Wenn ich sie tausche, ist es da. So können Sie diese Karten sogar so lassen, wie sie hier sind, um den gesamten Prozess zu beschleunigen. Aber wie gesagt, vielleicht ist es am besten, ihn vielleicht nur ein bisschen zu töten. Vielleicht können Sie sogar diese Pfeile loswerden. Also, wie Sie das tun wollen, aber ich werde eigentlich nur zwei von ihnen haben und sie dann nach links und rechts scrollen lassen. Bevor ich das alles mache, lass mich zurück zu diesen Karten gehen, weil etwas nicht stimmt, genau hier. So sind wir in Last-Minute-Angebote an dieser Stelle. Und ich werde das alles schließen. Jetzt. Mal sehen. Das sind R3. Also haben wir Pariser Crack von Taipeh und ich werde sie umschalten. Mal sehen. Was ich eigentlich nicht getan habe, ist, dass ich meine Inhalte nicht ausgewählt habe. Gehen wir also zurück zum Standardzustand. Was ich hier tun werde, ist, dass ich reinspringen werde, mich Städte unterschreiben werde. Ich werde es, Mal sehen. Entschuldigung, ich ändere europäische Reiseziele und frage mich, was los ist. Also, genau hier, werde ich die anpassen. Denn wenn ich diese drei oben auswähle, können Sie sehen, dass wir diese Änderungen wirklich schön gemacht haben, aber mit diesen haben tatsächlich vergessen, diese Masken zu erweitern. Also lasst uns das schnell machen. Riss des Pfeils. Maske wird 80 zu meinem Vater und rechten Pfeil gehen zum Prototyp und einfach keine verwenden. Also kümmern wir uns nicht um all diese Dinge. Gehen Sie, um eine Pfeilmaske einzugeben. Ihr Entwurf 82 Pfeil Prototyp. Gib ihm einfach Zeit zu wechseln, denn wie gesagt, ich habe mehrere Dinge laufen. Also gehe ich mit nicht, gehe zurück zu Design, tausche es so um. Und jetzt werde ich sie alle noch einmal kopieren. Also werde ich diese und die Tasten und Control C verwenden und in den Standardzustand gehen. Verstecken wir diese drei oben und bringen sie zurück. Also mal sehen, Ich kann wählen, genannt gada den ganzen Weg nach unten Tasten Kontrolle V Dort haben wir es Abschnitt Titel, und direkt über den Tabs, XD verhält sich seltsam heute. Also Angebote, ich werde das hier zeigen, verstecken Sie das hier. Ich werde 123 unten verstecken. Ich werde die ersten drei zeigen, denn jetzt haben wir all das fertig. Also werde ich diese drei im Standardzustand zeigen. Und im Last-Minute-Angebot haben wir Last-Minute und wir haben diese drei unten, was in Ordnung ist. Alles funktioniert, wie es sollte, beenden Sie es im Grunde. Bevor ich diese auswähle und alle editiere, möchte ich dir einen zeigen, und ich möchte dir zeigen, wie ich mich wirklich anpassen werde. Denn wie gesagt, wir sind im Horrorzustand, wir werden es nicht zu sehr ändern. Was ich zuerst tun werde, ist in jeden einzelnen zu springen. So, öffne meine Inhalte. Und für jede dieser Zielkarten. Und wir werden hier klicken und fünf eingeben. Also werde ich das schnell machen, denn wie gesagt, wir haben diesen Schwebeeffekt nicht mehr. Wir verwenden einfach alle diese anderen ohne Hover-Effekt. Also werde ich fünf benutzen. Klicken Sie hier. Nimm fünf und springe dann gleich hier. Und schließlich diesen einen Klick, verwenden Sie fünf und ihren Kopf. Also werde ich all diese schließen, weil ich an der Pariser arbeite und sehen werde , was ich meine. Also für die Pariser eine, was ich tun werde, ist, alle diese anderen aus dem Weg zu bringen , damit sie mich nicht zu sehr belästigen. Hi, In diesem werde ich einfach alle meine Inhalte auf hier erweitern. Und das ist es im Grunde. Also, was Sie an dieser Stelle tun können, ist einfach in die Mitte zu springen, wählen Sie Ihre Trennwände aus und richten Sie sie einfach hier mit dem linken Rand Ihrer Texte aus. Sie werden immer noch dort bleiben. Aber Sie können auch tun, ist sie erweitern, wenn Sie wollen. So zum Beispiel, 300s, sehen, wohin das Sie führt. Und dann innerhalb von hier springen und jedes dieser Werkzeuge anpassen, sagen wir 741 Zeile und dann kann 642 Zeilen Text sein. Und ich denke, das ist gut. Also lassen Sie uns noch einmal überprüfen. Also 36074 D's eins. Also springe ins Innere von London. Erweitert. Gehe zurück zum mittleren Abschnitt. Es hat tatsächlich den gesamten Abschnitt verschoben, was in Ordnung ist. Und mal sehen. So kann ich hier klicken und 300 eingeben. Und ich kann das Gleiche für diesen hier tun. Zum Beispiel 60 oder 70, weil wir hier nur einen Zeilentext haben. Und da hatten wir. Also werde ich das Video hier beenden und ich werde wiederkommen, wenn ich fertig bin, nicht nur dieses, sondern all diese anderen, noch einmal, um dich nicht zu langweilen. Und dann werden wir weitermachen und mit all diesen anderen Abschnitten fortfahren , weil diese Abschnitte wieder viel zu viel Zeit in Anspruch nehmen. Wie gesagt, ich will mir keine Sorgen machen, euch zu viel mit all diesen unnötigen Details langweilen , denn was ich tue, ist das, was ich dir gerade gezeigt habe. Einfach ausspülen und wiederholen, abspülen und wiederholen. Und dann werde ich Ihnen zeigen, was ich für diese Staaten getan habe , weil wir Standard haben und wir geklickt haben. Wie gesagt, das ist es für dieses Video. Wir sehen uns im nächsten. Sobald ich das alles fertig mache, damit ich dir zeigen kann, wohin wir als Nächstes gehen werden. 46. Ein Responsive Design: Okay, also lasst uns jetzt weitermachen. Aber bevor wir es tun, habe ich bereits weitergemacht und Komponenten für diese neuen erstellt, die ich gerade erstellt habe. Aber das habe ich nicht getan, weil ich dir das zeigen wollte , was ich tun werde, weil ich sechs davon habe. Und du hast tot gesehen. Ich habe diese Scroll-Buch-Gruppe genau hier geschnitten. So bis zum Rand unserer Rasterlinien sowie zum Rand unserer Flughäfen. So genau das, was wir bisher für alle unsere Größen gemacht haben. Also, was ich tun werde, weil wir sechs haben, werde ich tatsächlich drei verschiedene Zustände schaffen. Um das zu tun, muss ich die Gruppierung dieser Komponente aufheben und eine neue erstellen. Aber ich werde nicht mit der rechten Maustaste klicken und die Gruppierung so aufheben, weil wie Sie sehen können, das bricht einfach unser Layout, weil Adobe XD Dinge, die wir wollen 150 zwischen all diesen verschiedenen Elementen. Denn zum Beispiel sind diese beiden nicht gruppiert. Deshalb ist es einfach, sie direkt dorthin zu schicken. Was ich tun werde, ist eigentlich zurück zu gehen, meine Komponente zu öffnen, alle auszuwählen, Control G zu drücken und zum Beispiel in Europa zu tauchen. Und dann werde ich mit der rechten Maustaste klicken und die Gruppierung aufheben, die 150 für diese beiden behalten wird. Und es wird all das drin behalten. Dann werde ich Control K für diesen hier treffen. Also nur um es als Europa zu schaffen. Und dann werde ich es zum Beispiel Stufe zwei nennen. So wie dies innerhalb des Staates zu dem, was ich tun werde, ist zu springen, zu unterzeichnen, Städte auszurichten und diese hier direkt zu hier, so. Und dann werde ich einen anderen Staat schaffen , der Staat 3 genannt wird. Und innerhalb des Bundesstaates drei werde ich wieder meine Städte nutzen und sie so ausrichten. Also lassen Sie uns jetzt voran und Prototypen es. Also gehen Sie zum Standard, Zustand Prototyp. Ich werde meine Pfeile öffnen, rechts, Tab-Punkt. Ich werde auf Sie estab Auto animieren klicken, einfach. Jetzt gehen unsere 0.6, also gleich wie für alle diese anderen zu Staat zwei. Und dann statt des Staates, werde ich dasselbe tun. Also hier werde ich klicken, Gehen Sie zurück zum Standardzustand, und ich werde auf diesen klicken. Gehen Sie zurück zu Staat drei, so. Und schließlich, innerhalb des Staates drei, werde ich meinen Pfeil-Labor-Datenpunkt verwenden. Ich werde in Staat 2 gehen. Also, wenn ich jetzt zurück zum Standardstatusdesign gehe, drücke Vorschau und zeige dir, wie das vorherige aussieht. Scrollen wir nach unten zu europäischen Destinationen. Hier sind sie. Also, sobald wir den Pfeil drücken, weil wir keinen, keinen Hover-Effekt haben, können Sie sehen, Benutzer können einfach tippen und es wird sie zu all diesen Dingen, all diesen verschiedenen Orten zu bringen . Und es kann einfach wählen, welches Auto sie wollen. Weil wir den Hover-Effekt von all diesen Pfeilen gelöscht haben. Wie Sie sehen können, sobald sie ihren Finger im Grunde über ihnen schwebten, wird es nichts tun und es wird nichts ändern. Lassen Sie mich also im Grunde Control S drücken, um alle unsere bisherigen Änderungen zu speichern. Und ich möchte diesen Abschnitt erklären. Also im Grunde wird es extrem einfach zu justieren sein. Das einzige Team, das es tun wird, ist im Grunde einfach die Breite unseres Bildes anzupassen und unseren Inhalt in den Mittelpunkt zu stellen. Dann tun Sie im Grunde dasselbe für die Schaltfläche selbst. Lassen Sie uns zunächst unser Bild schnell anpassen. Also werde ich mein Bild so angepasst verwenden. Und ich werde auch hier klicken und rechts hier angepasst. Also, weil unser Bild das Bit nach unten bewegt, werde ich darauf doppelklicken und ich werde es so nach oben verschieben, um es anzupassen. Dann werde ich meine Inhalte in der Mitte so positionieren. Es behält immer noch die gleichen Entfernungen und Bearbeiten. Lassen Sie uns jetzt weiter mit diesem Knopf positionieren Reich, so. Ich werde auch den Hover verwenden, nur für den Fall, dass Ihre Kunden Ihre Meinung ändern und sie es so verwenden möchten. Wir können zum Prototyp gehen und einfach hier zu keiner klicken. Deaktivieren Sie diesen Hover-Effekt. Also wollen wir diesen Schwebeeffekt nicht. Und du kannst immer zurückgehen und es ihnen sagen. Okay, so sieht es so aus, weil wir es als Komponente behalten haben. Also nochmals zeige ich Ihnen beide Möglichkeiten. Wenn Sie sich an den Heldenbereich erinnern, haben wir die Gruppierung der Komponente in den gewünschten Zustand aufgehoben. Sie können diese Route gehen oder Sie können diese Effekte einfach von dort deaktivieren. Und dann können Sie den Hover einfach deaktivieren und sie können wählen, was sie damit machen wollen. Wie gesagt, ich habe dasselbe für Amerika und Asien getan. Und jetzt gehen wir zu diesem Abschnitt über. Also dieses Top-Ziel und Lithium schnell richten es hier so aus. Lass mich hineinspringen, meine Pfeile sehen und unsere Ziele schnell überprüfen, ob sie richtig aufgereiht sind. Das sind sie. Also, was ich mit diesen Pfeilen machen werde, weil wir hier offensichtlich nicht zu viel Platz haben. Ich kann zum Beispielvon Desktop-Zielen entfernen, von Desktop-Zielen entfernen, und ich kann einfach in Ziele schreiben, aber ich werde das nicht tun. Ich werde meine Pfeile hier setzen. Und ich werde sicherstellen, dass sie zentriert sind, wie wir es oben getan haben. Also werde ich in meinen linken Pfeil springen und ich werde ihn hier bewegen. Ich werde dasselbe für so einen Schriftstellerpfeil tun. Und mal sehen, zum Beispiel, ich kann sie positionieren, um zu sein, mal sehen, 80 zum Beispiel. Oder noch besser, 60, weil wir sie nicht brauchen, um so groß zu sein. Also, was wir damit umgehen werden, ist ziemlich einfach. Ich werde genau das Gleiche tun, wie ich es vorher getan habe. Also, was ich zuerst tun werde, ist Control G auf diesem eine, hochwertige Top-Destinationen treffen. Das gefällt mir. Ich werde hier mit der rechten Maustaste auf Gruppenkomponente klicken, weil wir sie nicht mehr brauchen und wir keine Hover verwenden werden. Wir werden genau den gleichen Schlagschatten auf all diesen Feldern verwenden wie oben. Also, was ich als nächstes tun werde, ist nach innen zu springen und jedes zu justieren. Also zuerst, bringen wir diese beiden hierher. Also werden wir haben, dass sie vier Spalten breit für jede. Lasst uns diese anpassen. Also lassen Sie mich diese ersten beiden verstecken. Ich werde Munson benutzen, Michelle. Und positionieren Sie es hier. Und dann werde ich Sydney endlich hierher bringen, und dann Kappadokien, ich werde es hierher bringen. Bringen wir die zurück. Also zuerst werde ich auf meine Malediven klicken und sie einfach hier erweitern. Klicken Sie auf den späten Lake District, dann verstecken Sie diese, damit sie unser Layout nicht durcheinander bringen. So können wir tatsächlich auf diejenigen klicken, die unten sind. So kann Monster Michelle essen. Und wie Sie sehen können, haben wir immer noch einige Probleme mit dem Text. So ist es in der Mitte positioniert und stellen Sie sicher , dass wir in einem Zentrum wie diesem sind. Da haben wir es. Und ich werde diese beiden verstecken und am Sydney arbeiten, es finden und so an den Kappadokien arbeiten. So können Sie sehen, dass wir hier einige Probleme haben. Mal sehen, was wir tun können. Ich kann zum Beispiel einen Feen-Schornstein hinlegen, nur damit wir nicht das ein Wort unten haben. Und ich werde auch vorwärts gehen, zum Beispiel Formationen nach oben. So wie das. Reich an Irak-Genehmigungen gehalten, gehalten Wohnungen und ich werde es hier einfügen, deutet darauf hin, dass wir den gleichen Abstand und die gleichen Entfernungen für alle von ihnen behalten. Weil wir den Inhalt für jeden von ihnen haben und wir den Ordner Inhalt genannt haben. Ich werde es nicht tun, denn wenn Sie sich erinnern, haben wir hier den Schwebeeffekt. Also werde ich einfach hier doppelklicken, meinen Text auswählen, hier doppelklicken. Und ich bin im Malediven-Text ansässig. Und wann soll man das Gleiche dafür tun? Er basiert dort, wo er Lake District sagt. Ich werde das Gleiche hier machen. Basiert es da drin, und ich habe immer noch einige Bugs. Also lassen Sie mich mein Dokument speichern. Denn manchmal zeigt XD, wie Sie sehen können, alle Arten von verschiedenen Bugs. Ich weiß nicht, was passiert, weil ich aktualisiere, sobald sie Updates sehen. Also wollte ich euch nur zeigen, dass das auch passieren kann. Also stellen Sie sicher, dass Sie verstehen, wie Sie sehen können, einige Störungen genau hier. Also lasst uns das versuchen. Wenn ich zum Beispiel nach außen klicke und dann auf Comeback in die Toskana klicke, doppelklicken Sie hier. Es zeigt immer noch diese Probleme, aber zumindest gibt es mir die Möglichkeit, an meinen Texten zu arbeiten. Also einfach kopieren und einfügen. Und schließlich für Kappadokien, und lassen Sie uns kopieren und einfügen. Und da haben wir es. Also, was ich jetzt tun werde, ist einfach mit der rechten Maustaste auf Gruppe, klicken Sie mit der rechten Maustaste auf Gruppierung aufheben. Und ich lege sie offensichtlich rein, weil wir diesen Stapel haben. Deshalb setze ich sie in eine Gruppe und benenne sie um, so dass wir wissen, welcher welcher ist. Also lasst uns jetzt diese vier auswählen. Bewegen Sie sie ein bisschen nach draußen und mal sehen, ich denke, wir sind 29, weil das unsere Rinnenbreite ist. Ist es. Und schließlich, lasst uns die letzten beiden aus dem Weg bringen. Also werde ich in Beat 2009 positionieren und sicherstellen, dass diese Scroll-, Scroll-Gruppe genau da ist. Jetzt werde ich reinspringen. Also geht der Prototyp zu meinen Pfeilen und sieht, was wir dort haben. Also auf einem linken Pfeil haben wir den Hover. Ich werde hier klicken, dann nicht verwenden, damit ich es entfernen kann. Und das ist es im Grunde. Also jetzt werden wir das Gleiche tun, weil wir Top-Ziele haben. Ich werde Control K oder Befehl K drücken, um eine Komponente zu erstellen. Und dann werden wir Zustand 2 schaffen. Und dann für den Staat, was ich tun werde, ist hier rein zu springen und zu den Zielen zu gehen. Richten Sie es hier aus, so. Und wir werden einen neuen Staat schaffen. Also geben Sie drei an, innerhalb eines Staates 3 gehen Sie zu Zielen, klicken Sie und ziehen Sie sie direkt nach hier. Und jetzt gehen wir zum Standardzustand Prototyp, öffnen Sie Ihre Pfeile, klicken Sie mit der rechten Maustaste, rechten Tiefenpunkt, sorry. Also statt des Hovers, werden wir Schritt aus, um den Zustand zu animieren, um in out zu erleichtern und 0,6 Sekunden gehen in den Zustand nach links an diesem Punkt wird zu einem Standardzustand gehen, wie so, direkt an diesem Punkt wird zu Zustand Nummer 3 gehen. Und schließlich können wir zur Nummer t gehen und unseren linken Pfeil so benutzen. Klicken Sie rechts dort und gehen Sie zum zweiten Zustand. Und schließlich, jetzt die Schulden abgeschlossen, Ich kann Speichern und wir können weiter und ein Design bewegen, der Reisende lieben uns. Also diese Zeugnisabschnitte. Was wir also tatsächlich tun können, während es gespeichert wird, ist, dass wir es so anpassen können, dass wir zum Beispiel die Zahlen entfernen oder wir können sogar die Zahlen behalten, weil wir diese Animation am Laufen halten wollen. So können wir die Zahlen behalten und wir können die Pfeile behalten, aber wir können zum Beispiel diese Bilder loswerden. Wenn wir also diese Bilder loswerden, müssen wir nachjustieren, wie alles aussieht. Also, um das zu tun, Lasst uns zu Zeugnissen gehen. Und ich werde meinen Abschnittstitel in der Mitte so verschieben. Und Dan und wann man meine Pfeile benutzt und sie an diesem Ort positioniert. Denn wenn Sie sich erinnern, werden wir die Hover-Effekte loswerden. Also springe ich hier, rechter Pfeil, werde ich den Schwebeweg loswerden, Pfeil nach links. Ich werde den Schweber auch so loswerden. Und mal sehen. Rechts an diesem Punkt ist einfach tippen links DEP Punkt ist nicht verfügbar. Gehen wir zurück zu Design. Und wie gesagt, wir werden diese behalten, aber für die Zeugniskarten, was ich tun werde, ist in diesen einen Schlüssel zu springen, um auf meinem Bild zu löschen. Und ich werde einfach die Breite meiner Karte anpassen , um zu hören und mehr meinen Text in der Mitte. Und weil ich das getan habe, wird all dieser Inhalt folgen. Jetzt für den Text selbst werde ich alle drei auswählen, sicherstellen, dass sie zentriert ausgerichtet sind, stellen Sie sicher, dass sie so an der Mitte ausgerichtet sind. Und ich werde einfach sicherstellen, dass sie in der Mitte meiner Karte sind. Also werde ich dasselbe für diese Nummer 2 tun. Gehen wir weiter hierher. Und mal sehen, was die Breite dieser Karte ist. Es ist 678. Also lasst uns an unserem Text arbeiten. zunächst sicher, dass es in der Mitte ist. Stellen Sie sicher, dass es so zentriert ist. Also mal sehen, 6, 7, 8, drücken Sie die Eingabetaste. Und ich werde meinen Text verschieben, das Zentrum so. Und offensichtlich scheinen wir mit all diesen anderen zu tun, 678, wir werden sie tatsächlich alle ins Zentrum bringen. Also gehen wir zurück, klicken Sie rechts dort, passen Sie meinen Text an. Und ich ging hinein, um sicherzustellen, dass sie zentriert und zentriert sind, ausgerichtet und zentriert sind. Und noch einmal, wählen Sie diese beiden Männer sollte Text in der Mitte. Und schließlich tun Sie dasselbe für Unentschlossenheit zu Modul Nummer vier. Also werde ich sicherstellen, dass auf dem Marion Dissenter von ihnen Kreditgeber sind. Also lass mich voran gehen und nachsehen. 678 ist die Breite unserer Karten, wenn Sie dasselbe tun sollen. Also 6, 7, 8, so. Und noch einmal, weil unser Text zentriert ist und wir werden ihn so in die Mitte verschieben. Da haben wir es. Das einzige, was wir jetzt tatsächlich tun müssen, ist, die Pfeile zu bewegen und sich selbst unter Zeugniskarten zu bewegen. Also werde ich das schnell bewegen. Grundsätzlich werden wir dasselbe tun. Also werden wir all diese anderen Animationen loswerden, außer diesen. Also lassen Sie uns Abschnittstitel, Zeugnisse und Pfeile kopieren. Drücken Sie Control C. Gehen Sie zu unserem Zeugnis zu, also werde ich Control V drücken und alles loswerden, außer dem Text, der maskiert werden soll. Also werde ich die Textmaske gerade oben so verschieben. Milchherde. Und für die Zeugnisse selbst werde ich die zweite hier eintragen. Lassen Sie mich überprüfen, ob es ausgerichtet ist. Also Testimonial Auto Nummer 2. Es ist, was großartig ist. Also lass uns noch einmal sehen. Es ist kein Schnee. Lassen Sie mich es nur ein bisschen bewegen. Und ich werde das tatsächlich auf Gitterlinien ausweiten , damit alles in Ordnung ist. Und bevor wir weitermachen, gehe ich zurück zu den Standard-State-Eck-Testimonials und sehe einfach, ob wir es sind, sind wir es nicht. Jetzt sind wir die erste unserer Linie Lytton, schnell überprüfen, es ist nicht, so werde ich es einfach so ausrichten. Also sind sie verletzt, nicht Lasst uns weitermachen und weitermachen. Also ist es überprüft. Und Nummer 2, und ich werde Session-Titel und Testimonials von diesem hier kopieren. Und auch die Pfeile Control C und gehen Sie zum Zeugnis 3, springen genau hier, Control V, ich werde diese drei loswerden und die Textmaske direkt über unseren Pfeilen für die Zeugnisse positionieren, ich werde mich bewegen sie über Position Zeugnis Nummer 3, zwei hier. Und sehen Sie, ob es ausgerichtet ist. Ist es nicht. Ok, jetzt ist es das. Aber aus irgendeinem Grund zeigt es mir das. Also lassen Sie uns mehr Demo einschließen. Mal sehen. Jetzt denke ich, es funktioniert. Also wird es gut werden. Und schließlich, lassen Sie uns dieses Control C kopieren und in das Zeugnis für Kontrolle V springen Und ich möchte diese mehr loswerden, die Textmaske direkt oben. Und für die Zeugnisse selbst Lasst uns den vierten so hineinziehen. Es ist ein bisschen kurz, aber es wird funktionieren, weil ich nicht zurückgehen und all diese Breiten noch einmal anpassen möchte, für alle, aber Sie bekommen das Bild. Also für den Prototyp werde ich springen. So Standardzustand. Was wir hier für die Pfeile haben würde sehen. Also Pfeil nach rechts, wir haben rechte Tap-Punkte oder tippen Sie auf Testimonial zu, was großartig ist. Lassen Sie uns auch zum Zeugnis übergehen. Also hier werden wir unseren linken Pfeil benutzen. So Tab Auto animieren, Standardzustand, Leichtigkeit in 0.6 Sekunden wie Schmutz, direkt an diesem Punkt wird das gleiche tun, aber gehen Sie zu Zeugnis baumartige. Also lasst uns zu Zeugnis drei gehen. Auf diesem Pfeil gehen wir zurück zum Zeugnis zu diesem, gehen wir zur Zeugenaussage. Und schließlich, lassen Sie uns zum Zeugnis gehen für n dafür, wir werden diesen Pfeil verwenden, um zu einem Zeugnis zu meinem Vater Standardzustand zu gehen . Und lassen Sie uns klicken, klicken Sie auf Vorschau und sehen, wie alles aussieht. Wenn wir also zu unseren Testimonials scrollen, schauen wir uns zunächst unsere Top-Destinationen an und sehen, dass sie gut aussehen. Natürlich, wenn Sie möchten, können Sie das Ziel entfernen, sorry, den oberen Text, richten Sie die Ziele Texte auf der linken Seite. Und es gibt einfach die Pfeile, wie wir es immer mit diesem Layout getan haben. Aber ich denke, das funktioniert in beiden Fällen gut. Nun für diese Zeugnisse, wenn ich hier klicke, können Sie sehen, dass wir immer noch die Animation haben, wir haben die Zeugnisse, also funktioniert alles, wie es sollte. Gehen wir nun zu diesem Abschnitt über. Und für diesen Abschnitt, offensichtlich, weil wir unsere Farbeffekte loswerden, was ich tun werde, ist im Grunde alles in eine Gruppe und eine Kopie meines Textes hier zu setzen , fügen Sie es hier ein. Ich werde dasselbe für dieses Steuerelement G. Kopieren Sie meinen Text, basierend darauf, in diesem. Und schließlich für die Schema-Reise und wann ich Copy verwenden soll, werde ich alle auswählen. Hit Control G und Basis hier. Also, was ich mit diesen machen werde, ist zunächst, dass ich die Gruppierung aufheben werde, weil wir diese Hover-Effekte nicht mehr brauchen. Und deshalb habe ich sie in diese Ordner gelegt. Und für diesen, werden wir den Stack aktivieren. Ich werde diesen Stack tatsächlich so verwenden. Und ich werde diese Einstellungen verwenden. Also zum Abwerfen, Mal sehen. So Wellness-Reise. Wir sind, sehen wir 420 in der Höhe. Also zuerst, lassen Sie uns den Schreibtisch auf 420 einstellen. Also werde ich diese verwenden und anpassen und Höhe auf 420 so. Und der Preis und das Skifahren werden offensichtlich folgen. Also lasst uns sie so bewegen und sehen, wo sie vom Tod von hier her sind. Das ist also 40 runter. Also lasst uns das Gleiche für Todesfälle anpassen. So richten Sie sie so aus, 1234, also also nach unten, was in Ordnung ist. Und jetzt lassen Sie uns sie schnell in der Breite anpassen. Also werde ich es einfach so anpassen. Geh zu den Kreuzfahrten. Wählen Sie alle drei aus, passen Sie sie so in der Breite an. Und natürlich, wenn eines Ihrer Bilder skaliert werden muss, zum Beispiel dieses, wenn Sie einen anderen Bereich oder diesen fokussieren möchten, können Sie einfach doppelklicken, weil es egal ist, weil wir jetzt keine Schulden mehr haben, die diese Hover-Effekte. Also im Grunde haben wir das bisher getan. Mit unseren Partnern. Ich werde es in der Mitte positionieren und mit diesen Logos, zum Beispiel, was ich tun kann, ist, sie ein wenig zu vergrößern, tatsächlich bewegt ihn um zwei hier. Vielleicht schneidet Nan Dan das hier rein. Und jetzt können Benutzer ihre Finger verwenden, um nach links und rechts zu scrollen, weil sie wieder auf den Tablet-Größen sind. Für diesen hier. Lassen Sie uns einfach das tun, was wir zuvor getan haben. Passen Sie einfach unser Bild so an. Stellen Sie sicher, dass diese an der Kante ausgerichtet ist, die sie ist. Bild sieht gut aus, also keine Notwendigkeit, das zu ändern. Und für den Text, richten Sie ihn einfach so an der Mitte aus. Und wir werden unsere Taste anpassen, stellen sicher, dass wir sie hier verschieben, Shift halten, und dann gibt es Hover, tun das gleiche, gehen Sie zurück in den Standardzustand. Und jetzt endlich, was ich tun werde, wählen Sie den Knopf, gehen Sie zum Prototyp und einfach loswerden diese Abdeckung, indem Sie keine verwenden. Es weiß also nicht, wohin es gehen soll und es wird keine Art von Animation erzeugen. Für diese. Es ist genau die gleiche Geschichte, also richten Sie sie einfach so aus. Ich werde meinen Text noch einmal verwenden, positionieren Sie ihn hier. Und vielleicht kann ich mit diesem Text sogar etwas kleiner gehen, also ist es bei 24. Mal sehen, was wir hier tun können. Wir können zum Beispiel mit 18 gehen und was wir dort verwenden. Also diese Farbe, also noch einmal, 18, diese Farbe, und richten Sie sie einfach hier aus. Ich denke, das sieht gut genug aus. Nun, lassen Sie uns einfach anpassen, um zu hören und Benutzer können dann nach links und rechts scrollen. Ist das zur Rasterlinie? Ist es. Schließlich, für diese, und das ist ein bisschen schwierig, so dass Sie den Text reduzieren können, den Sie in hier gesetzt haben. Also werde ich zuerst einfach unsere Textposition so in die Mitte anpassen. Dann werde ich meinen ganzen Text anpassen, stellen Sie sicher, dass er so an die Ränder der Rasterlinie geht. Stellen Sie sicher, dass dies in der Mitte ist. Und ich werde hier auf Steuerelement V doppelklicken und einfügen. Bit weniger Text und dann vor, so dass ich einfach schneiden Sie einen Schnitt, dass Text ein wenig nach unten, nur so ist es nicht zu überwältigend, um auf Ihrem Tablet-Gerät zu lesen. Und geh zum Prototyp. Ich wähle von hier keine aus. Und gehen Sie zurück zu den Design-Inhalten. Und dann für die häufigsten Fragen, werden wir sie hier aufstellen. Was Sie tatsächlich tun können, ist, lassen Sie uns das für das nächste Video, weil ich in ein bisschen mehr Details darüber springen möchte . Aber im Grunde, was wir tun werden, ist für jeden von denen, wir gehen, und fangen wir mit dem Standardzustand an. Jetzt. Ich werde meinen Close-Button bis zum Rand verschieben. Also in diesem hier, und ich werde es hier positionieren. Aber wie Sie sehen können, bewegt es immer meine Trennwand, es ändert das ständig. Also 6, 8, 2, 4, alle diese Trennwände. Und Sie können drinnen springen, öffnen Sie alle Ihre Ordner, Teiler 60, um den Sprung in diese 162, und schließlich springen in diese letzte 1682 und Milchherde. Aber wie Sie sehen können, hat es jetzt, wenn Sie die Trennlinie ändern, das Symbol nicht verschoben. Deshalb sage ich immer wieder für diese Trennwände, Es ist, Ich denke, eine viel bessere Option zu verwenden. Shapes werden in diesen Linien hinzugefügt. Mal sehen, wo wir den ersten auf die Linie setzen. Machen Sie so viel mehr mit nur einem Pixel in. Und lasst uns dasselbe für diesen machen. Also ein Pixel in. Ich werde das nicht auswählen. Und Sie können sehen, dass sie ein bisschen schwierig zu wählen sind, nur weil sie außerhalb unserer Kunsttafel sind. Es sind also die häufigsten Fragen. Mein wahrer beschützte den ersten, den wir taten. Also bewegen Sie es Teiler, das ist in Ordnung. Kleidungs-Symbol. Also werde ich meine Umschalttaste verwenden und meine Umschalttaste für diese verwenden, um sie einfach hineinzuschieben. Dann werde ich es in dieser einen Position genau hier verwenden. Ich werde zwei Mal hineinzoomen und ich werde das hier benutzen. Also weiß ich wirklich nicht, was heute los ist. Adobe XD wirklich nicht, will mit mir arbeiten. Also ist es jetzt in Ordnung. Und schließlich für diesen, lasst uns darauf klicken. Also, das, noch einmal, werde ich meine Shift-Taste verwenden. Normalerweise habe ich nicht so viele Bugs oder wenige hier und da, aber weil ich das aufnehme, liegt es wahrscheinlich daran. Jetzt, da wir alle unsere Texte haben, müssen wir sie anpassen. Und wir werden das im nächsten Video tun und im Grunde beenden dieses Design mit diesen Abschnitten unten. Also sehe ich dich dort. 47. Ein Responsive Design: Lasst uns weitermachen und endlich diese Seite beenden. Wie ich schon sagte, was wir tun werden, ist, dass wir den Text für alle anpassen müssen. Also, um das zu tun, werde ich einfach alle diese unteren verstecken. Ich tue dies oder lassen Sie uns einfach reduzieren die Fettleibigkeit sind nur so bekannt, dass dieses Layout an der Unterseite bleibt, wie es ist und es gibt uns genug Platz. Also werde ich das so zurückbringen. Und ich werde Auto-Höhenfunktion verwenden und wann man es einfach so einbringt. Und weil es zwei Textzeilen gab, werden wir ihn noch 202-mal behalten. Und dann bringe ich das nächste rein und bringe es dann. Und weil wir drei Textzeilen haben, werde ich hier klicken und anpassen und sicherstellen , dass nur drei Textzeilen als Wurm behalten. Also bringen Sie das hier zurück. Mal sehen, ob Dan passt. Er bringt diesen Sensor nicht einfach mit. Wir haben immer noch drei Zeilen, Text, doppelklicken Sie hier auf 0, um es loszuwerden. Und dann gehen Sie zu Partnern. Und lassen Sie uns das anpassen. Also bringen Sie das hier rein, klicken Sie hier. Passen Sie dies an und stellen Sie sicher, dass wir zwei Textzeilen haben. Und Tourausflüge. Oder lass uns nur Ausflüge machen. Also müssen wir diesen Text hier loswerden, Ausflüge. Und lassen Sie uns das nahe bringen. Und schließlich, für die benutzerdefinierten Reisen, und es ist ungerecht und das eine. Also müssen wir drei Textzeilen klicken Sie hier. Und mal sehen, was wir uns einfallen können. Also wird es zu troll Bedingungen Lebensmittel. Auf deiner Reise. Lasst uns diese letzte Zeile und Milchgewohnheit schließen. Das ist also, was wir für sie alle tun werden. Denk daran, dass wir das geschlossen haben. Oder noch besser, wir können sie immer noch so bewegen. Also lassen Sie uns überprüfen, was wir hier in Bezug auf den Abstand hatten. Also zwischen diesen beiden haben wir 60 und zwischen dem Text und dem Teiler am unteren Rand haben wir 40. Gehen wir nun zurück zum Standardzustand und lassen Sie uns sehen, was wir einfallen können, damit wir alle Kontrolle C kopieren können. Und wir können gehen, ist meine Reise geschützt? Also geht es so. Lassen Sie uns diese alten löschen. Und mal sehen ist metrisch geschützt. Wir werden das zurückbringen. Mehr von der Trennwand nach unten, machen Sie es 40, schließen Sie diesen in und bewegen Sie den Rest von ihnen auf 60. So wie das. Und jetzt, wie Sie wahrscheinlich vermuten, werde ich in den Standardzustand zurückkehren. Wählen Sie Alle und klicken Sie auf Kontrolle C, gehen Sie zurück zu den Stornierungsbedingungen. Also schließen Sie es, finden Sie es. Also bringen Sie es zurück. Ich werde meine Trennwand nach unten schieben. Vergewissern Sie sich, dass es 40. Schließen Sie diese Option, wählen Sie diese beiden unten aus und verschieben Sie sie so. Gehen Sie in den Standardzustand und ich muss es nicht einmal, weil ich es bereits kopiert habe. Wir haben Stornierungsbedingungen gemacht. Wir haben, ist viel reproduktiv. Gehen Sie, um Ihre Partner zu wählen, Control V Einfügen in alles. Und schließlich, während ich hier bin, ein Ziel genau hier, um benutzerdefinierte Reisen und basiert auch dort. Damit es etwas später angepasst werden kann, wählen wir Ihre Partner aus, klicken Sie hier. Partner, ich bringe das zurück. Ich werde jetzt meine Trennwand verschieben. Vergewissern Sie sich, dass es 40. Verschieben Sie schließlich benutzerdefinierte Reisen nach unten. Stellen Sie sicher, dass es 60 ist, und gehen Sie dann schließlich zu benutzerdefinierten Reisen und öffnen Sie die letzte nach oben. So benutzerdefinierte Reisen, bringen Sie das zurück, bewegen Sie Ihren Teiler so. Also jetzt gehen wir voran und animieren es. Gehen wir also zum Standardzustand. Im Inneren unseres Prototyps können Sie sehen, dass wir sie noch haben, was großartig ist. Also werde ich hier klicken. Also haben wir Tab oder China Made Easy jetzt 0,6 Sekunden, was großartig ist. Lasst uns jetzt weitermachen und zum nächsten Zustand übergehen. Also werde ich meine Reise geschützt, ich werde auf Registerkarte gehen oder zu animieren, erleichtern Sie in, aus, gehen Sie zurück zum Standardzustand, einfach und aus 0,6 Sekunden und wenn Sie hier klicken. Also Stornierungsbedingungen, werde ich zu Stornierungsbedingungen gehen. Partner. Gehen Sie zu Partnern und schließlich maßgeschneiderte Reisen. Gehen Sie zu benutzerdefinierten Reisen. Stornierungsbedingungen sind meine Reise geschützt? Standard, Stornierung, sorry, ist metrisch geschützter Zucker zu reifen geschützt, und dies sollte auf Standard gehen. Offensichtlich ist es viel schwieriger, viel schwieriger und viel zeitaufwändiger, wenn du so sprichst wie ich. Und das wird offensichtlich viel schneller gehen, wenn man es alleine macht. Häufige Fragen sind metrisch geschützt? Wird nach hier gehen. Stornierungsbedingungen gehen, um hier zu gehen. Wählen Sie Ihren Partner wird zum Standard gehen. Und schließlich, wie die benutzerdefinierten Reisen funktionieren, wird zu Custom Trips gehen. Und jetzt gehen wir weiter und beschäftigen uns mit dem letzten Zustand. So wird das hier gehen. Stornierung geht auf die Stornierungsbedingungen gehen. Wählen Sie Ihre Partner aus. Schließlich geht dieser letzte zurück in den Standardzustand. Und noch einmal, schien Team arbeitet mit allen von ihnen. Also im Grunde in jeder dieser Größen, können Sie Ihrem Kunden sagen, dass er irgendwo ein wenig außerhalb klicken muss nur um sie wissen zu lassen, dass sie sich überlappen. Gehen wir also zum Standardzustand hier, so. Und lassen Sie uns jetzt an unserem Newsletter arbeiten. Also mal sehen, was wir tun können, färben eine Schleife. Aber zum Beispiel, für diese und verzögert zu schlummernden. Mal sehen. Vielleicht können wir das so in die Mitte stellen. Bringen Sie das hier her. Und dann für den Abonnieren Button können wir zum Prototyp gehen und wir können den Hover einfach loswerden. Gehen Sie zurück zu Design. Und für die Eingabe selbst, Bringen wir es zurück. Also lasst uns 84 benutzen. Also eigentlich, lass uns so gehen. Jetzt lass uns so gehen. Und dann für diesen Knopf, was wir tun können, ist einfach nur ein wenig zu zoomen. Und da haben wir es. Und sie bringen es einfach her. Mach das Gleiche für den Hubbard hier. Also ist es 53, weil ich den gleichen Text behalten möchte. Wenn Sie dies nicht tun, können Sie einfach E-Mail direkt hier eingeben und dann behalten. Wir sind bei 60 und genau hier sind wir bei 150. Und nun endlich, um diese Seite zu beenden, Lassen Sie uns anfangen, an unserer Fußzeile zu arbeiten. Aber bevor wir das tun, werde ich hier doppelklicken und das ganz nach unten erweitern, nur so dass wir genug Platz haben. Was ich also für die Fußzeile tun werde, ist, dass ich mit dem Offensichtlichen anfangen werde. Ich bringe diese beiden wieder rein. Ich werde meine Fußzeileninformationen in einem Zentrum wie diesem herunterbringen. Und im Grunde werde ich sie einfach ein bisschen näher anbringen, also nichts zu großes. Lassen Sie uns zuerst mit unserem Teiler umgehen. Also werde ich es gleich hierher bringen. Genau da. Ich werde das Gleiche für hier tun. Halten Sie einfach die Umschalttaste gedrückt. Dann lasst uns sie für diese so ausrichten. Gehen Sie mit dem linken und sehen Sie. Vielleicht können wir einfach nachdenken. Vielleicht können wir alles mitbringen. Mal sehen, Lassen Sie uns Winter Position es in der Mitte verwenden. Lassen Sie uns mit Wellness-Position gehen. Und genau hier Kreuzfahrten in der Mitte und das hier. Also Derek Harris und schließlich vier D auf das was ich denke, dass wir tun sollten, ist zum Beispiel, für den unteren Text, können wir vielleicht diesen verwenden. Positionieren Sie dies so in der Mitte. Und dann bringen Sie diese beiden in eine andere Gruppe. Und dann kann ich den Stapel dort benutzen und diesen Stack benutzen, der genau hier positioniert ist. Und mal sehen, was wir tun können. Zum Beispiel 40. Mal sehen. Mit diesem kann ich mit 40 so gehen und sie dann einfach erweitern. Also Shift 1, 2, 3, 4. Gehen wir mit Bodenbildung für die Wälder. Also Schicht eins ist immer noch wollen sie Budge. Also gehen wir mit dem ganzen Tank. So. Der Informant traf Control D Shift 1234. Erweitern Sie mein Farb-Overlay und mein Bild nach unten. Ich werde diese Kopie loswerden und dann gleich hierher zurückkommen. Und für diesen unteren Teil werde ich zum Beispiel hier angepasst. Doppelklicken Sie auf die Innenseite, verschieben Sie diese hier nach rechts, damit sie wiederhergestellt werden, die Fußzeile ist abgeschlossen. Offensichtlich eine letzte Sache, mit der wir uns hier beschäftigen werden, ist dieses Hintergrundbild. So lokal prägnant und positionieren Sie dieses Mädchen in der Mitte. Bringen Sie dies wieder ein, doppelklicken Sie hier. Und schließen Sie einfach diese ganze Seite ganz so. Und da haben wir es. Wir haben nun die Arbeit an dieser Größe beendet. Das war also doppelt so groß. Und tut mir leid, dass diese Videos viel zu lang sind, aber ich möchte wirklich in so viele Details wie möglich eingehen, nur um euch alle diese verschiedenen Optionen oder unterschiedliche Meinungen zu geben, wie ich es zum Beispiel getan habe, für diese Pfeile hier und all diese anderen Pfeile. Also möchte ich Ihnen beide Optionen geben und dann entscheiden Sie, welche Option am besten für Sie funktioniert, Ihr Szenario, Ihr Projekt, Ihren Kunden, abhängig von Ihrer Zeit, die Sie für dieses Projekt haben, abhängig von dem Budget, das Sie auf diesem -Projekt. Stellen Sie also sicher, dass Sie sich mit all diesen verschiedenen Optionen vertraut machen. Weil es wie die offensichtliche Option scheinen mag, wie zum Beispiel dieser Pfeil hier, oder ich mache das einfach. Aber glaub mir, in manchen Fällen hast du nicht die Möglichkeit, das zu tun. Du hast nicht die Fähigkeit, das zu tun. Du musst es also umgekehrt machen. Wie ich Ihnen zum Beispiel mit diesen Pfeilen und diesem Button für diese Angelegenheit gezeigt habe , da wir es auch aufgehoben sind, stellt auch sicher, dass immer Tap-Punkte verwendet werden. Denn wenn Sie sich hier erinnern, wenn wir den Tab-Punkt nicht verwenden würden, weil wir die Animation innerhalb der Animation haben, würde es nicht funktionieren, also würden wir wirklich nicht in der Lage sein, zu übergehen. Und diese, diese offene Navigation, zum Beispiel, den zweiten Zustand ihrer Doppler-Navigation, wenn wir nicht den Tap Point selbst benutzt haben. Achten Sie also immer darauf, all diese Details genau zu beachten. Und wie Sie sehen können, funktioniert Stack hier wirklich gut für uns, weil es immer noch 150 für alles hält. Und übrigens, Sie können einfach hier klicken. Gehen Sie zurück zu hier, wie wir es bei all diesen Tags getan haben. Und wenn wir nach unten scrollen, können Sie den Abstand zwischen all unseren Artikeln sehen. Und dann können Sie einfach hier einstellen. Und es wird den Abstand gleichmäßig anpassen, überall oder wie gesagt mehrmals, können Sie die verschiedenen Abstände für alle Ihre Elemente verwenden. Also, das ist es für diese Größe, wie ich in der nächsten Reihe von Videos sagte, wir werden die mobile Größe angehen, die endgültige Größe sein wird. Und danach werde ich mit Ihnen teilen, wie Sie beginnen, mit Ihren Kunden, Entwicklern und Teamkollegen zu teilen. Und schließlich werden wir zum Exportieren von Optionen kommen. Also sehe ich dich dort. 48. Erstellen von Responsive Design 12: Lassen Sie uns fortfahren und beenden Sie unseren reaktionsfähigen Designprozess, indem Sie eine mobile Größe erstellen. Und wie gesagt, die mobile Größe wird wahrscheinlich die größte Menge an Änderungen enthalten. Also lasst uns unseren alten Schlüssel halten und diesen so duplizieren. Und ich werde tun, ist das gleiche wie zuvor. Kopieren Sie diesen Text, doppelklicken Sie hier, und ich werde diesen Text bis hierher entfernen. Also werden wir vier Spalten haben. Es wird 30, 60, 120 sein. Scrollen wir ein bisschen nach unten. Also vier Säulen. Also werde ich noch einmal überprüfen, 30, 60, 120. Also machen wir es um 3061 und das wird 203061 sein. Ich weiß nicht, warum es das immer tut. Wie Sie sehen können, ist es wirklich schwierig, aber das ist das Problem. Ich habe vergessen, mich zu ändern. Die Breiten sind 375, Sahib hat 375. Und schauen wir es uns jetzt an. Also 30, 60, 120, also 3061 und schließlich 20. Also da haben wir es. Sobald Sie es reparieren, wird es gut funktionieren. Also fangen wir wie gewohnt mit diesen an der Spitze an. Also werde ich tun, ich werde tun, ist das Logo hier zu bewegen. Und ich werde auch beide auf sie reduzieren, zum Beispiel. Was ich auch tun werde, ist in mein Menü-Symbol bringen. Schieben Sie es so rein. Und wir werden auch sicherstellen, dass es genau so ist. Also in unserem Standardzustand werde ich es hineinbringen, innen. Also lass es mich öffnen. Und mal sehen, ich kann sie auf 40 bringen, zum Beispiel, es ist pünktlich, dass. Und dann kann ich meinen Tab-Punkt benutzen , der hier ganz genau ist, und ihn erweitern, hier und genau hier setzen. Bringen Sie es rein. Nur eine Berührung wie Dreck. Und was ich eigentlich tun werde, ist die Animation noch einmal zu machen , weil es viel einfacher ist als diese. Also heben Sie die Gruppierung der Komponente Control G. auf und ich werde es noch einmal ein Menü-Symbol nennen. Und lasst es uns etwa hier positionieren. Oder noch besser, wir können an diesen Rand gehen, so dass wir ein bisschen mehr Platz haben , um hier herumzuspielen. Also Steuerungstaste und ich kann eine neue Komponente erstellen, aber weil wir den gleichen Namen haben, und ich werde tun, ist Menü, Symbol, Handy, dann drücken Sie Control K. Und dann wird es uns zeigen, es hält uns immer noch davon ab, es zu bearbeiten genau hier. Also muss ich es hier bearbeiten. Also müssen wir reinspringen. In, erstellen, geklickt Status. In meinem angeklickten Zustand, wie immer, bringe ich das hier her. Bringen Sie das hier her. Verstecken Sie zuerst, dritter 1 Klick Jahr alt. Bringen Sie es in die Mitte, doppeltippen Sie, um es auf 0 zu senken. Und dann schalten Sie dies zum Beispiel auf 45. Wechseln Sie auch auf 45. Und gehen Sie vom Standardstatus zum Sammelstatus. Ich denke, es funktioniert gut. Ich werde auf Löschen klicken. Gehen Sie zurück zu hier und sehen Sie, wie es drinnen aussieht. So Standardzustand, geklickter Zustand, der gut funktioniert. Und lasst uns zum Prototyp gehen. Und mal sehen, was wir hier haben. Also werde ich es, mal sehen. Klicken Sie auf die Registerkarte Download, automatisch animieren. Status ist inout 0,4 Sekunden. Lassen Sie uns dies ändern, um das Ein- und Aussteigen von 0.4 zu erleichtern. Wenn Sie sich daran erinnern, dass dies etwas schneller ist als die gesamte Animation, dann gehen Sie zum geklickten Zustand. Ich werde das Gleiche tun. Klicken Sie hier und gehen Sie zum Standardzustand 0.4. Das ist in Ordnung. Und schließlich, lassen Sie uns schnell eine Vorschau und Sie können sehen, wie klein unser Vorschaufenster jetzt ist. Also, wenn ich hier klicke, tut mir leid, ich muss es ändern, um hier zu sein. Also lasst uns das zuerst machen, bevor wir uns das ansehen. Also Standard-primäre jetzt verwischen Ich werde es auf 375 wie Schulden beschränken. Und ich werde primär nav gehen, ich werde gehen, schauen wir uns sekundäre nav. Eigentlich verlängern wir unsere Unschärfe, damit ich sehen kann, was ich tue. Erweitert bis hier unten zum Beispiel. Und mal sehen, was wir tun. Also, wo ist der Grenzpunkt genau hier? Also kann ich es vorerst runterbringen. Und wir werden sehen, was wir eigentlich brauchen werden, genau hier. Also zweitrangig werde ich es herbringen. Ich werde meine Menüpunkte mitbringen. - Dan. Ich bringe sie ins Zentrum und stelle sicher, dass sie etwas weniger unten sind. Also Shift 1, 2, 3, 4. Und in ihnen, weil wir Stack verwenden, werde ich sie zum Beispiel auf 40 reduzieren. So sind es 40 zwischen jedem unserer Artikel, wie Sie sehen können. Endlich werde ich das auch auf 40 zurückbringen. Und einen werde ich hier machen, weil wir nicht genug Platz haben. Ich werde sie einfach aufheben. Aber nennen Sie es sekundär nav. Kopieren tut also auf Gruppensteuerung G, um sie zu gruppieren und sie dann zu einem Stapel wie diesem zu machen. Stellen Sie sicher, dass wir in einem Zentrum sind und stellen Sie sicher, dass wir ein 40. Für diese Stapel oder sekundäre Nav werde ich auch 40 verwenden, aber zum Beispiel, lassen Sie uns nach unten auf 60 gehen, nur damit wir ein bisschen mehr Platz haben. Endlich, für unseren primären Enabler, brauchen Sie es nicht, um den ganzen Weg runter zu gehen, um es zu wagen. So können wir es zum Beispiel irgendwo hier abschneiden. Also lasst uns mit 100 gehen. Zum Beispiel. Mal sehen 10, 5, 1 oder 2. Hunderte, so Milchherde. Was ich also tun werde, ist, dass ich sie alle mitbringen werde. Also Control C, klicken Sie auf Zustände, ich gehe zu Control V, dann bringen Sie das herunter, also verstecken Sie es. Ich gehe zu meinem primären nav Menü jetzt mehr Galle klicken Sie rechts dort und dann gehen Sie zu meinem Standardzustand und ich werde alle von ihnen verstecken. Also sekundäre nav und Menüpunkte, ich werde sie auf 0 bringen. Primäre nav Unschärfe. Ich werde es auf 1 bringen, so in der Höhe. Und dann werde ich meinen Prototyp benutzen. Also haben wir den Prototyp dort, angeklickt. Es bringt uns zurück, weil wir es im Menü-Symbol gehalten haben. Also, wenn ich es öffne, haben wir die Menü-Tap-Punkte. Wir haben es nicht geändert, um nur den Abstand dafür zu ändern und einfach zu platzieren. Mal sehen, ob der Menü-Tab-Punkt genau hier ist. Mal sehen, dass es genau da ist, was großartig ist. Gehen Sie zum Standardzustand drücken Sie Vorschau, und lassen Sie uns sehen, was wir gerade hier arbeiten. Klicken Sie also. Wir haben diese tolle Animation. Lassen Sie uns also den Standardstatus sehen, geklickten Zustand und das ändert sich. Irgendetwas stimmt nicht, genau hier. Schauen wir es uns an. Primäre nav Menü-Tappunkt führt uns auf geklickten Zustand. Und klicken Sie Zustand führt uns zum primären Nahpunkt, MiniTab Punkt. Wenn ich direkt dort klicke, bringt es uns in den Standardzustand, okay? So einfach in 0,6 Sekunden. Mal sehen, ob das der Fall für die primäre ist. Also 0.6, wie Sie sehen können, das ist großartig. Also, wenn ich jetzt auf Vorschau klicke, sollte es gut funktionieren. Da hast du es, weil es nicht verbunden war. Und Dan, als ich darauf klickte, animierte es einfach das Symbol selbst, ohne all diese anderen. Also lasst uns jetzt weitermachen und ich gehe zurück zum Design hier, und ich werde zuerst an meinem Heldenbild arbeiten. Also mal sehen, was wir zuerst tun können, ich werde hier reinspringen und das alles wieder reinbringen. So wie so. Und weil es viel einfacher ist. Und dann gehen Sie zu meinem Helden Bild Standardzustand. Ich werde sie so reinbringen. Und Milchherde. Und schließlich, Bildnummer, um sie in so zu bringen. Also sehen sie alle recht kohärent aus. Und ich glaube nicht, dass wir zu viel von diesem Raum brauchen, aber lassen Sie uns erkunden und sehen, was wir tun können. Zunächst einmal wird dieser Text offensichtlich viel kleiner sein müssen. Also für diesen ersten, werden wir 18 für diesen Top verwenden. So hat es Standard-Status-Hero-Bild-Textmaske. Also für diesen Text, müssen wir mit 18 gehen. Ändern wir es auf 18 und dann Haupt blau und sehen, was wir hier haben. Also werde ich es zum Beispiel auf 10 verschieben. Und dafür werde ich ein neues von 80 erschaffen, wie Dreck. Und mal sehen, vielleicht ist das nicht das, was ich will. Vielleicht kann ich es auf 120 erhöhen oder irgendwann mal das mal sehen. Ich denke, das ist wirklich ziemlich klein. Also lasst uns zuerst tatsächlich zu Zeiten zurückgehen, die ich in das. Und dann bringst du sie alle ins Zentrum und siehst, womit wir arbeiten? Mein Dad und wann ich auch meinen Knopf mitbringen soll. So wie das. Positionieren Sie es hier. Mal sehen, womit wir hier arbeiten. Also werde ich diese erweitern, denn wenn Sie sich erinnern, extrahierten wir sie, wenn Sie den Hover-Schalter töten, wie wir es für all diese Pfeile unten getan haben. Also werde ich es hier schieben. Dann werde ich das entfernen , weil wir es nicht brauchen, weil es nicht mehr da ist. Wählen Sie dann die Texte wie die Schaltfläche aus, stellen Sie sicher, dass sie sich in der Mitte befindet. Dann werde ich meine Pfeile bewegen, um auch in der Mitte zu sein. Und schauen wir nach der Entfernung, denn es war 18. Jetzt bringen wir es auf 60, zum Beispiel, n, Dies sollte ein bisschen kleiner sein, aber lasst uns anfangen, daran zu arbeiten. Also für jetzt, was ich tun werde, ist, den Text zu ändern. Mal sehen, ob ich unser primäres Navi verstecke. Verstecken wir unser unteres Navi, damit es uns nicht ablenkt. Eigentlich müssen wir das nicht, weil es unten ist. Also für unsere Helden Bild, Ich werde zuerst doppelklicken Sie auf mein Peking, klicken Sie rechts hier und dann gehen Sie 120 zum Beispiel. Es funktioniert, aber ich glaube nicht, dass es für ihre Gada funktionieren wird. Also, wenn wir mit 80 gehen, denke ich, es ist ein bisschen klein. Lassen Sie uns damit umgehen. Also weiß ich nicht, ich mag es nicht zu sehr. Also sind es 100 für diesen hier. Ich denke, es wird gut. Mal sehen 20. Lass uns mit diesen anderen herumspielen. Also lassen Sie uns überprüfen, wer dugata. Also zuerst, bringen wir unsere Moschee rein, damit wir sie schön abschließen können. So wie das. Ich werde es so positionieren, bis an die Ränder unserer Texte so. Also werde ich meinen zweiten Text einbringen und ich werde es solide C verstecken, und das ist 100. Also lasst uns weitermachen und es direkt hier erstellen. Also lassen Sie uns die Textnummer 1 ausblenden. Also werde ich mit Paris gehen. Klicken Sie hier und wählen Sie 100. Da gehen wir. Ich werde auf diese klicken und wählen 18 und dann Hauptblau gehen. Und noch eine Sache, die ich überprüfen möchte, ist der Abstand zwischen diesen beiden. Also denke ich, ich habe 20 in arabischer Gewohnheit. Also verstecken Sie es. Und ich werde die zeigen, stellen Sie sicher, dass sie so zentriert sind, wie diese Position, dieses Reh. Und dann schließlich bringen Sie den Pariser Text in einer Entfernung von 26. 1789, 120, so. Da gehen wir. Und mal sehen, das ist 18, das ist 100, was in Ordnung ist, und dann verstecken Sie es einfach und bringen Sie die Textnummer 3 ein. Also zeig es und bringe es dann rein. Ich werde auf diese klicken. Also wieder, wir sind bei 18, blaue Position sind genau da und das wird 100 sein. Mal sehen, ob es funktioniert. Es macht 17, 18, 20 so. Und das Letzte, was ich tun möchte, ist, unsere Maske ein wenig zu ändern, weil sie unsere Haggadah-Texte abschneiden wird , damit ich sie von Kante zu Kante wechseln kann. Also von hier bis hier oben ihr Ego. Und schließlich kann ich meinen ganzen Text einbringen. Mal sehen. Nummer drei ist gut. Nummer zwei ist gut. Nummer eins ist nicht gut, weil wir das in dieses Blau ändern müssen. Bevor wir also weiter mit unseren Texten weitergehen, möchte ich die Gesamthöhe unserer Bilder reduzieren. Also, was ich tun werde, ist, alle auszuwählen, weil Sie sehen können wohin sie gehen, und vielleicht verschieben Sie es irgendwo, etwas hier in der Nähe vielleicht. Nun lasst uns unsere Hauptnavigation einbringen. Wir können mit den Texten gehen, so Text-Moschee und wir können unsere Textmaske nach oben verschieben. Und das halte die Umschalttaste gedrückt und benutze dann einfach zum Beispiel, wo endet es? Genau hier. Verschieben Sie es nach unten AT, und verschieben Sie dann den Rest von ihnen AT. Also mal sehen, wo ist unsere Textmoschee hier ist es 80, und dann sind diese 60. Wenn wir unseren Button hier schweben, sind wir bei 60, was großartig ist. Und das Letzte, was ich ändern möchte, ist dieser Pfeil einfach hier schieben und Kerbe und dieses hier nur ein Pixel genau hier. Nun, da das abgeschlossen ist, werden wir den Rest von ihnen animieren. Aber bevor wir das machen, mag ich immer noch nicht, wie das unten aussieht. Also werde ich ein Duplikat meiner Pfeile machen und 80 Pixel runter gehen und dann all das in einer weiteren Zeit wieder hierher bringen. Also, wo es mit unseren Pfeilen schneidet, dann werde ich die Kopie unserer Pfeile entfernen. Und da haben wir es. So haben wir jetzt viel prägnantere Heldenbilder. Also das nächste, was ich tun möchte, weil wir das Ganze natürlich wieder beleben werden , ist das Spielen mit unseren Bildern. Also unser erstes Bild, ich werde tatsächlich auf so etwas eingestellt. Vielleicht, mal sehen, welcher Winkel besser ist. Vielleicht verbirgt dieser es tatsächlich. Dann mach das andere für das Paris. Also werde ich hier klicken und dann einfach dieses verwenden. So, oder vielleicht sogar noch mehr hier, nur damit wir sehen können, dass es ist, es ist ein seltener. Und schließlich, diese dritte, was immer Sie wollen, werde ich diese Leute in diesen Hof stellen, zum Beispiel in den Hintergrund. Und da haben wir es. Also werde ich alles reinbringen und ich werde es nennen, lass es uns zuerst in eine Gruppe geben. Es wird viel einfacher für uns sein. So Held Bild, wenn man es Hero Bild mobil nennen. Und dann heben Sie die Gruppierung dieser Komponente auf, drücken Sie die Strg-Taste. Und für diese erste Komponente, die ich tun werde, ist offensichtlich meine beiden Texte unten zu verstecken. Also werde ich sie aus dem Weg bringen. Alles in Ordnung hier, also ist es in Ordnung, solange sie hier nicht sichtbar sind. Also werden wir einen zusätzlichen Zustand erstellen und ihn nennen, zum Beispiel, nennen wir es einen Virus. Und für die Paris, Lasst uns zur Text-Moschee gehen. Bewegen Sie unseren zweiten Text nach innen. Stellen Sie sicher, dass es wie dat aufgereiht ist. Bewegen Sie unseren ersten Text aus dem Wal und Schmutz und erstellen Sie einen anderen Text und einen anderen Zustand namens Daten. Und dafür natürlich, bewegen Sie unseren dritten Text hinein. Habe ich. Und mehr zweiter Text draußen. Ich verstehe. Lassen Sie es uns schließlich animieren. Also gehen Sie zum Prototyp, gehen Sie zum Heldenbild, und wenn Sie zu den Pfeilen gehen, Pfeil nach rechts tippen, gehen wir nach Paris, 0,6. Geh nach Paris. Pfeile. Links wird uns in den Standardzustand bringen und ein Recht auf Ernennung wird uns dazu bringen, Daten zu speichern. Und schließlich, die gleichen vier, die unabhängig. Also werde ich hier klicken. Arrows, linker Def Point bringt uns nach Paris. Und ein rechter Reiter wird uns nirgendwohin bringen, denn das ist unser letzter Zustand. Jetzt endlich, lassen Sie uns mit den Bildern umgehen. Im Standardstaat zeigen wir Peking im Pariser Bundesstaat. In der Designabteilung werden wir diesen hier wirklich verstecken und Paris zeigen. Und im Bundesstaat Haggada werden wir beide verstecken. Ich habe es getan und nur Kalkutta gezeigt. Schließlich lassen Sie uns Desktop-Bearbeitung. Sehen Sie, ob es funktioniert, wie es sollte. Hier ist es. Für klicken Sie rechts dort. Wie Sie sehen können, geht es ganz nach unten, was mir nichts ausmacht, Sie können sie umverteilen wenn Sie sie links und rechts positionieren wollen. Und alternativ können Sie auch die Höhe dieses Textes senken und so setzen. Wir haben immer noch die hier schwebten, damit wir das loswerden können, wenn wir wollen. Und das werde ich in einer Sekunde tun. Aber jetzt wollen wir diese einfach erkunden und sehen, was wir haben. Und ich mag es wirklich, wie das aussieht. Also, bevor wir weiter gehen, lassen Sie uns schnell, schnell überprüfen. Gehen Sie also in den angeklickten Zustand und gehen Sie zu sekundärem Nav und gehen Sie zum Prototyp. Lassen Sie uns diese Hover-Effekte loswerden. Ich werde nirgendwo damit hingehen. Dasselbe für diesen hier, also geh zu keiner. Und schließlich, dasselbe für diesen hier, geh zu keiner. Also jetzt haben wir keine Hover-Effekte auf diese. Nun endlich, für diesen nächsten Abschnitt, was ich tun werde, ist, dass ich sie tatsächlich ziemlich viel neu verteilen werde. Also in einem, auf der einen Seite, werde ich Ziel haben und unten tippen, werde ich Aktivitäten haben. Und darunter werden wir uns selbst suchen lassen. So können Sie die Suche an dieser Stelle animieren, wenn Sie möchten. Das werde ich nicht tun. Ich werde sie einfach dort für den Boden positionieren. Wie gesagt, ich werde es genau dort positionieren. Es ist also die Suche nach Reisen und wann man es tatsächlich unter Ziele verschieben kann. Ich werde es so an unserem Raster ausrichten. Und ich werde meine Trennwand loswerden. Destinationen. Bg wird hier zum Beispiel umhergehen. Irgendwo in der Mitte, vielleicht genau hier. Mal sehen. Ich mag es. Dann gehen Sie in die Städte, Ziel den Fahrer und bringen Sie ihn einfach zurück. Nur eine Berührung. Maske wird offensichtlich nur ein bisschen größer für so etwas sein. Dann werde ich offensichtlich alles von Control C kopieren und zur angeklickten Zustandskontrolle V gehen und mal sehen, ich muss tatsächlich wieder kopieren Verhör. Also nicht nur Elemente aus dem Inneren der Maske. Und entferne den alten Klick hier und verlängere meine Maske bis hierher. Also, was Sie tun können, ist tatsächlich erweitert, um hier herum, gehen Sie zwei Richtungen, bg, wo ist es hier? Es wird zum Beispiel auf hier ausgedehnt. Und dann erweitern Sie einfach unser Maskottchen um ein kleines bisschen mehr. Erweitern Sie das hier und gehen Sie dann zu hier, und bringen Sie es dann den ganzen Weg hierher. Also dieser gesamte Abschnitt ist mit diesen drei Elementen scrollbar und dann müssen Benutzer tippen und dann scrollen Sie durch alle diese zusätzlichen Elemente. So Standardzustand. Jetzt lasst uns an unserem Typ arbeiten. Ich werde es so ausrichten. Ich werde auch meine Trennwand loswerden, weil ich sie nicht mehr brauche. Offensichtlich werde ich bg benutzen oder den ganzen Weg bis hierher. Ich werde unsere Maske bis hierher erweitern. Ich kann sogar hier bis zum Ende der Seite gehen. Es spielt wirklich eine Rolle. Also mal sehen, für den Genotyp werden wir zuerst dasselbe tun. Also werden wir zeigen, mal sehen, 123. Also lassen Sie uns drei dieser Reisen zeigen. Schließen Sie es wirklich schön ab, wagen Sie es. Und dann endlich mal sehen, ob wir unsere BG erweitern. Lassen Sie uns zuerst unsere Schaltfläche Anwenden ausblenden. Cbg und Linien werden Läufer schön besetzt zeigen, das ist in Ordnung. Jetzt gehen wir weiter und kopieren es. Gehen Sie zum geklickten Zustand, der im Löschen des alten Status basiert und erweitern Sie diesen einfach nach unten. Alles klar, hier und gehen Sie mit unserer Maske und erweitern Sie unsere Maske bis zum Beispiel hier. Gehe zurück in den Standardzustand und ich werde meine Aktivitäten nutzen, sie hier unten positionieren. Mal sehen, wir sind zum Beispiel 20, für diesen können Sie es auf 40 positionieren, wenn Sie wollen. Es liegt wirklich alles an dir. Ich werde unsere Trennwand loswerden, weil wir sie nicht mehr brauchen. Aktivitäten. Ich werde es hier erweitern und die Maske, die ich erweitern werde, um zu hören, weil wir einfach unseren Raum jetzt für die Aktivitäten selbst anpassen. Klicke schnell direkt dort und lass es uns auf drei abschneiden. Also genau hier. Da hast du es. Mal sehen, Maske VG, alles funktioniert gut. Also kopieren Sie es, gehen Sie zum geklickten Zustand, Basiert es in, löschen Sie den alten. Und schließlich erweitern Sie unsere Aktivitäten auf dem Weg hierher, und erweitern Sie unsere Maske bis hier unten. Lassen Sie uns schließlich zum Standardzustand zurückkehren und die Suche nach Reisen verwenden. Und ich werde es hier positionieren, stellen Sie sicher, dass es 20 ist. Und wir haben jetzt unten Vg, was wir offensichtlich nicht mehr brauchen werden. Also für die Suche selbst, was ich tun werde, ist es hier zu erweitern. Und ich werde, mal sehen, die Nähe benutzen. Lass es uns reinbringen und sehen, wie es aussieht. Positionieren Sie es hier 20 Pixel und reduzieren Sie dann die Größe. Und ich kann tatsächlich alle von ihnen wie diese Kontrolle C verwenden. Dann gehe zu meinem angeklickten Zustand, drücke Control V, ich entferne die alten. Und ich bringe das einfach zurück und drehte mich ein bisschen so. Also gehen Sie zwischen Standard- und Klickstatus, und ich denke, das ist in Ordnung. Schließlich kann ich für die Schaltfläche „Anwenden “ nach unten verschieben. Ich kann sicherstellen, dass es 20 ist. Ich kann es hier erweitern und Derek hat es. Also 20. Mal sehen, diese Textgröße ist bei 18, das ist ein 24. Vielleicht sollten wir das sogar auf 18 senken, stellen Sie sicher, dass es so weiß ist. Und schließlich gruppieren wir sie alle wie einige. Aber es kann auch tun, ist das gleiche für diesen Knopf, weil ich denke, es ist viel zu groß. Also gehen wir für den Helden, Hero Button. Entdecken Sie jetzt, einfach auf 18 eingestellt. Geh zurück. Stellen Sie sicher, dass es in der Mitte ist. Und was Sie tun können, ist tatsächlich, Sie können klicken und kopieren Sie es, wenn Sie wollen. Aber wie Sie sehen können, hat es es in allen unseren Zuständen gut angewendet , weil wir es im Standardzustand geändert haben. Also da haben wir es, Das ist es für diesen Abschnitt. Das Letzte, was ich tun möchte, ist hier angepasst. Wie Sie sehen können, sind wir bei 26, also kann ich vielleicht nach Turley und dann 40 gehen, nur damit wir etwas mehr Platz haben, mit dem wir herumspielen können. Und schließlich, wenn ich Preview, Ich werde diese Position in der Mitte vergrößern. Das funktioniert also, wie es sollte, was großartig ist. Wenn Sie auf dieses klicken, wird es Ihnen drei zeigen und Sie können nach unten scrollen, wenn Sie möchten. Und du klickst auf diesen. Es ist dasselbe, was großartig funktioniert. Klicken Sie auf diesen. Es funktioniert großartig. Und schließlich, für die Suche, haben wir diese schöne Animation und wir können Filter anwenden. Also, das ist es für dieses Video, und das ist es für diese Abschnitte, die im Grunde die langweiligsten Bits von allen sind. Im nächsten Video werden wir weitermachen und einige dieser anderen Abschnitte wiederholen und ich werde Ihnen zeigen, was wir auch tun können. Endlich, wenn wir die mobile Version und die mobile Größe fertig sind, werden wir diesen Abstand ein wenig in Angriff nehmen. Also 150 für das Handy, es ist offensichtlich viel zu viel, denn wie Sie sehen können, haben wir die Größe von so ziemlich alles genau hier reduziert. Also werde ich dasselbe auch für die mobile Version tun. Also, das ist es für dieses Video und ich werde Sie im nächsten sehen , wenn wir mit diesen Änderungen fortfahren werden. 49. Ein Responsive Design 13: Lassen Sie uns jetzt weitermachen und weiter an diesem Layout arbeiten. Und fangen wir mit dem Sonderangebot an. Also werden wir im Grunde dasselbe tun, wie wir es dort oben getan haben. Also für diese erste, werde ich es auf 100 reduzieren, in fast schwarz bringen. Und für diesen zweiten werde ich 18 verwenden und dann dunkelgrau verwenden. Ich werde sicherstellen, dass beide zentriert sind und sie dann so zentrieren. Weil ich das jetzt nicht tue, bin ich nicht in der Lage, den Text physisch hinein zu passen. Ich werde noch weiter gehen. Also werde ich zum Beispiel mit 80 gehen. Und dann verwenden Sie 64, die Entfernung. Ich glaube, das wird fremd sein oder nicht. Lass uns sogar mit 40. Das ist also, das ist 18 und das wird 80 sein. Und jetzt, da dies unsere neue ist, werde ich einfach hier klicken, um es hinzuzufügen. Und für all diese Abschnitte werden wir 80 und dann 18. Also lassen Sie uns voran und wenn ich hier rechts klicke, können Sie immer noch sehen, es hält 150 Distanz. Also, was wir mit diesem machen werden, offensichtlich, weil wir jetzt diese Karten haben und wir haben diese First-und Last-Minute-Angebote. Was ich zuerst tun werde, ist mit diesen herumzuspielen. Also, bevor wir überhaupt loslegen, möchte ich schnell einen Inhalt, spezielle Angebote, mobil wie das treffen . Und ich werde offensichtlich die Gruppierung dieser Komponente aufheben. Jetzt für den Moment werde ich verwenden und Tabs. Und ich werde hier und da ein paar Änderungen vornehmen. Also werde ich diese Stoppuhr hier nach oben positionieren und dann zum Beispiel 10 verwenden. Und dann werde ich einfach die erste Minute benutzen. Mal sehen, was wir tun können. Positionieren Sie es hier. Ich glaube nicht, dass das funktioniert. Also lassen Sie uns zum Beispiel 18 Volt verwenden. 18 Volt Milchgewohnheit. Es funktioniert viel besser und fügen Sie es dann einfach zu Character Styles hinzu. Nun, lasst uns dasselbe für dieses tun, also richte es aus. Und ich werde, zuallererst, passen Sie unser Symbol an die Spitze ist die 10. Klicken Sie hier, und gehen Sie mit 18 Volt, und ändern Sie dann einfach die Farbe in hellgrau. Ich werde einen Last-Minute-Text benutzen. Du hast es. Nun, was ich tun werde, ist das Rechteck zu erstellen und ich werde sicherstellen, dass es zwei Spalten breit ist. Habe ich. Ich werde alle drei von ihnen in der Mitte positioniert auswählen und einfach sicherstellen, dass sie genau hier passen. Ich werde mein Rechteck entfernen, dann mache das Gleiche hier. Wählen Sie also ein Rechteck wie dieses aus , stellen Sie sicher, dass alle diese in der Mitte sind. Wählen Sie alle drei davon aus. Und da haben Sie es entfernt, dass Rechteck. Und wenn ich es einfach augapfel, stellen Sie sicher, dass sie so positioniert sind, wie sie sollten, wie sie genau hier sind, wie Sie sehen können. Also ist alles richtig aufgereiht. Also, jetzt, da die Tabs fertig sind, seine Arbeit an unserem ersten Minute-Angebot, und das wird Regatta sein. Also zunächst einmal, verwerfen offensichtlich wird nicht für uns arbeiten. Also, was wir tun können, können wir Einsicht springen und für Beispielgruppe, all diese Dinge. In eine Gruppe, inklusive unserer Karte BG. Also lassen Sie es uns zuerst zum Beispiel hier reduzieren. Und es ist hoch ihr Image sehen, was wir haben. Also denke ich, das könnte tatsächlich funktionieren. Also werde ich eigentlich alle unsere Inhalte auswählen. Stellen Sie sicher, dass es so gefüttert ist. Mal sehen, Wir sind sieben, also 1, 2, 3, 10 von diesem Rand. Und lass uns Pfeil sehen. Ich werde den Pfeil an dieser Kante genau hier positionieren, und jetzt brauchen wir das Bild. Also ging ich, um mein Bild zurück zu bringen. Ich werde es hier erweitern. Und mal sehen. Wir werden jetzt links und oben rechts anhalten und diesen loswerden. Und für die Höhe, mal sehen, vielleicht können wir mit 150 gehen, sehen, wie das aussieht. Ich denke, das funktioniert gut. Und vielleicht sogar 160, nur um es ein bisschen mehr Bildschirm Immobilien zu geben, 160, da haben Sie es, n jetzt wählen Sie einfach alles aus. Mal sehen, und ich kann es nach unten 20 bewegen. Wählen Sie unseren Warenkorb aus und positionieren Sie ihn bis hierher. Also wieder, Bild ist 1, 60 in der Höhe, das ist 20, sorry, 40 unten. Und jetzt können wir mit dem Rest spielen. Wenn Sie möchten, können Sie den Text anpassen und die Größe des gesamten Textes ändern. Aber das werde ich nicht tun. Ich wähle unser Tokyo aus und ich werde dasselbe tun, aber bevor ich es tue, werde ich das verstecken. Und ich mache das alles, weil wir jetzt nicht mehr scrollen. Wir werden nach links und rechts scrollen, aber jetzt nicht nach oben und unten. Also lasst uns an unserem Tokyo arbeiten. Und lasst es uns tatsächlich so hierher bringen. Und lassen Sie uns dasselbe für alle tun. Gehen wir mit Bali, ziehen Sie es so nach hier. Und lasst uns diese drei mitbringen. Und mal sehen, wo sie sind. Okay, Paris ist also da. Es ist mehr Riss von NTP wie dieser. Und dann so. Und da haben wir es. Also werde ich die Sichtbarkeit all dieser Dinge reduzieren und ich werde einfach an unserem Tokyo arbeiten. Also wieder, Bild ist 160 und der Abstand ist 40 zwischen diesen. Also lassen Sie es uns verstecken. Und zuerst, bringen wir das hier zurück. So wie so. Dann werde ich mein Bild verstecken. Ich werde all diese Informationen in die Schicht bringen. Und einmal, dann werde ich mein Bild bringen und sicherstellen, dass es 160 in der Höhe ist. Ich werde es hier erweitern. Also, um unsere App und sehen etwas ist nicht richtig mit unserem Quantum. Bewegen Sie unseren Pfeil so, und überprüfen Sie einfach mein Bild, stellen Sie sicher, dass es in Ordnung ist. Es wird in einem angepassten um wahrscheinlich hier doppelklicken. Und dann verstecken Sie es wirklich schnell, damit wir alles auswählen können. Mal sehen 160, das ist in Ordnung. Wählen Sie alles aus und verschieben Sie es einfach nach unten 40. Oder ich denke, 20 wird ein bisschen besser sein als 40. Also werde ich die erste Karte in nur einer Sekunde reparieren. Tokio ist also fertig. Öffne die Haggada und wähle sie alle aus, bringe sie auf 20 und schließe sie. Und da haben wir es. Lasst uns an unserem Bali arbeiten. Bringen wir es zurück. Also zuerst, bringen Sie die mündliche Karte hierher, bringen Sie das Bild hierher. Sicher. So sind wir 55.000. Und stellen Sie sicher, dass wir 160 sind, wie dat, ich werde auf Position doppelklicken, um ungefähr hier zu sein. Oder noch besser können wir diese zum Beispiel verschieben, unser Bild verbergen und ich werde alle meine Elemente auswählen, sie hier verschieben. Dann bewegen zehn Pixel den Pfeil. Es braucht also die Kante so. Zeigen Sie unser Bild zurück, wählen Sie alle unsere Inhalte aus und bringen Sie es hierher. Und dann tun Sie 20 und benutzen Sie einfach unseren Hintergrund und bewegen Sie ihn nach oben, bis er sich hier trifft. Und dann werde ich den Rest von ihnen erledigen. Also lass mich diese drei machen. Ich werde das Video pausieren und dann wiederkommen. Und jetzt, da wir alle haben, möchte ich Ihnen zeigen, was wir schaffen werden. Also werden wir scrollbare Gruppe zu schaffen sind unsere Top 3 für jeden, weil wir sechs haben. Also, wenn sie die erste Minute tippen, werden wir diese erste scrollbare Gruppe sehen. Und dann mit dem Tippen in letzter Minute, werden wir dann die zweite scrollbare Gruppe setzen. Also, um das zu tun, werde ich Tokyo und Bali benutzen, sie so nach draußen bringen und sicherstellen, dass sie es sind. Verwenden wir zum Beispiel, lassen Sie uns 30. Bewegen Sie Bali aus dem Weg, bringen Sie es zurück. Lasst uns auch 30 benutzen. Also werde ich sie gruppieren, ihn in der ersten Minute so nennen und dann werde ich sie verstecken, damit ich die zweiten Stents machen kann. Also lasst uns diese zurückbringen, nach draußen verschoben. Stellen Sie sicher, dass sie 30 sind, und stellen Sie sicher, dass Sie den Typ a , der bei 30 als auch so sein wird, mitbringen . Und ich werde sie ausgliedern sie in letzter Minute anrufen. Und dann werde ich meine erste Minute Klick hier bringen. So kann ich eine scrollbare Gruppe erstellen. Und was ich tatsächlich tun kann, ist es hierher zu bringen. Also von der Kante zu Kante, weil wir eine kleinere Bildschirmgröße haben und es ausblenden und dann das gleiche für dieses tun. Also klicken Sie hier, bringen Sie es Kante an Kante und rufen Sie es in letzter Minute an. Also für diesen ersten Zustand werde ich tatsächlich die Deckkraft dieser letzten Minute reduzieren und wann ich das zurückbringen soll. Damit werden wir also arbeiten. Und schließlich, was Feld fehlt hier sind die Tasten. Also werden wir sie natürlich reinbringen. So wie das. Und mal sehen, vielleicht können wir sie auf 60 Millionen bringen. Und lassen Sie uns sie an der linken Kante von unserem Gitter ausrichten. Und lasst uns in beide springen. Also alle erste Minute werden wir es auf 18 reduzieren und dann dunkelgrau. Und tun Sie das gleiche für alle letzte Minute. So für die Rückkehr der Kriterien, 18, dunkelgrau. Und ich werde sicherstellen, dass ich diese Farbe loswerde , weil wir sie nicht mehr brauchen und wann wir das Gleiche hier machen müssen. Und zuerst werde ich sicherstellen, dass diese beiden zentriert sind. Dass diese beiden zentriert sind. Bringen Sie das auf 0 runter. Aber bevor ich es tue, möchte ich es hier erweitern. Dann stellen Sie sicher, dass es in der Mitte ist. Um es jetzt auf 0 zu senken. Ich werde dieses noch einmal zeigen, klicken Sie hier, und erweitern Sie es hier. Stellen Sie sicher, dass es in der Mitte ist. Und dann endlich, lassen Sie es uns noch einmal messen. Also sind es 60, was in Ordnung ist. Dies ist bei 0 Fettleibigkeit, dies ist bei 100 Fettleibigkeit, was groß ist. Und jetzt lassen Sie uns eine Komponente für diese speziellen Angebote mobile erstellen. Also drücken Sie die Steuerungstaste. Und wir werden klicken, um einen neuen Zustand Qualität in letzter Minute erstellen. Also in diesem ersten Zustand werden wir nichts tun, weil Benutzer nach links und rechts scrollen können. Und im letzten Zustand, was Sie tun werden, ist tatsächlich diese Änderungen vorzunehmen. Also für die Tabs, wir das ändern, um blau zu sein. Und wir werden das in hellgrau ändern. Für diesen werden wir die erste Minute reduzieren, Zunahme in letzter Minute. Und schließlich für die Buttons werden wir diese zuerst verstecken, auftauchen, diese letzte und Wissen. Gehen Sie weiter und schalten Sie es zurück in den Standardzustand, drücken Sie die Vorschau und sehen Sie, was wir bisher haben. Also hier sind die Sonderangebote und die angehobene Ladung nur für eine Sekunde. Hier ist es. Zunächst einmal, wenn ich die erste und letzte Minute klicke, aber ich sollte es zuerst animieren, gib mir einfach eine Sekunde. Also geh zum Prototyp, und ich werde diesen auswählen. Klicken Sie darauf. Also werden wir tippen Auto animieren, erleichtern in, out last minute und 0.6 sekunden. Dann werde ich es schließen. Geh zurück in die letzte Minute. Klicken Sie hier, tippen Sie auf, und wir gehen zum Standardstatus. Lass es uns jetzt zurücktauschen. Und jetzt, wenn ich u und klicken Sie rechts hier, Sie können sehen, dass es schön zwischen ersten und letzten Staaten übergeht, was großartig ist. Und Sie können auch direkt hier klicken und zwischen diesen Zuständen ziehen. Also ich weiß nicht, warum es hier nicht funktioniert. Weil ich es nicht geändert habe, habe ich es nicht kopiert. Also lasst uns das machen. So Design. In letzter Minute werden wir die zeigen. Und tatsächlich, ja, in diesem müssen wir diese verstecken, weil es von unseren Benutzern ablenkt, um klicken und schweben zu können. Also lassen Sie mich zeigen, dass Sie klicken und ziehen. Beachten Sie, das ist also der erste. In letzter Minute hat es dir jetzt verborgen. So sieht es aus. ersten Minuten funktioniert alles. In letzter Minute funktioniert alles, nur weil wir es hier vor dir versteckt haben. Also jetzt gehen wir weiter und beschäftigen uns damit. Also mal sehen, wir haben es im Standardzustand gelassen, was für das Promo-Video in Ordnung ist. Offensichtlich werde ich es hier reduzieren und es wieder hierher bringen, zum Beispiel zu etwas Kleinem und Schönem. Und mal sehen, unser Spielsymbol blieb gleich. Für Europa werden wir also im Grunde dasselbe tun. zunächst Lassen Sie unszunächsteinen Abschnittstitel einbringen. Lassen Sie uns es so in die Mitte stellen, und lassen Sie uns mit diesen Veränderungen umgehen. Also für Europa werde ich mit sehen, wo es ist. Also Muskoka, 18, das wird 18 sein, dunkelgrau. Und lassen Sie mich einfach nach den Abständen hier suchen. Also zwischen diesen sind es 40, also das ist 18, das ist ATN, der Abstand ist 40. Also lasst uns das hier unten für Europa tun. Also nur 20 nach oben. Oder ich kann das runterbringen, und es wird unser ganzes Layout etwas runterbringen, was in Ordnung ist. Und wir werden offensichtlich ein bisschen später nach oben eingestellt, oder ich kann es sogar tun jetzt einfach hier klicken, dann gehen Sie zurück und passen Sie es an. Also mal sehen, wir sind bei 84 hier, was ich nicht mag. Ich werde es auf vier Pixel bringen. Mal sehen. Und dann bringen Sie es auf 60. Mal sehen, wo wir hier sind. Also sind wir 48 hier, was nicht ideal ist. Also lassen Sie uns das auch tun. 40 dafür. Das gefällt mir nicht. Also mal sehen. Positionieren Sie es hier. Stellen Sie sicher, dass es 60 ist, und bringen Sie das auf 40. Ich denke, das sind 150. Also wieder 60 und dann 40 genau hier. Ich werde in die letzte Minute wechseln, und lasst es uns hier wieder ändern. Wenn es notwendig ist. Das ist 60, das ist 40. Es hat sich also im Standardzustand geändert, was großartig ist. Jetzt gehen wir weiter und gehen weiter hierher. Also, was ich hier tun werde, ist wirklich extrem einfach. Ich werde einfach einige von ihnen loswerden. Also zuerst, lasst uns auf RCTs klicken und ich werde dasselbe tun. Also einfach auf diesen Anstieg eingestellt. Und ich werde es an diesen Rand anpassen, genau hier. Was ich dann tun werde, ist in Städte zu gehen. Und jetzt, wie Sie sehen können, haben wir sechs davon. Also werde ich drei loswerden und drei von ihnen reinlassen. Und was ich tun werde, ist im Grunde zu sehen, wo es angepasst werden muss. Also im Grunde Paris, mal sehen. Wir werden es so bewegen müssen, wie dies nur ein wenig war. Und dann erweitern Sie einfach unsere Karte nur ein wenig. Also all diese Gegenstände wie diese. Also bewegen wir im Grunde unser Bild, unseren Hintergrund und unseren Pfeil und unseren Knopf. So hoch, dass die Londoner Position hierher bringt. Also mal sehen. Um genau zu sein, öffnen Sie es, wählen Sie diese drei aus und erweitern Sie einfach so bis zum Rand. Verstecken Sie es und bringen Sie einfach Rom. Das ist es, was ich gesagt habe. So einige, einige von ihnen werden viel einfacher, weil wir jetzt keine Hover-Effekte haben, um die wir uns Sorgen machen müssen. Wir haben nur all diese Elemente, damit wir mit ihnen herumspielen können, wie wir wollen. Sie können dies sogar auf 20 reduzieren, wenn Sie möchten. Es bleibt also gleich, wie es hier oben ist. Aber weil dieses Bild zum Beispiel größer ist , können wir es auf 160 senken. Also jetzt werden diese Karten fast genau die gleichen sein. Ich meine genau das gleiche wie diese Karten hier oben. Also noch einmal, 160 und dann 20 hier. Also, weil ich diesen angepasst habe, muss ich zurückgehen und diesen anpassen. Also noch einmal, für die Höhe, gehen Sie mit 160 so, und bewegen Sie dann einfach den Inhalt auf 20 so. Haida London, geh zurück nach Paris, 160 für die Höhe. Und dann einfach das in 20. Nun, was ich tun werde, ist, diese erste zu animieren, und dann werde ich zurückgehen und alle diese anderen bearbeiten. Also werde ich ein letztes für Europa machen und dann werde ich voran gehen und die für Afrika, Asien und Amerikaner ändern , denn wie immer werden sie genau die gleichen sein. Das erste, was wir eigentlich tun werden, ist, einige dieser Dinge zu ersetzen. Also werde ich verwenden, bevor wir anfangen zu animieren, Lasst uns voran gehen und diese neu positionieren. Also bringen Sie es zurück. Und mal sehen. Ich kann sie zum Beispiel auf 30 senken, wie ich es bei den vorherigen gemacht habe. So wie diese, und dann einfach in unsere eigenen setzen Sie es nach draußen. Und lass uns 30 so sehen. Und ich möchte nur schnell überprüfen, was für meine Pfeile am besten ist, damit ich sie direkt unter meinem Knopf positionieren kann. Das ist es, was ich tun werde. Ich werde meine Tastenposition verwenden und hier stellt sicher , dass ich folge und diese Rasterlinien wie diese. Und ich werde ein bisschen in ein verlängertes springen. Und dann werde ich die Größe auf 800 reduzieren, stellen Sie sicher, dass es hellgrau ist. Und ich werde sicherstellen, dass es so in der Mitte geht, ihre Gewohnheiten. Und ich werde auch das gleiche für Hover tun, aber wenn Sie sich erinnern, wir haben den Horror nicht aufgenommen, also wird es nicht offensichtlich betroffen. Aber wie immer, wenn Ihr Kunde es will und da Sie es haben, haben Sie die Möglichkeit. Endlich für hier, Mal sehen, zwischen unserer Taste und unseren Karten, wir haben keinen Platz. Also werde ich es positionieren, um zum Beispiel bei 40 zu sein . Und ich werde dasselbe für unsere Pfeile tun. Also lasst uns mit 40. Ich werde sicherstellen, dass sie in einem Zentrum sind. Dieser Pfeil geht hier an diesen Rand. Dieser Pfeil geht hier an diesen Rand. Und da haben wir es. Lassen Sie uns den linken Tab-Punkt überprüfen. Stellen Sie sicher, dass es unseren Pfeil trifft. Das gleiche für den rechten Tab-Punkt, was es tut. Und das ist es im Grunde. Das ist es, was wir tun müssen. Dies ist alles erstellt und jetzt lassen Sie es uns schnell animieren. Was ich also tun kann, ist mit Europa zu gehen. Oder wir können sogar den gleichen Tab-Punkt verwenden. Also lasst uns das wirklich machen. Control G, ich nenne es Europa und ziehe es nach draußen. Also einfach die Gruppierung der Komponente aufheben. Und ich werde diese Pfeile unten loswerden. Ich werde nur das gleiche Layout haben, wie ich es hier getan habe. Also alle erste Minute, und dann wird es ganz Europa sagen. Also, von da an, im Grunde, was wir tun können, ist, dass wir es einfach in der Vorschau sehen können. Das schließen den ganzen Weg nach unten, weil wir Registerkarten hier haben, können Sie die Pfeile behalten, wenn Sie drei Zustände intensiv animieren möchten, wenn das etwas ist, das Sie wollen. Aber ich denke, das wird gut funktionieren, weil es all diese wichtigen Karten zeigt und dieser Knopf bleibt an der Unterseite angeheftet. gesamte Bereich ist gut lesbar und leicht zugänglich. Also denke ich, das wird gut funktionieren. Aber noch einmal, wenn Sie wollen, können Sie genau das gleiche Layout erstellen, wie wir es hier getan haben. Also, wenn ich Sie hier zurückbringe, haben wir drei Zustände, weil Benutzer dreimal klicken können, aber anstatt zwei Karten zu sehen, können sie einfach eine Karte auf diesem mobilen Layout sehen. Das war's also für dieses Video. Ich gehe jetzt weg und erledige die Afrikas, Asiens und Amerikas mit genau den gleichen Techniken, Größen und Abständen, also wird alles gleich sein. Also verschwende ich nicht zu viel von deiner Zeit. Und dann komme ich zurück und wir werden einige dieser anderen Abschnitte in Angriff nehmen. Also sehe ich dich im nächsten Video. 50. Ein Responsive Design 14: Okay, jetzt, da ich all diese verschiedenen Elemente angepasst habe, lassen Sie uns einen Analyten bewegen, sie erkunden. Und jedes Mal, wenn ich etwas nach unten passe, bewegt sich das gesamte Layout, weil es sich in einem Stapel befindet, wählen Sie einfach den Hauptordner aus. Deshalb habe ich es dort gesteckt und einfach nach oben zerschmettere und es wird sich gut ausrichten. Wie Sie sehen können, haben wir Europa, wir haben Afrika, wir haben Asien und wir haben Amerika. Also ist alles genau gleich. Und Sie können hineinspringen und in die Projektdatei einchecken und selbst sehen, wie alles aussieht. Lasst uns nun diese Bilder angehen. Und im Grunde, was ich tun werde, ist einfach so anzupassen. Und ich werde einfach hier reinspringen, angepasst an hier. Und ich werde auch die Größe auf so etwas ändern. So können wir mit 375 mit 260 gehen, zum Beispiel 375 mit 260. Und ich kann dasselbe für die anderen tun. So 375 Breite 260. Ich ändere das einfach in 375 Breite auf 60. Jetzt, da wir genau das gleiche Layout haben. Jetzt gehen wir zurück zu hier. Und ich werde diesen Text ändern. Lass uns hier reinspringen. Also lasst uns es zu 80 ändern und verschluckt 0 aus irgendeinem Grund. Ich weiß nicht, warum. Buchen Sie also Ihre Traumreise bei uns. Lassen Sie mich nachsehen. Ja, es hat es tatsächlich überall gemacht. Also lass mich weitermachen und es reparieren. Wird Traumreise mit uns heilen. Und ich muss tatsächlich die Breite dieses Textes ändern , um ihn in so etwas aufzunehmen. Da haben wir es. Ändern Sie es auch hier. Lassen Sie uns die Breite unseres Textes so in unser Raster ändern. Und lasst uns voran gehen und es hier ändern. Buchen Sie also Ihre Traumreise bei uns. Und ich werde es hier erweitern. Und dann einfach ein bisschen näher zu bringen. Mal sehen, nur damit es den Rand unseres Bildes trifft. Also da haben wir es. Und jetzt gehen wir weiter, weil ich glaube, dass ich das überall getan habe. Lassen Sie mich das auch hier tun. Bulkier Traumreise setzen uns einfach darauf, unser Bild genau hier auszurichten. Und es gibt eine perfekte Reise. Also habe ich im Grunde die ganze Sache repariert. Das sind also nur ein paar Dinge, die Sie hier und da anpassen werden. Und die Schönheit, Adobe XD für all Ihr Design zu verwenden, ist genau das. So können Sie schnell und einfach einige dieser Fehler beheben, wie in der Regel Kunden oder wann Sie für den Text Tokyo sagen, bringen Sie diesen rein, nehmen Sie ihn heraus, machen Sie ihn größer, machen Sie ihn kleiner. So können Sie wirklich alle diese wichtigen Änderungen wirklich einfach in Ihrem Text und in Ihrer Datei insgesamt vornehmen. Also lasst uns jetzt daran arbeiten. Ich werde auch auf diesen klicken. Stellen Sie sicher, es ist 18 Mischung, es ist dunkelgrau. Und ich werde meinen Text hierher bringen. Und mal sehen, was wir tun können. Einfach anpassen. Mal sehen, was wir wissen können. Vielleicht können wir den Traum loswerden. Sehen Sie eine ziemlich schnelle, Ich habe immer noch einige seltsame Probleme, die wir nehmen d. Also MOOC Ihre Mit uns so. Und ich werde einfach meinen Text auswählen und ihn so hineinbringen. Und dann werde ich dasselbe für hier und hier tun. Und mal sehen, was wir hier tun können. Wir können es zum Beispiel auf 40. Und mal sehen, was wir hier oben haben, wir haben 100, damit wir hier reinspringen können, es auf 60 ändern können, so. Also haben wir 40 zwischen diesen beiden und wir haben 60 zwischen unserem Bild und unseren Texten. Also werde ich sofort da runter springen und unsere Distanz auf 60 ändern, wie dort. Und dann werden wir uns etwas später mit dem Text befassen. Jetzt beenden wir es zuerst, genau hier. Also, es heißt, bekommen Sie ein kostenloses Angebot. Und dieser Knopf, ich werde ihn hier positionieren, stellen Sie sicher, dass es 40 ist. Ich werde es erweitern, um Nachrichten zu hören. Dasselbe für den Horror, direkt hier zu springen. Verwenden Sie Weiß und angepasst, um so zu dezentrieren. Dann gehe ich hier in den Standardzustand. Dann verwenden Sie 18 dunkelgrau ausgewählt und stellen Sie sicher, dass es in der Mitte so ist. Und da haben wir es. Also, jetzt, da dieser Abschnitt abgeschlossen ist, werde ich voran gehen und den anderen machen, der unten ist, was dieser ist. Also zunächst einmal, lassen Sie uns diesen Song ändern, um hier zu klicken und stellen Sie sicher, dass es 80 ist. Verwenden Sie diese 18 dunkelgrau dort, wir haben es. Dann richte ich meinen Text hier in der Mitte aus, springe rein von hier. Und mal sehen. also zunächst sicher, dass dies eine automatische Höhe ist. Stellen Sie sicher, dass dies eine automatische Höhe ist und dann einfach an die Breite unserer Rasterlinien wie folgt angepasst wird. Und dann auch das. Und dann werden wir sehen, was wir hier ändern werden. Also Derek, ein Perfekter, ich glaube nicht, dass wir es passen werden. Nein. Es gibt eine perfekte Reise für jeden. Wenn Sie also nicht mögen, wie das aussieht, können wir es vielleicht anpassen, um etwas nach draußen zu gehen. Tippen Sie hier, perfekt. Und dann bewegen Sie sich, stolpern Sie hoch. Und dann klicken Sie hier für alle. Tun Sie so etwas, und dann können wir es noch einmal anpassen. Mal sehen, ob es funktionieren wird. Es ist aber da. Und schließlich, lassen Sie uns damit umgehen. Also werde ich zu 20 gehen und dann 40 und dann Nachrichten und dieser Knopf, stellen Sie sicher, dass es 40 nach unten Position ist und hier, hier. Und dann hier, wählen Sie dieses aus, stellen Sie sicher, dass es 18 ist. Geh zurück. Stellen Sie sicher, dass es sich wie dieser Standardstatus in der Mitte befindet. Das wird 18 dunkelgrau sein. Stellen Sie sicher, dass es so in der Mitte ist. Und lassen Sie uns überprüfen 40, das ist 40. Und wie ich schon sagte, wird das 60 sein. Also, jetzt dieser Abschnitt abgeschlossen ist, Lassen Sie uns jetzt auf einigen dieser anderen Abschnitte solide mich arbeiten, sehen, wo wir begonnen haben. Schließlich Homepage, richten Sie es nach oben, weil wir einige Änderungen an unseren Abschnitten vorgenommen. Sehen wir uns also Asien, Amerika und arbeiten wir an unseren Top-Destinationen. Mal sehen, was wir hier tun können. Wir werden unsere Pfeile wirklich so loswerden. Und wir können diese, einige dieser Ziele loswerden . Also werden wir drei benutzen. Wir werden diese drei loswerden. Und ich werde tatsächlich eine dieser Schaltflächen auswählen und einfach kopieren. Kontrollieren Sie C, steuern Sie V und positionieren Sie es innerhalb unserer Top-Destinationen. Aber davor werde ich diesen Text kopieren. Und ich werde es in eine Gruppe setzen. Also diese beiden steuern G. Übernehmen Sie diese hartnäckige und ich werde mit der rechten Maustaste Gruppierung aufheben Komponente und verwenden Sie dann BU Button und bringen Sie es hier in. Dann bringe ich es in den ganzen Weg runter, stelle sicher, dass es 40 ist. Also mal sehen, was wir hier tun können, um das so anzupassen. Und ich werde hier auf unsere Destinationen klicken. Stellen Sie sicher, dass Sie die Bildlaufgruppe hier verwenden. Dann werde ich es öffnen. Verwenden Sie alle drei, stellen Sie sicher, dass sie zentriert sind. Positionieren Sie sie hier, damit ich sie an unserem Raster ausrichten kann, um dies so zu schreiben. Und ich werde fortfahren und jetzt alle drei anpassen. So können Sie wieder hineinspringen und Ihren Text ändern, wenn Sie möchten, können Sie ihre Größe ändern. Aber ich werde nicht, ich denke, dieses Layout wird ziemlich gut funktionieren, vor allem, weil wir in einem reaktionsfähigen Raster sind. Also da haben wir es. Und nun endlich, lasst uns daran arbeiten. Also mal sehen, ob ich hier klicke. Mal sehen, ich kann dies auf 160 reduzieren , so dass wir die gleiche Höhe des Inhalts haben können wie wir es für die oberste Karte getan haben. Alles sieht also genau gleich und kohärent aus. Also für die Höhe hier, verwenden Sie 116. Versteck das hier. Und schließlich für diesen, verwenden Sie 160. Nun, sorry, nicht in der Breite, sondern in der Höhe. Also noch einmal, einige seltsame, seltsame Dinge, die mit Adobe XD vor sich gehen. Gehen wir also rückgängig, ändern Sie die Größe und bringen Sie die Deckkraft zurück. Ich werde hier eine klicken. Noch einmal, ich weiß nicht warum. Es passiert immer wieder. Aber noch einmal werde ich meine Akte speichern und dann wiederkommen. Und jetzt, da ich das behoben habe, lasst uns jetzt weitermachen und einige davon neu positionieren. Also mal sehen, etwas ist immer noch nicht in Ordnung, genau hier mit der Multi-Use, ich denke, es ist nur die Bildmaske, die es ist. Also lassen Sie mich einfach doppelklicken und verschieben Sie es. Lake District. Es ist in Ordnung. Toskana geht es gut. Also lasst uns die zurückbringen. Ich halte meine Umschalttaste gedrückt, benutze diese, halte die Umschalttaste so. Also verbeuge ich mich vor ihnen und stelle sicher, dass sie 30 sind. So und schließlich bewegt Toskana 30 als auch. Ich, die die Ziele überprüfen. Die Bearbeitung ist in Ordnung. Stellen Sie sicher, dass Sie dies auf 40 einstellen. Mal sehen, also 80. Jetzt sind es 40. Und schließlich beschäftigen wir uns mit dem obersten Text an dieser Stelle. Das wird also immer noch 80 sein. Also lasst es uns dazu ändern. Mal sehen, ob es hineinpasst, tut es nicht. Vielleicht können wir also unsere Top-Destinationen aussuchen und es dann direkt hier setzen, sicherstellen, dass es zentriert ist, so ausgerichtet ist. Und dann einfach hier positionieren. Stellen Sie sicher, dass es 40. Lassen Sie mich einfach schnell überprüfen, dass die Entfernungen hier, so ist es 40 und 60 unten. Also mal sehen, wir sind noch 150 hier. Ich werde das ändern, um 18 dann dunkelgrau zu sein. Und ich werde diese lösen, um sicherzustellen, dass sie in einem Zentrum sind. Dieser Abschnitt mit dem Titel positionieren Sie es in der Mitte wie folgt. Und mal sehen. Wir sind 60. Und weil ich sie zurückgezogen habe , wird das wieder geschehen. Also, wenn es Ihnen in den Sinn kommt, mach dir keine Sorgen darüber. Wählen Sie es einfach aus und verschieben Sie es nach oben. Also einfach Seite zum Hauptordner, klicken Sie hier und es wird direkt nach oben gehen. Jetzt, da wir all das abgeschlossen haben, bleibt uns noch übrig, diese anzupassen. Und was wir mit diesen Karten machen können, ist wirklich ganz einfach. Also werde ich dasselbe tun, wie ich es vorher getan habe. Und ich werde das Video hier stoppen. Aber eigentlich, nein, lass uns weitermachen. Lassen Sie uns wirklich damit arbeiten. Mal sehen, was wir damit machen können. Testimonials, ich werde sie tatsächlich gruppieren, drücken Sie Control G. Kopieren Sie diese Text-Qualitäts-Zeugnisse auf Gruppe dieser Komponente. Denn wieder einmal werden wir das Gleiche hier benutzen. Und vielleicht können wir diesmal vielleicht sogar Pfeile benutzen. So können Benutzer auf diese Pfeile tippen, weil wir Pfeile genau dort oben haben. Vielleicht können wir das nur tun, um die Dinge etwas aufzupeppen. Also lasst uns zuerst damit umgehen, oder ich werde 80 benutzen. Und dafür werde ich 18 dunkelgrau verwenden. Mal sehen, was wir tun können. Also wählen Sie sie alle so aus. Stellen Sie sicher, dass wir in einem Zentrum wie diesem sind. Sehen Sie, was die Leute sagen. Wir können es dort schneiden und Reisende lieben uns. Stellen Sie sicher, dass Sie es unten in Ausrichtung setzen. Noch einmal, mal sehen. Also 1, 2, 3, 4, glaube ich, war es? Ja, und dann 60 runter. Also mal sehen, 123460. Also 40 und 60. Lassen Sie es schnell überprüfen, genau hier. Hier können Sie sehen, dass wir 47 haben, was seltsam ist. So 40? Ich glaube nicht wahrscheinlich, weil ja, also 40 und 60. Und lassen Sie uns unser Layout überprüfen, um zu sehen, wo es landet. Startseite rechts oben, da. Ja, ja. Also denke ich, das sieht gut aus. Also 150, das ist in Ordnung. Und das sind 40, das sind 60 Tote, großartig. Und lasst uns jetzt an unserem Zeugnis arbeiten. Also das erste, was ich tun werde, ist das gleiche wie ich mit diesen gemacht habe, ist tatsächlich erweitern diese, schließen, dieses Ende. Ich werde meine erste Karte anpassen, also Zeugniskarte und wann sie an den Rand bringen. Und ich werde das auch an den Rand bringen. Also genau da. Und dann werde ich unseren Text anpassen. Also lasst es uns zuerst in die Mitte bringen. Also mal sehen, was muss belüftet werden. Mal sehen, was wir hier beheben können. Wir können es hier ändern, und wir können es hier ändern. Mal sehen, wir sind bei 40. Lassen Sie uns dieses ändern, um 24 Bolzen 24 Modell wie dieses sein. Gehen wir mit, mal sehen, 40. Und ich werde das in etwas noch kleineres ändern. Gehen wir zum Beispiel mit 16. Sehen Sie, wie das aussieht. Das sieht gut aus. Das wird 18 sein und mal sehen, 40. So wie das. Wählen Sie unseren Text und unsere Zeugniskarte klicken Sie direkt dort, und da haben wir es. Also, was ich tun werde, ist, diese Zeugniskarte zu kopieren und dann kann ich dort Änderungen vornehmen. Also drücken Sie Control D, Control D, Control D. So. Also eigentlich nein, lass uns, gehen wir zurück. Also, was ich hier tun werde, ist, es ein wenig zu schneiden, um so etwas wie , mal sehen, zu organisieren, dass die Truppen gemischt werden und alles dazwischen. Damit wir diesen Ärger meiden können. Vielleicht kann ich das hier runterziehen. Im Grunde, was ich vermeiden wollte, dass diese ein Wort in einer Zeile haben. Das ist es, was ich jetzt tue. Also, das ist in Ordnung. Und jetzt an dieser Stelle kann ich diese Karte tatsächlich kopieren. Also Kontrolle D, Kontrolle D, Kontrolle D. Ich will vier von ihnen haben. Und im Grunde werde ich reinspringen und mit Bree Jackson korrelieren. Und sie reiste nach Paris, damit ich diese Karte loswerden kann. Er ist nach Paris gereist. Diese Person reiste nach Bali und ihr Name ist Arthur Hammond. Vielleicht können Sie es kopieren und direkt hier einfügen. Ich hoffe, dass es unser Layout nicht durcheinander bringt. Hat es nicht, was großartig ist. Dann kann ich diesen löschen. Aber noch einmal, wie Sie sehen können, haben wir hier und da einige Probleme, dass ich braun bin, zu diesem letzten gehen wird und sie so nach Tokio gereist ist ist. Und schließlich, lasst uns diesen Wagen loswerden. Jetzt, da wir für haben, können wir mit unseren Animationen beginnen. Also lasst uns all das wieder reinbringen, in Namen wechseln, also Text zu drei. Und schließlich vier. Das gefällt mir. Ich werde unsere Texte loswerden. Ich werde unsere Pfeile benutzen, sie in der Mitte positionieren, sicherstellen, dass sie sind, sagen wir 80 und wann man sie auf 60 bewegt. Und ich werde dasselbe tun. Also werde ich diesen Pfeil anpassen, um an diesen Rand zu gehen und etwas mehr so. Milchherde und tun das gleiche für diesen. Also werde ich es hier anpassen, Tab-Punkt verwendet und hier angepasst. Jetzt, da wir alles haben, können wir mit Animationen beginnen. Und offensichtlich wird das ganz einfach sein. Salt, nennen wir es Zeugnisse mehr über meinen Vater. Und natürlich können Sie einige Bilder einfügen, wenn Sie wollen, nicht nur für diesen, sondern auch für den Text, wenn Sie wollen, aber ich werde das nicht tun. Und wir müssen dieses noch hinzufügen, weil wir 16 verwendet haben. Ich werde es den ganzen Weg hinunterziehen, weil es die kleinste ist. Und jetzt lassen Sie uns unsere Komponente Hit Control K erstellen und ich werde ein neues Status-Qualitäts-Testimonial erstellen , um in diesem Text zu kopieren. Für ein Zeugnis offensichtlich gehen, um sie zu bewegen. Also bewegen Sie das hier rein. Mal sehen, wo wir sind, mit unseren Zeugnissen. Das ist in Ordnung. Schließen Sie es. Neue Staatsaussage drei. Ich werde reinspringen und sie noch ein Mal so bewegen. Lasst uns zoomen. Und Milchherde. Und schließlich, erstellen Sie eine neue. Nur Ammoniak zum Einspringen. Testimonials und trauerte die Akte an Ort und Stelle so. Und schließlich, lassen Sie uns voran und Prototypen. Gehen Sie also zurück zum Standard-Prototyp. Und wir werden Pfeile benutzen, richtig? Tippen Sie auf Punkt. Wir werden aufhören. Autonomie. Testimonial Tool ist 0,6 Sekunden. Springen Sie in Zeugnis zwei Pfeile nach links. Also gehen wir auf Autonomie. Standardzustand ist in unseren 0,6 Sekunden und dann tun Sie das gleiche für diesen. Aber hier werden wir zum Zeugnis drei gehen. Jetzt in der dritten, geh zurück zum zweiten. Das wird zum vierten gehen. Und schließlich, auf der vierten, werde ich mit dem linken Pfeil zurück zum Terminal springen. Und da haben wir es. Jetzt, da das abgeschlossen ist, können wir zum Design zurückkehren. Und schließlich, um dieses Video zu beenden, werde ich an diesem Abschnitt arbeiten. Also bewegen Sie es einfach so. Und was ich eigentlich tun werde, ist genau hier zu springen. Da wir also bei 120 sind, können wir das auf 80 einstellen, stellen Sie sicher, dass es weiß ist. Und ich werde denken, dass es gut geht, also können wir sie vielleicht bewegen. Lasst uns zuerst tun und es für alle tun. Also, wo wir 80 weiß sind. Bei Weiß. Und lassen Sie uns mit dem ersten überprüfen, sowjetischen Wellness. Was wir hier haben, ist 32. Das gefällt mir nicht. Also werde ich mit 40. Und ich werde diese beiden auswählen und sicherstellen, dass wir 20 von diesem Rand entfernt sind, also haben wir hier viel Platz. Und dann wählen Sie einfach alle aus und bringen Sie sie hierher zurück. Ich mag auch nicht die Höhe dieser mündlichen Karte. So können wir zum Beispiel hier reinspringen und für die Höhe können wir etwas tun wie, ich weiß nicht, bis 60 vielleicht. Nun, gehen wir mit 300. Ich denke, das wird mit diesem Wellness etwas besser funktionieren. Die 12, 20 und dann 20 runter. Ich glaube nicht, es funktioniert gut. Also wieder, 300 wird die Höhe sein. Also ist es vor allem, reduzieren Sie dies auf so etwas. Kreuzfahrten. Wir werden die Höhe auf 300 ändern. Vr, stellen Sie sicher, dass das 40 ist, nicht wahr? Lasst uns einfach schnell hier nachsehen, oder ist es 20? Es ist 20. Also 20. Und dann, was wir tun werden, ist, die einfach wieder hier reinzubringen. Bewegen Sie diese auf 20 und dann 20, so. Und Milchprodukte haben es. Schließlich beschäftigen wir uns mit der letzten 1, dritten 1. Und was wir tun können, ist es von hier aus anzupassen, also 300. Und ich werde diese beiden hierher bringen, 2020, und dann dafür sorgen, dass das Skifahren 20 so positioniert ist. Und lassen Sie uns schnell die Abstände zwischen diesen überprüfen. So 30 ist nicht gut und wann 40 zu verwenden. Und mal sehen, 43 ist nicht gut, also werde ich, lass uns mehr mit drei sehen. Und dann Schema Reise bewegte sich auf dem Weg, was großartig ist und alles angepasst, wie es sollte. Das ist 150. Und schließlich für dieses Video, und ich möchte unsere Partner anpassen, weil es ein bisschen einfacher Abschnitte ist. Also lasst uns mit 80 gehen. Gehen wir mit 18, neun dat. Und lassen Sie uns in unserem Abschnitt Titel in der Mitte so setzen, unsere Partner passen einfach gut hinein. Und was wir tun können, ist, das in zwei Zeilen zu setzen, was auch gut ist. 60 und wann man sicherstellt, dass das 40 ist, hat diese Dinge nicht immer vergessen. Es waren 40, großartig. Und es werden 60 bis hier runter sein. Wählen wir also unsere Logos aus und lassen Sie uns 60. Und dann, was wir eigentlich tun werden, ist diese scrollbare Gruppe zu benutzen , um direkt hierher zu kommen und sie dann direkt hierher zu bringen. Und schließlich werde ich die Größe unserer Logos anpassen. zunächst sicher, dass Sie sie hier anpassen. Und dann den ganzen Weg runter bis hier zum Beispiel. So können wir zwei Logos sehen und dann können sie nach links und rechts scrollen, wenn sie sehen wollen. Der Rest dieser Logos sah so etwas. Wenn ich also draußen klicke, sieht es so aus. Also mein Lieber, wie es ist, Das ist es für dieses Video. Im nächsten Video werden wir zurückkommen und unser reaktionsfähiges Design komplett beenden, weil wir an diesen Abschnitten und schließlich auf einer Fußzeile arbeiten und dann unser ansprechendes Design beenden werden. Also sehe ich dich dort. 51. Ein Responsive Design 15: Und nun gehen wir weiter und beenden endlich unser Responsive Design für diese mobile Version und für diese gesamte Klasse. Also werde ich mit diesem Abschnitt direkt hier beginnen, weil es 36 ist. Ich werde es auf 24 Volt reduzieren. Und ich werde hier klicken, stellen Sie sicher, dass dies links ausgerichtet ist. Und ich werde es hier positionieren. Und weil es 18 Licht ist und wann man sicherstellt, dass es 20 unten in Dan ist und wann man diesen ganzen Abschnitt zum Beispiel auf 40 bringt. Und wenn ich das alles reinbringen soll, werde ich nach innen ziehen und unsere Währungen auswählen, die genau hier positioniert sind. Und ich kann sogar tun, wenn ich will, ich kann sie in einen Stapel stecken. Und dann kann ich für jeden von ihnen zum Beispiel die Menge an Stack vielleicht auf 40 reduzieren. Ich denke, es wird ziemlich gut sein, aber ich muss Shift halten und es dann auf 40 senken. So sind es jetzt überall 40 für all diese. Und offensichtlich können Benutzer scrollen. Lassen Sie uns einfach auf rechts hier anpassen, damit Benutzer wissen, dass es mehr Platz zum Scrollen gibt, um ihre 150 zu schreiben. Und das ist es im Grunde für DES-Wechselkurs Abschnitt. Kommen wir nun zu Fragen. Und das wird natürlich unsere größte Herausforderung sein, weil wir es anpassen müssen und wir alle diese untersten Animationen anpassen müssen. Also zuerst, lassen Sie uns damit umgehen. Also, wenn du dich erinnerst, das waren 40, das, und lasst uns das in so etwas wie hier bringen. Dann werde ich meinen Text verwenden. Stellen Sie sicher, dass es zentriert ist, ausgerichtet und, und wann Sie dies auch hier positionieren. Stellen Sie also sicher, dass es ungefähr dort zentriert ist. Also bereiten Sie sich auf Ihre Traumreise vor. Ich werde es in automatische Höhe konvertieren. Und mal sehen, ich kann es von hier bis hier erweitern. Mal sehen, im Traum wird nicht passen. Lasst uns einfach Trip benutzen. Also bereiten Sie sich auf Ihre Reise vor und lassen Sie uns sehen, was wir hier schneiden können. Also, wenn ich das anpasse, sehen, wie es aussieht zu nehmen und so viel mehr, lasst uns, lasst uns es einfach so benutzen, wie es hier ist. So 40. Und wir werden diesen Knopf einstellen, nach unten gerutscht. Also lasst uns zurück zu hier gehen und das so zu reparieren. Lassen Sie uns auf unsere Schaltfläche klicken, verschieben Sie es nach unten 40 und 60. Bewegen Sie unseren Knopf hier. Stellen Sie sicher, dass es 60. Klicken Sie hier, unten rechts hier, angepasst klicken Sie nach innen. Verwenden Sie Weiß. Entschuldigung, nicht 16, aber 18. Weil jetzt eine 16, seine kleinste. Klicken Sie also irgendwo hier. Und Dan, ich gehe in den Standardzustand, klicke darauf und benutze 18 und verwende auch eine dunkelgraue Mischung. Es ist in einem Zentrum wie diesem. Und jetzt müssen wir, angegangen, einen Abschnitt mit den allgemeinen Fragen angehen. Wir sind also bei 100, und natürlich werden wir eine Menge dieser verschiedenen Dinge hier anpassen müssen. Lassen Sie uns zunächst mit diesen lästigen Trennwänden umgehen. Also werde ich dieses auswählen, die Umschalttaste halten und sehen, wo ich am Ende bin. Also werde ich bei 3344 enden, der Breite. Also werde ich die gleichen Einstellungen für den Rest unserer Divisoren verwenden. Also 334. Klicken Sie auf diese 1334, und klicken Sie schließlich auf diese 1334. Als nächstes werde ich alle meine Kleidungssymbole wie diese auswählen. Halten Sie meine Umschalttaste gedrückt, bewegen Sie sie alle wieder hinein und passen Sie sich einfach so an unser Raster an. Also einfach ein Pixel und dann werde ich alle diese Texte auswählen. Also das, das, und das. Wir können sehen, dass es 24 Bolzen ist. Mal sehen, was wir hier tun können. Also vielleicht können wir sogar etwas tun wie 18 Bolzen wir hier zurück, aber wir werden einfach 18 schwarz verwenden, weil wir 18 fett hier haben. Also machen wir nur das Gleiche, aber halten es schwarz, damit es genau gleich aussieht. Ich werde sicherstellen, dass ich sie alle so an der Mitte unserer Symbole ausrichte. Lass uns das verstecken, damit ich daran arbeiten kann. Offensichtlich haben wir immer noch ein bisschen von diesen überschneidenden Fragen. Also, was ich hier genau machen werde, ist im Grunde die nächste Zeile nach unten zu bewegen und dann tatsächlich an die Mitte anzupassen, weil ich denke, es funktioniert viel besser. Lassen Sie mich das für eine Sekunde verstecken. Klicken Sie hier. Also Stornierungsbedingungen gehen nach unten. An die Mitte angepasst. Ich werde es verstecken. Klicken Sie hier. Wählen Sie Ihre Partner können nach unten gehen, stellen Sie sicher, dass es in der Mitte ist. Und schließlich, tun Sie das gleiche für benutzerdefinierte Reisen. Benutzerdefinierte Gruppen arbeiten also so an die Mitte angepasst. Und wir werden das alles wieder nach oben bringen. Jetzt, wo wir Daten haben, einrichten, was ich tun werde, ist tatsächlich zu sehen, wo wir damit landen. Also tatsächlich können wir benutzerdefinierte Entfernungen später machen. Lassen Sie uns alle zur Welle bewegen, damit wir an diesem hier arbeiten können. Also werde ich unsere Texte wieder einbringen. Es ist 24. Offensichtlich ist es viel zu groß, also passen wir es auf 18 an, und lassen Sie uns dunkelgrau verwenden. Und schließlich werde ich unseren Text so anpassen. Stellen Sie sicher, dass es zum Beispiel drei Zeilen groß ist. Und dann lassen Sie uns dasselbe für alle tun. Also werde ich sie wieder reinbringen, sicherstellen, dass ich es augapfeln und dann zum Beispiel 60 gehen . So wie das. Dann tun Sie das gleiche für Stornierungsbedingungen. Lassen Sie mich mehr als diese beiden so runter. Also gehen Sie mit Stornierungsbedingungen. Zeigen Sie es auf. Stellen Sie sicher, dass ich mit 18 dunkelgrau gehe und einfach so eingestellt. So wie das. Einfach ein wenig eingestellt. Es ist also egal, ob es ein bisschen runtergeht. Das ist in Ordnung. Partner, bringen wir es hierher und Augapfel so. Stellen Sie sicher, dass es 60. Und dann werde ich meine individuelle Reise nach unten verschieben, an den Partnern arbeiten, sie zurückbringen. 18, dunkelgrau. Klicken Sie zurück in und passen Sie dies an. Ich mag wirklich nicht, wie das aussieht, aber was können Sie tun, wird sehr zuverlässig sein, lassen Sie uns diese Worte für Unterkunft, Transport und Reisen entfernen. Das wird also gut für uns funktionieren. Entfernen Sie es oder verstecken Sie es, und bringen Sie dann die letzte ein. Zwei, ungefähr hier. Mal sehen. Da gehen wir, 60. Und dann bringen Sie das zurück. Ich werde sicherstellen, dass es endlich 18 dunkelgrau ist und es den ganzen Weg zurückbringen. Und es ist uns egal, wie es hier aussieht. Es sieht wirklich gut aus, aber es ist uns egal, weil es der letzte ist. Also schließlich werde ich es verstecken und lassen Sie uns gehen und jetzt alle animieren. Also, wenn Sie sich an früheren Beispielen erinnern, müssen wir tatsächlich alle animieren. Also werde ich reinspringen, alle auswählen, C kontrollieren, hier reinspringen. Kontrolle V. Ich werde sie wieder runterbringen. Das hier, Kontrolle V, und das hier. Und schließlich werde ich mich mit diesem letzten beschäftigen. Basiere das hier und entferne diese vorerst, weil das unser letztes ist. Gehen wir von hinten nach vorne. Also werde ich so machen, unsere Trennwand nach unten bewegen. Es ist also die Entfernung hier 52. Eigentlich mag ich die Entfernung nicht. Tut mir leid. Wenn ich es tatsächlich tun sollte, gehen Sie zurück zu unserem Standardzustand und passen Sie dann die Abstände zwischen allen unseren Trennwänden an. Also muss ich das zuerst tun. Mal sehen, es ist 50, um es und einen Text auszuwählen. Und dann ruhen sich diese vielleicht aus. Also zwei und dann 40. Dann geh hier. Und mal sehen, das ist zum Beispiel 60, wie wir es ausgewählt haben. So Teiler und fünfte 40. Und wählen Sie diese beiden aus. So wie das hier. Und lassen Sie uns von der Trennwand sehen, um zu hören. Ja, wir sind 40. Und schließlich, für die benutzerdefinierten Reisen, können wir einfach tun 12 und dann 40. Da gehen wir. Und jetzt werde ich tatsächlich kopieren und einfügen in all diese. Das tut mir so leid. Aber wie Sie manchmal sehen können, während Sie arbeiten, bin ich im Grunde mit all diesen Lösungen, weil ich versuche, die optimale Benutzerfreundlichkeit aus all diesen Designs zu bekommen. Daher mache ich Änderungen zu unterziehen, weil diese Änderung nicht der Teil des ursprünglichen Designs war, den ich erstellt habe. Deshalb erschaffe ich es einfach, während ich mitmache. Schließlich sind wir in diesem vierten Zustand, also benutzerdefinierte Reisen, so dass wir tatsächlich zum ersten gehen können. Es wird also viel einfacher zu folgen sein. Ist meine Reise geschützt? So ist es hier gelegen. Ich werde es öffnen. Bringen Sie das zurück, bringen Sie meine Trennwand an den Rand. Stellen Sie sicher, dass es 40 runter ist. Und dann wählen Sie diese drei aus. Richten Sie es mit unserem Teiler aus. So wie das. Ich kann mit 40 oder sogar besser gehen, ich kann mit 60 gehen, so dass wir den gleichen Abstand halten. Stornierungsbedingungen. Also ist es nicht, es ist gedreht. Und C, also 040. Und dann wählen Sie einfach diese beiden aus. 60. Wählen Sie Ihre Partner. Bringen Sie es zurück, Trennwand. Es ist 40. Und dann schließlich, benutzerdefinierte Reisen bewegen sich den ganzen Weg nach unten auf meinem Schreibtisch. Es ist 60. Und schließlich, für die letzte, benutzerdefinierte Reisen, werde ich es zurückbringen. Ich werde unsere Trennwand benutzen, es den ganzen Weg runter bringen und dann auf 40 gehen, so. Und da haben wir es jetzt, offensichtlich ist das letzte, was wir vor der Animation tun werden, diese Symbole zu drehen. Lassen Sie uns Schritt für Schritt gehen. Gehen wir zu Fragen, Standard, Zustand kommen. Also alle von ihnen sind S plus ist meine Reise geschützt? Also werde ich in diesen einspringen. Halten Sie meine Umschalttaste gedrückt und gedreht wie diese Stornierungsbedingungen. Also ist es dieser hier. Schließen Sie den Hover und dann wie Schmutz gedreht. Ändern, wählen Sie Ihre Partner. Es wird dieser sein. Das, und schließlich die letzte für die benutzerdefinierten Reisen. Und ich werde darauf klicken. Schließen Sie das Symbol und wie so. Also, jetzt, da alle diese fertig sind, können wir zurück zum Standardzustand gehen und anfangen, so Prototyp zu animieren. Und wieder einmal werden wir die gleichen Einstellungen behalten. Super klicken Sie auf den ersten. Wir können tippen, was animieren Leichtigkeit in 0.6 Sekunden sehen. Also werden wir das im Grunde auch benutzen. So ist meine Reise geschützt und wann ich zurück zur Standardstatusdiskette gehen soll, hat die gleichen Einstellungen beibehalten. So Stornierungsbedingungen gehen, um Stornierungsbedingungen Partner gehen, um Partner zu gehen. Wählen Sie also Ihre Partner. Und schließlich wird benutzerdefinierte Reisen zu Custom Trips gehen und sexuell getestet und sehen, ob das irgendeinen Sinn macht und den ganzen Weg nach unten gehen kann. Befindet sich. Hier sind wir. Also, wenn ich hier klicke, wird es mich dorthin bringen, was in Ordnung ist. Wenn wir hier klicken, wird es mich dorthin bringen. Aber ich habe es nicht wieder animiert. Also lasst uns damit umgehen. Also kommen Fragen. Wir sind auf meiner Reise geschützt. Also mal sehen. Dieser hier geht in den Standardzustand, Stornierungsbedingungen. Geht zu Stornierungsrichtlinien Partner geht an Partner und benutzerdefinierte Reisen. Gehen Sie zu benutzerdefinierten Reisen. Ok. Lassen Sie uns sie alle animieren und dann werden wir es überprüfen. Ist meine Reise geschützt? Es wird in, sorry, Standardzustand zu wechseln , weil es geöffnet ist. Dies wird gehen, um Ihre Partner zu wählen. Dann schließlich, benutzerdefinierte Reisen gehen, um Custom Trips gehen und wählen Sie Ihre Partner. Dies wird in den Standardzustand funktionieren. Und schließlich, benutzerdefinierte Reisen. Er wird zu Custom Trips gehen. Und schließlich, ganz am Ende, Lassen Sie uns mit dem letzten Zustand befassen, die maßgeschneiderte Reisen ist. Ist seine Metrik geschützt? Dies wird zu Stornierungsbedingungen gehen und dies wird ein Problem sein, weil es oder Labors oder sind viel, wählen Sie Ihre Partner. Und schließlich geht dies in den Standardzustand. Also noch einmal, Sie müssen Ihrem Kunden erklären, wenn Sie Animationen wie DES-Daten verwenden, einige von ihnen werden sich überlappen und hauptsächlich. Also lassen Sie es uns überprüfen. Und das funktioniert gut. Das funktioniert gut. Also, wenn ich hier klicke, wird es mich nehmen, was in Ordnung ist. Wenn ich hier klicke. Also ganz unten wird sich öffnen. Und wenn ich hier ganz unten klicke, wird es sich gut öffnen. Und wie Sie sehen können, passt es unser Layout gut an, weil wir diese Stapel so verwenden, also sollte es jetzt ein bisschen besser funktionieren. Und schließlich beschäftigen wir uns mit diesen beiden letzten Abschnitten. Also lassen Sie mich auf diese klicken und gehen 80. Gehen, um auf dieses zu klicken, 18 dunkelgrau. Mal sehen, was wir tun können. Bleiben Sie auf dem Laufenden. Vielleicht können wir es zwei Zeilen wie diese setzen und dann auf 40 einstellen. Passen Sie diese Eingabe zu sein, lassen Sie uns sehen 60. Mal sehen 59, 60, das ist in Ordnung. Nun für die Texteingabe, was wir für die Eingabe selbst tun können, können wir sie so umschalten. Wir können das benutzen. Also Texteingabe, ich kann es zurück hierher bringen. Und ich kann Input Vg hier hineinbringen. Dann können wir Ihre E-Mail einfach so schreiben. Und dann statt 40, können wir es auf 20 bringen. Wir können das auch in 20 bringen. So wie so. Und schließlich, lasst uns mit unserem Knopf arbeiten. Also werde ich mich hier positionieren. Wir sind bei 29. Also lassen Sie es uns zum Beispiel auf 40 bringen. Und ich werde es öffnen. So Abonnieren Button wird genau hier sein. Wenn ich zum Prototyp gehe, wie Sie sehen können, ist es nicht Prototypen. Also gehen Sie zurück zu Design. Wir gehen mit 18 einfachen Weiß und stellen sicher, dass wir es in der Mitte positionieren und das ist es im Grunde. Das ist also 40 und das ist 60, was wir in erster Linie wollten. Und das alles passt, wo die Welt, das ist 150. Das ist unser Problem hier, weil wir diesen leeren Raum haben, also werden wir uns am Ende damit beschäftigen, aber lassen Sie uns jetzt mit unserer Fußzeile befassen. Also zuerst werde ich mein Fußzeilenbild und Farbüberlagerung einbringen. Und dann werde ich mich noch einmal mit diesem lästigen Teiler beschäftigen. Positionieren Sie es hier und klicken Sie hier, bringen Sie es zurück hierher. Dann gehe ich mit dem Logo. Stellen Sie sicher, dass es in der Mitte ist. Und es kann es tatsächlich ein bisschen kleiner machen, aber weil wir PNG hier nicht verwenden, lassen Sie mich tatsächlich unsere PNG-Position bei Mirador hier greifen. Und kann in der Mitte positionieren. Ich kann das loswerden. Und stellen Sie sicher, dass ich in einer Mitte Shift Alt, Linksklick, und machen Sie es einfach ein wenig kleiner. Für die Fußzeileninfo als Ganzes werde ich etwas kleineres gehen. Also vielleicht 60 von oben. Ich denke, es wird so etwas besser funktionieren. Jetzt beschäftigen wir uns mit all unseren Informationen. Lasst uns zuerst diese anpassen. So Haupt nav. Und wenn ich hier reinspringe, können Sie sehen, dass alle 24 sind. Also lasst uns damit umgehen. Wir beschäftigen uns mit 18 und dann weiß. Wir wählen diese aus und gehen mit 18. Und wenn wir können, und wählen Sie sie aus. Also lasst uns so gehen. Und lassen Sie uns sehen 18 weiß, was in Ordnung ist. Jetzt beschäftigen wir uns mit unseren Entfernungen. Also, was wir hier genau tun können, ist eigentlich , ich kann zum Beispiel, diese zu dezentrieren positionieren, aber es wird nicht so gut funktionieren. Ich denke nicht, weil diese Klopfpunkte, aber tatsächlich funktioniert es. Nun, mal sehen, ob wir das Gleiche hier erledigen können. Das ist in Ordnung. So können wir es tatsächlich so behalten, nur weil der Text kleiner ist, können Sie 16 verwenden, wenn Sie wollen, weil es die Fußzeile ist und dann wird es viel besser sein. Also lassen Sie es uns wirklich testen. Also 16, Daniel ist weiß. Benutzt diese. 16 dann weiß. Und ich denke, es funktioniert noch besser so. Also positionieren Sie sich hier, hier. Und das wird in der Mitte sein. Und das wird in der Mitte sein. Das werden wir hier gehen, und das geht hier hin. Also tatsächlich funktioniert es viel besser. Und Position ist 40 zwischen unserem Logo 60, was gut ist. Trennwand ist gut. Lassen Sie uns jetzt mit dem Boden für sich selbst umgehen. Lassen Sie uns unsere Social-Media-Symbole ins Zentrum verschieben. Ordnung, da Analyten nun auch die Größe dieser Texte auf 16 geändert. Also für uns mit diesen umgehen. Also 16 weiß, wählen Sie diese 16 weiß. Da haben wir es. Und jetzt lassen Sie es uns schnell ausrichten. Also werde ich mit gekauft ein paar Informationen gehen, stellt sicher, dass es genau dort zentriert ist. Stellen Sie sicher, dass dies genau dort zentriert ist. Ich denke hier. So etwas. Nun, lasst uns eigentlich. Lassen Sie uns zuerst mit unserem Text arbeiten. Also werde ich mich in diesen beiden hier ändern, genau da, und dann das hier anpassen. Und jetzt, wo wir haben, können wir das tatsächlich anpassen, um in der Mitte zu sein, wie es immer sein sollte. Und jetzt beschäftigen wir uns mit unserem Hintergrund. Also werde ich diese beiden auswählen und sie zurückbringen. Nur ein bisschen. Fußzeileninformationen können gehen, und dann kann dies gehen. Damit ich mein Bild reparieren kann. Doppelklicken Sie hier auf Positionen, bringen Sie das zurück, bringen Sie es zurück, und da haben wir es. So können Sie mehr unterste Informationen haben, wenn Sie möchten. Sie können sogar so etwas tun und diese Information in der Mitte positionieren. Jetzt sind es 7171. Also kann ich sogar noch ein bisschen mehr gehen. So kann ich sie alle positionieren und sie einfach mehr hineinbringen. Mal sehen, wo wir jetzt sind. Wir sind bei 55. Das ist also genau das Problem hier. Also ist es cool. Ich stelle nur sicher, dass wir 60 Control D sind. Stellen Sie sicher, dass wir 60 da sind. Und einfach expansiv, im Grunde dasselbe, wie wir es vorher getan haben. Und da haben wir es. Dies ist unser Design abgeschlossen. Alles ist abgeschlossen. Also, was ich tun werde, ist schnell ein weiteres Mal zu überprüfen, um die Spitze Pinot. Drücken Sie die Vorschau. Geh den ganzen Weg nach oben. Analyten, noch einmal erkunden. Also haben wir diesen Abschnitt. Wir haben die, wir haben die. Alles funktioniert, wie es sollte. Schöne kleine Animationen. Und wir haben diese erste und letzte Minute, und wir können nach links und rechts scrollen. Hab dieses schöne Video. Wir können hier, hier, hier und hier nach links blättern . Wir haben diese, also können wir auch hier scrollen. Sie sehen ein bisschen anders aus als diese oben, haben aber die gleichen Abmessungen. Im Grunde. Wir haben diese. Wir haben diese drei Partner. Wir können nach links und rechts scrollen. Wir haben diese Wechselkurse. Wir können auch hier nach links und rechts scrollen, was großartig ist. Und wir haben diese Antworten, damit Sie sehen können, wie sich der Inhalt anpasst. Also funktioniert alles so, wie es sollte. Aber hier, ja, du musst nach unten klicken, damit es funktioniert. Ich mag diesen Abstand nicht. Also werde ich mich mit allen Abständen auf einmal beschäftigen und dann werde ich diesen separat reparieren. Aber ich mag, wie der Rest unserer Inhalte aussieht. Also, jetzt zuerst, was ich tun werde, ist, unsere Homepage auszuwählen, wie ich getan habe, und ich werde sie auf, zum Beispiel, 80 reduzieren. Und mal sehen, wie das aussieht. Ich denke, das funktioniert ganz gut. Der Abstand sieht immer noch gut aus, so dass alles noch schön und glatt ist. Der Abstand ist gut dort, also ist alles gut. Sie können es sogar auf 100 erhöhen, wenn Sie denken, AT ist viel zu wenig. Eigentlich funktioniert 118 recht gut. Wie ich schon sagte, das letzte, was wir hier angehen werden, ist dieses. Also werde ich zum Beispiel manuell auf etwas wie 20 eingestellt. Wenn sich der Inhalt also erweitert, wenn Animationen so funktionieren, kann ich zu diesem Abschnitt gelangen, um Ihnen tatsächlich zu zeigen. Damit wir den ganzen Weg zurück hierher gehen können. Wenn ich also rechts hier klicke, können Sie sehen, dass sich der Inhalt überlappt. Das war also von Anfang an unser Hauptthema. Also 20 könnte deswegen nicht funktionieren. Volumenkörper gehen zum Beispiel mit 60. Und mal sehen, wie sich das anpassen wird. Also gehen wir mit 60. Und dann, wenn ich das hier zurückbringe, klicken Sie hier. Sie können sehen, dass es jetzt gut ist. So passt es schön an zu hören, weil Sie nicht in der Lage sein, dies zu sehen. Aber wenn du das tust, wenn du den ganzen Weg nach hier und dann hier gehst, kannst du das vielleicht sogar auf 100 erweitern und es genau gleich halten. Schließlich, um dies abzurunden, was ich tun werde, ist offensichtlich Doppelklick hier auf unsere Kunsttafel, um die Höhe zu bringen und den ganzen Weg hinein zu gehen, schließen Sie es so. Und Milchherde. Dies sind also ansprechende Designoptionen, die Sie in Adobe XD haben. Entschuldigen Sie einige dieser Fehler und der Tod ist während dieses Responsive Design Prozess passiert . Aber wie ich im Einführungsvideo zum Designbereich sagte, ist das alles wegen meiner Aufnahmesoftware. Also benutzte ich Camtasia für die Aufnahme von Videos und ich verwende alle Arten der Verarbeitung für Audio. Daher mischen sich alle in der Breite. Mein Adobe XD, Ich habe auch verwendet, um Adobe XD zur gleichen Zeit. Deshalb sind all diese verschiedenen Bugs hier und da passiert. Also, Dan, du siehst diese Responsive Größenänderung Abschnitt. Und dann im nächsten Abschnitt werde ich das Teilen erklären. Wir werden uns mit Teilen beschäftigen. Und schließlich, sobald wir das getan haben, werde ich Ihnen endlich sagen, wie Sie all diese Assets exportieren und sie an Ihre Kunden und Entwickler schicken können , um sie zu überprüfen und schließlich, hoffentlich beenden Sie Ihre Projekte. Also werde ich Sie im nächsten Video sehen, wenn wir anfangen zu teilen. 52. Die Seiten verbinden: Bevor wir mit dem Teilen mit unseren Kunden und unseren Entwicklern beginnen, möchte ich Ihnen nur schnell zeigen, wie Sie alle diese Seiten im Website-Design verbinden können. Wenn ich also zu Adobe XD gehe, kann ich Ihnen zeigen, was ich meine. Hier haben wir also die grundlegenden Schritte, die wir zu Beginn dieses Projekts getan haben. So Design kurze Moodboard, Papier Wireframes Projekt Style Guide, die wir ein wenig später beenden werden. Wir hatten Wireframes in Adobe XD, dann Design und schließlich Responsive Design. Wenn wir also zum Prototyp wechseln, sehen Sie keinen dieser Anschlüsse. Aber wenn ich alle von ihnen auswähle, können Sie sehen, wie viele dieser Anschlüsse wir Word auf Emissionen haben. Also, um mit Animationen zu beginnen, weil wir wollen, dass unsere Benutzer in der Lage sein, zwischen diesen Seiten zu navigieren. Was ich tun werde, ist Barris aus einigen von ihnen auszuwählen , weil Sie sehen können, dass wir Beeren als Ziel hier haben. So können wir es entweder von hier oder von hier aus tun, oder sogar zu den Top-Destinationen direkt hier, zum Beispiel, und dann verbunden. Also, was ich tun werde, ist wählen Sie dieses, das spezielle Angebote ist. Gehen Sie in die letzte Minute, suchen Sie das Paris. Und ich werde es in Horace Zustand wechseln und dann diesen ganzen Pfeil so wählen, und klicken Sie einfach und ziehen Sie ihn hier. Und dann werde ich tippen und wann zu verwenden Übergang, auflösen, erleichtern. Und zum Beispiel 0,8 Sekunden. Ich denke, es wird gut funktionieren. Und dann werde ich es wieder in den Standardzustand bringen, damit Benutzer tatsächlich sagen können , wie sie ihre Wärmevorschau navigieren, vergrößern sie und nur ein wenig, damit Sie sehen können. Also haben wir immer noch diese Hover-Effekte. Sie funktionieren sehr, sehr schön. So schweben. Und wenn sie sich dafür entscheiden, hier zu klicken wird es sie auf diese Seite bringen. Jetzt. Ich werde diese erkundete Schaltfläche jetzt verbinden, damit ich Ihnen zeigen kann, wie Scroll-Tool-Option funktioniert. Also wird er zu diesem speziellen Abschnitt scrollen. Und um das zu tun, werde ich zurück zum Design gehen, weil Sie sich erinnern, dass wir sie alle als Stapel hier eingeschlossen haben. Aber weil ich Stack auf dieser Seite nicht verwendet habe und Sie sehen können, kann ich einfach mit der rechten Maustaste klicken und alle meine Elemente von innen aufheben. Ich habe keinen Stack verwendet, weil ich verschiedene Ziele zwischen den Abschnitten benutzte. So können Sie sehen, wir haben 150, wir haben 150, wir haben 150, und hier haben wir auch 150. Aber weil dieses nicht 150 ist, zeigt es uns das, aber es ist nicht wegen diesen. Ich habe es einfach aus der Gruppe entfernt. Also, wenn ich gehen, um zu erkunden, jetzt, öffnen Sie es, die Suche meinen Knopf. Geh in seinen Horrorzustand. Gehen Sie zu Prototyp. Klicken Sie darauf. Und wir tun, ist tippen statt Übergang oder Auto animieren. Ich werde auch Scroll verwenden. Und was das im Grunde tut, ist, dass es Hyperlink nachahmt. Und das ist wirklich nützlich, besonders wenn Sie die Navigation haben, die auf Scroll folgen wird. Dies ist nützlich, da Benutzer in der Lage sein können, überall dort zu klicken, wo sie wollen. Und es wird sie zu diesem Abschnitt der Seite bringen , weil die Navigation immer noch folgen wird. Wie gesagt, ist dies wirklich nützlich, vor allem für Landingpages, wo Sie nur eine Seite haben und der gesamte Inhalt auf dieser einen Seite ist. Aber in unserem Fall ist es nicht wirklich so nützlich, weil wir alle diese zusätzlichen Drop-Downs und all diese komplexen Navigationssystem haben. Daher werden wir nur zu diesem Abschnitt navigieren, aber ich wollte Ihnen das als Option zeigen. Also genau hier für das Ziel, was wir tun müssen, ist wählen Sie Paris genau hier, das ist dieser Abschnitt. Und Sie können wählen, zum Beispiel, erleichtern 0,8 Sekunden. Sie können die Geschwindigkeit wählen, mit der ein Übergang übersetzen wird. Also werde ich 0,6 wählen, weil ich nicht denke, dass 0.8 alles Notwendige ist. Ich werde es wieder in den Standardzustand bringen. Klicken Sie auf Vorschau. Also, wenn Benutzer direkt hier schweben, Mal sehen, ob es funktioniert. Aus irgendeinem Grund funktioniert es nicht. Also lasst uns zum Prototyp gehen. Genau hier. Ich habe nicht einmal Hover in unserem Standardzustand aufgenommen. Also werde ich hier klicken. Ich werde Hover wählen. Das Ziel wird so schweben. Und gehen wir zurück und schauen uns jetzt eine Vorschau an. Also jetzt Hover funktioniert. Und wenn der Klick sie dorthin bringen wird, können Sie diese Animation natürlich verlangsamen. Also noch einmal, ich kann hier klicken. Geh zum Schweben. Wir haben Tab Scroll, um Paris zu besuchen. Ich werde mit Leichtigkeit gehen und dann 1 Sekunde, zum Beispiel, gehen Sie zurück in den Standardzustand, drücken Sie die Vorschau noch einmal. Also schweben, klicken Sie hier, und Sie können sehen, wie glatt es ist. Es übersetzt Sie nur in diesen Abschnitt. So können Sie sich einfach vorstellen, dass dies verwendet wird, zum Beispiel, wenn Sie diese schwebende Navigation direkt hier oder direkt hier mit den Abschnitten haben. So können Sie verschiedene Farbeffekte einbeziehen, um verschiedene Optionen anzuzeigen. Und dann klicken Sie geht, um Sie zu verschiedenen Abschnitten zu bringen. Also jetzt müssen wir dieses Hotel mit der nächsten Seite verbinden. Ich werde das aus nächster Nähe in diesem Abschnitt öffnen. Wir können in dieses Hotel gehen. Und wir haben Hotelkarte eins. Ich werde Hover wählen. So gleiche Animation. Ich werde Pfeil verwenden, ziehen Sie es auf diese Seite. Also tippen, Übergang, Auflösen, Erleichtern, und lassen Sie uns mit 0,6 Sekunden zum Beispiel gehen. Weil ich nicht denke, dass, äh, 1 Sekunde das notwendig ist. Also lassen Sie uns gehen und sehen, wie es aussieht. Also noch einmal, wir haben diese Option klicken und wir können leicht scrollen. Wie Sie sehen können, funktionieren alle diese Horroreffekte. So Sitzen Glück auf der Homepage. Wenn Sie mit dem Mauszeiger rechts hier und klicken, Es wird Sie zu dieser Seite, wo Sie leicht navigieren diese Bilder, indem Sie diese Pfeile. Und was wir als nächstes tun wollen, ist, dieses Buch jetzt zu reparieren und sicherzustellen, dass es auf die nächste Seite geht. Also lasst uns das machen. Aufgrund der nächsten Seite ist Billings, die nur vorstellen können, dass Benutzer alle diese verschiedenen Optionen gewählt haben. Sie haben sich für dieses besondere Hotel entschieden. Also, jetzt, was sie wollen, ist, zu dieser Abrechnungsseite zu gehen und eine Zahlung zu machen. Also müssen wir unsere Sidebar finden. Also Hotelinformationen Sidebar. Ich werde meinen großen Knopf finden, der hier ist. Geh zum Schweben. Klicken Sie, Ich werde Schritt Übergang, Auflösen, Entschärfen 0.6. Also genau die gleichen Einstellungen. Und Sie können sogar wählen, Scroll-Position beibehalten. Also, wenn Sie wählen, dass wird Übergang und setzen Sie auf diesem Abschnitt Ihrer Seite, die großartig ist, wenn Sie möchten, dass Ihre Benutzer zu einem bestimmten Abschnitt jeder Seite übergehen und nicht direkt nach oben gehen. Aber in diesem Fall wollen wir, dass sie direkt nach oben gehen. Also lassen wir das einfach unkontrolliert. Als nächstes klicke ich noch einmal auf meine Schaltfläche und bringe sie wieder in den Standardzustand. Denn wieder einmal möchte ich, dass Benutzer in der Lage sein, und diesen Zustand auszuwählen. Klicken Sie also hier, Vorschau. Und sobald sie hier gehen und Sie können klicken, es wird sie nehmen, um n zu versenden. Jetzt müssen wir nur diese Schaltfläche hier animieren. Also, um das zu tun, werde ich hier natürlich klicken. Und wir haben diese auch zuvor animiert. Also, wenn Benutzer dort klicken, wird es sie zu diesem Abschnitt bringen, aber ich möchte unsere Schaltfläche in diesem Fall animieren. Also lassen Sie uns mit Hoteldetails gehen. Hotelkarte, großer Knopf. Ich werde gehen, um den Mauszeiger zu bewegen und auf den Mauszeiger zu bewegen und zu sehen, tippen Sie auf Übergang. Mal sehen, ob wir gehen können. Jetzt können wir einfach zum Standardzustand unserer Schaltfläche gehen. Also, was ich tun muss, ist entweder sie so zu lassen, wie sie hier sind und einfach unsere letzte Schaltfläche animieren, die diese ist. Zur Bestätigung kann ich zur Bestätigung gehen, unseren Knopf finden, zum Hover gehen. Download-Quittung wird uns nirgendwohin bringen, weil wir diese Option nicht haben, um das zu entwerfen. Aber wir können diese Ruhe beleben. Also, wenn sie gehen, um zu schweben, wir können darauf klicken, ziehen Sie es nach Hause, oder Sie können einfach wählen Sie es hier, wo es sagt Ziel. So dass der Übergang Homepage aufgelöst, erleichtern Sie alle die gleichen Einstellungen und ich werde es zurück zu bringen. Und Verwendungen können sein, können einfach hier animieren, wenn wir verschiedene Optionen einbeziehen wollen. Wenn sie also auf diese Schaltflächen klicken, lassen Sie mich Sie in den Standardzustand bringen. Ich müsste den Tab-Punkt für unsere Schaltfläche hier erstellen. Also werde ich einfach zurück zum Design gehen. Erstellen Sie hier einen Datenpunkt. Qualitativ hochwertige Taste tippen. Ich müsste Control X verwenden, um es zu schneiden. Dann gehen Sie hier, drücken Sie Control V, um es einzufügen, und versuchen Sie, es irgendwo hier zu positionieren. Dann kann ich das alles absenken. Gehen Sie zurück zum Prototyp und wählen Sie ihn dann aus. Klicken Sie darauf. Ich gehe zu tippen, gehe zu Auto animieren, weil ich in den nächsten Zustand übergehen möchte. Lassen Sie mich das noch einmal machen. Also tippen Sie auf Auto, animieren, wählen Sie einen Zustand, ich möchte zur Zahlung gehen. Ich werde einfach und raus gehen und 0,6 Sekunden, zum Beispiel. Dann lassen Sie uns zum nächsten Zustand übergehen , der dieser ist. Wir haben immer noch diesen Tabulatorpunkt. Lasst uns jetzt darauf klicken. Und ich werde jetzt zur Bestätigung gehen. Und schließlich Bestätigung haben wir diese animiert, was in Ordnung ist. Also lassen Sie uns Vorschau treffen, sehen, wie das aussieht. Wie gesagt, wir können hier klicken. Es wird sowieso Übergang, aber wenn Sie wollen, können Sie schweben und klicken Sie hier, weil wir diese Schaltfläche haben oder hier als Platzhalter liegen, Es wird hier zum Übergang. Schlag jetzt B. Und schließlich sind wir hier. Und wenn wir wieder nach Hause klicken wollen, und es wird uns zurück auf die Homepage bringen. Also da haben wir es. So funktioniert die Animation. Wie gesagt, Sie werden diese Akte haben. Sie können es in mehr Details erkunden. Und wie gesagt, können Sie jetzt scrollen, was meiner Meinung nach eine fantastische Funktion ist, vor allem, wenn Sie Ausleihseiten haben, weil Sie alle Ihre Abschnitte auf einer einzigen Seite verbinden und die Scroll-Navigationsoption verwenden können. Ich habe es hier nicht benutzt, weil wir all diese verschiedenen Drop-Downs haben. Was Sie tun können, ist einfach zurück auf den Pfeil nach oben , der sich nach unten befindet. Dann wird es alles andere folgen, weil wir tatsächlich Stapel enthalten haben. Sie können es einfach als Teil dieses Stacks einschließen oder noch besser, Sie können es außerhalb eines Stacks einfach oben platzieren und die Scroll-Position dort von Anfang an beibehalten, es wird leicht scrollen, wenn Ihre Benutzer durch Ihre Seite und im Grunde einfach verbunden, um zur Position zu scrollen, um zurück nach oben zu gehen. So einfach ist es, mit diesen Prototypen zu arbeiten. Jetzt reden wir über das Teilen. Und im nächsten Video werde ich Ihnen zeigen, welche Freigabeoptionen Adobe XD unterstützt und wie können Sie Ihr Projekt mit Ihren Kunden und Entwicklern teilen? 53. Teilen mit Kunden: Jetzt, da wir alles aussortiert haben, reden wir über das Teilen. Und natürlich ist die Freigabe äußerst wichtig da Sie Prototypenfreigabe in Adobe XD entwerfen können Dies ist eine großartige Funktion und Sie müssen nicht verschiedene Werkzeuge ändern. Sie müssen nicht verschiedene Optionen erkunden und am wichtigsten für verschiedene Dienste bezahlen. Sie haben alles in Adobe XD, egal ob Sie einen kostenlosen Tarif oder einen Premium-Tarif für diese Klasse verwenden? Ich benutzte die ganze Zeit einen kostenlosen Plan, nur um dir zu zeigen, wie alles funktioniert. Und im kostenlosen Plan haben Sie nur eine Prototypen-Sharing-Option. Das ist also nicht wirklich eine gute Option für Sie, wenn Sie an mehreren Projekten gleichzeitig arbeiten. Aber wenn Sie an einem Projekt pro Projektbasis arbeiten, wenn Sie nur an einem einzigen Projekt arbeiten, das zum Beispiel lang ist, dann ist die freie Option von XD wirklich eine gute Option für jeden, egal ob Sie ein Profi sind oder Sie sind gerade erst angefangen. All das ist, wenn Sie nur Adobe XD installiert haben, wenn Sie die Creative Cloud von Adobe verwenden, wenn Sie für Creative Cloud-Abonnement bezahlen, dann ist es wirklich egal. Sie können XD einfach voll ausschöpfen , da Sie Creative Cloud bereits installiert haben. Lassen Sie uns jetzt zurück zu unserem Projekt wechseln und ich werde Ihnen einige Optionen zum Teilen zeigen. Also richtig für eine genau hier an der Spitze, was wir haben, ist wieder einmal Design Prototypen teilen, wir erforschen Design, wir erkunden einen Prototyp. Ich habe Ihnen all diese verschiedenen Optionen gezeigt. Und schließlich erreichen wir unseren Anteil. Also, was wir hier tun werden, ist, dass ich Ihnen zeigen werde , wie Sie einige dieser Optionen anpassen können und wie Sie sie teilen können. Nun, es zeigt uns, dass alles außer B ausgewählt wird, bieten Rahmen, weil Papier Drahtmodelle, wir sind nicht optional, wurden nicht in die Zeichenflächen gesetzt. Ich habe sie einfach hineingeschleppt. Deshalb sind sie einfach da. Wenn ich zurück zum Prototyp, kann hier tun, ist ich kann, zum Beispiel, klicken Sie auf diese Option und ich kann hier klicken. Und es wird mir diese Option zeigen, die Flow 1 genannt wird. Nun, weil diese als Fließ-eins verbunden sind. Und wenn ich hier klicke, können Sie einige dieser verschiedenen Optionen sehen. Aber ich habe diese Seiten nicht miteinander verbunden. Ich habe nur diese Seiten miteinander verbunden. Deswegen zeigt es mir so. All diese werden also Flow 1 sein und dies wird die Homepage des Flow eins sein. Und ich werde drinnen doppelklicken und es Wireframes nennen. Da es sich um Papierdrahtmodelle in handelte, waren dies Drahtmodelle in XD. Und dann werde ich hier klicken und dasselbe tun. Klicken Sie auf und diesen Fluss, Ich werde Design nennen. Und schließlich werde ich hier klicken. Klicken Sie hier, doppelklicken Sie und nennen Sie dieses responsive Design so. Und jetzt haben wir diese drei Ströme. Nun, was an diesen Flows großartig ist, ist, dass Sie einfach einen von ihnen verbinden und nur einen Flow teilen können, zum Beispiel Design. Oder Sie können alle Ihre Flows teilen und Benutzer, Clients, Entwickler können in der Lage sein, einfach zwischen Ihren Flows zu scrollen. Sehen Sie sich alle Ihre Optionen an. Also jetzt, wenn wir wieder zu teilen wechseln, können Sie sehen, dass wir diese drei Flüsse haben. Also, wenn ich dieses ausgewählt habe, wird es nur dieses teilen. Wenn ich diese auswählen, wird nur dieses zu teilen. Wenn ich die Seiten untereinander verbinde und wenn ich meine Wireframes auswähle, müsste ich immer noch die gleichen Verbindungen herstellen. Ich habe Ihnen in einem vorherigen Video zwischen diesen vier Seiten gezeigt. So können Sie in dieser Phase Ihres Projekts teilen. Sie können in diesem Stadium teilen, Sie können in diesem Stadium teilen, oder Sie können einfach hier beginnen, Verbindungen zwischen allen Ihren Flughäfen und allen Ihren Etappen und allen Ihren Flows herstellen , dann teilen alles mit Ihren Kunden und Entwicklern. Es hängt wirklich alles von Ihnen ab, was Sie tun wollen, und behalten Sie nur eine Sache im Hinterkopf, das ist die Geschwindigkeit. Es hängt also von Ihrer gesamten Dateigröße ab. Deshalb habe ich gesagt, bitte optimieren Sie Ihre Bilder , weil das Ihre Dateigröße senken wird. N wird es Ihnen ermöglichen, viel schneller in XD zu arbeiten. Und wenn es um das Teilen geht, wird es Ihnen ermöglichen, Ihre Dateien viel schneller als mit all diesen großen Dateien zu teilen. Außerdem hängt es von der Geschwindigkeit Ihrer Internetverbindung ab. Also, wenn Sie wirklich langsames Internet und wirklich große Dateien haben, wird es offensichtlich viel länger dauern, bis es in Adobe's Cloud hochgeladen wird. Und deshalb werden Sie in der Lage sein, die Datei mit den Clients und Entwicklern zu teilen . Also, wenn wir zurück zu der Datei wechseln, wie gesagt, Wireframes und Design und nicht reagieren, werden wir nur das Design teilen. Deshalb habe ich all diese Dinge absichtlich ausgelassen. Aber wieder einmal können Sie mit der Freigabe beginnen. Und ich ermutige Sie wirklich, in dieser Phase Ihres Projekts zu teilen. Denn in diesem Stadium, Client, kann ein Kunde leicht geben Sie Feedback. Sie können einfach alles anpassen, weil Sie es jetzt entworfen haben. Anstatt dies in einem Papier-Wireframing-Phasen Ihres Projekts zu tun. Hier sollten Sie beginnen, mit Ihren Kunden zu teilen, nachdem sie Ihnen Feedback gegeben haben, nachdem Sie dieses Feedback gesammelt haben, diese Änderungen vorgenommen haben, dann können Sie mit dem Design fortfahren. Dann können Sie diese beiden Ströme einfach trennen. Stellen Sie sich zum Beispiel vor, von dieser Seite zu dieser Seite zu gehen, lassen Sie uns sagen, einfach trennen Sie diesen Connector, von dieser Seite zu dieser Seite zu gehen, lassen Sie uns sagen, einfach trennen Sie diesen Connector, wie ich Ihnen hier gezeigt habe. Und dann haben Sie jetzt entworfen und Sie können auch das Design und Responsive Design teilen, wie gesagt, so dass sie alles sehen können. Endlich, gehen wir zurück zu hier. So ist ein Link für Design und Sie können den Link verwalten. Wie gesagt, Sie haben nur einen Link. Wenn Sie den kostenlosen Plan haben, wie ich Ihnen hier zeige, wenn Sie einen Premium-Tarif haben, wenn Sie ein Abonnement angerufen haben, dann haben Sie unbegrenzte Freigabeoptionen. Sie können beliebig viele Projekte bearbeiten. Einstellungen anzeigen. Warum teilst du das? Ist es für die Entwurfsprüfung , für die Entwicklung, für die Präsentation , Benutzertests oder benutzerdefinierte, wo Sie alle diese verschiedenen Optionen wählen können. Also lasst uns schnell klicken, durchlaufen sie. Design Review, würde ich wirklich empfehlen, das mit Ihren Kunden oder Ihren Teamkollegen zu teilen , denn dann werden sie in der Lage sein, Ihnen spezifisches Feedback zu hinterlassen. Sie werden in der Lage sein, Ihre Kommentare zu hinterlassen. Und dann können Sie mit diesen Kommentaren einfach Fortschritte machen und diese Änderungen vornehmen. Entwicklung, offensichtlich für Entwickler weil es viel komplexere Umgebung sein wird. Innerhalb dieser Umgebung werden sie in der Lage sein , Assets herunterzuladen , die Codeausschnitte sehen können. Sie werden in der Lage sein, einige Farben zu sehen. Font-Optionen und so viel mehr Präsentation ist im Grunde, es entfernt alle diese Optionen und lässt Sie einfach mit im Grunde Vollbild-Erfahrung für die Präsentation, was großartig ist, wenn Sie Ihr endgültiges Design präsentieren möchten, zum Beispiel zu Ihren Kunden oder zu verschiedenen Stakeholdern sind Partner oder so etwas. Benutzertests sind wieder anders, weil es alle diese verschiedenen Optionen entfernt, die für Benutzer vorhanden sind. Also werden sie nicht in der Lage sein, Tap-Punkte zu sehen. Zum Beispiel müssten sie das DOM herausfinden und sie selbst herausfinden. Sie müssen also messen, wie lange es dauert, auf diese Datenpunkte zu klicken, wie einfach es ist, in Ihrer Benutzeroberfläche zu navigieren und wie schnell sie an ihren Zielort gelangen. In unserem Fall, zum Beispiel, Buchung dieses Hotel, sagen wir. Sie müssen also all diese Dinge in Benutzertests messen. Und schließlich, Brauch. Wie der Name schon sagt, können Sie Ihre Erfahrung direkt hier anpassen. Beginnen wir also mit dem Design Review. Erster. Link-Achsen, können Sie direkt hier klicken. So kann jeder mit dem Link diese nur eingeladenen Personen sehen , die sie per E-Mail einladen können und jeder mit Passwörtern. So können Sie Ihre Datei und Ihren Link mit einem Passwort schützen. Also kann es nicht jeder sehen. Ich werde jeden mit dem Link auswählen dann erneut Link erstellen drücken, abhängig von der Dateigröße und der Geschwindigkeit Ihrer Internetverbindung, gehen Sie länger oder kürzer dauern. Und jetzt, da es fertig ist, teilen, wie Sie sehen können, haben wir alle diese Optionen. So können Sie diesen Link einfach kopieren und in Ihren Browser einfügen und ihn öffnen. Wieder einmal haben wir es für ein Design Review. Wir haben es für jeden mit dem Link. Sie können es mit Entwicklern hier teilen, und Sie können den Link auch aktualisieren. Sie können hier klicken und für die Entwicklung gehen, was wir tun werden. Aber schließlich möchte ich diese Option erklären. Wie Sie jetzt sehen können, müssen wir ein Upgrade durchführen, da wir dieses Limit von einem freien Link erreicht haben. Wenn Sie arbeiten und einige Änderungen vornehmen, können Sie sehen, dass wir diese Option haben. Sie können den Link von hier sowieso kopieren. Wenn wir also zurück zu Design gehen, nehmen wir weitere Änderungen vor. Wir können zurück zu Teilen wechseln, drücken Sie Update, Link News haben immer noch, dass ein Link, den Sie mit Ihren Kunden teilen können wird genau am gleichen Ort zu finden sein, wird an genau der gleichen Stelle sein. Dieser Link wird sich also nicht ändern, aber der Inhalt dieses Links wird sich ändern, wenn Sie einige Designänderungen direkt hier vornehmen. Wie gesagt, Sie können einfach eine Änderung vornehmen. Klicken Sie auf Link aktualisieren, um ein Update erneut zu drehen. Und dann können Sie hier klicken, um den Link zu kopieren und mit Ihrem Kunden zu teilen. Wenn ich dir jetzt zeige, wie alles online aussieht. Also, wie ich sagte, ich werde hier klicken, stützen Sie das in meinem Browser. Springen Sie gleich hier. Und so sieht es aus, sobald es im Browser ist. Wieder einmal funktionieren alle diese Optionen so wie bevor wir sehen können. Und zum Beispiel, wenn ich hier klicken, es geht, um den Übergang nach Paris, geht zum Übergang zu hogarth tut so, wie Sie sehen können, alles funktioniert, wie es sollte und wie wir es erstellt, wenn ich hier rechts klicken ist gehen, um uns Ziel Wellness zu zeigen. Also funktioniert alles so, wie es sollte. Und ich kann auch nach unten scrollen und weil dies viele dieser verschiedenen Elemente im Inneren hat. Wie Sie sehen können, funktioniert alles so, wie es sollte. Und schauen wir uns diese Elemente genau hier an. Also, wenn wir hier klicken, wird uns nehmen, um zu hören, geben Sie es einfach Zeit zu laden und es wird alle diese verschiedenen Schluckauf zu entfernen. Lassen Sie uns abschließend überprüfen, um zur nächsten Seite, Explorer, zu wechseln. Nun, wie Sie sehen können, funktioniert alles so, wie wir es uns vorgestellt haben und wie wir es miteinander verbunden haben. Und ich würde Ihnen immer empfehlen, all dies zu überprüfen , bevor Sie dies an Ihren Kunden senden. Und nur um sagen zu können, Okay, jetzt funktioniert alles. Achten Sie darauf, ihnen zu sagen, dass sie es verlassen. Es ist also auf das geladen und auch auf ihr Ende. Also funktioniert alles so, wie es sollte. Und gehen wir zurück nach Hause, zurück nach Hause. Weil ich Ihnen die Kommentierungsoptionen zeigen möchte. So können Sie Menschen zum Hören einladen. Sie können sie einfach einladen, sie zu bearbeiten, Sie können sie einladen, zu sehen. Oder noch einmal, Sie können einfach diesen Link teilen. Sie benötigen kein Creative Cloud-Konto, um Kommentare abgeben zu können. Es ist immer das Beste, wenn sie es tun, aber das müssen sie nicht. Und im Grunde, was Sie tun können, ist, dass Sie diesen Link mit ihnen teilen können und dann werden sie in der Lage sein, Ihnen Feedback zu hinterlassen, wenn es darum geht, zurück zu ernähren, was sie tun können, ist, dass sie Menschen erwähnen können. Also, wenn sie ein Konto haben und zum Beispiel, ihr Name ist John und der andere Personenname ist, zum Beispiel, Mark. Sie können einfach bei Mark, bei John erwähnen, und dann werden sie in der Lage sein zu sehen, dass Sie sie auf einer bestimmten Seite und in einem bestimmten Kommentar erwähnt haben. Genau hier sind wir auf einer Homepage, so dass Sie klicken können, es geht, um Ihre rechts hier zu dieser Seite zu nehmen, und Sie können auch hier navigieren. Dies ist also die zweite Seite, dritte und vierseitige Seite, und es wird viele dieser zusätzlichen Seiten enthalten, wenn Sie alle in einem einzigen Fluss teilen, wie ich erklärt habe. Und Sie können auch hier klicken, um zurück zur Homepage zu gehen, wenn es um Kommentare geht, Sie können einfach einen Kommentar hinterlassen, wie es ist. Also vielen Dank für das Design. Zum Beispiel können Sie auf Absenden klicken und es wird auf dieser bestimmten Seite zu leben, die das Homepage-Design ist, was großartig ist. Und Sie können auch das Homepage-Design hier sehen. Sie können hier klicken. Und es wird Ihnen diese Seiten so zeigen. Also für eine einfachere Vorschau, oder ich kann hier klicken und es wird mich zurück zu hier. Und Sie können auch auf einen bestimmten Teil Ihrer Seite lokalisieren. Also lasst uns zum Beispiel hier runter gehen. Und Sie können einfach auf diese Pin klicken, legen Sie es hier, zum Beispiel, sind direkt auf Elemente und sagen, zum Beispiel, machen Sie diesen Text. Sie können beispielsweise auf Absenden klicken. Und schließlich kannst du daran arbeiten, es blau machen und dann gleich hierher kommen und ein Ergebnis erzielen. Es wird verschwinden, weil du diese Änderung vorgenommen hast. Daher können Sie alle Ihre Änderungen im Auge behalten. Sie können verfolgen, was Ihr Kunde und verlangte für Sie, um diese Änderungen vorzunehmen. Und Sie können verfolgen, wohin das Projekt in diesem bestimmten Stadium geht. Sie können Kommentare auch direkt hier ein- oder ausblenden. Und hier können Sie Anmerkungen ausblenden, die diese Dinge sind. Also zum Beispiel, wenn ich hier rechts klicke, ziehen und tippen Sie noch einmal diesen Fluss machen, zum Beispiel, wie klicken, damit ich es ausblenden kann und sie werden nicht in der Lage sein, es zu sehen, aber ich werde in der Lage sein, es zu sehen. Also, wenn ein Mauszeiger darüber, es wird mir zeigen, dass auch, wenn Sie mehr Änderungen vornehmen, hier ähneln. Und wir schreiben das, machen es schmaler. Übermitteln. Wenn ich hier klicke, wird es mir zeigen, dass es Nummer 1 ist. Lassen Sie uns sie für eine Sekunde zeigen. Also, wenn ich rechts klicke, wird mir zeigen, dass das hier ist. Wenn ich hier klicke, sollte es mich direkt hier bringen, aber es tut nicht aus irgendeinem Grund. Hier sind wir. Es bringt mich also direkt hierher und Sie können es auch von dieser Position in diese Position verschieben. Aber wie auch immer, Sie können sehen, dass alle diese Kommentare auf einem Homepage-Design befinden. Schließlich können Sie hier Kommentare filtern, zu denen Sie scrollen können, zum Beispiel, John's Kommentare Markierungen häufig. So können Sie tun, was Sie wollen, mit dieser NSA sagte, Sie können einfach hier klicken, treffen Sie das Ergebnis hier. Und schließlich können Sie auch diese Kommentare löschen, klicken Sie hier. Und Sie können es von dieser bestimmten Seite löschen. Also im Grunde ist es das. letzte Sache ist, dass Sie hier klicken können, um in den Vollbildmodus zu gelangen. Sie haben also nicht alle diese Optionen an der Seite. Vielleicht ist dies die beste Option, um Ihren Benutzern oder Kunden oder was auch immer sonst zu präsentieren. Und dann können Sie einfach die Flucht drücken. Und es wird Sie zurück auf diese Seite bringen. Also, das ist es, um mit Ihren Kunden zu teilen. Im nächsten Video werden wir über das Teilen mit Entwicklern sprechen. Welche Optionen können Sie für die Freigabe mit Entwicklern verwenden? Und was sind einige Optionen, die Entwickler suchen , damit Sie wissen, wofür Sie es teilen sollen. Also sehe ich dich dort. 54. Teilen mit Entwicklern: Entwickler müssen die technischen Dinge kennen, während der Kunde wissen muss, wohin die Struktur geht, Sie verwenden die Informationen, die sie angefordert haben und geht das Projekt in die Richtung, die er wollte? Aber noch einmal möchten Entwickler völlig entgegengesetzte Dinge wissen, wie zum Beispiel, wie groß ist die Schriftgröße, die Sie verwenden, welche Farben haben Sie verwendet? Welche Abstände, Ränder, Polsterung. Also all diese Art von technischen Dingen. Während auf der anderen Seite wollen Kunden nur sehen, ob Sie die Struktur richtig haben. Gefällt ihnen das Design? Haben Sie den Inhalt darin eingeschlossen? die Botschaft so verbreitet worden, wie sie es wollten. Deshalb haben wir Sharing-Optionen für einen Kunden und dann Entwickler entwickelt , die Optionen teilen. Wenn ich also zurück zu Adobe XD gehe und Ihnen dies zeige, haben wir eine Designbewertung, die ich Ihnen im vorherigen Video gezeigt habe. Und genau hier haben wir Entwicklung. Also werde ich dort klicken. Und was Sie haben, ist Export für Web. Und Sie haben diese herunterladbaren Assets. Also haben wir sie als PNG. Also kann ich hier klicken, um sie in das herunterladbare Paket aufzunehmen. Jeder mit dem Link kann es sehen und ich kann einfach Update Link drücken. Und noch einmal, es wird diesen Link mit all diesen Einstellungen zu aktualisieren , die ich gerade aufgenommen habe. Und wenn es fertig ist, können wir hier klicken, um den Link zu kopieren. Und ich werde tun, ist wieder, öffnen Sie meine Seite. Ich werde Control V drücken, um es einzufügen, drücken Sie die Eingabetaste und warten, bis es nur ein wenig geladen wird. Denn wieder einmal hängt es davon ab, ob Ihre Datei groß ist oder ob sie klein ist. Und sobald es mit dem Laden fertig ist, können Sie feststellen, dass wir jetzt diese Optionen hier haben. Also, wenn ich hier klicke, haben wir alle Assets für Entwickler, die wir hochgeladen haben. Sie können unsere Logos sehen, Sie können all diese Dinge sehen und sie können einfach darauf klicken und herunterladen, wenn sie wollen. Und genau hier, was wir haben, sind im Grunde Code-Snippets. So können sie diese Farben leicht betrachten, weil ich sie als Design-Token erstellt habe. Also, wenn ich Sie zurück zu unserem Design bringe, wenn ich zum Beispiel unser Asset-Panel und unsere Dokumentensäuren öffne, warten Sie, bis es nur ein wenig geladen wird, weil wir viele davon haben. Und wenn sie dies tun, können Sie sehen, dass wir alle diese Farben korrekt als Farb-Token benannt werden. Und Sie können dies auch mit Ihren Schriftarten tun. So können Sie zum Beispiel diese Rubrik Nummer eins nennen. Also H1, H2, H3, das kannst du tun. Sie können Ihre Schriftarten auch in beispielsweise Absatzschriftart umbenennen . Sie können es in Sub-Header aufrufen, und Sie können Ihren Schriftarten alle diese verschiedenen Namen geben. So werden Entwickler in der Lage sein, leicht zu verstehen, wo alle diese Schriftarten in die Seite kommen. Also, wenn ich Sie zurück hier, können Sie sehen, dass wir haben, zum Beispiel, Pfirsichfarbe Stern, orange hellgrau, die im Grunde alle unsere Farben hier sind. Und Entwickler können diesen Hex-Code einfach von hier kopieren, und sie können ihn unter diesem Namen in ihren Code einfügen. Wenn es nun um die gemeinsame Nutzung der Entwicklung geht, und wenn ich hier klicke, können Sie sehen, dass die Größe des Ansichtsfensters 1920 mal 1080 ist, was die Benutzer hier sehen. Und die Gesamtgröße des Designs beträgt 1920 x 16.640, was im Grunde ist, wenn sie anfangen, nach unten zu scrollen. Außerdem können sie einzelne Elemente inspizieren, weil wir hier alle unsere Vermögenswerte, alle unsere Farben, alle unsere Charakterstile haben. Und ich habe nicht einmal Bilder aufgenommen, die ich Ihnen im nächsten Teil zeigen werde, wenn wir tatsächlich zum Export kommen. Und das wird auch hier bevölkern, wozu ich zurückkommen werde, nur um Ihnen all diese verschiedenen Optionen zu zeigen. Endlich, genau hier haben wir Charakter-Stile. Und wenn ich hier klicke, können wir Schriftart, Schriftfamilie, Schriftgewicht, Schriftgröße, Farbe, Sorgfalt beim Abstand und Zeilenabstand sehen , damit sie wissen können, was sie in den Code aufnehmen sollen. Wenn ich den ganzen Weg nach unten scrolle, können Sie verschiedene Interaktionen sehen. Also Lay-out-Gitter, Spalten, Rinnenbreite, wenn Sie sich daran erinnern, was wir enthalten, was besonders wichtig für responsive Design ist, haben wir eine Spalte mit Rändern oder Basizität. Diese Ränder sind also nur für den Inhalt innerhalb von Interaktionen. So unterschiedliche Interaktionen zwischen verschiedenen Elementen. Und Sie können sehen, wie viele Interaktionen schwächer sind, weshalb dieser Kurs offensichtlich so lange dauert. Schließlich, was ich Ihnen zeigen wollte, ist dies, zum Beispiel, Ich möchte hier klicken. Es zeigt mir verschiedene Abstände zwischen verschiedenen Elementen. Es zeigt mir genau hier. Also Breite des Textes, Höhe des Textes. Es zeigt mir x und y. Axes ist show me font-style. Also, welches es ist, ist es regelmäßig, fett, egal welche Größe. So ist eine 120 Pixel Ausrichtung in der Mitte. Wir haben dies, die Zeichenabstand liegen Höhe und so weiter. Wir haben Aussehen. So Farbe, die fast schwarz ist, und sie wissen, was ihre Fettleibigkeit 100%, die noch einmal ist wirklich wichtig für sie. Inhalt, spezielle Angebote, die im Grunde dieser ganze Abschnitt ist. Wir haben das CSS, also oben links, eine Breite und Höhe. Sie können alle diese Optionen enthalten und haben unterschiedliche Benutzeroberflächeneigenschaften. So Variationen für die Schriftart, haben wir Buchstabenabstand, Farbe, Textausrichtung Schriftart. So können sie alle diese CSS-Informationen verwenden und sie in den Code einfügen. Daher machen wir Entwicklern das Leben viel einfacher mit all diesen verschiedenen Optionen, da sie zuvor nicht über diese Optionen verfügten. Jetzt tun sie innerhalb von Adobe XD. Und wieder einmal können sie einfach hier klicken und aus all diesen Code-Snippets auswählen und sie können einfach in ihr eigenes Design aufgenommen werden. Nun, das, was ich erklärt habe, kann genehmigt und auf alles andere angewendet werden. Also, jetzt habe ich hier geklickt wir haben Standardzustand, wir haben Horace Datum, so kann ich zwischen ihnen direkt hier in meinem Browser wechseln. Sie können sehen, dass die Gruppe Paris genannt wird, die Name der Komponente sowie Aussehen von 100% CSS ist. Wir haben Interaktionen hier. Also haben wir all diese verschiedenen Elemente und Sie können sogar tiefer gehen. Zum Beispiel, genau hier, kann ich es ändern, um zu schweben. Ich kann hier klicken. Und wir können Interaktion Tabbed Übergang sehen. Ziel ist der Zielentwurf. Also, was ist die nächste Seite. Das zeigt zwei Entwicklern, welche Art von Übergängen sie brauchen, um einfach in, out und all diese verschiedenen Informationen zu verwenden . Also im Grunde ist das. Entwicklerträumen, weil sie sich leicht durch all diese Elemente navigieren können. Sie können Entfernungen sehen, sie können das Styling sehen, sie können alle Arten von verschiedenen Elementen im Inneren sehen, was auch dafür zutrifft. Also haben wir Standardzustand. Sie können alle diese verschiedenen Zustände unserer Navigation leicht überprüfen. Sie können zum Beispiel sehen, wo sich diese, zum Beispiel, Illustration aus diesem Text befindet? Wie weit sich das befindet, zum Beispiel von dieser Kante, von dieser Kante und so weiter. Im Grunde können sie sich also durch die Bearbeitung und all diese verschiedenen Details navigieren . Sie können sehen, wir sind 40 von hier, wir sind 40 von hier. Und sie können auch ALT halten und steuern und sehen, wenn sie die Kontrolle halten und die Abstände zwischen allen Elementen um die ausgewählten Elemente bewegen, wie zum Beispiel, jetzt in diesem Fall erkunden. Also schließlich, was ich Ihnen zeigen möchte, ist dies, Nehmen wir an, dass ich dieses Bild zum Beispiel einschließen möchte, so kann ich direkt darauf klicken. Ich kann mein Steuerelement halten und klicken. Und was ich hier habe, ist Markierung für den Export. Also habe ich diese Option nicht verwendet. Und ich werde Ihnen das später im nächsten Abschnitt für den Exportteil zeigen. Denn wenn Sie Markt für den Export können leicht markieren Sie alle Ihre Bilder für den Export, Sie können einfach darauf klicken und klicken Sie hier, was wird es für den Export markieren. Oder Sie können einfach Shift E verwenden , um dieses Asset für den Export zu markieren. Dann können wir gleich hier zum Hover wechseln. Wenn Sie dieses Bild unter einem anderen Namen hatten und dann, wenn Sie es für den Export markieren und zurück hierher gehen, wird es hier erscheinen. Also können wir irgendwo nach draußen gehen. Und mit diesen Säuren werden Bilder erscheinen. Wenn Sie also für den Export markieren, können Sie Bilder markieren, Sie können Symbole markieren. Sie können an diesen B und G Elemente wie diese Logos markieren, Anden Assets sind. So können Sie alle diese Assets für den Export markieren und Sie können sie so vorbereiten. Sie können Ihre Schaltflächen auch für den Export markieren, zum Beispiel können Sie alle Arten von verschiedenen Elementen wie diese Symbole oben markieren, zum Beispiel. Aber das würde ich nicht unbedingt empfehlen. Und in der nächsten Sitzung werde ich verschiedene Optionen anzeigen, die Sie tatsächlich verwenden können , wenn Sie diese Dinge für den Export markieren. Weil wir sicherstellen wollen, dass Entwickler das perfekte Layout und die perfekte Struktur erhalten das perfekte Layout und , weil es ihr Leben viel einfacher machen wird, aber auch unser Leben viel einfacher, weil wir nicht gehen zurück und vorwärts zu diesem Projekt zwischen uns und Entwicklern. Deshalb sehe ich alles vorbereiten, was dein Job ist, was deine Verantwortung ist. Sie stören dich also später nicht, wenn dieses Projekt in die Endphase kommt. So können Entwickler ihre Arbeit erledigen. Du hast deinen Job richtig gemacht und alle sind glücklich im Team. Wie ich bereits im nächsten Abschnitt des Kurses sagte, werden wir über den Export sprechen. Ich habe Ihnen diese Exportoptionen gezeigt und wir werden später etwas mehr darüber reden. Aber ich werde Ihnen auch einige Exportoptionen direkt aus Adobe XD zeigen, die einige der Dateiformate sind, in die Sie exportieren können. Und was sind einige strukturelle Optionen für Sie, wenn es um Dateiordner, Paketierung und Freigabe zwischen Ihren Kunden und Entwicklern geht. Also sehe ich dich dort. 55. Exportieren deiner Elemente: Wenn es darum geht, Ihre Dateien mit Ihren Kunden zu teilen, senden Sie ihnen normalerweise einfach die Datei und das ist es im Grunde. Und dann können die Entwickler von dort diese Datei bearbeiten, können diese Datei selbst exportieren. Aber was ich gerne mache, ist im Grunde alle meine Dateien zu exportieren. Also höre ich nicht von diesen Kunden und ihren Entwicklern für dieses bestimmte Projekt. Ich wende mich immer gerne an sie zurück und frage sie Brauchst du noch andere Hilfe? Brauchen Sie noch weitere Hilfe? Aber weil ich meine Arbeit richtig gemacht habe, werden sie mich in Zukunft nicht belästigen. Ich habe alles geteilt, was sie angefordert haben und mehr während des Erstellungsprozesses dieses Projekts. Deshalb werden sie mich später nicht belästigen. Wenn es um die Freigabe geht, haben Sie mehrere Optionen, um Ihre Dateien mit Ihren Kunden und Entwicklern zu teilen. Wieder einmal sind Kunden in der Regel nur daran interessiert, wie das Design aussieht. Ist alles funktional? Haben Sie die ganze Kopie im Inneren und all diese im Grunde kosmetischen Dinge enthalten? Während Entwickler, auf der anderen Seite, wie er in einigen früheren Videos sagte, sind mehr interessiert an diesen spezifischen Dingen wie Ränder, Polsterungen, Farben, Schriftgrößen, und so weiter. Daher müssen Sie Ihre Zielgruppe im Grunde kennen, wenn Sie mit dem Client teilen, im Grunde ist es in der Regel genug, um ihnen die Originaldatei, Adobe XD-Datei, zu senden , und das ist es im Grunde. Aber wenn Sie mit Entwicklern arbeiten, müssen Sie die Dateistruktur verstehen. Sie müssen verschiedene Dateiformate verstehen, da nicht alle Formate gleich sind, nicht Formate, nicht alle Formate werden für genau dasselbe verwendet. Und das werden wir in diesem Teil der Klasse besprechen. Ich werde mit Ihnen teilen, wie können Sie verschiedene Dinge aus Adobe XD exportieren und welche Optionen teilen? Also, wenn ich zu Adobe XD wechseln und ich werde Ihnen zeigen, dass wir hier unsere Datei haben. Aber wenn ich dies minimiere und einen neuen Ordner direkt hier auf meinem Desktop erstelle und es zum Beispiel Projekt nenne. Seit meiner Tiefe und machen es einen Namen, Projekt Säuren. Und wenn ich es öffne und direkt hierher bringe, werde ich ein paar Ordner erstellen. Also werde ich mit einer Homepage gehen. Und lassen Sie mich zurück zu XD wechseln, um die Namen dieser Seiten zu sehen. Das Ziel ist also das zweite. Also Nummer 2 wird in der Verteilung sein. Mal sehen. Nummer drei wird das Angebot ausgewählt werden. Und schließlich wird Nummer vier für die Zahlung sein. Was ich also tun werde und was ich normalerweise mache, ist in jeden dieser Ordner für jede dieser verschiedenen Seiten zu springen . Und dann erstelle ich meine Größen. Also werde ich Nummer eins Original erstellen, die diese Größe ist, auf der wir entworfen haben, die 1920 ist. Und dann runter. Und dann werde ich alle diese anderen Projektgrößen erstellen. Also werde ich einen zusätzlichen Ordner erstellen, nennen es große Desktops. Dann werde ich Control V drücken, und ich werde das umbenennen. Zu, zum Beispiel, drei große Geräte. Ich werde Control V benutzen und diese Anzahl von vier Tabletten anrufen. Ich schmutze und mache Nummer 15 Schriftarten. Jetzt innerhalb von jedem dieser, werden wir separate Elemente exportieren. Ich werde Sie natürlich nicht damit belästigen, jedes einzelne Element zu exportieren, aber ich werde Ihnen zum Beispiel hier auf unserer Homepage zeigen, weil es die Mehrheit unserer Elemente enthält, wie all das exportiert werden kann. Jetzt haben Sie zwei Optionen, weil wir diesen Styleguide erstellt haben , den wir in einer Sekunde beenden werden, aber wir haben es erstellt und Sie können alle Ihre Elemente von hier aus exportieren. Was wir also tun werden, ist, alle unsere Symbole wie diese auszuwählen. Aber wir müssen sie dann aus unserem Ordner auswählen, weil wir es genau hier haben. Also Reisen Projekt-Assets, wir müssen diesen Ordner jetzt finden, um alle unsere Assets zu exportieren. Und das ist es, was ich tue. Grundsätzlich exportiere ich alle meine Bilder entweder als JPEGs oder PNGs. Ich exportiere sie als JPEGS, wenn sie keine transparenten Hintergründe haben. Zum Beispiel, wenn Sie Leute aus Bildern ausschneiden, wenn Sie Bilder von Logos verwenden, wie wir es getan haben und ich Ihnen im vorherigen Abschnitt der Klasse gezeigt habe. Oder wenn Sie zum Beispiel einige verschiedene Optionen haben, die Sie es wie einen Farbverlauf oder einige verschiedene Elemente einschließen , die ihre Hintergründe ausgeschnitten haben, dann werden Sie PNGs verwenden. Aber sonst, wenn nur flache Bilder wie wir hier haben, zum Beispiel für die Bilder dieser Orte und so weiter, dann würde ich empfehlen, dass Sie sie als JPEGs exportieren. Offensichtlich. Sie können sie dann später noch mehr mit Riot oder Image Opt-In für Mac optimieren, zum Beispiel, wie unsere bereits erklärt. Oder Entwickler können das in ihrer eigenen Software tun. Wenn sie spezifische Software oder spezifische Anforderungen haben, können sie sie dort weiter optimieren, nur um diese Bilder noch kleiner zu machen, als sie hier in XD sind. Und die Größe ist natürlich wirklich wichtig, wenn es um das Laden von Websites geht. Wenn es darum geht, Seiten zu laden, je kleiner Ihre Elemente sind, desto schneller wird die Seite geladen. Daher wird Google Sie mehr mögen, weil Ihre Seite schneller geladen wird. Benutzererfahrung für Ihre Benutzer ist viel besser. Und deshalb werden sie Ihre Seite mehr optimieren, wenn sie anfangen, sie zu scrollen und zu crawlen. Und sie werden es nach oben schieben. Wenn es gut für SEO optimiert ist, offensichtlich. Aber es ist nur eine dieser Anforderungen, um sicherzustellen , dass alles so schnell wie möglich geladen wird, dass alles für Ihre Benutzer leicht zugänglich, leicht angreifbar, sichtbar und so weiter ist. Daher ist es nur eine dieser vielen verschiedenen Komponenten, die in der SEO-Optimierung kommen, alle Ihre Elemente optimiert und so klein wie möglich in der Größe zu machen . Wenn wir also zurück zu hier gehen, wie gesagt, wenn wir alle unsere Artikel auswählen, werde ich sie als SVG exportieren. Und SVG ist großartiges Dateiformat für Symbole, weil es unendlich skaliert. Es wird nicht an Qualität verlieren. Also, wenn Sie Ihre Symbole exportieren und Sie haben sie in diesen Dateitypen wie wir. So können wir jeden einzelnen dieser Artikel direkt hier bearbeiten. Deshalb empfehle ich immer wieder Envato Elements und keine dieser kostenlosen Artikel und kostenlosen Websites. Stellen Sie also sicher, dass Sie sie als SVGs exportieren. Denn wieder einmal werden Entwickler in der Lage sein, alle diese SVGs im Code zu skalieren. Sanftmütige, leichtere Änderungen erleichtern Anpassungen. Daher ist SVG der Weg zu gehen. Nun, um loszulegen, werde ich tatsächlich hier mit unserem Logo gehen und ich kann es als SVG exportieren. Aber wie Sie gesehen haben, hatten wir einige Probleme bei der Responsive-Größenänderung. Also werde ich einfach diese beiden auswählen. Und ich kann dieses Logo zum Beispiel dunkel nennen , so. Und dann werde ich Control E. drücken und genau hier werde ich sicherstellen, dass ich es finde, um die Homepage zu reisen. Und ich werde Homepage verwenden oder noch besser. Ich kann zum Beispiel hier klicken und zum Beispiel einen neuen Ordner namens Icons und Logos erstellen. So wie das. Wählen Sie es aus, klicken Sie auf Ordner auswählen. Und weil wie gesagt, wir PNG als Logo verwenden werden, wählen Sie einfach Design. Der PNG-Hit-Export wird exportiert. Und dann werden wir alle unsere Symbole auswählen, weshalb wir den Styleguide in erster Linie Hit Control E anstelle von PNG erstellen, werde ich SVG wählen. Ich werde den gleichen Ordner wählen, drücken Sie Exportieren. Und ich verwende nur im Grunde diese Standardoptionen für den Export. Und es wird eine Weile dauern, weil Indies die Farbe haben und sie den flachen Hintergrund im Inneren haben. Was ich auch tun kann, ist genau hier zu springen. Gehe zu meinen Symbolen, also gehe zurück zu hier, Icons und Logos. Und Sie können alle diese Symbole als SVGs unterstützen sehen. Und wir haben alle diese als PNGs, die unser Logo und Logo dunkel sind. Wenn ein Kind Ansicht und dann große Symbole, können Sie unsere Logos sehen, Logo Licht und Logo dunkel in all diesen sind offensichtlich als SVGs exportiert. Schließlich haben wir diese transparenten Optionen für alle diese Symbole. Das kann ich auch exportieren. So kann ich zum Beispiel auf Gliederung klicken und dann von dort aus auf Gliederungssymbole klicken. Oder ich kann tatsächlich zur Seite springen, wo all diese Symbole sind. Ich kann sie wie So auswählen. Drücken Sie Control E für diese bestimmte Seite, für diese bestimmte Größe, und exportieren Sie sie dann so. Also haben Sie diese beiden Möglichkeiten. Sie können sie alle auf einmal exportieren, wie wir es getan haben. Ich müsste nur alle diese umstellen, um solche Zustände zu skizzieren. Klicken Sie hier, klicken Sie auf diesen einen Umriss und dann für alle tun und dann einfach exportieren. Was ich auch tun würde, ist vielleicht genau hier, stellen Sie sicher, dass ich Farbordner wähle und all diese farbigen darin lege, und erstellen Sie dann einen anderen Ordner namens skizziert, und dann alle diese skizzierten Symbole hinein. Was Sie tun können, ist das, was ich zuvor für diese Bilder erwähnt habe. Zum Beispiel kann ich hier direkt einspringen, diesen Image-Markt für den Export auswählen. Aber das Problem mit Marketing für den Export, und ich kann zeigen, dass mit, zum Beispiel, dieses Symbol. Ich kann es direkt hier klicken, hier ist es. So Markt für den Export. Wenn Sie es für den Export markieren, können Sie direkt hier in die Datei gehen und dann exportieren. Und Sie können Batch machen. Und Sie können zum Beispiel SVG oder PNG auswählen. Dies ist unser Problem, weil ich möchte, dass dieses Bild als JPEG exportiert wird, aber ich möchte, dass dieses Symbol als SVG exportiert wird. Das ist also ihr Hauptproblem und deshalb sage ich, dass diese Optionen nicht verwenden, weil Siedies leicht markieren und einen Style Guide wie diesen erstellenund sie dann exportieren können dies leicht markieren und einen Style Guide wie diesen erstellen , wie ich Ihnen gezeigt habe, und wählen Sie dann einfach Ihre Bilder. Also werde ich dies für den Export nicht markiert. Und dann zum Beispiel hätte ich als markiert angesehen. Ich hätte deine Marke angedockt. Und weil wir dies unsere Hauptkomponente sein mussten, es gerade erstellt und diese Instanzen dieser Komponente. Also wieder einmal haben wir Homepage-Design. Also gehen wir zu File Export Batch. Ich wähle zum Beispiel P&G, und dann werde ich Homepage-Design wählen. Also gehen Sie hier, Homepage Original, und klicken Sie dann auf Ordner auswählen, klicken Sie auf Exportieren. Wie gesagt, entweder als PNGs oder SVGs, wird es sein Ding tun. Und schließlich, wenn wir zu diesem bestimmten Ordner gehen, so Homepage Original, können Sie sehen, dass es jede einzelne Sache exportiert, die markiert wurde, die im Grunde alle diese Bilder in verschiedenen Größen sind, alle diese Bilder in verschiedenen Größen. Also diese vier im Grunde, es exportierte alle unsere Flaggen in verschiedenen Größen und unsere Logos in verschiedenen Größen. Wenn ich das zum Beispiel für dieses mache, und ich würde dies auch als PNG, Promo-Video Color Overlay und Promo-Video exportieren . Sie können sie auch so auswählen. So albern diese, um Control E zu treffen, es ist im selben Ordner wie PNG. Oder noch besser, ich kann sie zum Beispiel in JPEG ändern, aber ich werde das nicht tun, weil dieses Color Overlay eine Fettleibigkeit hat, wie Sie hier sehen können. Also werde ich sie als G. exportieren. Es spielt wirklich keine Rolle. Sie können flache Bilder wie dieses exportieren, zum Beispiel sb und G. Es spielt wirklich keine Rolle. Es wird also nur Ihren Workflow ein wenig mehr beschleunigen, aber Sie können sie auch exportieren, da JPEGS wirklich an Ihnen liegt. Also, wenn ich hier scrolle und wenn ich in diesem bestimmten Ordner auf Aktualisieren klicke, sehen Sie, wo er sie exportiert hat. Hier sind wir. So Promo-Video und Promo-Video-Farb-Overlay. Sie haben also all diese verschiedenen Optionen. Und versuchen wir es mit diesem, weil es unsere Hauptkomponente war. Also, wenn ich Markierung für den Export und dann wieder tun, so File Export, Batch, PNG, Export. Es sollte mir diese Warnung geben. Also mit all diesen Tut mir Leid Ort. Und sobald das Laden beendet ist, sollte es alle unsere Bilder von hier hineinlegen. Mal sehen, ob das funktioniert hat, weil wir offensichtlich all diese großen und massiven Änderungen daran vorgenommen haben. Also wollte ich nur sehen, ob es unseren Ordner einschließt oder mit der rechten Maustaste klickt und aktualisiert, weil wer all diese haben würde? Also hat es nicht nur diese Barrieren eingeschlossen. Und das war es, was ich gesagt habe. Je mehr Änderungen Sie an Ihren Artikeln vornehmen, im Grunde müssen Sie in den Londoner Markt für den Export gehen, falschen Markt für den Export. Und das ist offensichtlich viel einfacher, wenn Sie es tun, während Sie entwerfen. So, sobald, zum Beispiel, Sie positionieren diese, Lassen Sie uns sagen, Barcelona Bild innen. Sobald Sie es darin platzieren, klicken Sie einfach hier und dann vergessen Sie es nachdem Sie Ihr Design fertig gestellt haben und es Zeit für den Export ist, dann kommen Sie direkt hier zum Datei-Exportbatch, und das war's. Sie können auch feststellen, Sapling Option direkt hier. So sapling ist im Grunde dieses externe Werkzeug, das von Teams auf der ganzen Welt verwendet wird, insbesondere in diesem UI-UX-Bereich. Und es ist auch in Adobe XD sehr nützlich. So Hartholz Bäumchen funktioniert und es gibt auch viele verschiedene Optionen da draußen zur Verfügung. Wenn Sie als Teil des Teams arbeiten, wenden Sie sich vielleicht an Ihr Team und sehen Sie, ob es diese Option für Sie in Adobe XD gibt, denn es gibt so viele verschiedene Softwares und Tools. Wirklich, Benutzer wissen nicht, welche man wählen soll, aber wie gesagt, Zeppelin ist einer der größten. Um Zeplin zu verwenden, müssten Sie im Grunde direkt hier zu unseren Plugins springen. Klicken Sie auf Ihre Plugins, gehen Sie zurück zu hier. Und dann werde ich hier klicken, um nach neuen Plug-Ins zu suchen. Und im Grunde wird dieses Plugin nur verwendet, um diese Integrationen zwischen Ihrem Chaplin-Konto und Ihrem Adobe XD-Konto zu machen. Es ist also viel einfacher, so zu funktionieren. Also, wenn ich hier nach ihm suche, zentriere ich, zum Beispiel, hier ist es. Also ist es sich für XD bewerben, müssten Sie es installieren und dann Ihr Sapling Konto mit Ihrem XD verbinden. Loggen Sie sich also einfach von XD in Ihr Sapling Konto ein und dann funktioniert es ein bisschen anders. Anstatt all diese verschiedenen Elemente zu teilen, all diese verschiedenen Bilder und Optionen mit Ihren Entwicklern. Sie würden Ihre gesamte Zeichenfläche hochladen. Und dann würde das Sampling zeigen, was ich dir schon hier zeige. Es würde also all diese verschiedenen Optionen, all diese verschiedenen Updates und all diese verschiedenen Einstellungen anzeigen. So können Entwickler diese Assets einfach direkt aus dem Sapling in das ARAF-Dateiformat exportieren , das sie wollen. Also gebe ich Ihnen all diese verschiedenen Optionen und Beispiele. So können Sie wählen, was Sie tun möchten. Und manchmal können Sie nicht wählen, weil Ihre Entwickler wählen. Es variiert also immer. Es hängt von den Benutzereinstellungen ab. Wie gesagt, einige Entwickler wirklich gerne die Art und Weise der Disk-Methode zu tun, wie ich Ihnen zum Beispiel gezeigt habe, alle diese Säuren in die Ordner legen. Sie können sehen, wie einfach es ist, nur die Symbole zu exportieren, weil sie sich im Grunde nicht in unserem Design ändern und wie einfach es ist, Bilder zu exportieren. Also, wenn Sie mit dem Entwerfen von Mischung auf den Markt für Exporte beginnen, später Sie einfach gehen, um alle Ihre Assets in den angegebenen Ordner zu exportieren, bis auf die angegebene Größe mit einem einzigen Klick. Es wird also viel einfacher sein, das zu tun. Alternativ können Sie Seite für Seite gehen, alle Ihre verschiedenen Assets auswählen, Control E drücken, Option auswählen, zum Beispiel PNG JPEG, PNG, SVG, was auch immer, und sie dann direkt in diesen bestimmten Ordner exportieren, in diese bestimmte Größe. Alternativ können Sie alle Ihre Assets herunterladen und in die Cloud hochladen, wie ich Ihnen gezeigt habe. Und dann werden Entwickler in der Lage sein, im Entwicklungsmodus des Präsentations-Sharing-Modus, werden sie in der Lage sein, es von dort herunterzuladen. Oder alternativ können sie wieder etwas wie Zeplin verwenden. So können Sie es mit XD verbinden. Dort können Sie Ihre Zeichenflächen hochladen. Und dann können sie den Export selbst durchführen. Wirklich, wenn es um diesen Teil geht, müssen Sie mit den Entwicklern Ihres Kunden beraten. Oder wenn wir als Teil des Teams arbeiten, können Sie auf diese Weise mit Entwicklern sprechen. Oder wenn Sie selbst Entwickler sind, stellen Sie sicher , dass Sie wählen, welche Option am besten für Sie geeignet ist. 56. Fertigstellung unseres Style: Lasst uns jetzt weitermachen und unseren Styleguide beenden. Denn wieder einmal ist Styleguide wirklich wichtig, vor allem für Sie als Designer, weil Sie einfach Elemente kopieren und einfügen können. Und als Entwickler, weil Entwickler leicht alles überprüfen können, was sie brauchen, um im Inneren zu überprüfen. Also, wenn wir zurück zu unserem Projekt gehen und ich werde Sie zurück zu unserem Styleguide. Was wir eigentlich hier einbeziehen müssen, sind im Grunde zwei Dinge. Wenn Sie irgendeine Art von Illustration verwenden, würde ich wirklich empfehlen, sie auch hier aufzunehmen. Denn wieder einmal ist es viel einfacher, wie Sie es in einem vorherigen Video gesehen haben , diese Illustration zu exportieren. Und ich würde immer Illustrationen als SVGs exportieren. Oder wenn einige Elemente seltsam sind, wie sie genau hier mit diesem Element in unserem Logo sind, dann würde ich es als PNG exportieren. Aber im Grunde, wann immer Sie die Chance mit diesen Vektorelementen hatten , wie sie mit Symbolen wie den arabischen Illustrationen sind. Ich würde immer wählen, sie als SVG zu exportieren , weil sie auf diese Weise ihre maximale Qualität behalten und sie werden diese Qualität nicht verlieren, wenn Sie diese Größe Ihres Dokuments ändern. Wie gesagt, wenn Sie Illustrationen verwenden, stellen Sie sicher, dass Sie sie hier einfügen. Aber weil wir es nicht sind, werden wir nur Typografie einschließen und weil wir all diese verschiedenen Optionen haben, aber ich werde tun, ist es einfach zu erweitern, um hier, stellen Sie sicher, dass ich das entfernen. Was können Sie also tun, ist, dass Sie einfach alle diese Abschnitte teilen können. Also lassen Sie uns das hier verschieben, und deshalb füge ich sie als Ordner ein. Und ich werde hier klicken und zum Beispiel Logo eingeben. Logo-Optionen. Und mal sehen, ich werde etwas Größeres wie 36 fett zum Beispiel verwenden. Ich werde es hier ausrichten. Ich werde sicherstellen, dass ich 80 bin. Und ich werde auch sicherstellen, dass ich 80 bin, oder noch besser, 100 so. Dann werde ich das duplizieren, stellen Sie sicher, dass ich 100 hier bin und Symbol oder Ikonographie verwenden, was immer Sie wollen. Positionieren Sie das hier, stellen Sie sicher, dass ich 100 bin. Und dann Kontrolle D 100. Noch einmal, ich, dass ich werde sicherstellen, dass diese Farben nennen. Klicken Sie hier. Aus irgendeinem Grund ist es seltsam, aber lass es uns hier sagen, es spielt eine Rolle. Und dann endlich, Kontrolle D. Stellen Sie sicher, dass es hier ist und nennen Sie diese Typografie. Und für die Typografie, Lassen Sie uns dies ein wenig mehr nach unten erweitern weil wir all diese verschiedenen Optionen enthalten haben. So traf es die Kontrolle D-Mischung. Ich bin 80 Jahre alt. Und ich beginne mit meiner größten Schrift und gehe dann den ganzen Weg runter. So können Sie sie so bestellen. Also kann ich hier klicken, das nach oben positionieren, dann, gut mit 120, dann mit einem 100 gehen. Hallo IT AT und ich kann mit 36. Und dann benutze 24, das ist diese dunkle, 24, das ist diese. Sie müssen nicht einmal diese verschiedenen Optionen einbeziehen. Sie können die Farben ändern, wie ich Ihnen während des gesamten Designs gezeigt habe. Aber dort möchten wir dies den Entwicklern geben, nur damit sie all diese verschiedenen Änderungen sehen können , die ich an unseren Texten vorgenommen habe. Fangen wir also mit dem größten an, der hier ist. Und was ich gerne mache, ist, dass ich diese Textdatei mit den Buchstaben des Alphabets habe. Wählen Sie einfach das aus, stellen Sie sicher, dass der Text links ausgerichtet ist und ich kann einfach rechts dort klicken und dort positionieren. Sie können dies tun, wenn Sie wollen, aber ich werde auch tun, ist zum Beispiel, nennen Sie diese Soda zu Hunderten, BT. Und lassen Sie es einfach dort. Stellen Sie sicher, dass ich 100 bin, zum Beispiel, steuern Sie die, stellen Sie sicher, dass ich 100 bin, dieses, stellen Sie sicher, 120, dann kann ich es so anpassen. Das ist also 120. Kontrollieren Sie die Position hier irgendwo, das sind 100. Und ich kann es hier platzieren. Kontrolle D 100, hier ist 80. Also werde ich das auf 100 ändern. Das wird a2 sein. Habe ich. Und schließlich, jetzt, wo alle diese fertig sind, kann ich mit meinem Alphabet weitermachen und enthalten, weil Sie Alphabet mit diesem einschließen können, aber Sie haben gesehen, wie groß Ihre Datei machen wird. Sie können auch hier klicken und verschieben und diese direkt hier in der gleichen Zeile verschieben. Also, das liegt wirklich alles an dir. Wie Sie das anpassen möchten, wie Sie damit arbeiten möchten. Aber ich werde es einfach so verwenden. Ich werde hier klicken und dies umbenennen. Das wird also Poppins sein. Und ich kann es nennen, zum Beispiel, Bolzen 36, BT. Und dann kann ich mein Alphabet so einbinden. Aber weil es den ganzen Weg bis hierher geht, kann ich vielleicht einfach so klicken und es so positionieren. Und Control D. Ich werde sicherstellen, dass das 100 ist. Und ich werde das Poppins 24 nennen. Klicken Sie also direkt hier. Jetzt, wo Sie den Text haben, ist es ganz einfach. Also 24, stellen Sie sicher, dass Sie die Einstellungen verwenden. Sie können auch Zeilenabstände einschließen. Sie können Zeichenabstand einschließen, Lucan enthalten Absatzabstand, Zeilenhöhe, was Sie wollen, können Sie hier einfügen. Aber wie er sagte, ich denke, es ist ein bisschen Zeitverschwendung weil Entwickler, die auch das enthalten haben. Wenn Sie teilen, werde ich dies direkt hier positionieren und doppelklicken Sie hier. Das ist also leicht. Also statt fett, werden wir Licht 24 verwenden. Und ich werde seinen Namen in diesen ändern. Änderungen sehen röter aus, nur damit wir sie sehen können. Und ich werde keinen weißen Text einschließen, weil er schwer zu lesen ist. Aber ich habe diesen eingeschlossen, weil wir gerade diese eine Instanz hatten. Aber mit diesem 24 haben wir auch weiße, dunkle, mutige und unregelmäßige Optionen mit dieser Farbe, die dunkelgrau ist. Endlich sind wir bei 24. Lassen Sie uns dies als 18 einschließen. Also werde ich mit 18 gehen. Und ich werde das in Fettlinie ändern. Das stellt sicher, dass wir 100 Control D. Ein weiteres Mal sind. Ich werde das als leichtes einbeziehen. Aber zum Beispiel kann ich es in dunkelgrau ändern. Und das wird Licht 18. Stellen Sie sicher, dass wir auch bei 100 sind. Und schließlich werde ich das nur ein wenig weiter ausbauen, nur damit ich sie in meine letzte aufnehmen kann, nämlich diese, die 16 ist. Und so ist es auch leicht. Und Molkerei, wie es so ist das unsere Typografie. Dies ist unser Styleguide für dieses spezielle Projekt abgeschlossen. Was wir hier auch einbeziehen können, ist, dass wir sie alle in separate Gruppen zusammenstellen können. Lassen Sie mich Ihnen das in einer Sekunde zeigen. Also geh zurück zu hier zu den Schichten. Also haben wir unsere Farben, wir haben unsere Symbole, Logo, und wir haben unsere Typografie. Also werde ich meinen Typ hier setzen, alle auswählen. Hit Control G nannte diese Typografie. Und was ich sicherstellen würde, ist, sie richtig auszurichten. Also wird das hier gehen, hier. Hier. Offensichtlich müssen Sie das nicht tun, aber ich mag es, meine Sachen so organisiert zu halten, wie Sie in dieser Klasse gesehen haben. Es ist also wirklich keine große Sache für mich, aber es wird viel angenehmer für Entwickler und Kunden sein. Ich kann es direkt unter unsere Farben setzen, innerhalb unserer Farben, ich kann diesen Text direkt hier setzen. Innerhalb der Symbole. Ich kann die Texte hier abstellen. Und Sie können die Symbole auch in einer Gruppe einfügen. Beispiel: erste Zeile, zweite Zeile, dritte Zeile oder farbiger Umriss. Du kannst tun, was du willst. N Schließlich, für die Logo-Optionen, kann ich es direkt hier setzen. Und jetzt kann ich sie alle gruppieren und einen Stapel erstellen. So kann ich zum Beispiel diese Leerzeichen ersetzen und sicherstellen, dass sie geändert werden. Aber was mir das auch gibt, lassen Sie mich dies in Styleguide ändern, ist die Option eines Stacks, um so zu arbeiten, wie es sollte. Also, was ich in diesen Farben tun werde, werde ich einfach meine Farben verwenden und dieses letzte Farbfeld verwenden, zum Beispiel. Ich werde es duplizieren. Hier ist es. Und ich werde es nach unten bringen. Und mal sehen, wir sind 80 hier, also werden wir hier 80 sein. Und ich werde es auch hier verschieben. Ich werde das benutzen und ich werde auch noch einmal Control D drücken. Und ich werde es hier positionieren. Also, was das sein wird, ist unser Schatten. Also lasst uns temp so ersetzen. Dies wird ein Schlagschatten oder Schlagschattenlicht noch besser sein. Das wird Schatten so dunkel fallen. Also auf dem Schlagschattenlicht werde ich auch eine weiße Farbe auf diesem verwenden. Weiße Farbe. Und was wir tun werden, ist, den Schlagschatten von irgendwo zu kopieren. Gehen wir zum Beispiel hierher. Wählen Sie diese Option, klicken Sie mit der rechten Maustaste und kopieren Sie können dann auch mit 55 gehen, 10, und dann wählen Sie 5, die noch besser geeignet für uns in noch mehr nutzbar ist. Und ich werde hier auf eine Farbe klicken. Ich nenne es eigentlich, nein, lass uns mit Farbe gehen. Also werde ich entweder mit der rechten Maustaste einfügen Aussehen, Es wird diesen Schlagschatten einfügen. Das kann ich auch manuell machen. Also geh mit 55 bis zehn und dann statt fünf werde ich das auf acht so einstellen. So wird das zum Beispiel sein, mal sehen. Wir können mit x gehen, y 55, 10. So kann ich es x, y nennen. Dies wird 5, 5, 10, oder Basicity 5% zum Beispiel sein. Und ich kann das hier klonen. Und das wird bei 8% liegen. Also wieder, Entwickler können dies leicht tun und wir müssen nur die Farbe auswählen, die verfärbt wird. Also kopiere es. Ich werde gleich hier springen, die Farbe einfügen. Lassen Sie uns das noch einmal sehen. Es werden alle Nullen sein. Also springen sechs Nullen hier, 1, 2, 3, 4, 5, 6. Es hat Control C ausgewählt, Wieder ausgewählt rechts hier Kontrolle V. Und was ich tun kann, ist auch sicherstellen, dass, zum Beispiel, Position und rechts hier, und stellen Sie sicher, dass ich bei zehn bin. Und tun Sie das Gleiche für diesen hier. Stellen Sie sicher, dass ich bei zehn bin, und stellen Sie sicher, dass es links ausgerichtet ist. gleiche wie dieses, nur für den Fall, dass ich einige zusätzliche Änderungen an einigen meiner Farben vornehmen möchte . Und weil sie alle in einem Stapel sind, sie alle schön angepasst und Sie können dies einfach abschließen. Und schließlich, wenn es um diesen Styleguide geht, können Sie ihn als PDF exportieren. Und Sie können es auch in Ihrer Datei speichern, wie wir es im Grunde tun wenn es darum geht, Ihre Datei mit Ihren Kunden und Entwicklern zu teilen. Was ich tun würde, ist im Grunde meine gesamte Datei zu teilen. Also alles, was Sie hier gesehen haben, würde ich mit ihnen teilen, ich würde nicht entfernen Design kurz oder mit behalten es richtig in, wenn sie wollen, dass ich das Design Brief exportieren, unsere Exportieren es als PDF und dann werden sie in der Lage sein, es zu drucken, zeigte, dass zwei dort. Zum Beispiel, Miteigentümer, Partner, Designer, Entwickler, wer auch immer im Team. Und dann würde ich auch sicherstellen, dass Sie zum Beispiel Styleguide exportieren, wenn sie als PDF möchten, teilen Sie das mit ihnen. Und diese Papier-Wireframes, Ich würde sie einfach als JPEG-Bilder exportieren, so dass ich das mit ihnen teilen kann, wenn sie wollen. Wenn es um Styleguide geht, wie gesagt, können Sie es als PDF exportieren, wenn sie es drucken wollten. Sie können so viel Zeit und Mühe verbringen, wie Sie möchten, um diesen Styleguide. Aber meiner Meinung nach ist diese grundlegende Struktur wirklich alles, was notwendig ist, alles, was für diese Art von Projekten reicht, weil ich diese Styleguides im Web gesehen habe und Sie diese aufwendigen Änderungen sehen können, aufwändige Setups, bei denen die Styleguides, aber ich glaube nicht wirklich, dass das notwendig ist, vor allem, wenn Sie keine Zeit haben, während Sie an diesen Projekten arbeiten, weil das leicht in Ihre Zeit, in Ihr Budget essen wird. Und es wird Sie wirklich variieren, während es nicht wirklich alles, was nötig ist. Erstellen Sie also Ihren Styleguide, während Sie Ihr Projekt erstellen, Sie mehr und mehr Elemente hinzufügen, gehen Sie einfach voran und erstellen Sie Ihren Styleguide und fügen Sie mehr hinzu. Aber im Grunde, das war's. So einfach ist es, mit Styleguides zu arbeiten. Und deshalb sind sie wichtig, besonders wenn es um den Export in Ihre Säuren geht, denn Sie können einfach alle Ihre Assets auswählen, Control E drücken und sie in das gewünschte Dateiformat exportieren. 57. Skillshare-Kursprojekt: Für Ihr Skillshare Klassenprojekt möchte ich wirklich, dass Sie eine dieser Seiten neu erstellen, aber Sie können verschiedene Elemente verwenden. Zum Beispiel können Sie verschiedene Schriftarten verwenden, Sie können verschiedene Farben verwenden, Sie können verschiedene Symbole verwenden. Sie können verschiedene Bilder verwenden, nur um die Dinge ein wenig aufzupeppen und ein bisschen besser zu lernen. Denn wenn Sie dieser Klasse Schritt für Schritt folgen, werden Sie viel lernen, aber Sie werden noch mehr lernen, wenn Sie versuchen, verschiedene Elemente zu verwenden, die Sie online finden, vor allem mit Bildern, weil nicht alle Diese Bilder werden genau die gleichen in verschiedenen Szenarien skalieren. Deshalb denke ich, mit Bildern, vor allem, werden Sie das allgemeine Aussehen Ihres Designs und das allgemeine Gefühl Ihres Designs viel mehr als zum Beispiel mit Schriftarten ändern und das allgemeine Gefühl Ihres Designs viel mehr als . Ich würde Sie auch ermutigen, verschiedene Schriftarten zu wählen, verschiedene Farben zu wählen, verschiedene Symbole, nur ein Gewürz Dinge ein wenig, während diese Methoden verwenden, können Sie auch dieses genaue Layout verwenden. Sie können diese genaue Struktur, Ordnernamen verwenden. Alles kann gleich sein, aber einfach würzen Sie es nur ein wenig, indem Sie verschiedene Bilder hinzufügen, indem Sie verschiedene Symbole, verschiedene Farben, verschiedene Topografie hinzufügen. Also all diese Dinge, und es wird Ihnen helfen, all das Zeug viel mehr und viel schneller und viel besser zu lernen . Dann folgen Sie mir Schritt für Schritt und tun Sie einfach, was ich tue, um sie zu erstellen. Sie können einfach zusätzliche Zeichenflächen innerhalb dieser Datei erstellen und dann einfach Schritt für Schritt folgen, weil das für Sie viel einfacher wird , dann einfach Ihre Fehler zu überprüfen und sehen, was ich getan habe und zu überprüfen, ob Sie das getan haben richtig. Und es wird Ihnen eine Menge helfen, weil Sie alles in der gleichen Datei haben , so dass Sie leicht vergleichen und kontrastieren können. Vielen Dank nochmals für die Teilnahme an dieser Klasse und ich freue mich wirklich darauf, zu sehen, was ihr für euer Skillshare Klassenprojekt erstellen werdet und das als Bild hochladen, damit ihr die gesamte Zeichenfläche exportieren könnt, zum Beispiel als JPEG. Und Sie können diese JPEG in Skillshare Klassenprojekte hochladen. Und ich freue mich sehr darauf, zu sehen, was ihr schaffen könnt und euch hoffentlich auch ein Feedback geben zu können, was ihr weitermachen könnt. Aber wie gesagt, versuchte, die Dinge nur ein wenig aufzupeppen, indem zum Beispiel verschiedene Farben, verschiedene Topografie und verschiedene Bilder hinzugefügt wurden. Ich freue mich wieder darauf, zu sehen, was ihr erschaffen könnt. 58. Schlussbemerkung und Ressourcen: Danke, dass Sie diese Klasse beobachtet haben. Ich hoffe wirklich, dass du einen Wert daraus hast. Und ich hoffe wirklich, dass Sie das, was Sie in dieser Klasse gelernt haben, in Ihren Workflow anwenden werden. Und ich hoffe wirklich, dass du hier und da ein paar Tipps abgeholt hast. Es wird Ihren Workflow verbessern und Ihren Workflow beschleunigen, was meiner Meinung nach das Wichtigste im Designgeschäft insgesamt ist, in der Lage sein, schnell zu arbeiten und in der Lage zu sein, auf intelligente Weise zu arbeiten , ohne zu viel Zeit zu verschwenden Denn am Ende des Tages, Zeit ist Geld in diesem Geschäft gleich wie in jedem anderen Geschäft, weil Sie alles bekommen können, was Sie wollen. Aber wenn Sie nicht genug Zeit haben, dass es wirklich nur, ist es egal. Also haben Sie diese Datei, können Sie damit spielen. Achten Sie darauf, die Richtlinien zu befolgen, die ich Ihnen für die Verwendung dieser Bilder und diese Symbole sagte , um nur sicherzustellen, dass Sie sie als Lernwerkzeuge verwenden. Stellen Sie sicher, dass Sie sie nur verwenden, um zu lernen, wie Sie sie in diesem Projekt verwenden. Verwenden Sie sie nicht für Ihre persönlichen oder kommerziellen Projekte. Denn wenn du das tust , riskierst du all diese rechtlichen Probleme. Stellen Sie sicher, wenn Sie sie verwenden möchten, können Sie Envato Elements verwenden und ich werde die Links zu allem, worüber ich in der PDF Kasse gesprochen habe, dass PDF und klicken Sie einfach auf den Link, die Sie interessieren, besuchen Sie diesen Link und dann tun, was Sie wollen. Grundsätzlich sage ich nur üben, üben, üben, üben, üben. Es macht es einfach perfekt. Je öfter Sie dies tun, desto öfter Sie üben, diese Dateien erstellen und diese Layouts zu erstellen, werden Sie besser darin sein. Also danke nochmals für das Anschauen und ich hoffe wirklich, dass Sie etwas Wert aus dieser Klasse bekommen haben und dass Sie diesen Wert auf Ihre zukünftige Arbeit anwenden werden. Kümmern Sie sich.